/* =========================================================================
 * GiggleFTP theme engine.
 *
 * Loaded after 98.css and style.css. Scoped to html[data-theme=...] set by
 * theme-boot.js before first paint. Every theme sets a data-theme attribute
 * (there is no attribute-less default any more — Windows 2000 is the default
 * and uses data-theme="win2k").
 *
 * Two axes:
 *   - data-theme : which palette (win2k + 5 designed skins)
 *   - data-mode  : "dark" adds a dark-variant override block (win2k has none —
 *                  it is intentionally left as the single classic look).
 *
 * Structure:
 *   1. Per-theme variable blocks (light) + their [data-mode="dark"] overrides
 *   2. Shared engine — consumes the variables for every UI surface
 *   3. Per-theme flourishes that can't be expressed as variables
 * ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1. Theme palettes                                                   */
/* ------------------------------------------------------------------ */

/* Windows 2000 — classic blue (left untouched; no dark variant) */
html[data-theme="win2k"] {
  --bg-desktop: #3a6ea5;
  --window-bg: #d4d0c8;
  --chrome-bg: #d4d0c8;
  --surface: #fff;
  --text: #000;
  --muted-text: #404040;
  --title-grad-start: #0a246a;
  --title-grad-end: #a6caf0;
  --title-text: #fff;
  --title-controls-filter: none;
  --accent: #0a246a;
  --accent-text: #fff;
  --accent-soft: rgba(10, 36, 106, 0.12);
  --accent-soft-border: rgba(10, 36, 106, 0.4);
  --border: #808080;
  --sep: #808080;
  --inset-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --window-radius: 0;
  --window-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --button-radius: 0;
  --button-bg: #d4d0c8;
  --button-text: #000;
  --button-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --button-pressed-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --button-hover-bg: #d4d0c8;
  --button-active-bg: #d4d0c8;
  --input-bg: #fff;
  --input-text: #000;
  --input-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --progress: #0a246a;
  --scroll-thumb: #d4d0c8;
  --scroll-track: #c0c0c0;
  --font-ui: Tahoma, "Segoe UI", "MS Sans Serif", sans-serif;
  --font-title: Tahoma, "Segoe UI", "MS Sans Serif", sans-serif;
  --font-mono: "Lucida Console", Consolas, monospace;
}

/* ===================================================================== *
 * PHOSPHOR — green CRT terminal (hacker). Light = mint paper terminal.   *
 * ===================================================================== */
html[data-theme="phosphor"] {
  --bg-desktop: #cfe3d4;
  --window-bg: #e8f3ea;
  --chrome-bg: #dcebde;
  --surface: #f4faf4;
  --text: #0c3b27;
  --muted-text: #4a7a60;
  --title-grad-start: #0e3d2a;
  --title-grad-end: #1c6b46;
  --title-text: #d6ffe6;
  --title-controls-filter: none;
  --accent: #12824f;
  --accent-text: #f4faf4;
  --accent-soft: rgba(18, 130, 79, 0.14);
  --accent-soft-border: rgba(18, 130, 79, 0.45);
  --border: #9cc4ab;
  --sep: #bcd8c5;
  --window-radius: 3px;
  --window-shadow: inset 0 0 0 1px #9cc4ab, 0 8px 26px rgba(12, 59, 39, 0.18);
  --button-radius: 3px;
  --button-bg: #e2efe5;
  --button-text: #0c3b27;
  --button-shadow: inset 0 0 0 1px #9cc4ab;
  --button-pressed-shadow: inset 0 0 0 1px #12824f;
  --button-hover-bg: #d5e9d9;
  --button-active-bg: #c9e1ce;
  --input-bg: #f4faf4;
  --input-text: #0c3b27;
  --input-shadow: inset 0 0 0 1px #9cc4ab;
  --inset-shadow: inset 0 0 0 1px #9cc4ab;
  --progress: #12824f;
  --scroll-thumb: #b7d4c1;
  --scroll-track: #dcebde;
  --font-ui: "Cascadia Code", Consolas, "DejaVu Sans Mono", ui-monospace, monospace;
  --font-title: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
html[data-theme="phosphor"][data-mode="dark"] {
  --bg-desktop: #04140c;
  --window-bg: #071a10;
  --chrome-bg: #0a2014;
  --surface: #051710;
  --text: #6bffa6;
  --muted-text: #2f8a5c;
  --title-grad-start: #021008;
  --title-grad-end: #0b3d24;
  --title-text: #7dffb0;
  --title-controls-filter: invert(1);
  --accent: #00ff88;
  --accent-text: #032012;
  --accent-soft: rgba(0, 255, 136, 0.14);
  --accent-soft-border: rgba(0, 255, 136, 0.5);
  --border: #155f3b;
  --sep: #123b27;
  --window-shadow: inset 0 0 0 1px #155f3b, 0 0 26px rgba(0, 255, 136, 0.14);
  --button-bg: #0a2417;
  --button-text: #6bffa6;
  --button-shadow: inset 0 0 0 1px #1c6b43;
  --button-pressed-shadow: inset 0 0 0 1px #00ff88;
  --button-hover-bg: #0e2f1e;
  --button-active-bg: #11381f;
  --input-bg: #03130b;
  --input-text: #6bffa6;
  --input-shadow: inset 0 0 0 1px #155f3b;
  --inset-shadow: inset 0 0 0 1px #155f3b;
  --progress: #00ff88;
  --scroll-thumb: #155f3b;
  --scroll-track: #0a2014;
}

/* ===================================================================== *
 * SYNTHWAVE — 80s neon (retro). Light = pastel dawn, dark = neon night.  *
 * ===================================================================== */
html[data-theme="synthwave"] {
  --bg-desktop: linear-gradient(180deg, #ffe3f1 0%, #fff0e6 100%);
  --window-bg: #fff5fb;
  --chrome-bg: #ffe9f4;
  --surface: #fffafd;
  --text: #3a1d57;
  --muted-text: #9a5e86;
  --title-grad-start: #ff5fa2;
  --title-grad-end: #ffa6d2;
  --title-text: #fff;
  --title-controls-filter: none;
  --accent: #e0218a;
  --accent-text: #fff;
  --accent-soft: rgba(224, 33, 138, 0.12);
  --accent-soft-border: rgba(224, 33, 138, 0.4);
  --border: #f0b9d8;
  --sep: #f6cee2;
  --window-radius: 8px;
  --window-shadow: inset 0 0 0 1px #f0b9d8, 0 14px 36px rgba(224, 33, 138, 0.2);
  --button-radius: 6px;
  --button-bg: #ffe3f1;
  --button-text: #7a2a59;
  --button-shadow: inset 0 0 0 1px #f0b9d8;
  --button-pressed-shadow: inset 0 0 0 1px #e0218a;
  --button-hover-bg: #ffd4e8;
  --button-active-bg: #ffc6e0;
  --input-bg: #fffafd;
  --input-text: #3a1d57;
  --input-shadow: inset 0 0 0 1px #f0b9d8;
  --inset-shadow: inset 0 0 0 1px #f0b9d8;
  --progress: #e0218a;
  --scroll-thumb: #f6cee2;
  --scroll-track: #ffe9f4;
  --font-ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-title: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, ui-monospace, monospace;
}
html[data-theme="synthwave"][data-mode="dark"] {
  --bg-desktop: linear-gradient(180deg, #0f0524 0%, #1a0b3e 55%, #2a1052 100%);
  --window-bg: #1b1038;
  --chrome-bg: #241147;
  --surface: #150a2e;
  --text: #f3e6ff;
  --muted-text: #b48ed6;
  --title-grad-start: #ff2e97;
  --title-grad-end: #7a2ff5;
  --title-text: #fff;
  --title-controls-filter: invert(1);
  --accent: #ff2e97;
  --accent-text: #fff;
  --accent-soft: rgba(255, 46, 151, 0.18);
  --accent-soft-border: rgba(5, 217, 232, 0.55);
  --border: #3d2566;
  --sep: #2e1b50;
  --window-shadow: inset 0 0 0 1px #3d2566, 0 0 32px rgba(255, 46, 151, 0.24);
  --button-bg: #2a1652;
  --button-text: #f3e6ff;
  --button-shadow: inset 0 0 0 1px #4a2d7a;
  --button-pressed-shadow: inset 0 0 0 1px #ff2e97;
  --button-hover-bg: #341c63;
  --button-active-bg: #3b2170;
  --input-bg: #120826;
  --input-text: #f3e6ff;
  --input-shadow: inset 0 0 0 1px #3d2566;
  --inset-shadow: inset 0 0 0 1px #3d2566;
  --progress: #05d9e8;
  --scroll-thumb: #3d2566;
  --scroll-track: #241147;
}

/* ===================================================================== *
 * TOKYO — cyberpunk night (techy). Light = Tokyo Day, dark = Tokyo Night.*
 * ===================================================================== */
html[data-theme="tokyo"] {
  --bg-desktop: #d2d4de;
  --window-bg: #e1e2e7;
  --chrome-bg: #d5d6db;
  --surface: #eceef3;
  --text: #343b59;
  --muted-text: #7a82a8;
  --title-grad-start: #2e7de9;
  --title-grad-end: #5a94ee;
  --title-text: #fff;
  --title-controls-filter: none;
  --accent: #2e7de9;
  --accent-text: #fff;
  --accent-soft: rgba(46, 125, 233, 0.12);
  --accent-soft-border: rgba(46, 125, 233, 0.42);
  --border: #a8aecb;
  --sep: #c0c4d8;
  --window-radius: 7px;
  --window-shadow: inset 0 0 0 1px #a8aecb, 0 12px 32px rgba(52, 59, 89, 0.16);
  --button-radius: 5px;
  --button-bg: #dcdde3;
  --button-text: #343b59;
  --button-shadow: inset 0 0 0 1px #b5bad2;
  --button-pressed-shadow: inset 0 0 0 1px #2e7de9;
  --button-hover-bg: #d0d2da;
  --button-active-bg: #c6c9d4;
  --input-bg: #fbfbfc;
  --input-text: #343b59;
  --input-shadow: inset 0 0 0 1px #a8aecb;
  --inset-shadow: inset 0 0 0 1px #a8aecb;
  --progress: #2e7de9;
  --scroll-thumb: #c0c4d8;
  --scroll-track: #d5d6db;
  --font-ui: "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-title: "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
html[data-theme="tokyo"][data-mode="dark"] {
  --bg-desktop: #16161e;
  --window-bg: #1a1b26;
  --chrome-bg: #1f2335;
  --surface: #1f2030;
  --text: #c0caf5;
  --muted-text: #787c99;
  --title-grad-start: #2e3c64;
  --title-grad-end: #1f2335;
  --title-text: #c0caf5;
  --title-controls-filter: invert(1);
  --accent: #7aa2f7;
  --accent-text: #16161e;
  --accent-soft: rgba(122, 162, 247, 0.16);
  --accent-soft-border: rgba(122, 162, 247, 0.45);
  --border: #2f334d;
  --sep: #292e42;
  --window-shadow: inset 0 0 0 1px #2f334d, 0 14px 40px rgba(0, 0, 0, 0.5);
  --button-bg: #272b3d;
  --button-text: #c0caf5;
  --button-shadow: inset 0 0 0 1px #3b4261;
  --button-pressed-shadow: inset 0 0 0 1px #7aa2f7;
  --button-hover-bg: #2e3349;
  --button-active-bg: #343a54;
  --input-bg: #16161e;
  --input-text: #c0caf5;
  --input-shadow: inset 0 0 0 1px #2f334d;
  --inset-shadow: inset 0 0 0 1px #2f334d;
  --progress: #7aa2f7;
  --scroll-thumb: #2f334d;
  --scroll-track: #1f2335;
}

/* ===================================================================== *
 * SOLARIZED — the classic dev palette (techy). Light + dark are canon.   *
 * ===================================================================== */
html[data-theme="solarized"] {
  --bg-desktop: #e3dcc6;
  --window-bg: #fdf6e3;
  --chrome-bg: #eee8d5;
  --surface: #fdf6e3;
  --text: #586e75;
  --muted-text: #93a1a1;
  --title-grad-start: #268bd2;
  --title-grad-end: #3aa3e3;
  --title-text: #fdf6e3;
  --title-controls-filter: none;
  --accent: #268bd2;
  --accent-text: #fdf6e3;
  --accent-soft: rgba(38, 139, 210, 0.13);
  --accent-soft-border: rgba(38, 139, 210, 0.4);
  --border: #d9d2bf;
  --sep: #e3dcc6;
  --window-radius: 5px;
  --window-shadow: inset 0 0 0 1px #d9d2bf, 0 10px 28px rgba(88, 110, 117, 0.16);
  --button-radius: 4px;
  --button-bg: #eee8d5;
  --button-text: #586e75;
  --button-shadow: inset 0 0 0 1px #d2cbb6;
  --button-pressed-shadow: inset 0 0 0 1px #268bd2;
  --button-hover-bg: #e6dfc8;
  --button-active-bg: #ddd6bd;
  --input-bg: #fdf6e3;
  --input-text: #586e75;
  --input-shadow: inset 0 0 0 1px #d9d2bf;
  --inset-shadow: inset 0 0 0 1px #d9d2bf;
  --progress: #268bd2;
  --scroll-thumb: #ddd6bd;
  --scroll-track: #eee8d5;
  --font-ui: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-title: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
html[data-theme="solarized"][data-mode="dark"] {
  --bg-desktop: #001f27;
  --window-bg: #002b36;
  --chrome-bg: #073642;
  --surface: #002b36;
  --text: #93a1a1;
  --muted-text: #586e75;
  --title-grad-start: #0a4f63;
  --title-grad-end: #073642;
  --title-text: #eee8d5;
  --title-controls-filter: invert(1);
  --accent: #268bd2;
  --accent-text: #002b36;
  --accent-soft: rgba(38, 139, 210, 0.18);
  --accent-soft-border: rgba(38, 139, 210, 0.5);
  --border: #0a4a5a;
  --sep: #0d3b47;
  --window-shadow: inset 0 0 0 1px #0a4a5a, 0 14px 38px rgba(0, 0, 0, 0.5);
  --button-bg: #073642;
  --button-text: #93a1a1;
  --button-shadow: inset 0 0 0 1px #0d5263;
  --button-pressed-shadow: inset 0 0 0 1px #268bd2;
  --button-hover-bg: #0a4250;
  --button-active-bg: #0c4a5a;
  --input-bg: #001f27;
  --input-text: #93a1a1;
  --input-shadow: inset 0 0 0 1px #0a4a5a;
  --inset-shadow: inset 0 0 0 1px #0a4a5a;
  --progress: #2aa198;
  --scroll-thumb: #0a4a5a;
  --scroll-track: #073642;
}

/* ===================================================================== *
 * GRUVBOX — warm retro dev palette. Light + dark are canon.              *
 * ===================================================================== */
html[data-theme="gruvbox"] {
  --bg-desktop: #ece0bf;
  --window-bg: #fbf1c7;
  --chrome-bg: #ebdbb2;
  --surface: #fbf1c7;
  --text: #3c3836;
  --muted-text: #7c6f64;
  --title-grad-start: #d65d0e;
  --title-grad-end: #e8862f;
  --title-text: #fbf1c7;
  --title-controls-filter: none;
  --accent: #af3a03;
  --accent-text: #fbf1c7;
  --accent-soft: rgba(214, 93, 14, 0.14);
  --accent-soft-border: rgba(214, 93, 14, 0.45);
  --border: #d5c4a1;
  --sep: #e0d3ad;
  --window-radius: 4px;
  --window-shadow: inset 0 0 0 1px #d5c4a1, 0 10px 26px rgba(60, 56, 54, 0.18);
  --button-radius: 3px;
  --button-bg: #ebdbb2;
  --button-text: #3c3836;
  --button-shadow: inset 0 0 0 1px #d5c4a1;
  --button-pressed-shadow: inset 0 0 0 1px #d65d0e;
  --button-hover-bg: #e3d2a3;
  --button-active-bg: #dbc894;
  --input-bg: #fbf1c7;
  --input-text: #3c3836;
  --input-shadow: inset 0 0 0 1px #d5c4a1;
  --inset-shadow: inset 0 0 0 1px #d5c4a1;
  --progress: #98971a;
  --scroll-thumb: #dbc894;
  --scroll-track: #ebdbb2;
  --font-ui: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-title: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
html[data-theme="gruvbox"][data-mode="dark"] {
  --bg-desktop: #1d2021;
  --window-bg: #282828;
  --chrome-bg: #3c3836;
  --surface: #282828;
  --text: #ebdbb2;
  --muted-text: #a89984;
  --title-grad-start: #d65d0e;
  --title-grad-end: #fe8019;
  --title-text: #1d2021;
  --title-controls-filter: invert(1);
  --accent: #fe8019;
  --accent-text: #1d2021;
  --accent-soft: rgba(254, 128, 25, 0.16);
  --accent-soft-border: rgba(254, 128, 25, 0.5);
  --border: #504945;
  --sep: #3c3836;
  --window-shadow: inset 0 0 0 1px #504945, 0 14px 36px rgba(0, 0, 0, 0.5);
  --button-bg: #3c3836;
  --button-text: #ebdbb2;
  --button-shadow: inset 0 0 0 1px #5a524c;
  --button-pressed-shadow: inset 0 0 0 1px #fe8019;
  --button-hover-bg: #45403d;
  --button-active-bg: #504945;
  --input-bg: #1d2021;
  --input-text: #ebdbb2;
  --input-shadow: inset 0 0 0 1px #504945;
  --inset-shadow: inset 0 0 0 1px #504945;
  --progress: #b8bb26;
  --scroll-thumb: #504945;
  --scroll-track: #3c3836;
}

/* ------------------------------------------------------------------ */
/* 2. Shared engine — applies whenever ANY theme attribute is present  */
/* ------------------------------------------------------------------ */

html[data-theme] body {
  background: var(--bg-desktop);
  color: var(--text);
}
html[data-theme] body,
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .title-bar-text,
html[data-theme] .menu-bar,
html[data-theme] .context-menu,
html[data-theme] .status-bar,
html[data-theme] .folder-window,
html[data-theme] .folder-window button {
  font-family: var(--font-ui);
}
/* Dialog/modal body text (e.g. the confirm-delete <p>, prompt labels) is not
 * covered by the list above and would otherwise keep 98.css's bitmap
 * "Pixelated MS Sans Serif" face — which falls back to an ugly serif. Force the
 * themed UI font on all popup body text so every dialog matches the theme. */
html[data-theme] .window-body,
html[data-theme] .dialog-body,
html[data-theme] .dialog-body p,
html[data-theme] .window-body p,
html[data-theme] .window-body label,
html[data-theme] .window-body span,
html[data-theme] .field-row,
html[data-theme] .field-row * {
  font-family: var(--font-ui);
}

/* Window chrome */
html[data-theme] .window,
html[data-theme] .dialog,
html[data-theme] .folder-window {
  background: var(--window-bg);
  color: var(--text);
  border-radius: var(--window-radius);
  box-shadow: var(--window-shadow);
}
html[data-theme] .folder-window { border-radius: 0; box-shadow: none; }
html[data-theme] .window-body,
html[data-theme] .notepad-body,
html[data-theme] .preview-body {
  background: var(--window-bg);
  color: var(--text);
}
html[data-theme] .dialog-body p,
html[data-theme] .toast-title,
html[data-theme] .toast-stats { color: var(--text); }

/* Title bar */
html[data-theme] .title-bar {
  background: linear-gradient(180deg, var(--title-grad-start), var(--title-grad-end));
  border-radius: var(--window-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
html[data-theme] .folder-window .title-bar { border-radius: 0; }
html[data-theme] .title-bar-text {
  color: var(--title-text);
  font-family: var(--font-title);
}
html[data-theme] .title-bar-controls button {
  filter: var(--title-controls-filter);
  border-radius: 0;
}

/* Buttons */
html[data-theme] button {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: var(--button-radius);
  box-shadow: var(--button-shadow);
}
html[data-theme] button:hover { background: var(--button-hover-bg); }
html[data-theme] button:active,
html[data-theme] button:active:not(:disabled) {
  background: var(--button-active-bg);
  box-shadow: var(--button-shadow);
}
html[data-theme] button:focus { outline: 1px dotted var(--accent); outline-offset: -4px; }
html[data-theme] button:disabled { color: var(--muted-text); }

/* Inputs / selects / textareas */
html[data-theme] input[type="text"],
html[data-theme] input[type="password"],
html[data-theme] select,
html[data-theme] textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border: none;
  box-shadow: var(--input-shadow);
}

/* Menu bar, toolbar, address bar, status bar */
html[data-theme] .menu-bar,
html[data-theme] .toolbar,
html[data-theme] .address-bar,
html[data-theme] .status-bar {
  background: var(--chrome-bg);
  border-color: var(--sep);
  color: var(--text);
}
html[data-theme] .menu-bar { border-bottom: 1px solid var(--sep); }
html[data-theme] .toolbar { border-bottom: 1px solid var(--sep); }
html[data-theme] .address-bar { border-bottom: 1px solid var(--sep); }
html[data-theme] .menu-bar span:hover {
  background: var(--accent);
  color: var(--accent-text);
}
html[data-theme] .toolbar button {
  background: transparent;
  color: var(--text);
  box-shadow: none;
  border: none;
}
html[data-theme] .toolbar button:hover { background: var(--accent-soft); }
html[data-theme] .toolbar button:active { background: var(--accent); color: var(--accent-text); }
html[data-theme] .user-badge { color: var(--muted-text); }

/* Address path bar */
html[data-theme] .path-bar {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--inset-shadow);
  color: var(--text);
}
html[data-theme] .path-bar .crumb { color: var(--text); }
html[data-theme] .path-bar .crumb:hover { background: var(--accent); color: var(--accent-text); }
html[data-theme] .path-bar .crumb-sep { color: var(--muted-text); }

/* Status bar fields */
html[data-theme] .status-bar-field {
  background: var(--chrome-bg);
  border: 1px solid var(--sep);
  color: var(--text);
  box-shadow: none;
}

/* Folder grid */
html[data-theme] .folder-view {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--inset-shadow);
  color: var(--text);
}
html[data-theme] .file .label { color: var(--text); }
html[data-theme] .file:hover:not(.selected) {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft-border);
}
html[data-theme] .file:hover:not(.selected) .label { background: transparent; }
html[data-theme] .file.selected,
html[data-theme] .file.selected .label {
  background: var(--accent);
  color: var(--accent-text);
}
html[data-theme] .folder-view.details .file.selected {
  background: var(--accent);
  color: var(--accent-text);
}
html[data-theme] .folder-view.details .file .d-size,
html[data-theme] .folder-view.details .file .d-type,
html[data-theme] .folder-view.details .file .d-date { color: var(--muted-text); }
html[data-theme] .folder-view.details .file.selected .d-size,
html[data-theme] .folder-view.details .file.selected .d-type,
html[data-theme] .folder-view.details .file.selected .d-date { color: var(--accent-text); }
html[data-theme] .details-header {
  background: var(--chrome-bg);
  color: var(--text);
  border-bottom: 1px solid var(--sep);
}
html[data-theme] .details-header span {
  border-right: 1px solid var(--sep);
  box-shadow: none;
}
html[data-theme] .details-header span:hover { background: var(--accent-soft); }

/* Context menus */
html[data-theme] .context-menu {
  background: var(--window-bg);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--window-shadow);
  border-radius: var(--button-radius);
}
html[data-theme] .context-menu li:hover {
  background: var(--accent);
  color: var(--accent-text);
}
html[data-theme] .context-menu li.separator {
  border-top-color: var(--sep);
  border-bottom-color: transparent;
}
html[data-theme] .context-menu li.separator:hover { background: none; }

/* Drop overlay + marquee */
html[data-theme] .drop-overlay {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme] .marquee {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Notepad */
html[data-theme] #notepadArea {
  background: var(--surface);
  color: var(--input-text);
  border: none;
  box-shadow: var(--inset-shadow);
  caret-color: var(--input-text);
  font-family: var(--font-mono);
}

/* Recycle bin */
html[data-theme] .recycle-label { color: var(--text); text-shadow: 1px 1px rgba(0, 0, 0, 0.45); }
html[data-theme] .trash-list {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--inset-shadow);
}
html[data-theme] .trash-item { color: var(--text); border-bottom: 1px solid var(--sep); }
html[data-theme] .trash-item .tsize,
html[data-theme] .trash-item .tdate { color: var(--muted-text); }
html[data-theme] .trash-item.selected,
html[data-theme] .trash-item.selected .tsize,
html[data-theme] .trash-item.selected .tdate {
  background: var(--accent);
  color: var(--accent-text);
}
html[data-theme] .trash-empty { color: var(--muted-text); }

/* Upload transfer dialog (the .xfer-dialog window itself is skinned by the
 * generic .window rules; these cover its inner text + progress bars). */
html[data-theme] .progress-track {
  background: var(--surface);
  border: 1px solid var(--sep);
}
html[data-theme] .progress-bar { background: var(--progress); }
html[data-theme] .xfer-saving { color: var(--text); }
html[data-theme] .xfer-stats,
html[data-theme] .xfer-overall-label { color: var(--muted-text); }

/* Media player */
html[data-theme] .mpc-menu,
html[data-theme] .mpc-seekbar,
html[data-theme] .mpc-controls { background: var(--chrome-bg); }
html[data-theme] .mpc-volbtn svg { color: var(--text); }
html[data-theme] .mpc-time { color: var(--text); }

/* Activity logs */
html[data-theme] .logs-list {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--inset-shadow);
  color: var(--text);
}
html[data-theme] .log-entry { border-bottom-color: var(--sep); }
html[data-theme] .log-entry:hover { background: var(--accent-soft); }
html[data-theme] .log-ts { color: var(--muted-text); }
html[data-theme] .log-user { color: var(--text); }
html[data-theme] .log-action { color: var(--accent); }
html[data-theme] .log-detail { color: var(--text); }
html[data-theme] .logs-empty { color: var(--muted-text); }

/* Preview window inset */
html[data-theme] .preview-body {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--inset-shadow);
}

/* Settings fieldset — override 98.css system-color backgrounds that show white in dark themes */
html[data-theme] fieldset {
  border: 1px solid var(--sep);
  box-shadow: none;
  background: var(--window-bg);
  color: var(--text);
}
html[data-theme] fieldset legend {
  background: var(--window-bg);
  color: var(--text);
  padding: 0 4px;
}
html[data-theme] label {
  background: transparent;
  color: var(--text);
}

/* Scrollbars (Chromium/WebKit) */
html[data-theme] ::-webkit-scrollbar { width: 14px; height: 14px; }
html[data-theme] ::-webkit-scrollbar-track { background: var(--scroll-track); }
html[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid var(--scroll-track);
}
html[data-theme] ::-webkit-scrollbar-button { display: none; }
html[data-theme] ::-webkit-scrollbar-corner { background: var(--scroll-track); }
/* Scrollbars (Firefox — simplified two-tone) */
html[data-theme] * { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

/* ------------------------------------------------------------------ */
/* 3. Per-theme flourishes                                             */
/* ------------------------------------------------------------------ */

/* --- Windows 2000: horizontal caption gradient + sunken pressed bevel --- */
html[data-theme="win2k"] .title-bar {
  background: linear-gradient(90deg, var(--title-grad-start), var(--title-grad-end));
}
html[data-theme="win2k"] .title-bar-text {
  font-weight: bold;
  text-shadow: none;
}
html[data-theme="win2k"] button:active,
html[data-theme="win2k"] button:active:not(:disabled) {
  box-shadow: var(--button-pressed-shadow);
  padding-top: 1px;
  padding-left: 1px;
}
html[data-theme="win2k"] .toolbar button:hover {
  background: var(--chrome-bg);
  box-shadow: var(--button-shadow);
}
html[data-theme="win2k"] .toolbar button:active {
  background: var(--chrome-bg);
  color: var(--text);
  box-shadow: var(--button-pressed-shadow);
}
html[data-theme="win2k"] .file.selected .label {
  outline: 1px dotted rgba(255, 255, 255, 0.6);
  outline-offset: -1px;
}

/* --- Pressed-button feedback for the modern skins (subtle inset ring) --- */
html[data-theme="phosphor"] button:active:not(:disabled),
html[data-theme="synthwave"] button:active:not(:disabled),
html[data-theme="tokyo"] button:active:not(:disabled),
html[data-theme="solarized"] button:active:not(:disabled),
html[data-theme="gruvbox"] button:active:not(:disabled) {
  box-shadow: var(--button-pressed-shadow);
}

/* --- Phosphor: scanlines + text glow on the dark CRT variant --- */
html[data-theme="phosphor"][data-mode="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: multiply;
}
html[data-theme="phosphor"][data-mode="dark"] .title-bar-text,
html[data-theme="phosphor"][data-mode="dark"] .file .label,
html[data-theme="phosphor"][data-mode="dark"] .menu-bar span,
html[data-theme="phosphor"][data-mode="dark"] .status-bar-field {
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.45);
}

/* --- Synthwave: neon title glow + airy caps --- */
html[data-theme="synthwave"] .title-bar-text {
  letter-spacing: 1px;
  font-weight: bold;
}
html[data-theme="synthwave"][data-mode="dark"] .title-bar-text {
  text-shadow: 0 0 8px rgba(255, 46, 151, 0.8), 0 0 16px rgba(5, 217, 232, 0.4);
}
html[data-theme="synthwave"][data-mode="dark"] .file:hover:not(.selected) .label {
  text-shadow: 0 0 8px rgba(5, 217, 232, 0.7);
}

/* --- Tokyo / Solarized / Gruvbox: clean, no extra flourish needed. --- */