/* ============================================================
   Fluent Design skin for SourceBans++ 2.2.x
   ------------------------------------------------------------
   Applied as an override layer on top of the stock css/theme.css
   token system. Nothing here changes template structure — it only
   re-maps the design tokens and re-skins the component classes.

   Fluent characteristics implemented:
     - Segoe UI Variable typography (CJK-aware fallbacks)
     - Windows 11 accent blue ramp
     - Mica page backdrop + Acrylic translucent chrome
     - Fluent corner radii (3 / 4 / 8 / 12px)
     - Layered elevation shadows
     - Fluent focus rectangles
     - NavigationView-style selected nav indicator
   ============================================================ */

/* ---------- 1. Light theme tokens ---------- */
:root {
  color-scheme: light;

  /* Fluent accent ramp — Windows 11 default blue */
  --brand-50:  #eff6fc;
  --brand-100: #deecf9;
  --brand-200: #c7e0f4;
  --brand-300: #a9d3f2;
  --brand-400: #4ca3e0;
  --brand-500: #1e8fd5;
  --brand-600: #0078d4;
  --brand-700: #0067c0;
  --brand-800: #005a9e;
  --brand-900: #004578;
  --brand-950: #002d4d;

  /* Surfaces — Mica page, solid card stock */
  --bg-page: #f3f3f3;
  --bg-surface: #ffffff;
  --bg-muted: #f7f7f7;
  --border: rgba(0, 0, 0, 0.0578);
  --text: rgba(0, 0, 0, 0.8956);
  --text-muted: rgba(0, 0, 0, 0.6063);
  --text-faint: rgba(0, 0, 0, 0.4458);
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-50);
  --on-accent: #ffffff;

  /* Acrylic chrome backdrop */
  --acrylic-bg: rgba(255, 255, 255, 0.72);
  --acrylic-blur: saturate(160%) blur(20px);
  --mica-tint: rgba(0, 120, 212, 0.06);

  /* Status */
  --success: #0f7b0f; --success-bg: #dff6dd;
  --warning: #9d5d00; --warning-bg: #fff4ce;
  --danger:  #c42b1c; --danger-bg:  #fde7e9;
  --info:    #0078d4; --info-bg:    #eff6fc;

  /* Type */
  --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
               'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC',
               'Hiragino Sans GB', sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Fluent corner radii */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Fluent elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10), 0 0 2px rgba(0, 0, 0, 0.06);

  --fluent-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --fluent-dur: 0.12s;
}

/* ---------- 2. Dark theme tokens ---------- */
html.dark {
  color-scheme: dark;

  --bg-page: #202020;
  --bg-surface: #2b2b2b;
  --bg-muted: #323232;
  --border: rgba(255, 255, 255, 0.0698);
  --text: rgba(255, 255, 255, 0.8956);
  --text-muted: rgba(255, 255, 255, 0.6063);
  --text-faint: rgba(255, 255, 255, 0.4458);
  --accent: #4cc2ff;
  --accent-hover: #6cd0ff;
  --accent-soft: rgba(76, 194, 255, 0.12);
  --on-accent: #003a5c;

  --acrylic-bg: rgba(43, 43, 43, 0.72);
  --mica-tint: rgba(76, 194, 255, 0.07);

  --success: #6ccb5f; --success-bg: rgba(57, 61, 27, 0.60);
  --warning: #fce100; --warning-bg: rgba(67, 53, 25, 0.60);
  --danger:  #ff99a4; --danger-bg:  rgba(68, 39, 38, 0.60);
  --info:    #4cc2ff; --info-bg:    rgba(20, 55, 77, 0.60);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.36), 0 0 2px rgba(0, 0, 0, 0.24);
}

/* ---------- 3. Mica page backdrop ---------- */
body {
  background-color: var(--bg-page);
  background-image: radial-gradient(
    1200px 600px at 12% -8%,
    var(--mica-tint),
    transparent 68%
  );
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 4. Acrylic chrome ---------- */
.topbar,
.sidebar,
.admin-sidebar {
  background: var(--acrylic-bg);
  -webkit-backdrop-filter: var(--acrylic-blur);
  backdrop-filter: var(--acrylic-blur);
  border-color: var(--border);
}

/* ---------- 5. Fluent focus rectangle ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-md);
}

/* ---------- 6. Buttons ---------- */
.btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--fluent-dur) var(--fluent-ease),
    border-color var(--fluent-dur) var(--fluent-ease),
    color var(--fluent-dur) var(--fluent-ease),
    transform 0.06s var(--fluent-ease);
}
.btn:hover { background-color: var(--bg-muted); }
.btn:active { transform: scale(0.985); }

.btn--primary {
  background-color: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: transparent;
}

.btn--secondary {
  background-color: var(--bg-surface);
  border-color: var(--border);
}
.btn--secondary:hover { background-color: var(--bg-muted); }

.btn--ghost { border-color: transparent; box-shadow: none; }
.btn--ghost:hover { background-color: var(--bg-muted); }

.btn--danger {
  background-color: var(--danger);
  border-color: transparent;
  color: #fff;
}

/* ---------- 7. Cards ---------- */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow);
  transition: box-shadow var(--fluent-dur) var(--fluent-ease);
}
.card:hover { box-shadow: var(--shadow-lg); }

/* ---------- 8. Inputs ---------- */
.input,
.textarea,
.msel__trigger,
.file-input {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
  transition:
    border-color var(--fluent-dur) var(--fluent-ease),
    box-shadow var(--fluent-dur) var(--fluent-ease);
}
.input:hover,
.textarea:hover,
.msel__trigger:hover { border-color: var(--text-faint); }

.input:focus,
.textarea:focus,
.msel__trigger:focus {
  outline: none;
  border-color: var(--accent);
  /* Fluent signature: thicker accent underline on focus */
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ---------- 9. Pills / chips ---------- */
.pill,
.chip,
.sidebar__link-count,
.msel__chip {
  border-radius: var(--radius-full);
}

/* ---------- 10. NavigationView-style sidebar ---------- */
.sidebar__link {
  border-radius: var(--radius-md);
  transition: background-color var(--fluent-dur) var(--fluent-ease);
}
.sidebar__link:hover { background-color: var(--bg-muted); }

.sidebar__link[aria-current="page"] {
  background-color: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
html.dark .sidebar__link[aria-current="page"] {
  background-color: var(--accent-soft);
  color: var(--accent);
}

.sidebar__section-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
}

/* ---------- 11. Tables ---------- */
.table th {
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.table tbody tr {
  transition: background-color var(--fluent-dur) var(--fluent-ease);
}
.table tbody tr:hover { background-color: var(--bg-muted); }

/* ---------- 12. Flyouts / overlays ---------- */
.context-menu,
.drawer,
.palette,
.msel__panel,
.toast,
.sb-tooltip {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-color: var(--acrylic-bg);
  -webkit-backdrop-filter: var(--acrylic-blur);
  backdrop-filter: var(--acrylic-blur);
  box-shadow: var(--shadow-lg);
}

/* ---------- 13. Fluent scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--text-faint);
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
  background-clip: content-box;
}

/* ---------- 14. Status pills ---------- */
.pill--online    { color: var(--success); background-color: var(--success-bg); }
.pill--offline   { color: var(--text-muted); background-color: var(--bg-muted); }
.pill--permanent { color: var(--danger);  background-color: var(--danger-bg); }
.pill--active    { color: var(--accent);  background-color: var(--accent-soft); }

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}