/* =====================================================================
   Fazlani Group Enterprise DMS — Executive design system
   ---------------------------------------------------------------------
   Loaded after Bootstrap; overrides its defaults. CSP is style-src 'self'
   with no unsafe-inline, so EVERYTHING (including all presentation) lives
   in this file — never in style attributes or <style> blocks.
   Palette: deep navy + executive blue, restrained gold accent,
   cool-slate neutrals. Typography: system UI stack (no external fonts).
   ===================================================================== */

:root {
  /* Brand & accent */
  --navy-950: #071527;
  --navy-900: #0a1b2e;
  --navy-800: #0e2541;
  --navy-700: #123258;
  --blue-600: #1553c4;
  --blue-700: #1146a6;
  --blue-050: #eef4fd;
  --gold-500: #c9a24a;
  --gold-300: #e3c887;

  /* Neutrals */
  --page-bg: #f3f6fa;
  --card-bg: #ffffff;
  --line: #e4eaf2;
  --line-soft: #edf1f7;
  --ink: #0b1b33;          /* headings */
  --text: #33415c;         /* body */
  --muted: #697a96;        /* secondary */

  /* Theme surface + control tokens. Every rule below paints through these, so the
     whole app (light and dark) is retinted from one place instead of per-component
     overrides. Bootstrap's own dark theme handles its stock components. */
  --surface-2: #fbfcfe;          /* soft raised fill (quiet links, tree boxes) */
  --surface-3: #f7f9fc;          /* table heads, inset panels */
  --field-bg: #ffffff;           /* inputs, ghost buttons, pager */
  --field-bg-readonly: #f6f8fb;
  --header-bg: #ffffff;
  --footer-bg: #ffffff;
  --hover-bg: #eef2f8;           /* nav + chip hover */
  --hover-bg-strong: #f1f4f9;    /* secondary button hover */
  --pill-bg: #eef1f6;            /* neutral badge */
  --pill-ink: #55658a;
  --tint-bg: #eef4fd;            /* brand-tinted surface */
  --tint-ink: #1146a6;           /* brand-coloured text on a tint */
  --label-ink: #4a5b7d;
  --placeholder: #93a1ba;
  --nav-ink: #46587a;
  --table-head-ink: #71809c;
  --ghost-ink: #55658a;
  --ghost-border: #cfd8e6;
  --crumb-sep: #a3b0c6;
  --disabled-ink: #9aa8c0;
  --scroll-thumb: #c3cede;
  --scroll-thumb-hover: #a7b4cb;
  --auth-card-bg: rgba(255, 255, 255, 0.985);
  --auth-card-ring: rgba(255, 255, 255, 0.06);

  /* Semantic (soft pill colors) */
  --ok-ink: #0f7b52;   --ok-bg: #e8f7f0;
  --warn-ink: #93610a; --warn-bg: #fdf3e0;
  --danger-ink: #b3261e; --danger-bg: #fdeceb;
  --info-ink: #1553c4;  --info-bg: #eef4fd;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(11, 27, 51, 0.05), 0 10px 28px -18px rgba(11, 27, 51, 0.18);
  --shadow-pop: 0 12px 34px -12px rgba(11, 27, 51, 0.22);
  --radius-md: 12px;
  --radius-lg: 16px;

  --font-ui: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI",
             Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  /* Retint Bootstrap's own tokens so utilities pick the theme up */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-ui);
  --bs-primary: var(--blue-600);
  --bs-primary-rgb: 21, 83, 196;
  --bs-border-color: var(--line);
  --bs-heading-color: var(--ink);
  --bs-box-shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.05);
  --bs-box-shadow: var(--shadow-card);
  --bs-link-color: var(--blue-600);
  --bs-link-hover-color: var(--blue-700);
}

/* ------------------------------------------------------------------
   Dark theme
   ------------------------------------------------------------------
   Only the token layer flips here; every component rule keeps reading
   the same variables, so light and dark can never drift apart. The few
   rules below the block are the literals that cannot be tokenised
   (gradients and fixed brand tints). */
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Neutrals */
  --page-bg: #0a111b;
  --card-bg: #111a26;
  --line: #23303f;
  --line-soft: #1b2634;
  --ink: #f1f5fa;
  --text: #c8d4e3;
  --muted: #91a3ba;

  /* Surface + control tokens */
  --surface-2: #16202d;
  --surface-3: #131d29;
  --field-bg: #0d1620;
  --field-bg-readonly: #131d29;
  --header-bg: #0d1520;
  --footer-bg: #0d1520;
  --hover-bg: #1a2635;
  --hover-bg-strong: #1f2c3d;
  --pill-bg: #1b2637;
  --pill-ink: #a8b8cd;
  --tint-bg: rgba(59, 130, 246, 0.16);
  --tint-ink: #9cc0ff;
  --label-ink: #a4b4c9;
  --placeholder: #6c7f99;
  --nav-ink: #b4c1d4;
  --table-head-ink: #8ea1b9;
  --ghost-ink: #b4c1d4;
  --ghost-border: #33455c;
  --crumb-sep: #5b6d85;
  --disabled-ink: #64748b;
  --scroll-thumb: #2b3a4d;
  --scroll-thumb-hover: #3a4c63;
  --auth-card-bg: #101a26;
  --auth-card-ring: rgba(255, 255, 255, 0.08);

  /* Semantic pills */
  --ok-ink: #6fe0a8;    --ok-bg: rgba(16, 185, 129, 0.15);
  --warn-ink: #f3c76d;  --warn-bg: rgba(245, 158, 11, 0.15);
  --danger-ink: #ff9c94; --danger-bg: rgba(239, 68, 68, 0.15);
  --info-ink: #9cc0ff;  --info-bg: rgba(59, 130, 246, 0.16);

  /* Elevation reads as depth on a dark ground */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px -20px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 16px 40px -16px rgba(0, 0, 0, 0.8);

  /* Bootstrap tokens (utilities + stock widgets pick these up) */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: rgba(200, 212, 227, 0.72);
  --bs-tertiary-bg: var(--surface-3);
  --bs-secondary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
  --bs-heading-color: var(--ink);
  --bs-link-color: #8fb6ff;
  --bs-link-hover-color: #b0ccff;
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bs-box-shadow: var(--shadow-card);
  --bs-code-color: #f0a6c8;
  --bs-highlight-bg: rgba(201, 162, 74, 0.35);
  --bs-highlight-color: var(--ink);
  --bs-form-invalid-color: #ff9c94;
  --bs-form-invalid-border-color: #b3564f;
  --bs-form-valid-color: #6fe0a8;
  --bs-form-valid-border-color: #2f8f68;
}

/* KPI tiles carry fixed pastel tints in light mode; on a dark ground they
   need translucent versions so the accent stays legible without glare. */
[data-bs-theme="dark"] .kpi-blue   { --kpi-tint: rgba(59, 130, 246, 0.16); --kpi-ink: #8fb6ff; --kpi-accent: #3b82f6; }
[data-bs-theme="dark"] .kpi-amber  { --kpi-tint: rgba(245, 158, 11, 0.16); --kpi-ink: #f3c76d; --kpi-accent: #d99a2b; }
[data-bs-theme="dark"] .kpi-teal   { --kpi-tint: rgba(16, 185, 129, 0.16); --kpi-ink: #6fe0a8; --kpi-accent: #10b981; }
[data-bs-theme="dark"] .kpi-violet { --kpi-tint: rgba(139, 92, 246, 0.18); --kpi-ink: #c3a9ff; --kpi-accent: #8b5cf6; }

/* Search-source badges that name a fixed hue in each theme. */
[data-bs-theme="dark"] .ask-badge-ai     { color: #c3a9ff; background: rgba(139, 92, 246, 0.18); }
[data-bs-theme="dark"] .ask-badge-partial { color: #f3c76d; background: rgba(245, 158, 11, 0.16); }
[data-bs-theme="dark"] .ask-snip mark    { background: rgba(201, 162, 74, 0.42); color: var(--ink); }

/* Bootstrap's own dark theme leaves .table-light/.list-group light; ours are
   token-driven above, but the data-api variants still need the nudge. */
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--surface-3); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { box-shadow: none; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Bootstrap ships .bg-light/.bg-white/.text-dark as literal utility colours, so they
   do not follow data-bs-theme. Remap the few the views use so no panel stays pale. */
[data-bs-theme="dark"] .bg-light { background-color: var(--surface-3) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--card-bg) !important; }
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--page-bg) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ink) !important; }
[data-bs-theme="dark"] .border-light { border-color: var(--line) !important; }
[data-bs-theme="dark"] .list-group-item { background-color: var(--card-bg); color: var(--text); }
[data-bs-theme="dark"] .dropdown-menu { background: var(--surface-2); }
[data-bs-theme="dark"] hr { border-color: var(--line); }
[data-bs-theme="dark"] .auth-body { background-color: #060b13; }

/* ---------------------------------------------------------------- base */

html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
  background: var(--page-bg);
}

@media (min-width: 768px) {
  html { font-size: 15px; }
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.011em;
}

h1.h3, h1 { font-weight: 700; letter-spacing: -0.02em; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

::selection { background: rgba(21, 83, 196, 0.16); }

/* Slim, theme-matched scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

/* Accessible focus (kept — no outline removal anywhere) */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus,
.form-select:focus, .form-check-input:focus, .nav-link:focus, a:focus-visible {
  box-shadow: 0 0 0 0.18rem rgba(21, 83, 196, 0.22) !important;
  outline: none;
}

/* ------------------------------------------------------------ app shell */

/* Opaque on purpose: a translucent + blurred sticky bar keeps its old paint after the
   theme switches, so the header could stay light on a dark page until the next scroll.
   Solid tokens follow the theme immediately and cost less to composite. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11, 27, 51, 0.02), 0 8px 24px -20px rgba(11, 27, 51, 0.35);
  padding: 0.55rem 0;
  margin-bottom: 1.75rem;
}

.app-header .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Brand lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 0.25rem 0.25rem 0;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }

/* Uploaded logo in the header (Administration -> Settings -> Branding). The plate keeps the
   navy artwork legible on the dark header theme; the height is fixed so a wide logo never
   makes the header grow. Sized to be read at a glance rather than as a small badge. */
.brand-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 6px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(9, 30, 66, 0.08);
  box-shadow: 0 8px 20px -12px rgba(2, 8, 20, 0.6);
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* The product lockup beside the logo: the company name is already in the artwork, so only the
   product is written out, stacked as a two-line lockup — a quiet "ENTERPRISE" over a strong gold
   "DMS" — so the block reads as a unit next to the taller logo instead of a line of text floating
   beside it. A hairline divider keeps the logo and the text from touching. */
.brand-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 3px;
  min-height: 40px;
  padding-left: 1rem;
  margin-left: 0.1rem;
  border-left: 1px solid var(--line);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-wordmark-top {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.brand-wordmark-main {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--gold-500);
}

/* Primary navigation */
.mainnav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.mainnav .nav-link {
  color: var(--nav-ink);
  font-size: 0.875rem;
  font-weight: 550;
  padding: 0.42rem 0.72rem;
  border-radius: 9px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mainnav .nav-link:hover { background: var(--hover-bg); color: var(--ink); }
.mainnav .nav-link.active {
  background: var(--tint-bg);
  color: var(--tint-ink);
  font-weight: 650;
}
.mainnav .nav-link.disabled { color: var(--disabled-ink); }

.mainnav .dropdown-toggle::after {
  margin-left: 0.45rem;
  opacity: 0.55;
  vertical-align: 0.1em;
}

.mainnav .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: var(--shadow-pop);
  font-size: 0.875rem;
}
.mainnav .dropdown-item {
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  color: var(--text);
  font-weight: 500;
}
.mainnav .dropdown-item:hover, .mainnav .dropdown-item:focus {
  background: var(--tint-bg);
  color: var(--tint-ink);
}
.mainnav .dropdown-divider { border-color: var(--line-soft); margin: 0.35rem 0.2rem; }

/* Signed-in header is a deliberate two-tier bar:
   tier 1 = brand (left) + search/identity (right), tier 2 = primary nav. */
.header-authed .brand { order: 1; }
.header-authed .header-tools { order: 2; }
.header-authed .mainnav {
  order: 4;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  margin-top: 0.15rem;
  padding-top: 0.3rem;
}

/* Right cluster: search + identity */
.header-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.navsearch .form-control {
  background: var(--hover-bg-strong);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.84rem;
  padding: 0.45rem 1rem;
  color: var(--ink);
  width: 220px;
}
.navsearch .form-control::placeholder { color: var(--placeholder); }
.navsearch .form-control:hover { background: var(--hover-bg); }
.navsearch .form-control:focus {
  background: var(--field-bg);
  border-color: rgba(21, 83, 196, 0.45);
  box-shadow: 0 0 0 0.18rem rgba(21, 83, 196, 0.14);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.35rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.user-chip:hover { background: var(--hover-bg); color: var(--ink); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-800), var(--blue-600));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.btn-signout {
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 0.34rem 0.85rem !important;
  background: var(--field-bg);
}
.btn-signout:hover { border-color: #f0b9b5 !important; color: var(--danger-ink) !important; background: var(--danger-bg) !important; }

/* ------------------------------------------------------------- content */

main {
  flex: 1 0 auto;
  padding-bottom: 2.5rem;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-500);
  margin-bottom: 0.3rem;
}

.page-title {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.page-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.35rem 0 0;
  max-width: 62ch;
}

main h1.h3 { font-size: 1.55rem; color: var(--ink); }

.text-muted { color: var(--muted) !important; }

/* ---------------------------------------------------------------- KPI */

.kpi {
  background: var(--card-bg);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.15rem 1.25rem 1.05rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kpi-accent, var(--blue-600)), transparent 70%);
  opacity: 0.9;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }

.kpi-blue   { --kpi-accent: #1553c4; --kpi-tint: #eef4fd; --kpi-ink: #1553c4; }
.kpi-amber  { --kpi-accent: #b7791f; --kpi-tint: #fdf3e0; --kpi-ink: #93610a; }
.kpi-teal   { --kpi-accent: #0f7b52; --kpi-tint: #e8f7f0; --kpi-ink: #0f7b52; }
.kpi-violet { --kpi-accent: #6b46c1; --kpi-tint: #f1ecfc; --kpi-ink: #6b46c1; }

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--kpi-tint, var(--blue-050));
  color: var(--kpi-ink, var(--blue-600));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kpi-icon svg { width: 18px; height: 18px; }

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.kpi-foot {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
a.kpi-foot { color: var(--blue-600); font-weight: 600; }
a.kpi-foot:hover { color: var(--blue-700); }
a.kpi-foot::after { content: "\2192"; transition: transform 0.15s ease; display: inline-block; }
a.kpi-foot:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- panels */

.card, .card.border-0 {
  background: var(--card-bg);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.card-body { padding: 1.25rem 1.35rem; }

.card-title { font-weight: 650; font-size: 0.98rem; color: var(--ink); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.panel-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin: 0;
}

/* Section heading used inside panels (h6 text-uppercase text-muted) */
h2.h6, .h6 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--muted);
}

/* -------------------------------------------------------------- tables */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line-soft);
  color: var(--text);
  margin-bottom: 0;
  font-size: 0.89rem;
}

.table > thead {
  background: var(--surface-3);
}

.table thead th {
  background: var(--surface-3);
  color: var(--table-head-ink);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line) !important;
  padding: 0.72rem 1rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.table > tbody:last-child > tr:last-child > td { border-bottom: 0; }

.table-hover > tbody > tr:hover { background: var(--surface-3); }
.table > tbody > tr > td.fw-semibold { color: var(--ink); }

.table-light { --bs-table-bg-state: var(--surface-3); background: var(--surface-3); }

.table td .btn-group, .table td form.d-inline { vertical-align: middle; }

/* A collapsed row is a full-width panel ("new subfolder" under a folder row). Bootstrap's
   .collapse sets display:block, which breaks table cell layout, so keep it a real row. */
tr.collapse { display: none; }
tr.collapse.show { display: table-row; }

/* The panel sits flush under its folder row. */
tr.collapse > td { background: var(--surface-3); border-bottom: 1px solid var(--line); }

/* Row actions stay on one line with a consistent gap. Bootstrap flex handles the spacing,
   so a folder row with six buttons no longer looks like one solid block of outlines. */
.row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.row-actions form { margin: 0; }

/* "Attach years" chips beside the new-folder name input: same control height as an
   input-sm so the row's baselines line up. */
.nf-years {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  min-height: calc(1.5em + 0.5rem + 2px);
}

/* Inline code is a hint, not a highlight: keep it quiet inside helper text. */
.form-text code, .form-label code {
  color: var(--muted);
  font-size: 0.86em;
}

/* --------------------------------------------------------- list / feed */

/* Recent activity — a fixed six-row feed. Rows have a constant height and every line is
   clipped, so the dashboard card is exactly the same size whether an audit detail is three
   words or three paragraphs. The full text stays in the tooltip. */
.activity-count {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  white-space: nowrap;
}

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.66rem 0.25rem;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 6px;
}
.activity-list li:hover { background: var(--surface-3); }
.activity-list li:last-child { border-bottom: 0; }

.activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-050);
}
.activity-row.is-fail .activity-dot { background: var(--danger-ink); box-shadow: 0 0 0 3px var(--danger-bg); }

.activity-body { min-width: 0; }

.activity-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.activity-action {
  font-weight: 650;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-time {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.activity-meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.12rem;
  line-height: 1.35;
}

.activity-cat { white-space: nowrap; }

.activity-user::before { content: "·"; margin-right: 0.45rem; }
.activity-user { white-space: nowrap; }

.activity-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.74rem;
}
.activity-detail::before { content: "·"; margin-right: 0.45rem; font-family: inherit; }

@media (max-width: 575.98px) {
  .activity-meta { flex-wrap: nowrap; }
  .activity-detail { display: none; }
}

/* Quick actions */
.qa-list { display: flex; flex-direction: column; gap: 0.55rem; }

.qa-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}
.qa-link::after { content: "\2192"; color: var(--muted); transition: transform 0.15s ease; }
.qa-link:hover {
  background: var(--tint-bg);
  border-color: rgba(21, 83, 196, 0.35);
  color: var(--tint-ink);
  transform: translateX(2px);
}
.qa-link:hover::after { color: var(--blue-600); transform: translateX(3px); }

/* -------------------------------------------------------------- buttons */

.btn {
  --bs-btn-border-radius: 9px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.48rem 1.05rem;
  transition: all 0.15s ease;
}

.btn-primary {
  --bs-btn-bg: var(--blue-600);
  --bs-btn-border-color: var(--blue-600);
  --bs-btn-hover-bg: var(--blue-700);
  --bs-btn-hover-border-color: var(--blue-700);
  --bs-btn-active-bg: var(--blue-700);
  --bs-btn-active-border-color: var(--blue-700);
  --bs-btn-disabled-bg: #9db5e0;
  --bs-btn-disabled-border-color: #9db5e0;
  background: var(--blue-600);
  border-color: var(--blue-600);
  box-shadow: 0 6px 16px -10px rgba(21, 83, 196, 0.8);
}
.btn-primary:hover { background: var(--blue-700); border-color: var(--blue-700); }

.btn-outline-primary {
  color: var(--tint-ink);
  border-color: rgba(21, 83, 196, 0.45);
}
.btn-outline-primary:hover { background: var(--tint-bg); border-color: var(--blue-600); color: var(--tint-ink); }

.btn-outline-secondary {
  color: var(--ghost-ink);
  border-color: var(--line);
  background: var(--field-bg);
}
.btn-outline-secondary:hover { background: var(--hover-bg-strong); color: var(--ink); border-color: var(--ghost-border); }

.btn-outline-success { color: var(--ok-ink); border-color: rgba(15, 123, 82, 0.4); }
.btn-outline-success:hover { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-ink); }

.btn-outline-danger { color: var(--danger-ink); border-color: rgba(179, 38, 30, 0.38); }
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-ink); }

.btn-sm { padding: 0.28rem 0.7rem; font-size: 0.8rem; border-radius: 8px; }
.btn-lg { padding: 0.62rem 1.4rem; font-size: 0.95rem; border-radius: 11px; }

.btn-link { color: var(--blue-600); font-weight: 600; }

/* ----------------------------------------------------------- form fields */

.form-label {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--label-ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.32rem;
}

.form-control, .form-select {
  border-color: var(--line);
  border-radius: 9px;
  background-color: var(--field-bg);
  color: var(--ink);
  font-size: 0.89rem;
  padding: 0.5rem 0.8rem;
}
.form-control::placeholder { color: var(--placeholder); }
.form-control:hover, .form-select:hover { border-color: var(--ghost-border); }
.form-control:focus, .form-select:focus {
  border-color: rgba(21, 83, 196, 0.55);
  background: var(--field-bg);
  color: var(--ink);
}
.form-control-sm { padding: 0.32rem 0.6rem; font-size: 0.82rem; border-radius: 8px; }
.form-control-lg { padding: 0.68rem 0.95rem; font-size: 0.97rem; border-radius: 11px; }

.form-control[readonly] { background: var(--field-bg-readonly); }

.form-text { font-size: 0.78rem; color: var(--muted); }

.input-group-text {
  border-color: var(--line);
  background: var(--field-bg-readonly);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.85rem;
}

.form-check-input:checked { background-color: var(--blue-600); border-color: var(--blue-600); }

/* Filter panel form rows sit inside a tight card */
.card .row .form-label { font-size: 0.72rem; text-transform: none; }

/* ----------------------------------------------------------- badges */

.badge {
  font-weight: 650;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.32em 0.65em;
  border-radius: 999px;
}

.text-bg-success { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.text-bg-danger  { background: var(--danger-bg) !important; color: var(--danger-ink) !important; }
.text-bg-info    { background: var(--info-bg) !important; color: var(--info-ink) !important; }
.text-bg-primary { background: var(--info-bg) !important; color: var(--info-ink) !important; }
.text-bg-secondary, .text-bg-light { background: var(--pill-bg) !important; color: var(--pill-ink) !important; }
.text-bg-dark { background: var(--navy-800) !important; color: #fff !important; }
[data-bs-theme="dark"] .text-bg-dark { background: var(--surface-3) !important; color: var(--text) !important; }

/* ------------------------------------------------------------- alerts */

.alert {
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  border: 1px solid transparent;
  padding: 0.85rem 1.05rem;
}
.alert-success { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(15, 123, 82, 0.18); }
.alert-danger  { background: var(--danger-bg); color: var(--danger-ink); border-color: rgba(179, 38, 30, 0.18); }
.alert-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(147, 97, 10, 0.18); }
.alert-info    { background: var(--info-bg); color: var(--info-ink); border-color: rgba(21, 83, 196, 0.16); }
/* Bootstrap's light/secondary alerts resolve to a flat grey in dark mode; keep them as
   quiet themed panels in both themes so they match the surrounding cards. */
.alert-light, .alert-secondary { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.alert-primary { background: var(--info-bg); color: var(--info-ink); border-color: rgba(21, 83, 196, 0.16); }

/* --------------------------------------------------------- breadcrumbs */

.breadcrumb {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.8rem;
  margin-bottom: 1.1rem;
  width: fit-content;
  box-shadow: var(--bs-box-shadow-sm);
}
.breadcrumb-item a { color: var(--blue-600); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--crumb-sep); }
.breadcrumb-item.active { color: var(--muted); font-weight: 550; }

/* --------------------------------------------------------- pagination */

.pagination .page-link {
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.84rem;
  margin: 0 2px;
  border-radius: 9px !important;
  padding: 0.38rem 0.8rem;
  box-shadow: none;
}
.pagination .page-link:hover { background: var(--tint-bg); border-color: rgba(21, 83, 196, 0.35); color: var(--tint-ink); }
.pagination .page-item.active .page-link {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
}
.pagination .page-item.disabled .page-link { background: var(--surface-3); color: var(--disabled-ink); border-color: var(--line); }

/* ------------------------------------------------------------ misc bits */

.font-monospace, .font-monospace * {
  font-family: var(--font-mono);
  font-size: 0.84em;
  letter-spacing: -0.01em;
}

.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }

.list-unstyled li .fw-semibold { color: var(--ink); }

/* Content links inside panels. The folder-tree label/icon carry their own styling, so they
   are excluded here (otherwise this high-specificity rule would force them blue+bold). */
.card a:not(.btn):not(.kpi-foot):not(.qa-link):not(.brand):not(.nav-link):not(.dropdown-item):not(.ft-label):not(.ft-open) {
  color: var(--blue-600);
  font-weight: 600;
}
.card a:not(.btn):hover { color: var(--blue-700); }

/* Data tables: keep monospace ids/numbers readable */
code, .text-monospace { font-family: var(--font-mono); }

/* Dropzone (upload) — data-dropzone wrapper gets .border-primary on drag */
[data-dropzone].border-primary {
  outline: 2px dashed rgba(21, 83, 196, 0.55);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ------------------------------------------------------------------
   Progressive bulk upload (spec 42)
   The page posts one file per request so the card can count files
   ("3 of 100") and report each outcome as it happens. Every rule
   paints through the theme tokens, so light and dark cannot drift.
   ------------------------------------------------------------------ */
.upload-form { display: grid; gap: 0.7rem; }

.upload-drop {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  border: 1px dashed var(--ghost-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.upload-drop:hover,
[data-dropzone].border-primary .upload-drop {
  border-color: var(--blue-600);
  background: var(--tint-bg);
}

.upload-drop-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--tint-bg);
  color: var(--tint-ink);
}

.upload-drop-icon svg { width: 1.15rem; height: 1.15rem; }

.upload-drop-copy { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.upload-drop-title { font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.upload-drop-hint { font-size: 0.76rem; color: var(--muted); }

.upload-pick { flex: none; margin: 0; }

/* Selected-file summary: "12 files · 84.3 MB · 3 types" before the batch starts. */
.upload-selection { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.upload-selection b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Live batch panel ------------------------------------------------- */
.upload-progress {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.upload-progress-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
}

.upload-progress-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.upload-progress-count b { color: var(--tint-ink); }

.upload-progress-label {
  overflow: hidden;
  font-size: 0.82rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-progress-pct {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.upload-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--pill-bg);
  overflow: hidden;
}

.upload-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-700) 0%, var(--blue-600) 55%, #4f8ef0 100%);
  transition: width 220ms ease;
}

/* Finished states: green when every file landed, amber when some did not. */
.upload-progress[data-state="done"] .upload-bar-fill { background: var(--ok-ink); }
.upload-progress[data-state="partial"] .upload-bar-fill { background: var(--warn-ink); }

.upload-progress-stats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
}

.upload-progress-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Separator between the counters, so they never read as one run of text. */
.upload-progress-stats > * + *::before { content: "\00b7"; margin-right: 0.5rem; color: var(--crumb-sep); }

.upload-queue {
  list-style: none;
  margin: 0;
  padding: 0.15rem;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-bg);
}

.upload-queue:empty { display: none; }

.upload-item {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.5rem;
  border-radius: 7px;
  font-size: 0.8rem;
}

.upload-item + .upload-item { border-top: 1px solid var(--line-soft); border-radius: 0; }
.upload-item.is-active { background: var(--hover-bg); }

.upload-item-name {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-item-state { font-size: 0.74rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upload-item-state a { color: inherit; font-weight: 650; }
.upload-item-version { margin-left: 0.3rem; font-weight: 700; color: var(--tint-ink); }

.upload-dot { justify-self: center; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--disabled-ink); }
.upload-item.is-active .upload-dot { background: var(--info-ink); animation: upload-pulse 1.1s ease-in-out infinite; }
.upload-item.is-done .upload-dot { background: var(--ok-ink); }
.upload-item.is-failed .upload-dot { background: var(--danger-ink); }
.upload-item.is-paused .upload-dot { background: var(--warn-ink); }
.upload-item.is-done .upload-item-state { color: var(--ok-ink); }
.upload-item.is-failed .upload-item-state { color: var(--danger-ink); }
.upload-item.is-paused .upload-item-state { color: var(--warn-ink); }

@keyframes upload-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.upload-item-note { grid-column: 2 / -1; font-size: 0.72rem; color: var(--danger-ink); overflow-wrap: anywhere; }
.upload-item.is-paused .upload-item-note { color: var(--warn-ink); }

.upload-progress-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.upload-progress-actions .btn { font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .upload-item.is-active .upload-dot { animation: none; }
  .upload-bar-fill { transition: none; }
}

@media (max-width: 575.98px) {
  .upload-drop { flex-wrap: wrap; }
  .upload-pick { width: 100%; }
  .upload-progress-head { grid-template-columns: minmax(0, 1fr) auto; }
  .upload-progress-label { grid-column: 1 / -1; order: 3; }
}

.clickable { cursor: pointer; }

.pre-wrap { white-space: pre-wrap; }

.w-95 { width: 9.5rem; }
.w-200 { width: 200px; }

/* Footer */
.app-footer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.1rem 0;
  margin-top: auto;
}
.app-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.app-footer .container > div { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.app-footer a { color: var(--muted); font-weight: 550; }
.app-footer a:hover { color: var(--blue-600); }
.app-footer strong { color: var(--ink); font-weight: 650; }

/* =================================================== auth screens ==== */

.auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(21, 83, 196, 0.35) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(201, 162, 74, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 100%);
  position: relative;
  overflow: hidden;
}
/* faint blueprint grid over the gradient */
.auth-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(1000px 700px at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(1000px 700px at 50% 40%, #000 30%, transparent 85%);
  pointer-events: none;
}

.auth-wrap {
  width: 100%;
  max-width: 430px;
  padding: 28px 18px;
  position: relative;
  z-index: 1;
}

@media (max-width: 420px) {
  .auth-card { padding: 26px 20px 24px; border-radius: 16px; }
  .auth-brand { padding-top: 24px; }
  .auth-brand-sub-wide { font-size: 0.6rem; letter-spacing: 0.1em; }
}

.auth-card {
  background: var(--auth-card-bg);
  border-radius: 18px;
  padding: 34px 32px 30px;
  box-shadow: 0 40px 90px -30px rgba(2, 8, 20, 0.7), 0 0 0 1px var(--auth-card-ring);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-800), var(--blue-600) 55%, var(--gold-500));
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Keeps the plate clear of the theme switch in the card's top-right corner. */
  padding-top: 8px;
  margin-bottom: 22px;
}

/* White plate behind the corporate logo. The artwork is delivered on white, so mounting it on
   a plate keeps the navy/gold exactly as supplied in both themes instead of sitting it on the
   dark card or tinting it. */
.auth-logo-plate {
  display: block;
  padding: 10px 16px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(9, 30, 66, 0.08);
  box-shadow: 0 14px 30px -22px rgba(2, 8, 20, 0.85);
}

/* Rendered at 280 CSS px inside the plate: the 340px cut is used at 1x and the 680px cut at
   2x, so the logo is never upscaled. height:auto keeps the supplied 680x203 ratio. */
.auth-logo {
  display: block;
  /* The width comes from the img width attribute saved on
     Administration -> Settings -> Branding (an inline style would be blocked by the CSP).
     No width rule here: CSS would override that attribute. */
  max-width: 100%;
  height: auto;
}

/* Administration -> Settings -> Branding: the sign-in plate, used as a live preview. */
.branding-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px 4px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-2, transparent);
}

.auth-brand-name { font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.15; }
.auth-brand-sub {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 650;
}
.auth-brand-sub-wide { text-align: center; letter-spacing: 0.14em; }

.auth-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}

.auth-subtitle { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; }

.auth-card .form-label { font-size: 0.8rem; color: var(--label-ink); }
.auth-card .form-control { padding: 0.68rem 0.95rem; border-radius: 11px; font-size: 0.95rem; }
.auth-card .btn-primary {
  padding: 0.68rem 1rem;
  font-size: 0.95rem;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-600), var(--navy-700));
  border: 0;
}
.auth-card .btn-primary:hover { background: linear-gradient(135deg, var(--blue-700), var(--navy-800)); }
.auth-card a { color: var(--blue-600); font-weight: 600; font-size: 0.85rem; }
.auth-card a:hover { color: var(--blue-700); }

.auth-code-input {
  font-family: var(--font-mono);
  letter-spacing: 8px;
  text-align: center;
  font-size: 24px;
}

.auth-qr {
  width: 190px;
  height: 190px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}

.auth-footer {
  color: rgba(200, 214, 238, 0.75);
  font-size: 0.76rem;
  text-align: center;
  margin-top: 18px;
  letter-spacing: 0.02em;
}

/* ================================================= responsive ========= */

@media (max-width: 991.98px) {
  .app-header .container { justify-content: flex-start; }
  .header-tools { margin-left: 0; width: 100%; order: 3; }
  .navsearch { flex: 1; }
  .navsearch .form-control { width: 100%; }
  .mainnav { order: 4; width: 100%; }
}

@media (max-width: 575.98px) {
  .page-title { font-size: 1.35rem; }
  .kpi-value { font-size: 1.7rem; }
  .card-body { padding: 1rem; }
}

/* ================================ document assistant (ask) ============
   One surface for the dashboard box, the AI Search page and every answer
   they produce. It replaces the dark navy hero: a near-black full-width
   block dominated the dashboard and made the assistant read as a separate
   application bolted onto it. Answers now arrive in their own card, so
   body text sits on the page surface instead of inside a banner.
   ===================================================================== */

.ask { margin-bottom: 1.5rem; }

.ask-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.2vw, 1.45rem) clamp(1.05rem, 2.4vw, 1.55rem);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(201, 162, 74, 0.10) 0%, rgba(201, 162, 74, 0) 54%),
    radial-gradient(100% 130% at 0% 0%, rgba(21, 83, 196, 0.07) 0%, rgba(21, 83, 196, 0) 60%),
    var(--card-bg);
  box-shadow: var(--shadow-card);
}

/* Gold hairline along the top edge: the single brand flourish, held to 2px. */
.ask-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500) 0%, rgba(201, 162, 74, 0.22) 38%, rgba(21, 83, 196, 0) 78%);
}

[data-bs-theme="dark"] .ask-hero {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(201, 162, 74, 0.1) 0%, rgba(201, 162, 74, 0) 54%),
    radial-gradient(100% 130% at 0% 0%, rgba(59, 130, 246, 0.13) 0%, rgba(59, 130, 246, 0) 60%),
    var(--card-bg);
}

.ask-hero-head { display: flex; align-items: center; gap: 0.8rem; }

.ask-spark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--gold-300);
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950));
  box-shadow: 0 8px 18px -12px rgba(7, 21, 39, 0.85);
}

.ask-spark svg { width: 20px; height: 20px; }

.ask-title { margin: 0; color: var(--ink); font-size: 1.08rem; letter-spacing: -0.012em; }
.ask-sub { margin: 0.14rem 0 0; color: var(--muted); font-size: 0.855rem; max-width: 76ch; }

.ask-form {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding: 0.3rem 0.32rem 0.3rem 0.95rem;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(11, 27, 51, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ask-form:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(21, 83, 196, 0.11);
}

.ask-form-glyph {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.ask-form-glyph svg { width: 17px; height: 17px; }

.ask-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.6rem 0;
  font-size: 0.97rem;
  color: var(--ink);
}

.ask-input::placeholder { color: var(--placeholder); }

.ask-send {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.56rem 1.25rem;
  font-weight: 650;
  font-size: 0.89rem;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  transition: filter 0.15s ease, transform 0.15s ease;
}

.ask-send:hover { filter: brightness(1.08); }
.ask-send:active { transform: translateY(1px); }

.ask-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0.65rem 0 0 0.15rem;
  font-size: 0.745rem;
  color: var(--muted);
}

.ask-foot span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ask-foot svg { width: 13px; height: 13px; opacity: 0.8; }

/* ------------------------------------------------------------------
   Answer panel - shared by the dashboard thread and the AI Search page
   ------------------------------------------------------------------ */

.ask-thread { margin-top: 0.85rem; }
.ask-thread:empty { display: none; }

.ask-panel {
  display: grid;
  gap: 0.85rem;
  padding: clamp(0.95rem, 2vw, 1.3rem);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.ask-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}

.ask-panel-glyph {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--tint-ink);
  background: var(--tint-bg);
}

.ask-panel-glyph svg { width: 15px; height: 15px; }

.ask-panel-titles { flex: 1; min-width: 0; }

.ask-panel-kicker {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ask-question {
  margin: 0.16rem 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ask-panel-mode {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  color: var(--ok-ink);
  background: var(--ok-bg);
}

.ask-panel-mode.is-text { color: var(--info-ink); background: var(--info-bg); }

.ask-answer {
  margin: 0;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 0.965rem;
  line-height: 1.72;
  max-width: 84ch;
  overflow-wrap: anywhere;
}

.ask-note { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--muted); max-width: 84ch; }

.ask-loading { display: flex; align-items: center; gap: 0.45rem; padding: 0.1rem 0; }

.ask-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-600);
  opacity: 0.4;
  animation: ask-dot 1.05s infinite ease-in-out;
}

.ask-dot:nth-child(2) { animation-delay: 0.15s; }
.ask-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes ask-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.ask-loading-text { font-size: 0.82rem; color: var(--muted); }

/* ------------------------------------------------------------------
   Sources
   ------------------------------------------------------------------ */

.ask-sources-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ask-count {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pill-ink);
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
}

.ask-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ask-source-item { list-style: none; margin: 0; padding: 0; }

.ask-source {
  display: block;
  padding: 0.62rem 0.78rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.ask-source:hover, .ask-source:focus-visible {
  background: var(--card-bg);
  border-color: rgba(21, 83, 196, 0.45);
  box-shadow: 0 10px 22px -18px rgba(11, 27, 51, 0.55);
}

/* The query appears in the file name - exact-match-first ranking pins it on
   top, so its card carries the brand tint. */
.ask-source.ask-name-hit {
  background: linear-gradient(90deg, rgba(21, 83, 196, 0.07), rgba(21, 83, 196, 0) 42%);
  border-color: rgba(21, 83, 196, 0.3);
}

.ask-source.ask-name-hit:hover, .ask-source.ask-name-hit:focus-visible { background: var(--card-bg); }

.ask-source-top { display: flex; align-items: flex-start; gap: 0.55rem; }

.ask-rank {
  flex: 0 0 auto;
  min-width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}

.ask-source.ask-name-hit .ask-rank { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }

.ask-filetype {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.08rem 0.32rem;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tint-ink);
  background: var(--tint-bg);
}

.ask-source-title { flex: 1; min-width: 0; line-height: 1.4; }
.ask-source-name { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.ask-source-ext { color: var(--muted); font-size: 0.8rem; }

.ask-badges { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; padding-top: 0.1rem; }

.ask-badge {
  font-size: 0.64rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 0.1rem 0.46rem;
  white-space: nowrap;
}

.ask-badge-text { color: var(--info-ink); background: var(--info-bg); }
.ask-badge-both { color: var(--ok-ink); background: var(--ok-bg); }
.ask-badge-ai { color: #6b46c1; background: #f1ecfc; }
/* Exact-match-first ranking: the query appears in the document's file name. */
.ask-badge-name { color: var(--tint-ink); background: var(--tint-bg); border: 1px solid rgba(21, 83, 196, 0.32); }
/* Enhancement v1.1: only part of this document is indexed (first-page-only default). */
.ask-badge-partial { color: #92600a; background: #fff3cd; }

.ask-open {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.73rem;
  font-weight: 650;
  color: var(--tint-ink);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ask-source:hover .ask-open, .ask-source:focus-visible .ask-open { opacity: 1; }
/* No hover on touch: keep the affordance visible. */
@media (hover: none) { .ask-open { opacity: 1; } }

/* ------------------------------------------------------------------
   AI Search page: search field, mode tabs, notices
   ------------------------------------------------------------------ */

.ask-page .ask-form { margin-top: 0; max-width: 980px; }

.ask-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.85rem 0 1.1rem;
  padding: 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
}

.ask-tab {
  font-size: 0.81rem;
  font-weight: 650;
  color: var(--muted);
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}

.ask-tab:hover { color: var(--ink); background: var(--hover-bg); }
.ask-tab.is-active { color: #fff; background: var(--blue-600); }

.ask-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-500);
  border-radius: 10px;
}

.ask-notice svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.15rem; color: var(--gold-500); }
.ask-notice strong { color: var(--ink); font-weight: 650; }
.ask-notice.is-warn { border-left-color: var(--warn-ink); }

@media (max-width: 575.98px) {
  .ask-form { padding-left: 0.85rem; }
  .ask-send { padding: 0.5rem 1rem; }
  .ask-hero-head { align-items: flex-start; }
  .ask-source-top { flex-wrap: wrap; }
  .ask-badges { justify-content: flex-start; width: 100%; }
  .ask-panel-head { flex-wrap: wrap; }
  .ask-panel-mode { margin-left: 0; }
}

/* ------------------------------------------------------------------
   Permission grant checkbox tree (spec 37)
   ------------------------------------------------------------------ */
.grant-tree-box {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0.5rem;
  padding: 0.5rem 0.6rem;
  max-height: 360px;
  overflow: auto;
}
.grant-tree { list-style: none; margin: 0; padding: 0; }
.grant-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 1.05rem;
  margin-left: 0.5rem;
  border-left: 1px dashed var(--line);
}
.grant-tree .gt-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  margin: 1px 0;
  border-radius: 0.4rem;
  font-weight: 500;
  min-width: 0;
}
label.gt-row { cursor: pointer; margin: 0; }
label.gt-row:hover { background: var(--hover-bg); }
label.gt-row input[type="checkbox"] { flex: 0 0 auto; accent-color: #2f6fed; }
.grant-tree .gt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.grant-tree .gt-sub {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}
.grant-tree .gt-kind {
  margin-left: auto;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  white-space: nowrap;
}
.grant-tree .gt-ok { color: var(--ok-ink); font-size: 0.72rem; white-space: nowrap; }
.gt-ok-inline { color: var(--ok-ink); }
/* Context rows: ancestors of tickable nodes, shown for orientation only. */
.grant-tree .gt-ctx { color: var(--muted); font-weight: 500; }
.grant-tree .gt-ctx .gt-name { color: var(--muted); }
.grant-tree .is-inactive > .gt-row .gt-name { opacity: 0.7; }

/* Source meta + excerpt + panel footer. The raw fusion score is deliberately
   not shown: "exact match" / "AI match" already say what the user needs, and a
   five-decimal float next to every file read as debug output. */

.ask-source-meta {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  color: var(--muted);
  margin-top: 0.18rem;
  overflow-wrap: anywhere;
}

.ask-snip {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  line-height: 1.58;
  color: var(--text);
  overflow-wrap: anywhere;
  /* Clamped so ten cited passages stay scannable; the document is one click away. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ask-snip mark { background: rgba(233, 196, 106, 0.5); color: inherit; font-weight: 600; padding: 0 0.1em; border-radius: 3px; }

.ask-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
}

.ask-meta { font-size: 0.74rem; color: var(--muted); }

.ask-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ask-link {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--tint-ink);
  background: var(--tint-bg);
  border-radius: 8px;
  padding: 0.28rem 0.6rem;
}

.ask-link:hover { color: var(--ink); background: var(--hover-bg); }

/* ------------------------------------------------------------------
   Admin > Folders: default system tree (company -> year -> department ->
   folders). Pure CSS via native <details>/<summary>, so it is keyboard
   accessible and works with JavaScript disabled.
   ------------------------------------------------------------------ */

.folder-tree, .folder-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Scoped to .folder-tree .ft-children so it out-specifies the reset above
   (class+class beats class+element) - otherwise the reset's margin/padding: 0
   cancels the nesting step and every level renders flush left. */
.folder-tree .ft-children {
  margin: 0.1rem 0 0.4rem 0.5rem;
  padding-left: 2.1rem;
  border-left: 1.5px solid rgba(105, 122, 150, 0.35);
}

/* Each nesting level steps clearly to the right off a vertical guide line, so the
   hierarchy reads as a tree (company > year > department > folder) at a glance. */
.ft-node { margin: 0; position: relative; }

/* Horizontal connector tick from the guide line into each child row. */
.ft-node::before {
  content: "";
  position: absolute;
  left: -2.1rem;
  top: 0.82rem;
  width: 2.1rem;
  height: 1px;
  background: rgba(105, 122, 150, 0.35);
}
/* The root-level nodes have no guide line above them, so no elbow. */
.folder-tree > .ft-node::before { content: none; }

/* One aligned row: caret, glyph, label, subtitle, meta. */
.ft-row, .ft-leaf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}

.ft-leaf { cursor: default; }

.ft-row:hover, .ft-leaf:hover { background: rgba(21, 83, 196, 0.06); }

/* Remove the default triangle; draw our own that rotates on open. */
.ft-row { list-style: none; }
.ft-row::-webkit-details-marker { display: none; }
.ft-row::marker { content: ""; }

.ft-caret {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  position: relative;
}
/* Chevron drawn with borders; rotates 90deg when the parent is open. */
.ft-caret::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.32rem;
  height: 0.32rem;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: translate(-60%, -50%) rotate(-45deg);
  transition: transform 0.14s ease;
}
details[open] > .ft-row .ft-caret::before { transform: translate(-50%, -60%) rotate(45deg); }

.ft-caret-none::before { content: none; }

.ft-glyph {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted);
  display: inline-flex;
}
.ft-glyph svg { width: 100%; height: 100%; }
.kind-company > .ft-row .ft-glyph, .kind-company.ft-leaf .ft-glyph { color: var(--navy-800); }
.kind-year > .ft-row .ft-glyph, .kind-year.ft-leaf .ft-glyph { color: var(--blue-600); }
.kind-department > .ft-row .ft-glyph, .kind-department.ft-leaf .ft-glyph { color: #7a5ac9; }
.kind-folder > .ft-row .ft-glyph, .kind-folder.ft-leaf .ft-glyph { color: #c9952a; }

.ft-label {
  flex: 0 1 auto;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
}
/* Structural labels are <span>s (click toggles the node in place); only document labels are
   real links, so the hover affordance is scoped to anchors to avoid implying span clicks navigate. */
a.ft-label:hover { color: var(--blue-700); text-decoration: underline; }
.ft-label.is-inactive { color: var(--muted); text-decoration: line-through; }
/* Path-context folder (ancestor of a granted folder the user cannot open themselves):
   muted non-link label so the branch reads as orientation, not as a browsable target. */
.ft-label.is-context { color: var(--muted); font-weight: 400; cursor: default; }

.ft-sub {
  flex: 0 1 auto;
  font-size: 0.74rem;
  color: var(--muted);
  font-family: var(--bs-font-monospace, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-meta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.ft-flag { font-size: 0.62rem; font-weight: 600; }

.ft-more {
  padding: 0.2rem 0.35rem 0.2rem 1.85rem;
  font-size: 0.74rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 575.98px) {
  .ft-label { max-width: 10rem; }
  .ft-sub { display: none; }
  .ft-meta { font-size: 0.68rem; }
}

/* Deliberate secondary action: opens the node in the classic folder browser in a NEW tab, so
   the tree itself stays put. Revealed on row hover / keyboard focus to reduce clutter. */
.ft-open {
  flex: 0 0 auto;
  margin-left: 0.45rem;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.ft-open svg { width: 0.86rem; height: 0.86rem; }
.ft-row:hover .ft-open, .ft-leaf:hover .ft-open, .ft-open:focus-visible { opacity: 1; }
.ft-open:hover { background: var(--tint-bg); color: var(--tint-ink); }

/* Document leaves, injected by JS when a folder is expanded (see site.js ftLoadDocs). */
.kind-document .ft-glyph { color: #d0662f; }
.ft-doc .ft-label { font-weight: 600; color: var(--ink); }
.ft-doc .ft-meta { font-variant-numeric: tabular-nums; }
.ft-docs-loading { font-style: normal; }

/* Documents page: left-side folder navigation tree (sticky, scrollable) with the active
   folder highlighted. Folder names are links that load that folder on the right. */
.doc-tree { position: sticky; top: 4.6rem; }
.doc-tree .card-body { max-height: calc(100vh - 7rem); overflow-y: auto; }
.doc-tree .ft-label { max-width: 12rem; }

.folder-tree .ft-node.is-selected > .ft-row,
.folder-tree .ft-node.is-selected.ft-leaf {
  background: var(--tint-bg);
}
.folder-tree .ft-node.is-selected > .ft-row .ft-caret::before,
.folder-tree .ft-node.is-selected.ft-leaf .ft-caret::before { border-color: var(--blue-600); }
.ft-label.is-active { color: var(--tint-ink); font-weight: 700; }

/* =====================================================================
   Theme switch
   ---------------------------------------------------------------------
   Server renders <html data-bs-theme="light|dark"> from the `dms-theme`
   cookie, so the chosen theme paints on first byte (no flash). site.js
   flips the attribute and rewrites the cookie. The button shows the theme
   it will switch TO: moon while light, sun while dark.
   ===================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--ghost-border);
  color: var(--tint-ink);
}

.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-bs-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* On the signed-out screen the button sits on the branded card itself. */
.theme-toggle-auth {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

/* =====================================================================
   Full-width shell
   ---------------------------------------------------------------------
   Bootstrap caps containers at 1320px, which leaves large monitors with
   two dead gutters. Documents/Details put real density on the page, so
   the shell grows with the viewport instead.
   ===================================================================== */

@media (min-width: 1500px) {
  .app-header .container,
  .app-footer .container,
  body > .container { max-width: 1640px; }
}

@media (min-width: 1900px) {
  .app-header .container,
  .app-footer .container,
  body > .container { max-width: 1800px; }
}

/* =====================================================================
   Documents — landing header
   ---------------------------------------------------------------------
   The landing pane is a file table (see the shared table styles); these
   are only the scope counters beside its heading.
   ===================================================================== */

/* Year filter over one folder's files (they used to be a separate picker screen). */
.doc-year-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.doc-year-chips-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 650;
  color: var(--muted);
  margin-right: 0.15rem;
}
.doc-year-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.doc-year-chip:hover { border-color: var(--blue-600); color: var(--blue-700); }
.doc-year-chip.is-on {
  background: var(--tint-bg);
  border-color: transparent;
  color: var(--tint-ink);
}
.doc-year-count {
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--muted);
}
.doc-year-chip.is-on .doc-year-count { color: var(--tint-ink); }

.doc-stat-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.doc-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 0.42rem 0.7rem;
}

.doc-stat b { font-size: 1.05rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.doc-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 650; }


/* =====================================================================
   Documents — search + upload-period bar
   ---------------------------------------------------------------------
   One calm row above the file table: a keyword box, an "Uploaded from →
   to" range styled as a single segmented control, and the actions. The
   period lights up in the brand tint when a date is actually narrowing
   the list, so an active filter is obvious without a summary line.
   ===================================================================== */

.doc-filter-card .card-body { padding: 0.8rem 0.9rem; }

.doc-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.doc-search { position: relative; flex: 1 1 300px; min-width: 0; }

.doc-search-icon {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--placeholder);
  pointer-events: none;
}

.doc-search-input {
  height: 2.45rem;
  padding-left: 2.25rem;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}

.doc-search-input::placeholder { color: var(--placeholder); }
.doc-search-input:focus {
  background: var(--field-bg);
  border-color: var(--blue-600);
  box-shadow: 0 0 0 0.18rem rgba(21, 83, 196, 0.16);
}

/* Upload period: icon + caption + two dates inside one rounded field. */
.doc-period {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.15rem 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.doc-period:hover { border-color: var(--ghost-border); }
.doc-period.is-active { background: var(--tint-bg); border-color: rgba(21, 83, 196, 0.35); }

.doc-period-icon { display: grid; place-items: center; color: var(--muted); }
.doc-period-icon svg { width: 0.95rem; height: 0.95rem; }
.doc-period.is-active .doc-period-icon { color: var(--tint-ink); }

.doc-period-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-period.is-active .doc-period-title { color: var(--tint-ink); }

.doc-period-field { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }

.doc-period-label { font-size: 0.72rem; color: var(--muted); }

.doc-period-input {
  width: auto;
  min-width: 7.2rem;
  padding: 0.1rem 0.15rem;
  font: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.doc-period-input:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

.doc-period-dash { width: 0.75rem; height: 1px; background: var(--crumb-sep); }

.doc-filter-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.doc-filter-actions .btn { display: inline-flex; align-items: center; height: 2.45rem; padding: 0 1.1rem; }

/* Version chip in the file table ------------------------------------- */
.doc-version {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pill-ink);
  background: var(--pill-bg);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.doc-version.is-multi { color: var(--tint-ink); background: var(--tint-bg); }

.doc-updated { font-size: 0.72rem; color: var(--tint-ink); }

/* Narrow screens: the period wraps its two dates onto a second line instead of
   pushing the card wider than the page. */
@media (max-width: 991.98px) {
  .doc-period { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; padding: 0.35rem 0.6rem; }
  .doc-period-input { min-width: 0; width: 8rem; }
  .doc-period-dash { display: none; }
  .doc-filter-actions { margin-left: 0; flex: 1 1 100%; }
  .doc-filter-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575.98px) {
  .doc-period-field { flex: 1 1 8rem; justify-content: space-between; }
  .doc-period-input { width: auto; flex: 1 1 auto; }
}

/* =====================================================================
   Document details — header meta + AI summary
   ===================================================================== */

.doc-meta-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.73rem;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.14rem 0.58rem;
  font-variant-numeric: tabular-nums;
}

.doc-chip b { color: var(--text); font-weight: 650; }

/* A sub-panel inside a card (upload a version under the version table): separated by a
   dashed rule so it reads as a second block of the same card, not a new one. */
.detail-sub {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--line-soft);
}

/* Document facts as labelled tiles instead of a squeezed two-column definition list:
   fills the card's width at any size and wraps to one column on narrow screens. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem 1.6rem;
}

.facts dt {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.facts dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
}

.facts .wide { grid-column: 1 / -1; }

.ai-summary {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.4rem 0.95rem 1.55rem;
  overflow: hidden;
}

/* Brand hairline down the left edge reads as an assistant panel without
   shouting a second palette at the user. */
.ai-summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue-600), var(--tint-bg) 55%, var(--gold-500));
}

.ai-summary-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.ai-mark {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--tint-bg);
  color: var(--tint-ink);
}

.ai-mark svg { width: 17px; height: 17px; }

.ai-head-text { min-width: 0; flex: 1 1 auto; }

.ai-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}

.ai-sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; }

.ai-body {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 96ch;
}

.ai-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--line-soft);
  padding-top: 0.6rem;
  font-size: 0.73rem;
  color: var(--muted);
}

.ai-foot code {
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 0.3rem;
}

@media (max-width: 575.98px) {
  .ai-summary { padding: 1rem 1rem 0.9rem 1.15rem; }
}

/* =====================================================================
   Grant form — what the selected access level allows
   ===================================================================== */

.access-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.45rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-600);
  border-radius: 9px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.access-hint b { color: var(--ink); font-weight: 700; }

.access-legend { margin: 0 0 0.85rem; }

.access-legend > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--tint-ink);
}

.access-legend > summary::-webkit-details-marker { display: none; }
.access-legend > summary::marker { content: ""; }
.access-legend > summary::before { content: "\25B8"; font-size: 0.7rem; }
.access-legend[open] > summary::before { content: "\25BE"; }
.access-legend > summary:hover { text-decoration: underline; }

.access-legend ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.access-legend li {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.access-legend-level { font-weight: 700; color: var(--ink); }

@media (max-width: 575.98px) {
  .access-legend li { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   v2 visual layer
   ---------------------------------------------------------------------
   Appended last on purpose. It re-tunes the token layer and re-skins the
   shell, surfaces and controls that every view already uses, so the whole
   application inherits the refresh without editing 40+ templates. CSS only,
   served from this file: nothing here violates `style-src 'self'`.

   Changes at a glance:
     - deeper navy shell with a gold hairline (the brand's own colours)
       replacing the flat white header, so navigation reads as a fixed,
       confident frame around the content;
     - softer page ground, larger radii and a two-stop shadow instead of a
       single flat drop shadow;
     - bigger, tighter page titles and KPI numerals for clearer hierarchy;
     - calmer tables (hairline rows, tinted hover) and controls that share
       one radius, height and focus treatment.
   ===================================================================== */

:root {
  --radius-md: 14px;
  --radius-lg: 18px;
}

/* The light palette MUST be scoped to the light theme. `:root` and
   `[data-bs-theme="dark"]` have the same specificity, so a plain :root block
   appended this late would win over the dark block and repaint dark cards with
   light ink (dark mode showed #33415c text on a #0f1722 card: unreadable). */
html[data-bs-theme="light"] {
  --page-bg: #f4f6fb;
  --line: #e2e8f2;
  --line-soft: #edf1f8;
  --ink: #0a1428;
  --text: #33415c;
  --muted: #68788f;
  --shadow-card: 0 1px 1px rgba(10, 20, 40, 0.04), 0 14px 34px -26px rgba(10, 20, 40, 0.35);
  --shadow-pop: 0 20px 48px -20px rgba(10, 20, 40, 0.32);
  --bs-body-bg: var(--page-bg);
}

[data-bs-theme="dark"] {
  --page-bg: #070d16;
  --card-bg: #0f1722;
  --line: #22303f;
  --line-soft: #1b2634;
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.5), 0 16px 36px -26px rgba(0, 0, 0, 0.95);
  --shadow-pop: 0 20px 48px -20px rgba(0, 0, 0, 0.9);
  --bs-body-bg: var(--page-bg);
}

/* Page ground: one very soft brand wash at the top keeps a long page from
   reading as a flat grey sheet, in both themes. */
body {
  background:
    radial-gradient(1100px 520px at 50% -220px, rgba(21, 83, 196, 0.07), transparent 72%),
    var(--page-bg);
  background-attachment: fixed;
}
[data-bs-theme="dark"] body {
  background:
    radial-gradient(1000px 480px at 50% -220px, rgba(59, 130, 246, 0.10), transparent 72%),
    var(--page-bg);
  background-attachment: fixed;
}

/* ---------------------------------------------------------- shell */

.app-header {
  background: linear-gradient(180deg, #0c1d33 0%, #081426 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 0 var(--gold-500) inset, 0 14px 34px -26px rgba(3, 9, 18, 0.95);
  padding: 0.6rem 0;
  margin-bottom: 2rem;
}

.app-header .brand,
.app-header .brand:hover { color: #fff; }
.app-header .brand-wordmark { border-left-color: rgba(255, 255, 255, 0.16); }
.app-header .brand-wordmark-top { color: rgba(255, 255, 255, 0.62); }
.app-header .brand-wordmark-main { color: var(--gold-300); }

.header-authed .mainnav { border-top-color: rgba(255, 255, 255, 0.10); }

.mainnav .nav-link { color: rgba(255, 255, 255, 0.74); }
.mainnav .nav-link:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.mainnav .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--gold-500);
}
.mainnav .nav-link.disabled { color: rgba(255, 255, 255, 0.4); }

.navsearch .form-control {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
}
.navsearch .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }
.navsearch .form-control:hover { background: rgba(255, 255, 255, 0.13); }
.navsearch .form-control:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.10);
}

.user-chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  padding: 0.3rem 0.6rem 0.3rem 0.32rem;
}
.user-chip:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.user-avatar {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: #2b2008;
  font-weight: 800;
}

.app-header .header-tools .nav-link { color: #fff; }
.app-header .header-tools .nav-link:hover { background: rgba(255, 255, 255, 0.12); }

.btn-signout {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.btn-signout:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}

.app-header .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.app-header .theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }

/* Dropdowns open over the page, so they stay on the surface tokens. */
.mainnav .dropdown-menu { background: var(--card-bg); }
.mainnav .dropdown-item { color: var(--text); }

/* ------------------------------------------------------- content */

.page-head { margin-bottom: 1.7rem; }
.eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; }
.page-title {
  font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 720;
  letter-spacing: -0.028em;
  line-height: 1.12;
}
.page-sub { font-size: 0.94rem; margin-top: 0.4rem; }

.card, .card.border-0 { border-radius: var(--radius-lg); }
.card-body { padding: 1.35rem 1.45rem; }

.kpi {
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.35rem 1.1rem;
  box-shadow: var(--shadow-card);
}
.kpi::before {
  height: 4px;
  background: linear-gradient(90deg, var(--kpi-accent, var(--blue-600)) 0%, transparent 82%);
}
.kpi:hover { transform: translateY(-3px); }
.kpi-icon { width: 40px; height: 40px; border-radius: 12px; }
.kpi-icon svg { width: 19px; height: 19px; }
.kpi-value {
  font-size: 2.3rem;
  font-weight: 720;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- controls */

.btn { border-radius: 10px; }
.btn-primary {
  background: linear-gradient(180deg, #1d5ada 0%, #144aae 100%);
  border-color: #144aae;
  box-shadow: 0 10px 20px -14px rgba(21, 83, 196, 0.9);
}
.btn-primary:hover { background: linear-gradient(180deg, #2364ea 0%, #1553c4 100%); }
.btn-lg { border-radius: 12px; }
.btn-sm { border-radius: 8px; }

.form-control, .form-select { border-radius: 10px; }
.form-control-lg, .input-group-text { border-radius: 11px; }
.form-control:focus, .form-select:focus {
  border-color: rgba(21, 83, 196, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(21, 83, 196, 0.13);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- tables */

.table { font-size: 0.885rem; }
.table thead th { padding: 0.78rem 1rem; }
.table > tbody > tr > td { padding: 0.82rem 1rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--surface-3); }
.table-responsive { border-radius: var(--radius-md); }

/* ------------------------------------------------------------ ask */

.ask-hero { border-radius: 20px; padding: clamp(1.1rem, 2.3vw, 1.6rem) clamp(1.15rem, 2.5vw, 1.7rem); }
.ask-form { border-radius: 14px; padding: 0.35rem 0.35rem 0.35rem 1rem; }
.ask-send {
  border-radius: 11px;
  padding: 0.6rem 1.35rem;
  background: linear-gradient(180deg, #1d5ada 0%, #144aae 100%);
  box-shadow: 0 10px 20px -14px rgba(21, 83, 196, 0.95);
}
.ask-panel { border-radius: 20px; }
.ask-answer { font-size: 1.02rem; line-height: 1.75; }
.ask-source { border-radius: 12px; }

/* ---------------------------------------------------------- footer */

.app-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
  padding: 1.1rem 0;
  font-size: 0.79rem;
  color: var(--muted);
}

/* ------------------------------------------------------ responsive */

@media (max-width: 991.98px) {
  /* One scrollable row instead of a three-line wrap: the shell keeps the
     same height on a tablet and admin links stay reachable by swiping. */
  .header-authed .mainnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* A flex child defaults to min-width:auto, so the scrolling row used to widen the
       whole page instead of scrolling inside itself. */
    min-width: 0;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .app-header .container { min-width: 0; }
  .header-authed .mainnav::-webkit-scrollbar { display: none; }
  .navsearch .form-control { width: 170px; }
}

@media (max-width: 575.98px) {
  .app-header { padding: 0.45rem 0; margin-bottom: 1.35rem; }
  .app-header .container { gap: 0.45rem 0.6rem; }
  .brand-logo-plate { height: 48px; padding: 5px 9px; }
  .brand-logo { height: 38px; }
  .brand-wordmark { padding-left: 0.7rem; }
  .brand-wordmark-main { font-size: 1.05rem; }
  /* Bootstrap's .d-flex utility is !important, so hiding needs !important too.
     The header search duplicates Search / AI Search, and removing it is what lets
     the identity cluster fit on one row instead of pushing the theme button off. */
  .navsearch { display: none !important; }
  .header-tools { gap: 0.4rem; flex-wrap: nowrap; min-width: 0; }
  .user-chip { padding: 0.26rem; }
  .user-name { display: none; }
  .btn-signout { padding: 0.32rem 0.6rem; font-size: 0.78rem; white-space: nowrap; }
  .theme-toggle { flex: none; }
  .page-title { font-size: 1.55rem; }
  .kpi-value { font-size: 1.9rem; }
  .card-body { padding: 1rem; }
  .ask-hero { border-radius: 16px; }
  .ask-send { padding: 0.55rem 1.05rem; }
}

@media (max-width: 430px) {
  .kpi-value { font-size: 1.65rem; }
  .kpi-label { font-size: 0.62rem; letter-spacing: 0.08em; }
  .kpi-icon { width: 34px; height: 34px; }
  .ask-send { padding: 0.5rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   v3 desktop layer
   ---------------------------------------------------------------------
   The shell was tuned mobile-first, and on a wide screen that showed in
   four places: every page paid for a 139px two-tier header; the Ask box
   stretched into a 1200px banner; the Documents landing page put an
   always-open "new folder" form above its file table; and the sticky
   folder tree slid underneath the tall header while scrolling. Each rule
   below is scoped to the viewport where it applies, so phones and tablets
   keep the layout they already had.
   ===================================================================== */

/* ---------------------------------------------------- one-row header */

@media (min-width: 1400px) {
  .app-header { padding: 0.5rem 0; margin-bottom: 1.6rem; }

  /* Slimmer lockup. The logo still leads, but a 58px plate inside a 139px bar
     costs about a tenth of a laptop viewport on every single page. */
  .brand-logo-plate { height: 50px; padding: 5px 10px; border-radius: 10px; }
  .brand-logo { height: 40px; }
  .brand-wordmark { min-height: 34px; padding-left: 0.85rem; }
  .brand-wordmark-main { font-size: 1.06rem; }

  /* Navigation joins the brand row instead of owning a full second tier.
     flex-wrap stays on, so if a longer translation or a wide window title
     ever overflows, the tools drop to a second line rather than clipping. */
  .header-authed .mainnav {
    order: 3;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
  .header-authed .header-tools { order: 4; }

  .mainnav { gap: 0.1rem; }
  .mainnav .nav-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
  .navsearch .form-control { width: 190px; }
  .header-tools { gap: 0.5rem; }

  /* A ~68px bar leaves room for the sticky pieces to sit near the top again. */
  .doc-tree { top: 4.9rem; }
}

/* -------------------------------------------------- sticky tree offset */

/* The tree is sticky, but its offset was tuned for a shorter bar: with the
   two-tier header it settled 70px from the viewport top, i.e. behind the
   header, hiding its own heading as soon as the page scrolled. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .doc-tree { top: 9.7rem; }
}

/* One column: the tree is part of the flow, not a side rail to pin. */
@media (max-width: 991.98px) {
  .doc-tree { position: static; }
  .doc-tree .card-body { max-height: none; }
}

/* --------------------------------------------------- ask hero, wide */

@media (min-width: 992px) {
  /* Two columns: the invitation on the left, the input and its guarantees on
     the right. A single 1245px-wide input read as a stretched banner instead
     of a search box. Scoped to .ask-hero — AI Search reuses .ask-form on its
     own page and keeps the full-width field there. */
  .ask-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2.2rem;
    row-gap: 0.7rem;
    padding: 1.45rem 1.75rem;
  }
  .ask-hero .ask-hero-head { grid-column: 1; grid-row: 1 / 3; }
  .ask-hero .ask-form { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 46rem; }
  .ask-hero .ask-foot { grid-column: 2; grid-row: 2; margin: 0; }
  .ask-hero .ask-sub { max-width: 36ch; }
}

/* The composer marks focus on the pill as a whole (.ask-form:focus-within).
   The generic :focus-visible rule further up has the same specificity as
   .ask-input and lands later, so the bare <input> also drew its own 2px blue
   rectangle inside the rounded field — a stray box that made the control look
   broken. Keep one focus indicator, on the pill. */
.ask-form .ask-input:focus,
.ask-form .ask-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* One indicator is enough, so make it unmistakable: a crisp border plus a soft
   halo that reads the same on the dark and light themes. */
.ask-form:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(21, 83, 196, 0.16), 0 1px 2px rgba(11, 27, 51, 0.05);
}

/* --------------------------------------------------------- data tables */

/* One step tighter: at 15px root the old rows were 62px tall, so a 15-row
   page scrolled for no reason. */
.table { font-size: 0.9rem; }
.table > tbody > tr > td { padding: 0.7rem 1rem; }

/* ------------------------------------------- new folder disclosure */

/* Documents landing: the create-folder form is now a native <details>, closed
   by default, so the page opens on the file list. No JavaScript involved. */
.newfolder-panel > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.newfolder-panel > summary::-webkit-details-marker { display: none; }
.newfolder-panel > summary::marker { content: ""; }
.newfolder-panel > summary:hover .panel-title { color: var(--ink); }
.newfolder-panel > summary .newfolder-hint { margin-left: auto; }

/* Chevron, drawn with borders so it inherits the theme's muted ink. */
.newfolder-panel > summary::after {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin: -0.15rem 0.2rem 0 0;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.newfolder-panel[open] > summary::after { transform: rotate(-135deg); }

@media (max-width: 575.98px) {
  .newfolder-panel > summary .newfolder-hint { display: none; }
}

/* =====================================================================
   v4 mobile layer
   ---------------------------------------------------------------------
   Measured at 390px before this block: the header stacked three rows to
   157px, the theme switch rendered as a white disc with a white glyph, and
   the Documents table was 678px of squeezed cells scrolling inside a 357px
   card that did not begin until 634px down an 844px screen.
   ===================================================================== */

/* ------------------------------------------- theme switch on the bar */

/* The button sits on the dark header in BOTH themes, but kept --field-bg,
   which is white in light theme - and its glyph is white. Result: an empty
   white circle. A translucent white disc reads on the navy bar either way. */
.app-header .theme-toggle {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
}
.app-header .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.42);
}
.app-header .theme-toggle:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------- phones: the bar */

@media (max-width: 575.98px) {
  /* Two rows instead of three: plate and identity on the first, the scrolling
     nav on the second. The wordmark is what frees the space, and the artwork
     already spells out the company name. */
  .brand-wordmark { display: none; }
  .header-authed .header-tools { width: auto; order: 2; margin-left: auto; flex-wrap: nowrap; }
  .header-authed .mainnav { order: 3; padding-top: 0.3rem; }
  .app-header { padding: 0.5rem 0 0.35rem; }

  /* 28px tall was under the usual 32px touch target. */
  .btn-signout { display: inline-flex; align-items: center; min-height: 32px; padding: 0.25rem 0.7rem; }

  /* A lone "Documents" crumb repeats the page title and read as a stray chip. */
  .breadcrumb:has(> .breadcrumb-item:only-child) {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
}

/* The plate is the whole brand at this size, so it can afford to shrink. */
@media (max-width: 430px) {
  .brand-logo-plate { height: 42px; padding: 4px 8px; }
  .brand-logo { height: 34px; }
}

/* Files before the folder rail on a phone: the rail is 226px of the first
   screen, and it pushed the first document below the fold. */
@media (max-width: 767.98px) {
  .doc-tree-col { order: 2; }
}

/* ------------------------------------------- stacked tables, phones */

/* Six to eight columns cannot be read in 357px. The table scrolled sideways
   and every cell wrapped into three or four lines. Below 576px each row
   becomes a small card: name first, then the facts that matter, then actions. */
@media (max-width: 575.98px) {
  .table-stack, .table-stack tbody { display: block; }
  .table-stack thead { display: none; }
  .table-stack tbody tr { display: block; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }

  /* Bootstrap paints padding and a border on every cell through
     .table > :not(caption) > * > *, which outranks a plain td selector. Matching
     that weight is what removes the hairlines still showing inside each card. */
  .table-stack.table > tbody > tr > td {
    display: block;
    padding: 0.1rem 0;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    font-size: 0.86rem;
  }
  /* Inline label: one label per line cost 14px on every fact and made a row
     237px tall, i.e. barely two documents per screen. */
  .table-stack.table > tbody > tr > td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 4.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* The name is the card's title, so it carries no label of its own. */
  .table-stack.table > tbody > tr > td[data-label="Name"] { padding-bottom: 0.35rem; font-size: 0.94rem; }
  .table-stack.table > tbody > tr > td[data-label="Name"]::before { content: none; }
  /* Facts a phone row does not need: each is one tap away on the details page. */
  .table-stack.table > tbody > tr > td:is([data-label="Folder"], [data-label="Year"], [data-label="Category"], [data-label="Version"], [data-label="Shares"]) { display: none; }
  /* Actions close the card, side by side. */
  .table-stack.table > tbody > tr > td[data-label="Actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.55rem;
  }
  .table-stack.table > tbody > tr > td[data-label="Actions"]::before { content: none; }
  /* The empty-state row spans columns and keeps its own centred layout. */
  .table-stack.table > tbody > tr > td[colspan] { text-align: center !important; padding: 1.2rem 0.4rem; }
  .table-stack.table > tbody > tr > td[colspan]::before { content: none; }
}