/* Agentic Solutions — official brand theme (per the Brand Guidelines).
   Colour: Chalk canvas, Graphite ink, Rust for emphasis, Iris + Turquoise as the
   logo's vibrant pops. Type: Noto Serif for headers, Roboto for body. "Clean, but
   never cold." Injected globally after each page's own stylesheet, so these
   design-token + !important overrides win across the portal and every app.

   LIGHT + DARK. Every rule below paints from a token, never a literal — that is
   what makes the portal's dark-mode switch actually do something. The tokens are
   declared twice: once for light (`:root, [data-theme="light"]`) and once for
   dark (`[data-theme="dark"]`, later so it wins). Dark inverts the canvas to
   Graphite and the ink to Chalk, and lifts Rust/Iris a little so they keep their
   contrast against a dark ground. If you add a rule here, add a token — a bare
   hex in a rule body is a colour that can't follow the theme. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,500;0,600;1,500&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ── Light (default) ─────────────────────────────────────────────────────── */
:root, [data-theme="light"]{
  /* Core palette */
  --brand-rust:#cc775f; --brand-graphite:#2b2929; --brand-chalk:#f0eee6;
  --brand-iris:#7d69f3; --brand-turquoise:#30d5bf;
  --brand-smoke:#767373; --brand-snow:#faf9f5;

  --bg:#f0eee6; --surface:#faf9f5; --surface-2:#f4f1e8;
  --card:#faf9f5; --card-hover:#f6f3ea;
  --panel:#faf9f5; --panel-2:#f4f1e8;
  --border:#e4ded2; --border-acc:#d7cfbf;
  --accent:#cc775f; --accent-2:#cc775f; --accent-dim:#b3634d; --accent-glow:rgba(0,0,0,0);
  --iris:#7d69f3; --iris-hi:#8b78f5; --iris-lo:#6a55e0; --iris-edge:#5f4fd0; --on-iris:#faf9f5;
  --text:#2b2929; --text-sub:#767373; --text-muted:#9c968f; --muted:#9c968f;
  --radius:14px; --radius-sm:11px; --radius-xs:8px;
  --font:'Roboto',system-ui,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --success:#2f9e5b; --ok:#2f9e5b; --error:#c0432f; --danger:#c0432f; --warn:#df9349; --warning:#df9349;

  /* Chrome tokens — the surfaces the rules below paint with */
  --header-bg:rgba(240,238,230,.86);
  --input-bg:#ffffff;
  --stat-bg:#f4efe6; --stat-border:#e9e1d2;
  --chip-a:#fdfcf9; --chip-b:#f4f1e8; --chip-border:#e7e0d2;
  --tab-hover-bg:rgba(204,119,95,.07);
  --ml-focus-bg:#fdfcf9;
  --shadow-card:0 8px 24px rgba(43,41,41,.06);
  --shadow-chip:0 1px 2px rgba(43,41,41,.10),inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-chip-hover:0 5px 14px rgba(125,105,243,.32),inset 0 1px 0 rgba(255,255,255,.25);
  --shadow-chip-press:0 1px 3px rgba(140,60,45,.35) inset;
}

/* App data-viz + semantic palette → brand. Each app declares these in its own
   :root (dark) and [data-theme="light"]; override both theme selectors so
   timelines, charts, badges and status chips render in brand colours in every
   mode. The two scheduling pools map to the two non-Rust logo colours (Iris +
   Turquoise); available/warn/info draw from the tertiary palette. These hues
   read on either canvas, so they are shared rather than re-declared for dark. */
:root, [data-theme="light"], [data-theme="dark"]{
  --labor:#7d69f3; --labor-dim:#5f4fd0;              /* Iris */
  --equipment:#30d5bf; --equipment-dim:#1fb3a0;      /* Turquoise */
  --teal:#30d5bf;
  --avail:#33a06a; --green:#33a06a; --green-dim:#268052; --good:#33a06a;
  --busy-color:#c0432f; --conflict:#c0432f; --bad:#c0432f; --override-ring:#c0432f;
  --partial:#df9349; --amber:#df9349;
  --gold:#e0b348;
  /* Gordon CRM status chips */
  --status-new:#7d69f3; --status-contacted:#df9349; --status-active:#30d5bf;
  --status-open:#3bc5c4; --status-closed:#767373; --status-upcoming:#7d69f3;
  --status-deadline:#c0432f; --status-unknown:#9c968f;
}
:root, [data-theme="light"]{ --vis-group-color:#2b2929; --vis-label-bg:#faf9f5; }

/* ── Dark ────────────────────────────────────────────────────────────────── */
/* Graphite canvas, Chalk ink. Rust and Iris are lifted a step so they stay
   legible against the dark ground; everything else is the light palette's
   value-inverse, keeping the warm (never blue-grey) cast of the brand. */
[data-theme="dark"]{
  --bg:#1c1a19; --surface:#24211f; --surface-2:#2b2827;
  --card:#24211f; --card-hover:#2e2b28;
  --panel:#24211f; --panel-2:#2b2827;
  --border:#3a3633; --border-acc:#4a4541;
  --accent:#e08d73; --accent-2:#e08d73; --accent-dim:#cc775f; --accent-glow:rgba(224,141,115,.18);
  --iris:#8f7df6; --iris-hi:#9d8df8; --iris-lo:#7d69f3; --iris-edge:#6a55e0; --on-iris:#faf9f5;
  --text:#f0eee6; --text-sub:#b5aea4; --text-muted:#8b847b; --muted:#8b847b;
  --success:#4cb87a; --ok:#4cb87a; --error:#e0604a; --danger:#e0604a; --warn:#e8a45f; --warning:#e8a45f;

  --header-bg:rgba(28,26,25,.86);
  --input-bg:#1f1d1c;
  --stat-bg:#2a2724; --stat-border:#3a3633;
  --chip-a:#312d2a; --chip-b:#262322; --chip-border:#413c37;
  --tab-hover-bg:rgba(224,141,115,.12);
  --ml-focus-bg:#2a2724;
  --shadow-card:0 8px 24px rgba(0,0,0,.38);
  --shadow-chip:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-chip-hover:0 5px 14px rgba(125,105,243,.36),inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-chip-press:0 1px 3px rgba(0,0,0,.55) inset;

  /* Data-viz bits that do need a dark-specific value */
  --vis-group-color:#f0eee6; --vis-label-bg:#24211f;
  --green-dim:#2f8f5e;
}

body{font-family:'Roboto',system-ui,sans-serif!important;background:var(--bg)!important;color:var(--text)!important;-webkit-font-smoothing:antialiased}

/* Headers — Noto Serif (editorial), mixed case */
h1,h2,h3,.app-title h1{font-family:'Noto Serif',Georgia,serif!important;font-weight:500!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--text)!important}

/* The wordmark IS the official logo lockup (icon + wordmark) from the brand
   guidelines, exported to a transparent PNG. Swap the text for the image; the
   text stays in the DOM (indented off-screen) for screen readers. Aspect 3.46:1. */
.portal-brand,.login-logo-title{
  display:inline-block!important;vertical-align:middle!important;
  background:url('/portal-static/brand-logo.png') left center/contain no-repeat!important;
  height:1.95em!important;width:6.75em!important;
  text-indent:-9999px!important;overflow:hidden!important;white-space:nowrap!important}
.login-logo-title{height:2.4em!important;width:8.3em!important}
/* The wordmark is set in Graphite, which vanishes on the dark canvas. Same
   lockup, wordmark recoloured to Chalk (the logo mark keeps its brand colours). */
[data-theme="dark"] .portal-brand,[data-theme="dark"] .login-logo-title{
  background-image:url('/portal-static/brand-logo-dark.png')!important}
.login-logo-sub{color:var(--text-sub)!important;letter-spacing:.02em}

header,.app-header,.portal-header{background:var(--header-bg)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important;backdrop-filter:blur(10px)}
.panel,.card,.login-card,section.panel,.modal{background:var(--panel)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-card)!important}
nav.tabs,.tabs{border-bottom:1px solid var(--border)!important}
/* Primary actions lead in Iris (a bright core/logo colour); Rust stays for links,
   tabs and text emphasis — its intended role per the guidelines. */
button,.btn,.btn-primary{background:var(--iris)!important;color:var(--on-iris)!important;border:0!important;font-weight:600!important}
button:hover,.btn-primary:hover{background:var(--iris-lo)!important}
.btn-secondary{background:transparent!important;border:1px solid var(--border)!important;color:var(--text-sub)!important}

/* Tactile "chalk-chip" header buttons: soft chips that lift and glow Iris on
   hover, press down on click. Primary actions stay solid Iris so they lead. */
.header-actions .pill,.header-actions button,
.app-header button,.app-header .tb-btn,.tock-controls .tb-btn{
  background:linear-gradient(180deg,var(--chip-a),var(--chip-b))!important;color:var(--text-sub)!important;
  border:1px solid var(--chip-border)!important;border-radius:9px!important;font-weight:500!important;
  box-shadow:var(--shadow-chip)!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease!important}
.header-actions .pill:hover,.header-actions button:hover,
.app-header button:hover,.app-header .tb-btn:hover,
.tock-controls .tb-btn:hover{
  background:linear-gradient(180deg,var(--iris-hi),var(--iris))!important;color:var(--on-iris)!important;
  border-color:var(--iris-edge)!important;transform:translateY(-1px)!important;
  box-shadow:var(--shadow-chip-hover)!important}
.header-actions .pill:active,.header-actions button:active,
.app-header button:active,.app-header .tb-btn:active,
.tock-controls .tb-btn:active{
  transform:translateY(0)!important;box-shadow:var(--shadow-chip-press)!important}
.app-header .tb-btn.primary,.tock-controls .tb-btn.primary,.header-actions .pill.primary{
  background:linear-gradient(180deg,var(--iris-hi),var(--iris))!important;color:var(--on-iris)!important;
  border:1px solid var(--iris-edge)!important;box-shadow:0 2px 8px rgba(125,105,243,.30),inset 0 1px 0 rgba(255,255,255,.25)!important}
.app-header .tb-btn.primary:hover,.tock-controls .tb-btn.primary:hover{
  background:linear-gradient(180deg,var(--iris-lo),var(--iris-edge))!important;transform:translateY(-1px)!important;
  box-shadow:0 6px 16px rgba(106,85,224,.34)!important}
input,select,textarea{background:var(--input-bg)!important;border:1px solid var(--border)!important;color:var(--text)!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;outline:none}
a{color:var(--accent)}
.muted,.text-muted{color:var(--text-muted)!important}

/* Tabs — flat bar with a Rust underline on the active tab */
.tab,.tab-btn,nav.tabs button,.tabs button,.tab-bar button,.tab-bar .tab-btn{
  background:transparent!important;color:var(--text-sub)!important;border:0!important;
  border-bottom:2px solid transparent!important;border-radius:0!important;
  box-shadow:none!important;font-weight:600!important}
.tab:hover,.tab-btn:hover,.tab-bar button:hover{
  background:var(--tab-hover-bg)!important;color:var(--text)!important}
.tab.active,.tab-btn.active,.tab-bar .active,.tabs .active{
  background:transparent!important;color:var(--accent)!important;
  border-bottom:2px solid var(--accent)!important}
.tabs,nav.tabs,.tab-bar{background:transparent!important;border-bottom:1px solid var(--border)!important}

/* Inline metric / KPI cells — warm cream instead of cold grey */
.stat{background:var(--stat-bg)!important;border:1px solid var(--stat-border)!important;box-shadow:none!important}

/* Statistician's guided (Mad-Libs) brief — keep the fill-in-the-blank underline + chips */
.madlib{background:var(--panel)!important;border:1px solid var(--border)!important}
input.ml,select.ml{background:transparent!important;border:0!important;
  border-bottom:1px dashed var(--accent)!important;border-radius:0!important;
  width:auto!important;box-shadow:none!important;color:var(--text)!important}
input.ml:focus,select.ml:focus{border-bottom:1px solid var(--accent)!important;background:var(--ml-focus-bg)!important}
.mode-btn{background:linear-gradient(180deg,var(--chip-a),var(--chip-b))!important;color:var(--text-sub)!important;
  border:1px solid var(--chip-border)!important;border-radius:20px!important;font-weight:500!important;box-shadow:none!important}
.mode-btn:hover{color:var(--text)!important}
.mode-btn.active{background:var(--tab-hover-bg)!important;color:var(--accent)!important;border-color:var(--accent)!important}

/* Landing "conference table" — retint the wood-brown to a warm walnut that settles
   into Graphite, so it harmonizes with the Chalk canvas + Rust rather than clashing */
.table{ background:linear-gradient(165deg,#9c604a 0%,#6d4738 55%,#39302c 100%)!important;
  border-color:#7d4c3a!important }