/* ═══════════════════════════════════════════════
   NutriKEK-AI · CSS Design System
   Aesthetic: Clinical Luxury · Forest-Earth
   ═══════════════════════════════════════════════ */
:root {
  --ink:       #0C1B0E; --ink2: #243527; --ink3: #506655; --ink4: #8AA38E;
  --forest:    #2D5A3D; --sage: #4A7C59; --sage2: #6A9E78; --sage3: #9EC9AE;
  --sage4:     #CBE8D5; --sage5: #EBF5EF;
  --coral:     #B8402A; --coral2: #D96E59; --coral-bg: #FCF0EC;
  --amber:     #A8730F; --amber2: #D4A03A; --amber-bg: #FBF4E4;
  --sky:       #1E5A9C; --sky-bg: #E8F1FB;
  --surface:   #FFFFFF; --bg: #F0F4F1; --bg2: #E8EEE9;
  --border:    #D8E4DA; --border2: #C2D5C7;
  /* Font stack offline — tidak butuh internet */
  --font-display: 'Segoe UI', 'Trebuchet MS', 'Gill Sans', Arial, sans-serif;
  --font-body:    'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    Consolas, 'Courier New', monospace;
  --r: 12px; --r2: 8px; --r3: 6px;
  --sh:  0 1px 3px rgba(12,27,14,.06), 0 2px 8px rgba(12,27,14,.04);
  --sh2: 0 4px 20px rgba(12,27,14,.12), 0 1px 4px rgba(12,27,14,.06);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: auto; min-height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--ink); }
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
a { text-decoration: none; }

/* ── APP SHELL ── */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar { width: 228px; background: var(--ink); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.sidebar::after  { content:''; position:absolute; top:-80px; right:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(74,124,89,.3) 0%,transparent 65%); pointer-events:none; }
.sidebar::before { content:''; position:absolute; bottom:60px; left:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(45,90,61,.25) 0%,transparent 65%); pointer-events:none; }
.logo-area { padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.logo-mark { width:40px; height:40px; border-radius:10px; margin-bottom:11px; background:linear-gradient(135deg,var(--sage) 0%,var(--sage2) 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(74,124,89,.45); }
.logo-name { font-family:var(--font-display); font-size:17px; font-weight:900; color:#fff; letter-spacing:-.4px; }
.logo-sub  { font-size:10px; color:rgba(255,255,255,.4); margin-top:2px; font-weight:500; letter-spacing:.02em; }
.status-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(74,124,89,.22); border:1px solid rgba(74,124,89,.38); border-radius:20px; padding:3px 10px; margin-top:9px; }
.s-dot { width:6px; height:6px; border-radius:50%; background:var(--sage3); animation:pulse-dot 2.4s ease infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(158,201,174,.7)} 60%{box-shadow:0 0 0 5px rgba(158,201,174,0)} }
.s-txt { font-size:10px; font-weight:500; color:var(--sage3); }
nav { flex:1; padding:10px 0; overflow-y:auto; position:relative; z-index:1; }
nav::-webkit-scrollbar { width:0; }
.nav-section { font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.28); padding:12px 20px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 20px; font-size:12px; font-weight:500; color:rgba(255,255,255,.52); border-left:2px solid transparent; transition:all .16s; text-decoration:none; }
.nav-item:hover { color:rgba(255,255,255,.88); background:rgba(255,255,255,.06); }
.nav-item.active { color:#fff; font-weight:700; background:rgba(74,124,89,.22); border-left-color:var(--sage3); }
.nav-ic { width:15px; height:15px; flex-shrink:0; opacity:.75; }
.nav-item.active .nav-ic { opacity:1; }
.sidebar-foot { padding:14px 20px; border-top:1px solid rgba(255,255,255,.07); position:relative; z-index:1; }
.user-chip { display:flex; align-items:center; gap:10px; }
.user-av { width:32px; height:32px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,var(--sage),var(--sage2)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:11px; font-weight:700; color:#fff; }
.user-name { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); }
.user-role { font-size:10px; color:rgba(255,255,255,.32); margin-top:1px; }

/* ── MAIN ── */
.main { flex:1; display:flex; flex-direction:column; overflow:auto; }
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; height:52px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.page-title { font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--ink); letter-spacing:-.3px; }
.topbar-r { display:flex; align-items:center; gap:14px; }
.acc-pill { display:flex; align-items:center; gap:6px; background:var(--sage5); border:1px solid var(--sage4); border-radius:20px; padding:4px 12px; }
.acc-txt { font-size:11px; font-weight:700; color:var(--sage); }
.date-txt { font-size:11px; color:var(--ink4); font-weight:500; }
.flash-ok  { font-size:11px; font-weight:600; color:var(--sage); background:var(--sage5); border:1px solid var(--sage4); padding:4px 12px; border-radius:20px; }
.flash-err { font-size:11px; font-weight:600; color:var(--coral); background:var(--coral-bg); border:1px solid #F5B4A0; padding:4px 12px; border-radius:20px; }
.content { flex:1; overflow-y:auto; padding:18px 24px; }

/* ── CARDS ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh); }
.card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title { font-family:var(--font-display); font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-.2px; }

/* ── BADGES ── */
.badge { font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.03em; display:inline-block; }
.bg  { background:var(--sage5); color:var(--sage); }
.ba  { background:var(--amber-bg); color:var(--amber); }
.br  { background:var(--coral-bg); color:var(--coral); }
.bb  { background:var(--sky-bg); color:var(--sky); }
.bgr { background:var(--bg2); color:var(--ink3); }

/* ── METRICS ── */
.metrics { display:grid; gap:10px; margin-bottom:14px; }
.m4 { grid-template-columns:repeat(4,1fr); }
.m3 { grid-template-columns:repeat(3,1fr); }
.metric { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh); position:relative; overflow:hidden; }
.metric-lbl { font-size:9px; font-weight:800; color:var(--ink4); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.metric-val { font-family:var(--font-display); font-size:30px; font-weight:900; color:var(--ink); letter-spacing:-1.5px; line-height:1; }
.metric-sub { font-size:10px; color:var(--ink3); margin-top:3px; font-weight:500; }
.metric-chip { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; margin-top:6px; }

/* ── GRIDS ── */
.g2  { display:grid; grid-template-columns:1.65fr 1fr; gap:12px; margin-bottom:12px; }
.g2e { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.g4  { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mb12 { margin-bottom:12px; }

/* ── FACTOR CARDS ── */
.factor-card { padding:13px 14px; border:1px solid var(--border); border-radius:var(--r2); position:relative; overflow:hidden; }
.factor-card::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; }
.fc-red::before   { background:var(--coral); }
.fc-amber::before { background:var(--amber); }
.fc-num { font-family:var(--font-display); font-size:26px; font-weight:900; margin:5px 0 2px; }

/* ── PATIENT ROWS ── */
.pt-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r2); cursor:pointer; transition:all .15s; margin-bottom:6px; }
.pt-row:hover { background:var(--sage5); border-color:var(--sage4); transform:translateX(2px); }
.pt-av { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:10px; font-weight:700; }
.pt-name { font-size:12px; font-weight:600; color:var(--ink); }
.pt-meta { font-size:10px; color:var(--ink4); margin-top:1px; }
.risk-bg   { flex:1; height:4px; background:var(--bg2); border-radius:10px; overflow:hidden; }
.risk-fill { height:100%; border-radius:10px; }

/* ── DONUT & CHARTS ── */
.donut-wrap { position:relative; height:152px; display:flex; align-items:center; justify-content:center; }
.donut-center { position:absolute; text-align:center; pointer-events:none; }
.legend-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:500; color:var(--ink2); }
.ldot { width:8px; height:8px; border-radius:3px; }
.chart-sm { position:relative; height:148px; width:100%; }
.chart-lg { position:relative; height:210px; width:100%; }

/* ── FORMS & INPUTS ── */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:12px; }
.fg { display:flex; flex-direction:column; gap:4px; }
.fl { font-size:9px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.07em; }
input[type=number], input[type=text], input[type=email], input[type=password], select, textarea {
  width:100%; font-size:12px; font-weight:500; padding:8px 10px;
  border:1.5px solid var(--border); border-radius:var(--r3);
  background:var(--surface); color:var(--ink); font-family:var(--font-body); transition:border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(74,124,89,.12); }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23506655' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; appearance:none; -webkit-appearance:none; }

/* ── BUTTONS ── */
.btn { padding:9px 16px; border:none; border-radius:var(--r2); font-size:11px; font-weight:700; cursor:pointer; font-family:var(--font-body); letter-spacing:.02em; transition:all .16s; display:inline-flex; align-items:center; }
.btn-g { background:var(--sage); color:#fff; }
.btn-g:hover { background:var(--forest); transform:translateY(-1px); box-shadow:var(--sh2); }
.btn-g:disabled { background:var(--border2); color:var(--ink4); cursor:not-allowed; transform:none; box-shadow:none; }
.btn-o { background:transparent; color:var(--ink2); border:1.5px solid var(--border2); }
.btn-o:hover { background:var(--sage5); border-color:var(--sage3); }
.btn-w { width:100%; justify-content:center; }

/* ── TABLE ── */
.tbl { width:100%; border-collapse:collapse; font-size:11px; }
.tbl th { text-align:left; font-size:9px; font-weight:900; color:var(--ink4); padding:7px 9px; border-bottom:2px solid var(--border); text-transform:uppercase; letter-spacing:.09em; }
.tbl td { padding:9px 9px; border-bottom:1px solid var(--border); color:var(--ink); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--sage5); }
.scroll-x { overflow-x:auto; }

/* ── UPLOAD ── */
.drop-zone { border:2px dashed var(--border2); border-radius:var(--r); padding:30px 24px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg); }
.drop-zone:hover, .drop-zone.over { background:var(--sage5); border-color:var(--sage3); }
.dz-icon { width:48px; height:48px; border-radius:13px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:var(--sh); }
.file-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r2); margin-top:8px; background:var(--surface); }
.file-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.prog-bg   { width:72px; height:4px; background:var(--bg2); border-radius:10px; overflow:hidden; }
.prog-fill { height:100%; background:var(--sage); border-radius:10px; transition:width .4s; }

/* ── VALIDATION STEPS ── */
.step-bar { display:flex; align-items:center; margin-bottom:14px; }
.vstep { display:flex; align-items:center; gap:6px; flex:1; }
.vstep-c { width:24px; height:24px; border-radius:50%; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px solid var(--border2); background:var(--bg); color:var(--ink4); }
.vstep-l { font-size:10px; font-weight:500; color:var(--ink4); }
.vstep-line { flex:1; height:1px; background:var(--border); margin:0 3px; }
.vstep.done   .vstep-c { background:var(--sage5); color:var(--sage); border-color:var(--sage3); }
.vstep.done   .vstep-l { color:var(--sage); font-weight:600; }
.vstep.active .vstep-c { background:var(--sky-bg); color:var(--sky); border-color:var(--sky); }
.vstep.active .vstep-l { color:var(--sky); }
.rule-row { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r2); margin-bottom:5px; }
.rule-ic { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.rule-row.pass { background:var(--sage5); border-color:var(--sage4); }
.rule-row.warn { background:var(--amber-bg); border-color:#F5D98A; }
.rule-row.fail { background:var(--coral-bg); border-color:#F5B4A0; }
.pb-bg   { width:100%; height:5px; background:var(--bg2); border-radius:10px; overflow:hidden; }
.pb-fill { height:100%; border-radius:10px; transition:width .5s ease; }

/* ── LOG ── */
.log-box { background:var(--ink); border-radius:var(--r2); padding:13px 15px; font-family:var(--font-mono); font-size:10.5px; max-height:155px; overflow-y:auto; line-height:1.9; }
.ll { display:flex; gap:10px; }
.lt   { color:rgba(255,255,255,.22); flex-shrink:0; }
.lok  { color:var(--sage3); }
.lwarn{ color:var(--amber2); }
.linfo{ color:#82AAFF; }
.ltxt { color:rgba(255,255,255,.62); }

/* ── TABS ── */
.tab-bar { display:flex; gap:3px; background:var(--bg2); padding:3px; border-radius:var(--r2); margin-bottom:14px; border:1px solid var(--border); }
.tab-btn { flex:1; padding:6px; font-size:10px; font-weight:700; border:none; background:none; border-radius:6px; cursor:pointer; color:var(--ink4); font-family:var(--font-body); text-transform:uppercase; letter-spacing:.04em; transition:all .15s; }
.tab-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--sh); border:1px solid var(--border); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── NUTRISI ── */
.nutrisi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.nutrisi-card { border:1px solid var(--border); border-radius:var(--r2); padding:12px 13px; position:relative; overflow:hidden; }
.ni-top  { height:3px; position:absolute; top:0; left:0; right:0; }
.ni-name { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink3); margin-top:3px; }
.ni-val  { font-family:var(--font-display); font-size:21px; font-weight:800; margin:5px 0 2px; }
.ni-sub  { font-size:9px; color:var(--ink4); }
.mini-pb { width:100%; height:4px; background:var(--bg2); border-radius:10px; overflow:hidden; margin-top:7px; }
.mini-fill { height:100%; border-radius:10px; }

/* ── ACTIONS ── */
.action-row { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r2); margin-bottom:5px; transition:background .15s; }
.action-row:hover { background:var(--sage5); }
.act-n { width:20px; height:20px; border-radius:6px; background:var(--sky-bg); color:var(--sky); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }

/* ── INSIGHTS ── */
.ins-card { padding:11px 14px; border:1px solid var(--border); border-radius:var(--r2); margin-bottom:7px; border-left:3px solid var(--sage3); }
.ins-lbl { font-size:9px; font-weight:700; color:var(--ink4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.ins-txt { font-size:11px; color:var(--ink2); line-height:1.55; }

/* ── SUMMARY ── */
.summary-box { border-radius:var(--r2); padding:14px 16px; margin-bottom:10px; }
.sb-ok   { background:var(--sage5); border:1px solid var(--sage4); }
.sb-warn { background:var(--amber-bg); border:1px solid #F5D98A; }

/* ── LOADING DOTS ── */
.dot-anim { display:flex; gap:4px; align-items:center; }
.ld { width:5px; height:5px; border-radius:50%; background:var(--sage); animation:pulse-ld 1.2s infinite; }
.ld:nth-child(2) { animation-delay:.2s; }
.ld:nth-child(3) { animation-delay:.4s; }
@keyframes pulse-ld { 0%,100%{opacity:.2} 50%{opacity:1} }

/* ── AUTH / LOGIN ── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); }
.auth-card { background:var(--surface); border-radius:var(--r); padding:36px 40px; width:380px; box-shadow:var(--sh2); }
.auth-logo { text-align:center; margin-bottom:28px; }

/* ── RESPONSIVE HELPERS ── */
.cm-cell { padding:9px; text-align:center; border-radius:6px; font-size:12px; font-weight:700; }

/* ── FIX MOBILE SCROLL ── */
@media (max-width: 768px) {
  .app {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .main {
    display: block;
    height: auto;
    overflow: visible;
  }
  .content {
    height: auto;
    overflow: visible;
    padding: 12px;
  }
  body {
    overflow-y: auto;
    height: auto;
  }
}

/* ── FIX MOBILE SCROLL v2 ── */
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .app {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .sidebar {
    position: fixed !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
  .main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    min-height: 100vh !important;
  }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  .content {
    flex: 1 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px !important;
  }
}

/* ── FIX MOBILE SCROLL FINAL ── */
@media (max-width: 768px) {
  html { height: auto !important; overflow-y: auto !important; }
  body { height: auto !important; overflow-y: auto !important; }
  .app { height: auto !important; min-height: 100vh !important; overflow: visible !important; flex-direction: column !important; }
  .main { height: auto !important; overflow: visible !important; }
  .content { height: auto !important; overflow: visible !important; }
}

/* ── MOBILE SCROLL FINAL ── */
@media (max-width: 768px) {
  html, body { height: auto !important; overflow: auto !important; }
  .app { height: auto !important; overflow: auto !important; }
  .main { overflow: auto !important; height: auto !important; }
  .content { overflow: visible !important; height: auto !important; }
}