/*
 * HMIS 360 — Component Design System
 * Ported from City HMS (pb-*, sb-*, bd-* classes) + HMIS 360 extensions
 * Load after custom.min.css in layouts/head-css.php
 */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── HMIS 360 CSS custom properties ──────────────────────────────────────── */
:root {
  /* Fonts */
  --font-heading: 'Sora',   'Poppins', sans-serif;
  --font-data:    'DM Sans', 'Poppins', sans-serif;

  /* Brand colours */
  --h360-primary:  #2563EB;
  --h360-success:  #16a34a;
  --h360-danger:   #dc2626;
  --h360-warning:  #d97706;
  --h360-purple:   #7c3aed;
  --h360-sky:      #0284c7;
  --h360-orange:   #FF6B35;

  /* Department colour tokens */
  --dept-registration:  #6366f1;
  --dept-triage:        #f59e0b;
  --dept-consultation:  #2563eb;
  --dept-lab:           #059669;
  --dept-radiology:     #7c3aed;
  --dept-pharmacy:      #dc2626;
  --dept-inpatient:     #0891b2;
  --dept-theatre:       #be185d;
  --dept-audiology:     #7c3aed;
  --dept-nursing:       #0891b2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   pb-* — General content cards, tables, badges, buttons
   (Ported from City HMS unified_patient_billing.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section label */
.pb-sl {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#9ca3af; margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.pb-sl::after { content:''; flex:1; height:1px; background:#f3f4f6; }

/* Card */
.pb-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; margin-bottom:18px; }
.pb-card-head {
  padding:14px 20px; border-bottom:1px solid #f3f4f6;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.pb-card-head-left { display:flex; align-items:center; gap:9px; }
.pb-card-head h2 { font-size:13px; font-weight:700; color:#111827; margin:0; }
.pb-card-body { padding:18px 20px; }

/* Stat card (compact KPI strip) */
.pb-sc {
  background:#fff; border:1px solid #e5e7eb; border-left:3px solid var(--ac);
  border-radius:12px; padding:16px 18px; transition:transform .15s;
}
.pb-sc:hover { transform:translateY(-1px); }
.pb-sc-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; margin-bottom:5px; }
.pb-sc-val { font-size:22px; font-weight:700; color:var(--ac); }
.pb-sc-sub { font-size:10.5px; color:#9ca3af; margin-top:3px; }
.pb-sc.green   { --ac:#16a34a; }
.pb-sc.emerald { --ac:#10b981; }
.pb-sc.red     { --ac:#dc2626; }
.pb-sc.amber   { --ac:#d97706; }
.pb-sc.blue    { --ac:#2563eb; }
.pb-sc.purple  { --ac:#7c3aed; }
.pb-sc.sky     { --ac:#0284c7; }

/* Patient strip */
.pb-pat-strip { background:#fff; border:1px solid #e5e7eb; border-radius:14px; display:flex; overflow:hidden; margin-bottom:18px; }
.pb-pat-avatar { width:68px; background:#eff6ff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-pat-avatar svg { width:28px; height:28px; stroke:#3b82f6; }
.pb-pat-fields { display:flex; flex:1; flex-wrap:wrap; }
.pb-pat-field { padding:14px 20px; border-right:1px solid #f3f4f6; min-width:140px; }
.pb-pat-field:last-child { border-right:none; }
.pb-pfl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9ca3af; margin-bottom:3px; }
.pb-pfv { font-size:13px; font-weight:600; color:#111827; }

/* Module chips */
.pb-module-chip {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:20px; font-size:9.5px; font-weight:700; letter-spacing:.02em;
}
.pb-module-chip.lab    { background:#d1fae5; color:#065f46; }
.pb-module-chip.rad    { background:#ede9fe; color:#4c1d95; }
.pb-module-chip.pharm  { background:#dbeafe; color:#1e40af; }
.pb-module-chip.opd    { background:#fef3c7; color:#92400e; }
.pb-module-chip.ipd    { background:#fce7f3; color:#9d174d; }
.pb-module-chip.triage { background:#fef3c7; color:#92400e; }
.pb-module-chip.lab-r  { background:#d1fae5; color:#065f46; }
.pb-module-chip.general{ background:#f3f4f6; color:#4b5563; }
.pb-module-chip.sha    { background:#dcfce7; color:#166534; }
.pb-module-chip.ai     { background:#f5f3ff; color:#4c1d95; }

/* Buttons */
.pb-btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.pb-btn {
  height:34px; padding:0 16px; border-radius:8px; font-size:12px; font-weight:700;
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px;
  transition:opacity .12s; text-decoration:none; white-space:nowrap;
}
.pb-btn svg { width:13px; height:13px; }
.pb-btn:hover { opacity:.85; }
.pb-btn.blue   { background:#dbeafe; color:#1e40af; }
.pb-btn.red    { background:#fee2e2; color:#991b1b; }
.pb-btn.sky    { background:#e0f2fe; color:#0369a1; }
.pb-btn.amber  { background:#fef3c7; color:#92400e; }
.pb-btn.green  { background:#dcfce7; color:#166534; }
.pb-btn.purple { background:#f5f3ff; color:#5b21b6; }
.pb-btn.ghost  { background:#fff; border:1.5px solid #e5e7eb; color:#6b7280; }
.pb-btn.ghost:hover { background:#f3f4f6; }
.pb-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Tables */
.pb-tbl-wrap { overflow-x:auto; }
.pb-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.pb-tbl thead tr { background:#f8fafc; }
.pb-tbl thead th {
  padding:10px 14px; text-align:left; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:#6b7280;
  border-bottom:1px solid #e5e7eb; white-space:nowrap;
}
.pb-tbl thead th.tr { text-align:right; }
.pb-tbl tbody tr { border-bottom:1px solid #f3f4f6; transition:background .1s; }
.pb-tbl tbody tr:hover { background:#f8fafc; }
.pb-tbl tbody tr.pb-paid-row    { opacity:.65; background:#f9fffe; }
.pb-tbl tbody tr.pb-removed-row { opacity:.55; background:#fff1f2!important; }
.pb-tbl tbody tr.pb-removed-row td { text-decoration:line-through; text-decoration-color:#dc2626; }
.pb-tbl tbody td { padding:11px 14px; vertical-align:middle; }
.pb-tbl tbody td.tr { text-align:right; }

/* Badges */
.pb-badge { display:inline-flex; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.pb-badge-paid      { background:#dcfce7; color:#166534; }
.pb-badge-partial   { background:#fef3c7; color:#92400e; }
.pb-badge-unpaid    { background:#fee2e2; color:#991b1b; }
.pb-badge-over      { background:#fef3c7; color:#856404; }
.pb-badge-waiting   { background:#fef3c7; color:#92400e; }
.pb-badge-in_progress { background:#dbeafe; color:#1e40af; }
.pb-badge-completed { background:#dcfce7; color:#166534; }
.pb-badge-skipped   { background:#f3f4f6; color:#4b5563; }
.pb-badge-urgent    { background:#fee2e2; color:#991b1b; }
.pb-badge-high      { background:#ffedd5; color:#9a3412; }
.pb-badge-normal    { background:#f0f9ff; color:#0369a1; }
.pb-badge-low       { background:#f3f4f6; color:#6b7280; }

/* Forms */
.pb-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:600px){ .pb-form-row { grid-template-columns:1fr; } }
.pb-fl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin-bottom:6px; display:block; }
.pb-fi {
  width:100%; height:38px; border:1.5px solid #e5e7eb; border-radius:8px;
  padding:0 12px; font-size:13px; color:#111827; outline:none;
  transition:border-color .15s,box-shadow .15s; background:#fff; box-sizing:border-box;
}
.pb-fi:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.1); }

/* ═══════════════════════════════════════════════════════════════════════════
   sb-* — SweetAlert2 shell (modal components)
   ═══════════════════════════════════════════════════════════════════════════ */

.swal-pb { border-radius:18px!important; padding:0!important; overflow:hidden!important; font-family:inherit!important; box-shadow:0 20px 60px rgba(0,0,0,.18)!important; }
.swal-pb .swal2-html-container { margin:0!important; padding:0!important; overflow:visible!important; font-size:inherit!important; }
.swal-pb .swal2-title, .swal-pb .swal2-actions, .swal-pb .swal2-icon { display:none!important; }
.swal-pb .swal2-close { top:14px!important; right:16px!important; width:28px!important; height:28px!important; font-size:18px!important; color:#9ca3af!important; z-index:10!important; border-radius:50%!important; transition:background .12s,color .12s!important; }
.swal-pb .swal2-close:hover { background:#f3f4f6!important; color:#374151!important; }

.sb-head { padding:20px 24px 16px; border-bottom:1px solid #f0f2f7; display:flex; align-items:center; gap:13px; }
.sb-head-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-head-ico svg { width:20px; height:20px; }
.sb-head-ico.blue   { background:#dbeafe; color:#2563eb; }
.sb-head-ico.green  { background:#dcfce7; color:#16a34a; }
.sb-head-ico.amber  { background:#fef3c7; color:#d97706; }
.sb-head-ico.red    { background:#fee2e2; color:#dc2626; }
.sb-head-ico.sky    { background:#e0f2fe; color:#0284c7; }
.sb-head-ico.purple { background:#f5f3ff; color:#7c3aed; }
.sb-head-title { font-size:15px; font-weight:700; color:#111827; line-height:1.3; margin:0; }
.sb-head-sub   { font-size:11.5px; color:#9ca3af; margin-top:2px; line-height:1.4; }

.sb-body   { padding:20px 24px; }
.sb-footer { padding:14px 24px; background:#f8fafc; border-top:1px solid #f0f2f7; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.sb-fl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; display:block; margin-bottom:5px; }
.sb-fi {
  width:100%; height:38px; border:1.5px solid #e5e7eb; border-radius:8px;
  padding:0 12px; font-size:13px; color:#111827; outline:none;
  transition:border-color .15s,box-shadow .15s; background:#fff; box-sizing:border-box; font-family:inherit;
}
.sb-fi:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.1); }
.sb-fi.err   { border-color:#dc2626!important; box-shadow:0 0 0 3px rgba(220,38,38,.08)!important; }
.sb-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:32px;
}
.sb-textarea { height:72px; padding:9px 12px; resize:vertical; }
.sb-field { margin-bottom:14px; }
.sb-field:last-child { margin-bottom:0; }

.sb-info { padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:12px; line-height:1.6; display:flex; gap:10px; align-items:flex-start; }
.sb-info svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.sb-info.blue   { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.sb-info.amber  { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.sb-info.red    { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.sb-info.green  { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }

.sb-btn {
  height:36px; padding:0 18px; border-radius:8px; font-size:12.5px; font-weight:700;
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px;
  transition:opacity .12s,background .12s; white-space:nowrap;
}
.sb-btn svg { width:13px; height:13px; }
.sb-btn:hover { opacity:.88; }
.sb-btn:disabled { opacity:.4; cursor:not-allowed; }
.sb-btn.blue   { background:#2563eb; color:#fff; }
.sb-btn.green  { background:#16a34a; color:#fff; }
.sb-btn.red    { background:#dc2626; color:#fff; }
.sb-btn.sky    { background:#0284c7; color:#fff; }
.sb-btn.amber  { background:#d97706; color:#fff; }
.sb-btn.purple { background:#7c3aed; color:#fff; }
.sb-btn.ghost  { background:#fff; border:1.5px solid #e5e7eb; color:#374151; }
.sb-btn.ghost:hover { background:#f3f4f6; opacity:1; }

.sb-badge { display:inline-flex; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; }
.sb-badge.green  { background:#dcfce7; color:#166534; }
.sb-badge.red    { background:#fee2e2; color:#991b1b; }
.sb-badge.amber  { background:#fef3c7; color:#92400e; }
.sb-badge.blue   { background:#dbeafe; color:#1e40af; }
.sb-badge.gray   { background:#f3f4f6; color:#374151; }

.sb-tbl-wrap { overflow-x:auto; }
.sb-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.sb-tbl thead th { padding:9px 12px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; background:#f8fafc; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
.sb-tbl tbody tr { border-bottom:1px solid #f3f4f6; transition:background .08s; }
.sb-tbl tbody tr:last-child { border-bottom:none; }
.sb-tbl tbody tr:hover { background:#f9fafb; }
.sb-tbl tbody td { padding:9px 12px; color:#374151; vertical-align:middle; }
.sb-tbl .empty td { text-align:center; color:#9ca3af; padding:32px; font-size:13px; }

@keyframes sb-spin { to { transform:rotate(360deg); } }
.sb-spinner { width:36px; height:36px; border:3px solid #e5e7eb; border-top-color:#2563eb; border-radius:50%; animation:sb-spin .7s linear infinite; margin:0 auto; }
.sb-loading-body { text-align:center; padding:40px 24px; }
.sb-loading-body p { font-size:13px; font-weight:600; color:#374151; margin:14px 0 0; }
.sb-success-body { text-align:center; padding:32px 24px 20px; }
.sb-success-ico { width:60px; height:60px; border-radius:50%; background:#dcfce7; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.sb-success-ico svg { width:28px; height:28px; }
.sb-success-body h3 { font-size:16px; font-weight:700; color:#111827; margin:0 0 6px; }
.sb-success-body p  { font-size:12.5px; color:#6b7280; margin:0; line-height:1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   bd-* — Dashboard KPI cards (Sora/DM Sans headings)
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-wrap { font-family:var(--font-data); }
.bd-wrap h1, .bd-wrap h2, .bd-wrap h3 { font-family:var(--font-heading); }

.bd-kpi-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;
}
@media(max-width:900px){ .bd-kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .bd-kpi-grid { grid-template-columns:1fr; } }

.bd-stat-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:18px 20px; border-left:4px solid var(--bd-accent, #2563eb);
  transition:transform .15s, box-shadow .15s;
}
.bd-stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,.07); }
.bd-stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; margin-bottom:6px; }
.bd-stat-value { font-family:var(--font-heading); font-size:28px; font-weight:700; color:var(--bd-accent, #2563eb); line-height:1; }
.bd-stat-sub   { font-size:11px; color:#9ca3af; margin-top:4px; }

.bd-stat-card.blue   { --bd-accent: #2563eb; }
.bd-stat-card.green  { --bd-accent: #16a34a; }
.bd-stat-card.amber  { --bd-accent: #d97706; }
.bd-stat-card.red    { --bd-accent: #dc2626; }
.bd-stat-card.purple { --bd-accent: #7c3aed; }
.bd-stat-card.sky    { --bd-accent: #0284c7; }
.bd-stat-card.orange { --bd-accent: #FF6B35; }

/* ═══════════════════════════════════════════════════════════════════════════
   Queue display helpers
   ═══════════════════════════════════════════════════════════════════════════ */

.dept-tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
  border-left:3px solid var(--dept-color, #2563eb);
  background:color-mix(in srgb, var(--dept-color, #2563eb) 10%, white);
  color:var(--dept-color, #2563eb);
}

.queue-priority-urgent { background:#fee2e2; color:#991b1b; border-color:#f87171; }
.queue-priority-high   { background:#ffedd5; color:#9a3412; border-color:#fb923c; }
.queue-priority-normal { background:#f0f9ff; color:#0369a1; border-color:#38bdf8; }
.queue-priority-low    { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; }

/* Module management toggle */
.module-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:18px 20px; display:flex; align-items:flex-start; gap:14px;
  transition:border-color .15s, box-shadow .15s;
}
.module-card:hover { border-color:#c7d2fe; box-shadow:0 2px 12px rgba(99,102,241,.07); }
.module-card.core  { border-left:3px solid #6366f1; }
.module-card-icon {
  width:42px; height:42px; border-radius:10px; background:#f0f4ff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; color:#2563eb;
}
.module-card-body  { flex:1; }
.module-card-name  { font-size:13px; font-weight:700; color:#111827; margin-bottom:3px; }
.module-card-desc  { font-size:11.5px; color:#6b7280; line-height:1.5; }
.module-card-meta  { margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.module-core-badge { font-size:9.5px; font-weight:700; background:#e0e7ff; color:#3730a3; padding:2px 7px; border-radius:20px; }

/* Toggle switch */
.h360-toggle { position:relative; display:inline-block; width:42px; height:24px; }
.h360-toggle input { opacity:0; width:0; height:0; }
.h360-toggle-slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:#e5e7eb; border-radius:24px; transition:.3s;
}
.h360-toggle-slider:before {
  position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.h360-toggle input:checked + .h360-toggle-slider { background:#2563eb; }
.h360-toggle input:checked + .h360-toggle-slider:before { transform:translateX(18px); }
.h360-toggle input:disabled + .h360-toggle-slider { opacity:.4; cursor:not-allowed; }

/* Category header for module grid */
.module-cat-header {
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:#6b7280;
  padding:6px 0 10px; border-bottom:1px solid #f3f4f6; margin:20px 0 14px;
  display:flex; align-items:center; gap:8px;
}
.module-cat-header i { font-size:14px; color:#2563eb; }