/* ==========================================================
   GMS — Galon Monitoring System
   Palet: navy-teal (operasional/fasilitas), aksen aqua.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:        #12303D;
  --ink-soft:   #2A4A58;
  --accent:     #0EA5A0;
  --accent-dim: #0EA5A022;
  --bg:         #F5F8F9;
  --surface:    #FFFFFF;
  --border:     #E1E8EB;
  --text:       #1B2E35;
  --text-mute:  #5B7480;
  --danger:     #C0453F;
  --ok:         #2E9E6D;
  --radius:     10px;
  --sidebar-w:  216px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{ font-family:'Space Grotesk', 'Inter', sans-serif; }

a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Layout shell ---------- */
.shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--ink);
  color:#EAF2F3;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:40;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.05rem;
  padding:4px 8px 22px;
  color:#fff;
  letter-spacing:.2px;
}
.brand .drop{
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
}

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav button{
  all:unset;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:8px;
  font-size:.92rem;
  color:#C4D6DA;
}
.nav button:hover{ background:#1B4451; color:#fff; }
.nav button.active{ background:var(--accent); color:#06282A; font-weight:600; }
.nav .group-label{
  font-size:.72rem;
  color:#7996A0;
  margin:16px 12px 4px;
  font-weight:600;
}
.sidebar-foot{
  margin-top:auto;
  padding:10px 12px;
  font-size:.75rem;
  color:#6E8A93;
  border-top:1px solid #1E4550;
  padding-top:14px;
}

.topbar{
  display:none;
  align-items:center; justify-content:space-between;
  background:var(--ink);
  color:#fff;
  padding:12px 16px;
  position:sticky; top:0; z-index:50;
}
.topbar button{
  all:unset; color:#fff; font-size:1.3rem; padding:4px 8px;
}

.main{
  margin-left:var(--sidebar-w);
  flex:1;
  padding:26px 28px 60px;
  max-width:1180px;
}

.page-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin-bottom:20px;
}
.page-head h1{ font-size:1.4rem; margin:0; }
.page-head .sub{ color:var(--text-mute); font-size:.88rem; margin-top:2px; }

.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.controls select, .controls input[type=date], .controls input[type=month]{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:8px;
  padding:8px 10px;
  font-size:.85rem;
  color:var(--text);
}
.btn{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:8px;
  padding:8px 14px;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
}
.btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn:hover{ border-color:var(--accent); }

/* ---------- Stat cards ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 16px 14px;
}
.stat-card .label{ font-size:.78rem; color:var(--text-mute); margin-bottom:6px; }
.stat-card .value{ font-family:'Space Grotesk'; font-size:1.7rem; font-weight:700; color:var(--ink); }
.stat-card .hint{ font-size:.72rem; color:var(--text-mute); margin-top:4px; }
.stat-card.accent{ border-color:var(--accent); background:linear-gradient(180deg,#fff,var(--accent-dim)); }

/* ---------- Panels ---------- */
.panel-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px 18px;
}
.panel h3{ margin:0 0 12px; font-size:.95rem; color:var(--ink); }

.unit-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--border);
  font-size:.85rem;
}
.unit-row:last-child{ border-bottom:none; }
.unit-row .name{ flex:1; color:var(--text); }
.unit-row .bar-track{ flex:1.4; background:#EEF3F4; border-radius:4px; height:8px; overflow:hidden; }
.unit-row .bar-fill{ height:100%; background:var(--accent); }
.unit-row .num{ width:34px; text-align:right; font-weight:600; color:var(--ink); }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:560px; }
thead th{
  text-align:left; padding:10px 14px;
  background:#F0F4F5; color:var(--text-mute);
  font-weight:600; font-size:.76rem;
  border-bottom:1px solid var(--border);
}
tbody td{ padding:9px 14px; border-bottom:1px solid var(--border); color:var(--text); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FAFCFC; }
.tag-ok{ color:var(--ok); font-weight:600; }
.tag-warn{ color:var(--danger); font-weight:600; }

.chart-box{ position:relative; height:230px; }

.empty{ color:var(--text-mute); font-size:.85rem; padding:20px 4px; text-align:center; }
.loading{ color:var(--text-mute); font-size:.85rem; padding:20px 4px; text-align:center; }

/* ---------- Form input (pengganti Google Form) ---------- */
.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  max-width:460px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:.83rem; font-weight:600;
  color:var(--ink); margin-bottom:6px;
}
.field .hint{ font-size:.75rem; color:var(--text-mute); margin-top:4px; }
.field input[type=text],
.field input[type=number],
.field select{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 12px;
  font-size:.95rem;
  font-family:inherit;
  color:var(--text);
  background:#fff;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.checkbox-row{
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--text-mute);
  margin:-6px 0 16px;
}
.checkbox-row input{ width:16px; height:16px; accent-color:var(--accent); }

.submit-btn{
  width:100%;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:13px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.2px;
}
.submit-btn:hover{ background:var(--ink-soft); }
.submit-btn:disabled{ opacity:.6; }

.form-msg{
  margin-top:14px; padding:10px 12px; border-radius:8px;
  font-size:.85rem; font-weight:600;
}
.form-msg.ok{ background:#E4F5EE; color:var(--ok); }
.form-msg.error{ background:#FBEAE9; color:var(--danger); }

.stock-banner{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:16px;
}
.stock-pill{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 14px;
  font-size:.8rem;
  color:var(--text);
  display:flex; align-items:center; gap:6px;
}
.stock-pill .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.stock-pill strong{ color:var(--ink); }

/* ---------- Stok Galon (panel admin) ---------- */
.stockin-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:18px;
}
.stockin-form .field{ margin-bottom:0; min-width:140px; }
.stockin-form .field.grow{ flex:1; min-width:180px; }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .panel-grid{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .field-row{ flex-direction:column; gap:0; }
}
@media (max-width: 760px){
  .sidebar{ display:none; }
  .topbar{ display:flex; }
  .main{ margin-left:0; padding:18px 14px 50px; }
  .shell.nav-open .sidebar{
    display:flex; position:fixed; inset:0 auto 0 0; width:78vw; max-width:280px;
  }
  .shell.nav-open::after{
    content:''; position:fixed; inset:0; background:#0006; z-index:30;
  }
}