/* ══════════════════════════════════════════════════════════════════════════
   docs-theme.css — the Admin design system, applied to the legacy theme.css
   pages: the Files page (documents.html) plus projects.html / users.html /
   login.html. These all consume theme.css's TOKEN NAMES (--ink, --pill, --panel …)
   through their own inline <style>, and carry the legacy #nav markup (or, for
   login, no nav at all), so a single theme.css→admin-theme token bridge reskins
   them all. This REPLACES theme.css on each of those pages (never load both).
   Token coverage is verified: the only page-local token not remapped here is
   --nav-h, which projects/users define in their own inline <style>.

   documents.html is NOT like reports/permits/photos: it has no .eng-page shell,
   ~20 bespoke class families (.dm-*, .cs-*, .d-grid …), its OWN inline <style>
   that styles everything through the theme.css TOKEN NAMES (--ink, --pill,
   --panel …), and its OWN #nav markup (not invixo.css's .eng-nav). So it can't
   take files-theme.css — it needs theme.css's token names remapped onto
   admin-theme, plus the nav restyled.

   This REPLACES theme.css. Do not load both: theme.css forces its own shell and
   border-radius:0 !important and fights admin-theme (the documented rule).
   It loads AFTER the page's inline <style>, so its body/nav rules win with no
   !important; the token remap drives every inline rule automatically.

   Dark mode is automatic: every mapping is a var() onto an admin-theme token, so
   it follows admin-theme's own dark block. The one repeat under data-theme exists
   only to out-specify the page's own [data-theme="dark"] rules if any.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('/admin-theme.css?v=adm2');

/* ── theme.css token names → admin-theme values ──────────────────────────────
   admin-theme already aliases --panel --panel2 --field --field-line --ink --ink2
   --muted --accent-ink --red, and defines --bg --line --accent --shadow. These
   fill the rest documents.html uses. */
:root,
:root[data-theme="dark"] {
  --pill: var(--surface-2);
  --faint: var(--fg-3);
  --line-soft: var(--line-2);
  --nav-bg: var(--surface);
  --sidebar: var(--surface-2);
  --card-shadow: var(--shadow);
  --hover: var(--surface-2);
  --accent-2: var(--accent);
  /* legacy accent aliases the page reaches for */
  --blue: var(--accent); --blue-dk: var(--accent); --blue-deep: var(--accent); --blue-lt: var(--surface-2);
  --orange: var(--warn); --green: var(--ok); --amber: var(--warn); --cyan: var(--c4); --lime: var(--ok);
  --text: var(--fg); --text2: var(--fg-2); --border: var(--line); --white: var(--surface);
}

/* ── type + ground ───────────────────────────────────────────────────────── */
body {
  font-family: var(--adm-font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
.page-h { font-family: var(--adm-font); font-weight: 700; letter-spacing: -0.02em; }

/* ── controls: admin's softly-rounded buttons/inputs, cards stay square ───── */
.upbtn, .btn2, .iconbtn,
.toolbar input[type=text], .toolbar select, input[type=text], select, textarea {
  border-radius: var(--adm-radius-ctrl) !important;
  font-family: var(--adm-font);
}
.upbtn { background: var(--accent); color: var(--accent-fg); }
.upbtn:hover { background: color-mix(in oklch, var(--accent) 88%, black); filter: none; }
.btn2, .iconbtn { border-color: var(--line); }
.btn2:hover, .iconbtn:hover { background: var(--surface-2); }

/* ── nav → the admin header: square E mark, accent active-underline ───────── */
#nav { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-logo { color: var(--fg); font-family: var(--adm-font); }
.nav-logo svg, .nav-logo-mark { display: none; }
.nav-logo::before { content: "E"; width: 26px; height: 26px; background: var(--fg); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.nav-link { color: var(--fg-2); background: none; text-transform: none; letter-spacing: 0;
  font-weight: 500; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--fg); background: none; }
.nav-link.active { color: var(--fg); background: none; font-weight: 600; border-bottom-color: var(--accent); }
.nav-user, .nav-username, .nav-uname { color: var(--fg); }
.nav-caret { color: var(--fg-3); }
.nav-avatar, .nav-ava { background: var(--accent); color: var(--accent-fg); border-radius: 50%; }

/* ── seamless surfaces (ported from theme.css): drop box-lines, lift real cards
      with the admin shadow, tables to one hairline. Sharp corners preserved. ── */
.card, .ocard, .pcard, .oa-card, .mem-box, .dm-box, .hist-card,
.d-grid, .d-assets, .lib, .addbar, #focus-banner, #bulkbar,
.dm-hdr, .dm-foot { border-color: transparent; }
.tree-panel, .tree-hdr { border-color: var(--line); }   /* the two-pane divider is real structure */
.card, .ocard, .pcard, .oa-card, .mem-box, .dm-box, .hist-card { box-shadow: var(--shadow); }
table, .lib, .d-assets { border: none; box-shadow: none; }
.lib thead th, .d-assets thead th, table thead th { border-bottom: 1px solid var(--line-2); }
.lib td, .d-assets td, table tbody td, .hist-row, .mem-row { border-color: var(--line-2); }
.lib tbody tr:last-child td, .d-assets tbody tr:last-child td, table tbody tr:last-child td { border-bottom: none; }
.empty, .empty.drophint, #drop, #dropzone { border-color: var(--line-2); }

/* ── themed scrollbars (same as theme.css; the Chromium scrollbar-color trap
      keeps the Firefox rule fenced behind @supports) ───────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
}