/* ══════════════════════════════════════════════════════════════════════════
   Peter Silie Admin — desktop shell
   A macOS-shaped webtop: menu bar, wallpaper, floating windows, dock.
   Every colour is a token so the accent themes at the bottom can repaint the
   whole surface by redefining eight variables.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Accent — overridden per theme */
    --accent:        #35c46b;
    --accent-2:      #17a06a;
    --accent-ink:    #05130c;
    --hue1:          152;
    --hue2:          178;

    /* Dark surface set */
    --bg:            #0b0f10;
    --surface:       rgba(28, 33, 35, 0.78);
    --surface-solid: #1b2022;
    --surface-2:     rgba(255, 255, 255, 0.045);
    --surface-3:     rgba(255, 255, 255, 0.09);
    --text:          #eef2f1;
    --text-dim:      #9aa5a4;
    --text-faint:    #6b7674;
    --border:        rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.2);
    --shadow:        0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --menubar:       rgba(18, 22, 23, 0.62);
    --danger:        #ff5f57;
    --warn:          #febc2e;
    --ok:            #28c840;

    --radius:        12px;
    --radius-sm:     8px;
    --font:          -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --mono:          "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
}

html[data-mode="light"] {
    --bg:            #dfe6e4;
    --surface:       rgba(252, 253, 253, 0.82);
    --surface-solid: #f7f9f9;
    --surface-2:     rgba(0, 0, 0, 0.035);
    --surface-3:     rgba(0, 0, 0, 0.07);
    --text:          #121817;
    --text-dim:      #576161;
    --text-faint:    #838d8c;
    --border:        rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.22);
    --shadow:        0 22px 50px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12);
    --menubar:       rgba(255, 255, 255, 0.6);
}

* { box-sizing: border-box; }

/* A class-level display rule would otherwise beat the browser's [hidden] rule. */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ── Login ───────────────────────────────────────────────────────────────── */

.lock {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
}

.lock-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(1100px 700px at 20% 15%, hsl(var(--hue1) 55% 26%) 0%, transparent 60%),
        radial-gradient(900px 800px at 85% 85%, hsl(var(--hue2) 60% 22%) 0%, transparent 62%),
        linear-gradient(150deg, #05080a 0%, #0d1416 55%, #070b0c 100%);
    filter: saturate(1.1);
}
html[data-mode="light"] .lock-bg {
    background:
        radial-gradient(1100px 700px at 20% 15%, hsl(var(--hue1) 62% 72%) 0%, transparent 60%),
        radial-gradient(900px 800px at 85% 85%, hsl(var(--hue2) 60% 74%) 0%, transparent 62%),
        linear-gradient(150deg, #eef3f2 0%, #dbe6e4 60%, #eaf0ef 100%);
}

.lock-card {
    position: relative;
    width: min(360px, calc(100vw - 40px));
    padding: 34px 30px 26px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    text-align: center;
    animation: pop .3s cubic-bezier(.2, .9, .3, 1.2);
}

.lock-avatar {
    width: 74px; height: 74px; margin: 0 auto 14px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 38px;
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 24px hsl(var(--hue1) 60% 30% / .5);
}

.lock-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.lock-sub   { margin: 4px 0 22px; font-size: 13px; color: var(--text-dim); }

.lock-field { display: block; text-align: left; margin-bottom: 12px; }
.lock-field span { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; letter-spacing: .3px; }
.lock-field input {
    width: 100%; padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.lock-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.lock-button {
    width: 100%; margin-top: 6px; padding: 10px;
    border: 0; border-radius: 9px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: var(--accent-ink);
    font-size: 14px; font-weight: 650;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}
.lock-button:hover  { filter: brightness(1.08); }
.lock-button:active { transform: scale(.985); }
.lock-button[disabled] { opacity: .6; cursor: progress; }

.lock-error {
    margin: 4px 0 10px; padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    color: #ffd9d6; font-size: 12.5px;
}
html[data-mode="light"] .lock-error { color: #7d1710; }

.lock-hint { margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-faint); }

/* ── Desktop surface ─────────────────────────────────────────────────────── */

.desktop {
    position: fixed; inset: 0;
    background:
        radial-gradient(1200px 800px at 15% 10%, hsl(var(--hue1) 48% 22%) 0%, transparent 58%),
        radial-gradient(1000px 900px at 88% 92%, hsl(var(--hue2) 52% 18%) 0%, transparent 60%),
        linear-gradient(160deg, #060a0b 0%, #0c1214 50%, #060909 100%);
}
html[data-mode="light"] .desktop {
    background:
        radial-gradient(1200px 800px at 15% 10%, hsl(var(--hue1) 58% 76%) 0%, transparent 58%),
        radial-gradient(1000px 900px at 88% 92%, hsl(var(--hue2) 55% 78%) 0%, transparent 60%),
        linear-gradient(160deg, #eef3f2 0%, #d9e4e2 50%, #e9efee 100%);
}

/* ── Menu bar ────────────────────────────────────────────────────────────── */

.menubar {
    position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 500;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px;
    background: var(--menubar);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    user-select: none;
}

.menubar-left, .menubar-right { display: flex; align-items: center; gap: 2px; }

.menu-item {
    background: none; border: 0; color: var(--text);
    padding: 3px 9px; border-radius: 6px;
    font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: var(--surface-3); }
.menu-logo   { font-size: 14px; padding: 3px 8px; }
.menu-active { font-weight: 650; cursor: default; }
.menu-active:hover { background: none; }

.status-item {
    padding: 3px 8px; border-radius: 6px;
    background: none; border: 0; color: var(--text);
    font-size: 12px; font-variant-numeric: tabular-nums; cursor: default;
    display: inline-flex; align-items: center; gap: 4px;
}
button.status-item { cursor: pointer; }
button.status-item:hover { background: var(--surface-3); }
.status-user { color: var(--text-dim); }
.status-item.is-bad  { color: var(--danger); }
.status-item.is-good { color: var(--accent); }

/* ── Dropdown menus ──────────────────────────────────────────────────────── */

.menus { position: absolute; inset: 0; pointer-events: none; z-index: 700; }

.dropdown {
    position: absolute; pointer-events: auto;
    min-width: 200px; padding: 5px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    animation: dropIn .12s ease-out;
}

.dropdown button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 6px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--text); font-size: 13px; cursor: pointer;
}
.dropdown button:hover { background: var(--accent); color: var(--accent-ink); }
.dropdown button .tick { margin-left: auto; opacity: .85; }
.dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 5px 4px; }
.dropdown .dropdown-label {
    padding: 5px 10px 3px; font-size: 10.5px; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-faint);
}

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 8px 8px; }
.swatch {
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 2px solid transparent; padding: 0;
    transition: transform .12s;
}
.swatch:hover { transform: scale(1.09); }
.swatch[aria-pressed="true"] { border-color: var(--text); }

/* ── Windows ─────────────────────────────────────────────────────────────── */

.windows { position: absolute; inset: 28px 0 0 0; }

.win {
    position: absolute;
    display: flex; flex-direction: column;
    min-width: 380px; min-height: 220px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    overflow: hidden;
    animation: pop .22s cubic-bezier(.2, .9, .3, 1.15);
}

.win.is-inactive { box-shadow: 0 12px 34px rgba(0, 0, 0, .38); }
.win.is-inactive .win-title { color: var(--text-faint); }
.win.is-minimizing { animation: minimize .22s ease-in forwards; }
.win.is-zoomed { border-radius: 0; }

.win-bar {
    height: 38px; flex: 0 0 38px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    cursor: grab; user-select: none;
}
.win-bar:active { cursor: grabbing; }

.lights { display: flex; gap: 8px; }
.light {
    width: 12px; height: 12px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    font-size: 8px; line-height: 1; color: rgba(0, 0, 0, .55);
    font-weight: 700;
}
.light span { opacity: 0; transition: opacity .1s; }
.lights:hover .light span { opacity: 1; }
.light-close { background: #ff5f57; }
.light-min   { background: #febc2e; }
.light-zoom  { background: #28c840; }
.win.is-inactive .light { background: var(--surface-3); }

.win-title {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.win-icon { font-size: 13px; }
.win-tools { display: flex; gap: 6px; min-width: 54px; justify-content: flex-end; }

.win-body { flex: 1; overflow: auto; padding: 0; position: relative; }

.win-resize {
    position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
    cursor: nwse-resize; z-index: 3;
}
.win-resize-r { position: absolute; top: 38px; right: 0; bottom: 16px; width: 6px; cursor: ew-resize; }
.win-resize-b { position: absolute; left: 0; right: 16px; bottom: 0; height: 6px; cursor: ns-resize; }

/* ── Dock ────────────────────────────────────────────────────────────────── */

.dock-wrap {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 400;
    display: flex; justify-content: center;
    pointer-events: none;
}

.dock {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 7px 10px 9px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    pointer-events: auto;
    max-width: calc(100vw - 24px);
    /* Deliberately no scroll container: any overflow context would clip the
       magnified icon and its tooltip. Narrow screens shrink the icons instead. */
}

.dock-app {
    position: relative;
    width: 46px; height: 46px; flex: 0 0 46px;
    border: 0; border-radius: 12px; padding: 0;
    display: grid; place-items: center;
    font-size: 23px; cursor: pointer;
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    transition: transform .16s cubic-bezier(.2, .9, .3, 1.3), background .16s;
    transform-origin: bottom center;
}
.dock-app:hover {
    transform: scale(1.28) translateY(-6px);
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    z-index: 2;   /* lift the magnified icon over its neighbours */
}
.dock-app::after {
    content: ""; position: absolute; bottom: -5px; left: 50%; translate: -50% 0;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--text); opacity: 0; transition: opacity .15s;
}
.dock-app.is-running::after { opacity: .8; }
.dock-sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--border); flex: 0 0 1px; }

/* Ten icons need ~540px. Below that the dock scales down rather than scrolling,
   so the hover magnification always has room to grow into. */
@media (max-width: 660px) {
    .dock     { gap: 4px; padding: 6px 8px 8px; }
    .dock-app { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; }
}
@media (max-width: 480px) {
    .dock     { gap: 3px; }
    .dock-app { width: 31px; height: 31px; flex-basis: 31px; font-size: 16px; border-radius: 9px; }
    .dock-tip { bottom: 46px; }
}

.dock-tip {
    position: absolute; bottom: 58px; left: 50%; translate: -50% 0;
    padding: 4px 9px; border-radius: 7px;
    background: var(--surface-solid); border: 1px solid var(--border);
    font-size: 11.5px; white-space: nowrap; color: var(--text);
    opacity: 0; pointer-events: none; transition: opacity .12s;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.dock-app:hover .dock-tip { opacity: 1; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */

.toasts {
    position: absolute; top: 38px; right: 12px; z-index: 800;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}

.toast {
    min-width: 250px; max-width: 340px;
    padding: 10px 13px;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    font-size: 13px; line-height: 1.45;
    display: flex; gap: 9px; align-items: flex-start;
    animation: slideIn .2s cubic-bezier(.2, .9, .3, 1.1);
    pointer-events: auto;
}
.toast.is-out { animation: slideOut .2s ease-in forwards; }
.toast-icon { font-size: 14px; line-height: 1.3; }
.toast-success .toast-icon { color: var(--ok); }
.toast-warning .toast-icon { color: var(--warn); }
.toast-error   .toast-icon { color: var(--danger); }

/* ── Sheets (modal dialogs, mac-style: drop from the window's title bar) ──── */

.sheets { position: absolute; inset: 0; z-index: 850; pointer-events: none; }

.sheet-backdrop {
    position: absolute; inset: 0; pointer-events: auto;
    background: rgba(0, 0, 0, .35);
    animation: fadeIn .15s ease-out;
    display: grid; place-items: center;
}

.sheet {
    width: min(460px, calc(100vw - 40px));
    max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    border-radius: 14px;
    background: var(--surface-solid);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    animation: sheetIn .22s cubic-bezier(.2, .9, .3, 1.1);
    overflow: hidden;
}
.sheet-head { padding: 18px 20px 6px; }
.sheet-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.sheet-head p  { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.sheet-body { padding: 14px 20px; overflow: auto; }
.sheet-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes pop      { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes dropIn   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn  { from { opacity: 0; transform: translateY(-18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slideOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes minimize { to { opacity: 0; transform: scale(.16) translateY(60vh); } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Accent themes — each sets the accent pair plus the two wallpaper hues.
   ══════════════════════════════════════════════════════════════════════════ */

html[data-theme="green"]  { --accent: #35c46b; --accent-2: #17a06a; --accent-ink: #04130b; --hue1: 152; --hue2: 178; }
html[data-theme="blue"]   { --accent: #3d8bff; --accent-2: #2563d8; --accent-ink: #030d1f; --hue1: 218; --hue2: 248; }
html[data-theme="teal"]   { --accent: #2bc4c8; --accent-2: #128f9c; --accent-ink: #021113; --hue1: 186; --hue2: 205; }
html[data-theme="purple"] { --accent: #a06bff; --accent-2: #7538e0; --accent-ink: #10041f; --hue1: 268; --hue2: 292; }
html[data-theme="pink"]   { --accent: #ff6ba8; --accent-2: #e03a80; --accent-ink: #1d0410; --hue1: 330; --hue2: 300; }
html[data-theme="red"]    { --accent: #ff5f52; --accent-2: #d32f27; --accent-ink: #1d0503; --hue1: 6;   --hue2: 26;  }
html[data-theme="orange"] { --accent: #ff9f2e; --accent-2: #e0700f; --accent-ink: #1d0d02; --hue1: 30;  --hue2: 48;  }
html[data-theme="grey"]   { --accent: #9aa7ad; --accent-2: #6b787e; --accent-ink: #0a0e10; --hue1: 200; --hue2: 210; }