/* =====================================================
   KLINIK LABUAN GROUP - MODERN MEDICAL DESIGN SYSTEM
   ===================================================== */
:root{
  --primary:#0d9488; --primary-600:#0f766e; --primary-050:#f0fdfa;
  --ink:#0f172a; --muted:#64748b; --bg:#f1f5f9; --line:#e2e8f0;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.07);
  --sidebar-w:264px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
*{ -webkit-tap-highlight-color:transparent; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); font-size:.925rem; }
.fw-600{ font-weight:600; }
.fw-800{ font-weight:800; }

/* ---------- SIDEBAR ---------- */
.sidebar{ position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:1040;
  background:linear-gradient(180deg,#0f172a 0%,#12203a 100%); color:#cbd5e1;
  display:flex; flex-direction:column; transition:transform .25s ease; }
.sidebar-brand{ display:flex; gap:12px; align-items:center; padding:20px; }
.brand-icon{ width:44px; height:44px; border-radius:12px; color:#fff; font-size:1.15rem;
  background:linear-gradient(135deg,var(--primary),#22d3ee); display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(13,148,136,.4); }
.brand-title{ color:#fff; font-weight:800; letter-spacing:.2px; }
.brand-sub{ font-size:.68rem; color:rgba(255,255,255,.65); }
.nav-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:#5b6c8c; padding:16px 26px 6px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:11px 16px; margin:2px 12px;
  border-radius:10px; color:#aab8d0; text-decoration:none; font-weight:500; transition:.15s; }
.nav-item i{ width:20px; text-align:center; }
.nav-item:hover{ background:rgba(148,163,184,.12); color:#fff; }
.nav-item.active{ background:linear-gradient(90deg,var(--primary),#0ea5a0); color:#fff;
  box-shadow:0 6px 14px rgba(13,148,136,.4); }
.sidebar-footer{ margin-top:auto; padding:14px; border-top:1px solid rgba(148,163,184,.15); }
.sidebar-backdrop{ display:none; }

/* ---------- MAIN / TOPBAR ---------- */
.main{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:14px;
  padding:14px 24px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); }
.page-title{ font-size:1.12rem; font-weight:800; margin:0; }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.date-chip{ font-size:.78rem; color:var(--muted); background:#fff; border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; }
.avatar{ width:38px; height:38px; border-radius:12px; color:#fff; font-weight:800; font-size:.85rem;
  background:linear-gradient(135deg,var(--primary),#22d3ee); display:grid; place-items:center; }
.user-name{ font-weight:700; font-size:.85rem; line-height:1.1; }
.user-role{ font-size:.7rem; color:var(--muted); text-transform:capitalize; }
.content{ padding:24px; }

/* ---------- OVERRIDES BOOTSTRAP ---------- */
.card{ border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
.card-header{ font-weight:700; border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0 !important; }
.card-header:not([class*="bg-"]){ background:#fff; }
.table{ margin-bottom:0; }
.table thead th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; }
.table thead.table-dark th{ color:#fff; }
.btn{ border-radius:10px; font-weight:600; }
.btn-primary{ --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-600); --bs-btn-hover-border-color:var(--primary-600); }
.form-control,.form-select{ border-radius:10px; border-color:var(--line); }
.form-control:focus,.form-select:focus{ border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(13,148,136,.15); }
.badge{ border-radius:6px; font-weight:600; }
.alert{ border-radius:12px; border:0; }

/* ---------- DASHBOARD STAT & CHART ---------- */
.stat-icon{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  font-size:1.15rem; flex-shrink:0; }
.stat-value{ font-size:1.3rem; font-weight:800; line-height:1.15; }
.stat-label{ font-size:.68rem; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }
.chart-box{ position:relative; height:280px; width:100%; }

/* ---------- LOGIN (DESKTOP) ---------- */
.auth-wrap{ min-height:100vh; display:flex; }
.auth-brand{ flex:1; color:#fff; padding:48px; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#0f172a 0%,#0d9488 100%); }
.auth-form{ width:500px; background:#fff; display:flex; align-items:center;
  justify-content:center; padding:32px; }
.auth-feature{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.auth-feature i{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.15);
  display:grid; place-items:center; }

/* ---------- AUTH ANIMATIONS ---------- */
.auth-brand{ position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#0d9488,#134e4a);
  background-size:280% 280%; animation:gradientShift 16s ease infinite; }
@keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.auth-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.3;
  animation:orbMove 12s ease-in-out infinite alternate; }
.o1{ width:320px; height:320px; background:#14b8a6; top:-90px; right:-70px; }
.o2{ width:280px; height:280px; background:#0ea5e9; bottom:-80px; left:-80px; animation-delay:3s; }
@keyframes orbMove{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-40px,40px) scale(1.15);} }

.auth-float{ position:absolute; color:rgba(255,255,255,.10);
  animation:drift ease-in-out infinite alternate; }
.f1{ top:18%; left:12%; font-size:26px; animation-duration:9s; }
.f2{ top:30%; right:14%; font-size:32px; animation-duration:11s; animation-delay:1s; }
.f3{ top:58%; left:8%;  font-size:22px; animation-duration:10s; animation-delay:2s; }
.f4{ top:70%; right:20%; font-size:26px; animation-duration:12s; }
.f5{ top:12%; right:38%; font-size:20px; animation-duration:8s;  animation-delay:.5s; }
.f6{ top:48%; right:6%;  font-size:24px; animation-duration:13s; animation-delay:1.5s; }
@keyframes drift{ from{ transform:translateY(-14px) rotate(-8deg);} to{ transform:translateY(16px) rotate(8deg);} }

.auth-headline{ font-weight:800; font-size:2rem; line-height:1.25; max-width:440px; }

.ecg{ position:absolute; left:0; right:0; bottom:64px; width:100%; height:90px;
  opacity:.45; pointer-events:none; }
.ecg path{ fill:none; stroke:#5eead4; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400; animation:ecgDraw 7s linear infinite; }
@keyframes ecgDraw{ 0%{stroke-dashoffset:1400} 55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1400} }

.brand-icon.pulse i{ display:inline-block; animation:heartbeat 1.8s ease-in-out infinite; }
@keyframes heartbeat{ 0%,100%{transform:scale(1)} 20%{transform:scale(1.18)}
  35%{transform:scale(1)} 50%{transform:scale(1.12)} 65%{transform:scale(1)} }

.anim{ opacity:0; transform:translateY(18px);
  animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--d,0s); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{ content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .6s ease; }
.btn-shine:hover::after{ left:130%; }

.auth-form .input-group-text, .auth-form .form-control{ transition:border-color .2s, color .2s, background .2s; }
.auth-form .input-group:focus-within .input-group-text{
  color:var(--primary); background:var(--primary-050); border-color:var(--primary); }
.auth-form .input-group:focus-within .form-control{ border-color:var(--primary); }

/* =====================================================
   RESPONSIVE — SATU-SATUNYA BLOK MEDIA (JANGAN DUPLIKASI)
   ===================================================== */
@media (max-width:991.98px){
  /* --- Sidebar --- */
  .sidebar{ transform:translateX(-100%); }
  body.sidebar-open .sidebar{ transform:none; }
  body.sidebar-open .sidebar-backdrop{ display:block; position:fixed; inset:0;
    background:rgba(15,23,42,.55); z-index:1035; }
  .main{ margin-left:0; }

  /* --- LOGIN MOBILE: 1 layar, logo & footer center --- */
  .auth-wrap{
    display:flex !important;
    flex-direction:column !important;
    position:relative !important;
    min-height:100vh !important;
    min-height:100dvh !important;   /* tinggi layar HP sebenarnya */
    padding:88px 0 48px !important;
  }
  .auth-brand{
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    display:block !important;
  }
  .auth-brand > .position-relative{ padding:22px 18px; }

    /* Ikon di ATAS teks, semua center */
  .auth-brand > .position-relative > .d-flex{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
    margin-bottom:18px !important;
  }

  /* Footer di TENGAH */
  .auth-brand .mt-auto{ text-align:center; }

  .auth-headline, .auth-feature{ display:none !important; }
  .ecg{ bottom:52px !important; height:56px; opacity:.3; }

  .auth-form{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:auto !important;
    margin:auto 18px !important;
    padding:24px 20px !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 18px 50px rgba(15,23,42,.28) !important;
  }
  .auth-form > div{ margin:0 auto; }
}

/* Aksesibilitas */
@media (prefers-reduced-motion: reduce){
  .auth-brand, .auth-orb, .auth-float, .ecg path, .brand-icon.pulse i, .anim{ animation:none !important; }
  .anim{ opacity:1; transform:none; }
}

/* ---------- MOBILE KECIL: semua halaman rapi & kompak ---------- */
@media (max-width:575.98px){
  /* Jarak halaman & topbar */
  .content{ padding:16px; }
  .topbar{ padding:12px 16px; }
  .page-title{ font-size:1rem; }

  /* Kartu */
  .card-body{ padding:14px; }
  .card-header{ padding:.6rem .9rem; font-size:.85rem; }
  .card-body.d-flex.gap-3{ padding:14px; gap:.65rem !important; }
  .card-body.p-0{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Kartu statistik dashboard */
  .stat-icon{ width:38px; height:38px; border-radius:10px; font-size:.95rem; }
  .stat-value{ font-size:1.02rem; white-space:nowrap; }
  .stat-label{ font-size:.58rem; letter-spacing:.04em; }
  .chart-box{ height:220px; }

  /* Form filter kompak */
  .form-label{ font-size:.78rem; margin-bottom:.3rem; }
  .form-control,.form-select{ font-size:.85rem; padding:.42rem .6rem; border-radius:9px; }
  .row.g-3{ --bs-gutter-y:.65rem; }

  /* Tombol */
  .btn{ font-size:.82rem; border-radius:9px; }
  .btn-sm{ font-size:.7rem; padding:.28rem .45rem; border-radius:8px; }

  /* Tabel kecil & rapi */
  .table{ font-size:.78rem; }
  .table thead th{ font-size:.6rem; }
  .table td, .table th{ padding:.5rem .4rem; }

  /* Badge */
  .badge{ font-size:.62rem; }

  /* Baris tombol (Tambah / Laporan dll) agar tidak bertabrakan */
  .d-flex.justify-content-between{ flex-wrap:wrap; gap:.5rem; }
}