/* =====================================================================
   Unified stat-card look — makes the older .vyo-stat-card / .vm-stat-card
   match the compact ".kpi-card" design used on the Sales Return Summary
   page (white, soft shadow, colored LEFT accent bar, small round icon,
   uppercase label, bold value) and normalizes the accent palette to the
   kpi teal / amber / green / red set.

   Loaded last via navbar.html so it wins over each page's inline card CSS
   without editing those pages' HTML or JS. Restyle-in-place only — no
   metric, id, or markup changes.
   ===================================================================== */

/* ---- Card shell -------------------------------------------------- */
.vyo-stat-card,
.vm-stat-card {
  background: #ffffff !important;
  border: none !important;
  border-left: 4px solid #17736b !important;   /* default accent (overridden per type below) */
  border-radius: 10px !important;
  padding: 10px 14px !important;
  width: 170px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.vyo-stat-card:hover,
.vm-stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.18) !important;
}

/* ---- Icon (round) ------------------------------------------------ */
.vyo-stat-icon,
.vm-stat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.vyo-stat-icon i,
.vm-stat-icon i {
  font-size: 13px !important;
}

/* ---- Value + label ---------------------------------------------- */
.vyo-stat-val,
.vm-stat-val {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #1e293b !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}
.vyo-stat-label,
.vm-stat-label {
  font-size: 9.5px !important;
  letter-spacing: 0.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}

/* =====================================================================
   Accent palette — grouped by semantic meaning into the kpi set.
   Each group sets the card's left border, the icon circle background,
   and the icon glyph color.
   ===================================================================== */

/* --- TEAL: totals / neutral / active / in-progress / info ---------- */
.vyo-stat-card:has(.si-total),   .vm-stat-card:has(.si-total),
.vyo-stat-card:has(.si-active),  .vm-stat-card:has(.si-active),
.vyo-stat-card:has(.si-superactive),
.vyo-stat-card:has(.si-read),
.vyo-stat-card:has(.si-biz),
.vyo-stat-card:has(.si-city),
.vyo-stat-card:has(.si-inprogress),
.vyo-stat-card:has(.si-salespersons),
.vyo-stat-card:has(.si-product),   .vm-stat-card:has(.si-product),
.vyo-stat-card:has(.si-ptype),     .vm-stat-card:has(.si-ptype),
.vyo-stat-card:has(.si-today),
.vyo-stat-card:has(.si-fresh) {
  border-left-color: #17736b !important;
}
.si-total, .si-active, .si-superactive, .si-read, .si-biz, .si-city,
.si-inprogress, .si-salespersons, .si-product, .si-ptype, .si-today,
.si-fresh {
  background: #dcefec !important;
}
.si-total i, .si-active i, .si-superactive i, .si-read i, .si-biz i,
.si-city i, .si-inprogress i, .si-salespersons i, .si-product i,
.si-ptype i, .si-today i, .si-fresh i {
  color: #0f736b !important;
}

/* --- AMBER: pending / waiting / warning / non-progress ------------- */
.vyo-stat-card:has(.si-pending),
.vyo-stat-card:has(.si-waiting),
.vyo-stat-card:has(.si-warn),
.vyo-stat-card:has(.si-state),
.vyo-stat-card:has(.si-nonprogress) {
  border-left-color: #d97706 !important;
}
.si-pending, .si-waiting, .si-warn, .si-state, .si-nonprogress {
  background: #fef3c7 !important;
}
.si-pending i, .si-waiting i, .si-warn i, .si-state i, .si-nonprogress i {
  color: #d97706 !important;
}

/* --- GREEN: approved / completed / success ------------------------ */
.vyo-stat-card:has(.si-approved),
.vyo-stat-card:has(.si-complete),
.vyo-stat-card:has(.si-completed),
.vyo-stat-card:has(.si-success),
.vyo-stat-card:has(.si-closed) {
  border-left-color: #0ca678 !important;
}
.si-approved, .si-complete, .si-completed, .si-success, .si-closed {
  background: #e6fcf5 !important;
}
.si-approved i, .si-complete i, .si-completed i, .si-success i,
.si-closed i {
  color: #0ca678 !important;
}

/* --- RED: inactive / danger / failure / overdue ------------------- */
.vyo-stat-card:has(.si-inactive),
.vyo-stat-card:has(.si-danger),
.vyo-stat-card:has(.si-failure),
.vyo-stat-card:has(.si-overdue),
.vyo-stat-card:has(.si-dept) {
  border-left-color: #dc2626 !important;
}
.si-inactive, .si-danger, .si-failure, .si-overdue, .si-dept {
  background: #fef2f2 !important;
}
.si-inactive i, .si-danger i, .si-failure i, .si-overdue i, .si-dept i {
  color: #dc2626 !important;
}

/* ---- Fallback for browsers without :has() -----------------------
   If :has() isn't supported, cards keep the default teal left border
   (set on the shell above) and the icon colors from the groups still
   apply, so the look stays consistent and readable. */

/* =====================================================================
   PDC pages use their own card systems (.pdc-summary-card on PDC Update,
   .pdc-dash-card on PDC Hand Status). Bring both into the same compact
   kpi look: white, soft shadow, colored LEFT accent, round icon,
   uppercase label, bold value. Off-palette accents (indigo/sky/purple)
   are normalized to the kpi teal/amber/green/red set.
   ===================================================================== */

/* ---- PDC Update: .pdc-summary-card ------------------------------- */
.pdc-summary-card {
  border: none !important;
  border-left: 4px solid #17736b !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  min-width: 170px !important;
  flex: 0 0 170px !important;
  gap: 12px !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.pdc-summary-card::before { display: none !important; }   /* drop the ::before bar, we use border-left */
.pdc-summary-card .card-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* per-type accents mapped to kpi palette */
.pdc-summary-card.card-total    { border-left-color: #17736b !important; }
.pdc-summary-card.card-total    .card-icon-wrap { background: #dcefec !important; color: #0f736b !important; }
.pdc-summary-card.card-today    { border-left-color: #17736b !important; }
.pdc-summary-card.card-today    .card-icon-wrap { background: #dcefec !important; color: #0f736b !important; }
.pdc-summary-card.card-upcoming { border-left-color: #17736b !important; }
.pdc-summary-card.card-upcoming .card-icon-wrap { background: #dcefec !important; color: #0f736b !important; }
.pdc-summary-card.card-hand     { border-left-color: #d97706 !important; }
.pdc-summary-card.card-hand     .card-icon-wrap { background: #fef3c7 !important; color: #d97706 !important; }
.pdc-summary-card.card-passed   { border-left-color: #0ca678 !important; }
.pdc-summary-card.card-passed   .card-icon-wrap { background: #e6fcf5 !important; color: #0ca678 !important; }
.pdc-summary-card.card-overdue  { border-left-color: #dc2626 !important; }
.pdc-summary-card.card-overdue  .card-icon-wrap { background: #fef2f2 !important; color: #dc2626 !important; }

/* ---- PDC Hand Status: .pdc-dash-card ----------------------------- */
.pdc-dash-card {
  border: none !important;
  border-left: 4px solid #17736b !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.pdc-dash-card__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
.pdc-dash-card__label {
  font-size: 9.5px !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
}
.pdc-dash-card__value {
  font-size: 17px !important;
  color: #1e293b !important;
}

/* per-type accents: left border + icon fill mapped to kpi palette */
.pdc-dash-card--total     { border-left-color: #17736b !important; }
.pdc-dash-card--total     .pdc-dash-card__icon { background: #17736b !important; }
.pdc-dash-card--customers { border-left-color: #17736b !important; }
.pdc-dash-card--customers .pdc-dash-card__icon { background: #17736b !important; }
.pdc-dash-card--today     { border-left-color: #0ca678 !important; }
.pdc-dash-card--today     .pdc-dash-card__icon { background: #0ca678 !important; }
.pdc-dash-card--deposited { border-left-color: #0ca678 !important; }
.pdc-dash-card--deposited .pdc-dash-card__icon { background: #0ca678 !important; }
.pdc-dash-card--upcoming  { border-left-color: #d97706 !important; }
.pdc-dash-card--upcoming  .pdc-dash-card__icon { background: #d97706 !important; }
.pdc-dash-card--overdue   { border-left-color: #dc2626 !important; }
.pdc-dash-card--overdue   .pdc-dash-card__icon { background: #dc2626 !important; }

/* =====================================================================
   Additional si-* classes found across attendance / tracking / task /
   report pages. Semantic ones are placed in the right colour group;
   everything else falls back to teal via the default rule at the end.
   ===================================================================== */

/* teal (neutral / informational / activity) */
.vyo-stat-card:has(.si-info), .vyo-stat-card:has(.si-live),
.vyo-stat-card:has(.si-login), .vyo-stat-card:has(.si-checkin),
.vyo-stat-card:has(.si-checkout), .vyo-stat-card:has(.si-customers),
.vyo-stat-card:has(.si-present), .vyo-stat-card:has(.si-prod),
.vyo-stat-card:has(.si-production), .vyo-stat-card:has(.si-purchase),
.vyo-stat-card:has(.si-sold), .vyo-stat-card:has(.si-earn),
.vyo-stat-card:has(.si-balance), .vyo-stat-card:has(.si-bank),
.vyo-stat-card:has(.si-percent), .vyo-stat-card:has(.si-create),
.vyo-stat-card:has(.si-update) {
  border-left-color: #17736b !important;
}
.si-info, .si-live, .si-login, .si-checkin, .si-checkout, .si-customers,
.si-present, .si-prod, .si-production, .si-purchase, .si-sold, .si-earn,
.si-balance, .si-bank, .si-percent, .si-create, .si-update {
  background: #dcefec !important;
}
.si-info i, .si-live i, .si-login i, .si-checkin i, .si-checkout i,
.si-customers i, .si-present i, .si-prod i, .si-production i,
.si-purchase i, .si-sold i, .si-earn i, .si-balance i, .si-bank i,
.si-percent i, .si-create i, .si-update i {
  color: #0f736b !important;
}

/* amber (wastage) */
.vyo-stat-card:has(.si-wastage) { border-left-color: #d97706 !important; }
.si-wastage   { background: #fef3c7 !important; }
.si-wastage i { color: #d97706 !important; }

/* red (rejected / absent / delete / deduct) */
.vyo-stat-card:has(.si-rejected), .vyo-stat-card:has(.si-absent),
.vyo-stat-card:has(.si-delete), .vyo-stat-card:has(.si-deduct) {
  border-left-color: #dc2626 !important;
}
.si-rejected, .si-absent, .si-delete, .si-deduct {
  background: #fef2f2 !important;
}
.si-rejected i, .si-absent i, .si-delete i, .si-deduct i {
  color: #dc2626 !important;
}