/* ============================================================
   MediCare Klinik — Main Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --primary:       #0B6E4F;
  --primary-light: #12916A;
  --primary-dark:  #084D38;
  --accent:        #3ECFA4;
  --accent-soft:   #E8FAF4;
  --warn:          #F59E0B;
  --danger:        #EF4444;
  --info:          #3B82F6;
  --bg:            #F0F4F2;
  --card:          #FFFFFF;
  --sidebar:       #071E18;
  --sidebar-hover: #0D3526;
  --text:          #1A2B26;
  --muted:         #6B877E;
  --border:        #D1E5DF;
  --shadow:        0 2px 20px rgba(11,110,79,.08);
  --shadow-lg:     0 8px 40px rgba(11,110,79,.14);
  --radius:        14px;
  --radius-sm:     8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

/* ===== FLASH ===== */
.flash-msg {
  padding:13px 18px; border-radius:10px; margin-bottom:20px;
  font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:10px;
  animation:slideDown .3s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.flash-sukses { background:#D1FAE5; color:#065F46; border-left:3px solid #10B981; }
.flash-error  { background:#FEE2E2; color:#991B1B; border-left:3px solid #EF4444; }
.flash-info   { background:#DBEAFE; color:#1E40AF; border-left:3px solid #3B82F6; }
.flash-warn   { background:#FEF3C7; color:#92400E; border-left:3px solid #F59E0B; }

/* ===== SIDEBAR ===== */
.sidebar {
  width:260px; min-height:100vh;
  background:var(--sidebar);
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; overflow-x:hidden;
  /* Desktop: always visible */
  transform:translateX(0);
}
.sidebar::before {
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(62,207,164,.07);
  pointer-events:none;
}

/* Sidebar overlay backdrop — mobile only */
.sidebar-backdrop {
  display:none;
  position:fixed; inset:0; z-index:190;
  background:rgba(7,30,24,.55); backdrop-filter:blur(3px);
}
.sidebar-backdrop.open { display:block; animation:fadeIn .22s ease; }

.sidebar-brand {
  padding:20px 18px 16px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar-brand-icon {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--primary-light),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; flex-shrink:0;
}
.sidebar-brand-name { color:#fff; font-size:14px; font-weight:800; line-height:1.2; }
.sidebar-brand-sub  { color:rgba(255,255,255,.35); font-size:10px; }

/* Close btn — hidden on desktop, shown on mobile */
.sidebar-close {
  display:none;
  position:absolute; right:14px; top:18px;
  width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.1);
  border:none; color:rgba(255,255,255,.6); font-size:13px; cursor:pointer;
  align-items:center; justify-content:center; transition:all .2s;
}
.sidebar-close:hover { background:rgba(255,255,255,.2); color:#fff; }

.sidebar-section {
  padding:16px 18px 5px;
  font-size:9.5px; font-weight:700; letter-spacing:1.4px;
  color:rgba(255,255,255,.22); text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.sidebar-section::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.06); }

.sidebar-menu { list-style:none; padding:0 8px; }
.sidebar-menu li { margin-bottom:2px; }
.sidebar-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:9px;
  color:rgba(255,255,255,.48); font-size:12.5px; font-weight:500;
  text-decoration:none; transition:all .2s;
}
.sidebar-link:hover { background:var(--sidebar-hover); color:rgba(255,255,255,.88); }
.sidebar-link.active {
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff; box-shadow:0 4px 14px rgba(11,110,79,.35);
}
.sidebar-link i { width:16px; text-align:center; font-size:13px; }
.sidebar-badge {
  margin-left:auto; padding:1px 7px; border-radius:99px;
  font-size:10px; font-weight:800; background:var(--accent); color:var(--primary-dark);
}
.sidebar-footer {
  margin-top:auto; padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:10px;
}
.sidebar-avatar {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:800;
}
.sidebar-user-name { color:rgba(255,255,255,.8); font-size:12px; font-weight:700; }
.sidebar-user-role { color:rgba(255,255,255,.3); font-size:10px; }
.sidebar-logout {
  margin-left:auto; color:rgba(255,255,255,.28); cursor:pointer;
  transition:all .2s; font-size:14px; text-decoration:none;
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-logout:hover { color:var(--danger); background:rgba(239,68,68,.15); }

/* ===== TOPBAR ===== */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(240,244,242,.95); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 22px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
}
/* Hamburger — HIDDEN on desktop, shown only on mobile/tablet */
.topbar-toggle {
  display:none;
  width:36px; height:36px; border-radius:9px; border:1.5px solid var(--border);
  background:#fff; align-items:center; justify-content:center;
  cursor:pointer; flex-direction:column; gap:4px; padding:9px; flex-shrink:0;
  transition:all .2s;
}
.topbar-toggle:hover { border-color:var(--primary); background:var(--accent-soft); }
.toggle-bar { width:15px; height:2px; border-radius:2px; background:var(--text); transition:all .3s; }
/* Animated X */
.sidebar-open .toggle-bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.sidebar-open .toggle-bar:nth-child(2) { opacity:0; }
.sidebar-open .toggle-bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.topbar-title-wrap { flex:1; min-width:0; }
.topbar-title    { font-size:17px; font-weight:800; }
.topbar-subtitle { font-size:11px; color:var(--muted); }
.topbar-actions  { display:flex; align-items:center; gap:8px; }
.topbar-btn {
  width:36px; height:36px; border-radius:9px;
  border:1.5px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); font-size:13px;
  transition:all .2s; position:relative; text-decoration:none;
}
.topbar-btn:hover { border-color:var(--primary); color:var(--primary); }
.notif-dot {
  width:7px; height:7px; background:var(--danger); border-radius:50%;
  position:absolute; top:5px; right:5px; border:1.5px solid white;
}
.topbar-user {
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px;
  background:#fff; border:1.5px solid var(--border); border-radius:9px;
  transition:all .2s;
}
.topbar-user-av {
  width:27px; height:27px; border-radius:7px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:800;
}
.topbar-user-name { font-size:12.5px; font-weight:700; }

/* ===== MAIN LAYOUT ===== */
.main-content { margin-left:260px; min-height:100vh; }
.page-content { padding:22px 26px; }

/* ===== CARDS ===== */
.card {
  background:var(--card); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow); animation:fadeIn .4s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.card-title  { font-size:15px; font-weight:700; }
.card-subtitle { font-size:12px; color:var(--muted); margin-top:2px; }

/* ===== STAT CARDS ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat-card {
  background:var(--card); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; width:90px; height:90px;
  border-radius:50%; right:-20px; top:-20px;
  background:var(--stat-bg,rgba(62,207,164,.08));
}
.stat-label { font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:30px; font-weight:800; margin:6px 0 3px; line-height:1; }
.stat-change { font-size:11.5px; color:var(--muted); }
.stat-change.up   { color:#10B981; }
.stat-change.down { color:var(--danger); }
.stat-icon {
  position:absolute; right:20px; top:20px;
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}

/* ===== GRID ===== */
.grid-2    { display:grid; grid-template-columns:1fr 1fr;   gap:16px; margin-bottom:20px; }
.grid-3    { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:20px; }
.grid-3-2  { display:grid; grid-template-columns:3fr 2fr;   gap:16px; margin-bottom:20px; }
.grid-2-1  { display:grid; grid-template-columns:2fr 1fr;   gap:16px; margin-bottom:20px; }
.mb-4 { margin-bottom:16px; }
.mt-4 { margin-top:16px; }
.gap-10 { gap:10px; }

/* ===== TABLE ===== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); padding:10px 14px;
  text-align:left; border-bottom:1.5px solid var(--border);
  white-space:nowrap;
}
tbody td { padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--accent-soft); }

/* ===== BADGES ===== */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600;
  white-space:nowrap;
}
.badge-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-green  { background:#D1FAE5; color:#065F46; }
.badge-yellow { background:#FEF3C7; color:#92400E; }
.badge-red    { background:#FEE2E2; color:#991B1B; }
.badge-blue   { background:#DBEAFE; color:#1E40AF; }
.badge-purple { background:#EDE9FE; color:#5B21B6; }
.badge-gray   { background:#F3F4F6; color:#374151; }

/* ===== FORM ===== */
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-label {
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;
}
.form-control {
  padding:10px 14px; border:1.5px solid var(--border);
  border-radius:9px; font-size:13px; font-family:inherit;
  outline:none; transition:all .2s; background:#fff; width:100%;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,110,79,.1); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }
.input-icon { position:relative; }
.input-icon i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; }
.input-icon .form-control { padding-left:38px; }

/* ===== BUTTONS ===== */
.btn {
  padding:9px 18px; border-radius:9px; font-size:13px;
  font-weight:600; font-family:inherit; cursor:pointer; border:none;
  transition:all .2s; display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-light); box-shadow:0 4px 14px rgba(11,110,79,.3); }
.btn-accent  { background:var(--accent); color:var(--primary-dark); font-weight:700; }
.btn-accent:hover { opacity:.9; }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-danger:hover { opacity:.9; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-info    { background:var(--info); color:#fff; }
.btn-warn    { background:var(--warn); color:#fff; }
.btn-sm   { padding:6px 13px; font-size:12px; }
.btn-lg   { padding:13px 26px; font-size:15px; font-weight:700; }
.btn-block { width:100%; justify-content:center; }

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px); z-index:999;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal-box {
  background:#fff; border-radius:18px; padding:26px;
  width:520px; max-width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.2);
  animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.modal-box-lg { width:700px; }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.modal-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-title   { font-size:16px; font-weight:700; }
.modal-close   { width:28px; height:28px; border-radius:7px; border:none; background:var(--bg); cursor:pointer; font-size:13px; color:var(--muted); transition:all .2s; }
.modal-close:hover { background:var(--border); }
.modal-footer  { display:flex; gap:9px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }

/* ===== PILL TABS ===== */
.pill-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pill-tab {
  padding:6px 14px; border-radius:99px; font-size:12px; font-weight:600;
  cursor:pointer; border:1.5px solid var(--border); background:transparent;
  color:var(--muted); font-family:inherit; transition:all .2s;
  text-decoration:none;
}
.pill-tab.active, .pill-tab:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== SEARCH BAR ===== */
.search-bar { position:relative; }
.search-bar input {
  width:100%; padding:9px 13px 9px 36px;
  border:1.5px solid var(--border); border-radius:9px;
  font-size:13px; font-family:inherit; outline:none; transition:all .2s;
}
.search-bar input:focus { border-color:var(--primary); }
.search-bar i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; }

/* ===== QUEUE ===== */
.queue-display {
  text-align:center; padding:22px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border-radius:var(--radius); color:#fff; margin-bottom:14px;
}
.queue-num-big { font-size:64px; font-weight:800; line-height:1; letter-spacing:-2px; }
.queue-meta    { font-size:12px; opacity:.75; margin-top:5px; }
.queue-list    { list-style:none; }
.queue-item {
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border-radius:10px; margin-bottom:7px; background:var(--bg); cursor:pointer; transition:all .2s;
}
.queue-item:hover   { background:var(--accent-soft); }
.queue-item.current { background:var(--accent-soft); border-left:3px solid var(--primary); }
.q-num  { width:36px; height:36px; border-radius:8px; background:var(--primary); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.q-name { font-weight:600; font-size:13px; }
.q-sub  { font-size:11px; color:var(--muted); margin-top:1px; }

/* ===== STOCK BAR ===== */
.stock-item { margin-bottom:13px; }
.stock-info { display:flex; justify-content:space-between; margin-bottom:5px; }
.stock-name { font-size:13px; font-weight:600; }
.stock-qty  { font-size:12px; font-weight:700; }
.stock-bar  { height:6px; border-radius:99px; background:var(--border); overflow:hidden; }
.stock-fill { height:100%; border-radius:99px; transition:width .6s ease; }

/* ===== TIMELINE ===== */
.timeline { position:relative; padding-left:22px; }
.timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--border); }
.tl-item  { position:relative; margin-bottom:14px; }
.tl-dot   { position:absolute; left:-19px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid #fff; box-shadow:0 0 0 2px var(--primary); }
.tl-box   { background:var(--bg); border-radius:9px; padding:11px 13px; }
.tl-time  { font-size:11px; color:var(--muted); margin-bottom:2px; }
.tl-title { font-size:13px; font-weight:600; }
.tl-desc  { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ===== RECEIPT ===== */
.receipt {
  font-family:'Courier New',monospace;
  background:#fff; border:1.5px dashed var(--border);
  border-radius:11px; padding:18px; font-size:12px; line-height:1.75;
}
.receipt-hdr  { text-align:center; margin-bottom:10px; }
.receipt-name { font-size:14px; font-weight:700; }
.receipt-divider { border-top:1px dashed var(--border); margin:7px 0; }
.receipt-row { display:flex; justify-content:space-between; }
.receipt-total { font-weight:700; font-size:13px; }

/* ===== AVATAR ===== */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; }
.avatar-sm { width:30px; height:30px; font-size:11px; }
.avatar-md { width:40px; height:40px; font-size:14px; }
.avatar-lg { width:56px; height:56px; font-size:20px; }

/* ===== ALERTS ===== */
.alert { padding:12px 16px; border-radius:9px; font-size:13px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.alert-info    { background:#EFF6FF; color:#1E40AF; border-left:3px solid var(--info); }
.alert-success { background:#D1FAE5; color:#065F46; border-left:3px solid #10B981; }
.alert-warn    { background:#FEF3C7; color:#92400E; border-left:3px solid var(--warn); }
.alert-danger  { background:#FEE2E2; color:#991B1B; border-left:3px solid var(--danger); }

/* ===== MISC ===== */
.text-muted { color:var(--muted); }
.text-sm    { font-size:12px; }
.text-xs    { font-size:11px; }
.fw-bold    { font-weight:700; }
.d-flex     { display:flex; align-items:center; }
.divider    { height:1px; background:var(--border); margin:18px 0; }
.empty-state { text-align:center; padding:40px; color:var(--muted); }
.empty-state i { font-size:40px; margin-bottom:12px; display:block; opacity:.3; }
.empty-state p { font-size:14px; }

/* ===== LOGIN PAGE ===== */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#071E18 0%,#0B6E4F 55%,#12916A 100%);
  position:relative; overflow:hidden;
}
.login-page::before {
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:rgba(62,207,164,.07); top:-100px; right:-150px;
  animation:pulse 7s ease-in-out infinite;
}
.login-page::after {
  content:''; position:absolute; width:350px; height:350px; border-radius:50%;
  background:rgba(62,207,164,.05); bottom:-60px; left:-60px;
  animation:pulse 9s ease-in-out infinite reverse;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.login-card {
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-radius:22px; padding:48px 44px;
  width:420px; position:relative; z-index:1;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  animation:slideUp .5s cubic-bezier(.34,1.56,.64,1);
}
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.login-logo-icon {
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
}
.login-logo-text { font-family:'Instrument Serif',serif; font-size:25px; color:var(--primary); }
.login-sub   { font-size:13px; color:var(--muted); margin-bottom:28px; }
.login-tabs  { display:flex; gap:5px; margin-bottom:24px; padding:4px; background:var(--bg); border-radius:9px; }
.login-tab   { flex:1; padding:8px; border:none; border-radius:6px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; background:transparent; color:var(--muted); transition:all .2s; }
.login-tab.active { background:#fff; color:var(--primary); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.login-info  { margin-top:18px; padding:12px 14px; background:var(--accent-soft); border-radius:9px; font-size:12px; color:var(--primary); }
.login-info strong { display:block; margin-bottom:3px; }
.btn-login {
  width:100%; padding:13px; border:none; border-radius:9px; font-size:14.5px; font-weight:700;
  font-family:inherit; cursor:pointer; margin-top:8px; transition:all .2s;
}
.btn-login-admin  { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }
.btn-login-admin:hover  { box-shadow:0 8px 24px rgba(11,110,79,.35); transform:translateY(-1px); }
.btn-login-dokter { background:linear-gradient(135deg,#1D4ED8,#3B82F6); color:#fff; }
.btn-login-dokter:hover { box-shadow:0 8px 24px rgba(59,130,246,.35); transform:translateY(-1px); }
.btn-login-pasien { background:linear-gradient(135deg,#7C3AED,#A855F7); color:#fff; }
.btn-login-pasien:hover { box-shadow:0 8px 24px rgba(124,58,237,.35); transform:translateY(-1px); }

/* ===== PATIENT PORTAL ===== */
.patient-portal {
  min-height:100vh;
  background:linear-gradient(180deg,#071E18 0%,#0B6E4F 35%,var(--bg) 70%);
}
.patient-header { padding:28px 20px 80px; text-align:center; color:#fff; }
.patient-header h1 { font-size:28px; font-weight:800; margin-bottom:6px; }
.patient-header p  { opacity:.7; font-size:14px; }
.patient-wrap { max-width:680px; margin:-60px auto 0; padding:0 16px 40px; }
.patient-card { background:#fff; border-radius:18px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.13); margin-bottom:14px; }
.patient-card-title { font-size:15px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.patient-card-title i { color:var(--primary); }
.queue-ticket {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:14px; padding:26px; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.queue-ticket::before { content:''; position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.07); top:-30px; right:-30px; }
.ticket-num   { font-size:72px; font-weight:800; line-height:1; }
.ticket-poli  { font-size:12px; opacity:.75; margin-top:4px; }
.ticket-stats { display:flex; justify-content:space-around; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2); }
.ticket-stat label { font-size:10px; opacity:.65; display:block; }
.ticket-stat span  { font-size:14px; font-weight:700; }

/* ===== DOCTOR PAGE ===== */
.doctor-header {
  background:linear-gradient(135deg,#071E18,var(--primary));
  padding:24px 26px 20px; color:#fff;
  display:flex; align-items:center; gap:16px;
}
.doctor-av {
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
}
.doctor-info h2 { font-size:19px; font-weight:700; }
.doctor-info p  { font-size:12px; opacity:.65; margin-top:3px; }
.doctor-stats   { display:flex; gap:22px; margin-top:10px; }
.ds-item label  { font-size:10px; opacity:.55; display:block; }
.ds-item span   { font-size:20px; font-weight:800; }

/* ===== MINI CHART ===== */
.mini-bars { display:flex; align-items:flex-end; gap:3px; }
.mini-bar  { flex:1; border-radius:3px 3px 0 0; background:var(--accent); opacity:.65; transition:all .3s; }
.mini-bar:hover  { opacity:1; }
.mini-bar.active { opacity:1; background:var(--primary); }

/* ===== MOBILE BOTTOM NAVIGATION (default hidden — shown only by media query) ===== */
.bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:150;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding:8px 4px env(safe-area-inset-bottom,8px);
  justify-content:space-around; align-items:center;
  box-shadow:0 -4px 24px rgba(11,110,79,.1);
}
.bn-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 8px; border-radius:12px; cursor:pointer;
  text-decoration:none; transition:all .2s; flex:1;
  color:var(--muted); font-size:10px; font-weight:700;
  min-width:0; position:relative;
}
.bn-item i { font-size:18px; transition:all .2s; }
.bn-item span { font-size:9px; font-weight:700; white-space:nowrap; }
.bn-item.active { color:var(--primary); }
.bn-item.active i { transform:translateY(-2px); }
.bn-item.active::before {
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:28px; height:3px; border-radius:0 0 99px 99px; background:var(--primary);
}
.bn-badge {
  position:absolute; top:2px; right:6px;
  background:var(--danger); color:#fff;
  font-size:8px; font-weight:800; border-radius:99px;
  padding:1px 4px; min-width:14px; text-align:center;
  border:1.5px solid #fff;
}
.bn-fab {
  width:48px; height:48px; border-radius:14px; flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(11,110,79,.4);
  margin-top:-14px; border:3px solid #fff; transition:all .2s;
}
.bn-fab i { color:#fff; font-size:19px; }

/* ===== RESPONSIVE — TABLET & MOBILE ===== */

/* ---- TABLET (768px - 1100px) ---- */
@media(max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-3     { grid-template-columns:1fr 1fr; }
  .grid-3-2, .grid-2-1 { grid-template-columns:1fr; }
}

/* ---- MOBILE & TABLET (<= 768px) ---- */
@media(max-width:768px) {

  /* === SIDEBAR: hidden, drawer dari kiri === */
  .sidebar {
    transform:translateX(-100%);
    box-shadow:none;
  }
  .sidebar.open {
    transform:translateX(0) !important;
    box-shadow:8px 0 40px rgba(0,0,0,.3);
  }
  .sidebar-close { display:flex !important; }

  /* === MAIN: full width === */
  .main-content { margin-left:0 !important; }
  .page-content { padding:14px 14px 80px; }

  /* === TOPBAR: show hamburger === */
  .topbar { padding:10px 14px; }
  .topbar-toggle { display:flex !important; }
  .topbar-title    { font-size:15px; }
  .topbar-subtitle { display:none; }
  .topbar-user-name { display:none; }
  .topbar-user { padding:5px 8px 5px 5px; }

  /* === GRIDS collapse === */
  .grid-2, .grid-3, .form-row, .form-row3 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }

  /* === CARDS: tighter padding === */
  .card { padding:16px; border-radius:13px; }
  .stat-card { padding:16px; }
  .stat-value { font-size:24px; }

  /* === TABLES: scroll horizontal === */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:550px; }

  /* === MODAL: sheet dari bawah === */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal-box {
    border-radius:20px 20px 0 0; width:100%; max-width:100%;
    max-height:88vh; padding:20px;
  }

  /* === BOTTOM NAV: tampilkan === */
  .bottom-nav { display:flex !important; }

  /* Login */
  .login-card { padding:28px 20px; width:96%; border-radius:20px; }

  /* Pill tabs scroll */
  .pill-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .pill-tab  { flex-shrink:0; }
}

/* ---- SMALL MOBILE (<= 480px) ---- */
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-value  { font-size:20px; }
  .page-content { padding:10px 10px 80px; }
  .topbar-btn  { display:none; }
  .topbar-btn.notif-btn { display:flex; } /* keep bell */
}