/* ============================================================================
   IOX Projects — app shell, on IOX Graphite.
   Top bar and sidebar on the rail ground · content on the base ground · cards
   on surface · steel for selection, focus and active nav · the one action fill
   for primary buttons · square 2/4/6 radii · status pills carry status only.

   Every colour here resolves to a token in tokens.css; this file defines none
   of its own. Shell DIMENSIONS (56px bar, 250px labelled sidebar) still predate
   the identity's 44px bar and 60px icon rail — moving those is a layout pass,
   because 8 rules below and 6 pages hardcode the current numbers.
   cio.css loads LAST → wins.
   ============================================================================ */

:root {
  /* Layout constants. The identity calls for a 44px bar and a 60px icon rail;
     both are held at their current values here because 8 rules in this file and
     6 pages hardcode 56/250, and moving one without the others tears the shell.
     That is a layout pass, not a palette pass. */
  --topbar-h:  56px;
  --sidebar-w: 250px;

  /* Top bar — the rail ground */
  --topbar-bg:      var(--bg-rail);
  --topbar-text:    var(--tx-primary);
  --topbar-dim:     var(--tx-secondary);
  --topbar-border:  var(--bd-default);
  --topbar-chip:    var(--bg-surface);

  /* Accent role 1 — steel. "The system talking": selection, active, focus. */
  --green:          var(--br-500);
  --green-hover:    var(--br-400);
  --green-soft:     var(--br-tint);
  --green-text:     var(--br-300);
  --green-50:       var(--br-tint);

  /* Primary. Steel, because in this file --primary paints active tab
     underlines, focus rings, checked boxes and toggles — selection, not action.
     The one true action fill is --ac-fill, applied to .cio-btn-primary below. */
  --primary:        var(--br-500);
  --primary-hover:  var(--br-400);
  --primary-text:   var(--ac-ink);

  /* Surfaces — the ground stack */
  --content-bg:     var(--bg-base);
  --surface:        var(--bg-surface);
  --surface-alt:    var(--bg-surface);
  --surface-hover:  var(--bg-raised);

  /* Sidebar */
  --sidebar-bg:     var(--bg-rail);
  --sidebar-text:   var(--tx-secondary);
  --sidebar-muted:  var(--tx-tertiary);
  --sidebar-active: var(--br-tint);
  --sidebar-active-tx: var(--br-300);
  --sidebar-hover:  var(--bg-raised);

  /* Lines + text */
  --border:         var(--bd-default);
  --border-strong:  var(--bd-strong);
  --text:           var(--tx-primary);
  --text-muted:     var(--tx-secondary);
  --text-dim:       var(--tx-tertiary);
  --link:           var(--br-400);
  --danger:         var(--se-crit);
  --warning:        var(--se-warn);

  --surface-2:      var(--bg-raised);
  --surface-3:      var(--bg-overlay);
  --menu-bg:        var(--bg-overlay);
  --focus-ring:     var(--ring);
  --inset-hi:       none;
  --ease-out:       var(--ease);

  /* Geometry + motion — Graphite is a square system */
  --radius:    var(--r-sm);
  --radius-sm: var(--r-xs);
  --radius-lg: var(--r-md);
  --shadow-sm:  var(--el-1);
  --shadow-md:  var(--el-2);
  --shadow-pop: var(--el-2);
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── Hero compat tokens ──────────── */
  --hero-grad-top:var(--bg-rail); --hero-grad-bottom:var(--bg-rail);
  --hero-bg:var(--bg-rail);
  --hero-text:var(--tx-primary); --hero-text-muted:var(--tx-secondary); --hero-text-dim:var(--tx-tertiary);
  --hero-border:var(--bd-default); --hero-icon-border:var(--bd-strong);
  --hero-pill-active:var(--bg-raised); --hero-pill-hover:var(--bg-surface);
  --hero-stat-bg:var(--bg-surface); --hero-stat-border:var(--bd-default);
  --logo-grad:var(--br-500);
  --radius-card:var(--r-sm); --radius-btn:var(--r-sm); --radius-pill:var(--r-pill);
  --shadow-card:var(--el-1); --shadow-featured:var(--el-2);
  /* status pairs (tint-bg / text). Green, amber and red are status only. */
  --st-new-bg:var(--br-tint);           --st-new-tx:var(--br-300);
  --st-prog-bg:rgba(196,150,74,.14);    --st-prog-tx:var(--se-warn);
  --st-ok-bg:rgba(78,155,114,.13);      --st-ok-tx:var(--se-ok);
  --st-bad-bg:rgba(192,86,79,.12);      --st-bad-tx:var(--se-crit);
  --st-pink-bg:var(--sg-tint);          --st-pink-tx:var(--sg-500);
  --st-gray-bg:var(--bg-raised);        --st-gray-tx:var(--tx-secondary);
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.cio {
  font-family: var(--f-ui);
  background: var(--content-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cio ::selection { background: var(--br-tint); color: var(--tx-primary); }

/* Thin scrollbars */
.cio * { scrollbar-width: thin; scrollbar-color: var(--bd-strong) transparent; }
.cio *::-webkit-scrollbar { width: 10px; height: 10px; }
.cio *::-webkit-scrollbar-thumb { background: var(--bg-overlay); border-radius:var(--r-sm); border: 3px solid transparent; background-clip: content-box; }
.cio *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); background-clip: content-box; }

/* ── Command bar (demo pages) — slim flat navy, 56px ──────────────────────── */
.cio-topbar {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--topbar-bg); color: var(--topbar-text);
  position: sticky; top: 0; z-index: 130; border-bottom: 1px solid var(--topbar-border);
}
.cio-topbar-left, .cio-topbar-right { display: flex; align-items: center; gap: 12px; }
.cio-brand-mark { width: 28px; height: 28px; border-radius:var(--r-sm); background: var(--logo-grad); display: flex; align-items: center; justify-content: center; color: var(--bg-base); }
.cio-brand-mark svg { width: 18px; height: 18px; }
.cio-ws {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--tx-primary);
  background: var(--topbar-chip); padding: 5px 10px; border-radius:var(--r-sm); cursor: pointer; transition: background .15s var(--ease);
}
.cio-ws:hover { background: var(--bg-overlay); }
.cio-ws .chev { color: var(--topbar-dim); }
.cio-pill-mode {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--tx-primary); background: var(--topbar-chip); padding: 4px 10px; border-radius: 999px;
}
.cio-pill-mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--br-300); }
.cio-trial { font-size: 13px; color: var(--topbar-dim); }
.cio-btn-upgrade {
  background: var(--primary); color: var(--bg-base); font-weight: 600; font-size: 13px;
  border: none; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s var(--ease);
}
.cio-btn-upgrade:hover { background: var(--primary-hover); }
.cio-help { font-size: 13px; color: var(--topbar-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.cio-ico-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: var(--tx-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, color .15s;
}
.cio-ico-btn:hover { background: var(--bg-raised); color: var(--tx-primary); }
.cio-ico-btn svg { width: 18px; height: 18px; }
.cio-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--logo-grad); color: var(--bg-base); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* ── Frame: sidebar + content (demo pages) ────────────────────────────────── */
.cio-body { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.cio-sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 0 10px; gap: 2px;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.cio-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 10px; }
.cio-side-title { font-size: 15px; font-weight: 700; color: var(--text); }
.cio-side-collapse { color: var(--text-dim); cursor: pointer; }
.cio-side-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); padding: 0 22px; margin: 14px 0 6px;
}
.cio-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius:var(--r-sm); position: relative;
  color: var(--sidebar-text); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer;
  margin: 2px 10px;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.cio-nav-item svg { width: 18px; height: 18px; color: var(--sidebar-muted); flex-shrink: 0; }
.cio-nav-item:hover { background: var(--sidebar-hover); color: var(--text); }
.cio-nav-item:hover svg { color: var(--sidebar-text); }
.cio-nav-item.active { background: var(--sidebar-active); color: var(--sidebar-active-tx); font-weight: 600; }
.cio-nav-item.active svg { color: var(--sidebar-active-tx); }
.cio-nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--primary);
}
.cio-nav-item.sub { font-size: 13px; padding-left: 42px; }
.cio-nav-item.sub svg { display: none; }
.cio-nav-sep { height: 1px; background: var(--border); margin: 8px 12px; }

.cio-main { flex: 1; min-width: 0; background: var(--content-bg); }
.cio-page { max-width: 1280px; padding: 26px 30px 60px; animation: cioFade .3s var(--ease) both; }
@keyframes cioFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.cio-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.cio-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.cio-h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--text); }
.cio-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; }

/* ── Tabs (underline) ─────────────────────────────────────────────────────── */
.cio-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.cio-tab {
  padding: 0 1px 12px; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s;
}
.cio-tab:hover { color: var(--tx-secondary); }
.cio-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.cio-grid { display: grid; gap: 16px; }
.cio-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.cio-card-pad { padding: 18px 20px; }
.cio-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cio-card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }
.cio-card-link { font-size: 13px; color: var(--link); text-decoration: none; font-weight: 600; }

/* Stat cards (generic; light) */
.cio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 16px; margin-bottom: 26px; }
.cio-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow-card); transition: box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.cio-stat:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.10); transform: translateY(-1px); border-color: var(--border-strong); }
.cio-stat-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.cio-stat-label svg { width: 16px; height: 16px; }
.cio-stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.1; color: var(--text); }
.cio-stat-delta { font-size: 12.5px; font-weight: 600; color: var(--st-ok-tx); margin-top: 4px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.cio-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; font-family: inherit;
  padding: 9px 16px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; transition: all .15s var(--ease); }
.cio-btn-primary { background: var(--ac-fill); color: var(--ac-ink); border-color: var(--ac-fill); box-shadow: none; }
.cio-btn-primary:hover { background: var(--ac-hover); border-color: var(--ac-hover); }
.cio-btn-primary:active { background: var(--ac-fill); border-color: var(--ac-fill); }
.cio-btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cio-btn-secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); }
.cio-btn-secondary:hover { background: var(--bg-surface); border-color: var(--bd-strong); }
.cio-btn-green { background: var(--ac-fill); color: var(--ac-ink); border-color: var(--ac-fill); }
.cio-btn-green:hover { background: var(--ac-hover); border-color: var(--ac-hover); }
.cio-btn-dark { background: var(--bg-rail); color: var(--tx-primary); border-color: var(--bg-rail); }
.cio-btn-dark:hover { background: var(--tx-primary); border-color: var(--tx-primary); }
.cio-btn-danger { background: transparent; color: var(--se-crit); border-color: rgba(192,86,79,0.30); }
.cio-btn-danger:hover { background: rgba(192,86,79,0.08); }
.cio-btn-ghost { background: transparent; color: var(--tx-secondary); border-color: transparent; }
.cio-btn-ghost:hover { background: var(--bg-raised); }

/* ── Badges / pills ───────────────────────────────────────────────────────── */
.cio-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; line-height: 1; }
.cio-badge-green { background: var(--st-ok-bg); color: var(--st-ok-tx); }
.cio-badge-gray { background: var(--st-gray-bg); color: var(--st-gray-tx); }
.cio-badge-amber { background: var(--st-prog-bg); color: var(--st-prog-tx); }
.cio-badge-red { background: var(--st-bad-bg); color: var(--st-bad-tx); }
.cio-badge-purple, .cio-badge-blue { background: var(--st-new-bg); color: var(--st-new-tx); }
.cio-badge-pink { background: var(--st-pink-bg); color: var(--st-pink-tx); }
.cio-badge-dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.cio-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cio-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); padding: 10px 14px; border-bottom: 1px solid var(--border); background: transparent; }
.cio-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.cio-table tbody tr:hover { background: var(--bg-surface); }
.cio-table tbody tr:last-child td { border-bottom: none; }
.cio-link { color: var(--link); text-decoration: none; }
.cio-link:hover { text-decoration: underline; }
.cio-muted { color: var(--text-muted); }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.cio-input { width: 100%; font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.cio-input::placeholder { color: var(--text-dim); }
.cio-input:hover { border-color: var(--bd-strong); }
.cio-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); background: var(--bg-surface); }

/* ── Checkbox / radio / toggle (blue-active) ──────────────────────────────── */
.cio-check { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:6px;
  border:1.5px solid var(--border-strong); background:var(--bg-surface); cursor:pointer; position:relative; transition:all .15s var(--ease); flex-shrink:0; }
.cio-check:checked { background:var(--primary); border-color:var(--primary); }
.cio-check:checked::after { content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:solid var(--bg-surface); border-width:0 2px 2px 0; transform:rotate(45deg); }
.cio-check:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cio-radio { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--border-strong); background:var(--bg-surface); cursor:pointer; position:relative; transition:all .15s var(--ease); flex-shrink:0; }
.cio-radio:checked { border-color:var(--primary); }
.cio-radio:checked::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%;
  background:var(--primary); transform:translate(-50%,-50%); }
.cio-radio:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.cio-toggle { -webkit-appearance:none; appearance:none; width:38px; height:22px; border-radius:999px;
  background:var(--border-strong); cursor:pointer; position:relative; transition:background .18s var(--ease); flex-shrink:0; }
.cio-toggle::after { content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%;
  background:var(--bg-surface); box-shadow:0 1px 2px rgba(0,0,0,0.2); transition:transform .18s var(--ease); }
.cio-toggle:checked { background:var(--primary); }
.cio-toggle:checked::after { transform:translateX(16px); }
.cio-toggle:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.cio-sk { display:inline-block; border-radius:6px; background: linear-gradient(90deg,var(--bg-overlay) 25%,var(--bg-surface) 37%,var(--bg-overlay) 63%); background-size:400% 100%; animation: cioSk 1.3s ease infinite; }
@keyframes cioSk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ============================================================================
   TOP BAR (slim) — the tall navy hero is RETIRED. The .vx-hero family is kept
   defined but neutralized: if any page still renders it, it collapses into the
   slim 56px flat navy bar (no centered nav, no on-header title/stats).
   ============================================================================ */
.vx-hero, .cio-hero {
  background: var(--topbar-bg); color: var(--topbar-text);
  border-radius: 0; padding: 0; position: sticky; top: 0; z-index: 130;
  border-bottom: 1px solid var(--topbar-border);
}

/* Row 1 — brand · workspace chip · right cluster (NO nav links in the bar) */
.vx-hero-bar, .cio-hero-bar {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; position: relative;
}
.vx-hero-brand { display: flex; align-items: center; gap: 10px; }
.vx-hero-logo, .cio-hero-logo {
  width: 28px; height: 28px; border-radius:var(--r-sm); background: var(--logo-grad);
  display: flex; align-items: center; justify-content: center; color: var(--tx-primary); flex-shrink: 0; text-decoration: none;
}
.vx-hero-logo svg, .cio-hero-logo svg { width: 17px; height: 17px; }
.vx-hero-ws { font-size: 15px; font-weight: 700; color: var(--tx-primary); letter-spacing: -0.01em; text-decoration: none; }

/* Workspace chip (darker pill next to the wordmark) */
.vx-ws-chip, .cio-tb-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-left: 6px;
  border-radius:var(--r-sm); background: var(--topbar-chip); color: var(--tx-primary); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s var(--ease);
}
.vx-ws-chip:hover, .cio-tb-chip:hover { background: var(--bg-overlay); }
.vx-ws-chip svg, .cio-tb-chip svg { width: 14px; height: 14px; color: var(--topbar-dim); }

/* Centered pill nav — retired (sidebar is the primary nav) */
.vx-nav, .cio-topnav { display: none !important; }
.vx-nav-link, .cio-topnav a { color: var(--topbar-dim); text-decoration: none; }

.vx-hero-right, .cio-hero-right { display: flex; align-items: center; gap: 8px; }
.vx-ico-btn, .cio-ico-circle {
  width: 32px; height: 32px; border-radius:var(--r-sm); border: none;
  background: transparent; color: var(--tx-secondary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s; position: relative;
}
.vx-ico-btn svg, .cio-ico-circle svg { width: 18px; height: 18px; }
.vx-ico-btn:hover, .cio-ico-circle:hover { background: var(--bg-raised); color: var(--tx-primary); }
.vx-hero-avatar, .cio-hero-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--logo-grad); color: var(--bg-base);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; border: none;
}

/* Row 2 — on-header title/stats: retired (title now lives in content) */
.vx-hero-page, .cio-hero-page { display: none; }
.vx-h1, .cio-hero-h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0 0 18px; }
.vx-stats, .cio-statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }

/* Stat cards — restyled LIGHT so they work inside content if re-emitted */
.vx-stat, .cio-statcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow-card); position: relative;
}
.vx-stat-label, .cio-statcard .label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.vx-stat-value, .cio-statcard .value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-top: 6px; line-height: 1.1; }
.vx-stat-icon, .cio-statcard .icon {
  position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius:var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.vx-stat-icon svg, .cio-statcard .icon svg { width: 20px; height: 20px; }
.vx-stat-icon.purple, .cio-statcard .icon.purple,
.vx-stat-icon.blue,   .cio-statcard .icon.blue   { background: rgba(89,136,180,.14); color: var(--br-500); }
.vx-stat-icon.amber,  .cio-statcard .icon.amber  { background: rgba(196,150,74,.16); color: var(--se-warn); }
.vx-stat-icon.green,  .cio-statcard .icon.green  { background: rgba(78,155,114,.14); color: var(--se-ok); }
.vx-stat-icon.pink,   .cio-statcard .icon.pink   { background: rgba(188,123,68,.14); color: var(--sg-500); }

/* Content wrapper (shell-wrapped pages) */
.vx-content, .cio-content { max-width: 1280px; margin: 0 auto; padding: 26px 30px 60px; }

/* Mobile drawer (account links on small screens; sidebar handles primary nav) */
.vx-nav-mobile { display: none; }
.vx-nav-mobile-toggle { display: none; background: none; border: 0; color: var(--tx-secondary); cursor: pointer; padding: 6px; }
@media (max-width: 1023px) {
  .vx-nav-mobile-toggle { display: inline-flex; align-items: center; }
  .vx-nav-mobile.open { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; background: var(--topbar-bg); }
  .vx-nav-mobile a { color: var(--topbar-dim); font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius:var(--r-md); text-decoration: none; }
  .vx-nav-mobile a.active, .vx-nav-mobile a:hover { background: var(--topbar-chip); color: var(--tx-primary); }
}

/* ── Avatar dropdown menu (built by cio-shell.js; .open toggles on .vx-avatar-wrap) ── */
.vx-avatar-wrap { position: relative; }
.vx-avatar { width:30px; height:30px; border-radius:50%; border:none; background:var(--logo-grad); color:var(--bg-base); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.vx-avatar-menu { display:none; position:absolute; right:0; top:calc(100% + 10px); width:232px; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:6px; z-index:200; }
.vx-avatar-wrap.open .vx-avatar-menu { display:block; }
.vx-avatar-menu-head { padding:8px 12px 10px; border-bottom:1px solid var(--border-color); margin-bottom:4px; }
.vx-avatar-menu-name { font-size:13.5px; font-weight:600; color:var(--text-main); }
.vx-avatar-menu-sub { font-size:12px; color:var(--text-muted); margin-top:1px; }
/* signed-in account: which user this is, the company it belongs to, and its User ID */
.vx-avatar-menu-acct { margin-top:8px; padding-top:8px; border-top:1px solid var(--border, rgba(0,0,0,0.08)); }
.vx-avatar-menu-acct-who { font-size:12px; font-weight:600; color:var(--text-main); word-break:break-all; }
.vx-avatar-menu-acct-line { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.vx-avatar-menu-acct-line:empty { display:none; }
.vx-avatar-menu-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500; color:var(--text-main); text-decoration:none; cursor:pointer; background:none; border:0; width:100%; text-align:left; }
.vx-avatar-menu-item:hover { background:var(--surface-hover); }
.vx-mi-ico { display:inline-flex; color:var(--text-muted); }
.vx-mi-ico svg { width:16px; height:16px; }
.vx-avatar-menu-sep { height:1px; background:var(--border-color); margin:4px 6px; }
.vx-mi-danger, .vx-mi-danger .vx-mi-ico { color:var(--danger-color); }

/* ── BP cross-page sub-nav (clone of .cio-tabs) — stays on crm/sales/invoices ── */
.vx-subnav, .cio-subnav { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin: 0 0 24px; }
.vx-subtab, .cio-subnav a {
  padding: 0 1px 12px; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.vx-subtab:hover, .cio-subnav a:hover { color: var(--tx-secondary); }
.vx-subtab.active, .cio-subnav a.active { color: var(--text); border-bottom-color: var(--primary); }
@media (max-width: 600px) { .vx-subnav, .cio-subnav { overflow-x: auto; flex-wrap: nowrap; } }

/* ── Order-card anatomy (projects / sales lists / featured card) ──────────── */
.vx-order-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px; box-shadow: var(--shadow-card);
}
.vx-order-card.featured { box-shadow: var(--shadow-featured); border-color: rgba(89,136,180,0.30); }
.vx-order-head { display: flex; align-items: center; gap: 12px; }
.vx-order-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--logo-grad); color: var(--bg-base);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.vx-order-name { font-size: 15px; font-weight: 600; color: var(--text); }
.vx-order-sub { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.vx-order-status { margin-left: auto; }
.vx-subbox-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.vx-subbox { background: var(--bg-raised); border-radius:var(--r-md); padding: 10px 12px; flex: 1; min-width: 100px; }
.vx-subbox-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.vx-subbox-value { font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 4px; }
.vx-lineitem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vx-lineitem:last-child { border-bottom: none; }
.vx-lineitem-thumb { width: 36px; height: 36px; border-radius:var(--r-sm); background: var(--bg-raised); flex-shrink: 0; }
.vx-lineitem-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.vx-lineitem-price { font-size: 13px; font-weight: 600; color: var(--text); }
.vx-lineitem-qty { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }
.vx-notes { background: var(--bg-raised); border-radius:var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--tx-secondary); margin: 14px 0; }

/* ── Filters card ─────────────────────────────────────────────────────────── */
.vx-filters { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 18px 20px; }
.vx-filters-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 16px 0 8px; }
.vx-filters-label:first-child { margin-top: 0; }
.vx-filter-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--text); cursor: pointer; }

/* ============================================================================
   REAL-PAGE THEME — targets the existing IOX Projects shell classes so cio.css is a
   drop-in theme for every app page. Loaded LAST → overrides style.css + inline.
   ============================================================================ */
:root {
  --bg-color:var(--bg-base); --bg-secondary:var(--bg-surface);
  --surface-color:var(--bg-surface); --surface-hover:var(--bg-raised); --surface-2:var(--bg-raised); --surface-3:var(--bg-overlay);
  --border-color:var(--bd-default); --border-strong:var(--bd-default);
  --primary-color:var(--br-500); --primary-hover:var(--br-600); --primary-dark:var(--br-600); --primary-light:rgba(89,136,180,0.12);
  --text-main:var(--tx-primary); --text-muted:var(--tx-secondary); --text-dim:var(--tx-tertiary);
  --sidebar-bg:var(--bg-rail); --sidebar-text:var(--tx-secondary); --sidebar-muted:var(--tx-secondary); --sidebar-dim:var(--tx-tertiary);
  --sidebar-hover:var(--bg-raised); --sidebar-active:var(--br-tint); --sidebar-border:var(--bd-default);
  --success-color:var(--se-ok); --warning-color:var(--se-warn); --danger-color:var(--se-crit); --info-color:var(--br-500);
}
body { background:var(--bg-base) !important; color:var(--text-main);
  font-family:var(--f-ui) !important; }

/* Top bar — slim flat navy, spans full width, sticky */
.top-header, .vx-topbar {
  position:fixed !important; top:0; left:0; right:0; height:var(--topbar-h); min-height:var(--topbar-h); z-index:130;
  background:var(--topbar-bg) !important; border-bottom:1px solid var(--topbar-border) !important; border-radius:0;
  padding:0 16px !important; display:flex; align-items:center; justify-content:space-between;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  --surface-hover: rgba(255,255,255,0.10);  /* injected bell/avatar hover reads correctly on navy */
}
.top-header .breadcrumb, .top-header .breadcrumb a { color:var(--tx-secondary) !important; font-weight:600; text-decoration:none; }
.top-header .header-right { gap:6px !important; }
.top-header .header-right svg { color:var(--tx-secondary) !important; }
.top-header .mobile-nav-toggle { color:var(--tx-secondary) !important; }

/* ============================================================================
   SIDEBAR — RESTORED as the primary nav (Zoho-Creator style).
   White, 250px, fixed below the 56px bar. display:flex !important also beats
   any leftover inline display:none from the old shell.
   ============================================================================ */
.sidebar {
  display:flex !important; flex-direction:column;
  position:fixed !important; top:var(--topbar-h) !important; left:0; bottom:0;
  width:var(--sidebar-w) !important; min-width:var(--sidebar-w);
  background:var(--sidebar-bg) !important; border-right:1px solid var(--sidebar-border) !important;
  z-index:110; transform:none; overflow:hidden;
}
/* Brand row hidden — the logo + wordmark live in the top bar now */
.sidebar-brand { display:none !important; }
.sidebar-brand-name { color:var(--text-main) !important; }

.sidebar-nav { flex:1; overflow-y:auto; padding:14px 0 12px !important; }
.sidebar-section { margin:0 0 18px !important; }
.sidebar-section-label {
  font-size:11px !important; font-weight:600 !important; text-transform:uppercase !important;
  letter-spacing:.08em !important; color:var(--tx-tertiary) !important; padding:0 22px !important; margin:0 0 6px !important;
}
.sidebar-link {
  display:flex !important; align-items:center; gap:10px; position:relative;
  font-size:13.5px !important; font-weight:500 !important; color:var(--sidebar-text) !important;
  padding:9px 12px !important; margin:2px 10px !important; border-radius:var(--r-sm) !important;
  border-left:none !important; text-decoration:none !important;
  transition:background .12s var(--ease), color .12s var(--ease);
}
.sidebar-link svg, .sidebar-link i, .sidebar-link .icon { width:18px; height:18px; color:var(--sidebar-muted) !important; flex-shrink:0; }
.sidebar-link:hover { background:var(--sidebar-hover) !important; color:var(--text-main) !important; }
.sidebar-link:hover svg, .sidebar-link:hover i { color:var(--sidebar-text) !important; }
/* Active nav: steel tint behind the lighter steel ink. Steel-on-steel-tint sits
   at 3.95:1 — under the 4.5 floor for something you read to navigate — so the
   label takes --br-300, matching the system's own settings__nav[aria-current]. */
/* --br-on-tint, not --br-300: the active row is a brand WASH, so its ink has to
   step away from the page colour — lighter in dark, darker in light. */
.sidebar-link.active { background:var(--sidebar-active) !important; color:var(--br-on-tint) !important; font-weight:600 !important; }
.sidebar-link.active svg, .sidebar-link.active i { color:var(--br-on-tint) !important; }
.sidebar-link.active::before {
  content:"" !important; display:block !important; position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 2px 2px 0; background:var(--br-500);
}
/* Indented child rows (Sales Orders / Invoices under Business Performance) */
.sidebar-link.sub, .sidebar-link.sidebar-sublink, .sidebar-link.is-sub, .sidebar-sublink {
  font-size:13px !important; padding:8px 12px 8px 42px !important;
}
.sidebar-link.sub, .sidebar-link.sidebar-sublink svg, .sidebar-link.is-sub svg, .sidebar-sublink svg { display:none !important; }

.sidebar-footer { border-top:1px solid var(--sidebar-border) !important; padding:12px 14px !important; background:var(--bg-surface); }
.sidebar-user { display:flex; align-items:center; gap:10px; }
.sidebar-user .user-avatar { background:var(--logo-grad) !important; color:var(--bg-base) !important; }
.sidebar-user .user-name { color:var(--text-main) !important; font-size:13px; font-weight:600; }
.sidebar-user .user-role { color:var(--text-dim) !important; font-size:11.5px; }
.sidebar-footer a, .sidebar-footer button { color:var(--sidebar-muted); }
.sidebar-footer a:hover, .sidebar-footer button:hover { color:var(--text-main); }

/* Content — offset for the fixed 250px sidebar (top bar is sticky → in flow) */
.main-content { display:block !important; margin-top:0 !important; margin-left:var(--sidebar-w) !important; background:var(--content-bg) !important; min-height:calc(100vh - var(--topbar-h)); }
.page-body, .page-content { background:transparent !important; max-width:1280px; margin:0 auto; padding:26px 30px 60px; }
.vx-content .page-body, .cio-content .page-body, .vx-content .page-content, .cio-content .page-content { max-width:none !important; margin:0 !important; padding:0 !important; background:transparent !important; }
.page-body h1, .page-body h2, .page-body h3, .page-content h1, .page-content h2, .page-content h3 { color:var(--text-main); }

/* Cards */
.card { background:var(--surface-color) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important; }
.card-header { border-color:var(--border-color) !important; }
.card-title { color:var(--text-main) !important; }

/* KPI / stat cards (in-content, LIGHT) */
.kpi-card { background:var(--surface-color) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important; transition:box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.kpi-card::after { display:none !important; }
.kpi-card:hover { box-shadow:0 10px 28px rgba(0,0,0,0.10) !important; transform:translateY(-1px); border-color:var(--border-strong) !important; }
.kpi-card .kpi-value, .kpi-value { color:var(--text-main) !important; }
.kpi-card .kpi-label, .kpi-label { color:var(--text-muted) !important; }
.kpi-card .kpi-icon-wrap { background:var(--bg-raised) !important; color:var(--tx-secondary) !important; box-shadow:none !important; }
/* The coloured card variants (.green/.blue/.amber/.pink/…) are deliberately gone:
   Graphite is near-monochrome and green/amber/red carry STATUS, never decoration.
   Every KPI card is one neutral card; the figure carries the emphasis. */
.kpi-card[class*="kpi-card"] { background:var(--bg-surface) !important; border-color:var(--bd-default) !important; }

/* Module cards (retained for Products/library.html) */
.module-card { background:var(--surface-color) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important; }
.module-card:hover { box-shadow:0 10px 28px rgba(0,0,0,0.10) !important; border-color:var(--border-strong) !important; transform:translateY(-1px); }
.mc-header, .mc-footer { border-color:var(--border-color) !important; }
.mc-icon-wrap { background:rgba(89,136,180,0.12) !important; color:var(--br-500) !important; }
.mc-title { color:var(--text-main) !important; }
.mc-features li::before { color:var(--success-color) !important; }
.mc-badge.active { background:var(--st-ok-bg) !important; color:var(--st-ok-tx) !important; }
.mc-badge.locked { background:var(--st-bad-bg) !important; color:var(--st-bad-tx) !important; }
.mc-cta, .mc-license { color:var(--info-color) !important; }
.mc-cta, a.mc-cta, .mc-license { color:var(--br-400) !important; }

/* Tables */
.projects-table th, table thead th { color:var(--text-dim) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.06em; border-color:var(--border-color) !important; background:transparent !important; }
.projects-table td, table tbody td { border-color:var(--border-color) !important; color:var(--text-main) !important; }
.projects-table tbody tr:hover, table tbody tr:hover { background:var(--bg-surface) !important; }

/* Buttons */
.btn-primary, button.btn-primary { background:var(--ac-fill) !important; border:1px solid var(--ac-fill) !important; color:var(--ac-ink) !important; box-shadow:none !important; border-radius:var(--r-sm) !important; }
.btn-primary:hover { background:var(--primary-hover) !important; border-color:var(--primary-hover) !important; filter:none !important; }
.btn-ghost, .btn-secondary, .btn-outline { color:var(--text-main) !important; border-radius:var(--r-sm) !important; }
.btn-secondary, .btn-outline { background:var(--bg-surface) !important; border:1px solid var(--border-strong) !important; }
.btn-secondary:hover, .btn-outline:hover { background:var(--bg-surface) !important; border-color:var(--bd-strong) !important; }
.btn-ghost { color:var(--tx-secondary) !important; }
.btn-ghost:hover { background:var(--bg-raised) !important; color:var(--text-main) !important; }
.btn-dark { background:var(--bg-rail) !important; color:var(--tx-primary) !important; border:1px solid var(--bg-rail) !important; border-radius:var(--r-sm) !important; }
.btn-dark:hover { background:var(--tx-primary) !important; border-color:var(--tx-primary) !important; }

/* Badges / status pills */
.badge, .status-badge { border-radius:999px !important; font-weight:600 !important; }
.badge-green, .badge-success { background:var(--st-ok-bg) !important; color:var(--st-ok-tx) !important; }
.badge-blue, .badge-info { background:var(--st-new-bg) !important; color:var(--st-new-tx) !important; }
.badge-yellow, .badge-amber, .badge-warning { background:var(--st-prog-bg) !important; color:var(--st-prog-tx) !important; }
.badge-red, .badge-danger { background:var(--st-bad-bg) !important; color:var(--st-bad-tx) !important; }
.badge-gray { background:var(--st-gray-bg) !important; color:var(--st-gray-tx) !important; border:none !important; }
.badge-purple { background:var(--st-new-bg) !important; color:var(--st-new-tx) !important; }
.badge-pink { background:var(--st-pink-bg) !important; color:var(--st-pink-tx) !important; }
.badge-new-solid { background:var(--br-500) !important; color:var(--bg-base) !important; }

/* Tabs — underline, blue indicator */
.product-tab, [role="tab"] { border-radius:0 !important; color:var(--text-muted) !important; font-weight:600; }
.product-tab:hover, [role="tab"]:hover { color:var(--tx-secondary) !important; }
.product-tab.active, [role="tab"][aria-selected="true"] { color:var(--text-main) !important; border-bottom-color:var(--primary-color) !important; }

/* BP sub-tabs (in-page bp-tabs/bp-tab match the underline-tab look) */
.bp-tabs { display:flex; gap:24px; border-bottom:1px solid var(--border-color) !important; }
.bp-tab { color:var(--text-muted) !important; font-weight:600; border-bottom:2px solid transparent !important; padding:0 1px 12px; cursor:pointer; }
.bp-tab:hover { color:var(--tx-secondary) !important; }
.bp-tab.active { color:var(--text-main) !important; border-bottom-color:var(--primary-color) !important; }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
select, textarea, .form-input, .form-control {
  background:var(--bg-surface) !important; border:1px solid var(--border-strong) !important; color:var(--text-main) !important; border-radius:var(--r-sm) !important; }
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="search"]:hover,
select:hover, textarea:hover, .form-input:hover, .form-control:hover { border-color:var(--bd-strong) !important; }
input:focus, select:focus, textarea:focus, .form-input:focus, .form-control:focus {
  outline:none !important; border-color:var(--primary-color) !important; box-shadow:var(--focus-ring) !important; background:var(--bg-surface) !important; }
::placeholder { color:var(--text-dim) !important; }

/* Checkbox / radio accent (native controls in Filters etc.) */
input[type="checkbox"], input[type="radio"] { accent-color:var(--primary-color) !important; }

/* Skeleton (light) */
.sk { background:linear-gradient(90deg,var(--bg-overlay) 25%,var(--bg-surface) 37%,var(--bg-overlay) 63%) !important; background-size:400% 100% !important; }

/* Mobile bottom nav */
.mobile-bottom-nav { background:var(--bg-surface) !important; border-top:1px solid var(--border-color) !important; }
.mobile-bottom-nav a { color:var(--sidebar-muted) !important; }
.mobile-bottom-nav a.active { color:var(--br-500) !important; }

/* ── Command-bar elements (built by cio-shell.js inside .top-header) ──────── */
.top-header .header-left, .top-header .header-right { display:flex; align-items:center; }
.top-header .header-right { gap:8px !important; }
.cio-tb-left { display:flex; align-items:center; gap:10px; }
.cio-tb-logo { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--logo-grad); color:var(--bg-base); text-decoration:none; }
.cio-tb-logo svg { width:17px; height:17px; }
.cio-tb-ws { display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px; color:var(--tx-primary); cursor:pointer; padding:4px 4px; border-radius:var(--r-sm); transition:background .12s var(--ease); letter-spacing:-0.01em; }
.cio-tb-ws:hover { background:var(--bg-raised); }
.cio-tb-ws svg { color:var(--tx-tertiary); }
.cio-tb-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--tx-primary); background:var(--topbar-chip); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.cio-tb-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--br-300); }
.cio-tb-upgrade { display:inline-flex; align-items:center; background:var(--br-500); color:var(--bg-base); font-weight:600; font-size:13px; border:none; padding:7px 14px; border-radius:var(--r-sm); cursor:pointer; text-decoration:none; transition:background .15s; white-space:nowrap; margin-right:4px; }
.cio-tb-upgrade:hover { background:var(--br-600); }
.cio-tb-help { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--tx-tertiary); cursor:pointer; text-decoration:none; padding:0 8px; white-space:nowrap; }
.cio-tb-help svg { color:var(--tx-tertiary); }
.cio-tb-help:hover, .cio-tb-help:hover svg { color:var(--tx-primary); }
.cio-tb-gear { display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--tx-secondary); border:none; border-radius:var(--r-sm); cursor:pointer; text-decoration:none; transition:background .12s, color .12s; }
.cio-tb-gear:hover { background:var(--bg-raised); color:var(--tx-primary); }
.cio-tb-gear:active { background:var(--bg-overlay); }
/* flat icon buttons in the bar's right cluster */
.cio-tb-icobtn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--tx-secondary); border:none; border-radius:var(--r-sm); cursor:pointer; text-decoration:none; transition:background .12s, color .12s; position:relative; background:transparent; }
.cio-tb-icobtn svg { width:18px; height:18px; }
.cio-tb-icobtn:hover { background:var(--bg-raised); color:var(--tx-primary); }
/* avatar in the bar (override the dark inline gradient) */
.top-header .header-right .user-avatar { background:var(--logo-grad) !important; color:var(--bg-base) !important; width:30px; height:30px; font-size:12px; font-weight:700; border:none !important; }

/* Centered horizontal nav inside .top-header — RETIRED (sidebar is the nav) */
.cio-tb-nav { display:none !important; }
.cio-tb-nav a { color:var(--tx-tertiary); text-decoration:none; }

/* Notification panel — light popover */
#notif-panel { border-radius:var(--r-md) !important; border:1px solid var(--border-color) !important; background:var(--menu-bg) !important; box-shadow:var(--shadow-pop) !important; color:var(--text-main) !important; }
#notif-panel #notif-mark-all { color:var(--br-400) !important; }

/* Top-bar responsive: drop text bits on smaller screens */
@media (max-width:820px){ .cio-tb-pill, .cio-tb-help span { display:none !important; } .top-header .header-right .cio-tb-help[data-keep="mail"] { display:none !important; } }
@media (max-width:560px){ .cio-tb-upgrade { display:none !important; } }

/* topbar link colors — beat style.css `a{color:inherit}` */
.top-header .cio-tb-logo, .top-header .cio-tb-ws { color:var(--tx-primary) !important; }
.top-header .cio-tb-chip, .top-header .vx-ws-chip { color:var(--tx-primary) !important; }
.top-header .cio-tb-help, .top-header .cio-tb-help span { color:var(--tx-tertiary) !important; }
.top-header .cio-tb-help:hover, .top-header .cio-tb-help:hover span, .top-header .cio-tb-help:hover svg { color:var(--tx-primary) !important; }
.top-header .cio-tb-gear, .top-header .cio-tb-icobtn { color:var(--tx-secondary) !important; }
.top-header .cio-tb-gear:hover, .top-header .cio-tb-icobtn:hover { color:var(--tx-primary) !important; }
.top-header .cio-tb-upgrade { color:var(--tx-primary) !important; }

/* notification panel items — light menu rows */
#notif-list > div { border-radius:var(--r-sm) !important; margin-bottom:0 !important; border-bottom:1px solid var(--border-color) !important; color:var(--tx-secondary) !important; }
#notif-list > div:last-child { border-bottom:none !important; }
#notif-list > div:hover { background:var(--bg-surface) !important; }
#notif-list > div[style*="border-left"] { border-left-color:var(--br-500) !important; }

/* ============================================================================
   Quotation Builder — white cards, BLUE stepper on light
   ============================================================================ */
.stepper { background:var(--bg-surface) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important; }
.step { transition: all .22s cubic-bezier(.16,1,.3,1) !important; }
.step:hover { background: var(--bg-surface) !important; }
.step.active {
  background: rgba(89,136,180,0.10) !important;
  color:var(--tx-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(89,136,180,0.30) !important;
}
.step.active .step-label { color:var(--tx-primary) !important; }
.step.active .step-sublabel { color:var(--tx-secondary) !important; }
.step-circle { transition: all .25s cubic-bezier(.16,1,.3,1) !important; border-color:var(--border-strong) !important; background:var(--bg-surface) !important; color:var(--tx-secondary) !important; }
.step .step-label { color:var(--tx-secondary) !important; }
.step.active .step-circle {
  border-color:var(--br-500) !important; background:var(--br-500) !important; color:var(--bg-base) !important;
  box-shadow: 0 0 0 4px rgba(89,136,180,0.18) !important; transform: scale(1.05);
}
.step.completed { color:var(--br-400) !important; }
.step.completed .step-label { color:var(--tx-primary) !important; }
.step.completed .step-circle { border-color:var(--br-500) !important; background:var(--br-500) !important; color:var(--bg-base) !important; }
.step.completed + .step::before, .step.completed::after { background:var(--br-500) !important; }
.stepper-title { color:var(--tx-tertiary) !important; }
.wizard-content-area { animation: qFade .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes qFade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* Quotation wizard surfaces (inline .wz-* / .wizard-main re-light) */
.wizard-main { background:var(--bg-base) !important; }
.wz-card { background:var(--bg-surface) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important; }
.wz-title { color:var(--tx-primary) !important; }
.wz-subtitle { color:var(--tx-secondary) !important; }
.wz-stat { background:var(--bg-surface) !important; border:1px solid var(--border-color) !important; border-radius:var(--r-md) !important; }
.wz-stat-value { color:var(--tx-primary) !important; }
.wz-stat-label { color:var(--tx-secondary) !important; }
.wz-box, .wz-subbox { background:var(--bg-raised) !important; border-radius:var(--r-md) !important; }

/* ============================================================================
   Responsive layout — sidebar off-canvas below 1024px (top bar stays)
   ============================================================================ */
@media (max-width:1023px) {
  .sidebar {
    transform:translateX(-110%); transition:transform .25s var(--ease);
    z-index:140; box-shadow:none;
  }
  .sidebar.open, .sidebar.mobile-open, body.sidebar-open .sidebar {
    transform:translateX(0); box-shadow:0 12px 32px rgba(255,255,255,0.16);
  }
  .main-content { margin-left:0 !important; }
  .cio-sidebar { display:none; }
  .cio-page, .page-body, .vx-content, .cio-content { padding-left:20px; padding-right:20px; }
}
@media (max-width:600px) {
  .page-body, .vx-content, .cio-content { padding:18px 14px 56px; }
}

/* ============================================================================
   SHELL BRIDGE — vx-* classes emitted by cio-shell.js (Zoho layout glue)
   ============================================================================ */
.main-content { padding-top: var(--topbar-h) !important; }
body.vx-synth-shell { padding-left: var(--sidebar-w); padding-top: var(--topbar-h); }

/* Topbar brand cluster */
.vx-tb-left { display:flex; align-items:center; gap:10px; }
.vx-tb-brand { display:flex; align-items:center; gap:9px; text-decoration:none !important; }
.vx-tb-logo { width:30px; height:30px; border-radius:var(--r-sm); background:transparent; color:var(--tx-primary); display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0; }
.vx-tb-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.vx-tb-logo svg { width:28px; height:28px; display:block; }
.top-header .vx-tb-name, .vx-tb-name { color:var(--tx-primary) !important; font-size:15px; font-weight:700; letter-spacing:.01em; }
.top-header .vx-tb-ws, .vx-tb-ws { display:inline-flex; align-items:center; gap:6px; background:var(--bg-raised); border:1px solid var(--bd-default); color:var(--tx-primary) !important; font-size:12px; font-weight:600; border-radius:6px; padding:4px 10px; margin-left:8px; cursor:pointer; white-space:nowrap; }
.vx-tb-ws:hover { background:var(--bg-overlay); }
.vx-tb-ws-chev { display:inline-flex; color:var(--tx-secondary); }
/* subscription plan rendered as plain, non-clickable text beside the brand */
/* Token-driven, not white-alpha: the topbar sits on --bg-rail, which is white
   in the light theme, so hardcoded white text and icons vanished there. */
.top-header .vx-tb-plan, .vx-tb-plan { display:inline-flex; align-items:center; margin-left:10px; color:var(--tx-secondary) !important; font-size:13px; font-weight:600; white-space:nowrap; cursor:default; user-select:none; }
.vx-tb-right { display:flex; align-items:center; gap:6px; }
.vx-tb-apps, .vx-tb-ico { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--tx-secondary) !important; cursor:pointer; background:transparent; border:0; }
.vx-tb-apps:hover, .vx-tb-ico:hover { background:var(--bg-raised); color:var(--tx-primary) !important; }

/* Sidebar bits the shell emits */
.sidebar-link-ico { display:inline-flex; width:18px; flex:0 0 18px; align-items:center; justify-content:center; }
.sidebar-link-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-link.child-active { color:var(--br-400) !important; font-weight:600; }
.sidebar-link.child-active svg { color:var(--br-500) !important; }

/* Mobile drawer driven by the shell (body.vx-drawer-open + scrim) */
.vx-sidebar-scrim { display:none; }
@media (max-width:1023px) {
  body.vx-drawer-open .sidebar { transform:translateX(0) !important; box-shadow:0 12px 32px rgba(255,255,255,0.16); }
  body.vx-drawer-open .vx-sidebar-scrim { display:block; position:fixed; inset:0; background:rgba(15,18,35,0.45); z-index:120; }
}
@media (min-width:1024px) { .mobile-nav-toggle { display:none !important; } }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL POLISH LAYER — design refinement (additive; no layout changes).
   Reaches every page that loads cio.css (all main pages except login).
   ════════════════════════════════════════════════════════════════════════ */

/* (a) Accessibility — visible keyboard focus on every interactive element.
   The --focus-ring token already exists; these add the rings that were missing. */
.cio-btn-secondary:focus-visible,
.cio-btn-green:focus-visible,
.cio-btn-dark:focus-visible,
.cio-btn-danger:focus-visible,
.cio-btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Real-page shell buttons (style.css sets these with !important, so we must match). */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-dark:focus-visible,
.btn-sm:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }

/* Sidebar nav uses an INSET ring (the sidebar is overflow:hidden — an outline would clip). */
.cio-nav-item:focus-visible,
.sidebar-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary) !important; }
.sidebar-footer a:focus-visible,
.sidebar-footer button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Top bar: avatar, apps/bell/gear/help icon buttons, workspace chip, avatar menu items. */
.vx-avatar:focus-visible, .cio-hero-avatar:focus-visible,
.vx-tb-apps:focus-visible, .vx-tb-ico:focus-visible, .cio-tb-icobtn:focus-visible,
.cio-tb-gear:focus-visible, .cio-ico-btn:focus-visible, .vx-ico-btn:focus-visible,
.cio-tb-help:focus-visible, .vx-tb-ws:focus-visible, .cio-tb-ws:focus-visible,
.cio-ws:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vx-avatar-menu-item:focus-visible { outline: none; background: var(--surface-hover); box-shadow: inset 0 0 0 2px var(--primary); }

/* Underline tabs. */
.cio-tab:focus-visible, .bp-tab:focus-visible,
.vx-subtab:focus-visible, .cio-subnav a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* (b) Accessibility — contrast: table headers + placeholders were too light (--text-dim ≈ 2.6:1). */
.cio-table th { color: var(--text-muted); }
.projects-table th, table thead th { color: var(--text-muted) !important; }
.cio-input::placeholder { color: var(--text-muted); }
::placeholder { color: var(--text-muted) !important; }

/* (c) Smoothness — table-row hover was invisible (var(--bg-surface) on var(--bg-surface)). Give a perceptible step. */
.cio-table tbody tr:hover { background: var(--surface-2); }
.projects-table tbody tr:hover, table tbody tr:hover { background: var(--surface-2) !important; }

/* (d) Feedback — consistent disabled state (was undefined for cio + shell buttons). */
.cio-btn:disabled, .cio-btn[aria-disabled="true"],
.btn:disabled, button:disabled,
.btn-primary:disabled, .btn-secondary:disabled, .btn-outline:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}

/* (e) Consistency — token hygiene: scrollbar thumb + text selection track the light theme. */
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
::selection { background: rgba(89,136,180,0.30); }
::-moz-selection { background: rgba(89,136,180,0.30); }