/* ============================================================
   UROMED HEALTHCARE RENTALS — Premium Design System v3
   Brand: Deep Navy + Teal Green · Outfit + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Brand */
  --navy:          #0b1929;
  --navy-mid:      #122035;
  --navy-light:    #1a3350;
  --navy-glow:     rgba(11,25,41,.95);
  --green:         #2ecc8a;
  --green-dark:    #25a872;
  --green-glow:    rgba(46,204,138,.18);
  --blue:          #38bdf8;
  --blue-glow:     rgba(56,189,248,.15);

  /* Gradient */
  --grad:          linear-gradient(135deg,#2ecc8a 0%,#0ea5e9 100%);
  --grad-rev:      linear-gradient(135deg,#0ea5e9 0%,#2ecc8a 100%);
  --grad-soft:     linear-gradient(135deg,rgba(46,204,138,.1) 0%,rgba(14,165,233,.1) 100%);
  --grad-navy:     linear-gradient(160deg,#0b1929 0%,#1a3350 100%);

  /* Surfaces */
  --bg:            #f0f4f8;
  --bg-alt:        #e8eef5;
  --surface:       #ffffff;
  --surface-2:     #f7fafc;
  --surface-3:     #f0f4f8;
  --sidebar-bg:    #0b1929;
  --sidebar-hover: rgba(255,255,255,.055);
  --sidebar-active:rgba(46,204,138,.13);
  --sidebar-border:rgba(255,255,255,.08);

  /* Borders */
  --border:        #e1e8f0;
  --border-dark:   #c9d5e0;
  --border-focus:  #38bdf8;

  /* Text */
  --text-main:     #0f2137;
  --text-body:     #374b5e;
  --text-sub:      #6b7e96;
  --text-muted:    #96a7b8;

  /* Semantic */
  --red:           #ef4444;
  --red-soft:      #fff1f0;
  --red-border:    #fecaca;
  --yellow:        #f59e0b;
  --yellow-soft:   #fffbeb;
  --yellow-border: #fde68a;
  --emerald:       #22c55e;
  --emerald-soft:  #f0fdf4;
  --emerald-border:#bbf7d0;
  --violet:        #7c3aed;
  --violet-soft:   #f5f3ff;
  --cyan:          #0891b2;
  --cyan-soft:     #ecfeff;

  /* Shadows */
  --shadow-xs:     0 1px 2px rgba(15,33,55,.04);
  --shadow-sm:     0 1px 3px rgba(15,33,55,.06), 0 2px 8px rgba(15,33,55,.04);
  --shadow:        0 2px 6px rgba(15,33,55,.06), 0 6px 20px rgba(15,33,55,.07);
  --shadow-md:     0 4px 12px rgba(15,33,55,.08), 0 12px 36px rgba(15,33,55,.1);
  --shadow-lg:     0 8px 24px rgba(15,33,55,.1),  0 24px 60px rgba(15,33,55,.14);
  --shadow-green:  0 4px 20px rgba(46,204,138,.3);
  --shadow-blue:   0 4px 20px rgba(56,189,248,.3);

  /* Geometry */
  --r-sm:          6px;
  --r:             10px;
  --r-md:          13px;
  --r-lg:          16px;
  --r-xl:          22px;
  --r-2xl:         28px;
  --sidebar-w:     264px;
  --topbar-h:      62px;

  /* Timing */
  --ease:          cubic-bezier(.4,0,.2,1);
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);
  --t-fast:        .14s;
  --t:             .2s;
  --t-slow:        .35s;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text-main);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
a { color:inherit; }
button { font-family:inherit; }

/* ── Layout ─────────────────────────────────────────────── */
.app-layout { display:flex; min-height:100vh; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:200;
  transition:transform var(--t-slow) var(--ease);
  overflow:hidden;
}
/* Subtle background texture */
.sidebar::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

/* Brand area */
.sidebar-brand {
  padding:22px 20px 18px;
  border-bottom:1px solid var(--sidebar-border);
  flex-shrink:0;
  position:relative;
}
.sidebar-brand-inner {
  display:flex; align-items:center; gap:11px;
}
.sidebar-brand img {
  height:38px; max-width:130px;
  object-fit:contain; object-position:left;
  filter:brightness(1.1);
}
.sidebar-brand-text { flex:1; min-width:0; }
.sidebar-brand-name {
  font-family:'Outfit',sans-serif;
  font-size:.82rem; font-weight:700;
  color:#fff; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-brand-tag {
  font-size:.63rem; font-weight:600; letter-spacing:.07em;
  color:var(--green); text-transform:uppercase;
  margin-top:2px; display:block;
}

/* Scrollable nav area */
.sidebar-nav {
  flex:1; overflow-y:auto; padding:10px 0 16px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }

/* ── Nav Group (Dropdown Section) ── */
.nav-group { position:relative; }

.nav-group-btn {
  width:100%; display:flex; align-items:center; gap:9px;
  padding:10px 18px 10px 16px;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.55);
  font-family:'DM Sans',sans-serif; font-size:.78rem;
  font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  transition:color var(--t) var(--ease);
  position:relative;
}
.nav-group-btn:hover { color:rgba(255,255,255,.9); }
.nav-group.open .nav-group-btn { color:rgba(255,255,255,.9); }

.nav-group-icon-wrap {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0;
}
.nav-group-label { flex:1; text-align:left; }
.nav-group-badge {
  font-size:.6rem; font-weight:700; min-width:18px; height:16px;
  padding:0 5px; background:var(--red); color:#fff;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav-group-badge.green { background:var(--green-dark); }
.nav-group-badge.yellow { background:var(--yellow); color:#78350f; }
.nav-group-chevron {
  width:14px; height:14px; flex-shrink:0;
  transition:transform var(--t) var(--ease);
  color:rgba(255,255,255,.3);
}
.nav-group-chevron svg { width:14px; height:14px; }
.nav-group.open .nav-group-chevron { transform:rotate(180deg); color:rgba(255,255,255,.6); }

/* Collapsible body — smooth max-height animation */
.nav-group-body {
  max-height:0; overflow:hidden;
  transition:max-height .32s var(--ease);
}
.nav-group.open .nav-group-body { max-height:600px; }

/* Standalone dashboard link */
.nav-standalone {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px;
  color:rgba(255,255,255,.7); text-decoration:none;
  font-size:.88rem; font-weight:500;
  transition:all var(--t) var(--ease);
  position:relative;
}
.nav-standalone:hover { color:#fff; background:var(--sidebar-hover); }
.nav-standalone.active { color:#fff; background:var(--sidebar-active); }
.nav-standalone.active::after {
  content:''; position:absolute; right:0; top:6px; bottom:6px;
  width:3px; background:var(--green); border-radius:3px 0 0 3px;
}
.nav-standalone-icon { font-size:1rem; flex-shrink:0; width:20px; text-align:center; }

/* Nav link (inside group) */
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 18px 9px 44px;
  color:rgba(255,255,255,.6); text-decoration:none;
  font-size:.855rem; font-weight:500;
  transition:all var(--t) var(--ease);
  position:relative;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-link:hover { color:rgba(255,255,255,.95); background:var(--sidebar-hover); }
.nav-link.active {
  color:#fff; background:var(--sidebar-active);
  font-weight:600;
}
.nav-link.active::after {
  content:''; position:absolute; right:0; top:4px; bottom:4px;
  width:3px; background:var(--green); border-radius:3px 0 0 3px;
}
.nav-link span { pointer-events:none; }
.nav-link-badge {
  margin-left:auto; flex-shrink:0;
  font-size:.6rem; font-weight:700; min-width:17px; height:16px;
  padding:0 4px; background:var(--red); color:#fff;
  border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
}
/* Nav divider */
.nav-divider {
  height:1px; background:var(--sidebar-border);
  margin:8px 16px;
}

/* Sidebar footer - user info */
.sidebar-footer {
  padding:14px 16px;
  border-top:1px solid var(--sidebar-border);
  flex-shrink:0;
}
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r);
  transition:background var(--t) var(--ease);
  cursor:default;
}
.sidebar-user:hover { background:var(--sidebar-hover); }
.sidebar-avatar {
  width:34px; height:34px; border-radius:10px;
  background:var(--grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:.9rem; font-weight:700; color:#fff;
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name {
  font-size:.82rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user-role {
  font-size:.68rem; color:rgba(255,255,255,.4);
  margin-top:1px; display:block;
}
.sidebar-logout {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.35); text-decoration:none; font-size:.85rem;
  transition:all var(--t) var(--ease); flex-shrink:0;
}
.sidebar-logout:hover { background:rgba(239,68,68,.2); color:#ef4444; }

/* ═══════════════════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════════════════ */
.main-area {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column; min-height:100vh;
}

/* ── Top Bar ── */
.top-bar {
  height:var(--topbar-h);
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-xs);
}
.top-bar-left { display:flex; align-items:center; gap:14px; }
.menu-toggle {
  display:none; width:36px; height:36px; border-radius:var(--r);
  background:none; border:1px solid var(--border);
  align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; color:var(--text-sub);
  transition:all var(--t) var(--ease);
}
.menu-toggle:hover { background:var(--surface-3); color:var(--text-main); }
.top-bar-title {
  font-family:'Outfit',sans-serif;
  font-size:1.12rem; font-weight:700; color:var(--navy);
}
.top-bar-right { display:flex; align-items:center; gap:10px; }
.topbar-user {
  display:flex; align-items:center; gap:8px;
  padding:5px 10px 5px 6px;
  border-radius:var(--r); border:1px solid var(--border);
  cursor:default; transition:all var(--t) var(--ease);
}
.topbar-user:hover { background:var(--surface-3); border-color:var(--border-dark); }
.topbar-avatar {
  width:30px; height:30px; border-radius:8px;
  background:var(--grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:700; color:#fff;
}
.topbar-user-name { font-size:.82rem; font-weight:600; color:var(--text-main); }
.topbar-user-role {
  font-size:.68rem; font-weight:600; padding:2px 7px; border-radius:20px;
  background:var(--violet-soft); color:var(--violet);
}

/* ── Page Content ── */
.page-content { flex:1; padding:28px; }
main { flex:1; }

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  overflow:hidden;
  transition:box-shadow var(--t) var(--ease);
}
.card:hover { box-shadow:var(--shadow); }

.card-header {
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  background:var(--surface);
}
.card-title {
  font-family:'Outfit',sans-serif;
  font-size:1rem; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:8px;
}
.card-body { padding:22px; }

/* Gradient card header variant */
.card-header.gradient {
  background:var(--grad-navy);
  border-bottom:none;
}
.card-header.gradient .card-title { color:#fff; }

/* ── Stats Cards ── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px; margin-bottom:26px;
}
.stat-card {
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between;
  border-top:3px solid transparent;
  transition:all var(--t) var(--ease);
  position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:0;
  transition:opacity var(--t) var(--ease);
}
.stat-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.stat-card:hover::after { opacity:1; }
.stat-card.green  { border-top-color:var(--green); }
.stat-card.blue   { border-top-color:var(--blue); }
.stat-card.yellow { border-top-color:var(--yellow); }
.stat-card.red    { border-top-color:var(--red); }
.stat-card.navy   { border-top-color:var(--navy-light); }
.stat-card.violet { border-top-color:var(--violet); }
.stat-value {
  font-family:'Outfit',sans-serif;
  font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1;
}
.stat-label { font-size:.78rem; color:var(--text-sub); margin-top:5px; font-weight:500; }
.stat-change { font-size:.75rem; font-weight:600; margin-top:3px; }
.stat-change.up   { color:var(--emerald); }
.stat-change.down { color:var(--red); }
.stat-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  flex-shrink:0;
}
.stat-icon.green  { background:var(--emerald-soft); }
.stat-icon.blue   { background:#dbeafe; }
.stat-icon.yellow { background:var(--yellow-soft); }
.stat-icon.red    { background:var(--red-soft); }
.stat-icon.navy   { background:var(--surface-3); }
.stat-icon.violet { background:var(--violet-soft); }

/* ═══════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; }
.table {
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.875rem;
}
.table th {
  background:var(--surface-2);
  padding:11px 16px;
  text-align:left;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-sub);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  position:sticky; top:0;
}
.table th:first-child { padding-left:20px; }
.table td {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  color:var(--text-body);
}
.table td:first-child { padding-left:20px; }
.table tbody tr { transition:background var(--t-fast) var(--ease); }
.table tbody tr:hover { background:rgba(46,204,138,.04); }
.table tbody tr:last-child td { border-bottom:none; }
/* Zebra striping */
.table.striped tbody tr:nth-child(even) { background:var(--surface-2); }
.table.striped tbody tr:nth-child(even):hover { background:rgba(46,204,138,.05); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r);
  font-size:.875rem; font-weight:600; font-family:inherit;
  cursor:pointer; text-decoration:none; border:none;
  transition:all var(--t) var(--ease);
  white-space:nowrap; letter-spacing:.01em;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background var(--t-fast) var(--ease);
}
.btn:hover::after { background:rgba(255,255,255,.07); }
.btn:active { transform:scale(.98) !important; }

.btn-primary {
  background:var(--grad);
  color:#fff;
  box-shadow:0 2px 10px rgba(46,204,138,.28), 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover {
  box-shadow:0 4px 18px rgba(46,204,138,.4), 0 2px 4px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.btn-secondary {
  background:var(--surface);
  color:var(--text-body);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.btn-secondary:hover {
  background:var(--surface-2);
  border-color:var(--border-dark);
  color:var(--text-main);
  transform:translateY(-1px);
}

.btn-danger {
  background:var(--red); color:#fff;
  box-shadow:0 2px 8px rgba(239,68,68,.25);
}
.btn-danger:hover {
  background:#dc2626;
  box-shadow:0 4px 14px rgba(239,68,68,.38);
  transform:translateY(-1px);
}

.btn-success {
  background:var(--emerald); color:#fff;
  box-shadow:0 2px 8px rgba(34,197,94,.25);
}
.btn-success:hover {
  background:#16a34a;
  box-shadow:0 4px 14px rgba(34,197,94,.38);
  transform:translateY(-1px);
}

.btn-outline {
  background:transparent;
  color:var(--navy);
  border:2px solid var(--border-dark);
}
.btn-outline:hover { background:var(--surface-2); }

.btn-ghost {
  background:transparent; color:var(--text-sub);
  border:none; box-shadow:none;
}
.btn-ghost:hover { background:var(--surface-3); color:var(--text-main); }

.btn-sm   { padding:6px 12px; font-size:.8rem; border-radius:var(--r-sm); }
.btn-lg   { padding:12px 26px; font-size:.97rem; }
.btn-icon { padding:8px; border-radius:var(--r); }
.btn-icon-sm { padding:5px; border-radius:6px; }

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.form-grid   { display:grid; gap:18px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns:repeat(4,1fr); }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
  font-size:.78rem; font-weight:700;
  color:var(--text-sub); text-transform:uppercase; letter-spacing:.05em;
}
.form-control, .form-select {
  padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--r);
  font-size:.9rem; font-family:inherit;
  color:var(--text-main); background:var(--surface);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  width:100%;
}
.form-control:hover, .form-select:hover { border-color:var(--border-dark); }
.form-control:focus, .form-select:focus {
  outline:none;
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(56,189,248,.14);
  background:var(--surface);
}
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:90px; line-height:1.6; }
.form-select { appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2396a7b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
  padding-right:36px;
}
.form-hint { font-size:.75rem; color:var(--text-muted); margin-top:3px; }
.form-error { font-size:.75rem; color:var(--red); margin-top:3px; font-weight:500; }

/* ═══════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:.72rem; font-weight:700; line-height:1.4;
  letter-spacing:.01em;
}
.badge-green  { background:rgba(34,197,94,.12);  color:#15803d;  border:1px solid rgba(34,197,94,.2); }
.badge-blue   { background:rgba(56,189,248,.12); color:#0369a1;  border:1px solid rgba(56,189,248,.2); }
.badge-yellow { background:rgba(245,158,11,.1);  color:#92400e;  border:1px solid rgba(245,158,11,.2); }
.badge-red    { background:rgba(239,68,68,.1);   color:#b91c1c;  border:1px solid rgba(239,68,68,.18); }
.badge-gray   { background:var(--surface-3);     color:var(--text-sub); border:1px solid var(--border); }
.badge-navy   { background:rgba(11,25,41,.08);   color:var(--navy);     border:1px solid rgba(11,25,41,.12); }
.badge-violet { background:rgba(124,58,237,.1);  color:#5b21b6;  border:1px solid rgba(124,58,237,.2); }
.badge-teal   { background:rgba(8,145,178,.1);   color:#0e7490;  border:1px solid rgba(8,145,178,.2); }
/* Dot variant */
.badge-dot { padding-left:6px; }
.badge-dot::before {
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.badge-green.badge-dot::before  { background:#22c55e; }
.badge-red.badge-dot::before    { background:var(--red); }
.badge-yellow.badge-dot::before { background:var(--yellow); }

/* ═══════════════════════════════════════════════════════════
   ALERTS & FLASH MESSAGES
═══════════════════════════════════════════════════════════ */
.alert {
  padding:12px 16px; border-radius:var(--r);
  font-size:.875rem; margin-bottom:16px;
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid; animation:alertIn .25s var(--ease);
}
@keyframes alertIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.alert-success { background:#f0fdf4; color:#14532d; border-color:#bbf7d0; }
.alert-error   { background:#fff1f0; color:#991b1b; border-color:#fecaca; }
.alert-info    { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.alert-warning { background:#fffbeb; color:#78350f; border-color:#fde68a; }
.alert-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }

/* Toast notification */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:2000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:var(--r-md);
  font-size:.875rem; font-weight:500;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px;
  min-width:260px; max-width:360px;
  animation:toastIn .3s var(--ease-bounce);
  pointer-events:all; border-left:3px solid var(--green);
}
@keyframes toastIn { from { opacity:0; transform:translateX(20px) scale(.95); } to { opacity:1; transform:none; } }
.toast.error { border-left-color:var(--red); }
.toast.warning { border-left-color:var(--yellow); }

/* ═══════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(11,25,41,.55);
  z-index:1000; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(6px);
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface); border-radius:var(--r-xl);
  max-width:700px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  animation:modalIn .22s var(--ease-bounce);
}
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(-12px); } to { opacity:1; transform:none; } }
.modal-header {
  padding:18px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-2); border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-title {
  font-family:'Outfit',sans-serif;
  font-size:1rem; font-weight:700; color:var(--navy);
}
.modal-close {
  width:30px; height:30px; border-radius:7px;
  background:none; border:none; cursor:pointer;
  font-size:1.1rem; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t) var(--ease);
}
.modal-close:hover { background:var(--surface-3); color:var(--text-main); }
.modal-body { padding:22px 24px; }
.modal-footer {
  padding:14px 24px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end;
  background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl);
}

/* ═══════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════ */
.tabs {
  display:flex; gap:2px;
  border-bottom:2px solid var(--border); margin-bottom:22px;
  background:var(--surface-2); border-radius:var(--r) var(--r) 0 0;
  padding:6px 6px 0;
}
.tab-btn {
  padding:9px 18px;
  background:none; border:none;
  font-family:inherit; font-size:.875rem; font-weight:600;
  color:var(--text-sub);
  cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:all var(--t) var(--ease);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tab-btn:hover { color:var(--navy); background:rgba(255,255,255,.6); }
.tab-btn.active {
  color:var(--navy); border-bottom-color:var(--green);
  background:var(--surface); font-weight:700;
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ═══════════════════════════════════════════════════════════
   INVOICE / PO SPECIFIC
═══════════════════════════════════════════════════════════ */
.invoice-section {
  margin-bottom:24px; background:var(--surface);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border); overflow:hidden;
}
.invoice-section-header {
  padding:12px 20px;
  background:var(--grad-navy); color:#fff;
  font-family:'Outfit',sans-serif; font-size:.88rem; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.invoice-section-body { padding:18px 20px; }

.items-table-wrap { overflow-x:auto; }
.items-table {
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.85rem; min-width:900px;
}
.items-table th {
  background:var(--navy); color:rgba(255,255,255,.8);
  padding:10px 12px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  text-align:left; white-space:nowrap;
}
.items-table th:first-child { border-radius:var(--r-sm) 0 0 0; }
.items-table th:last-child  { border-radius:0 var(--r-sm) 0 0; }
.items-table td { padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.items-table tbody tr:last-child td { border-bottom:none; }
.items-table input, .items-table select {
  padding:7px 10px; border:1.5px solid var(--border);
  border-radius:6px; font-size:.85rem; font-family:inherit;
  background:var(--surface); width:100%;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.items-table input:focus, .items-table select:focus {
  outline:none; border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
}
.items-table .col-type { width:130px; } .items-table .col-desc { min-width:200px; }
.items-table .col-hsn  { width:100px; } .items-table .col-qty  { width:80px; }
.items-table .col-uom  { width:80px; } .items-table .col-rate { width:110px; }
.items-table .col-amt  { width:110px; } .items-table .col-act  { width:48px; text-align:center; }
.items-table tfoot td { padding:10px 12px; font-weight:600; border-top:2px solid var(--border); }

.totals-box { max-width:380px; margin-left:auto; }
.totals-row {
  display:flex; justify-content:space-between;
  padding:8px 0; font-size:.9rem; border-bottom:1px solid var(--border);
}
.totals-row:last-child { border-bottom:none; }
.totals-row.total-final {
  font-family:'Outfit',sans-serif; font-size:1.1rem; font-weight:800;
  color:var(--navy); border-top:2px solid var(--navy); padding-top:12px; margin-top:4px;
}

.item-type-badge { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; padding:2px 8px; border-radius:4px; font-weight:600; }
.item-equipment     { background:#dbeafe; color:#1e40af; }
.item-doctor        { background:#fce7f3; color:#9d174d; }
.item-technician    { background:var(--yellow-soft); color:#78350f; }
.item-miscellaneous { background:var(--surface-3); color:var(--text-sub); }

/* ═══════════════════════════════════════════════════════════
   UPLOAD ZONE
═══════════════════════════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--r-md);
  padding:32px; text-align:center; cursor:pointer;
  transition:all var(--t) var(--ease); background:var(--surface-2);
}
.upload-zone:hover { border-color:var(--border-focus); background:#f0f9ff; }
.upload-zone img { max-height:80px; max-width:240px; object-fit:contain; margin:0 auto 12px; display:block; }
.upload-zone p { color:var(--text-sub); font-size:.875rem; }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════════ */
.login-wrap {
  min-height:100vh; display:flex;
  background:var(--grad-navy); position:relative; overflow:hidden;
}
.login-wrap::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(46,204,138,.12) 0%,transparent 65%),
             radial-gradient(ellipse at 70% 80%,rgba(56,189,248,.1) 0%,transparent 55%);
}
.login-deco {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:60px; position:relative;
}
.login-deco-inner { max-width:360px; text-align:center; }
.login-deco img { width:200px; margin-bottom:32px; filter:brightness(1.1); }
.login-deco h2 { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:12px; }
.login-deco p { color:rgba(255,255,255,.5); line-height:1.7; font-size:.9rem; }
.login-form-area {
  width:430px; flex-shrink:0; background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:52px 48px; position:relative;
}
.login-form-area::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:var(--grad);
}
.login-form-inner { width:100%; }
.login-logo { margin-bottom:32px; }
.login-logo h1 { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800; color:var(--navy); margin-bottom:4px; }
.login-logo p { color:var(--text-sub); font-size:.875rem; }
.form-group.login-field label { font-size:.78rem; color:var(--text-sub); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.btn-login {
  width:100%; padding:13px;
  background:var(--grad); color:#fff; border:none; border-radius:var(--r-md);
  font-size:1rem; font-weight:700; font-family:'Outfit',sans-serif;
  cursor:pointer; box-shadow:0 4px 20px rgba(46,204,138,.3);
  transition:all var(--t) var(--ease); margin-top:8px; letter-spacing:.02em;
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(46,204,138,.45); }
.btn-login:active { transform:scale(.98); }

/* ═══════════════════════════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════════════════════════ */
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.mt-1 { margin-top:4px; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; }
.mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; } .mb-4 { margin-bottom:16px; }
.text-sm { font-size:.875rem; } .text-xs { font-size:.75rem; }
.text-sub { color:var(--text-sub); } .text-navy { color:var(--navy); }
.font-bold { font-weight:700; } .font-heading { font-family:'Outfit',sans-serif; }
.text-right { text-align:right; } .text-center { text-align:center; }
.w-full { width:100%; }
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-sub); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:12px; }
.empty-state p { font-size:1rem; }
.spinner { width:20px; height:20px; border:2.5px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.no-print { }

/* ── Color alias for legacy compat ── */
.accent-g { color:var(--green); }
.accent-b { color:var(--blue); }
--accent-g: var(--green);
--accent-b: var(--blue);

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --sidebar-w:240px; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); box-shadow:none; }
  .sidebar.open { transform:none; box-shadow:var(--shadow-lg); }
  .main-area { margin-left:0; }
  .top-bar { padding:0 16px; }
  .page-content { padding:16px; }
  .menu-toggle { display:flex; }
  .form-grid-2,.form-grid-3,.form-grid-4 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .login-deco { display:none; }
  .login-form-area { width:100%; padding:36px 24px; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .modal { border-radius:var(--r-lg) var(--r-lg) 0 0; margin-top:auto; }
  .btn-sm { font-size:.75rem; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════ */
@media print {
  .no-print { display:none !important; }
  .sidebar, .top-bar, .page-content > .btn { display:none !important; }
  .main-area { margin-left:0; }
  body { background:#fff; font-size:12px; }
  .card { box-shadow:none; border:1px solid #ddd; }
}