/* =========================================================================
   Workforce Hub — "Inside the platform" showcase
   A faithful, scaled-down replica of the real Centrecom MIS app:
   white top bar + white accordion sidebar + light content, framed in a
   browser window. Every screen shares ONE fixed-size frame. Palette mirrors
   the product's Tailwind theme (primary = #2eb2ff cyan, secondary = slate).
   Scoped under `.cv-`.
   ========================================================================= */

:root {
  --cvp-50:#e8f6ff; --cvp-100:#c5eaf9; --cvp-200:#9dd9f3; --cvp-300:#73cdf1;
  --cvp-400:#4dc0ee; --cvp-500:#2eb2ff; --cvp-600:#1a9fe8; --cvp-700:#0d8cd1;
  --cvp-800:#0577b8; --cvp-900:#00649e;
  --cvs-50:#f7f8f9; --cvs-100:#eceef0; --cvs-200:#d9dde1; --cvs-300:#c0c5ca;
  --cvs-400:#a5aab0; --cvs-500:#85898d; --cvs-600:#74787d; --cvs-700:#5a5e62;
  --cvs-800:#434749; --cvs-900:#2d3a48;
}

.cv-window {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(79, 139, 255, 0.16);
  box-shadow: 0 40px 90px rgba(2, 8, 23, 0.55);
  margin-top: 34px;
}

/* ---- slim browser chrome ---- */
.cv-chrome {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  background: #e9edf2;
  border-bottom: 1px solid #d9dde1;
}
.cv-lights { display: flex; gap: 6px; flex-shrink: 0; }
.cv-lights span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cv-lights span:nth-child(2) { background: #febc2e; }
.cv-lights span:nth-child(3) { background: #28c840; }
.cv-address {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  background: #fff; border: 1px solid #d9dde1; border-radius: 7px;
  padding: 5px 12px; font-family: 'Inter', monospace; font-size: 0.74rem;
  color: var(--cvs-500); white-space: nowrap; overflow: hidden; max-width: 520px;
  margin-inline: auto;
}
.cv-address .cv-lock { font-size: 0.7rem; }
.cv-address .cv-host { color: var(--cvs-700); }
.cv-address .cv-route { color: var(--cvp-700); font-weight: 600; }
.cv-chrome-act { color: var(--cvs-400); flex-shrink: 0; display: inline-flex; }
.cv-chrome-act svg { width: 15px; height: 15px; }

/* ---- app shell ---- */
.cv-app { display: flex; flex-direction: column; background: #fff; }

/* top bar */
.cv-appbar {
  height: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: #fff; border-bottom: 1px solid var(--cvp-100);
}
.cv-logo { display: inline-flex; align-items: center; gap: 9px; }
.cv-logo-pearl {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, #ffffff, #e2d2ff 38%, #a38be6 68%, #7c5fd6 100%);
  box-shadow: 0 2px 8px rgba(124, 95, 214, 0.4), inset 0 1px 2px rgba(255,255,255,0.7);
}
.cv-logo b { font-size: 1.08rem; font-weight: 800; color: var(--cvs-900); letter-spacing: -0.01em; }
.cv-logo b span { color: var(--cvp-600); }
.cv-appbar-r { display: flex; align-items: center; gap: 10px; }
.cv-dt {
  font-family: 'Inter', monospace; font-size: 0.72rem; color: var(--cvs-700);
  background: #fff; border: 1px solid var(--cvp-100); box-shadow: 0 1px 2px rgba(2,8,23,.05);
  padding: 5px 12px; border-radius: 99px; letter-spacing: 0.02em; white-space: nowrap;
}
.cv-appbar-ic { position: relative; color: var(--cvs-500); display: inline-flex; padding: 4px; }
.cv-appbar-ic svg { width: 19px; height: 19px; }
.cv-bell-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cvp-500); border: 1.5px solid #fff; }
.cv-online {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 600; color: var(--cvs-700);
  background: #fff; border: 1px solid #bbf7d0; box-shadow: 0 1px 2px rgba(2,8,23,.05);
  padding: 5px 12px; border-radius: 99px;
}
.cv-ping { position: relative; display: inline-flex; width: 9px; height: 9px; }
.cv-ping span:first-child { position: absolute; inset: 0; border-radius: 50%; background: #4ade80; opacity: .75; animation: cvPing 1.6s cubic-bezier(0,0,.2,1) infinite; }
.cv-ping span:last-child { position: relative; display: inline-flex; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
@keyframes cvPing { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.cv-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 9px; }
.cv-user-ava {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cvp-500), var(--cvp-700));
  color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center;
}
.cv-user-meta b { display: block; font-size: 0.76rem; font-weight: 600; color: var(--cvs-800); line-height: 1.1; }
.cv-user-meta small { font-size: 0.62rem; color: var(--cvp-700); font-weight: 600; }
.cv-user-cv { width: 15px; height: 15px; color: var(--cvs-400); }

/* main = sidebar + content, FIXED HEIGHT so every screen is identical */
.cv-appmain { display: flex; height: 544px; }

/* ---- sidebar (white accordion) ---- */
.cv-side {
  width: 236px; flex-shrink: 0; background: #fff;
  border-right: 1px solid var(--cvp-100);
  overflow-y: auto; padding: 8px;
}
.cv-side::-webkit-scrollbar { width: 8px; }
.cv-side::-webkit-scrollbar-thumb { background: var(--cvp-100); border-radius: 99px; }
.cv-side-group {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  color: var(--cvs-700); transition: background .15s, color .15s;
}
.cv-side-group:not(.static):hover { background: var(--cvp-50); }
.cv-side-group.static { cursor: default; }
.cv-side-group.is-active { background: var(--cvp-50); }
.cv-side-ic { display: inline-grid; place-items: center; color: var(--cvs-500); flex-shrink: 0; }
.cv-side-ic svg { width: 18px; height: 18px; }
.cv-side-group.is-active .cv-side-ic { color: var(--cvp-600); }
.cv-side-lbl { flex: 1; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.cv-side-group.is-active .cv-side-lbl { color: var(--cvp-700); }
.cv-side-caret { color: var(--cvs-400); display: inline-flex; transition: transform .2s; transform: rotate(0deg); }
.cv-side-caret svg { width: 15px; height: 15px; }
.cv-side-group:not(.is-collapsed) .cv-side-caret { transform: rotate(90deg); }   /* open = caret down */
.cv-side-group.leaf { cursor: pointer; }

.cv-side-children { display: none; padding: 2px 0 6px 16px; margin-left: 8px; border-left: 1px solid var(--cvp-100); }
.cv-side-children.is-open { display: block; }
.cv-side-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border-radius: 8px; border: 0; background: transparent;
  font-size: 0.78rem; font-weight: 500; color: var(--cvs-700); cursor: pointer;
  text-align: start; transition: background .15s, color .15s;
}
.cv-side-item.static { cursor: default; color: var(--cvs-500); }
.cv-side-item:not(.static):hover { background: var(--cvp-50); color: var(--cvp-700); }
.cv-side-item.is-active { background: var(--cvp-100); color: var(--cvp-800); font-weight: 600; }
.cv-side-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cvs-300); flex-shrink: 0; }
.cv-side-item.is-active .cv-side-dot { background: var(--cvp-600); }
.cv-side-foot { margin-top: 10px; padding: 12px 6px 6px; border-top: 1px solid var(--cvs-100); text-align: center; font-size: 0.66rem; color: var(--cvs-400); }

/* ---- content ---- */
.cv-appcontent { flex: 1; min-width: 0; background: #f4f7fa; padding: 16px; overflow-y: auto; }
.cv-appcontent::-webkit-scrollbar { width: 9px; }
.cv-appcontent::-webkit-scrollbar-thumb { background: #d9dde1; border-radius: 99px; }
.cv-view { display: flex; flex-direction: column; gap: 13px; }
.cv-view[hidden] { display: none; }

.cv-view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cv-view-title { display: flex; align-items: center; gap: 10px; }
.cv-view-title .cv-ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--cvp-500), var(--cvp-700));
}
.cv-view-title .cv-ic svg { width: 18px; height: 18px; }
.cv-view-title h3 { font-size: 1.0rem; font-weight: 700; color: var(--cvs-900); line-height: 1.1; }
.cv-view-title p { font-size: 0.72rem; color: var(--cvs-500); margin-top: 2px; }
.cv-now { font-size: 0.7rem; color: var(--cvs-500); font-weight: 500; }
.cv-now#cvUpdated, .cv-now#cvLiveCalls { color: var(--cvp-700); font-weight: 600; }

/* ---- toolbar ---- */
.cv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--cvs-200); background: #fff; border-radius: 8px;
  font-size: 0.74rem; color: var(--cvs-700); font-weight: 500; white-space: nowrap;
}
.cv-chip b { color: var(--cvs-900); font-weight: 600; }
.cv-chip.accent { border-color: var(--cvp-200); background: var(--cvp-50); color: var(--cvp-800); }
.cv-chip.amber  { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.cv-chip.cyan   { border-color: #a5f3fc; background: #ecfeff; color: #0e7490; }
.cv-chip.green  { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.cv-seg { display: inline-flex; background: var(--cvs-100); border-radius: 9px; padding: 3px; gap: 2px; }
.cv-seg button, .cv-tab {
  border: 0; background: transparent; cursor: pointer; font-size: 0.72rem; font-weight: 600;
  color: var(--cvs-600); padding: 5px 11px; border-radius: 7px; transition: all .15s;
}
.cv-seg button.is-active, .cv-tab.is-active {
  background: #fff; color: var(--cvp-700); box-shadow: 0 1px 3px rgba(2,8,23,.12);
}
.cv-spacer { flex: 1; }
.cv-search {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; min-width: 160px;
  border: 1px solid var(--cvs-200); background: #fff; border-radius: 8px; color: var(--cvs-400); font-size: 0.74rem;
}
.cv-search svg { width: 14px; height: 14px; }

/* ---- KPI cards ---- */
.cv-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cv-kpi {
  background: #fff; border: 1px solid var(--cvs-100); border-radius: 12px; padding: 11px 13px;
  position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(2,8,23,.04);
}
.cv-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cvs-300); }
.cv-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.cv-kpi-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cvs-500); font-weight: 700; }
.cv-kpi-trend { font-size: 0.6rem; font-weight: 700; }
.cv-kpi-trend.up { color: #16a34a; }
.cv-kpi-trend.down { color: #dc2626; }
.cv-kpi-val { font-size: 1.4rem; font-weight: 800; color: var(--cvs-900); margin-top: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cv-kpi-sub { font-size: 0.6rem; color: var(--cvs-400); margin-top: 1px; }
.cv-kpi.k-slate::before  { background: var(--cvs-500); }
.cv-kpi.k-sky::before    { background: var(--cvp-500); } .cv-kpi.k-sky .cv-kpi-val    { color: var(--cvp-800); }
.cv-kpi.k-orange::before { background: #f97316; } .cv-kpi.k-orange .cv-kpi-val { color: #c2410c; }
.cv-kpi.k-emerald::before{ background: #10b981; } .cv-kpi.k-emerald .cv-kpi-val{ color: #047857; }
.cv-kpi.k-blue::before   { background: var(--cvp-600); } .cv-kpi.k-blue .cv-kpi-val   { color: var(--cvp-800); }
.cv-kpi.k-violet::before { background: #8b5cf6; } .cv-kpi.k-violet .cv-kpi-val { color: #6d28d9; }
.cv-kpi.k-green::before  { background: #22c55e; } .cv-kpi.k-green .cv-kpi-val  { color: #15803d; }
.cv-kpi.k-gray::before   { background: var(--cvs-400); }

/* ---- panels & grids ---- */
.cv-panel { background: #fff; border: 1px solid var(--cvs-100); border-radius: 12px; box-shadow: 0 1px 2px rgba(2,8,23,.04); overflow: hidden; }
.cv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cvs-100); }
.cv-panel-head h4 { font-size: 0.8rem; font-weight: 700; color: var(--cvs-800); }
.cv-panel-head .cv-mini { font-size: 0.66rem; color: var(--cvs-400); font-weight: 500; }
.cv-panel-body { padding: 14px; }
.cv-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.cv-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cv-grid-rev { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }

/* ---- tables ---- */
.cv-tbl-wrap { overflow: auto; }
.cv-tbl { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.cv-tbl thead th {
  text-align: start; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--cvs-500); font-weight: 700; padding: 8px 10px;
  background: var(--cvs-50); border-bottom: 1px solid var(--cvs-100); white-space: nowrap;
}
.cv-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid var(--cvs-50); color: var(--cvs-700); white-space: nowrap; }
.cv-tbl tbody tr:last-child td { border-bottom: 0; }
.cv-tbl tbody tr:hover { background: var(--cvp-50); }
.cv-num { font-variant-numeric: tabular-nums; }
.cv-staff { font-weight: 600; color: var(--cvs-800); }
.cv-row-sel { background: var(--cvp-50) !important; box-shadow: inset 3px 0 0 var(--cvp-600); }
.cv-code { font-family: 'Inter', monospace; font-size: 0.68rem; background: var(--cvs-100); color: var(--cvs-700); padding: 1px 6px; border-radius: 5px; }
.cv-proj { font-size: 0.66rem; background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; padding: 1px 7px; border-radius: 99px; font-weight: 600; }
.cv-pos { color: #15803d; font-weight: 700; }
.cv-neg { color: #b91c1c; font-weight: 700; }
.cv-warn-cell { color: #b91c1c; font-weight: 700; }
.cv-rev { color: #15803d; font-weight: 700; }
.cv-late-red { color: #dc2626; font-weight: 700; }
.cv-late-orange { color: #ea580c; font-weight: 700; }
.cv-late-green { color: #16a34a; font-weight: 600; }

/* badges */
.cv-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.64rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; }
.cv-badge.b-red      { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.cv-badge.b-orange   { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.cv-badge.b-blue     { background: var(--cvp-50); color: var(--cvp-800); border-color: var(--cvp-200); }
.cv-badge.b-gray     { background: var(--cvs-100); color: var(--cvs-700); border-color: var(--cvs-200); }
.cv-badge.b-green    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cv-badge.b-pending  { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.cv-badge.b-approved { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cv-badge.b-confirmed{ background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.cv-badge.b-rejected { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* row actions */
.cv-actions { display: inline-flex; align-items: center; gap: 5px; }
.cv-act { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--cvs-100); color: var(--cvs-600); }
.cv-act svg { width: 13px; height: 13px; }
.cv-act.ok { background: #dcfce7; color: #16a34a; }
.cv-act.no { background: #fee2e2; color: #dc2626; }
.cv-unread { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--cvp-600); color: #fff; font-size: 0.6rem; font-weight: 700; display: inline-grid; place-items: center; }
.cv-team td:first-child { box-shadow: inset 3px 0 0 var(--cvp-600); }
.cv-team { background: var(--cvp-50); }

/* stats line */
.cv-stats { font-size: 0.72rem; color: var(--cvs-500); }
.cv-stats b { color: var(--cvs-900); font-variant-numeric: tabular-nums; }
.cv-stats .s-green { color: #16a34a; } .cv-stats .s-emerald { color: #059669; }
.cv-stats .s-red { color: #dc2626; } .cv-stats .s-yellow { color: #ca8a04; }
.cv-stats .sep { color: var(--cvs-300); margin: 0 6px; }

/* ---- live volume chart ---- */
.cv-chart-live svg { width: 100%; height: 132px; display: block; }
#cvSparkFill { fill: url(#cvGrad); }
#cvSparkLine { fill: none; stroke: var(--cvp-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---- donut (conic) ---- */
.cv-pie-wrap { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.cv-pie { position: relative; width: 116px; height: 116px; border-radius: 50%; }
.cv-pie::after { content: ''; position: absolute; inset: 23%; border-radius: 50%; background: #fff; }
.cv-pie-lbl { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; }
.cv-pie-lbl b { font-size: 1.2rem; font-weight: 800; color: var(--cvs-900); display: block; line-height: 1; }
.cv-pie-lbl small { font-size: 0.56rem; color: var(--cvs-400); text-transform: uppercase; letter-spacing: 0.07em; }
.cv-donut-wrap { display: flex; align-items: center; gap: 16px; }
.cv-donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.72rem; }
.cv-donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--cvs-600); }
.cv-donut-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cv-donut-legend b { color: var(--cvs-900); margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ---- heatmap ---- */
.cv-heat { display: flex; flex-direction: column; gap: 4px; }
.cv-heat-hours { display: grid; grid-template-columns: 38px repeat(6, 1fr); font-size: 0.58rem; color: var(--cvs-400); }
.cv-heat-row { display: grid; grid-template-columns: 38px repeat(12, 1fr); align-items: center; gap: 4px; }
.cv-heat-day { font-size: 0.62rem; color: var(--cvs-400); font-weight: 600; }
.cv-heat-cell { height: 18px; border-radius: 4px; background: rgba(13, 140, 209, calc(0.10 + var(--v) * 0.82)); }

/* ---- bar charts ---- */
.cv-bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding-top: 6px; }
.cv-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.cv-bar-set { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.cv-bar { width: 16px; border-radius: 4px 4px 0 0; }
.cv-bar.b-indigo { background: #6366f1; }
.cv-bar.b-amber  { background: #f59e0b; }
.cv-bar.b-emerald{ background: #10b981; }
.cv-bar-label { font-size: 0.62rem; color: var(--cvs-600); font-weight: 600; }

/* ---- period legend cards ---- */
.cv-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cv-period { background: #fff; border: 1px solid var(--cvs-100); border-radius: 12px; padding: 12px 14px; border-top: 3px solid var(--cvs-300); box-shadow: 0 1px 2px rgba(2,8,23,.04); }
.cv-period.p-indigo  { border-top-color: #6366f1; }
.cv-period.p-amber   { border-top-color: #f59e0b; }
.cv-period.p-emerald { border-top-color: #10b981; }
.cv-period-role { display: flex; align-items: center; gap: 7px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--cvs-400); }
.cv-period-role i { width: 9px; height: 9px; border-radius: 50%; }
.cv-period.p-indigo i { background: #6366f1; }
.cv-period.p-amber i { background: #f59e0b; }
.cv-period.p-emerald i { background: #10b981; }
.cv-period-range { font-size: 0.92rem; font-weight: 700; color: var(--cvs-900); margin-top: 6px; }
.cv-period-meta { font-size: 0.66rem; color: var(--cvs-600); margin-top: 4px; display: flex; gap: 12px; }
.cv-period-meta b { color: var(--cvs-800); }

/* ---- schedule shift pills ---- */
.cv-sched-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.7rem; color: var(--cvs-500); }
.cv-sched-meta b { color: var(--cvs-900); }
.cv-onshift { display: inline-flex; align-items: center; gap: 6px; color: #047857; font-weight: 700; }
.cv-onshift i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: cvPing 1.8s infinite; }
.cv-sched th.cv-today, .cv-sched td.cv-today { background: #fffbeb; }
.cv-sched th.cv-today { color: #b45309; }
.cv-today-tag { font-size: 0.5rem; font-weight: 800; background: #fde68a; color: #92400e; padding: 1px 4px; border-radius: 3px; margin-inline-start: 4px; }
.cv-day-sub { font-size: 0.58rem; color: var(--cvs-400); font-weight: 400; display: block; }
.cv-shift { display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.cv-shift .cv-shift-n { font-size: 0.54rem; font-weight: 700; background: #fef3c7; color: #b45309; border-radius: 99px; padding: 0 5px; }
.cv-shift.s-morning   { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.cv-shift.s-day       { background: var(--cvp-50); color: var(--cvp-800); border-color: var(--cvp-200); }
.cv-shift.s-afternoon { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cv-shift.s-evening   { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.cv-shift.s-night     { background: var(--cvs-100); color: var(--cvs-800); border-color: var(--cvs-300); }
.cv-shift.s-overnight { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.cv-shift.s-off { background: transparent; color: var(--cvs-300); border-color: transparent; font-weight: 500; }
.cv-tag { font-size: 0.58rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.cv-tag.t-sick { background: #fee2e2; color: #b91c1c; }
.cv-tag.t-late { background: #ffedd5; color: #c2410c; }
.cv-tag.t-awol { background: #fee2e2; color: #991b1b; }
.cv-tag.t-personal { background: #faf5ff; color: #7e22ce; }
.cv-cell-resigned { background: #fef2f2; }
.cv-cell-resigned .cv-tag { background: #fecaca; color: #991b1b; }

/* ---- live toast ---- */
.cv-toast {
  position: absolute; right: 18px; bottom: 18px;
  background: var(--cvs-900); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; box-shadow: 0 12px 30px rgba(2,8,23,.4);
  opacity: 0; transform: translateY(12px); pointer-events: none; z-index: 5;
}
.cv-toast.cv-toast-show { animation: cvToast 4s ease forwards; }
@keyframes cvToast { 0% { opacity: 0; transform: translateY(12px); } 10% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---- flash + row-in ---- */
.cv-flash { animation: cvFlash 1s ease; }
@keyframes cvFlash { 0% { background-color: rgba(46, 178, 255, 0.26); } 100% { background-color: transparent; } }
.cv-rowin { animation: cvRowIn .55s ease; }
@keyframes cvRowIn { 0% { background-color: rgba(34, 197, 94, 0.22); transform: translateY(-4px); } 100% { background-color: transparent; transform: none; } }

/* ---- caption strip ---- */
.cv-captions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.cv-cap { border: 1px solid var(--border-pearl); border-radius: 12px; padding: 13px 14px; background: var(--surface-glass); }
.cv-cap h5 { font-size: 0.82rem; color: var(--text-primary); margin-bottom: 4px; font-weight: 700; }
.cv-cap code { font-family: 'Inter', monospace; font-size: 0.62rem; color: #4F8BFF; }
.cv-cap p { font-size: 0.74rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
  .cv-kpis { grid-template-columns: repeat(3, 1fr); }
  .cv-grid-2, .cv-grid-rev, .cv-grid-3, .cv-periods { grid-template-columns: 1fr; }
  .cv-captions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cv-side { display: none; }
  .cv-appmain { height: 500px; }
  .cv-user-meta { display: none; }
  .cv-dt { display: none; }
}
@media (max-width: 560px) {
  .cv-kpis { grid-template-columns: repeat(2, 1fr); }
  .cv-captions { grid-template-columns: 1fr; }
  .cv-address .cv-host { display: none; }
}