/* ═══════════════════════════════════════════════════════════════
   NLIMS — National Laboratory Information Management System
   Professional UI v5.0 | Brand: #0B3D91 / #00BFA6 / #3FA9F5
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@600;700;800;900&display=swap');

:root {
  /* NLIMS Brand Palette */
  --pri: #0B3D91; --pri-d: #082b66; --pri-l: #e8eef8; --pri-xl: #f0f4fb;
  --teal: #00BFA6; --teal-d: #00917e; --teal-l: #e0f7f3;
  --sky: #3FA9F5; --sky-l: #e3f2fd;
  --grn: #43a047; --grn-d: #2e7d32; --grn-l: #e8f5e9;
  --org: #f57c00; --org-l: #fff3e0;
  --red: #e53935; --red-d: #b71c1c; --red-l: #ffebee;
  --yel: #f9a825; --yel-l: #fff8e1;
  --pur: #8e24aa; --pur-l: #f3e5f5;
  --tel: #00897b; --tel-l: #e0f2f1;
  --g50: #fafafa; --g100: #f5f5f5; --g200: #eeeeee; --g300: #e0e0e0;
  --g400: #bdbdbd; --g500: #9e9e9e; --g600: #757575; --g700: #616161;
  --g800: #424242; --g900: #212121;
  --dark: #2D3748; --dark2: #1a202c; --white: #fff;
  /* Layout */
  --sw: 50px; --sw-exp: 240px; --th: 50px; --ft: 32px;
  --sh-xs: 0 1px 3px rgba(0,0,0,.08); --sh-sm: 0 2px 8px rgba(0,0,0,.10);
  --sh-md: 0 4px 16px rgba(0,0,0,.12); --sh-lg: 0 8px 32px rgba(0,0,0,.18);
  --r4: 4px; --r6: 6px; --r10: 10px; --r14: 14px;
  --tr: .22s ease;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Montserrat', 'Inter', sans-serif;
  --mono: 'Courier New', monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font-family:var(--font);background:#f0f2f5;color:var(--g900);overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit;font-size:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:10px}

/* ── OVERLAY ── */
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:790}
#overlay.show{display:block}

/* ══════════════════════════════════════════
   PAGE TRANSITION ANIMATION
══════════════════════════════════════════ */
@keyframes pageIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes countUp { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.12)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes ripple {
  0%   { transform:scale(0); opacity:.4; }
  100% { transform:scale(4); opacity:0; }
}

/* ══════════════════════════════════════════
   SIDEBAR — Collapsed icon strip, expand on hover
══════════════════════════════════════════ */
.sb {
  position:fixed;left:0;top:var(--th);bottom:var(--ft);
  width:var(--sw);background:var(--dark);z-index:800;
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1);
  box-shadow:2px 0 12px rgba(0,0,0,.15);
}
.sb:hover { width:var(--sw-exp); }
.sb:hover .label { opacity:1; width:auto; max-width:160px; }
.sb:hover .nav-sec-ttl span { opacity:1; width:auto; }
.sb:hover .nav-sec-ttl .arr { opacity:1; }
.sb:hover .nbadge { opacity:1; }
.sb:hover .sb-foot span { display:inline; }
.sb-brand,.sb-branch { display:none; }

/* Nav */
.sb-nav { flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0; }
.sb-nav::-webkit-scrollbar { width:2px; }

/* Section Titles */
.nav-sec-ttl {
  padding:10px 0 5px 14px;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:rgba(255,255,255,.28);
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  white-space:nowrap;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);
  margin-top:4px;transition:color var(--tr);
}
.nav-sec-ttl:first-child{border-top:none;margin-top:0}
.nav-sec-ttl:hover{color:rgba(255,255,255,.45)}
.nav-sec-ttl span{opacity:0;width:0;overflow:hidden;transition:opacity .2s,width .2s;white-space:nowrap}
.nav-sec-ttl i.arr{font-size:9px;transition:transform .25s;opacity:0}
.nav-sec-ttl.open .arr{transform:rotate(180deg)}
.nav-sub{overflow:hidden;max-height:0;transition:max-height .3s ease}
.nav-sub.open{max-height:800px}

/* Nav Items */
.ni {
  padding:9px 0 9px 14px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:all var(--tr);
  color:rgba(255,255,255,.58);font-size:13px;white-space:nowrap;
  position:relative;overflow:hidden;border-left:3px solid transparent;
}
.ni::after {
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.07);
  opacity:0;transition:opacity .15s;
}
.ni:hover::after { opacity:1; }
.ni:hover { color:rgba(255,255,255,.92); }
.ni.active {
  background:linear-gradient(90deg,rgba(0,191,166,.18),rgba(0,191,166,.04));
  border-left-color:var(--teal);color:#fff;font-weight:600;
}
.ni.active i { color:var(--teal); }
.ni i { width:20px;text-align:center;font-size:14px;opacity:.75;flex-shrink:0;transition:all var(--tr); }
.ni:hover i,.ni.active i { opacity:1; }
.ni span.label { opacity:0;width:0;overflow:hidden;transition:opacity .2s,width .2s;flex:1; }
.nbadge {
  font-size:10px;padding:1px 5px;border-radius:9px;font-weight:700;
  background:var(--red);color:#fff;flex-shrink:0;opacity:0;transition:opacity .2s;
  animation:pulse 2s infinite;
}
.nbadge.g{background:var(--grn)}.nbadge.b{background:var(--pri)}.nbadge.o{background:var(--org)}

/* Sidebar Footer */
.sb-foot {
  padding:8px 12px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
  white-space:nowrap;overflow:hidden;
}
.sb-foot p{font-size:10px;color:rgba(255,255,255,.22)}
.sb-foot span{display:none}

/* ══════════════════════════════════════════
   TOPBAR — Apollo-style dark header
══════════════════════════════════════════ */
.tb {
  position:fixed;top:0;left:0;right:0;height:var(--th);
  background:var(--dark);color:#fff;
  display:flex;align-items:center;padding:0;z-index:900;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.tb::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pri),var(--teal),var(--sky));
}

/* Hamburger */
.tb-ham {
  background:none;border:none;font-size:18px;color:rgba(255,255,255,.7);
  padding:6px 10px;border-radius:var(--r6);transition:background var(--tr);
  display:none;margin-left:8px;
}
.tb-ham:hover{background:rgba(255,255,255,.1)}

/* Brand */
.tb-brand {
  display:flex;align-items:center;gap:10px;
  padding:0 16px;height:100%;min-width:var(--sw);
  background:rgba(0,0,0,.18);flex-shrink:0;border-right:1px solid rgba(255,255,255,.08);
}
.tb-brand img{width:30px;height:30px;flex-shrink:0;object-fit:contain}
.tb-brand h2{
  font-family:var(--font-head);font-size:15px;font-weight:800;
  color:#fff;letter-spacing:.8px;white-space:nowrap;
  background:linear-gradient(135deg,#fff,var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tb-title{display:none}

/* Right side */
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:14px;flex-shrink:0}
.search-box{position:relative}
.search-box input {
  padding:6px 10px 6px 30px;border:1px solid rgba(255,255,255,.15);
  border-radius:20px;background:rgba(255,255,255,.08);width:180px;
  font-size:12px;transition:all .2s;color:#fff;
}
.search-box input::placeholder{color:rgba(255,255,255,.35)}
.search-box input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.12);width:220px}
.search-box i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:12px;pointer-events:none}

/* Bell */
.tb-ic{
  width:34px;height:34px;border-radius:50%;background:transparent;
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;font-size:16px;color:rgba(255,255,255,.7);transition:all var(--tr);
}
.tb-ic:hover{background:rgba(255,255,255,.1);color:#fff}
.tb-ic .dot{
  position:absolute;top:5px;right:5px;width:8px;height:8px;
  background:var(--red);border-radius:50%;border:2px solid var(--dark);
  animation:pulse 2s infinite;
}

/* User */
.usr-chip{display:flex;align-items:center;gap:8px;padding:4px;cursor:pointer;transition:all var(--tr);border-radius:20px}
.usr-chip:hover{background:rgba(255,255,255,.1)}
.usr-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--pri),var(--teal));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:700;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,191,166,.4);
}
.usr-chip h4{display:none}.usr-chip p{display:none}

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.main {
  margin-left:var(--sw);margin-top:var(--th);
  min-height:calc(100vh - var(--th) - var(--ft));
  padding:16px 20px;transition:margin-left var(--tr);
  padding-bottom:calc(var(--ft) + 16px);
  background:#f0f2f5;
}
.page{display:none}
.page.active{display:block;animation:pageIn .2s ease}

/* ══════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════ */
.ph {
  background:transparent;color:var(--g900);
  padding:0 0 12px 0;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-bottom:1px solid var(--g200);
}
.ph h1{
  font-family:var(--font-head);font-size:17px;font-weight:800;
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--pri),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ph p{font-size:11px;color:var(--g500);margin-top:2px}
.ph-r{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* ══════════════════════════════════════════
   STATUS PILLS
══════════════════════════════════════════ */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:8px 0}
.pill{
  display:flex;align-items:center;border-radius:20px;cursor:pointer;
  border:none;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:all var(--tr);
}
.pill:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.pill-lbl{font-size:11px;font-weight:700;padding:7px 14px;color:#fff;white-space:nowrap;letter-spacing:.3px}
.pill-val{font-size:14px;font-weight:800;padding:7px 14px;background:#fff;color:var(--g900);min-width:36px;text-align:center}
.p-grn .pill-lbl{background:var(--g600)}
.p-red .pill-lbl{background:#e53935}
.p-org .pill-lbl{background:#f57c00}
.p-blu .pill-lbl{background:#42a5f5}
.p-pur .pill-lbl{background:var(--g800)}
.p-teal .pill-lbl{background:var(--teal)}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card{
  background:#fff;border-radius:var(--r10);
  border:1px solid var(--g200);box-shadow:0 1px 4px rgba(0,0,0,.06);
  overflow:hidden;transition:box-shadow var(--tr);
}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.10)}
.card+.card{margin-top:14px}
.card-hd{
  padding:12px 16px;border-bottom:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.card-hd h2{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--g900)}
.card-hd h2 i{color:var(--pri)}
.card-bd{padding:16px}
.card-ft{padding:10px 16px;border-top:1px solid var(--g200);background:var(--g50)}

/* ══════════════════════════════════════════
   DASHBOARD STAT CARDS
══════════════════════════════════════════ */
.sr{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:16px}
.sc{
  background:#fff;border-radius:var(--r10);padding:0;
  border:1px solid var(--g200);box-shadow:0 1px 4px rgba(0,0,0,.06);
  display:flex;flex-direction:column;overflow:hidden;
  transition:all var(--tr);cursor:default;
  animation:fadeUp .4s ease both;
}
.sc:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.sc-top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px}
.si{
  width:42px;height:42px;border-radius:var(--r10);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;
}
.si-b{background:linear-gradient(135deg,var(--pri),var(--sky))}.si-g{background:linear-gradient(135deg,var(--grn),#66bb6a)}
.si-o{background:linear-gradient(135deg,var(--org),#ffa726)}.si-r{background:linear-gradient(135deg,var(--red),#ef5350)}
.si-p{background:linear-gradient(135deg,var(--pur),#ab47bc)}.si-t{background:linear-gradient(135deg,var(--teal),var(--sky))}
.si-y{background:linear-gradient(135deg,#f9a825,#ffd54f)}
.sc-val{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--g900);line-height:1;padding:0 14px 4px}
.sc-lbl{font-size:11px;color:var(--g600);padding:0 14px 8px}
.sc-bar{height:3px;background:var(--g100);margin-top:auto}
.sc-bar-fill{height:100%;border-radius:0 0 0 0;transition:width 1s ease}
.sc-b-b{background:linear-gradient(90deg,var(--pri),var(--teal))}
.sc-b-g{background:linear-gradient(90deg,var(--grn),#66bb6a)}
.sc-b-o{background:linear-gradient(90deg,var(--org),#ffa726)}
.sc-b-r{background:linear-gradient(90deg,var(--red),#ef5350)}

/* ══════════════════════════════════════════
   TABLE — Professional DataTables style
══════════════════════════════════════════ */
.tw{overflow-x:auto;border-radius:var(--r10);border:1px solid var(--g200);background:#fff}
table{width:100%;border-collapse:collapse}
thead{background:linear-gradient(135deg,var(--dark),#3d4a5c)}
th{
  padding:11px 14px;text-align:left;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.9);letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.1);cursor:default;
  font-family:var(--font-head);
}
td{padding:10px 14px;border-bottom:1px solid var(--g100);font-size:13px;color:var(--g800);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:linear-gradient(90deg,var(--pri-l),#fff)!important}
.pt-n{font-weight:700;color:var(--g900)}
.pt-m{font-size:11px;color:var(--g500);margin-top:1px}
.sid{
  display:inline-block;background:var(--dark);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:4px;letter-spacing:.5px;
}
.due-red{color:var(--red);font-weight:700}
.row-u{background:rgba(229,57,53,.04)!important}
.row-w{background:rgba(249,168,37,.05)!important}
.no-data{text-align:center;padding:48px 20px;color:var(--g400)}
.no-data i{font-size:40px;display:block;margin-bottom:12px;opacity:.5}
.no-data p{font-size:13px}

/* DataTables controls */
.dt-controls{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--g200)}
.dt-show{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g700)}
.dt-show select{padding:4px 8px;border:1px solid var(--g300);border-radius:var(--r4);font-size:12px;background:#fff}
.dt-search{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g700)}
.dt-search input{padding:5px 10px;border:1px solid var(--g300);border-radius:var(--r4);font-size:12px;width:180px;transition:border .2s}
.dt-search input:focus{outline:none;border-color:var(--teal)}

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.bg{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
}
.bg::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.bg-pending,.bg-Rpt-Pending{background:var(--red-l);color:var(--red-d)}
.bg-completed,.bg-approved,.bg-enable,.bg-Enable,.bg-Final{background:var(--grn-l);color:var(--grn-d)}
.bg-cancelled,.bg-inactive,.bg-rejected,.bg-disable,.bg-Disable{background:var(--g100);color:var(--g600)}
.bg-processing{background:var(--pur-l);color:var(--pur)}
.bg-confirmed{background:var(--grn-l);color:var(--grn-d)}
.bg-info,.bg-Partial{background:var(--sky-l);color:var(--pri)}
.bg-send-pending{background:var(--red-l);color:var(--red-d)}
.bg-reject{background:var(--red-l);color:var(--red-d)}
.bg-pending{background:var(--org-l);color:var(--org)}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 16px;
  border-radius:var(--r6);border:none;font-size:13px;font-weight:600;
  cursor:pointer;transition:all var(--tr);white-space:nowrap;position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.2);
  opacity:0;transition:opacity .15s;
}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--pri);color:#fff;box-shadow:0 2px 8px rgba(11,61,145,.3)}
.btn-p:hover{background:var(--pri-d);box-shadow:0 4px 14px rgba(11,61,145,.4)}
.btn-s{background:var(--grn);color:#fff;box-shadow:0 2px 8px rgba(67,160,71,.25)}
.btn-s:hover{background:var(--grn-d)}
.btn-d{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(229,57,53,.25)}
.btn-d:hover{background:var(--red-d)}
.btn-w{background:var(--org);color:#fff}
.btn-t{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(0,191,166,.25)}
.btn-t:hover{background:var(--teal-d)}
.btn-sec{background:#fff;color:var(--g700);border:1px solid var(--g300)}
.btn-sec:hover{background:var(--g50)}
.btn-dk{background:var(--dark);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-lg{padding:10px 22px;font-size:14px}

/* Action icon buttons */
.ic-btn{
  width:30px;height:30px;padding:0;border-radius:var(--r4);border:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;cursor:pointer;transition:all var(--tr);
}
.ic-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)}
.ic-btn.vi{background:var(--pri)}
.ic-btn.ed{background:var(--sky)}
.ic-btn.dl{background:var(--red)}
.ic-btn.wa{background:#25d366}
.ic-btn.pr{background:var(--g600)}
.ic-btn.em{background:var(--g600)}
.ic-btn.ap{background:var(--grn)}
.ic-btn.toggle-dis{background:var(--red)}
.act-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.toggle-btn{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;border:none;cursor:pointer;text-transform:uppercase}
.toggle-on{background:var(--grn-l);color:var(--grn-d)}
.toggle-off{background:var(--red-l);color:var(--red-d)}

/* ══════════════════════════════════════════
   FORMS — Professional style
══════════════════════════════════════════ */
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.sp2{grid-column:1/-1}
.fm{display:flex;flex-direction:column;gap:4px}
.fm label{font-size:12px;font-weight:600;color:var(--g700)}
.req{color:var(--red);font-weight:700}
.fc{
  padding:8px 11px;border:1.5px solid var(--g300);border-radius:var(--r6);
  font-size:13px;transition:all .2s;background:#fff;color:var(--g900);width:100%;
}
.fc:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,191,166,.1)}
.fc:read-only{background:var(--g50);color:var(--g600)}
textarea.fc{min-height:70px;resize:vertical}
select.fc{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239e9e9e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:28px;
}
.fm-hint{font-size:11px;color:var(--g500)}
.inp-grp{display:flex}
.inp-grp .fc{border-radius:var(--r6) 0 0 var(--r6);flex:1;min-width:0}
.inp-grp .btn{border-radius:0 var(--r6) var(--r6) 0;flex-shrink:0}
.inv-dropdown{
  position:absolute;z-index:200;width:100%;max-height:220px;overflow-y:auto;
  background:#fff;border:1.5px solid var(--teal);border-top:none;
  border-radius:0 0 var(--r6) var(--r6);box-shadow:var(--sh-md);display:none;
}
.inv-dropdown-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--g100);font-size:13px;transition:background .1s}
.inv-dropdown-item:hover{background:var(--teal-l)}
.inv-dropdown-item b{display:block;color:var(--g900)}
.inv-dropdown-item small{color:var(--g500);font-size:11px}
.inv-dropdown-item .price{float:right;color:var(--pri);font-weight:700}

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.fb{
  background:#fff;border-bottom:1px solid var(--g200);
  padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
.ff{display:flex;flex-direction:column;gap:3px;min-width:140px}
.ff label{font-size:11px;font-weight:700;color:var(--g700)}
.ff input,.ff select{
  padding:7px 9px;border:1.5px solid var(--g300);border-radius:var(--r6);
  font-size:13px;background:#fff;transition:border .2s;color:var(--g900);
}
.ff input:focus,.ff select:focus{outline:none;border-color:var(--teal)}
.ff select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239e9e9e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:14px;padding-right:24px;cursor:pointer;
}
.fb-acts{display:flex;gap:7px;align-items:flex-end}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagi{display:flex;align-items:center;justify-content:flex-end;padding:10px 14px;flex-wrap:wrap;gap:7px}
.pagi-info{font-size:12px;color:var(--g600);margin-right:auto}
.pagi-btns{display:flex;gap:2px;align-items:center}
.pb{
  padding:5px 10px;border:1px solid var(--g300);border-radius:var(--r4);
  background:#fff;color:var(--g700);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--tr);
}
.pb:hover:not(:disabled){background:var(--g100)}
.pb.act{background:var(--pri);color:#fff;border-color:var(--pri)}
.pb:disabled{opacity:.4;cursor:not-allowed}
.per-page{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g600)}
.per-page select{padding:3px 18px 3px 7px;border:1px solid var(--g300);border-radius:3px;font-size:12px;background:#fff;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239e9e9e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3px center;background-size:12px}

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.mo{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;
  display:none;align-items:center;justify-content:center;padding:14px;
}
.mo.open{display:flex}
.md{
  background:#fff;border-radius:var(--r10);width:100%;max-width:560px;
  max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:fadeUp .2s ease;
}
.md.lg{max-width:860px}.md.xl{max-width:1050px}.md.sm{max-width:420px}
.md-hd{
  padding:14px 18px;border-bottom:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#fff;z-index:1;
  border-top:3px solid var(--teal);
}
.md-hd h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--g900);font-family:var(--font-head)}
.md-hd h3 i{color:var(--teal)}
.md-cl{
  background:none;border:none;font-size:18px;color:var(--g500);
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--tr);
}
.md-cl:hover{background:var(--g100);color:var(--g900)}
.md-bd{padding:18px}
.md-ft{
  padding:12px 18px;border-top:1px solid var(--g200);
  display:flex;gap:9px;justify-content:flex-end;background:var(--g50);
  position:sticky;bottom:0;
}

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tabs{display:flex;border-bottom:2px solid var(--g200);margin-bottom:16px;overflow-x:auto}
.tabs::-webkit-scrollbar{height:0}
.tab{
  padding:9px 18px;font-size:13px;font-weight:600;color:var(--g600);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;transition:all var(--tr);
}
.tab:hover{color:var(--teal)}
.tab.active{color:var(--pri);border-bottom-color:var(--pri);font-weight:700}
.tp{display:none}.tp.active{display:block}

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toast-wrap{
  position:fixed;top:60px;right:12px;z-index:9999;
  display:flex;flex-direction:column;gap:7px;pointer-events:none;
}
.toast{
  padding:11px 16px;border-radius:var(--r10);color:#fff;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(0,0,0,.2);
  min-width:240px;max-width:360px;pointer-events:all;
  animation:slideRight .3s ease;
  border-left:4px solid rgba(255,255,255,.4);
}
.toast-cl{background:none;border:none;color:rgba(255,255,255,.7);font-size:15px;margin-left:auto;cursor:pointer}
.t-s{background:#2e7d32}.t-e{background:var(--red-d)}.t-i{background:var(--pri)}.t-w{background:#e65100}

/* ══════════════════════════════════════════
   ALERT
══════════════════════════════════════════ */
.al{padding:11px 14px;border-radius:var(--r6);margin-bottom:12px;display:flex;align-items:flex-start;gap:9px;font-size:13px}
.al i{margin-top:1px;flex-shrink:0}
.al-d{background:var(--red-l);color:var(--red-d);border:1px solid rgba(229,57,53,.2)}
.al-s{background:var(--grn-l);color:var(--grn-d);border:1px solid rgba(67,160,71,.2)}
.al-i{background:var(--pri-l);color:var(--pri-d);border:1px solid rgba(11,61,145,.2)}
.al-w{background:var(--yel-l);color:#e65100;border:1px solid rgba(245,124,0,.2)}

/* Section title */
.stl{font-size:13px;font-weight:700;color:var(--g900);display:flex;align-items:center;gap:7px;padding-bottom:9px;border-bottom:2px solid var(--g200);margin-bottom:12px;font-family:var(--font-head)}
.stl i{color:var(--teal)}

/* ══════════════════════════════════════════
   WIDGET GRID
══════════════════════════════════════════ */
.wg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:14px}
.wid{background:#fff;border-radius:var(--r10);border:1px solid var(--g200);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);animation:fadeUp .4s ease both}
.wid-hd{padding:10px 14px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between}
.wid-hd h3{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--g900);font-family:var(--font-head)}
.wr{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--g100);font-size:13px;transition:background var(--tr)}
.wr:hover{background:var(--pri-l)}
.wr:last-child{border-bottom:none}
.wr-l{display:flex;align-items:center;gap:7px;color:var(--g700)}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-b{background:var(--pri)}.dot-g{background:var(--grn)}.dot-o{background:var(--org)}.dot-r{background:var(--red)}

/* ══════════════════════════════════════════
   FINANCIAL
══════════════════════════════════════════ */
.fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.fc2{background:#fff;border:1px solid var(--g200);border-radius:var(--r10);padding:14px;transition:all var(--tr)}
.fc2:hover{box-shadow:var(--sh-sm);transform:translateY(-1px)}
.fc2 h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--g500);margin-bottom:6px;font-family:var(--font-head)}
.fv{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--g900);margin-bottom:8px}
.fr{display:flex;justify-content:space-between;font-size:12px;color:var(--g700);padding:2px 0}
.fr.ft{font-weight:700;color:var(--g900);border-top:1px solid var(--g300);padding-top:6px;margin-top:4px}

/* ══════════════════════════════════════════
   WORK ORDER
══════════════════════════════════════════ */
.wo-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;margin-top:14px}
.wo-sum{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r10);padding:14px}
.wo-sum-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:13px}
.wo-sum-row label{color:var(--g700);font-weight:600}
.wo-sum-row.tot{font-size:15px;padding-top:9px;border-top:2px solid var(--g300);color:var(--pri);margin-bottom:0;font-family:var(--font-head)}
.wo-sum-row.tot span{color:var(--pri);font-weight:800}
.wo-num{width:90px;padding:5px 7px;border:1.5px solid var(--g300);border-radius:var(--r4);font-size:13px;font-weight:700;text-align:right}
.wo-tests th{background:var(--dark);color:#fff;font-size:10px;padding:7px 9px;border:1px solid rgba(255,255,255,.1);text-transform:uppercase;font-family:var(--font-head)}
.wo-tests td{padding:7px 9px;border:1px solid var(--g100);font-size:13px}

/* ══════════════════════════════════════════
   AVATAR
══════════════════════════════════════════ */
.av{width:36px;height:36px;border-radius:50%;background:var(--g200);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--g600);flex-shrink:0}
.av.m{background:var(--pri-l);color:var(--pri-d)}.av.f{background:#fce4ec;color:#880e4f}

/* ══════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════ */
.set-grid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
.set-nav{list-style:none}
.set-nav li{
  padding:9px 12px;border-radius:var(--r6);cursor:pointer;font-size:13px;
  font-weight:600;color:var(--g700);transition:all var(--tr);
  display:flex;align-items:center;gap:7px;margin-bottom:2px;
}
.set-nav li:hover{background:var(--g100)}
.set-nav li.act{background:var(--teal-l);color:var(--teal-d)}
.set-nav li i{width:14px;text-align:center}
.set-sec{display:none}.set-sec.act{display:block}

/* ══════════════════════════════════════════
   PATIENT PORTAL
══════════════════════════════════════════ */
#ptPortal{position:fixed;inset:0;z-index:9800;display:none;flex-direction:column;background:linear-gradient(135deg,#061d45,var(--pri) 50%,#1a3a4a)}
#ptPortal.show{display:flex}
.pp-top{background:rgba(0,0,0,.2);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;color:#fff;flex-shrink:0}
.pp-top h2{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;font-family:var(--font-head)}
.pp-body{flex:1;overflow-y:auto;padding:16px;max-width:900px;margin:0 auto;width:100%}
.pp-card{background:#fff;border-radius:var(--r10);padding:18px;margin-bottom:14px;box-shadow:var(--sh-md)}
.pp-card h3{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:12px;display:flex;align-items:center;gap:7px;font-family:var(--font-head)}
.pp-card h3 i{color:var(--teal)}
.pp-sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.pp-s{background:var(--teal-l);border-radius:var(--r6);padding:14px;text-align:center}
.pp-s .v{font-size:22px;font-weight:800;color:var(--teal-d);font-family:var(--font-head)}
.pp-s .l{font-size:10px;color:var(--teal);font-weight:700;text-transform:uppercase;margin-top:2px}

/* ══════════════════════════════════════════
   LOGIN
══════════════════════════════════════════ */
#loginScreen{
  position:fixed;inset:0;z-index:9900;display:flex;
  background:linear-gradient(135deg,#061d45 0%,var(--pri) 40%,var(--dark) 75%,#1a3a4a 100%);
}
#loginScreen.hidden{display:none}
.li-left{flex:1.2;padding:44px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
/* Animated background orbs */
.li-left::before{
  content:'';position:absolute;width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,191,166,.18),transparent 70%);
  top:-100px;right:-100px;border-radius:50%;animation:spin 20s linear infinite;
}
.li-left::after{
  content:'';position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(63,169,245,.15),transparent 70%);
  bottom:-80px;left:-60px;border-radius:50%;
}
.li-logo{display:flex;align-items:center;gap:18px;margin-bottom:36px;position:relative;z-index:1}
.li-logo-img{width:72px;height:72px;flex-shrink:0;filter:drop-shadow(0 4px 16px rgba(0,191,166,.4));object-fit:contain}
.li-logo h1{font-family:var(--font-head);font-size:38px;font-weight:900;line-height:1.1;letter-spacing:2px}
.li-logo p{font-size:13px;opacity:.8;margin-top:4px;letter-spacing:.5px}
.li-feat{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.li-feat li{display:flex;align-items:center;gap:12px;font-size:14px;opacity:.9;animation:slideRight .4s ease both}
.li-feat li:nth-child(1){animation-delay:.1s}
.li-feat li:nth-child(2){animation-delay:.2s}
.li-feat li:nth-child(3){animation-delay:.3s}
.li-feat li:nth-child(4){animation-delay:.4s}
.li-feat li:nth-child(5){animation-delay:.5s}
.li-feat li:nth-child(6){animation-delay:.6s}
.li-feat li .fi{
  width:32px;height:32px;background:rgba(0,191,166,.2);border:1px solid rgba(0,191,166,.3);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--teal);
}
.li-right{width:440px;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:44px 40px;box-shadow:-20px 0 60px rgba(0,0,0,.3);overflow-y:auto}
.li-right h2{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--g900);margin-bottom:4px}
.li-right>p{color:var(--g600);font-size:13px;margin-bottom:24px}
.li-toggle{display:flex;border:1.5px solid var(--g300);border-radius:var(--r6);overflow:hidden;margin-bottom:22px}
.li-tbtn{flex:1;padding:8px;background:#fff;border:none;font-size:12px;font-weight:700;color:var(--g600);cursor:pointer;transition:all var(--tr)}
.li-tbtn.act{background:var(--pri);color:#fff}
.li-fw{display:none}.li-fw.act{display:block}
.lif{position:relative;margin-bottom:16px}
.lif label{display:block;font-size:11px;font-weight:700;color:var(--g700);margin-bottom:5px}
.lif .li-lead{position:absolute;left:12px;bottom:11px;color:var(--g400);font-size:15px;pointer-events:none}
.lif input{
  width:100%;padding:11px 12px 11px 40px;border:2px solid var(--g300);
  border-radius:var(--r6);font-size:14px;transition:border .2s,box-shadow .2s;color:var(--g900);
}
.lif input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,191,166,.1)}
.eye-btn{position:absolute;right:11px;bottom:8px;background:none;border:none;color:var(--g500);cursor:pointer;font-size:15px;padding:4px}
.li-btn{
  width:100%;padding:12px;background:var(--pri);
  color:#fff;border:none;border-radius:var(--r6);font-size:14px;font-weight:700;font-family:var(--font-head);
  cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;
  box-shadow:0 4px 16px rgba(11,61,145,.3);
}
.li-btn:hover{background:var(--pri-d);box-shadow:0 6px 24px rgba(11,61,145,.45);transform:translateY(-1px)}
.li-btn.grn{background:var(--teal)}.li-btn.grn:hover{background:var(--teal-d)}
.li-err{display:none;background:var(--red-l);color:var(--red-d);padding:10px 13px;border-radius:var(--r4);margin-bottom:14px;font-size:13px;align-items:center;gap:7px}
.li-err.show{display:flex}
.demo-b{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r6);padding:12px;margin-top:18px}
.demo-b h4{font-size:11px;font-weight:700;color:var(--g700);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.demo-b p{font-size:11px;color:var(--g600);margin:3px 0}
.demo-b code{background:var(--g200);padding:1px 5px;border-radius:2px;font-family:var(--mono)}

/* ══════════════════════════════════════════
   FOOTER — Apollo-style bottom bar
══════════════════════════════════════════ */
.app-footer{
  position:fixed;bottom:0;left:var(--sw);right:0;height:var(--ft);
  background:var(--dark);border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;font-size:11px;color:rgba(255,255,255,.35);z-index:600;
  transition:left var(--tr);
}
.app-footer a{color:rgba(255,255,255,.35);transition:color .15s}
.app-footer a:hover{color:var(--teal)}
.app-footer .ft-loc{display:flex;align-items:center;gap:4px;color:var(--teal);font-weight:600}

/* ══════════════════════════════════════════
   NOTIFICATION PANEL
══════════════════════════════════════════ */
.notif-panel{
  position:fixed;top:0;right:-400px;width:400px;max-width:100vw;height:100vh;
  background:#fff;box-shadow:var(--sh-lg);z-index:950;
  display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);
}
.notif-panel.open{right:0}
.notif-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--g200);flex-shrink:0;border-top:3px solid var(--teal)}
.notif-hd h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;font-family:var(--font-head)}
.notif-body{flex:1;overflow-y:auto}
.notif-item{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--g100);cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--g50)}
.notif-item.unread{background:var(--pri-xl);border-left:3px solid var(--teal)}
.notif-ic{font-size:18px;flex-shrink:0;margin-top:2px}
.notif-content h4{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-content p{font-size:12px;color:var(--g500);line-height:1.4}
.notif-content small{font-size:10px;color:var(--g400)}

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */
.dvd{border:none;border-top:1px solid var(--g200);margin:14px 0}
.w-100{width:100%}.d-flex{display:flex}.gap-8{gap:8px}.gap-12{gap:12px}
.align-center{align-items:center}.justify-between{justify-content:space-between}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-3{margin-bottom:12px}
.text-right{text-align:right}.text-center{text-align:center}
.text-red{color:var(--red)}.text-grn{color:var(--grn)}.text-pri{color:var(--pri)}.text-teal{color:var(--teal)}
.fw-700{font-weight:700}.fs-11{font-size:11px}.fs-12{font-size:12px}.hidden{display:none!important}
.iz{border:2px dashed var(--g300);border-radius:var(--r10);padding:30px;text-align:center;cursor:pointer;transition:all var(--tr);background:var(--g50)}
.iz:hover,.iz.drag{border-color:var(--teal);background:var(--teal-l)}
.iz i{font-size:32px;color:var(--g400);margin-bottom:10px;display:block}
.iz p{font-size:13px;font-weight:600;color:var(--g700)}.iz small{font-size:11px;color:var(--g500)}
.text-warn{color:var(--org);font-weight:600}
.bg-reject{background:var(--red-l);color:var(--red-d)}.bg-approved{background:var(--grn-l);color:var(--grn-d)}

/* Skeleton loading */
.skel{background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r4);height:14px;width:100%}
.skel.sm{height:10px}.skel.lg{height:22px}.skel.circle{border-radius:50%;width:36px;height:36px}

/* ══════════════════════════════════════════
   PRINT — Reference-based layout
══════════════════════════════════════════ */
@media print{
  .sb,.tb,.fb,.pagi,.ph-r,#toast-wrap,.act-row,.btn,.mo,.app-footer,.notif-panel{display:none!important}
  .main{margin:0!important;padding:0!important;background:#fff!important}
  .page{display:block!important}
  body{background:#fff}
  .tw{border:none;border-radius:0}
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1024px){
  .sb{transform:translateX(-100%);width:var(--sw-exp)}
  .sb:hover{width:var(--sw-exp)}
  .sb.open{transform:translateX(0)}
  .sb.open .label{opacity:1;width:auto;max-width:160px}
  .sb.open .nav-sec-ttl span{opacity:1;width:auto}
  .sb.open .nav-sec-ttl .arr{opacity:1}
  .tb{left:0}.main{margin-left:0}.app-footer{left:0}
  .tb-ham{display:flex}.tb-brand h2{display:none}
}
@media(max-width:860px){.wo-layout{grid-template-columns:1fr}.set-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .main{padding:10px}.search-box{display:none}
  .li-left{display:none}.li-right{width:100%;padding:28px 20px}
  .sr{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr}.fg2,.fg3{grid-template-columns:1fr}
  .fin{grid-template-columns:1fr 1fr}
  .ph{flex-direction:column;align-items:flex-start}
  .pagi{flex-direction:column;align-items:flex-start}
  table{min-width:560px}.pills{justify-content:center}
}
@media(max-width:480px){.sr{grid-template-columns:1fr}.fin{grid-template-columns:1fr}.wg{grid-template-columns:1fr}}