/* ============================================================================
   Chartered Investment skin.
   ----------------------------------------------------------------------------
   Loaded AFTER app.css and only on the :5050 shell. It changes two things and
   nothing else:

     1. the design tokens, so every view in the tool picks up the platform
        palette without a single line of view code changing;
     2. the chrome — tab strip, panels, buttons, tables, pills.

   The views render the same markup they always did. That is deliberate: it is
   the only way to re-skin a tool this size without losing a feature, because
   there is no view-level work to get wrong. Anything that looked right on the
   classic shell still works here.

   The shell runs inside the platform, which has its own header and is
   light-only, so it has no top bar of its own and stays light.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  --brand: #19a9d3;              /* platform cyan */
  --brand-deep: #1b6fa8;         /* darker half of the mark */
  --brand-ink: #123a5c;
  --accent: #f47b20;             /* platform orange — active tab, primary CTA */

  --page: #f4f6f8;
  --surface: #ffffff;
  --panel-head: #ffffff;
  --ink: #16242e;
  --ink-2: #44565f;
  --muted: #7b8a94;
  --grid: #e9eef2;
  --baseline: #cdd8df;
  --border: #e2e8ed;

  --series-1: #0e8fb5;
  --series-2: #f47b20;
  --series-3: #17a67d;

  --good: #1aa053;
  --good-text: #137a3f;
  --warning: #f0a526;
  --serious: #ec835a;
  --critical: #d64545;

  --accent-wash: rgba(25, 169, 211, 0.08);
  --row-hover: #f3fafd;
  --ex-today: #ddeef7;
  --ex-today-hover: #cde6f4;
  --ex-today-link: #0d5c85;

  --ci-shadow: 0 1px 2px rgba(22, 36, 46, 0.06), 0 1px 10px rgba(22, 36, 46, 0.04);
  --ci-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --page: #0f161b;
    --surface: #161f26;
    --panel-head: #1a242c;
    --ink: #eef4f7;
    --ink-2: #b4c3cc;
    --muted: #7d8f9a;
    --grid: #233039;
    --baseline: #32434e;
    --border: #243139;
    --row-hover: #1b2832;
    --accent-wash: rgba(25, 169, 211, 0.14);
    --ex-today: #14323f;
    --ex-today-hover: #1a3f50;
    --ex-today-link: #8ed2ec;
    --ci-shadow: none;
  }
}
:root[data-theme="dark"] {
  --page: #0f161b;
  --surface: #161f26;
  --panel-head: #1a242c;
  --ink: #eef4f7;
  --ink-2: #b4c3cc;
  --muted: #7d8f9a;
  --grid: #233039;
  --baseline: #32434e;
  --border: #243139;
  --row-hover: #1b2832;
  --accent-wash: rgba(25, 169, 211, 0.14);
  --ex-today: #14323f;
  --ex-today-hover: #1a3f50;
  --ex-today-link: #8ed2ec;
  --ci-shadow: none;
}

body {
  background: var(--page);
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- tab strip actions --------------------------------------------------- */
.ci-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.ci-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.ci-btn:disabled { opacity: 0.55; cursor: default; }
.ci-btn .ti { font-size: 13px; line-height: 1; }

/* The global search keeps its behaviour; only the shape changes. */
.ci-tabrow .gsearch input[type="search"] {
  height: 34px; width: 200px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--ink); padding: 0 10px;
}
.ci-tabrow .gsearch input[type="search"]:focus { outline: none; border-color: var(--brand); }
.ci-tabrow .meta { font-size: 11.5px; }
.ci-tabrow > .gsearch, .ci-tabrow > .ci-btn { margin-block: 5px; }

/* --- tab strip ------------------------------------------------------------ */
.ci-tabrow {
  position: sticky; top: 0; z-index: 35;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 10px;
}
.ci-tabrow .tabs { gap: 0; flex: 1 0 auto; max-width: 100%; }
.ci-tabrow .tabs a,
.ci-tabrow .tabgroup-btn {
  padding: 13px 13px 11px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.ci-tabrow .tabs a:hover,
.ci-tabrow .tabgroup-btn:hover { background: transparent; color: var(--ink); }
.ci-tabrow .tabs a.active,
.ci-tabrow .tabgroup.active .tabgroup-btn {
  background: transparent; color: var(--ink); font-weight: 700;
  border-bottom-color: var(--accent);
}
.ci-tabrow .tabgroup-menu {
  border: 1px solid var(--border); border-radius: var(--ci-radius);
  box-shadow: 0 8px 24px rgba(22, 36, 46, 0.14);
}

/* --- page body ------------------------------------------------------------ */
.view { padding: 22px 24px 40px; }
.view > h1, .view h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.view .crumb { font-size: 12px; }
.view .sub { font-size: 12.5px; max-width: 110ch; }

/* Each table becomes a platform panel. The views already wrap every table in
   .tablewrap, so this lands everywhere without touching one of them. */
.tablewrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow);
}
thead th {
  background: var(--panel-head);
  color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
td { padding: 9px 12px; border-bottom: 1px solid var(--grid); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }

/* app.css sizes the "show N rows" boxes from a 29px row. The roomier padding
   above makes a row ~35px, so the box has to be told, or it clips the last row
   of every scrolling table in the tool. */
.tablewrap.scrollrows { max-height: calc(var(--rows-visible, 10) * 35px + 44px); }

/* `.card` does double duty in this tool: a small stat tile inside `.cards`,
   and a full section (the CA tools, the cleanup panels) directly under .view.
   Only the section form gets panel padding, so the tiles stay compact. */
.view > .card { padding: 18px 20px; margin: 16px 0; }
.view > .card > h2:first-child, .view > .card > h3:first-child { margin-top: 0; }

/* Stat tiles. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow);
}

/* --- controls ------------------------------------------------------------- */
.controls input[type="search"], .controls select {
  height: 34px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--ink);
}
.controls input[type="search"]:focus, .controls select:focus { outline: none; border-color: var(--brand); }

.dlbtn, .filebtn {
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
}
.dlbtn:hover:not(:disabled), .filebtn:hover {
  background: var(--surface); color: var(--brand); border-color: var(--brand);
}
/* Primary actions take the platform orange, the way CREATE NEW does. */
.dlbtn.primary, .dlbtn.commit {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.dlbtn.primary:hover, .dlbtn.commit:hover:not(:disabled) {
  background: #e06a12; border-color: #e06a12; color: #fff; filter: none;
}
.dlbtn.danger { background: var(--critical); border-color: var(--critical); color: #fff; }

/* Severity filter — the All / Critical / Warning pills. */
.ops-tabs button {
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; padding: 6px 14px;
}
.ops-tabs button:hover { border-color: var(--brand); color: var(--brand); }
.ops-tabs button.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.ops-tabs button.active .dim { color: rgba(255, 255, 255, 0.85); }

/* Pills. */
.badge {
  border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
.badge.crit { color: #b3312f; background: #fbe3e3; border-color: #f2c4c4; }
.badge.warn { color: #9a6208; background: #fdf0d8; border-color: #f5ddb0; }
:root[data-theme="dark"] .badge.crit { color: #ff9b9b; background: rgba(214, 69, 69, 0.18); }
:root[data-theme="dark"] .badge.warn { color: #ffd081; background: rgba(240, 165, 38, 0.18); }

@media (max-width: 1100px) {
  .ci-tabrow .gsearch input[type="search"] { width: 150px; }
  .ci-btn .tl { display: none; }
}