/* ═══════════════════════════════════════════
   EBA DOCTOR PORTAL — DESIGN SYSTEM
   Brand: #FA2D56 pink, Urbanist font
═══════════════════════════════════════════ */

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

/* Ampunsuhu brand font */
@font-face {
  font-family: 'Ampunsuhu';
  src: url('ampunsuhu.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.logo-ampunsuhu {
  font-family: 'Ampunsuhu', 'Urbanist', sans-serif;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-fill-color: initial;
  background: none;
}

/* ── TOKENS ── */
:root {
  --bg-base:       #070C18;
  --bg-surface:    #0C1424;
  --bg-card:       #101929;
  --bg-card-h:     #141F32;
  --bg-elevated:   #19253A;

  --border-s:   rgba(255,255,255,0.05);
  --border-d:   rgba(255,255,255,0.09);
  --border-str: rgba(255,255,255,0.15);

  --pink:       #FA2D56;
  --pink-50:    rgba(250,45,86,0.07);
  --pink-100:   rgba(250,45,86,0.13);
  --pink-200:   rgba(250,45,86,0.22);
  --pink-light: #FF6B90;
  --pink-dark:  #C91C42;

  --green:      #10B981;
  --green-50:   rgba(16,185,129,0.08);
  --green-100:  rgba(16,185,129,0.14);
  --amber:      #F59E0B;
  --amber-50:   rgba(245,158,11,0.08);
  --amber-100:  rgba(245,158,11,0.14);
  --red:        #EF4444;
  --red-50:     rgba(239,68,68,0.08);
  --red-100:    rgba(239,68,68,0.14);
  --purple:     #8B5CF6;
  --purple-50:  rgba(139,92,246,0.08);
  --purple-100: rgba(139,92,246,0.14);
  --teal:       #06B6D4;
  --teal-50:    rgba(6,182,212,0.08);

  --text-1: #EFF6FF;
  --text-2: #94A3B8;
  --text-3: #64748B;

  --sidebar-w:  258px;
  --topbar-h:   66px;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-pink: 0 4px 24px rgba(250,45,86,0.35);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Urbanist', 'Inter', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0;
  display: flex; z-index: 9999;
}

.login-visual {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #06101E 0%, #130A2A 55%, #0A1A30 100%);
  position: relative; overflow: hidden;
}
.login-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.login-orb-1 { width:500px; height:500px; background:rgba(250,45,86,0.12); top:-120px; right:-100px; }
.login-orb-2 { width:400px; height:400px; background:rgba(139,92,246,0.09); bottom:-80px; left:-60px; }
.login-orb-3 { width:300px; height:300px; background:rgba(6,182,212,0.06); top:50%; left:40%; transform:translate(-50%,-50%); }

.login-visual-content {
  position: relative; z-index:1;
  max-width: 440px; padding: 40px;
  text-align: center;
}
.login-logo-big {
  font-family: 'Urbanist', sans-serif; font-weight: 900;
  font-size: 72px; line-height: 1;
  background: linear-gradient(135deg, #FA2D56, #FF6B90);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  letter-spacing: -2px;
}
.login-tagline { font-size:16px; color:var(--text-2); line-height:1.65; margin-bottom:36px; }
.login-features { display:flex; flex-direction:column; gap:12px; text-align:left; }
.login-feature {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border-s);
  border-radius:var(--r-md); font-size:14px; color:var(--text-2);
  transition: all 0.2s;
}
.login-feature:hover { background:rgba(255,255,255,0.05); border-color:var(--border-d); }
.lf-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}

.login-panel {
  width:460px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 52px;
  background:var(--bg-surface); border-left:1px solid var(--border-s);
}
.lp-logo {
  font-family:'Urbanist',sans-serif; font-weight:900; font-size:32px;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:6px; letter-spacing:-1px;
}
.lp-subtitle { font-size:12px; color:var(--text-3); margin-bottom:36px; }
.lp-heading { font-size:24px; font-weight:800; width:100%; margin-bottom:6px; }
.lp-desc { font-size:14px; color:var(--text-2); margin-bottom:28px; }

.login-note { margin-top:20px; font-size:12px; color:var(--text-3); text-align:center; }
.login-legal {
  margin-top:16px; font-size:11px; color:var(--text-3);
  text-align:center; line-height:1.6;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { width:100%; margin-bottom:18px; }
.form-group label {
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em;
  color:var(--text-3); margin-bottom:7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:11px 15px;
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); color:var(--text-1);
  font-family:'Urbanist','Inter',sans-serif; font-size:14px;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance:none;
}
.form-group select { cursor:pointer; }
.form-group textarea { resize:vertical; line-height:1.55; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--pink);
  box-shadow:0 0 0 3px var(--pink-100);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-3); }
.form-group input[readonly],
.form-group input[readonly]:focus { color:var(--text-2); box-shadow:none; cursor:default; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:var(--r-md);
  font-family:'Urbanist','Inter',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; border:none; transition:all 0.18s;
  text-decoration:none; white-space:nowrap; letter-spacing:0.02em;
}
.btn-primary {
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  color:#fff; box-shadow:var(--shadow-pink);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(250,45,86,0.45); }
.btn-primary:active { transform:translateY(0); }
.btn-secondary { background:var(--bg-elevated); color:var(--text-1); border:1px solid var(--border-d); }
.btn-secondary:hover { background:var(--bg-card-h); border-color:var(--border-str); }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border-d); }
.btn-ghost:hover { background:rgba(255,255,255,0.04); color:var(--text-1); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { background:#0EA472; }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#DC2626; }
.btn-warning { background:var(--amber); color:#fff; }
.btn-warning:hover { background:#D97706; }
.btn-sm { padding:7px 13px; font-size:12px; }
.btn-lg { padding:13px 28px; font-size:15px; }
.btn-full { width:100%; }

/* ══════════════════════════════════════════
   PORTAL LAYOUT
══════════════════════════════════════════ */
#portal {
  height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
}

/* Spinner */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(250,45,86,0.2);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  background:var(--bg-surface); border-right:1px solid var(--border-s);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.sidebar::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,45,86,0.4),transparent);
}
.sidebar-logo {
  padding:22px 20px 18px;
  border-bottom:1px solid var(--border-s);
  display:flex; align-items:center; gap:8px;
}
.logo-text {
  font-family:'Urbanist',sans-serif; font-weight:900; font-size:28px;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:-1px;
}
.logo-badge {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--pink); background:var(--pink-50); border:1px solid var(--pink-100);
  padding:2px 6px; border-radius:4px; margin-top:2px;
}
.doctor-card {
  margin:14px 12px; padding:13px;
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); display:flex; align-items:center; gap:10px;
}
.doctor-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(250,45,86,0.25);
}
.doctor-info .dc-name { font-size:13px; font-weight:700; line-height:1.3; }
.doctor-info .dc-spec { font-size:11px; color:var(--pink); font-weight:600; margin-top:2px; }
.online-dot {
  width:8px; height:8px; border-radius:50%; background:var(--green);
  margin-left:auto; box-shadow:0 0 0 2px rgba(16,185,129,0.2);
  animation:pulse-dot 2.5s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

.sidebar-nav { flex:1; padding:6px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.nav-label {
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-3); padding:12px 10px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  border-radius:var(--r-md); cursor:pointer; transition:all 0.14s;
  font-size:13.5px; font-weight:600; color:var(--text-2);
  border:1px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,0.04); color:var(--text-1); }
.nav-item.active {
  background:var(--pink-50); color:var(--pink-light); border-color:var(--pink-100);
}
.nav-item.active .nav-icon { color:var(--pink); opacity:1; }
.nav-icon { width:17px; height:17px; color:currentColor; opacity:0.65; flex-shrink:0; transition:opacity 0.14s; }
.nav-badge {
  margin-left:auto; background:var(--pink); color:#fff;
  font-size:10px; font-weight:800; min-width:18px; height:18px;
  border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.sidebar-footer {
  padding:14px 10px; border-top:1px solid var(--border-s);
  display:flex; flex-direction:column; gap:2px;
}

/* ══════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════ */
.main-area {
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-base); position:relative;
}

/* TOPBAR */
.topbar {
  height:var(--topbar-h); display:flex; align-items:center; gap:14px;
  padding:0 26px; background:var(--bg-surface); border-bottom:1px solid var(--border-s);
  flex-shrink:0; z-index:50;
}
.topbar-title { font-size:18px; font-weight:800; flex:1; letter-spacing:-0.3px; }
.topbar-search {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); padding:8px 14px; width:230px; transition:all 0.2s;
}
.topbar-search:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-100); width:270px; }
.topbar-search input { background:transparent; border:none; outline:none; font-size:13px; color:var(--text-1); font-family:inherit; width:100%; }
.topbar-search input::placeholder { color:var(--text-3); }
.topbar-search svg { color:var(--text-3); flex-shrink:0; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-md);
  border:1px solid var(--border-d); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.15s; color:var(--text-2); position:relative;
}
.icon-btn:hover { background:var(--bg-card-h); color:var(--text-1); border-color:var(--border-str); }
.ib-badge {
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; background:var(--pink); border-radius:50%;
  font-size:9px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-surface);
}
.tb-divider { width:1px; height:26px; background:var(--border-s); }
.tb-doctor { display:flex; align-items:center; gap:10px; cursor:pointer; }

/* PAGE CONTENT */
.page-content { flex:1; overflow-y:auto; padding:26px; }

/* VIEWS */
.view { display:none; }
.view.active { display:block; }
#view-consultation.active {
  display:flex !important;
  position:absolute; top:var(--topbar-h); left:0; right:0; bottom:0;
  z-index:100;
}

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:20px;
  position:relative; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon { font-size:22px; margin-bottom:14px; }
.stat-value { font-size:32px; font-weight:900; line-height:1; margin-bottom:4px; letter-spacing:-1px; }
.stat-label { font-size:12px; color:var(--text-2); font-weight:600; }
.stat-change { font-size:11px; margin-top:8px; font-weight:500; }
.stat-change.up { color:var(--green); }
.stat-change.neutral { color:var(--text-3); }

/* ══════════════════════════════════════════
   DASHBOARD GRID
══════════════════════════════════════════ */
.dashboard-grid { display:grid; grid-template-columns:1fr 340px; gap:18px; }
.card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:20px;
}
.right-panel { display:flex; flex-direction:column; gap:16px; }
.next-consult-card {
  border-color:var(--pink-100);
  background:linear-gradient(135deg,var(--bg-card),var(--pink-50));
}
.section-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.section-title { font-size:14px; font-weight:800; letter-spacing:-0.2px; }
.section-subtitle { font-size:11px; color:var(--text-3); margin-top:2px; }

/* Schedule */
.schedule-list { display:flex; flex-direction:column; }
.schedule-item { display:flex; gap:14px; padding-bottom:18px; position:relative; }
.schedule-item:last-child { padding-bottom:0; }
.schedule-time { font-size:10.5px; font-weight:700; color:var(--text-3); width:50px; flex-shrink:0; padding-top:2px; text-align:right; }
.schedule-line { display:flex; flex-direction:column; align-items:center; width:18px; flex-shrink:0; }
.schedule-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:2px; }
.schedule-connector { width:2px; flex:1; background:var(--border-s); margin-top:4px; }
.schedule-item:last-child .schedule-connector { display:none; }
.schedule-content {
  flex:1; background:var(--bg-elevated); border:1px solid var(--border-s);
  border-radius:var(--r-md); padding:11px 13px; margin-top:-2px; cursor:pointer;
  transition:all 0.15s;
}
.schedule-content:hover { border-color:var(--border-d); background:var(--bg-card-h); }
.sc-patient { font-size:13px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.sc-reason { font-size:11px; color:var(--text-2); }

/* Action items (dashboard pending) */
.action-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-s); }
.action-item:last-child { border-bottom:none; padding-bottom:0; }
.action-icon { width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.action-text { flex:1; min-width:0; }
.action-text .atitle { font-size:13px; font-weight:700; }
.action-text .asub { font-size:11px; color:var(--text-2); margin-top:2px; }

/* Progress bar */
.progress-bar { height:5px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--pink),var(--pink-light)); border-radius:99px; transition:width 0.5s ease; }

/* ══════════════════════════════════════════
   BADGES & TABS
══════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap;
}
.bdg-pending    { background:var(--amber-100); color:var(--amber); border:1px solid rgba(245,158,11,0.25); }
.bdg-confirmed  { background:var(--green-50);  color:var(--green); border:1px solid rgba(16,185,129,0.25); }
.bdg-completed  { background:rgba(255,255,255,0.05); color:var(--text-3); border:1px solid var(--border-s); }
.bdg-telehealth { background:var(--purple-50); color:var(--purple); border:1px solid rgba(139,92,246,0.25); }
.bdg-inperson   { background:var(--teal-50);   color:var(--teal);  border:1px solid rgba(6,182,212,0.25); }
.bdg-urgent     { background:var(--red-50);    color:var(--red);   border:1px solid rgba(239,68,68,0.25); }
.bdg-week       { background:var(--pink-50);   color:var(--pink);  border:1px solid var(--pink-100); }

.tab-bar {
  display:flex; gap:4px; background:var(--bg-card);
  border:1px solid var(--border-s); border-radius:var(--r-lg);
  padding:4px; margin-bottom:18px; width:fit-content;
}
.tab-item {
  padding:8px 18px; border-radius:var(--r-md); font-size:13px; font-weight:700;
  color:var(--text-2); cursor:pointer; transition:all 0.14s;
  display:flex; align-items:center; gap:6px;
}
.tab-item:hover { color:var(--text-1); }
.tab-item.active { background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.tab-count {
  background:rgba(255,255,255,0.18); border-radius:99px;
  font-size:10px; font-weight:800; min-width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.tab-item:not(.active) .tab-count { background:rgba(255,255,255,0.06); color:var(--text-3); }

/* ══════════════════════════════════════════
   APPOINTMENT CARDS
══════════════════════════════════════════ */
.appt-list { display:flex; flex-direction:column; gap:10px; }
.appt-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:16px 18px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  cursor:pointer; position:relative; overflow:hidden;
  transition:all 0.18s;
}
.appt-card:hover { background:var(--bg-card-h); border-color:var(--border-d); }
.patient-avatar {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
}
.av-0 { background:linear-gradient(135deg,#FF6B9D,#FA2D56); }
.av-1 { background:linear-gradient(135deg,#7C3AED,#A78BFA); }
.av-2 { background:linear-gradient(135deg,#06B6D4,#0891B2); }
.av-3 { background:linear-gradient(135deg,#10B981,#059669); }
.av-4 { background:linear-gradient(135deg,#F59E0B,#D97706); }
.av-5 { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.av-6 { background:linear-gradient(135deg,#EF4444,#DC2626); }
.av-7 { background:linear-gradient(135deg,#EC4899,#BE185D); }
.appt-info .appt-patient { font-size:14px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.appt-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.meta-item { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-2); }
.appt-reason { font-size:12px; color:var(--text-2); margin-top:5px; }
.appt-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }

/* ══════════════════════════════════════════
   PATIENTS GRID
══════════════════════════════════════════ */
.patients-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.patient-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:18px; cursor:pointer;
  transition:all 0.2s;
}
.patient-card:hover { background:var(--bg-card-h); border-color:var(--border-d); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pc-header-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.pc-name { font-size:14px; font-weight:800; margin-bottom:4px; }
.pc-edd { font-size:11px; color:var(--text-3); margin-top:3px; }
.pc-meta { font-size:12px; color:var(--text-2); margin-bottom:12px; display:flex; flex-direction:column; gap:4px; }
.pc-meta-row { display:flex; justify-content:space-between; }
.pc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--border-s); padding-top:12px; }
.pc-stat { text-align:center; }
.pc-stat .sv { font-size:16px; font-weight:800; }
.pc-stat .sl { font-size:10px; color:var(--text-3); margin-top:2px; }

/* ══════════════════════════════════════════
   POST-CONSULTATION
══════════════════════════════════════════ */
.pc-header {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-xl); padding:22px 24px; margin-bottom:22px;
  display:flex; align-items:center; gap:18px; position:relative; overflow:hidden;
}
.pc-header::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--pink-50),transparent);
  pointer-events:none;
}
.pc-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.pc-tab {
  padding:14px 16px; background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); cursor:pointer; text-align:center; transition:all 0.18s;
}
.pc-tab:hover { border-color:var(--border-d); background:var(--bg-card-h); }
.pc-tab.active { background:var(--pink-50); border-color:var(--pink-100); }
.pct-icon { font-size:22px; margin-bottom:6px; }
.pct-label { font-size:12px; font-weight:700; color:var(--text-2); }
.pc-tab.active .pct-label { color:var(--pink-light); }
.pc-content { display:none; }
.pc-content.active { display:block; }

/* Rx Table */
.rx-table { width:100%; border-collapse:collapse; }
.rx-table th {
  text-align:left; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-3); padding:0 8px 10px;
}
.rx-table td { padding:5px; vertical-align:middle; }
.rx-table input, .rx-table select {
  width:100%; padding:8px 10px; background:var(--bg-elevated);
  border:1px solid var(--border-d); border-radius:var(--r-sm);
  color:var(--text-1); font-family:inherit; font-size:12px; outline:none;
  transition:border-color 0.2s;
}
.rx-table input:focus, .rx-table select:focus { border-color:var(--pink); }
.rx-signature {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:var(--bg-elevated);
  border-radius:var(--r-md); border:1px solid var(--border-s); margin-bottom:20px;
}
.sig-script {
  font-family:'Urbanist',sans-serif; font-style:italic; font-weight:800;
  font-size:22px; color:var(--pink);
  padding:6px 16px; border-bottom:2px solid var(--pink); margin-bottom:4px;
}

/* Reminders */
.reminder-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; background:var(--bg-elevated);
  border:1px solid var(--border-s); border-radius:var(--r-md); margin-bottom:8px;
}
.reminder-emoji {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--pink-100); display:flex; align-items:center;
  justify-content:center; font-size:17px; flex-shrink:0;
}
.reminder-text-input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:13px; color:var(--text-1); font-family:inherit;
}
.reminder-text-input::placeholder { color:var(--text-3); }
.reminder-notice {
  padding:12px 14px; background:var(--pink-50);
  border:1px solid var(--pink-100); border-radius:var(--r-md);
  margin-bottom:18px; font-size:13px; color:var(--text-2);
}

/* ══════════════════════════════════════════
   CONSULTATION ROOM
══════════════════════════════════════════ */
.consult-layout { display:grid; grid-template-columns:1fr 330px; height:100%; overflow:hidden; }

/* Video Area */
.video-area {
  background:#040810; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.video-header {
  position:absolute; top:0; left:0; right:0; z-index:10;
  padding:16px 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent);
  display:flex; align-items:center; justify-content:space-between;
}
.rec-indicator {
  display:flex; align-items:center; gap:6px;
  background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.35);
  border-radius:99px; padding:4px 10px; font-size:11px; font-weight:700; color:var(--red);
}
.rec-dot { width:7px; height:7px; border-radius:50%; background:var(--red); animation:blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.timer-badge {
  background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.12);
  border-radius:99px; padding:4px 10px; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums; color:#fff;
}
.main-video-feed {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#0C1422 0%,#160D2E 50%,#081C32 100%);
}
.video-placeholder { display:flex; flex-direction:column; align-items:center; gap:16px; }
.patient-video-avatar {
  width:100px; height:100px; border-radius:50%;
  background:linear-gradient(135deg,#FF6B9D,#FA2D56);
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:900; color:#fff;
  box-shadow:0 0 50px rgba(250,45,86,0.4);
  animation:vpulse 3s ease-in-out infinite;
}
@keyframes vpulse { 0%,100%{box-shadow:0 0 50px rgba(250,45,86,0.4);} 50%{box-shadow:0 0 80px rgba(250,45,86,0.65);} }
.video-name-tag {
  background:rgba(0,0,0,0.6); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-md);
  padding:6px 14px; font-size:13px; font-weight:600;
}
.doctor-pip {
  position:absolute; bottom:80px; right:18px;
  width:178px; height:118px; border-radius:var(--r-lg);
  border:2px solid rgba(255,255,255,0.12); overflow:hidden;
  background:linear-gradient(135deg,#1A2840,#0F1A30);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:var(--shadow-lg); z-index:5;
}
.doctor-pip-avatar {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; color:#fff;
}
.video-controls {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  padding:18px; background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.ctrl-btn {
  width:50px; height:50px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.18s; font-size:18px;
}
.ctrl-default { background:rgba(255,255,255,0.1); color:#fff; }
.ctrl-default:hover { background:rgba(255,255,255,0.18); transform:scale(1.06); }
.ctrl-active { background:rgba(255,255,255,0.1); color:var(--pink); border:1px solid var(--pink-200); }
.ctrl-end { background:var(--red); color:#fff; width:58px; height:58px; font-size:20px; box-shadow:0 4px 20px rgba(239,68,68,0.4); }
.ctrl-end:hover { background:#DC2626; transform:scale(1.06); }

/* Consultation Side Panel */
.consult-panel { background:var(--bg-surface); border-left:1px solid var(--border-s); display:flex; flex-direction:column; overflow:hidden; }
.cp-header { padding:15px 18px; border-bottom:1px solid var(--border-s); font-size:14px; font-weight:800; }
.cp-tabs { display:flex; border-bottom:1px solid var(--border-s); padding:0 14px; }
.cp-tab {
  padding:11px 13px; font-size:12px; font-weight:700; color:var(--text-3);
  cursor:pointer; border-bottom:2px solid transparent; transition:all 0.14s; white-space:nowrap;
}
.cp-tab:hover { color:var(--text-1); }
.cp-tab.active { color:var(--pink); border-bottom-color:var(--pink); }
.cp-body { flex:1; overflow-y:auto; padding:15px; }
.cp-content { display:none; }
.cp-content.active { display:block; }
.cp-patient-card {
  display:flex; align-items:center; gap:12px; padding:13px;
  background:var(--bg-card); border-radius:var(--r-md); margin-bottom:14px;
  border:1px solid var(--border-s);
}
.cpc-name { font-size:14px; font-weight:700; }
.cpc-detail { font-size:12px; color:var(--text-2); margin-top:2px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.info-tile { background:var(--bg-card); border:1px solid var(--border-s); border-radius:var(--r-md); padding:11px; }
.it-label { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); font-weight:700; margin-bottom:4px; }
.it-value { font-size:15px; font-weight:800; }
.it-value.pink { color:var(--pink); }
.health-logs { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.hl-row {
  display:flex; justify-content:space-between;
  padding:7px 10px; background:var(--bg-card);
  border-radius:var(--r-sm); font-size:12px;
}
.hl-key { color:var(--text-2); }
.hl-val { font-weight:700; }
.live-notes {
  width:100%; background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); color:var(--text-1); font-family:inherit;
  font-size:13px; line-height:1.6; padding:11px; resize:vertical;
  min-height:180px; outline:none; transition:border-color 0.2s, box-shadow 0.2s;
}
.live-notes:focus { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-100); }

/* Document items in consult panel */
.action-banner {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--amber-100); border:1px solid rgba(245,158,11,0.3);
  border-radius:var(--r-md); margin-bottom:12px; font-size:12px;
}
.doc-item {
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  background:var(--bg-elevated); border:1px solid var(--border-s);
  border-radius:var(--r-md); margin-bottom:7px;
}
.doc-item.pending-doc { border-color:rgba(245,158,11,0.3); background:var(--amber-50); }
.doc-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--pink-100); color:var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.doc-icon.amber { background:var(--amber-100); color:var(--amber); }
.doc-info { flex:1; min-width:0; }
.di-name { font-size:12px; font-weight:600; }
.di-meta { font-size:10.5px; color:var(--text-3); margin-top:2px; }
.doc-status { font-size:11px; font-weight:700; flex-shrink:0; }
.doc-status.green { color:var(--green); }
.doc-status.amber { color:var(--amber); }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
/* Ensure Request Document and other sub-modals appear on top of details */
#modal-req-doc, #modal-reject, #modal-propose { z-index: 600; }
.modal-overlay.open { display:flex; animation:fade-in 0.2s ease; }
@keyframes fade-in { from{opacity:0;} to{opacity:1;} }
.modal {
  background:var(--bg-surface); border:1px solid var(--border-d);
  border-radius:var(--r-xl); width:100%; max-width:500px;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:slide-up 0.25s cubic-bezier(0.4,0,0.2,1);
}
.modal-wide { max-width:700px; }
@keyframes slide-up { from{transform:translateY(24px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.modal-header { padding:22px 24px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:17px; font-weight:800; }
.modal-close {
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.06); color:var(--text-2);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.modal-close:hover { background:rgba(255,255,255,0.12); color:var(--text-1); }
.modal-body { padding:20px 24px; }
.modal-footer { padding:0 24px 22px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* Appt detail */
.appt-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.detail-field { background:var(--bg-card); border:1px solid var(--border-s); border-radius:var(--r-md); padding:11px 13px; }
.detail-field .label { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); font-weight:700; margin-bottom:4px; }
.detail-field .value { font-size:14px; font-weight:700; }

/* Doc upload */
.doc-upload-area {
  border:2px dashed var(--border-str); border-radius:var(--r-lg);
  padding:28px; text-align:center; cursor:pointer; transition:all 0.2s; margin-bottom:14px;
}
.doc-upload-area:hover { border-color:var(--pink); background:var(--pink-50); }

/* Checkbox list */
.doc-checkbox-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  padding: 12px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-s);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  min-height: 64px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.doc-checkbox-item:hover {
  border-color: var(--pink);
  background: rgba(255, 45, 86, 0.02);
}

/* The "Change Box" - 32px rounded square */
.doc-checkbox-item input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 32px !important;
  height: 32px !important;
  background: #1a1f2e !important;
  border: 1.5px solid var(--border-d) !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.doc-checkbox-item input[type="checkbox"]:checked {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  box-shadow: 0 4px 12px rgba(255, 45, 86, 0.2);
}

.doc-checkbox-item input[type="checkbox"]::after {
  content: '✓';
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.doc-checkbox-item input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

/* Info / warning notice */
.info-notice {
  padding:12px 14px; background:var(--amber-50);
  border:1px solid rgba(245,158,11,0.25); border-radius:var(--r-md);
  font-size:12px; color:var(--text-2);
}

/* ══════════════════════════════════════════
   NOTIFICATION PANEL
══════════════════════════════════════════ */
.notif-panel {
  position:fixed; top:var(--topbar-h); right:0;
  width:355px; height:calc(100vh - var(--topbar-h));
  background:var(--bg-surface); border-left:1px solid var(--border-d);
  z-index:400; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-10px 0 40px rgba(0,0,0,0.5);
}
.notif-panel.open { transform:translateX(0); }
.notif-panel-header {
  padding:18px 18px 16px; border-bottom:1px solid var(--border-s);
  display:flex; align-items:center; justify-content:space-between;
}
.notif-panel-header h3 { font-size:15px; font-weight:800; }
.notif-list { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:3px; }
.notif-item {
  display:flex; align-items:flex-start; gap:9px; padding:11px;
  border-radius:var(--r-md); cursor:pointer; transition:all 0.14s;
  border:1px solid transparent;
}
.notif-item:hover { background:rgba(255,255,255,0.04); border-color:var(--border-s); }
.notif-item.unread { background:var(--pink-50); border-color:var(--pink-100); }
.notif-dot { width:7px; height:7px; border-radius:50%; background:var(--pink); flex-shrink:0; margin-top:5px; }
.notif-item:not(.unread) .notif-dot { background:transparent; }
.notif-icon { width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.notif-content { flex:1; min-width:0; }
.notif-content .ntitle { font-size:13px; font-weight:700; }
.notif-content .ndesc { font-size:12px; color:var(--text-2); margin-top:2px; line-height:1.45; }
.notif-content .ntime { font-size:11px; color:var(--text-3); margin-top:4px; }

/* ══════════════════════════════════════════
   SUCCESS OVERLAY
══════════════════════════════════════════ */
.success-overlay {
  position:fixed; inset:0; z-index:9998;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(8px);
}
.success-overlay.show { display:flex; animation:fade-in 0.25s ease; }
.success-box {
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-2xl); padding:48px; text-align:center;
  max-width:380px; animation:scale-in 0.38s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes scale-in { from{transform:scale(0.72);opacity:0;} to{transform:scale(1);opacity:1;} }
.success-checkmark {
  width:78px; height:78px; border-radius:50%; background:var(--green-100);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:34px;
}
.success-box h3 { font-size:20px; font-weight:800; margin-bottom:8px; }
.success-box p { font-size:13px; color:var(--text-2); line-height:1.6; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:12px;
  padding:13px 17px; background:var(--bg-elevated);
  border:1px solid var(--border-d); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); min-width:270px; max-width:370px;
  pointer-events:all; font-size:13px; font-weight:600;
  animation:toast-in 0.28s ease;
}
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.warning { border-left:3px solid var(--amber); }
.toast.info    { border-left:3px solid var(--pink); }
.toast-icon { font-size:17px; flex-shrink:0; }
@keyframes toast-in  { from{transform:translateX(20px);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes toast-out { from{transform:translateX(0);opacity:1;} to{transform:translateX(20px);opacity:0;} }

/* ══════════════════════════════════════════
   UTILS
══════════════════════════════════════════ */
.divider { height:1px; background:var(--border-s); margin:16px 0; }
.empty-state { text-align:center; padding:48px 24px; color:var(--text-3); }
.empty-state .icon { font-size:40px; margin-bottom:12px; }
.empty-state p { font-size:14px; }
.mt-3 { margin-top:12px; }
.w-full { width:100%; }

/* ── SETTINGS \u0026 PREFERENCES ── */
.view-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-s);
  background: var(--bg-card);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--bg-card-h) !important;
  color: var(--pink) !important;
  border-color: var(--pink) !important;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 5;
}

.password-toggle:hover {
  opacity: 1;
}

.pref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-s);
}

.pref-item:last-child {
  border-bottom: none;
}

.pref-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}

.pref-desc {
  font-size: 12px;
  color: var(--text-3);
}

/* ── TOGGLE SWITCH ── */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--bg-base);
  border: 1px solid var(--border-s);
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: \\;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: var(--text-3);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: rgba(250, 45, 86, 0.2);
  border-color: var(--pink);
}

input:checked + .slider:before {
  transform: translateX(22px);
  background-color: var(--pink);
}