/* ======================================================================
   STVC NewFileManager — Microsoft Fluent Design 2 theme overlay
   ----------------------------------------------------------------------
   Loaded *in addition to* site.css. Every rule is scoped to
       html[data-template="fluent"]
   so the Metro defaults remain untouched until the user opts in via the
   Settings → Appearance panel.

   Design notes (Fluent Design 2 / Fluent UI v9):
   - Communication blue accent (#0F6CBD light / #2899F5 dark).
   - Segoe UI Variable typography stack with regular weights.
   - 4px / 6px / 8px corner radii, NOT square.
   - Layered surfaces ("card on canvas") with subtle elevation shadows
     instead of the flat Metro borders.
   - Acrylic-style translucent top bar, pill-shaped nav links with hover
     state, no all-caps labels.
   - Uses the same CSS custom properties as Metro so the existing markup
     keeps working without per-page changes.
   ====================================================================== */

html[data-template="fluent"] {
    color-scheme: light;
    --bg:        #fafafa;
    --bg-alt:    #f3f3f3;
    --fg:        #242424;
    --muted:     #616161;
    --border:    #e1dfdd;
    --row:       #ffffff;
    --row-alt:   #f5f5f5;

    --accent:        #0f6cbd;
    --accent-hover:  #115ea3;
    --accent-fg:     #ffffff;

    /* Fluent communication / shared palette — used by tiles. */
    --tile-blue:     #0f6cbd;
    --tile-teal:     #038387;
    --tile-green:    #498205;
    --tile-orange:   #ca5010;
    --tile-red:      #c50f1f;
    --tile-purple:   #5c2e91;
    --tile-magenta:  #b4009e;
    --tile-dark:     #323130;

    --status-ok:     #107c10;
    --status-warn:   #b89500;
    --status-bad:    #c50f1f;

    --fluent-radius-sm: 4px;
    --fluent-radius-md: 6px;
    --fluent-radius-lg: 8px;
    --fluent-shadow-2:  0 1px 2px rgba(0,0,0,.08), 0 0 2px rgba(0,0,0,.06);
    --fluent-shadow-4:  0 2px 4px rgba(0,0,0,.10), 0 0 2px rgba(0,0,0,.08);
    --fluent-shadow-8:  0 4px 8px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.10);
    --fluent-shadow-16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
}

html[data-template="fluent"][data-theme="dark"] {
    color-scheme: dark;
    --bg:      #1f1f1f;
    --bg-alt:  #292929;
    --fg:      #ffffff;
    --muted:   #d6d6d6;
    --border:  #3d3d3d;
    --row:     #2b2b2b;
    --row-alt: #333333;

    --accent:        #2899f5;
    --accent-hover:  #62abf5;
    --accent-fg:     #000000;

    --fluent-shadow-2:  0 1px 2px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35);
    --fluent-shadow-4:  0 2px 4px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35);
    --fluent-shadow-8:  0 4px 8px rgba(0,0,0,.60), 0 0 2px rgba(0,0,0,.35);
    --fluent-shadow-16: 0 8px 16px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.35);
}

html[data-template="fluent"] body {
    background: var(--bg);
    font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI Variable",
          "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto",
          "Helvetica Neue", Arial, sans-serif;
}

/* Headings — Fluent uses regular/semibold weights, not the Metro 200. */
html[data-template="fluent"] h1,
html[data-template="fluent"] h2,
html[data-template="fluent"] h3,
html[data-template="fluent"] h4 {
    font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
}
html[data-template="fluent"] h1 { font-weight: 600; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.15; }
html[data-template="fluent"] h2 { font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); }
html[data-template="fluent"] h3 { font-weight: 600; font-size: clamp(15px, 1.6vw, 18px); }
html[data-template="fluent"] h4 {
    font-weight: 600; font-size: 13px;
    text-transform: none; letter-spacing: 0; color: var(--fg);
}

/* ---------- Top bar ----------
   The Metro stylesheet paints the topbar with a solid blue (`var(--accent)`)
   and links in white (`var(--accent-fg)`). For Fluent we flip to an opaque
   light surface with dark text, so the topbar reads like a Fluent v9
   command bar. The previous translucent background plus `a:hover`'s
   inherited `border-bottom: currentColor` underline produced an apparent
   "blue layer" over the nav links — that's all explicitly neutralised here. */
html[data-template="fluent"] .topbar {
    /* Solid surface — do NOT rely on backdrop-filter, which would let the
       inherited Metro `var(--accent)` blue bleed through if unsupported. */
    background: var(--row);
    color: var(--fg);
    /* The base Metro rule sets `align-items: stretch` so each child fills
       the full bar height. Fluent uses pill-style buttons that should sit
       in the visual centre instead, so everything in the bar (brand, nav
       links, user pill, theme toggle, logout button) is centred on the
       cross-axis here. */
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--fluent-shadow-2);
    padding: 0 20px;
    min-height: 48px;
}
html[data-template="fluent"] .topbar .brand {
    color: var(--fg);
    font-weight: 600; font-size: 16px; letter-spacing: 0;
    text-transform: none;
    padding: 0;                 /* no vertical padding — flex centres it */
    border: 0;
    display: inline-flex; align-items: center;
}
html[data-template="fluent"] .topbar .brand:hover {
    color: var(--accent); opacity: 1; border: 0;
}
html[data-template="fluent"] .topbar nav {
    align-items: center;        /* centre child anchors/buttons too */
}
html[data-template="fluent"] .topbar nav a,
html[data-template="fluent"] .topbar nav form.inline button.link {
    color: var(--fg);
    background: transparent;
    text-transform: none; letter-spacing: 0;
    font-weight: 600; font-size: 13px;
    padding: 0 12px;
    margin: 0 2px;              /* was 8px 2px — vertical centring is now flex */
    height: 32px; min-height: 32px;
    display: inline-flex; align-items: center;
    border: 0;                /* kills the global `a` border-bottom */
    border-radius: var(--fluent-radius-sm);
    text-decoration: none;
    transition: background-color .12s, color .12s;
}
html[data-template="fluent"] .topbar nav form.inline {
    display: inline-flex; align-items: center; padding: 0;
}
html[data-template="fluent"] .topbar nav a:hover,
html[data-template="fluent"] .topbar nav form.inline button.link:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    border: 0;                /* kills `a:hover { border-bottom-color: currentColor }` */
    text-decoration: none;
}
html[data-template="fluent"] .topbar nav a:focus-visible,
html[data-template="fluent"] .topbar nav form.inline button.link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
html[data-template="fluent"] .topbar .who {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--fg);
    border-radius: 16px;
    height: 28px;
    align-self: center;
    margin-left: 12px;
    padding: 0 12px;
    display: inline-flex; align-items: center;
}
html[data-template="fluent"] .topbar .who.is-admin .who-ico { color: #2899f5; }
html[data-template="fluent"] .topbar .who.is-user  .who-ico { color: #6bb700; }

html[data-template="fluent"] footer {
    border-top: 1px solid var(--border);
    text-transform: none; letter-spacing: 0; font-size: 12px;
    color: var(--muted);
    background: var(--bg-alt);
}

/* ---------- Cards / surfaces ---------- */
html[data-template="fluent"] .card {
    background: var(--row);
    border: 1px solid var(--border);
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-4);
    padding: 20px 24px;
}

html[data-template="fluent"] hr {
    border-top: 1px solid var(--border);
}

/* ---------- Buttons (rounded, no all-caps, soft hover) ---------- */
html[data-template="fluent"] button,
html[data-template="fluent"] .btn {
    background: var(--accent); color: var(--accent-fg);
    border: 1px solid var(--accent);
    border-radius: var(--fluent-radius-sm);
    padding: 7px 16px;
    font-weight: 600; font-size: 13px;
    text-transform: none; letter-spacing: 0;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
html[data-template="fluent"] button:hover,
html[data-template="fluent"] .btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--fluent-shadow-2);
}
html[data-template="fluent"] button.secondary,
html[data-template="fluent"] .btn.secondary {
    background: var(--row); color: var(--fg);
    border: 1px solid var(--border);
}
html[data-template="fluent"] button.secondary:hover,
html[data-template="fluent"] .btn.secondary:hover {
    background: var(--bg-alt); color: var(--fg);
    border-color: var(--muted);
}
html[data-template="fluent"] button.danger,
html[data-template="fluent"] .btn.danger {
    background: var(--row); color: var(--status-bad);
    border: 1px solid var(--status-bad);
}
html[data-template="fluent"] button.danger:hover {
    background: var(--status-bad); color: #fff;
}
html[data-template="fluent"] button.link {
    /* Without an explicit transparent background the generic Fluent `button`
       rule above paints these as solid blue rectangles, which makes the
       blue link text invisible until hover (regression report 2026-05-08).
       Force a flat, link-style appearance regardless of cascade order. */
    background: transparent;
    color: var(--accent);
    border: 0;
    padding: 0;
    height: auto; min-height: 0;
    text-transform: none; letter-spacing: 0; font-weight: 600;
    box-shadow: none;
}
html[data-template="fluent"] button.link:hover {
    background: transparent;
    color: var(--accent-hover);
    text-decoration: underline;
    box-shadow: none;
}

/* ---------- Inputs ---------- */
html[data-template="fluent"] input[type=text],
html[data-template="fluent"] input[type=password],
html[data-template="fluent"] input[type=email],
html[data-template="fluent"] input[type=number],
html[data-template="fluent"] input[type=datetime-local],
html[data-template="fluent"] input[type=search],
html[data-template="fluent"] select,
html[data-template="fluent"] textarea {
    background: var(--row);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--muted); /* Fluent's emphasised baseline */
    border-radius: var(--fluent-radius-sm);
    padding: 7px 10px;
}
html[data-template="fluent"] input:focus,
html[data-template="fluent"] select:focus,
html[data-template="fluent"] textarea:focus {
    border-color: var(--border);
    border-bottom: 2px solid var(--accent);
    box-shadow: none;
    padding-bottom: 6px; /* compensate for the +1px bottom border */
}
html[data-template="fluent"] .field label {
    color: var(--fg);
    font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
}

/* ---------- Notices / errors / badges ---------- */
html[data-template="fluent"] .notice {
    border-left-width: 4px;
    border-radius: var(--fluent-radius-sm);
    background: color-mix(in srgb, var(--accent) 8%, var(--row));
}
html[data-template="fluent"] .error {
    border-left-width: 4px;
    border-radius: var(--fluent-radius-sm);
    background: color-mix(in srgb, var(--status-bad) 10%, var(--row));
}
html[data-template="fluent"] .badge {
    border-radius: 12px;
    text-transform: none; letter-spacing: 0;
    font-size: 11px; font-weight: 600;
    padding: 2px 10px;
}

/* ---------- Tables ---------- */
html[data-template="fluent"] table.files th {
    text-transform: none; letter-spacing: 0;
    font-size: 12px; font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
html[data-template="fluent"] table.files td {
    border-bottom: 1px solid var(--border);
}
html[data-template="fluent"] table.files tbody tr {
    transition: background-color .1s;
}
html[data-template="fluent"] table.files tbody tr:hover {
    background: var(--bg-alt);
}
html[data-template="fluent"] table.files tbody tr.selected {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---------- Breadcrumb ---------- */
html[data-template="fluent"] .breadcrumb a,
html[data-template="fluent"] .breadcrumb span {
    text-transform: none; letter-spacing: 0;
    font-weight: 500; color: var(--muted);
}
html[data-template="fluent"] .breadcrumb a:hover { color: var(--accent); }

/* ---------- Tiles ---------- */
html[data-template="fluent"] .tiles {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
html[data-template="fluent"] .tile {
    background: var(--row); color: var(--fg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-4);
    transition: box-shadow .12s, transform .08s ease-out;
}
html[data-template="fluent"] .tile:hover {
    box-shadow: var(--fluent-shadow-8);
    transform: translateY(-1px);
    color: var(--fg); opacity: 1;
}
html[data-template="fluent"] .tile .tile-label {
    text-transform: none; letter-spacing: 0;
    font-weight: 600; font-size: 13px;
    color: var(--muted);
}
html[data-template="fluent"] .tile .tile-value {
    color: var(--accent);
    font-weight: 600; font-size: 28px;
}
html[data-template="fluent"] .tile.t-teal    { border-top-color: var(--tile-teal); }
html[data-template="fluent"] .tile.t-green   { border-top-color: var(--tile-green); }
html[data-template="fluent"] .tile.t-orange  { border-top-color: var(--tile-orange); }
html[data-template="fluent"] .tile.t-red     { border-top-color: var(--tile-red); }
html[data-template="fluent"] .tile.t-purple  { border-top-color: var(--tile-purple); }
html[data-template="fluent"] .tile.t-magenta { border-top-color: var(--tile-magenta); }
html[data-template="fluent"] .tile.t-dark    { border-top-color: var(--tile-dark); }
html[data-template="fluent"] .tile.t-teal    .tile-value { color: var(--tile-teal); }
html[data-template="fluent"] .tile.t-green   .tile-value { color: var(--tile-green); }
html[data-template="fluent"] .tile.t-orange  .tile-value { color: var(--tile-orange); }
html[data-template="fluent"] .tile.t-red     .tile-value { color: var(--tile-red); }
html[data-template="fluent"] .tile.t-purple  .tile-value { color: var(--tile-purple); }
html[data-template="fluent"] .tile.t-magenta .tile-value { color: var(--tile-magenta); }
html[data-template="fluent"] .tile.t-dark    .tile-value { color: var(--tile-dark); }

/* ---------- Modal ---------- */
html[data-template="fluent"] .modal {
    border-radius: var(--fluent-radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--fluent-shadow-16);
    overflow: hidden;
}
html[data-template="fluent"] .modal-head,
html[data-template="fluent"] .modal-foot {
    background: var(--row);
    border-color: var(--border);
}
html[data-template="fluent"] .modal-title {
    text-transform: none; letter-spacing: 0;
    font-size: 14px; font-weight: 600;
}

/* ---------- Theme toggle button (matches Fluent topbar) ---------- */
html[data-template="fluent"] .theme-toggle {
    background: transparent; color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--fluent-radius-sm);
    text-transform: none; letter-spacing: 0;
    font-weight: 600; font-size: 12px;
    height: 32px;
    /* Vertical centring is handled by the topbar's `align-items: center`. */
    margin: 0 0 0 8px;
    align-self: center;
}
html[data-template="fluent"] .theme-toggle:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---------- Dropzone ---------- */
html[data-template="fluent"] .dropzone {
    border-radius: var(--fluent-radius-md);
    text-transform: none; letter-spacing: 0;
    font-weight: 500;
}

/* ---------- Code / pre ---------- */
html[data-template="fluent"] code,
html[data-template="fluent"] pre {
    border-radius: var(--fluent-radius-sm);
}

/* ---------- Settings: appearance picker ---------- */
.appearance-picker { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.appearance-option {
    flex: 1 1 200px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--row);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.appearance-option:hover { border-color: var(--accent); }
.appearance-option input[type=radio] { margin-right: 6px; }
.appearance-option .opt-title { font-weight: 600; font-size: 14px; }
.appearance-option .opt-desc  { font-size: 12px; color: var(--muted); }
.appearance-option.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
html[data-template="fluent"] .appearance-option {
    border-radius: var(--fluent-radius-md);
    box-shadow: var(--fluent-shadow-2);
}
html[data-template="fluent"] .appearance-option.is-selected {
    box-shadow: 0 0 0 2px var(--accent) inset, var(--fluent-shadow-2);
}