/* ============================================================================
   Ship 514-cc-pascal — Pascal theme for the Command Center.
   Design source: Manny's "Command Center — Pascal v2" mockup (Claude design,
   2026-07-27). Instrument Serif display + JetBrains Mono data labels on a warm
   cream ground, oklch palette. Scoped under .cc-container so nothing leaks
   into the rest of the SPA. The global wsmail header/tab strip is untouched.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

.cc-container {
  /* Pascal tokens (ccp- prefix). Values lifted from the mockup's inline styles. */
  --ccp-bg: #faf9f5;                       /* cream page ground */
  --ccp-card: #ffffff;
  --ccp-line: oklch(0.91 0.01 90);         /* warm hairline */
  --ccp-line-2: oklch(0.86 0.012 90);
  --ccp-ink: oklch(0.26 0.01 270);
  --ccp-ink-2: oklch(0.36 0.01 270);
  --ccp-ink-3: oklch(0.55 0.01 270);
  --ccp-muted: oklch(0.62 0.01 270);
  --ccp-blue: oklch(0.38 0.16 255);
  --ccp-blue-soft: #dfe9ff;
  --ccp-green: oklch(0.62 0.13 155);
  --ccp-amber: oklch(0.72 0.13 75);
  --ccp-red: oklch(0.55 0.19 25);
  --ccp-serif: 'Instrument Serif', Georgia, serif;
  --ccp-mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--ccp-bg);
}

/* ---- Layout: rail + main column (Ship 518 — full-bleed, Pallet-style) ---
   app-main.css forces .cc-container { background:#f7f8fb !important } from its
   customers/products 3D block, so the cream ground needs the id + !important.
   Only #commandCenterContainer carries this class (verified 2026-07-27). */
#commandCenterContainer.cc-container { background: var(--ccp-bg) !important; }
.cc-container .cc-wrap { max-width: none; margin: 0; padding: 0; }
.ccp-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - 40px); }
.ccp-main { min-width: 0; padding: 20px 28px 80px; }
@media (max-width: 1100px) {
  .ccp-layout { grid-template-columns: 1fr; }
  .ccp-rail { display: none; }
}

/* ---- Left rail: full-height white panel, flush to the screen edge ------- */
.ccp-rail {
  background: var(--ccp-card);
  border-right: 1px solid var(--ccp-line);
}
.ccp-rail-in {
  position: sticky; top: 0;
  max-height: 100vh;
  display: flex; flex-direction: column;
  padding-top: 6px;
}
.ccp-rail-head { padding: 14px 12px 6px; }
.ccp-rail-kicker {
  font-family: var(--ccp-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-muted);
  padding: 0 8px 2px;
}
.ccp-rail-sub { font-size: 11.5px; color: var(--ccp-ink-3); padding: 0 8px; }
.ccp-rail-body { flex: 1; overflow-y: auto; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.ccp-rail-group {
  font-family: var(--ccp-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-muted);
  padding: 12px 8px 4px;
}
.ccp-sec {
  display: flex; align-items: center; gap: 8px;
  width: 100%; border: none; background: none; cursor: pointer;
  font: 500 12.5px/1.3 inherit; font-family: inherit; color: var(--ccp-ink-2);
  padding: 7px 8px; border-radius: 8px; position: relative; text-align: left;
}
.ccp-sec:hover { background: var(--ccp-bg); }
.ccp-sec.active { background: var(--ccp-blue-soft); color: var(--ccp-blue); font-weight: 600; }
.ccp-sec .ccp-bar {
  position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 2px; background: transparent;
}
.ccp-sec.active .ccp-bar { background: var(--ccp-blue); }
.ccp-sec svg { flex: none; opacity: .75; }
.ccp-sec .ccp-lab { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccp-badge {
  font-family: var(--ccp-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ccp-ink-3); background: var(--ccp-bg);
  border: 1px solid var(--ccp-line); border-radius: 999px;
  padding: 1px 7px; min-width: 22px; text-align: center;
}
.ccp-sec.active .ccp-badge { background: #fff; color: var(--ccp-blue); border-color: transparent; }
.ccp-badge.warn { background: #fdecec; color: var(--ccp-red); border-color: transparent; }
.ccp-rail-foot { border-top: 1px solid var(--ccp-line); padding: 10px 18px; }
.ccp-totop {
  border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ccp-blue); font-weight: 500; font-size: 12px; font-family: inherit;
  padding: 2px; border-radius: 4px;
}

/* ---- Light base retheme (full section restyle lands in Ship 515/516) ---- */
.cc-container .cc-header { margin-bottom: 18px; }
.cc-container .cc-title {
  font-family: var(--ccp-serif); font-weight: 400 !important; font-size: 30px;
  letter-spacing: -0.015em; color: var(--ccp-ink); line-height: 1.1;
}
.cc-container .cc-subtitle { color: var(--ccp-muted); }
.cc-container .cc-section {
  background: var(--ccp-card);
  border: 1px solid var(--ccp-line);
  border-radius: 14px;
  box-shadow: none;
}
.cc-container .cc-zone-header {
  font-family: var(--ccp-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-ink-3);
  background: transparent; border: none;
  border-bottom: 1px dotted var(--ccp-line-2);
  border-radius: 0; padding: 6px 2px;
}

/* ============================================================================
   Ship 515-cc-pascal — CCLive hero / gauge / pulse / today retheme.
   The .ccx design system injects its indigo tokens on :root at runtime;
   re-declaring the same custom properties on .ccx itself wins per-element,
   so the injected rules resolve to Pascal values without touching the blob.
   ========================================================================== */
.cc-container .ccx {
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: var(--ccp-mono);
  --page: transparent;
  --card: var(--ccp-card);
  --card-2: #fdfcf9;
  --ink: var(--ccp-ink);
  --ink-2: var(--ccp-ink-2);
  --ink-3: var(--ccp-ink-3);
  --ink-faint: var(--ccp-muted);
  --line: var(--ccp-line);
  --line-2: var(--ccp-line-2);
  --red: var(--ccp-red);     --red-bg: #fdf0ee;    --red-bd: #f3d9d4;
  --amber: var(--ccp-amber); --amber-bg: #fdf6e9;  --amber-bd: #f0e2c4;
  --green: var(--ccp-green); --green-bg: #eef6ee;  --green-bd: #d7e8d7;
  --blue: var(--ccp-blue);   --blue-bg: var(--ccp-blue-soft); --blue-bd: #c9d9f7;
  --indigo-600: var(--ccp-blue);
  --indigo-500: var(--ccp-blue);
  --violet-500: var(--ccp-blue);
  --grad-brand: linear-gradient(135deg, oklch(0.38 0.16 255), oklch(0.45 0.14 255));
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-pop: 0 12px 32px -18px rgba(40, 40, 30, .25);
}

/* Hero: serif narrative headline on a LIGHT card. The .ccx blob paints
   .hero-main with the dark brand gradient + white text (Ship 517 flips it). */
.cc-container .ccx .hero { background: var(--ccp-card); border: 1px solid var(--ccp-line); box-shadow: none; }
.cc-container .ccx .hero-main { background: var(--ccp-card); color: var(--ccp-ink); }
.cc-container .ccx .hero-main::after { display: none; }
.cc-container .ccx .hero-line { color: var(--ccp-ink-3); opacity: 1; }
.cc-container .ccx .hero-chip {
  background: var(--ccp-bg); border: 1px solid var(--ccp-line);
  color: var(--ccp-ink-2); backdrop-filter: none;
}
.cc-container .ccx .hero-side { border-left: 1px solid var(--ccp-line); }
.cc-container .ccx .hero-eyebrow {
  font-family: var(--ccp-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-muted);
}
.cc-container .ccx .hero-status {
  font-family: var(--ccp-serif); font-weight: 400; font-size: 30px;
  letter-spacing: -0.01em; color: var(--ccp-ink);
}
/* Accent color comes inline from the health band (Ship 517); red is the
   fallback if the inline style is ever absent. */
.cc-container .ccx .hero-status em {
  font-family: var(--ccp-serif); font-style: italic; color: var(--ccp-red);
}
.cc-container .ccx .hero-side-h {
  font-family: var(--ccp-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-muted);
}

/* Section headers inside the mount: mono kickers over a dotted rule */
.cc-container .ccx .sec { border-bottom: 1px dotted var(--ccp-line-2); padding-bottom: 6px; }
.cc-container .ccx .sec-t {
  font-family: var(--ccp-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-ink-2);
}
.cc-container .ccx .sec-hint { font-family: var(--ccp-mono); font-size: 10.5px; color: var(--ccp-muted); }

/* Live pulse tiles + Today stats: serif numerals, mono labels */
.cc-container .ccx .kpi { border: 1px solid var(--ccp-line); }
.cc-container .ccx .kpi-lab {
  font-family: var(--ccp-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500;
}
.cc-container .ccx .kpi-val { font-family: var(--ccp-serif); font-weight: 400; font-size: 30px; }
.cc-container .ccx .kpi-val .u { font-family: var(--ccp-serif); }
.cc-container .ccx .tstat { border: 1px solid var(--ccp-line); background: var(--ccp-card); }
.cc-container .ccx .tstat-v { font-family: var(--ccp-serif); font-weight: 400; font-size: 24px; }
.cc-container .ccx .tstat-l { color: var(--ccp-ink-3); }

/* Attention queue shell */
.cc-container .ccx .att { border: 1px solid var(--ccp-line); border-radius: 14px; background: var(--ccp-card); }

/* ============================================================================
   Ship 516-cc-pascal — legacy section retheme (Team Pulse, junk strip, charts,
   anomalies/patterns, CR hub, reply quality, top questions, heatmap, FAQ,
   training, archive, config). Same DOM, Pascal skin. The 3d hover effect and
   colored accent borders flatten into the warm-hairline card language.
   ========================================================================== */
.cc-container .cc-section.cc-3d,
.cc-container .cc-3d { box-shadow: none; transform: none; }
.cc-container .cc-section { border-left: 1px solid var(--ccp-line) !important; }
.cc-container .cc-section-title {
  font-family: var(--ccp-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 500; color: var(--ccp-ink-2);
}
.cc-container .cc-section-desc { font-size: 12px; color: var(--ccp-ink-3); }
.cc-container .cc-section-header { border-bottom: 1px dotted var(--ccp-line-2); padding-bottom: 8px; }

/* Buttons: ghost = warm outline, solid = Pascal blue */
.cc-container .cc-btn {
  background: var(--ccp-blue); color: #fff; border: 1px solid var(--ccp-blue);
  border-radius: 8px; font-weight: 500;
}
.cc-container .cc-btn:hover { filter: brightness(1.08); }
.cc-container .cc-btn.ghost {
  background: var(--ccp-card); color: var(--ccp-ink-2); border: 1px solid var(--ccp-line-2);
}
.cc-container .cc-btn.ghost:hover { background: var(--ccp-bg); filter: none; }

/* Range pills: cream track, white active segment */
.cc-container .cc-range-pill {
  background: var(--ccp-bg); border: 1px solid var(--ccp-line); border-radius: 9px;
}
.cc-container .cc-range-btn { color: var(--ccp-ink-3); border-radius: 7px; font-weight: 500; }
.cc-container .cc-range-btn.active {
  background: var(--ccp-card); color: var(--ccp-ink);
  box-shadow: 0 1px 2px rgba(40, 40, 30, .10); border: 1px solid var(--ccp-line);
}

/* Form controls: unify the inline #cbd5e1 borders (inline styles need !important) */
.cc-container select, .cc-container input[type="text"], .cc-container input[type="date"], .cc-container textarea {
  border-color: var(--ccp-line-2) !important;
  border-radius: 8px !important;
  background-color: var(--ccp-card);
  color: var(--ccp-ink);
  font-family: inherit;
}
.cc-container select:focus, .cc-container input:focus, .cc-container textarea:focus {
  outline: none; border-color: var(--ccp-blue) !important;
}

/* Junk strip + archive inner panels pick up the card language */
.cc-container .cc-junk-strip {
  background: var(--ccp-card); border: 1px solid var(--ccp-line); border-radius: 14px;
}
.cc-container .cc-modal { border: 1px solid var(--ccp-line); border-radius: 14px; }
.cc-container .cc-skeleton { background: var(--ccp-bg); }
.cc-container .cc-back-btn {
  background: var(--ccp-card); border: 1px solid var(--ccp-line-2);
  border-radius: 8px; color: var(--ccp-ink-2);
}