/* ============================================================
   ระบบประเมินสุขภาพผู้สูงอายุออนไลน์ — ธีมหลัก
   โทนสุขภาพ: teal/เขียวอมฟ้า อ่านง่าย สบายตา
   ============================================================ */
:root{
  --hc-primary:#4f46e5;      /* indigo 600 */
  --hc-primary-dark:#4338ca;
  --hc-primary-light:#e0e7ff;
  --hc-accent:#2563eb;
  --hc-ink:#1f2937;
  --hc-muted:#6b7280;
  --hc-bg:#f1f5f9;
  --hc-card:#ffffff;
  --hc-border:#e5e7eb;
  --hc-sidebar:#0f172a;      /* slate 900 */
  --hc-sidebar-2:#1e293b;
  --hc-radius:14px;
  --hc-shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --hc-shadow-lg:0 10px 25px -5px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
body{
  font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--hc-bg);
  color:var(--hc-ink);
  font-size:16px;
  margin:0;
}

/* ---------- Layout ---------- */
.hc-wrap{display:flex;min-height:100vh}
.hc-sidebar{
  width:265px;flex-shrink:0;
  background:linear-gradient(180deg,var(--hc-sidebar),var(--hc-sidebar-2));
  color:#cbd5e1;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:1040;
  transition:transform .25s ease;
}
.hc-main{margin-left:265px;flex:1;min-width:0;display:flex;flex-direction:column}
.hc-content{padding:24px;flex:1}
@media(max-width:991px){
  .hc-sidebar{transform:translateX(-100%)}
  .hc-sidebar.show{transform:translateX(0)}
  .hc-main{margin-left:0}
}

/* ---------- Sidebar ---------- */
.hc-brand{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;color:#fff;text-decoration:none}
.hc-brand i{font-size:1.7rem;color:var(--hc-primary-light)}
.hc-brand b{font-size:1.02rem;line-height:1.2;display:block}
.hc-brand small{color:#94a3b8;font-size:.72rem}
.hc-nav{padding:8px 12px}
.hc-nav .hc-section{color:#64748b;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 12px 6px;font-weight:600}
.hc-nav a{
  display:flex;align-items:center;gap:11px;color:#cbd5e1;text-decoration:none;
  padding:10px 13px;border-radius:10px;margin-bottom:2px;font-size:.95rem;transition:.15s;
}
.hc-nav a i{width:20px;text-align:center;font-size:1.05rem}
.hc-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.hc-nav a.active{background:var(--hc-primary);color:#fff;box-shadow:0 4px 12px -2px rgba(79,70,229,.5)}

/* ---------- Topbar ---------- */
.hc-topbar{
  background:var(--hc-card);border-bottom:1px solid var(--hc-border);
  padding:12px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:1030;
}
.hc-topbar h1{font-size:1.15rem;font-weight:600;margin:0;flex:1;color:var(--hc-ink)}
.hc-burger{background:none;border:none;font-size:1.4rem;color:var(--hc-ink);display:none;cursor:pointer}
@media(max-width:991px){.hc-burger{display:block}}

/* ---------- Cards ---------- */
.card{border:1px solid var(--hc-border);border-radius:var(--hc-radius);box-shadow:var(--hc-shadow);background:var(--hc-card)}
.card-header{background:transparent;border-bottom:1px solid var(--hc-border);font-weight:600;padding:16px 20px}
.card-body{padding:20px}

/* ---------- Stat tiles ---------- */
.stat{display:flex;align-items:center;gap:16px;padding:20px;border-radius:var(--hc-radius);background:var(--hc-card);border:1px solid var(--hc-border);box-shadow:var(--hc-shadow);height:100%}
.stat .ic{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.stat .n{font-size:1.7rem;font-weight:700;line-height:1}
.stat .l{color:var(--hc-muted);font-size:.9rem}
.ic-teal{background:var(--hc-primary-light);color:var(--hc-primary-dark)}
.ic-blue{background:#dbeafe;color:#1d4ed8}
.ic-amber{background:#fef3c7;color:#b45309}
.ic-rose{background:#ffe4e6;color:#be123c}
.ic-violet{background:#ede9fe;color:#6d28d9}
.ic-green{background:#dcfce7;color:#15803d}

/* ---------- Buttons / badges ---------- */
.btn-primary{background:var(--hc-primary);border-color:var(--hc-primary)}
.btn-primary:hover{background:var(--hc-primary-dark);border-color:var(--hc-primary-dark)}
.btn-outline-primary{color:var(--hc-primary);border-color:var(--hc-primary)}
.btn-outline-primary:hover{background:var(--hc-primary);border-color:var(--hc-primary)}
a{color:var(--hc-primary-dark)}
.text-primary{color:var(--hc-primary)!important}
.badge-group{font-size:.8rem;padding:.4em .7em;border-radius:20px;font-weight:600}

/* ---------- Tables ---------- */
.table{--bs-table-bg:transparent}
.table thead th{background:#f8fafc;color:var(--hc-muted);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--hc-border)}
.table td{vertical-align:middle}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--hc-primary-light)}
.avatar-lg{width:120px;height:120px;border-radius:16px;object-fit:cover}

/* ---------- Forms ---------- */
.form-label{font-weight:600;font-size:.9rem;margin-bottom:4px;color:#374151}
.form-control,.form-select{border-radius:10px;border-color:var(--hc-border);padding:.55rem .85rem}
.form-control:focus,.form-select:focus{border-color:var(--hc-primary);box-shadow:0 0 0 .2rem rgba(79,70,229,.15)}
.req::after{content:" *";color:#dc2626}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:12px;top:4px;bottom:4px;width:2px;background:var(--hc-border)}
.timeline-item{position:relative;padding-bottom:22px}
.timeline-item::before{content:"";position:absolute;left:-28px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--hc-primary)}
.timeline-item.done::before{background:var(--hc-primary)}

/* ---------- Assessment ---------- */
.assess-step{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.assess-step .step{flex:1;min-width:150px;padding:12px 16px;border-radius:12px;border:1px solid var(--hc-border);background:#fff;display:flex;align-items:center;gap:10px}
.assess-step .step .num{width:30px;height:30px;border-radius:50%;background:#e2e8f0;color:#64748b;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.assess-step .step.active{border-color:var(--hc-primary);background:var(--hc-primary-light)}
.assess-step .step.active .num{background:var(--hc-primary);color:#fff}
.assess-step .step.done .num{background:#15803d;color:#fff}
.q-item{padding:16px;border:1px solid var(--hc-border);border-radius:12px;margin-bottom:12px;background:#fff}
.q-item h6{font-weight:600;margin-bottom:10px}
.score-badge{font-size:2.4rem;font-weight:800;line-height:1}

/* ---------- Login ---------- */
.hc-login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(135deg,#4338ca 0%,#4f46e5 45%,#6366f1 100%)}
.hc-login-card{width:100%;max-width:410px;background:#fff;border-radius:20px;box-shadow:var(--hc-shadow-lg);padding:36px 32px}
.hc-login-logo{width:68px;height:68px;border-radius:18px;background:var(--hc-primary-light);color:var(--hc-primary-dark);display:grid;place-items:center;font-size:2rem;margin:0 auto 16px}

/* ---------- Hover dropdown (เมนูคู่มือบนแถบบน) ---------- */
@media(min-width:768px){
  .hc-hover-dropdown:hover > .dropdown-menu{display:block;margin-top:0}
  /* สะพานกันเมนูปิดตอนเลื่อนเมาส์จากปุ่มไปเมนู */
  .hc-hover-dropdown > .dropdown-menu{margin-top:0}
  .hc-hover-dropdown::after{content:"";position:absolute;left:0;right:0;height:10px;bottom:-10px}
}

/* ---------- Print ---------- */
@media print{
  .no-print{display:none!important}
  body{background:#fff;font-size:14px}
  .print-area{box-shadow:none;border:none}
}