/* ═══════════════════════════════════════════════════════════════════════
   P1 CONSOLE — staff and client screens as operations equipment.

   Loaded LAST on admin, portal and login, and scoped entirely to
   [data-theme="light"]. The dark theme is untouched: remove the one <link>
   and these pages are exactly as they were.

   tokens.css already carries the palette. What lives here is the character
   the tokens cannot express — density, hairlines, squared corners, and every
   identifier set in mono. Same language as the CadLink portal, so a
   dispatcher moving between them is in one product.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --console-line: #c8d4e2;
  --console-chrome: linear-gradient(180deg, #fbfcfe, #eaf0f7);
  --font-data: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

[data-theme="light"] body {
  background: var(--dark-1);
  color: var(--text);
}

/* ── The login page keeps its own palette ─────────────────────────────
   site.css does not import tokens.css — it declares --ground/--panel/--ink
   /--lime itself, and states outright that a light preference "lightens the
   chrome, never the identity". So the token re-point above cannot reach it
   and the variables have to be answered directly.

   Written as :root[data-theme="light"] on purpose: site.css sets --panel at
   that same specificity, and a plain [data-theme="light"] here would lose to
   it however late it loads. Matching the selector and loading afterwards is
   what makes this win. */
:root[data-theme="light"] {
  --ground: #eef2f7;
  --panel:  #ffffff;
  --raised: #f7f9fc;
  --sunk:   #e9eff7;
  --line:   #c8d4e2;
  --line-2: #aebed1;

  --ink:  #16202e;
  --dim:  #4a5b70;
  --mute: #7286a0;

  --lime:      #12508f;
  --lime-dk:   #0d3f73;
  --lime-wash: rgba(18, 80, 143, 0.10);

  --amber:      #b06f00;
  --amber-wash: rgba(176, 111, 0, 0.12);
  --red:        #b3271e;
  --red-wash:   rgba(179, 39, 30, 0.10);

  /* ── The client portal runs on a THIRD palette ─────────────────────
     p1-foundation.css and client-portal.css each declare their own --p-*
     scale in olive and lime, independent of tokens.css. That is why the
     portal stayed green while the staff side went navy: nothing it uses
     was ever pointed at the token layer. Both are answered here.

     Specificity note, same as site.css above: client-portal.css sets these
     at html[data-theme="light"] (0,1,1). :root[data-theme="light"] is
     (0,2,0), so this wins on weight rather than on load order alone. */

  /* p1-foundation.css */
  --p-page:        #eef2f7;
  --p-band:        #e8eef6;
  --p-sunk:        #f7f9fc;
  --p-line:        #c8d4e2;
  --p-line-strong: #aebed1;
  --p-ink:         #16202e;
  --p-dim:         #4a5b70;
  --p-mute:        #7286a0;
  --p-accent:      #12508f;
  --p-mark:        #12508f;
  --p-wash:        #e4edf8;
  --p-warn:        #b06f00;
  --p-warn-wash:   #fbf0da;
  --p-ok:          #1a7f4b;
  --p-ok-wash:     #e3f3ea;
  --p-crit:        #b3271e;

  /* client-portal.css */
  --p-bg:            #eef2f7;
  --p-bg2:           #e4ebf3;
  --p-surf:          #ffffff;
  --p-surf2:         #f7f9fc;
  --p-soft:          #4a5b70;
  --p-line2:         #aebed1;
  --p-brand:         #12508f;
  --p-brand-ink:     #ffffff;
  --p-brand-soft:    rgba(18, 80, 143, 0.12);
  --p-brand-txt:     #12508f;
  --p-brand-strong:  #0d3f73;
  --p-nav:           #10203a;
  --p-shadow:        rgba(22, 32, 46, 0.13);
}

/* ── Client portal furniture ──────────────────────────────────────────
   The portal replaced the sidebar with a top tab bar, so its chrome is
   .p1-nav rather than .navbar — which is why the staff-side navbar rule
   never touched it. Same navy band, same reasoning. ── */
[data-theme="light"] .p1-nav {
  background: linear-gradient(180deg, #1b3350, #10203a);
  border-bottom: 1px solid #0b1727;
  backdrop-filter: none;
}
[data-theme="light"] .p1-logo { color: #ffffff; }
[data-theme="light"] .p1-logo em { color: #5fb0ff; font-style: normal; }
[data-theme="light"] .p1-who { color: #b9cde3; }

/* Scoped through .p1-nav on purpose. These buttons also carry .sidebar-btn
   (portal.js binds on it), and the sidebar rule above sets a dark ink colour
   for a white rail. At equal specificity the later rule won and painted the
   tabs near-black on the navy bar — legible as a smudge. Going one level
   deeper settles it by weight instead of by ordering. */
[data-theme="light"] .p1-nav .p1-tab {
  color: #b9cde3 !important;
  background: transparent;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}
[data-theme="light"] .p1-nav .p1-tab:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] .p1-nav .p1-tab.active {
  color: #ffffff !important;
  background: transparent;
  border-bottom-color: #5fb0ff !important;
  font-weight: 650;
  box-shadow: none;
}
[data-theme="light"] .p1-nav .btn-sm {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #dce7f5;
}
[data-theme="light"] .p1-nav .btn-sm:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }

/* The search band: was a pale green wash, now cool paper with a seam. */
[data-theme="light"] .p1-band {
  background: var(--p-band);
  border-bottom: 1px solid var(--console-line);
}
[data-theme="light"] .p1-search input,
[data-theme="light"] .p1-search {
  border-radius: var(--radius-sm);
}

/* Section captions were mid-grey on white — legible as decoration, not as
   structure. In a console the caption is the smallest, hardest-working type
   on the screen, so it goes to ink and micro-caps. */
[data-theme="light"] .p1-sec-h {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
[data-theme="light"] .p1-sec-note { color: var(--text-dimmer); }
[data-theme="light"] .p1-rule { background: var(--cyan); }
[data-theme="light"] .p1-sec {
  background: #ffffff;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Kill the atmosphere ──────────────────────────────────────────────
   The dark theme leans on glows, blurred orbs and animated gradient
   borders. On paper they read as smudges, so they come off entirely. */
[data-theme="light"] .login-screen::before,
[data-theme="light"] .login-screen::after,
[data-theme="light"] .orb,
[data-theme="light"] .glow,
[data-theme="light"] .grid-bg { display: none !important; }

[data-theme="light"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── Surfaces ─────────────────────────────────────────────────────────
   One hairline, one whisper of lift. No glass, no gradient edges.

   The names here are the ones these pages actually use — admin-panel,
   overview-card, create-form — not the generic .card/.panel I reached for
   first. A theme layer that targets classes the markup does not contain
   recolours nothing. */
[data-theme="light"] .admin-panel,
[data-theme="light"] .overview-card,
[data-theme="light"] .create-form,
[data-theme="light"] .p1-sec,
[data-theme="light"] .bug-modal,
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .stat-card,
[data-theme="light"] .widget,
[data-theme="light"] .section-card,
[data-theme="light"] .login-card,
[data-theme="light"] .modal,
[data-theme="light"] .modal-content {
  background: #ffffff;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Chrome: sidebar, topbar, headers ─────────────────────────────── */
[data-theme="light"] .sidebar,
[data-theme="light"] .side-nav,
[data-theme="light"] .admin-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--console-line);
}
[data-theme="light"] .topbar,
[data-theme="light"] .admin-header,
[data-theme="light"] .panel-header,
[data-theme="light"] .card-header,
[data-theme="light"] .section-header,
[data-theme="light"] .bug-section-head,
[data-theme="light"] .p1-sec-h {
  background: var(--console-chrome);
  border-bottom: 1px solid var(--console-line);
}
[data-theme="light"] .panel-sub { color: var(--text-dimmer); }

/* Section captions in the console register: small, spaced, uppercase. */
[data-theme="light"] .panel-header h2,
[data-theme="light"] .panel-header h3,
[data-theme="light"] .card-header h2,
[data-theme="light"] .card-header h3,
[data-theme="light"] .nav-section-label,
[data-theme="light"] .sidebar-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}

/* ── Navigation — .sidebar-btn is the real one here ───────────────── */
[data-theme="light"] .sidebar-btn,
[data-theme="light"] .nav-item,
[data-theme="light"] .sidebar a,
[data-theme="light"] .side-nav a {
  border-radius: var(--radius-sm);
  color: var(--text-dim);
}
[data-theme="light"] .sidebar-btn:hover,
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .sidebar a:hover { background: #f2f6fb; color: var(--text); }
[data-theme="light"] .sidebar-btn.active,
[data-theme="light"] .nav-item.active,
[data-theme="light"] .sidebar a.active {
  background: #ffffff;
  color: var(--cyan);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* Tabs read as a filing strip, not pills. */
[data-theme="light"] .p1-tab,
[data-theme="light"] .project-tab {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-dim);
}
[data-theme="light"] .p1-tab.active,
[data-theme="light"] .project-tab.active {
  background: #ffffff;
  border: 1px solid var(--console-line);
  border-bottom-color: #ffffff;
  color: var(--cyan);
}

/* ── Tables — the densest thing here, so they set the rhythm ──────── */
[data-theme="light"] table { border-collapse: collapse; }
[data-theme="light"] th {
  background: #f4f7fb;
  border-bottom: 1px solid var(--dark-5);
  color: var(--text-dimmer);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 12px;
  white-space: nowrap;
}
[data-theme="light"] td {
  padding: 7px 12px;
  border-bottom: 1px solid #e7edf4;
}
[data-theme="light"] tbody tr:nth-child(even) td { background: #fafcfe; }
[data-theme="light"] tbody tr:hover td { background: #e4edf8; }

/* ── Controls ─────────────────────────────────────────────────────── */
[data-theme="light"] .btn,
[data-theme="light"] button:not(.icon-btn):not(.tab),
[data-theme="light"] .button {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.primary,
[data-theme="light"] .primary-btn {
  background: linear-gradient(180deg, #1a5fa4, #12508f);
  border: 1px solid #0d3f73;
  color: #ffffff;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn.primary:hover,
[data-theme="light"] .primary-btn:hover {
  background: linear-gradient(180deg, #17579a, #0d3f73);
  color: #ffffff;
}
[data-theme="light"] .btn-outline {
  background: linear-gradient(180deg, #ffffff, #eff3f9);
  border: 1px solid var(--dark-5);
  color: var(--text);
}
[data-theme="light"] .btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }

/* Field labels in the console register. */
[data-theme="light"] .form-group > label,
[data-theme="light"] .form-row > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff;
  border: 1px solid var(--dark-5);
  border-radius: var(--radius-sm);
  color: var(--text);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(18, 80, 143, 0.12);
}

/* ── Identifiers in mono ──────────────────────────────────────────────
   Ticket numbers, agency codes, licence keys, versions. Setting every
   identifier in mono is what makes them scannable in a wall of prose —
   the one typographic decision doing real work on these screens. */
[data-theme="light"] .mono,
[data-theme="light"] .code,
[data-theme="light"] .ticket-id,
[data-theme="light"] .badge-id,
[data-theme="light"] .licence-key,
[data-theme="light"] .api-key,
[data-theme="light"] .version,
[data-theme="light"] code,
[data-theme="light"] kbd,
[data-theme="light"] pre { font-family: var(--font-data); }
[data-theme="light"] pre,
[data-theme="light"] code {
  background: #f7f9fc;
  border: 1px solid var(--console-line);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* Numbers that get compared down a column must not wobble. */
[data-theme="light"] .overview-num,
[data-theme="light"] .stat-value,
[data-theme="light"] .metric-value,
[data-theme="light"] .stat-card .value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--text);
}
[data-theme="light"] .overview-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-dimmer);
}

/* ── Badges / pills ───────────────────────────────────────────────── */
[data-theme="light"] .badge,
[data-theme="light"] .pill,
[data-theme="light"] .tag,
[data-theme="light"] .chip {
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSOLE FURNITURE

   Re-pointing the palette made these screens light. It did not make them a
   console — they came out as pale grey admin, because the character lives in
   chrome and density, not in colour. What follows is that character, keyed to
   the classes this markup actually uses.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The title bar. CadLink's single strongest signature: a dark navy band
      across the top with the product mark in it. Everything below can be
      quiet once this is here. ── */
[data-theme="light"] .navbar {
  background: linear-gradient(180deg, #1b3350, #10203a);
  border-bottom: 1px solid #0b1727;
  box-shadow: none;
}
[data-theme="light"] .navbar .nav-links a { color: #b9cde3; }
[data-theme="light"] .navbar .nav-links a:hover,
[data-theme="light"] .navbar .nav-links a.active { color: #ffffff; }
[data-theme="light"] .nav-logo-text,
[data-theme="light"] .logo-priority { color: #ffffff; }
[data-theme="light"] .logo-one { color: #5fb0ff; }
[data-theme="light"] .logo-cad { color: #93b0d0; }
[data-theme="light"] .navbar .nav-user,
[data-theme="light"] .navbar #navUserName { color: #dce7f5; }

/* ── Sidebar: a tool rail, not a nav list ── */
[data-theme="light"] .admin-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--console-line);
  padding-top: 6px;
}
[data-theme="light"] .sidebar-section { margin-bottom: 2px; }
[data-theme="light"] .sidebar-section h4 {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dimmer);
  padding: 14px 14px 5px;
  margin: 0;
  border-top: 1px solid #eef2f7;
}
[data-theme="light"] .sidebar-section:first-child h4 { border-top: none; }
/* The glowing dot before each caption is dark-theme decoration — a console
   separates sections with a rule, not a bullet. */
[data-theme="light"] .sidebar-section h4::before { display: none; }
/* Same for the button's own glow layers: the active state is already an
   inset bar, and two accent markers on one row read as a rendering fault. */
[data-theme="light"] .sidebar-btn::before,
[data-theme="light"] .sidebar-btn::after { display: none; }
/* The link-style entries carry an inline display:block that fights the
   flex layout; match them to the buttons so the rail reads as one list. */
[data-theme="light"] a.sidebar-btn {
  display: block !important;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
[data-theme="light"] .sidebar-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
}
[data-theme="light"] .sidebar-btn:hover { background: #f2f6fb; color: var(--text); }
[data-theme="light"] .sidebar-btn.active {
  background: #e8f0f9;
  border-left-color: var(--cyan);
  color: var(--cyan);
  font-weight: 650;
  box-shadow: none;
}

/* ── Panels: hairline box, chrome caption strip ── */
[data-theme="light"] .admin-panel {
  background: #ffffff;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0;
}
[data-theme="light"] .admin-panel > h2,
[data-theme="light"] .admin-panel > h3 {
  margin: 0;
  padding: 9px 14px;
  background: var(--console-chrome);
  border-bottom: 1px solid var(--console-line);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text);
}
/* Everything after the caption gets the panel's padding back. */
[data-theme="light"] .admin-panel > *:not(h2):not(h3) { margin-left: 14px; margin-right: 14px; }
[data-theme="light"] .admin-panel > *:last-child { margin-bottom: 14px; }

/* Sub-headings inside a panel ("Quick Actions") are captions, not titles —
   a second display-sized heading inside a box competes with the box's own. */
[data-theme="light"] .admin-panel h3,
[data-theme="light"] .admin-panel h4 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-dimmer);
  margin-top: 18px;
  margin-bottom: 8px;
}

/* ── Overview tiles: the numbers are the content ── */
[data-theme="light"] .overview-card {
  background: #ffffff;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 12px 14px;
}
[data-theme="light"] .overview-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--cyan);
  line-height: 1.1;
}
[data-theme="light"] .overview-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dimmer);
  margin-top: 4px;
}

/* ── Ink, not fog. The dark theme leans on dim greys that read as washed
      out on paper; headings and body come back to full contrast. ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .admin-dashboard { color: var(--text); }
[data-theme="light"] .admin-dashboard { background: var(--dark-1); }

/* ── Motion ───────────────────────────────────────────────────────────
   Equipment does not animate its own furniture. Scroll reveals are for a
   marketing page; a console must render finished. */
[data-theme="light"] .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}