/* ============================================================
   SMART HOSPITAL · ADMIN DASHBOARD STYLES
   Loaded only on admin/admin/dashboard.
   Final variant: B (Executive) — approved 2026-05-15.

   Visual spec:  Wfdocs/dashboard-samples.html  (Variant B section)
   Typography:   Wfdocs/typography-samples.html (kpi-grid, table-card, badge-pill, btn recipes)

   Uses tokens from sh-tokens.css. All numeric values use tabular-nums.
   Load order in admin layout: sh-tokens.css → sh-theme.css → sh-dashboard.css
============================================================ */

/* ─── Page header ─── */
.dash-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.dash-page-head h1{font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 4px;color:var(--ink);}
.dash-page-head .crumb{font-size:12px;color:var(--muted);}

/* Action buttons (Export / Quick Add) */
.dash-btn-row{display:flex;gap:8px;}
.dash-btn{font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--ink);font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;text-decoration:none;}
.dash-btn:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);color:var(--ink);}
.dash-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.dash-btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--accent-ink);}
.dash-btn.sm{font-size:12px;padding:5px 10px;}

/* ─── Hero KPIs (4 tiles with sparkline + delta) ─── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
@media(max-width:980px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr;}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm);transition:.18s;text-decoration:none;color:inherit;display:block;}
.kpi:hover{border-color:var(--link);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit;}
.kpi-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.kpi-value{font-size:24px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;}
.kpi-value .unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:2px;}
.kpi-delta{font-size:12px;font-weight:600;color:var(--green);margin-top:4px;display:inline-flex;align-items:center;gap:4px;}
.kpi-delta.neg{color:var(--red);}
.kpi-delta.flat{color:var(--muted);font-weight:500;}
.kpi-delta i{font-size:10px;}

.kpi-spark{width:100%;height:32px;margin-top:10px;display:block;}
.kpi-spark path.line{fill:none;stroke-width:2;}
.kpi-spark path.fill{fill-opacity:.16;}
.kpi.s-green .kpi-spark path.line{stroke:var(--green);} .kpi.s-green .kpi-spark path.fill{fill:var(--green);}
.kpi.s-blue  .kpi-spark path.line{stroke:var(--blue);}  .kpi.s-blue  .kpi-spark path.fill{fill:var(--blue);}
.kpi.s-teal  .kpi-spark path.line{stroke:var(--teal);}  .kpi.s-teal  .kpi-spark path.fill{fill:var(--teal);}
.kpi.s-red   .kpi-spark path.line{stroke:var(--red);}   .kpi.s-red   .kpi-spark path.fill{fill:var(--red);}
.kpi.s-amber .kpi-spark path.line{stroke:var(--amber);} .kpi.s-amber .kpi-spark path.fill{fill:var(--amber);}

/* ─── Operations snapshot (4 cards) ─── */
.ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
@media(max-width:980px){.ops-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.ops-grid{grid-template-columns:1fr;}}
.ops-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm);transition:.18s;display:flex;flex-direction:column;min-height:140px;}
.ops-card:hover{border-color:var(--link);box-shadow:var(--shadow);transform:translateY(-2px);}
.ops-card .head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.ops-card .head .ic{width:28px;height:28px;border-radius:var(--radius);display:grid;place-items:center;font-size:12px;flex:none;}
.ops-card .head .ic.blue{background:var(--blue-soft);color:var(--blue);}
.ops-card .head .ic.teal{background:var(--teal-soft);color:var(--teal);}
.ops-card .head .ic.red{background:var(--red-soft);color:var(--red);}
.ops-card .head .ic.amber{background:var(--amber-soft);color:var(--amber);}
.ops-card .head .ic.green{background:var(--green-soft);color:var(--green);}
.ops-card .head .ic.violet{background:var(--violet-soft);color:var(--violet);}
.ops-card .head .lbl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.ops-card .head .meta{margin-left:auto;font-size:12px;color:var(--link);font-weight:600;text-decoration:none;}
.ops-card .head .meta:hover{text-decoration:underline;}
.ops-card .big{font-size:24px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;}
.ops-card .big .unit{font-size:14px;color:var(--muted);font-weight:600;}
.ops-card .sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}
.ops-card .chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}

/* Inline progress bar inside ops-card */
.ops-card .bar-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;}
.ops-card .bar-wrap .track{flex:1;height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden;}
.ops-card .bar-wrap .track i{display:block;height:100%;width:var(--w,0);background:var(--green);transition:width .3s;}
.ops-card .bar-wrap .track.warn i{background:var(--amber);}
.ops-card .bar-wrap .track.crit i{background:var(--red);}
.ops-card .bar-wrap .pct{font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* Warning line inside ops-card (e.g., pharmacy critical items) */
.ops-card .warn-line{font-size:12px;color:var(--red);font-weight:600;margin-top:8px;display:flex;align-items:flex-start;gap:6px;line-height:1.4;}
.ops-card .warn-line i{font-size:11px;margin-top:2px;}

/* Next-appointments mini list (inside ops-card) */
.ops-card .next-list{margin-top:4px;font-size:12.5px;color:var(--ink-2);line-height:1.7;}
.ops-card .next-list .row{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.ops-card .next-list .row .nm{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ops-card .next-list .row.muted .nm{font-weight:500;color:var(--ink-2);}

/* ─── Blood Bank widget (special: stock grid + status block) ─── */
.bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px;}
.bb-grid .bg{background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--radius);padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.bb-grid .bg .g{font-size:11px;font-weight:700;color:var(--ink-2);}
.bb-grid .bg .u{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.bb-grid .bg.low{background:var(--red-soft);border-color:var(--red);}
.bb-grid .bg.low .u,.bb-grid .bg.low .g{color:var(--red);}
.bb-grid .bg.warn{background:var(--amber-soft);border-color:var(--amber);}
.bb-grid .bg.warn .u{color:var(--amber);}

/* Blood Bank status lines (expiring / cross-match / flow) */
.bb-status{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-light);display:flex;flex-direction:column;gap:5px;}
.bb-stat{font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px;line-height:1.4;font-variant-numeric:tabular-nums;}
.bb-stat i{font-size:11px;flex:none;width:14px;text-align:center;}
.bb-stat.warn{color:var(--amber);font-weight:600;}
.bb-stat.warn i{color:var(--amber);}
.bb-stat.crit{color:var(--red);font-weight:700;}
.bb-stat.crit i{color:var(--red);}
.bb-stat.info{color:var(--link);}
.bb-stat.info i{color:var(--link);}
.bb-stat strong{color:var(--ink);font-weight:700;}

/* ─── Charts row (line + doughnut side by side) ─── */
.dash-chart-row{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:24px;}
@media(max-width:980px){.dash-chart-row{grid-template-columns:1fr;}}
.dash-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.dash-chart-card-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dash-chart-card-h h3{font-size:16px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.005em;}
.dash-chart-card-h .sub{font-size:12px;color:var(--muted);}
.dash-chart-card-h .tools{margin-left:auto;display:flex;gap:6px;}
.dash-chart-card-h .tools button{border:1px solid var(--border);background:var(--surface);color:var(--muted);width:26px;height:26px;border-radius:var(--radius);font-size:10px;cursor:pointer;display:grid;place-items:center;}
.dash-chart-card-h .tools button:hover{color:var(--ink);border-color:var(--border-strong);}
.dash-chart-card-body{padding:18px;}

/* Summary stats above line chart (Income / Expense / Net / Margin) */
.chart-summary{display:flex;gap:24px;padding:0 0 4px;margin-bottom:14px;flex-wrap:wrap;}
.chart-summary .stat{display:flex;flex-direction:column;}
.chart-summary .stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.chart-summary .stat .v{font-size:18px;font-weight:700;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.005em;line-height:1.2;}
.chart-summary .stat .v.up{color:var(--green);}
.chart-summary .stat .v.dn{color:var(--red);}

/* Chart canvas wrappers (Chart.js mounts here) */
.dash-chart-canvas-wrap{position:relative;width:100%;height:240px;}

/* Doughnut: flex layout with side legend */
.doughnut-layout{display:flex;align-items:center;gap:22px;}
@media(max-width:680px){.doughnut-layout{flex-direction:column;align-items:stretch;gap:14px;}}
.doughnut-wrap{position:relative;width:200px;height:200px;flex:none;}
@media(max-width:680px){.doughnut-wrap{width:180px;height:180px;margin:0 auto;}}
.doughnut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.doughnut-center .v{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.005em;}
.doughnut-center .l{font-size:9px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}

.donut-legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;}
.donut-legend li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px;border-bottom:1px dashed var(--border-light);}
.donut-legend li:last-child{border-bottom:0;}
.donut-legend .sw{width:11px;height:11px;border-radius:3px;background:var(--c,transparent);flex:none;}
.donut-legend .nm{flex:1;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.donut-legend .val{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums;}
.donut-legend .pct{color:var(--muted);font-weight:600;font-size:11.5px;min-width:42px;text-align:right;font-variant-numeric:tabular-nums;}

/* ─── Activity feed + Staff/Income tables ─── */
.dash-table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:24px;}
.dash-table-card-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.dash-table-card-h h3{font-size:16px;font-weight:700;margin:0;color:var(--ink);letter-spacing:-.005em;}
.dash-table-card-h .sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* Table inside dash-table-card */
.dash-tbl{width:100%;border-collapse:collapse;}
.dash-tbl thead th{font-size:12px;font-weight:600;text-align:left;padding:10px 18px;background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;}
.dash-tbl thead th.num{text-align:right;}
.dash-tbl tbody td{font-size:14px;font-weight:400;padding:12px 18px;border-bottom:1px solid var(--border-light);color:var(--ink);vertical-align:middle;}
.dash-tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums;}
.dash-tbl tbody td .ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius);font-size:12px;margin-right:8px;vertical-align:-7px;}
.dash-tbl tbody td .ic.blue{background:var(--blue-soft);color:var(--blue);}
.dash-tbl tbody td .ic.green{background:var(--green-soft);color:var(--green);}
.dash-tbl tbody td .ic.red{background:var(--red-soft);color:var(--red);}
.dash-tbl tbody td .ic.amber{background:var(--amber-soft);color:var(--amber);}
.dash-tbl tbody td .ic.violet{background:var(--violet-soft);color:var(--violet);}
.dash-tbl tbody td .ic.teal{background:var(--teal-soft);color:var(--teal);}
.dash-tbl tbody td .ic.orange{background:var(--orange-soft);color:var(--orange);}
.dash-tbl tbody td .ic.purple{background:var(--purple-soft);color:var(--purple);}
.dash-tbl tbody tr:last-child td{border-bottom:0;}
.dash-tbl tbody tr:hover{background:var(--rowhover);}
/* Dashboard table helpers — migrated from inline styles 2026-05-26 */
.dash-tbl tbody td.empty{text-align:center;color:var(--muted);padding:24px;}
.dash-tbl .meta-text{color:var(--muted);font-size:12px;}
.dash-tbl tbody td.neg{color:var(--red);}
.dash-tbl tbody td.neg.bold{font-weight:600;}

/* Responsive: on narrow screens the 6-col tables exceed the viewport and were
   being CLIPPED by .dash-table-card{overflow:hidden} (Amount/Time columns hidden
   and unreachable). Make the table itself a horizontal scroll container so every
   column stays accessible via swipe, instead of being cut off. */
@media(max-width:680px){
  .dash-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* Status pills (inside tables) */
.badge-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;letter-spacing:.01em;}
.badge-pill.ok{background:var(--green-soft);color:var(--green);}
.badge-pill.warn{background:var(--amber-soft);color:var(--amber);}
.badge-pill.err{background:var(--red-soft);color:var(--red);}
.badge-pill.info{background:var(--blue-soft);color:var(--blue);}
.badge-pill.muted{background:var(--surface-3);color:var(--muted);}

/* Inline progress bar (used inside table cells) */
.pbar{display:inline-flex;align-items:center;gap:8px;}
.pbar .track{width:80px;height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden;}
.pbar .track i{display:block;height:100%;width:var(--w,0);background:var(--green);}
.pbar.warn .track i{background:var(--amber);}
.pbar.crit .track i{background:var(--red);}
.pbar .pct{font-size:12px;font-weight:600;color:var(--ink-2);min-width:36px;text-align:right;font-variant-numeric:tabular-nums;}

/* Bottom 2-col row (Staff & Attendance + Income by Module, equal width) */
.dash-2col-equal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
@media(max-width:1100px){.dash-2col-equal{grid-template-columns:1fr;}}

/* Alert banners on top (env / mysql / notifications) — keep existing alert classes but tighten spacing */
.dash-alerts{margin-bottom:18px;}
.dash-alerts .alert{margin-bottom:8px;}

/* RTL surface tweak hook (sh-admin-rtl.css will mirror as needed) */
[dir="rtl"] .ops-card .head .meta{margin-left:0;margin-right:auto;}
[dir="rtl"] .dash-tbl thead th.num,
[dir="rtl"] .dash-tbl tbody td.num{text-align:left;}
[dir="rtl"] .donut-legend .pct{text-align:left;}