/* ===== Velorin Vision Polish — additive, app-wide (loaded after the shell) =====
   Zero-risk: refines the existing design system and adds phone/tablet/split responsiveness
   on top of the current classes. Does not replace anything. */

:root{
  --bg:#07111d;--panel:#101b29;--panel2:#132235;--line:#26394f;--text:#f4f7fb;--muted:#8ca1b7;
  --blue:#2f8cff;--green:#42d455;--yellow:#ffd166;--red:#ff5757;--orange:#ff9d20;--purple:#a86bff;--cyan:#26c6da;
  --shadow:0 16px 42px rgba(0,0,0,.30);
}

/* consistent gradient cards + lift on hover across every module */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.kpi,.tile{transition:transform .12s ease,border-color .12s ease}
.kpi:hover,.tile:hover{transform:translateY(-2px);border-color:var(--blue)}

/* donut hole + legend polish (works with the existing conic-gradient donuts) */
.donut{position:relative}
.legend .sw,.sw{border-radius:3px}

/* progress bars unified */
.bar{background:#23364a;border-radius:8px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:8px}

/* tables: consistent + never overflow the frame on small screens */
table{width:100%;border-collapse:collapse}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== RESPONSIVE — phone / tablet / split-window ===== */
@media (max-width:1200px){
  .kpis{grid-template-columns:repeat(4,1fr)!important}
}
@media (max-width:960px){
  .kpis{grid-template-columns:repeat(3,1fr)!important}
  /* any 2-column dashboard row stacks */
  .grid.main,.grid.two,.split2{grid-template-columns:1fr!important}
}
@media (max-width:680px){
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  .grid{grid-template-columns:1fr!important}
  .donutRow{grid-template-columns:1fr!important}
  table{font-size:12px}
}
@media (max-width:440px){
  .kpis{grid-template-columns:1fr!important}
}

/* long KPI money values were clipping the card — keep them on one line and fit */
.kpi .v,.kpi .val,.kpi .big{white-space:nowrap;letter-spacing:-.4px;font-size:19px!important;line-height:1.15}
.kpi{overflow:hidden}
.kpi .lbl,.kpi .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== LIGHT MODE — baby-blue canvas + real contrast so nothing washes out ===== */
:root[data-theme="light"]{
  --bg:#e7f0fb; --panel:#ffffff; --panel2:#f3f8ff; --line:#c4d5ea;
  --text:#12283f; --muted:#48607a; --shadow:0 10px 26px rgba(28,58,100,.12);
}
[data-theme="light"] body,[data-theme="light"] #app,[data-theme="light"] .app{background:#e7f0fb!important}
/* cards/tiles/panels: white, tinted top, clearly bordered so they separate from the canvas */
[data-theme="light"] .card,[data-theme="light"] .kpi,[data-theme="light"] .metricCard,[data-theme="light"] .panel,[data-theme="light"] .bpanel,[data-theme="light"] .quick button{
  background:linear-gradient(180deg,#ffffff,#f3f8ff)!important;border:1px solid #c9d8ec!important;box-shadow:0 6px 16px rgba(28,58,100,.08)!important}
/* headings, numbers, bold values → dark & readable (overrides the dark-theme light hexes) */
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,[data-theme="light"] h4,
[data-theme="light"] .kpi h3,[data-theme="light"] .kpi .k,[data-theme="light"] .kpi .lbl,[data-theme="light"] .kpi .title,
[data-theme="light"] .num,[data-theme="light"] .v,[data-theme="light"] .val,[data-theme="light"] .metricCard h3,
[data-theme="light"] .card h3,[data-theme="light"] .panel h3,[data-theme="light"] b,[data-theme="light"] strong{color:#12283f!important}
/* secondary/muted labels → readable slate (was near-white) */
[data-theme="light"] .muted,[data-theme="light"] .small,[data-theme="light"] .s,[data-theme="light"] .k,[data-theme="light"] .sub,
[data-theme="light"] .crumb,[data-theme="light"] .legend,[data-theme="light"] th{color:#48607a!important}
/* my custom hero + exec/job panels are hardcoded dark — repaint them light so they aren't dark islands */
[data-theme="light"] .vz-hcard,[data-theme="light"] .vz-cc-curve{background:linear-gradient(180deg,#ffffff,#f3f8ff)!important;border-color:#c9d8ec!important}
[data-theme="light"] .vz-cc-curve div{color:#12283f}
[data-theme="light"] .vz-hcard-t,[data-theme="light"] .vz-donut-c b{color:#12283f!important}
[data-theme="light"] .vz-donut-hole{background:#f3f8ff!important}
[data-theme="light"] .tblwrap,[data-theme="light"] table{color:#12283f}
[data-theme="light"] tr{border-color:#dce6f3}
/* keep the left nav + topbar from disappearing */
[data-theme="light"] .item.active{background:#dcebff!important}
[data-theme="light"] input,[data-theme="light"] select{background:#fff!important;color:#12283f!important;border-color:#c4d5ea!important}
/* catch faint hardcoded TEXT hexes used inline by custom section labels (dark-theme light greys) */
[data-theme="light"] [style*="color:#cdd9e6"],[data-theme="light"] [style*="color:#dbe6f2"]{color:#3a4c62!important}