/* ============================================
   MediStock – Hospital Inventory System
   Design: Clinical precision meets operational clarity
   Palette: Deep navy + medical teal + alert spectrum
   ============================================ */

:root {
  --navy:       #0d1b2a;
  --navy-mid:   #1b2f45;
  --navy-light: #253d57;
  --teal:       #0a9396;
  --teal-light: #94d2bd;
  --teal-pale:  #e0f4f5;
  --white:      #ffffff;
  --off-white:  #f0f4f8;
  --border:     #d1dce8;

  /* Status colors */
  --ok:         #2d9e5f;
  --ok-bg:      #e8f7f0;
  --low:        #d4820a;
  --low-bg:     #fef3e0;
  --critical:   #c0392b;
  --critical-bg:#fde8e6;
  --out:        #7f1d1d;
  --out-bg:     #fecaca;

  /* ---- New: reference-derived visual refresh (added Aug 2026) ----
     Sampled from the provided design reference screenshots. Used
     alongside the tokens above, not a replacement — existing --teal/
     --navy usages are left as-is unless a specific element is being
     restyled to match the new reference. */
  --nav-navy:      #060f2e;   /* deep near-black navy, top nav bar */
  --nav-navy-mid:  #0c1a3f;   /* nav hover / dropdown panel */
  --accent-blue:      #1a56db; /* primary actions, active nav, links */
  --accent-blue-dark: #133f9e; /* hover/pressed state for the above */
  --accent-blue-pale: #e8f0fe; /* pale blue backgrounds (badges, chips) */
  --accent-blue-light: #7ba7f7; /* light, readable blue for text on dark backgrounds (nurse scan station, login) */
  --page-bg:       #f8f9fb;  /* lighter page background than --off-white */
  --card-border:   #edf0f5;  /* barely-visible card border */

  /* Soft-tinted icon badge pairs (bg, fg) used on stat cards */
  --badge-purple-bg: #efe8fd; --badge-purple-fg: #5713da;
  --badge-amber-bg:  #fdefdc; --badge-amber-fg:  #cd7b31;
  --badge-rose-bg:   #fee0e8; --badge-rose-fg:   #d6336c;
  --badge-blue-bg:   #e4ebfc; --badge-blue-fg:   #3454b4;

  /* Typography */
  --font-body:  'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  /* Layout */
  --nav-h:      60px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--navy);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---- Navbar ---- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--nav-navy);
  display: flex; align-items: center;
  padding: 0 1.5rem;
  gap: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  /* No overflow:hidden here — .nav-links already clips its own vertical
     overflow below; hiding it at this level would also clip the absolutely-
     positioned dropdown menus (user menu, reports menu) that need to hang
     below the bar. */
}
/* ---- Line icons (replace the old emoji set) ---- */
.ui-icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em;
  flex-shrink: 0;
}
.ui-icon-fill { fill: currentColor; stroke: none; }
.ui-icon-lg   { width: 1.3em; height: 1.3em; }
.ui-icon-xl   { width: 1.8em; height: 1.8em; }

.nav-brand { display: flex; align-items: center; gap: 0.5rem; min-width: 180px; }
.nav-logo { font-size: 1.4rem; color: var(--accent-blue); }
.nav-title { font-size: 1.1rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.nav-badge {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent-blue); color: var(--white); padding: 2px 8px; border-radius: 20px;
}
.nav-badge.supplier { background: #7c3aed; }

.nav-links {
  display: flex; list-style: none; gap: 0.25rem;
  flex: 0 1 auto; min-width: 0;            /* shrink instead of pushing nav-user off-screen; don't grow past content */
  overflow-x: auto; overflow-y: hidden;    /* graceful fallback when labels (e.g. BM) are too wide to fit; explicit overflow-y stops the browser's implicit auto-scrollbar */
  scrollbar-width: none; -ms-overflow-style: none;
  position: relative;
}
.nav-links::-webkit-scrollbar { display: none; }

/* Fade hint at the trailing edge — only shown while the JS below has
   confirmed there's actually more to scroll to, and hidden again once
   scrolled to the end, so it never misleads when nothing overflows. */
.nav-links-wrap { position: relative; flex: 0 1 auto; min-width: 0; display: flex; }
.nav-links-wrap.is-scrollable::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--nav-navy));
  pointer-events: none;
}
.nav-links a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #aab4c4; font-size: 0.875rem; font-weight: 500;
  padding: 0.4rem 0.65rem; border-radius: var(--radius);
  transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;     /* keep each label on one line */
  position: relative;
}
.nav-links a:hover { color: var(--white); background: var(--nav-navy-mid); text-decoration: none; }
.nav-links a.active {
  color: var(--accent-blue); background: rgba(26,86,219,0.12); text-decoration: none;
}
.nav-links a.active::after {
  content: ''; position: absolute; left: 0.65rem; right: 0.65rem; bottom: -0.55rem; height: 2px;
  background: var(--accent-blue); border-radius: 2px;
}

.nav-user { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
.user-name { color: #94a3b8; font-size: 0.85rem; white-space: nowrap; }
.btn-logout {
  font-size: 0.8rem; font-weight: 600; color: var(--white);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  padding: 0.3rem 0.75rem; border-radius: var(--radius); transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-logout:hover { background: #c0392b; border-color: #c0392b; text-decoration: none; }

/* ---- Language Switcher (desktop dropdown) ---- */
.lang-switch { position: relative; }
.lang-switch-btn {
  font-size: 0.8rem; font-weight: 600; color: #cbd5e1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  padding: 0.35rem 0.7rem; border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s; white-space: nowrap; font-family: var(--font-body);
}
.lang-switch-btn:hover { background: rgba(255,255,255,0.12); }
.lang-switch-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--navy-mid); border: 1px solid var(--navy-light);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 170px; z-index: 200; overflow: hidden;
}
.lang-switch-menu.open { display: block; }
.lang-switch-menu a {
  display: block; padding: 0.6rem 0.9rem; font-size: 0.85rem; color: #cbd5e1;
  text-decoration: none; transition: background 0.12s;
}
.lang-switch-menu a:hover { background: var(--nav-navy-mid); text-decoration: none; }
.lang-switch-menu a.active { color: var(--accent-blue); font-weight: 700; }
.lang-switch-menu a.active::before { content: '✓ '; }

/* ---- Reports nav dropdown ---- */
.nav-dropdown { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.nav-dropdown-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: #aab4c4; font-size: 0.875rem; font-weight: 500; font-family: var(--font-body);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: 0.4rem 0.65rem; border-radius: var(--radius); transition: all 0.15s;
}
.nav-dropdown-btn:hover { color: var(--white); background: var(--nav-navy-mid); text-decoration: none; }
.nav-dropdown-btn.active { color: var(--accent-blue); background: rgba(26,86,219,0.12); }
.nav-caret { font-size: 0.65rem; opacity: 0.8; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--nav-navy-mid); border: 1px solid #1a2c52;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 210px; z-index: 200; overflow: hidden; padding: 0.25rem 0;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 0.6rem 0.9rem; font-size: 0.85rem; color: #cbd5e1;
  text-decoration: none; transition: background 0.12s; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--nav-navy-mid); color: var(--white); text-decoration: none; }

/* ---- Row action menu (e.g. Suppliers table "⋯" column) ----
   Same interaction pattern as the nav dropdowns, restyled for a light
   table row instead of the dark navbar. */
.row-action-dropdown { position: relative; display: inline-flex; }
.row-action-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; color: #64748b;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all 0.15s;
}
.row-action-btn:hover, .row-action-btn[aria-expanded="true"] { background: var(--off-white); color: var(--navy); }
.row-action-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 190px; z-index: 200; overflow: hidden; padding: 0.25rem 0;
}
.row-action-menu.open { display: block; }
.row-action-menu a, .row-action-menu button, .row-action-danger {
  display: block; width: 100%; text-align: left; padding: 0.55rem 0.85rem;
  font-size: 0.85rem; font-family: var(--font-body); color: var(--navy);
  background: none; border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.row-action-menu a:hover, .row-action-menu button:hover { background: var(--off-white); text-decoration: none; }
.row-action-danger { color: var(--critical); }

/* Mobile drawer group label */
.mobile-menu-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b; padding: 0.85rem 0.9rem 0.35rem;
}

/* Language switcher — mobile drawer variant */
.mobile-lang-switch {
  display: flex; gap: 0.5rem; padding: 0.5rem 0.25rem 0.75rem;
}
.mobile-lang-option {
  flex: 1; text-align: center; font-size: 0.82rem; font-weight: 600;
  color: #94a3b8; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
  padding: 0.55rem 0.5rem; text-decoration: none; transition: all 0.15s;
}
.mobile-lang-option:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.mobile-lang-option.active {
  color: var(--accent-blue-light); border-color: rgba(26,86,219,0.4); background: rgba(26,86,219,0.12);
}

/* ---- Main Content ---- */
.main-content { flex: 1; padding: 1.75rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; }

/* ---- Flash Messages ---- */
.flash {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.25rem; border-radius: var(--radius); margin-bottom: 1.25rem;
  font-size: 0.9rem; font-weight: 500;
}
.flash-success { background: var(--ok-bg); color: var(--ok); border-left: 4px solid var(--ok); }
.flash-error   { background: var(--critical-bg); color: var(--critical); border-left: 4px solid var(--critical); }
.flash-warning { background: var(--low-bg); color: var(--low); border-left: 4px solid var(--low); }
.flash-info    { background: var(--accent-blue-pale); color: var(--accent-blue); border-left: 4px solid var(--accent-blue); }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 1.2rem; opacity: 0.6; line-height: 1; }

/* ---- Page Header ---- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: -0.03em; }
.page-header p  { color: #64748b; font-size: 0.9rem; margin-top: 0.2rem; }
.page-actions   { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---- Cards ---- */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); border: 1px solid var(--card-border);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: space-between;
  background: #fafbfc;
}
.card-header h2 { font-size: 0.95rem; font-weight: 600; color: var(--navy); }
.card-body { padding: 1.25rem; }

/* ---- Stat Cards ---- */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem; border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Legacy top-border accent kept for any page still using the old markup
   without a .stat-icon-badge (harmless no-op once a card has the badge). */
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-card.teal::before   { background: var(--accent-blue); }
.stat-card.ok::before     { background: var(--ok); }
.stat-card.warn::before   { background: var(--low); }
.stat-card.danger::before { background: var(--critical); }
.stat-card:has(.stat-icon-badge)::before { display: none; }

.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-icon-badge {
  width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-icon-badge.purple { background: var(--badge-purple-bg); color: var(--badge-purple-fg); }
.stat-icon-badge.amber  { background: var(--badge-amber-bg);  color: var(--badge-amber-fg); }
.stat-icon-badge.rose   { background: var(--badge-rose-bg);   color: var(--badge-rose-fg); }
.stat-icon-badge.blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-fg); }
.stat-kebab {
  color: #b6bfcc; font-size: 1.1rem; line-height: 1; cursor: default; padding: 0.2rem;
}

.stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #7c8695; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0.15rem 0 0.1rem; }
.stat-sub   { font-size: 0.8rem; color: #94a3b8; }
.stat-sub.stat-sub-ok   { color: var(--ok); font-weight: 600; }
.stat-sub.stat-sub-warn { color: var(--low); font-weight: 600; }
.stat-sub.stat-sub-danger { color: var(--critical); font-weight: 600; }
.stat-icon  { position: absolute; right: 1.25rem; top: 1.25rem; font-size: 1.75rem; opacity: 0.15; }

/* ---- Tables ---- */
/* overflow: auto (not just overflow-x) is deliberate — position:sticky's
   containing block is the nearest ancestor with overflow != visible, and
   since that ancestor was already forced to be one by overflow-x:auto (the
   spec computes overflow-y to auto too whenever overflow-x isn't visible),
   a sticky header inside it only tracks *this box's own* scroll, not the
   page's. A page-level sticky top (relative to the navbar) silently does
   nothing here — it needs an actual bounded, internally-scrolling box to
   stick within, hence max-height. */
.table-wrap { overflow: auto; max-height: 70vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--card-border); }
table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 0.875rem; }
thead { background: #fafbfc; border-bottom: 1px solid var(--card-border); }
thead th { color: #7c8695; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
           letter-spacing: 0.06em; padding: 0.75rem 1rem; text-align: left; white-space: nowrap;
           /* Sticks to the top of .table-wrap's own scroll as it's scrolled
              (see the max-height comment above). Needs its own background
              (not just inherited from `thead`) since a sticky cell paints
              over whatever scrolls beneath it. */
           position: sticky; top: 0; z-index: 2; background: #fafbfc;
           box-shadow: 0 1px 0 var(--card-border); }
tbody tr { border-bottom: 1px solid var(--card-border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
tbody td { padding: 0.85rem 1rem; color: #374151; vertical-align: middle; }
.td-mono { font-family: var(--font-mono); font-size: 0.8rem; color: #64748b; }

/* Plain `table-layout: auto` with the base `table { width: 100% }` rule
   above is what originally caused the "huge gap after Barcode" bug: auto
   layout sizes every column from its own content, then forces the table
   to EXACTLY 100% of its container regardless of whether the content
   actually needs that much room — any leftover space then gets dumped
   into one column by a browser-specific heuristic, and can visibly shift
   around later (a webfont finishing its download with different letter
   widths, a row added dynamically, etc.).
   `.tbl-fit` keeps auto layout's content-based sizing (so a value is
   never wrapped or truncated — a category name or a full barcode always
   reads on one line) but removes the forced-100% part that caused the
   gap: width:auto lets the table size itself to exactly what its content
   needs, however much or little that is, and min-width:100% only steps
   in to stretch a table that's naturally narrower than the screen (so it
   still fills a wide viewport the way it used to). Once real content
   needs more than 100% (e.g. Products with one column per storage
   location), there's no "leftover space" left to redistribute — the
   table is simply wider than its box, and .table-wrap's own horizontal
   scrollbar takes over instead of squeezing or wrapping anything. The
   <colgroup> each page provides acts as a starting width per column
   (mainly so short columns like Unit/Min Stock don't look cramped before
   any content has loaded) rather than a hard cap — auto layout still
   grows a column past it when a value needs more room. */
table.tbl-fit { table-layout: auto; width: auto; min-width: 100%; }
table.tbl-fit th,
table.tbl-fit td { white-space: nowrap; }

/* Actions column stays pinned to the right edge when a table scrolls horizontally */
th.col-actions, td.col-actions {
  position: sticky; right: 0; z-index: 1;
  background: var(--white);
  box-shadow: -6px 0 8px -6px rgba(0,0,0,0.15);
}
/* Sticky top AND sticky right at once, for the header's corner cell — stays
   pinned to the top-right regardless of which way the table is scrolled. */
thead th.col-actions { background: #fafbfc; z-index: 3; box-shadow: -6px 0 8px -6px rgba(0,0,0,0.15), 0 1px 0 var(--card-border); }
tbody tr:hover td.col-actions { background: #fafbfc; }

/* ---- Badges ---- */
.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.badge-ok       { background: var(--ok-bg);       color: var(--ok); }
.badge-low      { background: var(--low-bg);       color: var(--low); }
.badge-critical { background: var(--critical-bg);  color: var(--critical); }
.badge-out      { background: var(--out-bg);       color: var(--out); }
.badge-admin    { background: #dbeafe; color: #1d4ed8; }
.badge-supplier { background: #ede9fe; color: #6d28d9; }
.badge-nurse    { background: #fce7f3; color: #9d174d; }
.badge-in       { background: var(--ok-bg); color: var(--ok); }
.badge-out-tx   { background: var(--critical-bg); color: var(--critical); }
.badge-adj      { background: #e0f2fe; color: #0369a1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: var(--radius); border: none;
  cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--accent-blue); color: var(--white); }
.btn-primary:hover   { background: var(--accent-blue-dark); }
.btn-secondary { background: var(--off-white); color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger    { background: var(--critical); color: var(--white); }
.btn-danger:hover    { background: #a93226; }
.btn-warning   { background: var(--low);      color: var(--white); }
.btn-warning:hover   { background: #b8700a; }
.btn-navy      { background: var(--navy);     color: var(--white); }
.btn-navy:hover      { background: var(--navy-mid); }
.btn-sm { font-size: 0.78rem; padding: 0.3rem 0.7rem; }
.btn-lg { font-size: 1rem; padding: 0.7rem 1.5rem; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.05em; }
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0.55rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(26,86,219,0.1);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 0.75rem; color: #94a3b8; }

.contact-row {
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.6rem; align-items: end;
  margin-bottom: 0.75rem; padding: 0.75rem;
  background: var(--off-white); border-radius: var(--radius-lg);
}
.contact-row input[type="text"],
.contact-row input[type="email"] { width: 100%; min-width: 0; box-sizing: border-box; }
.contact-row .remove-contact-btn { align-self: end; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

/* ---- Login Page ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #0d3b52 100%);
  padding: 1rem; position: relative;
}
.login-lang-switch {
  position: absolute; top: 1.25rem; right: 1.25rem;
  display: flex; gap: 0.5rem; z-index: 10;
}
.login-lang-option {
  font-size: 0.8rem; font-weight: 600; color: #cbd5e1;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  padding: 0.4rem 0.75rem; border-radius: 20px; text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
}
.login-lang-option:hover { background: rgba(255,255,255,0.16); text-decoration: none; }
.login-lang-option.active {
  color: var(--white); background: var(--accent-blue); border-color: var(--accent-blue);
}
.login-card {
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 400px; overflow: hidden;
}
.login-header {
  background: var(--accent-blue); padding: 2rem 2rem 1.5rem;
  text-align: center; color: var(--white);
}
.login-header .logo { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.login-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; }
.login-header p  { opacity: 0.85; font-size: 0.85rem; margin-top: 0.3rem; }
.login-body { padding: 2rem; }
.login-body .form-group { margin-bottom: 1rem; }
.login-body input {
  width: 100%; font-size: 1rem;
  padding: 0.75rem 1rem; border-radius: var(--radius);
}
.login-submit {
  width: 100%; font-size: 1rem; padding: 0.85rem;
  background: var(--accent-blue); color: var(--white); border: none;
  border-radius: var(--radius); font-weight: 700; cursor: pointer;
  margin-top: 0.5rem; transition: background 0.15s;
}
.login-submit:hover { background: #133f9e; }
.login-error {
  background: var(--critical-bg); color: var(--critical);
  border-radius: var(--radius); padding: 0.75rem 1rem;
  font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem;
  border-left: 4px solid var(--critical);
}
.login-footer { text-align: center; font-size: 0.75rem; color: #94a3b8; padding: 0 2rem 1.5rem; }

/* ---- QR badge login ---- */
.badge-scan-box {
  text-align: center; padding: 1.5rem 1rem;
  border: 2px dashed var(--card-border); border-radius: var(--radius-lg);
}
.badge-scan-icon { color: var(--accent-blue); display: inline-flex; margin-bottom: 0.5rem; }
.badge-scan-icon .ui-icon { width: 2.5rem; height: 2.5rem; }
.badge-scan-box input {
  width: 100%; text-align: center; font-size: 1rem; font-family: var(--font-mono);
  padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 0.75rem;
}
.badge-scan-hint { font-size: 0.78rem; color: #64748b; line-height: 1.4; }
.login-toggle-mode {
  display: block; width: 100%; text-align: center; margin-top: 1rem;
  background: none; border: none; cursor: pointer;
  color: var(--accent-blue); font-size: 0.85rem; font-weight: 600;
  font-family: var(--font-body); text-decoration: underline;
}
.login-toggle-mode:hover { color: #133f9e; }

/* ---- QR badge print area ---- */
.qr-print-name { font-weight: 700; font-size: 1rem; color: var(--navy); letter-spacing: -0.01em; }
@media print {
  body * { visibility: hidden; }
  #qrPrintArea, #qrPrintArea * { visibility: visible; }
  #qrPrintArea {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* ---- Dashboard Grid ---- */
.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.col-8  { grid-column: span 8; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-12 { grid-column: span 12; }

/* ---- Stock Level Bar ---- */
.stock-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 4px; }
.stock-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.stock-bar-fill.ok       { background: var(--ok); }
.stock-bar-fill.low      { background: var(--low); }
.stock-bar-fill.critical { background: var(--critical); }
.stock-bar-fill.out      { background: var(--out); }

/* ---- Clickable per-location stock cell (Admin > All Products) ----
   The number itself is a <button> so it's keyboard-reachable. The pale
   pill background, dotted underline and search icon are all visible AT
   REST (not just on hover) so it reads as clickable at a glance; hover/
   focus just deepens the same cues to confirm the interaction. */
.loc-stock-cell {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-blue-pale); border: 1px solid transparent;
  padding: 2px 7px; margin: -2px -7px -2px 0;
  border-radius: 999px; cursor: pointer; font: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.loc-stock-cell .mono {
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: currentColor; text-underline-offset: 2px;
}
.loc-stock-cell-icon { width: 12px; height: 12px; opacity: 0.65; color: var(--accent-blue); transition: opacity 0.12s; flex-shrink: 0; }
.loc-stock-cell:hover,
.loc-stock-cell:focus-visible {
  background: var(--accent-blue-pale);
  border-color: var(--accent-blue);
  outline: none;
}
.loc-stock-cell:hover .mono,
.loc-stock-cell:focus-visible .mono { text-decoration-style: solid; }
.loc-stock-cell:hover .loc-stock-cell-icon,
.loc-stock-cell:focus-visible .loc-stock-cell-icon { opacity: 1; }
.loc-stock-cell:focus-visible { box-shadow: 0 0 0 2px var(--accent-blue); }

/* ---- Lot / Expiry details modal (light theme, matches admin panel) ---- */
.lot-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(13,27,42,0.55); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 1.25rem;
}
.lot-modal.show { display: flex; }
.lot-modal-card {
  width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lot-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.lot-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.lot-modal-subtitle { font-size: 0.82rem; color: #64748b; margin-top: 2px; }
.lot-modal-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--off-white); border: 1px solid var(--border); color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.12s;
}
.lot-modal-close:hover { background: var(--border); }
.lot-modal-close svg { width: 16px; height: 16px; }
.lot-modal-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.lot-modal-loading, .lot-modal-empty {
  text-align: center; color: #64748b; font-size: 0.9rem; padding: 2rem 1rem;
}
.lot-modal-table { width: 100%; min-width: unset; border-collapse: collapse; font-size: 0.88rem; table-layout: fixed; }
.lot-modal-table th:nth-child(1), .lot-modal-table td:nth-child(1) { width: 28%; }
.lot-modal-table th:nth-child(2), .lot-modal-table td:nth-child(2) { width: 38%; }
.lot-modal-table th:nth-child(3), .lot-modal-table td:nth-child(3) { width: 34%; text-align: right; padding-right: 0.75rem; }
.lot-modal-table th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 600; padding: 0 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.lot-modal-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--off-white); color: var(--navy); overflow-wrap: break-word; }
.lot-modal-table tr:last-child td { border-bottom: none; }
.lot-expiry-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lot-badge-expired, .lot-badge-soon {
  display: inline-block; margin-left: 0; white-space: nowrap;
}
.lot-badge-expired { background: var(--critical-bg); color: var(--critical); }
.lot-badge-soon    { background: var(--low-bg); color: var(--low); }

/* ---- Alert Card ---- */
.alert-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--radius);
  background: var(--off-white); border: 1px solid var(--border);
  margin-bottom: 0.5rem; transition: background 0.1s;
}
.alert-item:last-child { margin-bottom: 0; }
.alert-item.critical { background: var(--critical-bg); border-color: #f5a89e; }
.alert-item.low      { background: var(--low-bg);      border-color: #f5d08e; }
.alert-icon { font-size: 1.2rem; flex-shrink: 0; }
.alert-info { flex: 1; min-width: 0; }
.alert-name { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-loc  { font-size: 0.78rem; color: #64748b; }
.alert-qty  { text-align: right; flex-shrink: 0; }
.alert-qty strong { display: block; font-size: 1.1rem; font-weight: 700; }
.alert-qty span   { font-size: 0.75rem; color: #94a3b8; }

/* ============================================
   NURSE STOCK-OUT STATION — refined, calm, pro
   ============================================ */
body.role-nurse {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(26,86,219,0.12), transparent 60%),
    #070b13;
}

/* .page-header h1/p default to navy/dark-grey for light-background pages.
   Checklist and Missing Item run in nurse-mode's dark theme, where that
   text blends into the background almost completely — force it light. */
body.role-nurse .page-header h1 { color: var(--white); }
body.role-nurse .page-header p  { color: #94a3b8; }

.nurse-mode { max-width: 100%; padding: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ---- Top bar ---- */
.nurse-topbar {
  background: rgba(13,27,42,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.nurse-topbar .brand { display: flex; align-items: center; gap: 0.55rem; }
.brand-logo { font-size: 1.35rem; }
.brand-name { color: var(--white); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; }
.brand-tag {
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-blue-light); background: rgba(26,86,219,0.15);
  padding: 3px 8px; border-radius: 20px; margin-left: 0.25rem;
}
.nurse-topbar-right { display: flex; align-items: center; gap: 0.6rem; }

/* Every item on the right — language, checklist, session count, nurse
   name, change password, logout — shares this same pill: same height,
   same font size, same border/radius. Only the accent (Checklist, the
   primary action) and the hover-danger (Logout) colour differ. */
.lang-switch-btn, .checklist-link, .topbar-btn, .session-counter, .nurse-id, .nurse-topbar .logout-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1;
  font-size: 0.8rem; font-weight: 500; font-family: var(--font-body);
  color: #94a3b8; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  padding: 0.5rem 0.85rem; border-radius: var(--radius);
  text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.checklist-link, .topbar-btn, .nurse-topbar .logout-btn { cursor: pointer; }
.topbar-btn:hover, .nurse-id:hover { background: rgba(255,255,255,0.1); text-decoration: none; }

.session-num { color: var(--accent-blue-light); font-size: 0.85rem; font-weight: 800; font-family: var(--font-mono); }
.session-lbl { color: #5b6b80; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }

.nurse-id-icon { display: inline-flex; }

.nurse-topbar .logout-btn:hover { background: rgba(192,57,43,0.2); color: #fca5a5; border-color: rgba(192,57,43,0.3); text-decoration: none; }

.checklist-link {
  font-weight: 600; color: var(--accent-blue-light);
  background: rgba(26,86,219,0.12); border-color: rgba(26,86,219,0.25);
}
.checklist-link:hover { background: rgba(26,86,219,0.22); text-decoration: none; }

/* ---- Location bar ---- */
.location-bar {
  background: rgba(13,27,42,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.85rem 1.5rem;
}
.location-bar-inner { max-width: 620px; margin: 0 auto; }

.location-current { display: flex; align-items: center; gap: 0.85rem; }
.location-pin { font-size: 1.3rem; }
.location-label { color: #5b6b80; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.location-value { color: var(--white); font-size: 1.15rem; font-weight: 700; margin-top: 1px; }
.location-change {
  margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--accent-blue-light);
  background: rgba(26,86,219,0.12); border: 1px solid rgba(26,86,219,0.25);
  padding: 0.45rem 1rem; border-radius: var(--radius); cursor: pointer; transition: all 0.15s;
}
.location-change:hover { background: rgba(26,86,219,0.22); }

/* Shown instead of .location-change when this tablet is bound to a fixed
   Operation location (Admin > Devices) — no "Change" affordance at all. */
.location-locked-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.25);
  color: #94a3b8;
}
.location-locked-badge svg { width: 1rem; height: 1rem; }

.location-picker-prompt { color: #94a3b8; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.location-picker-prompt strong { color: var(--accent-blue-light); }
.location-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.location-chip {
  font-size: 0.92rem; font-weight: 600; color: #cbd5e1;
  background: var(--navy-mid); border: 1.5px solid var(--navy-light);
  padding: 0.7rem 1.25rem; border-radius: 999px; cursor: pointer; transition: all 0.15s;
  min-height: 46px;
}
.location-chip:hover { border-color: var(--accent-blue); color: var(--white); background: var(--navy-light); }
.location-chip:active { transform: scale(0.97); }

/* ---- Scan zone ---- */
.nurse-scan-zone {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 1.75rem 1.5rem 2.5rem;
}

.nurse-error-banner {
  width: 100%; max-width: 560px;
  background: linear-gradient(180deg, #c0392b, #a93226); color: var(--white); font-weight: 600;
  text-align: center; padding: 1rem 1.25rem; font-size: 0.95rem; display: none;
  border-radius: var(--radius-lg); margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(192,57,43,0.35);
  animation: shake 0.4s ease;
}
.nurse-error-banner.show { display: block; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

/* ---- Scan box ---- */
.scan-box {
  width: 100%; max-width: 680px;
  background: linear-gradient(180deg, rgba(27,47,69,0.9), rgba(19,34,51,0.9));
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.08);
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Locked state (before location chosen) */
.scan-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem 1rem; text-align: center;
}
.scan-locked-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6; animation: bobUp 1.6s ease-in-out infinite; }
@keyframes bobUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.scan-locked-text { color: #64748b; font-size: 1rem; font-weight: 500; }

/* Active state */
.scan-active { display: none; }
.scan-active.ready { display: block; }

.scan-prompt {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--accent-blue-light); font-size: 0.85rem; font-weight: 600;
  margin-bottom: 1rem; text-align: center;
}
.scan-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-blue);
  box-shadow: 0 0 0 0 rgba(26,86,219,0.6); animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(26,86,219,0.5); }
  70% { box-shadow: 0 0 0 12px rgba(26,86,219,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,86,219,0); }
}

.scan-input-wrap { position: relative; margin-bottom: 1.25rem; }
.scan-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--accent-blue); pointer-events: none; }
#barcodeInput {
  width: 100%; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600;
  color: var(--white); background: rgba(7,11,19,0.6); border: 2px solid var(--accent-blue);
  border-radius: var(--radius-lg); padding: 1.05rem 1rem 1.05rem 3.4rem;
  outline: none; caret-color: var(--accent-blue); letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px rgba(26,86,219,0.12);
  transition: box-shadow 0.2s;
}
#barcodeInput::placeholder { color: #475569; font-size: 1rem; font-weight: 400; letter-spacing: 0; }
#barcodeInput:focus { box-shadow: 0 0 0 5px rgba(26,86,219,0.28); }

/* Product preview */
.product-preview {
  background: rgba(7,11,19,0.5); border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.07); padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem; display: none;
  animation: fadeUp 0.25s ease;
}
.product-preview.visible { display: block; }
.product-preview.error { border-color: rgba(192,57,43,0.5); background: rgba(192,57,43,0.08); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.preview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.preview-info { min-width: 0; flex: 1; }
.preview-name { font-size: 1.25rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; line-height: 1.2; }
.preview-meta { font-size: 0.8rem; color: #64748b; margin-top: 0.3rem; }

.preview-stock-badge {
  flex-shrink: 0; text-align: center; border-radius: var(--radius);
  padding: 0.5rem 0.85rem; min-width: 84px;
  border: 1.5px solid var(--navy-light); background: rgba(255,255,255,0.03);
}
.preview-stock-badge.ok   { border-color: rgba(45,158,95,0.4);  background: rgba(45,158,95,0.1); }
.preview-stock-badge.low  { border-color: rgba(212,130,10,0.5); background: rgba(212,130,10,0.12); }
.preview-stock-badge.out  { border-color: rgba(192,57,43,0.5);  background: rgba(192,57,43,0.12); }
.preview-stock-num { font-size: 1.6rem; font-weight: 800; font-family: var(--font-mono); color: var(--white); line-height: 1; }
.preview-stock-badge.ok  .preview-stock-num { color: #4ade80; }
.preview-stock-badge.low .preview-stock-num { color: #fbbf24; }
.preview-stock-badge.out .preview-stock-num { color: #f87171; }
.preview-stock-label { font-size: 0.66rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.preview-lowwarn {
  display: none; margin-top: 0.85rem; padding: 0.6rem 0.85rem;
  background: rgba(212,130,10,0.12); border: 1px solid rgba(212,130,10,0.3);
  border-radius: var(--radius); color: #fbbf24; font-size: 0.82rem; font-weight: 600;
}

/* Quantity */
.qty-section { margin-bottom: 1.25rem; }
.qty-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 0.6rem; text-align: center; }
.qty-wrap { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.qty-btn {
  width: 58px; height: 58px; border-radius: 16px; font-size: 1.8rem; font-weight: 700;
  background: var(--navy-light); color: var(--white); border: 1px solid rgba(255,255,255,0.08); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.12s;
  flex-shrink: 0;
}
.qty-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
.qty-btn:active { transform: scale(0.92); }
#qtyInput {
  width: 110px; font-family: var(--font-mono); font-size: 2rem; font-weight: 800; text-align: center;
  color: var(--white); background: rgba(7,11,19,0.6); border: 1.5px solid var(--navy-light);
  border-radius: var(--radius-lg); padding: 0.5rem; outline: none;
  -moz-appearance: textfield;
}
#qtyInput::-webkit-outer-spin-button, #qtyInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* BIG confirm button */
.btn-stock-out {
  width: 100%; padding: 1.35rem; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #0fb5b8, #0a9396); color: var(--white); border: none; border-radius: 18px;
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  box-shadow: 0 8px 24px rgba(26,86,219,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-stock-out-icon { font-size: 1.4rem; }
.btn-stock-out:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,86,219,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-stock-out:active:not(:disabled) { transform: translateY(0); }
.btn-stock-out:disabled { background: #16202e; color: #475569; cursor: not-allowed; box-shadow: none; }

/* ---- Case details (entered once per stock-out) ---- */
.case-details {
  background: rgba(7,11,19,0.45); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1.25rem;
}
.case-details-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.case-details-title { color: #cbd5e1; font-size: 0.9rem; font-weight: 700; }
.case-details-hint { color: #64748b; font-size: 0.72rem; }
.case-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.case-details-grid .patient-id-wrap { margin-bottom: 0; }
.lbl-optional { color: #475569; font-size: 0.68rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---- Scanned-items cart ---- */
.scan-cart { margin-bottom: 1.25rem; }
.scan-cart-head {
  color: #5b6b80; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; margin-bottom: 0.6rem; padding-left: 0.15rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.scan-cart-count {
  background: var(--accent-blue); color: #04252b; font-size: 0.72rem; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 6px; letter-spacing: 0;
}
.scan-cart-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  color: #475569; font-size: 0.85rem; text-align: center; padding: 1.25rem 1rem;
  background: rgba(7,11,19,0.35); border: 1px dashed rgba(255,255,255,0.08); border-radius: var(--radius-lg);
}
.cart-line {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(7,11,19,0.5); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
  animation: fadeUp 0.2s ease;
}
.cart-line-error { border-color: rgba(192,57,43,0.6); background: rgba(192,57,43,0.1); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { color: var(--white); font-weight: 700; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-meta { color: #64748b; font-size: 0.72rem; margin-top: 2px; }
.cart-line-qty { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cart-line-qty .qty-btn { width: 40px; height: 40px; font-size: 1.35rem; border-radius: 12px; }
.cart-qty { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 800; color: var(--white); min-width: 32px; text-align: center; }
.cart-qty.at-max { color: #fbbf24; }
.cart-remove {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem;
  background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.3); color: #f87171; cursor: pointer;
  transition: all 0.12s;
}
.cart-remove:hover { background: rgba(192,57,43,0.25); }
@media (max-width: 560px) { .case-details-grid { grid-template-columns: 1fr; } }

/* ---- Product picker (one barcode → several products) ---- */
.scan-picker {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(3,6,12,0.8); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 1.25rem;
}
.scan-picker.show { display: flex; }
.scan-picker-card {
  width: 100%; max-width: 460px; max-height: 85vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(27,47,69,0.98), rgba(19,34,51,0.98));
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); padding: 1.25rem;
}
.scan-picker-head { margin-bottom: 0.9rem; }
.scan-picker-title { color: var(--white); font-size: 1.15rem; font-weight: 800; }
.scan-picker-hint { color: #94a3b8; font-size: 0.85rem; margin-top: 0.25rem; }
.scan-picker-list { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.picker-item {
  display: flex; align-items: center; gap: 0.85rem; text-align: left; width: 100%;
  background: rgba(7,11,19,0.55); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 0.85rem 1rem; cursor: pointer; transition: all 0.12s;
  font-family: var(--font-body);
}
.picker-item:hover { border-color: var(--accent-blue); background: rgba(26,86,219,0.12); }
.picker-item.out { opacity: 0.55; }
.picker-item-info { flex: 1; min-width: 0; }
.picker-item-name { color: var(--white); font-weight: 700; font-size: 1rem; }
.picker-item-meta { color: #64748b; font-size: 0.76rem; margin-top: 2px; }
.picker-item-stock { flex-shrink: 0; font-family: var(--font-mono); font-weight: 800; color: var(--accent-blue-light); font-size: 0.95rem; }
.picker-item.out .picker-item-stock { color: #f87171; }
.scan-picker-cancel {
  margin-top: 1rem; width: 100%; padding: 0.85rem; border-radius: 14px;
  background: var(--navy-light); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.1);
  font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: var(--font-body);
}
.scan-picker-cancel:hover { background: rgba(255,255,255,0.08); color: var(--white); }
/* Used when Cancel sits beside Confirm in a row (e.g. the batch/lot entry
   prompt) instead of alone below a list — drop the full-width/margin-top
   defaults so it behaves as a normal flex sibling. */
.scan-picker-cancel.inline {
  margin-top: 0; width: auto; flex: 0 0 auto; padding: 0.85rem 1.25rem; white-space: nowrap;
}
/* .btn is inline-flex with no justify-content, so its label hugs the left
   edge once stretched (flex:1) beside Cancel — center it here rather than
   in the shared .btn rule, which other (non-stretched) buttons rely on. */
.scan-picker-card .btn-confirm-wide { flex: 1; justify-content: center; }
/* Field labels (e.g. "Batch No.", "Expiry Date") default to a dark grey
   meant for light-background forms — on this dark card they blend into the
   background almost completely. Force them light here. */
.scan-picker-card .form-group label { color: #cbd5e1; }
.scan-picker-card .form-hint { color: #94a3b8; }

/* ---- Scan-to-Stock-In cart (store keeper, light theme) ---- */
.sin-line { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.sin-line:last-child { border-bottom: none; }
.sin-line-info { flex: 1; min-width: 0; }
.sin-line-name { font-weight: 600; }
.sin-line-meta { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.sin-line-qty { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.sin-qty { width: 66px; text-align: center; padding: 0.35rem 0.4rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-weight: 600; }

/* ---- Success toast ---- */
.nurse-success {
  position: fixed; inset: 0; background: rgba(3,6,12,0.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.nurse-success.show { opacity: 1; pointer-events: all; }
.nurse-success-card {
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border-radius: 24px; padding: 2.5rem 2.5rem 2rem;
  text-align: center; border: 1px solid rgba(26,86,219,0.3); max-width: 380px; width: 90%;
  box-shadow: 0 0 80px rgba(26,86,219,0.25);
  animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.success-check { width: 72px; height: 72px; margin: 0 auto 1.1rem; }
.success-svg { width: 100%; height: 100%; }
.success-svg circle { stroke: var(--accent-blue); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCircle 0.5s ease forwards; }
.success-svg path { stroke: var(--accent-blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck 0.35s 0.4s ease forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.success-msg  { color: var(--white); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.success-sub  { color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem; }
.success-sub span { color: var(--accent-blue-light); font-weight: 700; }
.success-undo {
  margin-top: 1.25rem; font-size: 0.95rem; font-weight: 700; color: var(--white);
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15);
  padding: 0.7rem 1.75rem; border-radius: 12px; cursor: pointer; transition: all 0.15s;
}
.success-undo:hover { background: rgba(212,130,10,0.2); border-color: rgba(212,130,10,0.4); color: #fbbf24; }
.success-dismiss { color: #475569; font-size: 0.78rem; margin-top: 1rem; }

/* ---- Recent list ---- */
.nurse-recent { width: 100%; max-width: 680px; margin-top: 1.75rem; }
.nurse-recent-title { color: #5b6b80; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 0.75rem; padding-left: 0.25rem; }
.nurse-recent-empty {
  color: #3b4858; font-size: 0.85rem; text-align: center; padding: 1.5rem 1rem;
  border: 1px dashed rgba(255,255,255,0.07); border-radius: var(--radius-lg);
}
.recent-empty-icon { display: block; font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.5; }

.nurse-tx-item {
  background: rgba(27,47,69,0.6); border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid rgba(255,255,255,0.06); animation: fadeUp 0.3s ease;
}
.nurse-tx-item.undone { opacity: 0.45; }
.nurse-tx-item.undone .nurse-tx-name { text-decoration: line-through; }
.nurse-tx-main { min-width: 0; flex: 1; }
.nurse-tx-name { color: var(--white); font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nurse-tx-meta { color: #64748b; font-size: 0.75rem; margin-top: 2px; }
.nurse-tx-right { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.nurse-tx-qty { color: #f87171; font-size: 1.1rem; font-weight: 800; font-family: var(--font-mono); }
.nurse-tx-undo {
  font-size: 0.78rem; font-weight: 600; color: #94a3b8;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  padding: 0.4rem 0.85rem; border-radius: var(--radius); cursor: pointer; transition: all 0.15s;
}
.nurse-tx-undo:hover { background: rgba(212,130,10,0.18); color: #fbbf24; border-color: rgba(212,130,10,0.35); }

/* Light-theme counterpart of the block above, for the store keeper's
   Scan Stock Out page (role-supplier runs on a light background, unlike
   the nurse scan station's dark theme). */
.sout-recent { width: 100%; margin-top: 1.5rem; }
.sout-recent-title { color: var(--slate); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.6rem; }
.sout-recent-empty {
  color: #94a3b8; font-size: 0.85rem; text-align: center; padding: 1.25rem 1rem;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
}
.sout-tx-item {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--border);
}
.sout-tx-item.undone { opacity: 0.55; }
.sout-tx-item.undone .sout-tx-name { text-decoration: line-through; }
.sout-tx-main { min-width: 0; flex: 1; }
.sout-tx-name { color: var(--navy); font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sout-tx-meta { color: #64748b; font-size: 0.74rem; margin-top: 2px; }
.sout-tx-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.sout-tx-qty { color: var(--critical); font-size: 1.05rem; font-weight: 800; font-family: var(--font-mono); }
.sout-tx-undo {
  font-size: 0.78rem; font-weight: 600; color: var(--slate);
  background: var(--off-white); border: 1px solid var(--border);
  padding: 0.4rem 0.8rem; border-radius: var(--radius); cursor: pointer; transition: all 0.15s;
}
.sout-tx-undo:hover { background: #fde8e6; color: var(--critical); border-color: #f5b8b0; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Stock-In Form ---- */
.stock-in-card { max-width: 700px; }
.barcode-scan-row {
  display: flex; gap: 0.75rem; align-items: flex-end;
}
.barcode-scan-row .form-group { flex: 1; }
.barcode-scan-row .btn { height: 42px; }

/* ---- Export Page ---- */
.export-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.export-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); padding: 1.5rem;
  text-align: center; transition: all 0.15s; cursor: pointer;
}
.export-card:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.export-card .icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.export-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.export-card p  { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 0.35rem; margin-top: 1.25rem; flex-wrap: wrap; }
.page-btn {
  font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.7rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--white); color: var(--navy); cursor: pointer; transition: all 0.12s;
  text-decoration: none;
}
.page-btn:hover { background: var(--accent-blue); color: var(--white); border-color: var(--accent-blue); text-decoration: none; }
.page-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---- Search/Filter Bar ---- */
.filter-bar {
  display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: flex-end;
}
.filter-bar input, .filter-bar select {
  font-family: var(--font-body); font-size: 0.875rem; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 0.85rem; outline: none; transition: border-color 0.15s;
}
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--accent-blue); }
.filter-bar input[type="search"] { min-width: 220px; }

/* A plain flex .filter-bar (above) sizes each field to its own content,
   which works fine for 3-4 fields but starts cutting the last field off the
   edge of the page once a form grows past that — flex-wrap only starts a
   new line once an item doesn't fit, it doesn't force *all* items onto a
   shared, predictable width first, so a couple of wide native <select>s can
   crowd a trailing field half off-screen before wrapping ever kicks in.
   .filter-bar-grid is for those busier filter bars (Transaction History,
   Audit Trail): CSS Grid's auto-fit + minmax recomputes how many equal-width
   columns actually fit *before* placing anything, so a field can never be
   cut off — it always lands in a full column, wrapping to the next row
   whenever the current one is full. */
.filter-bar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem; align-items: end; margin-bottom: 1.25rem;
}
.filter-bar-grid > div { min-width: 0; }
.filter-bar-grid label {
  font-size: 0.75rem; font-weight: 600; color: #374151; display: block; margin-bottom: 3px;
}
.filter-bar-grid input, .filter-bar-grid select {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 0.875rem;
  color: var(--navy); background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 0.85rem; outline: none; transition: border-color 0.15s;
}
.filter-bar-grid input:focus, .filter-bar-grid select:focus { border-color: var(--accent-blue); }
.filter-bar-grid .filter-btn-group { display: flex; gap: 0.5rem; align-items: center; }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy); color: #475569; font-size: 0.78rem;
  padding: 0.85rem 2rem; display: flex; justify-content: space-between;
  border-top: 1px solid var(--navy-light); margin-top: auto;
}

/* ---- Utilities ---- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: #94a3b8; }
.text-ok   { color: var(--ok); }
.text-warn { color: var(--low); }
.text-danger { color: var(--critical); }
.text-teal { color: var(--accent-blue); }
.fw-bold { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #64748b; }
.empty-state .icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.empty-state h3 { font-size: 1rem; font-weight: 600; color: #374151; }
.empty-state p  { font-size: 0.85rem; margin-top: 0.3rem; }

/* ============================================
   RESPONSIVE — Mobile & Tablet
   Breakpoints: 1024px (tablet), 768px (tablet-sm), 480px (mobile)
   ============================================ */

/* ---- Hamburger Menu Button ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 8px;
  /* No margin-left:auto here — .nav-user already has it, and an auto
     margin on both splits the free space between them, pulling the user
     icon away from the hamburger instead of sitting flush next to it. */
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile Drawer Menu ---- */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--navy-mid);
  border-bottom: 2px solid var(--accent-blue);
  z-index: 99;
  padding: 0.75rem 1rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.mobile-menu.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu a {
  display: flex; align-items: center;
  color: #94a3b8; font-size: 0.95rem; font-weight: 500;
  padding: 0.75rem 0.85rem; border-radius: var(--radius);
  transition: all 0.15s; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover, .mobile-menu a.active {
  color: var(--white); background: var(--navy-light); text-decoration: none;
}
.mobile-menu a.active { color: var(--accent-blue-light); }
.mobile-menu-divider {
  border: none; border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0.5rem 0;
}
.mobile-menu-user {
  font-size: 0.8rem; color: #64748b;
  padding: 0.5rem 0.85rem 0.25rem;
}
.mobile-menu .btn-logout-mobile {
  display: block; margin-top: 0.5rem;
  background: rgba(192,57,43,0.15); color: #f87171;
  border: 1px solid rgba(192,57,43,0.3); border-radius: var(--radius);
  padding: 0.6rem 0.85rem; font-size: 0.875rem; font-weight: 600;
  text-decoration: none; text-align: center;
}

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .col-8  { grid-column: span 12; }
  .col-4  { grid-column: span 12; }
  .col-6  { grid-column: span 12; }
  .col-12 { grid-column: span 12; }

  .main-content { padding: 1.25rem 1.25rem; }

  /* Reorder dashboard: alerts before activity */
  .dashboard-grid { display: flex; flex-direction: column; gap: 1.25rem; }

  /* Nav: hide links, show hamburger */
  .nav-links { display: none !important; }
  .navbar > .nav-dropdown { display: none !important; } /* Reports menu only — must not hide .row-action-dropdown reused inside tables */
  .nav-hamburger { display: flex; }
  .nav-user .user-name { display: none; }
  .nav-user .lang-switch { display: none; } /* mobile drawer has its own switcher */

  /* Stats: 2x2 grid on tablet */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tables: horizontal scroll with sticky first col */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }

  /* Form grid: 2 cols max */
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid [style*="grid-column: span 2"] { grid-column: span 2; }

  /* Filter bar: wrap */
  .filter-bar { flex-wrap: wrap; gap: 0.5rem; }
  .filter-bar input[type="search"] { min-width: 160px; flex: 1; }

  /* Page header */
  .page-header { flex-wrap: wrap; gap: 0.75rem; }
  .page-actions { flex-wrap: wrap; }

  /* Export cards: 1 col */
  .export-options { grid-template-columns: 1fr; }
}

/* ---- Small Tablet / Large Mobile (≤768px) ---- */
@media (max-width: 768px) {
  :root { --nav-h: 56px; }

  .main-content { padding: 1rem; }

  .contact-row { grid-template-columns: 1fr; }

  /* Navbar compact */
  .navbar { padding: 0 1rem; gap: 0.75rem; }
  .nav-brand { min-width: auto; }
  .nav-title { font-size: 1rem; }
  .nav-badge { display: none; }
  .btn-logout { display: none; } /* shown in mobile menu */

  /* Stats: still 2 cols but smaller */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-card { padding: 1rem 1.1rem; }
  .stat-value { font-size: 1.6rem; }
  .stat-icon { font-size: 1.4rem; }

  /* Page header */
  .page-header h1 { font-size: 1.25rem; }
  .page-header p  { font-size: 0.82rem; }
  .btn { font-size: 0.82rem; padding: 0.45rem 0.9rem; }

  /* Cards */
  .card-header { padding: 0.85rem 1rem; }
  .card-body   { padding: 1rem; }

  /* Tables → stacked cards (no horizontal scroll needed). thead is hidden
     below, so the sticky-header scroll box above is pointless here too —
     back to the page scrolling normally, unbounded. */
  .table-wrap { overflow: visible; max-height: none; }
  .table-wrap table { min-width: unset; width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: block; }
  .table-wrap tbody tr {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }
  .table-wrap tbody tr:hover { background: var(--white); }
  .table-wrap tbody td {
    display: block;
    width: auto;
    max-width: none !important;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--off-white);
    text-align: left;
    white-space: normal;
  }
  .table-wrap tbody td:last-child { border-bottom: none; }
  .table-wrap tbody td:empty { display: none; }
  .table-wrap tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
  }
  .table-wrap tbody td:not([data-label])::before,
  .table-wrap tbody td[data-label=""]::before { content: none; margin-bottom: 0; }
  /* Primary/identifying column reads as a card title, not a labeled field */
  .table-wrap tbody td[data-primary] { background: var(--off-white); padding: 0.7rem 0.9rem; }
  .table-wrap tbody td[data-primary]::before { display: none; }
  .table-wrap tbody td[data-primary] { font-size: 0.95rem; }
  /* Action buttons row: lay buttons out horizontally, left-aligned */
  .table-wrap tbody td[data-label="Actions"] > div { justify-content: flex-start !important; }
  /* Cards are stacked full-width here, not scrolled — undo the sticky pin from the desktop/tablet layout */
  td.col-actions { position: static; box-shadow: none; }
  /* Stock-bar mini visualizations don't need a fixed 60px width anymore */
  .table-wrap tbody .stock-bar { width: 100px !important; display: inline-block; vertical-align: middle; margin-top: 0; margin-left: 0.5rem; }
  .table-wrap tbody td .mono.fw-bold { display: inline-block; vertical-align: middle; }
  /* Empty-state rows (colspan placeholder) shouldn't get card chrome */
  .table-wrap tbody tr:has(td[colspan]) {
    background: transparent; border: none; box-shadow: none; margin-bottom: 0;
  }
  .table-wrap tbody tr:has(td[colspan]) td { padding: 0; border-bottom: none; }

  /* Alert items */
  .alert-name { font-size: 0.82rem; }
  .alert-loc  { font-size: 0.72rem; }

  /* Location stock bars */
  .stock-bar { width: 40px !important; }

  /* Footer */
  .site-footer { flex-direction: column; gap: 0.25rem; text-align: center; padding: 0.75rem 1rem; }

  /* Form grid: 1 col */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid [style*="grid-column: span 2"] { grid-column: span 1; }

  /* Nurse scan — collapse every topbar pill to icon-only so the row fits */
  .nurse-topbar { padding: 0.75rem 1rem; }
  .brand-tag { display: none; }
  .nurse-topbar-right { gap: 0.4rem; }
  .topbar-label { display: none; }
  .lang-switch-btn, .checklist-link, .topbar-btn, .session-counter, .nurse-id, .nurse-topbar .logout-btn { padding: 0.5rem 0.65rem; }
  .location-bar { padding: 0.75rem 1rem; }
  .nurse-scan-zone { padding: 1rem; }
  .scan-box { padding: 1.25rem; border-radius: 16px; }
  #barcodeInput { font-size: 1.1rem; padding: 0.85rem 0.85rem 0.85rem 3rem; }
  .scan-icon { font-size: 1.3rem; }

  /* Transaction filters */
  .filter-bar > div { flex: 1; min-width: 120px; }
  .filter-bar input[type="date"] { width: 100%; }

  /* Pagination */
  .pagination { gap: 0.25rem; }
  .page-btn { padding: 0.3rem 0.55rem; font-size: 0.78rem; }
}

/* ---- Mobile (≤480px) ---- */
@media (max-width: 480px) {
  .main-content { padding: 0.75rem; }

  /* Login language switch: move above the card instead of floating over it */
  .login-lang-switch { position: static; justify-content: center; margin-bottom: 1rem; }
  .login-page { flex-direction: column; }

  /* Stats: stack 2x2 then single on very small */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat-card { padding: 0.85rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-sub { display: none; }
  .stat-icon { display: none; }

  /* Page header: stack */
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }

  /* Dashboard grid: single column */
  .dashboard-grid { gap: 0.75rem; }

  /* Cards */
  .card { border-radius: var(--radius); }
  .card-header { padding: 0.75rem; }
  .card-body   { padding: 0.75rem; }
  .card-header h2 { font-size: 0.875rem; }

  /* Tables: cards already active from 768px breakpoint — just tighten spacing */
  .table-wrap tbody td { padding: 0.5rem 0.75rem; font-size: 0.82rem; }
  .table-wrap tbody td::before { font-size: 0.6rem; }
  .table-wrap tbody td[data-primary] { font-size: 0.88rem; padding: 0.6rem 0.75rem; }
  .td-mono  { font-size: 0.78rem; }

  /* Alert items */
  .alert-item { padding: 0.65rem 0.75rem; gap: 0.65rem; }

  /* Buttons */
  .btn { font-size: 0.8rem; padding: 0.42rem 0.75rem; }
  .btn-sm { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
  .btn-lg { font-size: 0.9rem; padding: 0.6rem 1.1rem; }

  /* Forms */
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-grid { gap: 0.85rem; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; /* prevent iOS zoom */ }

  /* Filter bar: stack */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select, .filter-bar .btn { width: 100%; }
  .filter-bar input[type="search"] { min-width: unset; }

  /* Flash */
  .flash { font-size: 0.82rem; padding: 0.7rem 0.85rem; }

  /* Barcode scan page */
  .nurse-topbar { padding: 0.6rem 0.75rem; }
  .brand-name { font-size: 0.95rem; }
  .nurse-topbar-right { gap: 0.3rem; }
  .lang-switch-btn, .checklist-link, .topbar-btn, .session-counter, .nurse-id, .nurse-topbar .logout-btn { padding: 0.4rem 0.55rem; }
  .location-bar { padding: 0.6rem 0.75rem; }
  .location-value { font-size: 1rem; }
  .location-chip { font-size: 0.88rem; padding: 0.65rem 1.1rem; }
  .nurse-scan-zone { padding: 0.75rem; gap: 0; }
  .scan-box { padding: 1rem; border-radius: 14px; }
  #barcodeInput {
    font-size: 16px; /* prevent iOS zoom */
    padding: 0.85rem 0.75rem 0.85rem 2.75rem;
    letter-spacing: 0.02em;
  }
  .scan-icon { font-size: 1.1rem; left: 0.75rem; }
  .product-preview { padding: 0.9rem; margin-bottom: 1rem; }
  .preview-name { font-size: 1.1rem; }
  .preview-stock-num { font-size: 1.35rem; }
  .qty-wrap { gap: 0.75rem; }
  .qty-btn { width: 52px; height: 52px; font-size: 1.6rem; }
  #qtyInput { font-size: 1.7rem; width: 90px; }
  .btn-stock-out {
    font-size: 1.1rem; padding: 1.2rem 1rem;
    border-radius: 14px; letter-spacing: 0;
  }

  /* Nurse recent */
  .nurse-recent { margin-top: 1rem; }
  .nurse-tx-item { padding: 0.7rem 0.85rem; }

  /* Login */
  .login-header { padding: 1.5rem 1.5rem 1rem; }
  .login-header .logo { font-size: 2rem; }
  .login-header h1 { font-size: 1.3rem; }
  .login-body { padding: 1.25rem; }
  .login-footer { padding: 0 1.25rem 1.25rem; }

  /* Export cards */
  .export-card { padding: 1.1rem; }
  .export-card .icon { font-size: 2rem; }

  /* Stock-in form */
  .barcode-scan-row { flex-direction: column; }

  /* Pagination: hide middle pages */
  .pagination .page-btn:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  /* Nurse success overlay */
  .nurse-success-card { padding: 2rem 1.5rem; }
  .success-icon { font-size: 2.75rem; }
  .success-msg  { font-size: 1.1rem; }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 0.75rem; }
  .nav-title { font-size: 0.9rem; }
  .main-content { padding: 0.5rem; }
  .scan-box { padding: 0.85rem; }
  .btn-stock-out { font-size: 1rem; padding: 1rem 0.75rem; }
}

/* ---- Touch-friendly tap targets ---- */
@media (hover: none) and (pointer: coarse) {
  /* Ensure all tappable elements are at least 44px tall */
  .btn, .page-btn, .nav-links a, .mobile-menu a {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .qty-btn { min-height: 44px; min-width: 44px; }
  .btn-stock-out { min-height: 64px; }
  .form-group input,
  .form-group select { min-height: 44px; }

  /* Remove hover effects on touch */
  .stat-card:hover { transform: none; box-shadow: var(--shadow); }
  .export-card:hover { transform: none; box-shadow: none; }
}

/* ---- Landscape phone ---- */
@media (max-width: 768px) and (orientation: landscape) {
  .nurse-scan-zone { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0.75rem; }
  .nurse-error-banner { width: 100%; }
  .scan-box { max-width: 420px; }
  .nurse-recent { max-width: 400px; margin-top: 0; }
  :root { --nav-h: 50px; }
}

/* ---- Print ---- */
@media print {
  .navbar, .mobile-menu, .nav-hamburger, .site-footer,
  .btn, .page-actions, .filter-bar, .pagination { display: none !important; }
  .main-content { padding: 0; max-width: 100%; }
  .table-wrap { overflow: visible; box-shadow: none; border: none; }
  table { min-width: unset; font-size: 10pt; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .badge { border: 1px solid currentColor; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================
   Feature Update — Charts, Patient ID, Expiry
   ============================================= */

/* Donut legend */
.donut-legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; justify-content: center; margin-top: 1rem; }
.donut-leg-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--slate); }
.donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* =============================================
   Admin Dashboard — clickable KPI cards, sparklines,
   Cath Lab usage bars, ranked product list
   ============================================= */

/* .stat-card is normally a <div>; the admin dashboard's KPI cards are
   <a> tags instead (whole card is a link to the related module), so
   strip the browser's default link styling without touching anything
   else about the card. */
a.stat-card { text-decoration: none; color: inherit; cursor: pointer; }

/* Small trend line drawn in the corner of each KPI card, next to the
   icon badge — purely decorative context, not interactive, so it's
   sized in CSS rather than via the canvas width/height attributes
   (which would fight with Chart.js's own responsive sizing). */
canvas.stat-sparkline { width: 64px; height: 30px; flex-shrink: 0; }

/* Usage by Cath Lab — a lightweight horizontal bar list (no chart
   library needed for something this simple), each row linking through
   to the usage report. */
.cathlab-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem 0.25rem; text-decoration: none; color: inherit;
  border-radius: var(--radius); transition: background 0.1s;
}
.cathlab-row:hover { background: var(--off-white); }
.cathlab-name { flex: 0 0 130px; font-size: 0.85rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cathlab-bar-track { flex: 1; height: 10px; background: var(--off-white); border-radius: 6px; overflow: hidden; }
.cathlab-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #1a56db, #4c8dff); border-radius: 6px; }
.cathlab-value { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; color: var(--navy); min-width: 48px; text-align: right; }

/* Rank number badge for the "Top 5 Products by Usage" table */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--badge-blue-bg); color: var(--badge-blue-fg);
  font-size: 0.75rem; font-weight: 700;
}

/* Button badge (alert count on button) */
.btn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 0.65rem; font-weight: 800;
  background: var(--white); color: var(--critical); margin-left: 0.2rem;
}

/* Patient ID input on nurse scan page */
.patient-id-wrap { margin-bottom: 0.75rem; }
.patient-id-wrap input {
  width: 100%; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600;
  color: var(--white); background: rgba(7,11,19,0.6);
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  padding: 0.75rem 1rem; outline: none; text-transform: uppercase; letter-spacing: 0.06em;
  transition: border-color 0.2s;
}
.patient-id-wrap input::placeholder { color: #475569; text-transform: none; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; }
.patient-id-wrap input:focus { border-color: rgba(26,86,219,0.6); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); }

/* Backdate toggle (nurse Case Details) — explicit styling so it matches
   the dark theme instead of falling back to unstyled browser defaults
   (a native checkbox and a white-background date picker). */
.backdate-toggle {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-weight: 600; font-size: 0.95rem; color: var(--white);
}
.backdate-toggle input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin: 0;
  accent-color: var(--teal); cursor: pointer;
}
.backdate-date-label {
  display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: #64748b; margin-bottom: 0.4rem; text-align: left;
}
.backdate-date-input {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600;
  color: var(--white); background: rgba(7,11,19,0.6);
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  padding: 0.65rem 0.9rem; outline: none;
  color-scheme: dark; /* renders the native calendar icon for a dark field instead of a dark icon on dark bg */
  width: 100%; max-width: 220px;
  transition: border-color 0.2s;
}
.backdate-date-input:focus { border-color: rgba(26,86,219,0.6); box-shadow: 0 0 0 3px rgba(26,86,219,0.1); }

/* Expiry alert levels in tables */
.badge-expired { background: #fecaca; color: #7f1d1d; }

/* Audit trail — subtle row hover tint */
.table-wrap tbody tr:has(td[data-primary]) { cursor: default; }

.chart-helper-text {
  font-size: 0.78rem; color: #94a3b8; margin-top: 0.75rem; margin-bottom: 0;
  line-height: 1.5; font-style: italic;
}

/* =============================================
   Permission Matrix (User Management)
   ============================================= */
.perm-matrix-wrap {
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.perm-matrix-header h3 {
  font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.3rem;
}
.perm-matrix-header p {
  font-size: 0.82rem; color: #64748b; margin-bottom: 0.85rem;
}
.perm-quick-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}

.perm-group { margin-bottom: 1.5rem; }
.perm-group:last-child { margin-bottom: 0; }
.perm-group-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent-blue); margin-bottom: 0.5rem;
}
.perm-table-wrap { box-shadow: none; border: 1px solid var(--border); }
.perm-table { width: 100%; }
.perm-table thead th {
  text-align: center; font-size: 0.68rem;
}
.perm-table tbody td { text-align: center; }
.perm-cb {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-blue);
}

/* On mobile, the permission tables also collapse into cards via the
   existing data-label mechanism — but checkboxes need a bit more room */
@media (max-width: 768px) {
  .perm-table tbody td { padding: 0.6rem 0.9rem; }
  .perm-cb { width: 22px; height: 22px; }
  .perm-quick-actions .btn { flex: 1; min-width: 140px; text-align: center; justify-content: center; }
}

/* Admin > Devices — freshly-generated Start URL, shown once */
.device-url-box {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: #f1f5f9; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.device-url-box code {
  flex: 1; min-width: 220px; font-family: var(--font-mono); font-size: 0.82rem;
  color: #0f172a; word-break: break-all;
}