/* ══════════════════════════════════════════════════════════════════════════
   files-theme.css — the Admin design system, applied to the FILES group
   (documents.html / reports.html / permits.html / photos.html).

   WHY THIS IS A BRIDGE AND NOT A REPLACEMENT
   These four pages get their whole shell from invixo.css: .eng-nav, .eng-header,
   .eng-page, .eng-btn-*, and the markup invixo-nav.js generates at runtime. Swapping
   invixo.css out for admin-theme.css would leave every one of them without a
   navigation bar. So invixo.css still loads and still owns LAYOUT; this file loads
   after it and repoints its TOKENS at admin-theme's values, which restyles the
   existing markup without renaming a single class.

   That is the same move admin.html makes ("palette remapped onto the shared
   admin-theme.css tokens") — one design system, two ways in.

   NEVER LINK theme.css BESIDE THIS. Its border-radius:0 !important still fights
   admin-theme; that is the documented rule for the admin surfaces and it applies here
   for the same reason. documents.html linked theme.css before this change.

   Dark mode needs no second palette: every mapping below is a var() reference, so it
   follows admin-theme's own dark block automatically. The :root[data-theme="dark"]
   repeat exists only to out-specify invixo.css's [data-theme="dark"] block, which
   would otherwise re-set these names back to its own invixo-shell values.
   ══════════════════════════════════════════════════════════════════════════ */

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

/* ── invixo.css token names → admin-theme values ─────────────────────────── */
:root,
:root[data-theme="dark"] {
  /* surfaces */
  --bg-2: var(--surface-2);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --panel2: var(--surface-2);
  --elev: var(--surface);
  --field: var(--surface);
  --pill: var(--surface-2);
  --hover: var(--surface-2);
  --faint: var(--surface-2);

  /* lines */
  --border: var(--line);
  --border-2: var(--line);
  --line-soft: var(--line-2);
  --field-line: var(--line);

  /* type */
  --text: var(--fg);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);
  --ink: var(--fg);
  --ink2: var(--fg-2);
  --muted: var(--fg-3);

  /* accents + status. --accent and --ok already come from admin-theme. */
  --accent-2: var(--accent);
  --accent-ink: var(--accent-fg);
  --red: var(--danger);
  --cyan: var(--c4);
  --blue: var(--c3);
  --lime: var(--c4);

  /* elevation */
  --card-shadow: var(--shadow);

  /* Arial everywhere, system mono for the eyebrow / code bits. Both faces are
     local now — the Google Fonts loads went with the Arial change. */
  --font-display: var(--adm-font);
  --font-sans: var(--adm-font);
  --font-mono: var(--adm-mono);
}

/* ── shell primitives, re-skinned to the admin look ──────────────────────── */
/* Buttons: admin controls are softly rounded (--adm-radius-ctrl) while cards stay
   square. invixo.css hard-codes border-radius:0 on both, so both need saying. */
.eng-btn-primary,
.eng-btn-ghost,
.eng-iconbtn {
  border-radius: var(--adm-radius-ctrl);
  font-family: var(--adm-font);
  font-weight: 500;
}
.eng-btn-primary { background: var(--accent); color: var(--accent-fg); }
.eng-btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
.eng-btn-ghost { border-color: var(--line); color: var(--fg); }
.eng-btn-ghost:hover { background: var(--surface-2); }

/* Headings: the admin H1 is tighter and heavier than engage's. */
.eng-h1 { font-family: var(--adm-font); font-weight: 700; letter-spacing: -0.02em; }
.eng-eyebrow { font-family: var(--adm-mono); color: var(--fg-3); }

/* Nav: match the admin surface + hairline rather than engage's warm cream. */
.eng-header { background: var(--surface); border-bottom: 1px solid var(--line); }

/* Inputs / selects across the four pages — the group's own classes vary
   (.pm-*, .ph-*, .doc-*), so target the elements and let the pages keep their
   layout rules. Controls follow the admin radius; cards stay square. */
.eng-page input[type="text"],
.eng-page input[type="search"],
.eng-page input[type="number"],
.eng-page input[type="date"],
.eng-page select,
.eng-page textarea {
  font-family: var(--adm-font);
  border-radius: var(--adm-radius-ctrl);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg);
}