/* ============================================================
   PharmaPOS — Design System
   "Powerful underneath, extremely simple on top."
   ============================================================ */
:root {
  --brand: #0d5ea8;
  --brand-dark: #094a86;
  --teal: #0e9488;
  --amber: #f59e0b;
  --red: #dc3545;
  --slate: #64748b;
  --bg: #f2f5f9;
  --card: #ffffff;
  --border: #e4e9f0;
  --text: #1e293b;
  --muted: #64748b;
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --radius: 14px;
}
[data-bs-theme="dark"] {
  --bg: #0f172a;
  --card: #1a2438;
  --border: #2b3a55;
  --text: #e2e8f0;
  --muted: #94a3b8;
}

* { font-family: 'Inter', system-ui, sans-serif; }
body { background: var(--bg); color: var(--text); }

/* ---------- Login ---------- */
.login-screen { min-height: 100vh; background: linear-gradient(135deg, var(--brand) 0%, var(--teal) 100%); }
.login-card { width: 100%; max-width: 420px; border-radius: 20px; }
.brand-logo {
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; font-size: 30px;
}

/* ---------- Topbar ---------- */
.topbar { height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--border); z-index: 1030; }
.btn-icon { border: none; background: transparent; color: var(--text); border-radius: 10px; padding: .35rem .6rem; }
.btn-icon:hover { background: rgba(13,94,168,.08); color: var(--brand); }
.search-pill { border: 1px solid var(--border); border-radius: 999px; padding: .45rem 1rem; width: 340px; background: var(--bg); }
.search-pill kbd { margin-left: auto; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--teal)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.notif-dot { position:absolute; top:6px; right:8px; width:8px; height:8px; background:var(--red); border-radius:50%; }
.sync-badge { padding:.45rem .8rem; font-weight:600; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.dot-green{background:#22c55e}.dot-amber{background:var(--amber)}.dot-red{background:var(--red)}
.notif-menu { max-height: 420px; overflow-y:auto; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w);
  background: var(--card); border-right: 1px solid var(--border);
  overflow-y: auto; transition: transform .25s ease, width .25s ease; z-index: 1020;
}
body.sb-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
body.sb-collapsed .main-content { margin-left: 0; }
.main-content { margin-left: var(--sidebar-w); padding-top: calc(var(--topbar-h) + 1.25rem); padding-bottom: 3rem; transition: margin-left .25s ease; min-height:100vh; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1019; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.15); }
  body.sb-open .sidebar { transform: translateX(0); }
  body.sb-open .sidebar-backdrop { display:block; }
  .main-content { margin-left: 0 !important; }
}
.nav-section { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:1.1rem 1.25rem .4rem; font-weight:700; }
.nav-link-page {
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1.25rem; color:var(--text);
  text-decoration:none; font-size:.9rem; font-weight:500; border-left:3px solid transparent;
}
.nav-link-page i { width:20px; text-align:center; font-size:1.05rem; color:var(--muted); }
.nav-link-page:hover { background:rgba(13,94,168,.06); color:var(--brand); }
.nav-link-page.active { background:linear-gradient(90deg, rgba(13,94,168,.12), transparent); border-left-color:var(--brand); color:var(--brand); font-weight:600; }
.nav-link-page.active i { color: var(--brand); }

/* ---------- Cards / shared ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-card { cursor: default; transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.stat-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.page-title { font-weight:800; letter-spacing:-.02em; }
.text-muted { color: var(--muted) !important; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; white-space:nowrap; }
.badge-soft-primary { background:rgba(13,94,168,.12); color:var(--brand); }
.badge-soft-teal { background:rgba(14,148,136,.14); color:#0c7a70; }
.badge-soft-amber { background:rgba(245,158,11,.16); color:#b45309; }
.badge-soft-red { background:rgba(220,53,69,.13); color:var(--red); }
.badge-soft-slate { background:rgba(100,116,139,.14); color:var(--slate); }
[data-bs-theme="dark"] .badge-soft-teal { color:#5eead4; }
[data-bs-theme="dark"] .badge-soft-amber { color:#fcd34d; }
[data-bs-theme="dark"] .badge-soft-primary { color:#7cc0ff; }
[data-bs-theme="dark"] .badge-soft-red { color:#fda4af; }
[data-bs-theme="dark"] .badge-soft-slate { color:#cbd5e1; }

/* NHRA reference indicator */
.nhra-tag {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700;
  background:linear-gradient(90deg,#eef4fb,#e8f6f4); color:var(--brand-dark);
  border:1px solid #cfe0f2; border-radius:999px; padding:.2rem .65rem;
}
[data-bs-theme="dark"] .nhra-tag { background:#16283f; border-color:#28466b; color:#8ec4f5; }
.nhra-panel { border:1px dashed #9fc3e8; background:rgba(13,94,168,.04); border-radius:12px; }
.pharmacy-panel { border:1px dashed #9fd8cf; background:rgba(14,148,136,.05); border-radius:12px; }

/* Regulatory badges */
.badge-cancelled { background:var(--red); color:#fff; font-weight:700; letter-spacing:.05em; }
.badge-temp-import { background:#7c3aed; color:#fff; font-weight:700; letter-spacing:.03em; }
.badge-general-sale { background:var(--teal); color:#fff; font-weight:700; }
.badge-innovator { background:var(--brand); color:#fff; font-weight:700; }
.badge-generic { background:#0891b2; color:#fff; font-weight:700; }

/* Expiry chips */
.exp-safe { background:#dcfce7; color:#166534; } [data-bs-theme="dark"] .exp-safe{background:#14351f;color:#86efac;}
.exp-warn { background:#fef9c3; color:#854d0e; } [data-bs-theme="dark"] .exp-warn{background:#3a3010;color:#fde047;}
.exp-urgent { background:#ffedd5; color:#9a3412; } [data-bs-theme="dark"] .exp-urgent{background:#3d2113;color:#fdba74;}
.exp-critical { background:#fee2e2; color:#991b1b; } [data-bs-theme="dark"] .exp-critical{background:#3f1418;color:#fca5a5;}
.expired-chip { background:var(--red); color:#fff; font-weight:700; }

/* POS */
.pos-layout { display:grid; grid-template-columns: 1fr 380px; gap:1.25rem; align-items:start; }
@media (max-width: 991.98px){ .pos-layout { grid-template-columns: 1fr; } }
.pos-search { font-size:1.15rem; padding:.9rem 1.1rem; border-radius:14px; }
.cart-item { border-bottom:1px dashed var(--border); }
.pos-total-bar { font-size:1.6rem; font-weight:800; }
.batch-pick { border:1.5px solid var(--border); border-radius:12px; padding:.6rem .8rem; cursor:pointer; }
.batch-pick.selected { border-color:var(--brand); background:rgba(13,94,168,.06); }
.kbd-hint kbd { background:var(--bg); color:var(--muted); border:1px solid var(--border); }

/* Empty & skeleton states */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty-state i { font-size:3rem; opacity:.4; }
.skeleton { background:linear-gradient(90deg,var(--border) 25%,var(--bg) 50%,var(--border) 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:8px; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Import wizard */
.wizard-steps { display:flex; flex-wrap:wrap; gap:.25rem; }
.wizard-step { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); padding:.4rem .8rem; border-radius:999px; }
.wizard-step.active { background:rgba(13,94,168,.1); color:var(--brand); font-weight:700; }
.wizard-step.done { color:var(--teal); }
.dropzone { border:2px dashed var(--border); border-radius:16px; padding:3rem 1rem; text-align:center; color:var(--muted); transition:.2s; cursor:pointer; }
.dropzone:hover, .dropzone.dragover { border-color:var(--brand); background:rgba(13,94,168,.05); color:var(--brand); }

/* Sticky mobile payment bar */
.mobile-pay-bar { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--border); padding:.7rem 1rem; z-index:1035; display:none; }
@media (max-width: 991.98px){ body.on-pos .mobile-pay-bar { display:flex; } body.on-pos { padding-bottom:76px; } }

/* Print label preview */
.label-preview { width:320px; background:#fff; color:#000; border:1px solid #ccc; padding:12px; font-family:'Inter'; margin:auto; }
.label-preview .lp-name { font-size:1.25rem; font-weight:800; }
.label-preview .lp-dosage { font-size:1.05rem; font-weight:600; }

/* Misc */
.cursor-pointer { cursor:pointer; }
.chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem; font-size:.78rem; }
.perm-grid .form-check { padding:.55rem .75rem; border:1px solid var(--border); border-radius:10px; margin:0; }
.timeline { border-left:2px solid var(--border); padding-left:1.25rem; }
.timeline-item { position:relative; padding-bottom:1.25rem; }
.timeline-item::before { content:''; position:absolute; left:-1.72rem; top:.3rem; width:10px; height:10px; border-radius:50%; background:var(--brand); }