/* ============================================================================
   VOLTXX — "Zoho Creator" light design system
   Slim flat navy top bar (56px) · white 250px left sidebar (primary nav) ·
   blue #4283F4 accent · light #F6F7FA canvas · white rounded cards + hairline
   borders + soft shadows · status pills · underline tabs.
   cio.css loads LAST → wins.
   ============================================================================ */

:root {
  /* Layout constants */
  --topbar-h:  56px;
  --sidebar-w: 250px;

  /* Top bar — flat dark indigo-navy, white text (no gradient) */
  --topbar-bg:      #26294A;
  --topbar-text:    #FFFFFF;
  --topbar-dim:     rgba(255,255,255,0.65);
  --topbar-border:  rgba(255,255,255,0.08);
  --topbar-chip:    rgba(255,255,255,0.10);

  /* Accent role 1 — the old "green CTA" token, now BLUE */
  --green:          #4283F4;   /* blue CTA */
  --green-hover:    #3372E0;
  --green-soft:     rgba(66,131,244,0.12);   /* upgrade/plan-pill wash */
  --green-text:     #2563EB;   /* blue text on LIGHT (AA on white) */
  --green-50:       rgba(66,131,244,0.10);

  /* Primary (blue action) */
  --primary:        #4283F4;
  --primary-hover:  #3372E0;
  --primary-text:   #FFFFFF;

  /* Surfaces */
  --content-bg:     #F6F7FA;
  --surface:        #FFFFFF;
  --surface-alt:    #F7F8FB;
  --surface-hover:  #F4F6FB;

  /* Sidebar (white — restored as the primary nav) */
  --sidebar-bg:     #FFFFFF;
  --sidebar-text:   #3A3F52;
  --sidebar-muted:  #6B7280;
  --sidebar-active: #EAF2FE;
  --sidebar-active-tx: #4283F4;
  --sidebar-hover:  #F4F6FB;

  /* Lines + text */
  --border:         #E8EAF0;
  --border-strong:  #D7DAE5;
  --text:           #161A2B;
  --text-muted:     #6B7280;
  --text-dim:       #9AA0AE;
  --link:           #2563EB;
  --danger:         #EF4444;
  --warning:        #F59E0B;

  /* New tokens */
  --surface-2:      #F1F2F7;
  --surface-3:      #EEF0F6;
  --menu-bg:        #FFFFFF;
  --focus-ring:     0 0 0 3px rgba(66,131,244,0.25);
  --inset-hi:       none;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);

  /* Geometry + motion */
  --radius:    10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm:  0 2px 8px rgba(20,25,50,0.04);
  --shadow-md:  0 6px 24px rgba(20,25,50,0.06);
  --shadow-pop: 0 12px 32px rgba(20,25,50,0.14);
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── Hero compat tokens (flattened — the tall hero is retired) ──────────── */
  --hero-grad-top:#26294A; --hero-grad-bottom:#26294A;
  --hero-bg:#26294A;
  --hero-text:#FFFFFF; --hero-text-muted:rgba(255,255,255,0.65); --hero-text-dim:rgba(255,255,255,0.42);
  --hero-border:rgba(255,255,255,0.08); --hero-icon-border:rgba(255,255,255,0.22);
  --hero-pill-active:rgba(255,255,255,0.14); --hero-pill-hover:rgba(255,255,255,0.07);
  --hero-stat-bg:#FFFFFF; --hero-stat-border:#E8EAF0;
  --logo-grad:linear-gradient(135deg,#69A1F8 0%,#4283F4 100%);
  --radius-card:12px; --radius-btn:8px; --radius-pill:999px;
  --shadow-card:0 2px 8px rgba(20,25,50,0.04); --shadow-featured:0 16px 40px rgba(20,25,50,0.12);
  /* status pairs (tint-bg / text) — "new/info" is now blue */
  --st-new-bg:rgba(66,131,244,0.12);  --st-new-tx:#2563EB;
  --st-prog-bg:rgba(245,158,11,0.14); --st-prog-tx:#B45309;
  --st-ok-bg:rgba(16,185,129,0.13);   --st-ok-tx:#047857;
  --st-bad-bg:rgba(239,68,68,0.12);   --st-bad-tx:#DC2626;
  --st-pink-bg:rgba(236,72,153,0.12); --st-pink-tx:#DB2777;
  --st-gray-bg:#F1F2F7;               --st-gray-tx:#5B6172;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.cio {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--content-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cio ::selection { background: rgba(66,131,244,0.20); color: #161A2B; }

/* Thin scrollbars */
.cio * { scrollbar-width: thin; scrollbar-color: rgba(20,25,50,0.18) transparent; }
.cio *::-webkit-scrollbar { width: 10px; height: 10px; }
.cio *::-webkit-scrollbar-thumb { background: rgba(20,25,50,0.18); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.cio *::-webkit-scrollbar-thumb:hover { background: rgba(20,25,50,0.30); 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: 8px; background: var(--logo-grad); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.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: #FFFFFF;
  background: var(--topbar-chip); padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: background .15s var(--ease);
}
.cio-ws:hover { background: rgba(255,255,255,0.15); }
.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: #FFFFFF; background: var(--topbar-chip); padding: 4px 10px; border-radius: 999px;
}
.cio-pill-mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8FB8F9; }
.cio-trial { font-size: 13px; color: var(--topbar-dim); }
.cio-btn-upgrade {
  background: var(--primary); color: #FFFFFF; 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: rgba(255,255,255,0.85); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, color .15s;
}
.cio-ico-btn:hover { background: rgba(255,255,255,0.10); color: #FFFFFF; }
.cio-ico-btn svg { width: 18px; height: 18px; }
.cio-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--logo-grad); color: #FFFFFF; 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: 8px; 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: #3A3F52; }
.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(20,25,50,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(--primary); color: #fff; border-color: var(--primary); box-shadow: none; }
.cio-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.cio-btn-primary:active { background: #2D6BD8; border-color: #2D6BD8; }
.cio-btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cio-btn-secondary { background: #FFFFFF; color: var(--text); border-color: var(--border-strong); }
.cio-btn-secondary:hover { background: #F7F8FB; border-color: #C7CBDA; }
.cio-btn-green { background: var(--primary); color: #fff; border-color: var(--primary); }
.cio-btn-green:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.cio-btn-dark { background: #26294A; color: #FFFFFF; border-color: #26294A; }
.cio-btn-dark:hover { background: #1E2140; border-color: #1E2140; }
.cio-btn-danger { background: transparent; color: #DC2626; border-color: rgba(239,68,68,0.30); }
.cio-btn-danger:hover { background: rgba(239,68,68,0.08); }
.cio-btn-ghost { background: transparent; color: #3A3F52; border-color: transparent; }
.cio-btn-ghost:hover { background: #F1F2F7; }

/* ── 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: #F7F8FB; }
.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: #FFFFFF; color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.cio-input::placeholder { color: var(--text-dim); }
.cio-input:hover { border-color: #C7CBDA; }
.cio-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); background: #FFFFFF; }

/* ── 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:#FFFFFF; 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 #FFFFFF; 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:#FFFFFF; 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:#FFFFFF; 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,#EEF0F6 25%,#F7F8FB 37%,#EEF0F6 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: 8px; background: var(--logo-grad);
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; 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: #FFFFFF; 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: 8px; background: var(--topbar-chip); color: #FFFFFF; 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: rgba(255,255,255,0.15); }
.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: 8px; border: none;
  background: transparent; color: rgba(255,255,255,0.85); 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: rgba(255,255,255,0.10); color: #FFFFFF; }
.vx-hero-avatar, .cio-hero-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--logo-grad); color: #FFFFFF;
  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: 10px;
  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(66,131,244,.14); color: #4283F4; }
.vx-stat-icon.amber,  .cio-statcard .icon.amber  { background: rgba(245,158,11,.16); color: #B45309; }
.vx-stat-icon.green,  .cio-statcard .icon.green  { background: rgba(16,185,129,.14); color: #047857; }
.vx-stat-icon.pink,   .cio-statcard .icon.pink   { background: rgba(236,72,153,.14); color: #DB2777; }

/* 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: rgba(255,255,255,0.85); 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: 10px; text-decoration: none; }
  .vx-nav-mobile a.active, .vx-nav-mobile a:hover { background: var(--topbar-chip); color: #FFFFFF; }
}

/* ── 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:#fff; 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:#fff; border:1px solid var(--border-color); border-radius:12px; 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; }
.vx-avatar-menu-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; 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: #3A3F52; }
.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: #FFFFFF; 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(66,131,244,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: #FFFFFF;
  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: #F1F2F7; border-radius: 10px; 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: 8px; background: #F1F2F7; 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: #F1F2F7; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #3A3F52; margin: 14px 0; }

/* ── Filters card ─────────────────────────────────────────────────────────── */
.vx-filters { background: #FFFFFF; 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 VOLTXX shell classes so cio.css is a
   drop-in theme for every app page. Loaded LAST → overrides style.css + inline.
   ============================================================================ */
:root {
  --bg-color:#F6F7FA; --bg-secondary:#FFFFFF;
  --surface-color:#FFFFFF; --surface-hover:#F4F6FB; --surface-2:#F1F2F7; --surface-3:#EEF0F6;
  --border-color:#E8EAF0; --border-strong:#D7DAE5;
  --primary-color:#4283F4; --primary-hover:#3372E0; --primary-dark:#2D6BD8; --primary-light:rgba(66,131,244,0.12);
  --text-main:#161A2B; --text-muted:#6B7280; --text-dim:#9AA0AE;
  --sidebar-bg:#FFFFFF; --sidebar-text:#3A3F52; --sidebar-muted:#6B7280; --sidebar-dim:#9AA0AE;
  --sidebar-hover:#F4F6FB; --sidebar-active:#EAF2FE; --sidebar-border:#E8EAF0;
  --success-color:#10B981; --warning-color:#F59E0B; --danger-color:#EF4444; --info-color:#4283F4;
}
body { background:#F6F7FA !important; color:var(--text-main);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !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:rgba(255,255,255,0.78) !important; font-weight:600; text-decoration:none; }
.top-header .header-right { gap:6px !important; }
.top-header .header-right svg { color:rgba(255,255,255,0.85) !important; }
.top-header .mobile-nav-toggle { color:rgba(255,255,255,0.85) !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:#9AA0AE !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:8px !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; }
.sidebar-link.active { background:var(--sidebar-active) !important; color:#4283F4 !important; font-weight:600 !important; }
.sidebar-link.active svg, .sidebar-link.active i { color:#4283F4 !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:#4283F4;
}
/* 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:#FFFFFF; }
.sidebar-user { display:flex; align-items:center; gap:10px; }
.sidebar-user .user-avatar { background:var(--logo-grad) !important; color:#FFFFFF !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 { background:transparent !important; max-width:1280px; margin:0 auto; padding:26px 30px 60px; }
.vx-content .page-body, .cio-content .page-body { max-width:none !important; margin:0 !important; padding:0 !important; background:transparent !important; }
.page-body h1, .page-body h2, .page-body h3 { color:var(--text-main); }

/* Cards */
.card { background:var(--surface-color) !important; border:1px solid var(--border-color) !important; border-radius:12px !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:12px !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(20,25,50,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:#F1F2F7 !important; color:#6B7280 !important; box-shadow:none !important; }
.kpi-card.green { background:rgba(16,185,129,0.08) !important; border-color:rgba(16,185,129,0.22) !important; }
.kpi-card.green .kpi-icon-wrap { background:rgba(16,185,129,0.14) !important; color:#10B981 !important; }
.kpi-card.blue { background:rgba(66,131,244,0.07) !important; border-color:rgba(66,131,244,0.22) !important; }
.kpi-card.blue  .kpi-icon-wrap { background:rgba(66,131,244,0.14) !important; color:#4283F4 !important; }
.kpi-card.purple { background:rgba(66,131,244,0.07) !important; border-color:rgba(66,131,244,0.22) !important; }
.kpi-card.purple .kpi-icon-wrap{ background:rgba(66,131,244,0.14) !important; color:#4283F4 !important; }
.kpi-card.amber { background:rgba(245,158,11,0.08) !important; border-color:rgba(245,158,11,0.22) !important; }
.kpi-card.amber .kpi-icon-wrap { background:rgba(245,158,11,0.16) !important; color:#F59E0B !important; }
.kpi-card.pink { background:rgba(236,72,153,0.07) !important; border-color:rgba(236,72,153,0.22) !important; }
.kpi-card.pink .kpi-icon-wrap { background:rgba(236,72,153,0.14) !important; color:#DB2777 !important; }

/* Module cards (retained for Products/library.html) */
.module-card { background:var(--surface-color) !important; border:1px solid var(--border-color) !important; border-radius:12px !important; box-shadow:var(--shadow-card) !important; }
.module-card:hover { box-shadow:0 10px 28px rgba(20,25,50,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(66,131,244,0.12) !important; color:#4283F4 !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:#2563EB !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:#F7F8FB !important; }

/* Buttons */
.btn-primary, button.btn-primary { background:var(--primary-color) !important; border:1px solid var(--primary-color) !important; color:#fff !important; box-shadow:none !important; border-radius:8px !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:8px !important; }
.btn-secondary, .btn-outline { background:#FFFFFF !important; border:1px solid var(--border-strong) !important; }
.btn-secondary:hover, .btn-outline:hover { background:#F7F8FB !important; border-color:#C7CBDA !important; }
.btn-ghost { color:#3A3F52 !important; }
.btn-ghost:hover { background:#F1F2F7 !important; color:var(--text-main) !important; }
.btn-dark { background:#26294A !important; color:#FFFFFF !important; border:1px solid #26294A !important; border-radius:8px !important; }
.btn-dark:hover { background:#1E2140 !important; border-color:#1E2140 !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:#4283F4 !important; color:#FFFFFF !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:#3A3F52 !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:#3A3F52 !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:#FFFFFF !important; border:1px solid var(--border-strong) !important; color:var(--text-main) !important; border-radius:8px !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:#C7CBDA !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:#FFFFFF !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,#EEF0F6 25%,#F7F8FB 37%,#EEF0F6 63%) !important; background-size:400% 100% !important; }

/* Mobile bottom nav */
.mobile-bottom-nav { background:#FFFFFF !important; border-top:1px solid var(--border-color) !important; }
.mobile-bottom-nav a { color:var(--sidebar-muted) !important; }
.mobile-bottom-nav a.active { color:#4283F4 !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:8px; background:var(--logo-grad); color:#FFFFFF; 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:#FFFFFF; cursor:pointer; padding:4px 4px; border-radius:8px; transition:background .12s var(--ease); letter-spacing:-0.01em; }
.cio-tb-ws:hover { background:rgba(255,255,255,0.06); }
.cio-tb-ws svg { color:rgba(255,255,255,0.65); }
.cio-tb-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#FFFFFF; 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:#8FB8F9; }
.cio-tb-upgrade { display:inline-flex; align-items:center; background:#4283F4; color:#FFFFFF; font-weight:600; font-size:13px; border:none; padding:7px 14px; border-radius:8px; cursor:pointer; text-decoration:none; transition:background .15s; white-space:nowrap; margin-right:4px; }
.cio-tb-upgrade:hover { background:#3372E0; }
.cio-tb-help { display:flex; align-items:center; gap:5px; font-size:13px; color:rgba(255,255,255,0.65); cursor:pointer; text-decoration:none; padding:0 8px; white-space:nowrap; }
.cio-tb-help svg { color:rgba(255,255,255,0.65); }
.cio-tb-help:hover, .cio-tb-help:hover svg { color:#FFFFFF; }
.cio-tb-gear { display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:rgba(255,255,255,0.85); border:none; border-radius:8px; cursor:pointer; text-decoration:none; transition:background .12s, color .12s; }
.cio-tb-gear:hover { background:rgba(255,255,255,0.10); color:#FFFFFF; }
.cio-tb-gear:active { background:rgba(255,255,255,0.14); }
/* 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:rgba(255,255,255,0.85); border:none; border-radius:8px; 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:rgba(255,255,255,0.10); color:#FFFFFF; }
/* avatar in the bar (override the dark inline gradient) */
.top-header .header-right .user-avatar { background:var(--logo-grad) !important; color:#FFFFFF !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:rgba(255,255,255,0.65); text-decoration:none; }

/* Notification panel — light popover */
#notif-panel { border-radius:12px !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:#2563EB !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:#FFFFFF !important; }
.top-header .cio-tb-chip, .top-header .vx-ws-chip { color:#FFFFFF !important; }
.top-header .cio-tb-help, .top-header .cio-tb-help span { color:rgba(255,255,255,0.65) !important; }
.top-header .cio-tb-help:hover, .top-header .cio-tb-help:hover span, .top-header .cio-tb-help:hover svg { color:#FFFFFF !important; }
.top-header .cio-tb-gear, .top-header .cio-tb-icobtn { color:rgba(255,255,255,0.85) !important; }
.top-header .cio-tb-gear:hover, .top-header .cio-tb-icobtn:hover { color:#FFFFFF !important; }
.top-header .cio-tb-upgrade { color:#FFFFFF !important; }

/* notification panel items — light menu rows */
#notif-list > div { border-radius:8px !important; margin-bottom:0 !important; border-bottom:1px solid var(--border-color) !important; color:#3A3F52 !important; }
#notif-list > div:last-child { border-bottom:none !important; }
#notif-list > div:hover { background:#F7F8FB !important; }
#notif-list > div[style*="border-left"] { border-left-color:#4283F4 !important; }

/* ============================================================================
   Quotation Builder — white cards, BLUE stepper on light
   ============================================================================ */
.stepper { background:#FFFFFF !important; border:1px solid var(--border-color) !important; border-radius:12px !important; box-shadow:var(--shadow-card) !important; }
.step { transition: all .22s cubic-bezier(.16,1,.3,1) !important; }
.step:hover { background: #F7F8FB !important; }
.step.active {
  background: rgba(66,131,244,0.10) !important;
  color:#161A2B !important;
  box-shadow: inset 0 0 0 1px rgba(66,131,244,0.30) !important;
}
.step.active .step-label { color:#161A2B !important; }
.step.active .step-sublabel { color:#6B7280 !important; }
.step-circle { transition: all .25s cubic-bezier(.16,1,.3,1) !important; border-color:var(--border-strong) !important; background:#FFFFFF !important; color:#6B7280 !important; }
.step .step-label { color:#6B7280 !important; }
.step.active .step-circle {
  border-color:#4283F4 !important; background:#4283F4 !important; color:#fff !important;
  box-shadow: 0 0 0 4px rgba(66,131,244,0.18) !important; transform: scale(1.05);
}
.step.completed { color:#2563EB !important; }
.step.completed .step-label { color:#161A2B !important; }
.step.completed .step-circle { border-color:#4283F4 !important; background:#4283F4 !important; color:#fff !important; }
.step.completed + .step::before, .step.completed::after { background:#4283F4 !important; }
.stepper-title { color:#9AA0AE !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:#F6F7FA !important; }
.wz-card { background:#FFFFFF !important; border:1px solid var(--border-color) !important; border-radius:12px !important; box-shadow:var(--shadow-card) !important; }
.wz-title { color:#161A2B !important; }
.wz-subtitle { color:#6B7280 !important; }
.wz-stat { background:#FFFFFF !important; border:1px solid var(--border-color) !important; border-radius:12px !important; }
.wz-stat-value { color:#161A2B !important; }
.wz-stat-label { color:#6B7280 !important; }
.wz-box, .wz-subbox { background:#F1F2F7 !important; border-radius:10px !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(20,25,50,0.18);
  }
  .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:28px; height:28px; border-radius:8px; background:var(--logo-grad); color:#FFFFFF; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.vx-tb-logo svg { width:17px; height:17px; }
.top-header .vx-tb-name, .vx-tb-name { color:#FFFFFF !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:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.08); color:#FFFFFF !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:rgba(255,255,255,0.16); }
.vx-tb-ws-chev { display:inline-flex; color:rgba(255,255,255,0.70); }
.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:8px; color:rgba(255,255,255,0.85) !important; cursor:pointer; background:transparent; border:0; }
.vx-tb-apps:hover, .vx-tb-ico:hover { background:rgba(255,255,255,0.12); color:#FFFFFF !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:#2563EB !important; font-weight:600; }
.sidebar-link.child-active svg { color:#4283F4 !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(20,25,50,0.18); }
  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 (#F7F8FB on #F7F8FB). 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(66,131,244,0.30); }
::-moz-selection { background: rgba(66,131,244,0.30); }