/* ── SIDEBAR ── */
#sidebar{width:var(--sw);background:var(--bg1);border-right:1px solid var(--bdr);height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;z-index:200;overflow:hidden;transition:width .18s ease;}

/* ── TOGGLE SIDEBAR (ciutkan/perluas) ──
   Tombol bulat nempel di tepi kanan sidebar. Posisinya position:fixed
   dengan left:var(--sw) supaya otomatis ikut geser saat --sw berubah
   (lihat toggleSidebar() di script.js) — tanpa perlu aturan CSS terpisah
   untuk posisi collapsed vs expanded. position:fixed juga supaya TIDAK
   ikut terpotong oleh overflow:hidden milik #sidebar walau ditaruh
   sebagai child-nya. */
#sidebar-toggle-btn{
  position:fixed;top:22px;left:var(--sw);transform:translate(-50%,0);
  width:22px;height:22px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--bdr3);color:var(--txt2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;z-index:250;
  transition:left .18s ease,background .15s,color .15s,border-color .15s;
}
#sidebar-toggle-btn:hover{background:var(--amber-dim);color:var(--amber);border-color:var(--amber)}
#sidebar-toggle-btn i{transition:transform .18s ease}
html.sidebar-collapsed #sidebar-toggle-btn i{transform:rotate(180deg)}

/* ── STATE: SIDEBAR DICIUTKAN ──
   Hanya --sw yang benar-benar mengatur lebar (diubah lewat JS), sisanya
   di sini cuma menyembunyikan label teks supaya yang tersisa ikon saja,
   rapi ditengah. title="" pada tiap .nav-item (lihat index.html) jadi
   tooltip pengganti saat label disembunyikan.
   !important dipakai karena beberapa elemen (.nav-sect.ad-only/.sv-only,
   lihat applyRole() di script.js) juga di-set display lewat INLINE STYLE
   berdasarkan role user — inline style itu menang atas class biasa,
   jadi tanpa !important label "Master Data" dkk tetap nongol nyangkut
   walau sidebar sedang diciutkan. */
html.sidebar-collapsed .sb-logo{padding:18px 0 14px}
html.sidebar-collapsed .logo-mark{justify-content:center;gap:0}
/* [PENYESUAIAN] Swap logo.png -> favicon-48.png saat sidebar diciutkan,
   lihat komentar di index.html pada blok .logo-mark. */
.sb-logo-img-mini{display:none}
html.sidebar-collapsed .sb-logo-img-full{display:none}
html.sidebar-collapsed .sb-logo-img-mini{display:inline-block}
html.sidebar-collapsed .logo-text,
html.sidebar-collapsed .logo-mark>span,
html.sidebar-collapsed .logo-sub,
html.sidebar-collapsed .nav-sect,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .nav-badge,
html.sidebar-collapsed .sb-user-info,
html.sidebar-collapsed #sidebar-credit{display:none !important}
html.sidebar-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
/* Footer avatar: border-bottom:30px pada .sb-user aslinya cuma trik
   spasi utk mode lebar (lihat definisi .sb-user di bawah) — di mode
   ciutkan itu jadi garis tebal aneh selebar 64px, jadi diganti garis
   tipis biasa senada #sidebar-credit supaya rapi. */
html.sidebar-collapsed .sb-user{justify-content:center;padding:16px 0;border-bottom:1px solid var(--bdr)}

/* Area scroll: HANYA nav-sect/nav-item (Monitoring s/d Master Data).
   .sb-user (nama+role) dan #sidebar-credit ("Created by") SENGAJA
   ditaruh DI LUAR .sb-scroll sebagai footer tetap (flex:0 0 auto) —
   supaya selalu utuh terlihat berapa pun panjang daftar menunya
   (mis. role admin dengan menu Master Data tambahan). Kalau menu
   kepanjangan untuk tinggi layar, yang scroll cuma daftar menunya,
   bukan kartu user di bawahnya. */
.sb-scroll{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
}
/* Scrollbar tipis & senada tema gelap — tidak mengganggu tampilan */
.sb-scroll::-webkit-scrollbar{width:5px}
.sb-scroll::-webkit-scrollbar-track{background:transparent}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--bdr3);border-radius:3px}
.sb-scroll::-webkit-scrollbar-thumb:hover{background:var(--amber-dim)}
.sb-scroll{scrollbar-width:thin;scrollbar-color:var(--bdr3) transparent}

/* Credit footer sidebar — sekarang bagian dari flex flow normal #sidebar
   (bukan absolute), otomatis menempel di bawah .sb-scroll tanpa tumpang tindih. */
#sidebar-credit{
  flex:0 0 auto;
  width:100%;
  padding:12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--bdr);
  text-align:center;
  font-size:10px;
  color:var(--txt4);
  font-family:var(--mono);
  letter-spacing:.4px;
  background:var(--bg1);
  z-index:5;
}

#sidebar-credit span{
  color:var(--amber);
}

/* Saat sidebar minimize */
#sidebar.minimized #sidebar-credit{
  font-size:8px;
  padding:10px 4px;
}

#sidebar.minimized #sidebar-credit span{
  display:block;
  margin-top:2px;
}
.sb-logo{padding:20px 26px 16px 20px;border-bottom:1px solid var(--bdr);position:relative}
.sb-logo::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
/* [PENYESUAIAN] "SIMOPRO" sebelumnya font-size:20px + gambar logo 40px
   membuat total lebar row logo nyaris menyentuh tombol ciutkan sidebar
   bulat di kanan (#sidebar-toggle-btn, berdiameter 22px, setengah
   badannya "menjorok" ke dalam sidebar karena transform:translate(-50%,0)
   pada left:var(--sw) — lihat komentar di atas). Diperkecil supaya ada
   jarak aman, dan padding-right .sb-logo ditambah supaya makin lega. */
.logo-mark{font-family:var(--display);font-size:16px;font-weight:800;color:var(--amber);letter-spacing:-.5px;display:flex;align-items:center;gap:6px;min-width:0}
.logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-logo-img{width:180px;height:60px;object-fit:contain;flex-shrink:0}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.logo-sub{font-size:12px;color:var(--txt3);margin-top:1px;letter-spacing:.5px;line-height:1.6;justify-content:center;display:flex;flex-wrap:wrap}
.nav-sect{padding:13px 20px 4px;font-size:9px;color:var(--txt4);text-transform:uppercase;letter-spacing:1.2px;font-family:var(--mono);font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 20px;font-size:13px;color:var(--txt2);cursor:pointer;border-left:2px solid transparent;transition:all .15s;user-select:none}
.nav-item:hover{background:var(--bg2);color:var(--txt);border-left-color:var(--bdr3)}
.nav-item.active{background:var(--amber-dim);color:var(--amber);border-left-color:var(--amber)}
.nav-icon{width:15px;font-size:12px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.nav-badge{margin-left:auto;font-size:9px;font-family:var(--mono);background:var(--red-dim);color:var(--red);padding:1px 6px;border-radius:20px}
.nav-badge.ok{background:var(--green-dim);color:var(--green)}
.sb-user{padding:14px 15px;border-bottom:30px solid var(--bdr);display:flex;align-items:center;gap:10px;flex:0 0 auto}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--amber-dim);border:1px solid var(--amber);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);flex-shrink:0}
/* Wrapper nama+role: min-width:0 wajib supaya flex child boleh menyusut
   di bawah lebar kontennya sendiri — tanpa ini, nama user yang panjang
   akan mendorong keluar #sidebar (yang overflow:hidden) dan terpotong
   mentah alih-alih dipersingkat rapi dengan "...". */
.sb-user-info{min-width:0;flex:1 1 auto;overflow:hidden}
.u-name{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:10px;color:var(--txt3);margin-top:2px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── MAIN ── */
#main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden; max-width:100vw;position:relative;z-index:1;transition:margin-left .18s ease}
.topbar{min-height:var(--th);height:auto;background:var(--bg1);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;padding:8px 24px;position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar-title{font-family:var(--display);font-size:14px;font-weight:700;color:var(--txt);letter-spacing:-.2px}
.topbar-sep{color:var(--txt4);font-size:12px}
.topbar-bread{font-size:11px;color:var(--txt3);font-family:var(--mono)}
.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.conn-indicator{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-family:var(--mono);color:var(--txt3);padding:3px 9px;border-radius:20px;background:var(--bg3);border:1px solid var(--bdr)}
.conn-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.conn-dot.conn-on{background:var(--green)}
.conn-dot.conn-off{background:var(--red);animation:blink 1.2s infinite}
.conn-dot.conn-warn{background:var(--yellow);animation:blink 1.2s infinite}
.pill-live{display:inline-flex;align-items:center;gap:5px;background:var(--green-dim);border:1px solid rgba(34,214,122,.2);color:var(--green);font-size:10px;font-family:var(--mono);padding:3px 9px;border-radius:20px}
.pill-live i{font-size:7px;animation:blink 1.2s infinite}
.topbar-clock{font-size:11px;color:var(--txt3);font-family:var(--mono)}
.icon-btn{width:30px;height:30px;border-radius:var(--rad);background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;position:relative}
.icon-btn:hover{background:var(--bg4);color:var(--txt)}
.ndot{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--red);border:1px solid var(--bg1)}

/* ── PAGES ── */
.page{display:none;padding:20px 24px;animation:fadein .2s ease;overflow-y:auto;overflow-x:hidden; max-width:100%}
.page.active{display:block}
/* insheet special: override display block → flex */
#pg-insheet.active{display:flex !important;padding:14px 20px}
@keyframes fadein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pg-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:10px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bdr)}
.pg-header>div:first-child{flex:0 1 auto;min-width:0}
.pg-title{font-family:var(--display);font-size:22px;font-weight:700;color:var(--txt);letter-spacing:-.2px;white-space:nowrap}
.pg-sub{font-size:12px;color:var(--txt3);margin-top:4px;font-family:var(--mono)}
.pg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto;min-width:0}
.ri-row:hover td{background:rgba(255,255,255,.035)}
.ri-row:active td{background:rgba(255,180,30,.07)}