/* ============================================================================
   CM001 base design system — structural CSS. Consumes theme tokens (var(--*))
   compiled by the Theme Manager. Native CSS, zero build, light/dark + RTL aware.
   Wrapped in @layer cm.components so the kit + the Design Studio's cm.override can restyle it.
   ========================================================================== */
@layer cm.components {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-base, system-ui, sans-serif);
  font-size: var(--fs-base, 14px); line-height: var(--lh, 1.55);
  color: var(--text, #0f172a); background: var(--bg, #f6f8fb);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand, #2563eb); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 700; color: var(--text); }
h1 { font-size: var(--fs-h1, 22px); }
h2 { font-size: 17px; }
h3 { font-size: 14.5px; }
img { max-width: 100%; height: auto; }
.mono { font-family: var(--font-mono, monospace); }
.muted { color: var(--text-2, #475569); }
.faint { color: var(--text-3, #94a3b8); }
.small { font-size: var(--fs-sm, 12.5px); }

/* ---- app shell: topbar + sidebar + content ----
   Fixed shell: the grid fills the viewport exactly (height:100dvh) and never scrolls itself, so the
   brand mark (row 1, col 1) and the topbar (row 1, col 2) stay pinned at the top through any amount of
   page scrolling. Only the sidebar and the content pane (row 2) scroll, each inside its own track.
   This is why the brand no longer rides up with the page — a sticky topbar alone could not hold it,
   since a row-1 grid item's containing block is just the 56px row and gives sticky nothing to travel. */
.app { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: var(--sidebar-w, 256px) 1fr; grid-template-rows: var(--topbar-h, 56px) 1fr; grid-template-areas: "brand top" "side main"; }
.topbar { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e2e8f0); position: sticky; top: 0; z-index: 20; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--surface, #fff); border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); font-weight: 800; color: var(--text); font-size: 15px; }
.brand .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--on-brand, #fff); display: grid; place-items: center; font-weight: 800; }
/* Frozen left rail: it fills row 2 of the fixed shell (height = viewport − topbar) and takes its own
   scroll when the nav is taller than the viewport, so scrolling the page content never carries the menu
   away. The position:sticky is now belt-and-suspenders — the shell already pins it — but harmless.
   Desktop only — under 860px the sidebar is hidden and the PWA bottom-nav takes over (see below). */
.sidebar { grid-area: side; background: var(--surface, #fff); border-inline-end: 1px solid var(--line); padding: 12px 10px; overflow-y: auto; position: sticky; top: var(--topbar-h, 56px); align-self: start; height: calc(100vh - var(--topbar-h, 56px)); height: calc(100dvh - var(--topbar-h, 56px)); }
/* min-height:0 lets the 1fr track cap the pane so tall content scrolls INSIDE it, instead of the
   automatic grid-item minimum growing the track and pushing scroll back onto the (now fixed) shell. */
.content { grid-area: main; padding: 24px; overflow-y: auto; min-height: 0; }
.content-inner { max-width: var(--content-max, 1200px); margin: 0 auto; }
.topbar .spacer { flex: 1; }

/* ---- nav ---- */
.nav-group { margin-bottom: 14px; }
/* The category header doubles as a collapse toggle — a real <button> for keyboard + screen readers. The
   chevron is drawn in CSS (no icon) and rotates to point right when the group is collapsed. */
.nav-group > .nav-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; background: none; border: 0; text-align: start; font: inherit; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; padding: 6px 12px; margin: 0; cursor: pointer; border-radius: var(--radius-md, 10px); }
.nav-group > .nav-title:hover { color: var(--text-2); background: var(--surface-2, #f1f5f9); }
.nav-group > .nav-title:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nav-group > .nav-title::after { content: ''; flex: none; width: 6px; height: 6px; margin-top: -2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; opacity: .65; }
.nav-group.collapsed > .nav-title::after { transform: rotate(-45deg); }
.nav-group.collapsed > .nav-items { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-group > .nav-title::after { transition: none; } }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md, 10px); color: var(--text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.nav-item:hover { background: var(--surface-2, #f1f5f9); color: var(--text); text-decoration: none; }
.nav-item.on { background: var(--brand-50, #eff6ff); color: var(--brand); }
.nav-item .ic { flex: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-md, 10px); border: 1px solid var(--line-2, #cbd5e1); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; line-height: 1; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.btn--primary:hover { background: var(--brand-600, #1d4ed8); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

/* ---- cards / panels ---- */
.panel { background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-h h2 { margin: 0; font-size: 15px; }
.panel-h .spacer { flex: 1; }
.panel-b { padding: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.kpi .k-lbl { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.kpi .k-val { font-size: 24px; font-weight: 800; color: var(--text); }

/* ---- forms ---- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2, #cbd5e1); border-radius: var(--radius-md, 10px); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.field { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hstack { display: flex; align-items: center; gap: 10px; }
/* CM016 PPM: workload bar in the 12-month load view. */
.ppm-bar { height: 12px; min-width: 2px; border-radius: 999px; background: var(--brand); }

/* CM013 helpdesk: timeline entries, attachment tiles, overdue emphasis. */
.hd-ev { padding: 9px 0; border-bottom: 1px solid var(--line); }
.hd-ev:last-of-type { border-bottom: 0; }
.hd-ev--internal { background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 8px; padding-inline: 10px; }
.hd-att { display: inline-block; max-width: 140px; text-decoration: none; color: inherit; }
.hd-att:hover { text-decoration: none; opacity: .85; }
.hd-late { color: var(--danger); font-weight: 600; }

/* country + flag as one inline unit. The hairline ring keeps white flags (JP, PL…) visible on white. */
.cm-country { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cm-country > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-flag { flex: none; display: inline-block; border-radius: 2px; object-fit: cover; vertical-align: -.15em; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }

/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tr:hover td { background: var(--surface-2); }
.strong { font-weight: 600; color: var(--text); }

/* ---- chips / badges (semantic) ---- */
/* white-space:nowrap is structural, not cosmetic. A chip is an atomic pill: broken across two lines
   it reads as two separate tokens ("P1 —" / "Critical") and drags every neighbouring row taller.
   Measured on the Job Orders queue before this rule: 14 of 24 chips rendered at 44px instead of 22px.
   Long labels now extend the chip instead of folding it; table chips live inside .tablewrap, which
   already scrolls, and toolbar chips sit in flex rows that wrap between chips rather than inside one. */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill, 999px); font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
/* Chip INK is the semantic hue pulled part-way toward the theme's own text colour, not the raw hue.
   The raw hue is chosen to read against a page background, not against a 14% wash of itself at 11.5px,
   and it fails in opposite themes: measured on the Job Orders queue, --warn ink scored 3.19:1 in light
   while --danger scored 3.59:1 and --brand 3.19:1 in dark, against a 4.5:1 requirement.
   Blending toward var(--text) is self-correcting — --text is dark in light themes and light in dark
   ones — so this holds for any palette a root user configures, without touching their theme record.
   The fill and border keep the raw hue, so the chip still reads as amber/red/blue at a glance. */
.chip--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: color-mix(in srgb, var(--ok) 62%, var(--text)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.chip--warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 62%, var(--text)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.chip--danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 62%, var(--text)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.chip--brand { background: var(--brand-50); color: color-mix(in srgb, var(--brand) 62%, var(--text)); border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.swatch { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); display: inline-block; vertical-align: middle; }

/* ---- notes ---- */
.note { padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; margin-bottom: 12px; }
.note--ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.note--danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* ---- language / theme switch menus ---- */
.pill-select { position: relative; }
.pill-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.pill-btn:hover { background: var(--surface-2); color: var(--text); }
.pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 190px; padding: 6px; z-index: 40; }
.pop[hidden] { display: none; }
.pop button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 8px 10px; border: 0; background: transparent; color: var(--text); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; text-align: start; }
.pop button:hover { background: var(--surface-2); }
.pop button.on { color: var(--brand); font-weight: 700; }

/* ---- utilities ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.tokrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tokrow code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }

/* ---- CM002 consoles (Chunk C) ---- */
.btn--ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar input { flex: 1 1 180px; }
.toolbar select { flex: 0 0 auto; width: auto; min-width: 130px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th { text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
table.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.table tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover td { background: var(--surface-2); }
table.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kv th { text-align: start; vertical-align: top; padding: 4px 14px 4px 0; color: var(--text-2); font-weight: 600; white-space: nowrap; width: 1%; }
table.kv td { padding: 4px 0; color: var(--text); word-break: break-word; }
h3.sub { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 0 0 10px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.checklist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-height: 320px; overflow-y: auto; }
.check { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border-radius: 9px; font-weight: 500; color: var(--text); cursor: pointer; margin: 0; }
.check:hover { background: var(--surface-2); }
.check input { width: auto; margin-top: 2px; flex: none; }
.matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: start; }
.matrix thead th { position: sticky; top: 0; background: var(--surface); color: var(--text-2); font-size: 11px; z-index: 2; }
.matrix input { width: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 9px 9px 0 0; color: var(--text-2); font-weight: 600; font-size: 13px; border: 1px solid transparent; border-bottom: 0; }
.tabs a.on { background: var(--surface); color: var(--brand); border-color: var(--line); }
.mono { font-family: var(--font-mono); }

/* ---- responsive: collapse sidebar on small screens ---- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .brand, .sidebar { display: none; }
  .content { padding: 16px; }
}
} /* end @layer cm.components */