:root {
  /* Brand — Sage & Stone */
  --g1:#2c3e2d;        /* primary dark — topbar, active nav */
  --g2:#3d5c40;        /* primary mid */
  --g3:#5a7d5e;        /* primary base */
  --g4:#8aad8e;        /* primary light */
  --g5:#c4dbc6;        /* primary mist */

  /* Neutral — Stone */
  --cream:#f5f4f1;     /* page bg */
  --cream2:#edecea;    /* card hover / input bg */
  --cream3:#dddbd7;    /* borders */
  --white:#ffffff;
  --dark:#111210;      /* primary text */
  --mid:#454540;       /* secondary text */
  --light:#8a8984;     /* muted text */

  /* Semantic */
  --rose:#c0392b;
  --rose-bg:#fef2f2;
  --rose-border:#fecaca;
  --amber:#b45309;
  --amber-bg:#fffbeb;
  --amber-border:#fde68a;
  --sky:#1d4ed8;
  --sky-bg:#eff6ff;
  --sky-border:#bfdbfe;
  --green-bg:#f0fdf4;
  --green-border:#bbf7d0;
  --gold:#92400e;

  /* Shadows — subtler */
  --shadow:rgba(0,0,0,0.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10);

  /* Radius */
  --r:12px; --r-sm:8px; --r-lg:16px;

  /* Typography scale */
  --text-xs:11px;
  --text-sm:12px;
  --text-base:13px;
  --text-md:14px;
  --text-lg:16px;
  --text-xl:20px;
  --text-2xl:24px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;width:100%;max-width:100vw;}
body{font-family:'Sora',sans-serif;background:var(--cream);color:var(--dark);font-size:13.5px;-webkit-font-smoothing:antialiased;}

/* ====== SCREEN SYSTEM ====== */
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--cream);}
.screen.active{display:flex;}

/* ====== LOGIN ====== */
#s-login{
  background:linear-gradient(160deg,#f5f4f1 0%,#edecea 40%,#dddbd7 100%);
  align-items:center;justify-content:center;
  overflow-y:auto;overflow-x:hidden;padding:24px 16px;
}
@media(max-width:640px){
  #s-login{align-items:flex-start;}
}
#s-login::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a0a090' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-card{
  background:var(--white);border-radius:24px;padding:32px 28px;width:min(400px,100%);
  box-shadow:0 12px 40px rgba(0,0,0,0.15);position:relative;z-index:1;
  animation:rise .5s cubic-bezier(.34,1.56,.64,1);
  margin:auto 0;
}
@media(min-width:640px){
  .login-card{box-shadow:0 24px 60px rgba(0,0,0,0.22);}
}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}
.login-brand{text-align:center;margin-bottom:28px;}
.login-brand .emoji{font-size:52px;display:block;margin-bottom:10px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
.login-brand h1{font-size:28px;font-weight:800;color:var(--g1);letter-spacing:-1px;font-family:'Sora',sans-serif;}
.login-brand p{font-size:12px;color:var(--light);margin-top:6px;font-weight:500;line-height:1.5;}
.field-label{font-size:11px;font-weight:700;color:var(--light);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;display:block;}
.field{width:100%;padding:12px 16px;border:2px solid var(--cream3);border-radius:var(--r-sm);font-family:inherit;font-size:14px;outline:none;background:var(--cream);transition:all .2s;margin-bottom:14px;}
.field:focus{border-color:var(--g3);background:var(--white);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r-sm);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;}
.btn-primary{background:var(--g1);color:var(--white);font-weight:600;letter-spacing:.1px;}
.btn-primary:hover{background:var(--g2);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{background:var(--cream);color:var(--dark);border:2px solid var(--cream3);}
.btn-sm{padding:7px 14px;font-size:12px;}
.btn-danger{background:var(--rose-bg);color:var(--rose);border:1.5px solid var(--rose-border);}
.btn-success{background:#e8f5e9;color:#1b5e20;border:1.5px solid #a5d6a7;}
.btn-gold{background:#fff8e1;color:#7b5800;border:1.5px solid #ffe082;}
.btn-full{width:100%;}
.login-hint{background:var(--cream);border-radius:var(--r-sm);padding:12px;margin-top:16px;font-size:12px;color:var(--mid);text-align:center;}
.login-hint strong{color:var(--g2);}
.login-err{background:var(--rose-bg);border:1px solid var(--rose-border);border-radius:var(--r-sm);padding:10px 14px;font-size:12px;color:var(--rose);margin-bottom:12px;display:none;}

/* ====== APP LAYOUT ====== */
#s-app{flex-direction:column;}
.topbar{
  background:#fdfcfb;
  color:var(--dark);
  padding:0 20px;height:54px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  border-bottom:1px solid #e9e4de;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
  position:relative;z-index:50;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{background:none;border:none;color:#3d5c40;cursor:pointer;font-size:20px;padding:4px;line-height:1;}
.topbar-brand-mobile{display:flex;}
.topbar-title{font-size:15px;font-weight:700;letter-spacing:-.2px;color:#1a1a18;}
.topbar-title span{color:var(--g3);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.sync-pill{
  display:flex;align-items:center;gap:5px;
  background:transparent;border-radius:20px;padding:0;font-size:11px;font-weight:600;
}
.sync-dot{width:5px;height:5px;border-radius:50%;background:#22c55e;}
.sync-dot.loading{background:#f59e0b;animation:blink .8s infinite;}
.sync-dot.err{background:#f59e0b;animation:none;}
.sync-dot.offline{background:#ef4444;animation:blink .8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* ── OFFLINE BANNER ── */
#offline-banner{
  display:none;position:fixed;top:56px;left:0;right:0;z-index:600;
  background:#c0392b;color:white;
  padding:8px 16px;font-size:12px;font-weight:700;text-align:center;
  animation:slideDownBanner .25s ease;
}
#offline-banner.show{display:block;}
@keyframes slideDownBanner{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.user-badge{background:var(--cream2);border:1px solid var(--cream3);color:var(--dark);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:500;display:none;}
.btn-logout{background:var(--cream);border:1px solid var(--cream3);color:var(--mid);padding:5px 10px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:all .15s;}
.btn-logout:hover{background:var(--cream2);}
/* Sembunyikan teks "Keluar" di mobile, tampilkan hanya icon */
.btn-logout .logout-txt{display:none;}
@media(min-width:640px){
  .user-badge{display:flex;}
  .btn-logout .logout-txt{display:inline;}
  .btn-logout{padding:6px 14px;}
}
.saved-acc{display:flex;flex-direction:column;gap:6px;}
.saved-acc-btn{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--cream);border:2px solid var(--cream3);border-radius:10px;cursor:pointer;transition:all .2s;font-family:inherit;width:100%;box-sizing:border-box;user-select:none;}
.saved-acc-btn:hover{border-color:var(--g3);background:white;}
.saved-acc-left{display:flex;align-items:center;gap:10px;}
.saved-acc-icon{font-size:20px;}
.saved-acc-name{font-size:13px;font-weight:700;text-align:left;}
.saved-acc-role{font-size:11px;color:var(--light);}
.saved-acc-del{background:none;border:none;cursor:pointer;font-size:14px;color:var(--light);padding:4px;border-radius:4px;}
.saved-acc-del:hover{color:var(--rose);}
.saved-label{font-size:11px;font-weight:700;color:var(--light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}

/* ====== MAIN AREA ====== */
.app-body{display:flex;flex:1;overflow:hidden;position:relative;}

/* ====== SIDEBAR — Refined Operational Minimalism ====== */
.sidebar{
  width:244px;
  background:#fdfcfb;
  border-right:1px solid #e9e4de;
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  /* Full height: top:0 agar menutupi topbar di mobile */
  position:fixed;top:0;left:0;bottom:0;z-index:9999;
  transform:translateX(-100%);
  box-shadow:6px 0 32px rgba(0,0,0,.14);
}
.sidebar.open{transform:translateX(0);}
/* Desktop: sidebar full height dari top:0, selalu tampil */
@media(min-width:960px){
  .sidebar{
    position:fixed !important;
    top:0 !important;bottom:0 !important;
    z-index:45 !important;
    transform:translateX(0) !important;
    box-shadow:1px 0 0 #e9e4de !important;
  }
  /* Topbar hanya di area kanan, tidak menutupi sidebar */
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:244px !important;
    right:0 !important;
    margin-left:0 !important;
    padding-left:16px !important;
    z-index:40 !important;
  }
  /* Sembunyikan logo MR di topbar — sudah ada di sidebar */
  .topbar-logo{display:none !important;}
  .topbar-brand-mobile{display:none !important;}
  /* Tampilkan sync di topbar desktop */
  .topbar-sync-desktop{display:flex !important;}
  /* Geser app-body agar tidak tertutup sidebar dan topbar */
  .app-body{margin-left:244px;padding-top:54px;}
  /* Desktop: sidebar brand vertikal - logo atas, nama bawah */
  .sidebar-brand{
    flex-direction:column !important;
    align-items:center !important;
    padding:20px 16px 16px !important;
    gap:8px !important;
  }
  .sidebar-brand-logo{
    width:72px !important;height:72px !important;
    border-radius:16px !important;
  }
  .sidebar-brand-text{text-align:center !important;}
  .sidebar-brand-name{font-size:15px !important;}
  .sidebar-brand-sub{text-align:center !important;}
  .sidebar-brand-role{margin-top:4px !important;}
}

/* Brand header di dalam sidebar */
.sidebar-brand{
  padding:12px 14px 10px;
  border-bottom:1px solid #e9e4de;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  flex-shrink:0;
}
.sidebar-brand-logo{
  width:40px;height:40px;
  border-radius:10px;
  background:#fff;
  border:1px solid #ece8e2;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.sidebar-brand-logo img{
  width:100%;height:100%;object-fit:contain;border-radius:10px;
}
.sidebar-brand-text{text-align:left;flex:1;}
.sidebar-brand-name{display:block;font-size:13px;font-weight:700;color:#2d2417;letter-spacing:-.2px;}
.sidebar-brand-sub{font-size:10px;color:#b0a898;font-weight:500;margin-top:1px;letter-spacing:.2px;}
/* Role badge */
.sidebar-brand-role{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:3px;
  background:#fdf6e8;border:1px solid #e8d5a0;
  border-radius:20px;padding:2px 8px;
  font-size:10px;font-weight:700;color:#8a6520;letter-spacing:.3px;
}

.sidebar-section{padding:18px 12px 4px;}
.sidebar-sections-wrap{flex:1 1 0;overflow-y:auto;min-height:0;padding-bottom:8px;}
.sidebar-logout{
  flex-shrink:0;padding:12px 14px;
  border-top:1px solid #ece8e2;
  background:#fdfcfb;
  /* Safe area untuk perangkat dengan home indicator */
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
/* Mobile */
@media(max-width:959px){
  .sidebar-sections-wrap{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;}
}
/* Desktop */
@media(min-width:960px){
  .sidebar-sections-wrap{max-height:calc(100vh - 54px - 56px);}
}

/* Section label — elegant dengan divider line */
.sidebar-label{
  font-size:9.5px;font-weight:700;
  color:#c4b8a8;
  text-transform:uppercase;letter-spacing:1.3px;
  padding:0 10px 8px;
  display:flex;align-items:center;gap:8px;
}
.sidebar-label::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,#e8e3dc,transparent);
}

/* Nav button — clean & spacious */
.nav-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px 9px 12px;
  border-radius:10px;border:none;background:none;
  font-family:inherit;font-size:13px;font-weight:500;color:#5c5650;
  cursor:pointer;transition:all .18s ease;text-align:left;
  position:relative;
  margin-bottom:1px;
}
.nav-btn:hover{
  background:#f0f5f0;
  color:#2c3e2d;
}
.nav-btn:hover .ni{color:var(--g3);}

/* Active state: left accent indicator bar — SAGE GREEN */
.nav-btn.active{
  background:linear-gradient(to right,#e8f0e8,#f0f5f000);
  color:#2c3e2d;
  font-weight:600;
}
.nav-btn.active::before{
  content:'';
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:58%;
  background:linear-gradient(to bottom,var(--g2),var(--g3));
  border-radius:0 3px 3px 0;
}
.nav-btn.active .ni{color:var(--g2);}
.nav-btn .ni{
  width:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#c4b8a8;
  transition:color .18s;
}
.nav-badge{
  margin-left:auto;
  background:var(--rose-bg);color:var(--rose);
  border-radius:10px;padding:1px 7px;
  font-size:10px;font-weight:800;
}

/* ====== CONTENT ====== */
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 16px;width:100%;max-width:100%;box-sizing:border-box;}
.page{display:none;animation:fadein .25s ease;}
.page.active{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ====== OVERLAY SIDEBAR ====== */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);}
.sidebar-overlay.active{display:block;}

/* ====== COMPONENTS ====== */
.page-head{margin-bottom:18px;}
.page-head h2{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--dark);}
.page-head p{font-size:12px;color:var(--light);margin-top:4px;font-weight:400;}

.card{background:var(--white);border-radius:var(--r);border:1px solid var(--cream3);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.card-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;}
.stat{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm);}
.stat-val{font-size:26px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-1px;line-height:1;}
.stat-lbl{font-size:10px;font-weight:700;color:var(--light);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.stat-sub{font-size:11px;margin-top:6px;font-weight:600;}
.c-green{color:var(--g2);} .c-rose{color:var(--rose);} .c-gold{color:var(--gold);} .c-sky{color:var(--sky);}

/* Table */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{font-size:10px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.6px;padding:9px 10px;border-bottom:1px solid var(--cream3);text-align:left;white-space:nowrap;}
td{padding:10px 10px;font-size:13px;border-bottom:1px solid var(--cream2);vertical-align:middle;}
tr:last-child td{border:none;}
tr:hover td{background:var(--cream);}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:800;}
.badge-green{background:var(--green-bg);color:#166534;}
.badge-red{background:var(--rose-bg);color:var(--rose);}
.badge-yellow{background:var(--amber-bg);color:var(--amber);}
.badge-blue{background:var(--sky-bg);color:var(--sky);}
.badge-gray{background:var(--cream2);color:var(--mid);}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.form-row.single{grid-template-columns:1fr;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg.full{grid-column:span 2;}
.fl{font-size:11px;font-weight:700;color:var(--light);text-transform:uppercase;letter-spacing:.5px;}
.fi{padding:10px 14px;border:2px solid var(--cream3);border-radius:var(--r-sm);font-family:inherit;font-size:13px;outline:none;background:var(--cream);transition:all .2s;width:100%;}
.fi:focus{border-color:var(--g3);background:var(--white);}
.fi-sm{padding:7px 10px;font-size:12px;}

/* Accordion groups */
.grp{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r);margin-bottom:8px;overflow:hidden;box-shadow:0 1px 4px var(--shadow);}
.grp-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;gap:10px;}
.grp-head:hover{background:var(--cream);}
.grp-arrow{font-size:11px;color:var(--light);transition:transform .2s;flex-shrink:0;}
.grp-arrow.open{transform:rotate(90deg);color:var(--g2);}
.grp-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.grp-nama{font-size:14px;font-weight:700;color:var(--dark);}
.grp-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
/* Filter tabs */
.filter-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.suggest-box{display:none;position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--cream3);border-radius:10px;box-shadow:0 4px 16px var(--shadow);z-index:999;max-height:220px;overflow-y:auto;margin-top:4px;}
.ftab{padding:5px 14px;border-radius:20px;border:1px solid var(--cream3);background:var(--cream);font-size:12px;font-weight:600;color:var(--mid);cursor:pointer;transition:all .15s;}
.ftab:hover{background:#e8e0d5;}
.ftab.active{background:var(--g1);color:white;border-color:var(--g1);}
/* Discontinued product styling */
.grp-nonaktif .grp-head{opacity:0.65;}
.grp-nonaktif .grp-nama{color:#999;}
.chip{background:var(--cream);border:1px solid var(--cream3);padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;color:var(--mid);}
.chip-warn{background:var(--rose-bg);border-color:var(--rose-border);color:var(--rose);}
.chip-time{background:#f0f4ff;border-color:#c5d0f0;color:#3a5a9a;font-size:10px;}
.grp-right{text-align:right;flex-shrink:0;}
.grp-num{font-size:18px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--g2);}
.grp-sub{font-size:10px;color:var(--light);font-weight:600;}
/* Sub-folder accordion */
.sub-grp{border:1px solid var(--cream3);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden;background:white;}
.sub-grp-head{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;background:var(--cream);border-bottom:1px solid var(--cream3);}
.sub-grp-head:hover{background:#eee8df;}
.sub-grp-defect .sub-grp-head{background:#fff8f0;border-bottom-color:#f5c6a0;}
.sub-grp-defect .sub-grp-nama{color:#a0522d;}
.sub-grp-arrow{font-size:10px;color:var(--light);flex-shrink:0;}
.sub-grp-nama{font-size:12px;font-weight:800;color:var(--g1);flex:1;}
.sub-grp-info{font-size:10px;color:var(--light);white-space:nowrap;}
.sub-grp-body{display:none;padding:10px;}
.sub-grp-body.open{display:block;}

/* Fix var-grid overflow - pastikan tidak meluber */
.var-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;box-sizing:border-box;}
.var-card{background:var(--white);border:1px solid var(--cream3);border-radius:var(--r-sm);padding:12px 10px;transition:all .15s;min-width:0;overflow:hidden;}
.var-card:hover{border-color:var(--g4);transform:translateY(-1px);}
.var-card.low{border-color:#f5a0a0;background:#fffbfb;}
.var-nama{font-size:14px;font-weight:700;margin-bottom:6px;line-height:1.3;color:var(--dark);}
.var-num{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;line-height:1.1;}
.var-lbl{font-size:8px;color:var(--light);margin-top:2px;}
.grp-body{display:none;border-top:1px solid var(--cream3);background:var(--cream);padding:12px;overflow:hidden;}
.grp-body.open{display:block;}
.sbar{height:4px;background:var(--cream3);border-radius:2px;margin-top:7px;overflow:hidden;}
.sbar-fill{height:100%;border-radius:2px;transition:width .4s;}

/* Search dropdown */
.search-wrap{position:relative;}
.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:2px solid var(--g3);border-radius:var(--r-sm);max-height:200px;overflow-y:auto;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.dd-item{padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--cream2);}
.dd-item:last-child{border:none;}
.dd-item:hover{background:var(--cream);}
.dd-item strong{display:block;}
.dd-item small{color:var(--light);}

/* Selected product preview */
.sel-preview{background:var(--cream);border:1.5px solid var(--g4);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:10px;}
.sel-preview strong{font-size:13px;}
.sel-preview p{font-size:11px;color:var(--mid);margin-top:3px;}

/* Alert */
.alert{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;margin-bottom:12px;}
.alert-warn{background:#fff8e1;border:1px solid #ffe082;color:#7b5800;}
.alert-ok{background:#e8f5e9;border:1px solid #a5d6a7;color:#1b5e20;}
.alert-err{background:var(--rose-bg);border:1px solid var(--rose-border);color:var(--rose);}
.alert-info{background:#e3f2fd;border:1px solid #90caf9;color:#1565c0;}
/* Alert kritis stok habis — lebih menonjol */
.alert-kritis{background:linear-gradient(135deg,var(--rose-bg),#fee2e2);border:2px solid var(--rose-border);color:var(--rose);box-shadow:0 0 0 3px rgba(192,57,43,.12);animation:pulseAlert 2s ease-in-out infinite;}
@keyframes pulseAlert{0%,100%{box-shadow:0 0 0 3px rgba(192,57,43,.12)}50%{box-shadow:0 0 0 6px rgba(192,57,43,.22)}}
.stok-badge-kritis{display:inline-flex;align-items:center;gap:4px;background:#c0392b;color:white;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;animation:pulseBadge 1.5s ease-in-out infinite;}
@keyframes pulseBadge{0%,100%{opacity:1}50%{opacity:.65}}

/* Toast */
.toast{position:fixed;bottom:calc(60px + env(safe-area-inset-bottom) + 12px);right:16px;left:16px;background:var(--dark);color:var(--white);padding:13px 18px;border-radius:var(--r-sm);font-size:13px;font-weight:700;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:rise .3s ease;text-align:center;}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:none;align-items:flex-end;justify-content:center;}
.modal-bg.active{display:flex;}
.modal{background:var(--white);border-radius:20px 20px 0 0;padding:24px 20px;width:100%;max-height:85vh;overflow-y:auto;animation:slideup .3s ease;}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.modal-title{font-size:16px;font-weight:800;margin-bottom:16px;}
.modal-close{float:right;background:var(--cream);border:none;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:18px;line-height:1;}

/* ====== BACK BUTTON ====== */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--cream2);border:1px solid var(--cream3);border-radius:20px;
  padding:5px 13px 5px 9px;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--mid);cursor:pointer;margin-bottom:16px;transition:all .15s;
}
.back-btn:hover{background:var(--cream3);color:var(--dark);}

/* ====== DASHBOARD ESTETIK ====== */
.dash-section-title{
  font-size:11px;font-weight:700;color:var(--light);text-transform:uppercase;
  letter-spacing:1px;margin:20px 0 10px;display:flex;align-items:center;gap:8px;
}
.dash-section-title::after{content:'';flex:1;height:1px;background:var(--cream3);}

.dash-panel{
  background:var(--white);border:1px solid var(--cream3);border-radius:var(--r);
  padding:16px;box-shadow:0 2px 8px var(--shadow);
}
.dash-panel-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
}
.dash-panel-title{font-size:12px;font-weight:800;color:var(--dark);}
.dash-panel-link{font-size:11px;color:var(--g3);font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
.dash-panel-link:hover{text-decoration:underline;}

.dash-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--cream2);gap:8px;
}
.dash-row:last-child{border:none;padding-bottom:0;}
.dash-row-name{font-size:12px;font-weight:700;color:var(--dark);flex:1;min-width:0;}
.dash-row-sub{font-size:10px;color:var(--light);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-row-val{font-size:13px;font-weight:900;font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.dash-row-val.danger{color:#c0392b;}
.dash-row-val.ok{color:var(--g2);}
.dash-row-val.warn{color:#e67e22;}

.dash-empty{text-align:center;padding:20px 0;font-size:12px;color:var(--light);}

/* Stat cards estetik */
.stat-card{
  background:var(--white);border-radius:var(--r);border:1px solid var(--cream3);
  padding:12px 14px;box-shadow:0 2px 8px var(--shadow);
  display:flex;align-items:center;gap:10px;transition:transform .15s,box-shadow .15s;
}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 14px var(--shadow);border-color:#c5a96e;}
.stat-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex-shrink:0;
}
.stat-icon.green{background:#e8f5e9;}
.stat-icon.gold{background:#fff8e1;}
.stat-icon.sky{background:#e3f2fd;}
.stat-icon.rose{background:#fdecea;}
.stat-icon.purple{background:#f3e5f5;}
.stat-icon.orange{background:#fff3e0;}
.stat-body{}
.stat-body .val{font-size:20px;font-weight:800;font-family:'JetBrains Mono',monospace;line-height:1;}
.stat-body .lbl{font-size:10px;font-weight:700;color:var(--light);margin-top:3px;text-transform:uppercase;letter-spacing:.4px;line-height:1.2;}
.stat-body .sub{font-size:10px;font-weight:600;margin-top:3px;}

/* Grid stats estetik — 2 kolom di mobile agar muat */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
@media(min-width:960px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;}}

/* Panels grid — 1 kolom mobile, 2 tablet, 4 desktop */
.panels-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px;}
@media(min-width:640px){.panels-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.panels-grid{grid-template-columns:repeat(4,1fr);}}

/* Stock bar colors */
.bar-green{background:var(--g3);}
.bar-yellow{background:#f59e0b;}
.bar-red{background:#ef4444;}
.tabs{display:flex;gap:4px;background:var(--cream2);border-radius:10px;padding:4px;margin-bottom:12px;}
.tab-btn{flex:1;padding:8px;border:none;background:none;border-radius:6px;font-family:inherit;font-size:12px;font-weight:600;color:var(--mid);cursor:pointer;transition:all .15s;white-space:nowrap;}
.tab-btn.active{background:var(--white);color:var(--dark);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Konveksi flow visual */
.flow{display:flex;align-items:center;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;}
.flow-step{flex-shrink:0;background:var(--white);border:1.5px solid var(--cream3);border-radius:var(--r-sm);padding:8px 12px;text-align:center;min-width:90px;}
.flow-step.active-step{border-color:var(--g3);background:#e8f5e9;}
.flow-step .fs-icon{font-size:20px;}
.flow-step .fs-num{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;color:var(--g2);}
.flow-step .fs-lbl{font-size:10px;color:var(--light);font-weight:600;}
.flow-arrow{color:var(--cream3);font-size:18px;flex-shrink:0;}

/* Empty state */
.empty{text-align:center;padding:40px 20px;color:var(--light);}
.empty .ei{font-size:44px;margin-bottom:10px;opacity:.85;}
.empty p{font-size:13px;font-weight:600;color:var(--mid);margin:0;}
.empty small{display:block;font-size:11px;margin-top:4px;color:var(--light);}

/* Loading */
.loading-state{text-align:center;padding:32px;color:var(--light);}
.spin{display:inline-block;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr);}
  .form-row{grid-template-columns:1fr 1fr;}
  .toast{left:auto;max-width:360px;}
}
@media(min-width:960px){
  .toast{bottom:24px;}
  .sidebar{position:fixed !important;transform:translateX(0) !important;width:244px;min-width:244px;flex-shrink:0;box-shadow:1px 0 0 #e9e4de;}
  .sidebar-overlay{display:none !important;}
  .menu-btn{display:none !important;}
  /* Konten utama geser sejauh lebar sidebar */
  .app-body{margin-left:244px;padding-top:54px;}
  .content{padding:24px 32px;}
  /* Topbar sudah di-offset via padding-left di atas */
  .stats{grid-template-columns:repeat(4,1fr);gap:14px;}
  .grp-body{padding:16px;}
  .grp-nama{font-size:14px;}
  .grp-num{font-size:20px;}
  .var-grid{grid-template-columns:repeat(3,1fr) !important;gap:8px;}
  .var-card{padding:11px 10px;}
  .var-nama{font-size:12px;}
  .var-num{font-size:18px !important;}
  .var-lbl{font-size:10px;}
  /* Desktop: sembunyikan mobile bottom nav */
  .mob-bottom-nav{display:none !important;}
}

/* ====== MOBILE BOTTOM NAV (< 960px) ====== */
.mob-bottom-nav {
  position:fixed;bottom:0;left:0;right:0;
  height:60px;background:var(--white);
  border-top:1px solid var(--cream3);
  display:flex;align-items:stretch;
  z-index:46;
  box-shadow:0 -1px 0 var(--cream3);
  padding-bottom:env(safe-area-inset-bottom);
}
.mob-bottom-nav .mnav-item {
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;border:none;background:none;
  cursor:pointer;font-family:inherit;
  transition:color .15s;position:relative;padding:6px 2px;
}
.mob-bottom-nav .mnav-item .mi{line-height:1;color:var(--light);transition:color .15s;}
.mob-bottom-nav .mnav-item .ml{font-size:9.5px;font-weight:500;color:var(--light);white-space:nowrap;transition:color .15s;}
.mob-bottom-nav .mnav-item.active .ml{color:var(--g1);font-weight:600;}
.mob-bottom-nav .mnav-item.active .mi{color:var(--g1);}
.mob-bottom-nav .mnav-item.active::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:2px;background:var(--g1);border-radius:0 0 3px 3px;
}
.mob-bottom-nav .mnav-item:active{background:var(--cream);}
/* Beri jarak konten dari bottom nav saat mobile */
@media(max-width:959px){
  .content{padding-bottom:72px !important;}
}
/* ====== SKELETON LOADING ====== */
.skel{display:inline-block;background:linear-gradient(90deg,var(--cream2) 25%,var(--cream3) 50%,var(--cream2) 75%);background-size:200% 100%;animation:skelShim 1.4s ease infinite;border-radius:6px;}
@keyframes skelShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--cream2);}
.skel-row:last-child{border:none;}
/* ====== INLINE CONFIRM ====== */
.del-confirm-wrap{display:inline-flex;align-items:center;gap:6px;}
.del-confirm-wrap .del-yes{background:var(--rose-bg);color:var(--rose);border:1.5px solid var(--rose-border);border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.del-confirm-wrap .del-no{background:var(--cream);color:var(--mid);border:1.5px solid var(--cream3);border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}

/* ── Scan App Overlay ── */
#scan-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  flex-direction: column;
}
#scan-overlay.active { display: flex; }
#scan-frame {
  flex: 1;
  width: 100%;
  border: none;
}