/* ==========================================================
   CLINICMS — Premium UI CSS (Drop-in Replacement)
   Keep existing class names. No HTML changes required.
   ========================================================== */

:root{
  /* Core palette */
  --bg: #f6f8fc;
  --card: rgba(255,255,255,.86);
  --card-solid: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(148,163,184,.30);

  /* Brand */
  --brand: #0f172a;
  --brand2: #3b82f6;  /* primary blue */
  --brand3: #22c55e;  /* success */
  --brand4: #a855f7;  /* purple */
  --brand5: #f59e0b;  /* amber */
  --brand6: #ef4444;  /* danger */

  /* Gradients */
  --grad-blue: linear-gradient(135deg, #3b82f6 0%, #06b6d4 45%, #6366f1 100%);
  --grad-purple: linear-gradient(135deg, #a855f7 0%, #6366f1 55%, #3b82f6 100%);
  --grad-green: linear-gradient(135deg, #22c55e 0%, #10b981 55%, #06b6d4 100%);
  --grad-amber: linear-gradient(135deg, #f59e0b 0%, #f97316 55%, #ef4444 100%);
  --grad-dark: linear-gradient(180deg, #111827 0%, #0b1020 100%);

  /* Depth + glass */
  --shadow: 0 18px 60px rgba(2,6,23,.08);
  --shadow2: 0 16px 40px rgba(2,6,23,.10);
  --shadow3: 0 10px 20px rgba(2,6,23,.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --ring: 0 0 0 4px rgba(59,130,246,.16);

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;

  /* Motion */
  --t: 160ms;
  --e: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(59,130,246,.10), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(168,85,247,.10), transparent 45%),
    radial-gradient(circle at 55% 95%, rgba(34,197,94,.08), transparent 55%),
    var(--bg);
}

a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}

/* Optional smoother type */
h1,h2,h3{letter-spacing:-.02em}

/* ==========================================================
   APP LAYOUT
   ========================================================== */
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px;
  color:#fff;
  padding:18px 14px;
  position:sticky;top:0;
  align-self:flex-start;
  height:100vh;
  overflow:auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(59,130,246,.22), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.18), transparent 45%),
    linear-gradient(180deg,#0b1020 0%, #0b1020 35%, #0b132a 100%);
  border-right:1px solid rgba(255,255,255,.08);
}

.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
  border:2px solid rgba(11,16,32,.9);
}
.sidebar::-webkit-scrollbar-track{background:transparent}

.brand{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:14px
}
.brand .logo{
  width:38px;height:38px;border-radius:14px;
  background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
}
.brand .title{font-weight:900;letter-spacing:.2px}

.nav{margin-top:12px;display:grid;gap:14px}
.nav-section{display:grid;gap:6px}
.nav-title{
  margin:4px 0 0 0;padding:0 10px;
  color:rgba(255,255,255,.55);
  font-size:11px;text-transform:uppercase;letter-spacing:.10em
}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:14px;
  color:rgba(255,255,255,.92);
  transition: transform var(--t) var(--e), background var(--t) var(--e);
}
.nav-link:hover{
  background:rgba(255,255,255,.09);
  text-decoration:none;
  transform: translateY(-1px);
}
.nav-link.active{
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 55%),
    rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.profile{margin-top:18px;padding:12px 10px;border-top:1px solid rgba(255,255,255,.10)}
.profile .muted{color:rgba(255,255,255,.70)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{flex:1;min-width:0;padding:18px}
.wrap{max-width:1200px;margin:0 auto}

/* Topbar (Glass) */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  position:sticky;top:0;z-index:20;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.topbar .title{display:flex;align-items:center;gap:12px}
.topbar .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--border);
  border-radius:999px;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  box-shadow: var(--shadow-inset);
}

.muted{color:var(--muted)}

/* Cards */
.card{
  background:
    radial-gradient(circle at 18% 12%, rgba(59,130,246,.08), transparent 48%),
    radial-gradient(circle at 84% 22%, rgba(168,85,247,.06), transparent 46%),
    rgba(255,255,255,.90);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding:16px;
  box-shadow: var(--shadow);
  box-shadow: var(--shadow), var(--shadow-inset);
}

/* Subtle hover lift when clickable */
.card:hover{
  transition: transform var(--t) var(--e), box-shadow var(--t) var(--e);
}

/* ==========================================================
   BUTTONS + ALERTS
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.90));
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform var(--t) var(--e), filter var(--t) var(--e), box-shadow var(--t) var(--e);
}
.btn:hover{
  text-decoration:none;
  filter: brightness(1.01);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2,6,23,.08);
}
.btn:active{transform: translateY(0px); filter: brightness(.99)}

.btn-primary{
  border:0;
  background: var(--grad-blue);
  color:#fff;
  box-shadow: 0 16px 34px rgba(59,130,246,.18);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:inherit;
  box-shadow:none;
}
.btn-ghost:hover{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.06);
  box-shadow:none;
}

.btn-wide{width:100%}

/* Extra buttons used in queue */
.btn-soft{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:14px;
  border:1px solid rgba(148,163,184,.30);
  background:
    radial-gradient(circle at 15% 25%, rgba(59,130,246,.10), transparent 45%),
    linear-gradient(180deg,#fff,#f8fafc);
  color:var(--text);
  font-weight:800;
  box-shadow: 0 12px 22px rgba(2,6,23,.08);
  transition: transform var(--t) var(--e), filter var(--t) var(--e);
}
.btn-soft:hover{transform:translateY(-1px);filter:brightness(1.01);text-decoration:none}

.btn-purple{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:14px;
  border:0;
  background: var(--grad-purple);
  color:#fff;font-weight:900;
  box-shadow: 0 18px 38px rgba(168,85,247,.20);
  transition: transform var(--t) var(--e), filter var(--t) var(--e);
}
.btn-purple:hover{transform:translateY(-1px);filter:brightness(1.06);text-decoration:none}

.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:14px;
  border:0;
  background: var(--grad-dark);
  color:#fff;font-weight:900;
  box-shadow: 0 18px 38px rgba(2,6,23,.22);
  transition: transform var(--t) var(--e), filter var(--t) var(--e);
}
.btn-dark:hover{transform:translateY(-1px);filter:brightness(1.06);text-decoration:none}

.alert{
  padding:10px 12px;border-radius:16px;border:1px solid var(--border);
  margin-bottom:12px;
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}
.alert-danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.alert-success{background:#dcfce7;border-color:#bbf7d0;color:#166534}

/* ==========================================================
   INPUTS
   ========================================================== */
.field{display:grid;gap:8px;margin-bottom:12px}

.input, .q-input, .q-select{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.90));
  outline:none;
  box-shadow: 0 10px 20px rgba(2,6,23,.05);
  transition: box-shadow var(--t) var(--e), border-color var(--t) var(--e), transform var(--t) var(--e);
}

.input:focus, .q-input:focus, .q-select:focus{
  border-color: rgba(59,130,246,.42);
  box-shadow: var(--ring), 0 14px 28px rgba(2,6,23,.10);
}
.input:hover, .q-input:hover, .q-select:hover{transform: translateY(-1px)}

.q-input{min-width:260px}

/* Checkbox row */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.checkbox{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}

/* ==========================================================
   AUTH
   ========================================================== */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.auth-card{
  max-width:1100px;width:100%;
  display:grid;grid-template-columns:1.15fr .85fr;
  overflow:hidden;border-radius:24px;
  box-shadow: var(--shadow2);
  border:1px solid var(--border);
  background: rgba(255,255,255,.88);
}

.auth-left{
  position:relative;
  padding:44px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 10%, rgba(59,130,246,.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.30), transparent 45%),
    linear-gradient(180deg,#0b1020,#0b1020 35%,#0b132a);
}
.auth-left:before{
  content:"";
  position:absolute; inset:-120px;
  opacity:.45;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,.12), transparent 45%);
}
.auth-left .inner{position:relative;z-index:1;max-width:520px}
.auth-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.auth-badge .dot{
  width:10px;height:10px;border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}
.auth-title{margin:22px 0 10px 0;font-size:46px;line-height:1.05;letter-spacing:-.03em}
.auth-sub{margin:0;color:rgba(255,255,255,.75);max-width:520px;line-height:1.7}
.auth-social{margin-top:28px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.70);font-size:13px}
.auth-avatars{display:flex}
.auth-avatars span{
  width:34px;height:34px;border-radius:999px;display:inline-block;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(11,16,32,.9);
  margin-left:-10px
}
.auth-avatars span:first-child{margin-left:0}
.auth-footer{position:absolute;right:22px;bottom:18px;font-size:12px;color:rgba(255,255,255,.45);z-index:1}

.auth-right{padding:42px 40px;display:flex;align-items:center;justify-content:center}
.auth-form{width:100%;max-width:420px}
.auth-logo{
  width:82px;height:82px;border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255, 255, 255), transparent 55%),
    #ffffff;
  border:1px solid var(--border);
  box-shadow: var(--shadow3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px auto
}
.auth-h{margin:8px 0 6px 0;text-align:center;font-size:34px;letter-spacing:-.03em;font-weight:900}
.auth-help{text-align:center;margin:0 0 18px 0}
.auth-actions{margin-top:14px;display:grid;gap:12px}
.auth-meta{margin-top:12px;text-align:center;color:var(--muted);font-size:12px}
.auth-version{margin-top:18px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--border);padding-top:14px}
.pw-wrap{position:relative}
.pw-toggle{
  position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;
  color:var(--muted);
  padding:6px 8px;border-radius:12px;
}
.pw-toggle:hover{background:rgba(15,23,42,.06)}

/* ==========================================================
   TEXT HELPERS
   ========================================================== */
.topbar-brand{font-weight:900}
.topbar-sub{font-size:12px}
.brand-title{font-weight:900}
.brand-sub{font-size:12px}
.page-title{font-weight:900;font-size:16px}
.page-sub{font-size:12px}
.profile-name{font-weight:800}
.profile-sub{font-size:12px}
.profile-logout{margin-top:10px}

/* ==========================================================
   SIDEBAR DRAWER (MOBILE)
   ========================================================== */
.sb-open{display:none}
.sb-close{display:none;margin-left:auto}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.45);backdrop-filter:blur(3px);z-index:40}

@media (max-width: 920px){
  .sb-open{display:inline-flex}
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;z-index:50;
    width:280px;
    transform:translateX(-105%);
    transition:transform .22s var(--e);
    display:block;
  }
  .sidebar.open{transform:translateX(0)}
  .sb-close{display:inline-flex}
  body.sb-opened .sb-overlay{display:block}
  .wrap{padding:0 14px}
}

/* ==========================================================
   TABLE HELPERS
   ========================================================== */
.table-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.table-title{font-weight:900;font-size:16px}
.table-actions{display:flex;gap:10px;flex-wrap:wrap}

.table-wrap{overflow:auto}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th{
  font-size:12px;
  color:var(--muted);
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid rgba(148,163,184,.28);
  white-space:nowrap;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(148,163,184,.22);
  vertical-align:middle;
  background: rgba(255,255,255,.88);
}
.table tr:hover td{background:rgba(59,130,246,.03)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

.status{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  font-size:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.85));
  font-weight:900;
  box-shadow: 0 10px 18px rgba(2,6,23,.07);
}
.status.s-ok{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.status.s-warn{background:#ffedd5;border-color:#fed7aa;color:#9a3412}
.status.s-bad{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.status.s-info{background:#dbeafe;border-color:#bfdbfe;color:#1e40af}

.who{display:flex;align-items:center;gap:10px}
.dotc{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.20);display:inline-block}
.empty{
  padding:16px;
  border:1px dashed rgba(148,163,184,.35);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.85);
  color:var(--muted);
}

/* ==========================================================
   Reception dashboard helpers
   ========================================================== */
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.dash-title{font-size:22px;letter-spacing:-.02em;font-weight:900}
.dash-sub{font-size:13px}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.stat{padding:14px}
.stat-num{font-size:34px;font-weight:950;letter-spacing:-.03em;margin-top:6px}
.stat-foot{font-size:12px;margin-top:4px}
@media (max-width: 980px){ .dash-grid{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================
   DOCTOR DASHBOARD POLISH
   ========================================================== */
.hero{
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  padding:18px;
  background:
    radial-gradient(circle at 15% 18%, rgba(59,130,246,.12), transparent 45%),
    radial-gradient(circle at 82% 20%, rgba(168,85,247,.10), transparent 45%),
    rgba(255,255,255,.82);
  box-shadow: var(--shadow2), var(--shadow-inset);
}
.hero-title{font-size:28px;font-weight:950;letter-spacing:-.03em;margin:0}
.hero-sub{margin:6px 0 0 0;color:var(--muted);font-size:13px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.kpi{
  padding:14px;border-radius: var(--r-lg);
  border:1px solid rgba(148,163,184,.26);
  background:
    radial-gradient(circle at 15% 20%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(34,197,94,.10), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.85));
  box-shadow: var(--shadow3);
  position:relative;
  overflow:hidden;
}
.kpi:before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:6px; background: var(--grad-blue);
  opacity:.95;
}
.kpi:nth-child(2):before{ background: var(--grad-green); }
.kpi:nth-child(3):before{ background: var(--grad-purple); }
.kpi:nth-child(4):before{ background: var(--grad-amber); }

.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.10em}
.kpi-num{font-size:32px;font-weight:950;letter-spacing:-.03em;margin-top:8px}
.kpi-hint{font-size:12px;color:var(--muted);margin-top:6px}
@media (max-width: 980px){ .kpis{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================
   DOCTOR QUEUE: Search / Filter / Sticky / Highlight
   ========================================================== */
.q-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.q-title{font-size:24px;font-weight:950;letter-spacing:-.03em;margin:0}
.q-sub{margin-top:6px;color:var(--muted);font-size:13px}

.q-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.q-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.q-kpi{
  padding:12px;border-radius: var(--r-lg);
  border:1px solid rgba(148,163,184,.26);
  box-shadow: var(--shadow3);
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.10), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.85));
  position:relative;
  overflow:hidden;
}
.q-kpi:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background: var(--grad-blue);
}
.q-kpi:nth-child(2):before{ background: var(--grad-green); }
.q-kpi:nth-child(3):before{ background: var(--grad-purple); }
.q-kpi:nth-child(4):before{ background: var(--grad-amber); }

.q-kpi .n{font-size:30px;font-weight:950;letter-spacing:-.03em}
.q-kpi .t{color:var(--muted);font-size:12px;margin-top:2px}
@media (max-width: 980px){ .q-kpis{grid-template-columns:repeat(2,1fr)} }

.q-table-wrap{
  margin-top:12px;
  border:1px solid rgba(148,163,184,.26);
  border-radius: var(--r-xl);
  overflow:auto;
  max-height:520px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow2);
}

.q-table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}
.q-table th{
  position:sticky;top:0;z-index:5;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(16px);
  text-align:left;
  padding:12px 12px;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid rgba(148,163,184,.26);
  white-space:nowrap;
}
.q-table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  vertical-align:middle;
  background: rgba(255,255,255,.88);
}
.q-table tbody tr{transition:background var(--t) var(--e)}
.q-table tbody tr:hover td{background:rgba(59,130,246,.035)}

.q-who{display:flex;align-items:flex-start;gap:10px}
.q-avatar{
  width:34px;height:34px;border-radius:14px;
  background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(34,197,94,.10));
  border:1px solid rgba(59,130,246,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:950;color:#0b5fff;
  box-shadow: 0 12px 22px rgba(2,6,23,.10);
}
.q-name{font-weight:950}
.q-phone{font-size:12px;color:var(--muted);margin-top:2px}
.q-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.q-row-next td{
  background: linear-gradient(90deg,
    rgba(34,197,94,.18),
    rgba(59,130,246,.10) 55%,
    rgba(255,255,255,0)
  ) !important;
}
.q-row-next td:first-child{
  border-left:6px solid #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.18);
}

.q-empty{padding:16px;border:1px dashed rgba(148,163,184,.35);border-radius: var(--r-lg);background: rgba(255,255,255,.85);color:var(--muted)}
.q-count{font-size:12px;color:var(--muted)}

/* ==========================================================
   Snippet dropdown & Medicine dropdown 
   ========================================================== */
.snip-dd,
#medSuggest{
  border:1px solid rgba(148,163,184,.26) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2) !important;
}
.snip-item:hover,
.med-item:hover{
  background: rgba(59,130,246,.06) !important;
}

/* ==========================================================
   New colorful status pills 
   ========================================================== */
.st{
  display:inline-flex; align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
  color:#fff;
  box-shadow:0 12px 22px rgba(2,6,23,.18);
}
.st-default{ background: linear-gradient(180deg,#111827,#0b1020); }
.st-confirmed{ background: linear-gradient(180deg,#3b82f6,#2563eb); }
.st-arrived{ background: linear-gradient(180deg,#22c55e,#16a34a); }
.st-consult{ background: linear-gradient(180deg,#8b5cf6,#7c3aed); }
.st-completed{ background: linear-gradient(180deg,#64748b,#334155); }
.st-cancelled{ background: linear-gradient(180deg,#ef4444,#991b1b); }
.st-noshow{ background: linear-gradient(180deg,#f59e0b,#b45309); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 980px){
  .auth-card{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{padding:30px 18px}
  .auth-shell{padding:18px}
}