/* ==========================================================================
   Codesey desktop
   No framework, no build step. Theming is driven by CSS variables that the
   settings store updates at runtime (--accent, --accent-contrast, data-theme).
   Deliberately no backdrop-filter / blur: it is expensive on Raspberry Pi GPUs.
   ========================================================================== */

:root {
    --accent: #0063b1;
    --accent-contrast: #fff;
    --accent-hover: color-mix(in srgb, var(--accent) 80%, #000);

    --taskbar-h: 44px;
    --titlebar-h: 36px;
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* shell (taskbar, menus) is always dark, like the original */
    --shell-bg: #0b1118;
    --shell-raised: #14191f;
    --shell-hover: rgba(255, 255, 255, .10);
    --shell-active: rgba(255, 255, 255, .16);
    --shell-fg: #eef2f6;
    --shell-muted: #98a6b5;
    --shell-border: rgba(255, 255, 255, .08);

    /* windows follow the light/dark theme */
    --win-bg: #fff;
    --win-fg: #1c2733;
    --win-muted: #6a7885;
    --win-titlebar: #f4f6f8;
    --win-titlebar-idle: #eceff2;
    --win-border: rgba(15, 25, 35, .22);
    --win-shadow: 0 12px 32px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .2);
    --win-shadow-idle: 0 4px 14px rgba(0, 0, 0, .2);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --win-bg: #1c232b;
    --win-fg: #e8edf2;
    --win-muted: #93a1ae;
    --win-titlebar: #262f39;
    --win-titlebar-idle: #202830;
    --win-border: rgba(255, 255, 255, .16);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #164270;
    font: 14px/1.4 var(--font);
    color: var(--shell-fg);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Desktop & wallpapers ------------------------------------------------ */

#desktop {
    position: fixed;
    inset: 0;
    background-color: #164270;
    background-position: center;
    background-size: cover;
}
:root[data-wallpaper="codesey"] #desktop { background-image: url("/img/aacontent/wallpaper/desktop.png"); }
:root[data-wallpaper="solid"] #desktop { background-color: color-mix(in srgb, var(--accent) 55%, #000); }
:root[data-wallpaper="gradient"] #desktop {
    background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 25%, #000) 70%);
}

/* The window layer is the desktop area: everything above the taskbar. */
.window-layer {
    position: absolute;
    inset: 0 0 var(--taskbar-h) 0;
    overflow: hidden;
}

/* While dragging/resizing, iframes must not swallow pointer events. */
.is-interacting iframe { pointer-events: none; }
.is-interacting, .is-interacting * { -webkit-user-select: none; user-select: none; }

/* ---- Windows ------------------------------------------------------------- */

.window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--win-bg);
    color: var(--win-fg);
    border: 1px solid var(--win-border);
    border-radius: var(--radius);
    box-shadow: var(--win-shadow-idle);
    contain: layout;
    animation: win-in .14s ease-out;
    transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.window.is-focused {
    border-color: var(--accent);
    box-shadow: var(--win-shadow);
}
.window.is-minimized {
    opacity: 0;
    transform: translateY(24px) scale(.96);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility 0s .14s;
}
.window[data-mode="maximized"] { border-radius: 0; border-width: 0; }
.window[data-mode="left"], .window[data-mode="right"] { border-radius: 0; }

@keyframes win-in {
    from { opacity: 0; transform: scale(.97); }
}

.titlebar {
    flex: none;
    display: flex;
    align-items: center;
    height: var(--titlebar-h);
    background: var(--win-titlebar-idle);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    touch-action: none;
}
.window[data-mode="maximized"] .titlebar,
.window[data-mode="left"] .titlebar,
.window[data-mode="right"] .titlebar { border-radius: 0; }
.window.is-focused .titlebar { background: var(--win-titlebar); }

.titlebar-icon {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 10px;
    border-radius: 4px;
    flex: none;
    object-fit: contain;
    pointer-events: none;
}
.titlebar-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 13px;
    color: var(--win-muted);
    pointer-events: none;
}
.window.is-focused .titlebar-title { color: var(--win-fg); }

.titlebar-buttons { display: flex; align-self: stretch; }
.tb-btn {
    width: 46px;
    border: 0;
    background: transparent;
    color: var(--win-fg);
    display: grid;
    place-items: center;
    padding: 0;
}
.tb-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.2; pointer-events: none; }
.tb-btn:hover { background: rgba(127, 127, 127, .2); }
.tb-btn.tb-close:hover { background: #e81123; color: #fff; }
.tb-btn.tb-close { border-top-right-radius: calc(var(--radius) - 1px); }
.window[data-mode="maximized"] .tb-close { border-radius: 0; }

.window-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--win-bg);
    border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
    overflow: hidden;
}
.window-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--win-bg);
}

/* Resize handles: invisible strips just outside the window edge. */
.resize-handle { position: absolute; z-index: 2; touch-action: none; }
.resize-handle[data-dir="n"]  { top: -4px;    left: 10px;  right: 10px;  height: 8px; cursor: ns-resize; }
.resize-handle[data-dir="s"]  { bottom: -4px; left: 10px;  right: 10px;  height: 8px; cursor: ns-resize; }
.resize-handle[data-dir="e"]  { right: -4px;  top: 10px;   bottom: 10px; width: 8px;  cursor: ew-resize; }
.resize-handle[data-dir="w"]  { left: -4px;   top: 10px;   bottom: 10px; width: 8px;  cursor: ew-resize; }
.resize-handle[data-dir="ne"] { top: -4px;    right: -4px; width: 14px;  height: 14px; cursor: nesw-resize; }
.resize-handle[data-dir="nw"] { top: -4px;    left: -4px;  width: 14px;  height: 14px; cursor: nwse-resize; }
.resize-handle[data-dir="se"] { bottom: -4px; right: -4px; width: 14px;  height: 14px; cursor: nwse-resize; }
.resize-handle[data-dir="sw"] { bottom: -4px; left: -4px;  width: 14px;  height: 14px; cursor: nesw-resize; }
.window:not([data-mode="normal"]) .resize-handle,
.window[data-resizable="false"] .resize-handle { display: none; }

#snap-preview {
    position: absolute;
    z-index: 5000;
    pointer-events: none;
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--radius);
    transition: left .1s, top .1s, width .1s, height .1s;
}
#snap-preview[hidden] { display: none; }

/* ---- Taskbar ------------------------------------------------------------- */

#taskbar {
    position: fixed;
    inset: auto 0 0 0;
    height: var(--taskbar-h);
    z-index: 9600;           /* above menus, so their shadows don't paint over it */
    display: flex;
    align-items: stretch;
    background: var(--shell-bg);
    color: var(--shell-fg);
    border-top: 1px solid var(--shell-border);
}

.start-btn, .rail-btn {
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}
.start-btn {
    flex: none;
    width: 52px;
    background-image: url("/img/aacontent/icons/taskbutton.png");
}
.start-btn:hover, .start-btn[aria-expanded="true"] {
    background-color: var(--shell-hover);
    background-image: url("/img/aacontent/icons/taskbutton_over.png");
}

.taskbar-search {
    flex: none;
    width: min(300px, 28vw);
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #1c2733;
    -webkit-user-select: text;
    user-select: text;
    appearance: none;
}
.taskbar-search::placeholder { color: #6a7885; }
.taskbar-search:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.task-items {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
    padding-left: 4px;
}
.task-btn {
    position: relative;
    flex: none;
    width: 48px;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    padding: 0;
}
.task-btn img, .app-tile { width: 24px; height: 24px; pointer-events: none; }
.task-btn::after {              /* "this program is open" bar */
    content: "";
    position: absolute;
    left: 8px; right: 8px; bottom: 0;
    height: 3px;
    background: var(--accent);
    opacity: .55;
    border-radius: 2px 2px 0 0;
    transition: left .15s, right .15s, opacity .15s;
}
.task-btn:hover { background: var(--shell-hover); }
.task-btn.is-active { background: var(--shell-active); }
.task-btn.is-active::after { left: 4px; right: 4px; opacity: 1; }
.task-btn.is-minimized::after { left: 16px; right: 16px; opacity: .4; }

.app-tile {                      /* fallback icon: first letter on a tile */
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 13px;
}

.tray { flex: none; display: flex; align-items: stretch; }
.clock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--shell-fg);
    font-variant-numeric: tabular-nums;
}
.clock-date { color: var(--shell-muted); font-size: 11px; }
.show-desktop {
    width: 10px;
    border: 0;
    border-left: 1px solid var(--shell-border);
    background: transparent;
    padding: 0;
}
.show-desktop:hover { background: var(--shell-active); }

/* ---- Menus --------------------------------------------------------------- */

.menu {
    position: fixed;
    z-index: 9500;
    background: var(--shell-raised);
    color: var(--shell-fg);
    border: 1px solid var(--shell-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    animation: menu-in .12s ease-out;
}
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(8px); } }

.start-menu {
    left: 0;
    bottom: var(--taskbar-h);
    width: min(400px, 100vw);
    height: min(600px, calc(100vh - var(--taskbar-h)));
    display: flex;
    border-radius: 0 var(--radius) 0 0;
}
.start-rail {
    flex: none;
    width: 52px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--shell-bg);
}
.rail-btn { height: 48px; }
.rail-btn:hover, .rail-btn:focus-visible { background-color: var(--shell-hover); }
.rail-settings { background-image: url("/img/aacontent/icons/settingsbutton.png"); }
.rail-settings:hover { background-image: url("/img/aacontent/icons/settingsbutton_over.png"); }
.rail-power { background-image: url("/img/aacontent/icons/powerbutton.png"); }
.rail-power:hover { background-image: url("/img/aacontent/icons/powerbutton_over.png"); }

.start-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.start-heading {
    padding: 14px 16px 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shell-muted);
}
.start-list { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.start-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    min-height: 44px;
}
.start-item:hover, .start-item:focus-visible { background: var(--shell-hover); outline: none; }
.start-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.start-item .app-tile, .start-item img { width: 28px; height: 28px; flex: none; }
.start-item-text { min-width: 0; display: flex; flex-direction: column; }
.start-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-item-desc { font-size: 12px; color: var(--shell-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-empty { padding: 20px 16px; color: var(--shell-muted); }

.popup-menu { min-width: 200px; padding: 4px; border-radius: var(--radius); }
.popup-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}
.popup-item:hover, .popup-item:focus-visible { background: var(--shell-hover); outline: none; }
.popup-item[disabled] { opacity: .4; pointer-events: none; }
.popup-sep { height: 1px; margin: 4px 6px; background: var(--shell-border); }

/* ---- Toasts -------------------------------------------------------------- */

#toasts {
    position: fixed;
    right: 12px;
    bottom: calc(var(--taskbar-h) + 12px);
    z-index: 9400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--shell-raised);
    color: var(--shell-fg);
    border: 1px solid var(--shell-border);
    border-left: 4px solid var(--accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    animation: menu-in .18s ease-out;
}
.toast-title { font-weight: 600; font-size: 12px; color: var(--shell-muted); }
.toast-body { overflow-wrap: anywhere; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; background: #164270; z-index: 99999; }

/* ---- Small screens & accessibility -------------------------------------- */

@media (max-width: 640px) {
    .taskbar-search { width: 34vw; padding: 0 10px; }
    .clock-date { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .window, .menu, .toast, #snap-preview, .task-btn::after { animation: none !important; transition: none !important; }
}

/* Fallback icon in a title bar */
.titlebar .app-tile { width: 18px; height: 18px; margin: 0 8px 0 10px; font-size: 10px; border-radius: 4px; flex: none; }

/* Program icons are white glyphs on transparent (as in the original), so they get a dark-blue tile. */
.start-item img, .titlebar img.titlebar-icon { background: #164270; border-radius: 5px; padding: 3px; }
.titlebar img.titlebar-icon { width: 20px; height: 20px; margin: 0 8px 0 9px; }