:root{
  --bg:#14171a;
  --panel:#1b1f23;
  --panel-2:#20262c;
  --panel-3:#252c33;
  --border:#2c333a;
  --border-soft:#23292f;
  --text:#eceff2;
  --text-dim:#9aa3ab;
  --text-faint:#5f6870;
  --amber:#F97316;
  --amber-dim:#d97706;
  --amber-glow:rgba(249,115,22,.18);
  --cyan:#4fb0c6;
  --green:#5fbf6e;
  --red:#e5595e;
  --violet:#9d8cff;
  --font-display:'Barlow Condensed',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:12px;
  
}
html, body{
  transition: background-color .2s ease, color .2s ease;
  
}
*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}
body{
  -webkit-font-smoothing:antialiased;
}
::selection{
  background:var(--amber-glow);
  color:var(--amber);
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--panel);
}
::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--text-faint);
}
a,button,input,select{
  font-family:inherit;
}
button{
  cursor:pointer;
}
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
html{
  min-height:100%;
}
/* ===== Latar website Ratna Asia: foto industrial + veil tipis =====
   Foto bg-RA-baru (peta Indonesia + power tools)
   tampil samar di sela panel; veil menjaga keterbacaan. */
body{
  min-height:100vh;
  background-color:#070b11;
  background-image:
    linear-gradient(rgba(15,23,42,0.55), rgba(7,11,17,0.75)),
    radial-gradient(1000px 480px at 88% -8%, var(--amber-glow), transparent 62%),
    url('assets/bg-RA-baru.jpg');
  background-size:auto, auto, cover;
  background-position:center, center, center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* (blok login lama dihapus — definisi aktif ada di "LOGIN SCREEN" bawah) */
#loading{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  z-index:999;
  
}
.loader-ring{
  width:56px;
  height:56px;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--amber);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}
#loading .ltxt{
  font-family:var(--font-mono);
  color:var(--text-dim);
  font-size:13px;
  letter-spacing:.04em;
}
#loading .ltitle{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.01em;
}
.wrap{
  max-width:1400px;
  margin:0 auto;
  padding:0 28px 80px;
}
header.topbar{
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 28px 0;
}
.brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .logo{
  height:72px;
  width:auto;
  flex-shrink:0;
  display:block;
}
.brand-mark{
  width:38px;
  height:38px;
  border:2px solid var(--amber);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--amber);
  font-size:13px;
  flex-shrink:0;
  position:relative;
  
}
.brand-mark::before, .brand-mark::after{
  content:'';
  position:absolute;
  background:var(--amber);
}
.brand-mark::before{
  width:6px;
  height:2px;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
}
.brand-mark::after{
  width:6px;
  height:2px;
  right:-8px;
  top:50%;
  transform:translateY(-50%);
}
h1{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  margin:0;
  letter-spacing:.01em;
  line-height:1.1;
}
.subtitle{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-faint);
  margin-top:3px;
  letter-spacing:.03em;
}
/* ===== HEADER USER AREA — premium & rapi ===== */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-left:auto;
}
/* Semua kapsul header disamakan tingginya agar sejajar rapi */
.session-user,
.meta-pill,
.logout-btn,
.live-badge{
  height:38px;
  box-sizing:border-box;
}
.session-user{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:999px;
  padding:4px 12px 4px 4px;
  line-height:1;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
  max-width:100%;
}
.session-user:hover{
  border-color:var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.session-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  color:#1a1400;
  background:linear-gradient(135deg,#ffbe45 0%,var(--amber) 45%,#e07f0a 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 2px 8px rgba(245,166,35,.35), inset 0 1px 0 rgba(255,255,255,.35);
  user-select:none;
}
.session-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-width:0;
}
.session-text strong{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  line-height:1.1;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.session-text span{
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.09em;
  line-height:1;
  color:var(--amber);
  background:var(--amber-glow);
  border:1px solid rgba(245,166,35,.28);
  padding:2px 6px;
  border-radius:5px;
  white-space:nowrap;
}
.header-divider{
  width:1px;
  height:24px;
  background:var(--border);
  flex-shrink:0;
  opacity:.9;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--text-dim);
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  padding:0 14px;
  border-radius:999px;
  white-space:nowrap;
}
/* Badge realtime — tinggi disamakan 38px dengan kapsul header lain */
.live-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  box-sizing:border-box;
  padding:0 13px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--green);
  white-space:nowrap;
  flex-shrink:0;
  transition:border-color .2s ease;
}
.live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(95,191,110,.14);
  flex-shrink:0;
}
.live-sep{
  color:var(--text-faint);
  font-weight:400;
}
/* Detak jantung khusus untuk bulatan LIVE (nonaktif jika reduce-motion) */
@media (prefers-reduced-motion: no-preference){
  .live-dot{
    animation:heart-beat 1s ease-in-out infinite;
  }
  @keyframes heart-beat{
    0%{ transform:scale(1); box-shadow:0 0 0 3px rgba(95,191,110,.14); }
    12%{ transform:scale(1.4); box-shadow:0 0 0 5px rgba(95,191,110,.25); }
    24%{ transform:scale(1); box-shadow:0 0 0 3px rgba(95,191,110,.14); }
    36%{ transform:scale(1.2); box-shadow:0 0 0 4px rgba(95,191,110,.2); }
    48%,100%{ transform:scale(1); box-shadow:0 0 0 3px rgba(95,191,110,.14); }
  }
}
.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 16px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.logout-btn svg{
  width:14px;
  height:14px;
  display:block;
  flex-shrink:0;
}
.logout-btn:hover{
  color:var(--red);
  border-color:rgba(229,89,94,.5);
  background:rgba(229,89,94,.08);
  box-shadow:0 2px 10px rgba(229,89,94,.12);
}
.logout-btn:active{
  transform:scale(.97);
}
/* Responsif header */
@media (max-width:1020px){
  .header-actions{
    gap:10px;
  }
  .meta-pill{
    font-size:11px;
    padding:0 12px 0 11px;
  }
}
@media (max-width:760px){
  .topbar-inner{
    padding:14px 16px 0;
  }
  .brand-row{
    align-items:flex-start;
  }
  .header-actions{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
    gap:8px;
    padding-bottom:4px;
  }
  .header-divider{
    display:none;
  }
  .session-text strong{
    max-width:140px;
  }
  .meta-pill{
    order:3;
  }
}
.tabs{
  display:flex;
  gap:2px;
  margin-top:22px;
  border-bottom:1px solid var(--border-soft);
}
.tab-btn{
  background:none;
  border:none;
  color:var(--text-faint);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  padding:11px 18px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  
}
.tab-btn:hover{
  color:var(--text-dim);
}
.tab-btn.active{
  color:var(--amber);
  border-bottom-color:var(--amber);
}
.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  background:var(--amber);
  color:#1a1400;
  font:700 11px var(--font-mono);
  vertical-align:2px;
}
.tabpanel{
  display:none;
  padding-top:26px;
}
.tabpanel.active{
  display:block;
}
.overview-head{
  margin-bottom:14px;
}
/* KPI strip */
  .kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:28px;
}
.kpi-card{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  position:relative;
  overflow:hidden;
  
}
.kpi-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-faint);
  margin-bottom:10px;
}
.kpi-value{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  color:var(--text);
  line-height:1.15;
  overflow-wrap:anywhere;
}
.kpi-value .unit{
  font-size:14px;
  color:var(--text-dim);
  font-weight:600;
  margin-left:3px;
}
.kpi-sub{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  margin-top:8px;
}
.kpi-sub.pos{
  color:var(--green);
}
.kpi-sub.neg{
  color:var(--red);
}
.kpi-sub.warn{
  color:var(--amber);
}
.kpi-ticks{
  display:flex;
  gap:2px;
  margin-top:12px;
  height:4px;
}
.kpi-ticks span{
  flex:1;
  background:var(--border);
  border-radius:1px;
}
.kpi-ticks span.on{
  background:var(--amber);
}
.kpi-card.alert .kpi-value{
  color:var(--red);
}
.kpi-card.alert{
  border-color:rgba(229,89,94,.35);
}
/* Panels / cards */
  .panel{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:18px 20px 20px;
  transition:background-color .2s ease, border-color .2s ease;
}
.kpi-card, .search-input, select.filter-select, .btn, table.data thead th, table.data tbody tr, .detail-row td{
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.panel + .panel{
  margin-top:16px;
}
/* Panel di dalam grid kolom TIDAK boleh kena margin-top di atas
   (aturan .panel + .panel mendorong kolom kanan turun 16px). */
.chart-row > .panel + .panel,
.access-grid > .panel + .panel{
  margin-top:0;
}
/* Ritme vertikal antar blok yang memang bertumpuk ke bawah */
.tabpanel > .panel + .chart-row,
.tabpanel > .chart-row + .chart-row,
.tabpanel > .chart-row + .panel{
  margin-top:16px;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  flex-wrap:wrap;
  gap:8px;
}
.panel-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}
.panel-note{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
}
.chart-row{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:16px;
  align-items:stretch;
}
.chart-row > .panel,
.access-grid > .panel{
  min-width:0;
}
.chart-row.thirds{
  grid-template-columns:1fr 1fr;
}
/* Baris yang panelnya beda tinggi (grafik vs list): rapat ikut isi,
   bukan stretch mengikuti panel tertinggi. */
.chart-row.fit{
  align-items:start;
}
canvas{
  max-width:100%;
}
.chart-box{
  position:relative;
  height:300px;
}
.chart-box.tall{
  height:360px;
}
table.rank{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:12.5px;
  table-layout:fixed;
}
table.rank th:first-child, table.rank td:first-child{
  width:38%;
}
table.rank th:nth-child(2), table.rank td:nth-child(2){
  width:20%;
}
table.rank th:last-child, table.rank td:last-child{
  width:42%;
}
table.rank th{
  text-align:left;
  color:var(--text-faint);
  font-weight:500;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.06em;
  padding:6px 8px;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
table.rank td{
  padding:7px 8px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-dim);
  vertical-align:middle;
  overflow:hidden;
}
table.rank tr:last-child td{
  border-bottom:none;
}
table.rank td.num{
  text-align:right;
  color:var(--text);
  white-space:nowrap;
}
table.rank td.num .mini-bar{
  flex:1;
  width:auto;
  min-width:50px;
}
.bar-cell{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
.bar-cell .mini-bar{
  width:auto;
  flex:1;
}
.bar-cell > span{
  flex-shrink:0;
}
.mini-bar{
  height:6px;
  border-radius:3px;
  background:var(--border);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  width:70px;
}
.mini-bar > i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:3px;
}
/* Explorer */
  .filter-bar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:end;
  margin-bottom:20px;
}
.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.filter-group label{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
}
.search-input{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 14px;
  color:var(--text);
  font-size:13.5px;
  font-family:var(--font-body);
  width:100%;
  
}
.search-input::placeholder{
  color:var(--text-faint);
}
.select-wrap{
  position:relative;
}
.select-wrap::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-40%) rotate(45deg);
  width:7px;
  height:7px;
  border-right:1.5px solid var(--text-faint);
  border-bottom:1.5px solid var(--text-faint);
  pointer-events:none;
  
}
select.filter-select{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  padding:11px 34px 11px 14px;
  font-size:13.5px;
  font-family:var(--font-body);
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  
}
select.filter-select:invalid, select.filter-select option[value="ALL"]{
  color:var(--text-faint);
}
select.filter-select.pagesize{
  min-width:110px;
  width:auto;
}
table.data.wide{
  min-width:900px;
}
.filter-bar .btn-group{
  display:flex;
  gap:8px;
  align-self:end;
}
.filter-bar .search-input,
.filter-bar .btn{ height:42px; box-sizing:border-box; }
.filter-bar .btn{ white-space:nowrap; }
@media (max-width:900px){
  .filter-bar{
    grid-template-columns:1fr;
  }
  .acc-view .filter-bar{
    grid-template-columns:1fr;
  }
  .filter-bar .btn-group{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}
.btn{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:8px;
  padding:10px 14px;
  font-size:12.5px;
  font-family:var(--font-mono);
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:6px;
  transition:border-color .15s, color .15s;
  
}
.btn:hover{
  border-color:var(--amber-dim);
  color:var(--amber);
}
.btn.primary{
  background:var(--amber);
  border-color:var(--amber);
  color:#1a1400;
  font-weight:600;
}
.btn.primary:hover{
  background:#ffb84d;
  color:#1a1400;
}
.result-count{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-faint);
  margin-bottom:10px;
}
.result-count b{
  color:var(--amber);
}
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
}
table.data{
  width:100%;
  border-collapse:collapse;
  min-width:1180px;
}
table.data thead th{
  position:sticky;
  top:0;
  background:var(--panel-3);
  text-align:left;
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  white-space:nowrap;
  
}
table.data thead th:hover{
  color:var(--amber);
}
table.data thead th.sorted{
  color:var(--amber);
}
table.data thead th .arrow{
  margin-left:4px;
  opacity:.7;
}
table.data tbody tr{
  border-bottom:1px solid var(--border-soft);
  transition:background .1s;
  cursor:pointer;
}
table.data tbody tr:hover{
  background:var(--panel-2);
}
table.data tbody td{
  padding:9px 12px;
  font-size:12.5px;
  color:var(--text-dim);
  white-space:nowrap;
}
table.data tbody td.mono{
  font-family:var(--font-mono);
}
table.data tbody td.desc{
  white-space:normal;
  max-width:260px;
  color:var(--text);
}
table.data tbody td.pn{
  color:var(--text);
  font-family:var(--font-mono);
}
table.data tbody td.num{
  text-align:right;
  font-family:var(--font-mono);
  color:var(--text);
}
.cat-chip{
  font-family:var(--font-mono);
  font-size:10px;
  padding:3px 8px;
  border-radius:20px;
  border:1px solid var(--border);
  color:var(--text-dim);
  white-space:nowrap;
  
}
.margin-tag{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  padding:2px 7px;
  border-radius:5px;
  display:inline-block;
}
.margin-good{
  background:rgba(95,191,110,.13);
  color:var(--green);
}
.margin-mid{
  background:rgba(245,166,35,.13);
  color:var(--amber);
}
.margin-bad{
  background:rgba(229,89,94,.13);
  color:var(--red);
}
.margin-none{
  color:var(--text-faint);
}
.detail-row td{
  background:var(--panel-2);
  padding:0;
}
.detail-inner{
  padding:16px 22px 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 22px;
}
.detail-group h4{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--text-faint);
  margin:0 0 8px;
  
}
.detail-item{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  padding:3px 0;
  border-bottom:1px dashed var(--border-soft);
}
.detail-item span:first-child{
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:11px;
}
.detail-item span:last-child{
  color:var(--text);
  font-family:var(--font-mono);
}
.footer-note{
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
}
@media (max-width:1000px){
  .kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .chart-row, .chart-row.thirds{
    grid-template-columns:1fr;
  }
  
}
@media (max-width:640px){
  .wrap, .topbar-inner{
    padding-left:14px;
    padding-right:14px;
  }
  .kpi-grid{
    grid-template-columns:1fr 1fr;
  }
  h1{
    font-size:21px;
  }
  
}
/* ===== ACCESS CONTROL / USER MANAGEMENT ===== */
.access-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}
.access-stat{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:14px 16px
}
.access-stat span{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-faint);
  letter-spacing:.05em
}
.access-stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:25px;
  margin-top:4px
}
.access-stat strong.warn{
  color:var(--amber)
}
.access-stat strong.good{
  color:var(--green)
}
.access-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:16px;
  align-items:start;
}
.request-filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px
}
.request-list{
  display:flex;
  flex-direction:column;
  gap:10px
}
.request-card{
  border:1px solid var(--border-soft);
  background:var(--panel-2);
  border-radius:10px;
  padding:14px
}
.request-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start
}
.request-title{
  font-weight:700;
  color:var(--text)
}
.request-meta{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-faint);
  margin-top:4px
}
.request-reason{
  font-size:12px;
  color:var(--text-dim);
  margin-top:12px;
  line-height:1.5
}
.status-pill{
  font-family:var(--font-mono);
  font-size:10px;
  padding:5px 8px;
  border-radius:20px;
  border:1px solid var(--border);
  white-space:nowrap
}
.status-pill.pending{
  color:var(--amber);
  border-color:rgba(245,166,35,.35)
}
.status-pill.approved{
  color:var(--green);
  border-color:rgba(95,191,110,.35)
}
.status-pill.rejected{
  color:var(--red);
  border-color:rgba(229,89,94,.35)
}
.request-actions{
  display:flex;
  gap:8px;
  margin-top:12px
}
.small-btn{
  background:var(--panel-3);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:7px;
  padding:7px 10px;
  font:11px var(--font-mono);
  cursor:pointer
}
.small-btn:hover{
  border-color:var(--amber-dim);
  color:var(--amber)
}
.small-btn.approve{
  color:var(--green);
  border-color:rgba(95,191,110,.3)
}
.small-btn.reject{
  color:var(--red);
  border-color:rgba(229,89,94,.3);
}
.small-btn:disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
.act-search{
  max-width:250px;
}
.act-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 0 4px;
}
.act-pageinfo{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
}
.user-table-wrap{
  overflow:auto
}
.user-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.user-table th{
  text-align:left;
  padding:9px 8px;
  color:var(--text-faint);
  font:10px var(--font-mono);
  text-transform:uppercase;
  border-bottom:1px solid var(--border-soft)
}
.user-table td{
  padding:10px 8px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-dim);
  vertical-align:middle
}
.user-name-cell{
  display:flex;
  gap:9px;
  align-items:center
}
.user-name-cell strong{
  color:var(--text)
}
.user-name-cell small{
  font:10px var(--font-mono);
  color:var(--text-faint)
}
.user-mini-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--panel-3);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--amber);
  font:10px var(--font-mono);
  flex-shrink:0
}
.role-badge,.access-tag{
  font:9px var(--font-mono);
  padding:4px 6px;
  border-radius:5px;
  background:var(--panel-3);
  color:var(--text-dim);
  white-space:nowrap
}
.user-active{
  font:10px var(--font-mono);
  color:var(--green)
}
.user-active.inactive{
  color:var(--red)
}
/* ===== REQUEST PERMISSION RINGKAS (baris tabel, 10/halaman) ===== */
.req-table td{
  vertical-align:middle;
  padding:7px 8px;
}
/* Kunci tinggi area request agar panel Daftar User tidak ikut melar saat pindah halaman */
.req-table-wrap{
  min-height:660px;
}
.req-cell{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.req-cell strong{
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:1.3;
}
.req-cell small{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-faint);
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:340px;
}
.req-cell .req-reason-inline{
  color:var(--text-dim);
  font-style:italic;
}
.req-done{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
}
.permission-matrix{
  border:1px solid var(--border-soft);
  border-radius:8px;
  overflow:hidden
}
.permission-matrix>div{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--border-soft)
}
.permission-matrix>div:last-child{
  border-bottom:0
}
.permission-matrix span,.permission-matrix strong{
  padding:10px;
  font-size:11px
}
.permission-head span{
  font:10px var(--font-mono);
  color:var(--text-faint);
  text-transform:uppercase
}
.perm{
  font:10px var(--font-mono);
  text-align:center
}
.perm.yes{
  color:var(--green)
}
.perm.request{
  color:var(--amber)
}
.perm.no{
  color:var(--text-faint)
}
.empty-state{
  padding:24px;
  text-align:center;
  color:var(--text-faint);
  font:11px var(--font-mono)
}
.access-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999
}
.access-modal{
  width:min(620px,100%);
  max-height:90vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:22px
}
.access-modal-large{
  width:min(780px,100%)
}
.access-modal h3{
  font-family:var(--font-display);
  font-size:23px;
  margin:0 0 6px
}
.access-modal>p,.manage-title-row p{
  margin:0 0 18px;
  color:var(--text-faint);
  font:11px var(--font-mono);
  line-height:1.5
}
.manage-title-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:10px
}
.modal-x{
  background:transparent;
  border:0;
  color:var(--text-faint);
  font-size:24px;
  cursor:pointer
}
/* ---------- MODAL DETAIL ITEM: tabel Gudang + Harga pas tanpa geser ---------- */
/* Tabel global table.data punya min-width:1180px (untuk tabel besar) — di modal
   kecil 620px itu memaksa scroll horizontal. Varian .fit membatalkan itu. */
#acc-modal .table-scroll.fit{
  overflow-x:hidden;
}
#acc-modal table.data.fit{
  min-width:0;
  width:100%;
  table-layout:fixed;
}
#acc-modal table.data.fit thead th,
#acc-modal table.data.fit tbody td{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#acc-modal table.data.fit-warehouse th:last-child,
#acc-modal table.data.fit-warehouse td:last-child{
  width:90px;
  text-align:right;
  white-space:nowrap;
}
#acc-modal table.data.fit-price th:nth-child(2),
#acc-modal table.data.fit-price td:nth-child(2){
  width:84px;
}
#acc-modal table.data.fit-price th:last-child,
#acc-modal table.data.fit-price td:last-child{
  width:130px;
  text-align:right;
  white-space:nowrap;
}
/* ---------- NOTA Accurate (mirip nota asli + siap cetak) ---------- */
.nota-btns{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.nota{
  position:relative;
  margin-top:6px;
}
.nota-wm{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:0;
}
.nota-wm img{
  width:min(560px,85%);
  height:auto;
  opacity:.1;
  transform:translateY(15%);
}
.nota>.nota-meta,.nota>.table-scroll,.nota>.nota-totals,.nota>.nota-desc,.nota>.nota-sign{
  position:relative;
  z-index:1;
}
.nota-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:4px 0 14px;
}
.nota-meta-col div{
  display:flex;
  gap:8px;
  padding:3px 0;
  font-size:13px;
}
.nota-meta-col span{
  min-width:74px;
  color:var(--text-faint);
  flex-shrink:0;
}
.nota-meta-col b{
  font-weight:600;
  color:var(--text);
}
.nota-meta-col:last-child{
  justify-self:end;
  text-align:right;
}
.nota-meta-col:last-child div{
  justify-content:flex-end;
}
.nota-table{
  width:100%;
}
table.data.nota-table thead th{
  background:transparent;
}
.nota-table .nota-nama,.nota-table .nota-nama-h{
  white-space:normal;
  min-width:220px;
  max-width:420px;
  text-align:left;
}
.nota-totals{
  margin:32px 0 0 auto;
  width:min(300px,100%);
  border-top:2px solid var(--border);
  padding-top:10px;
}
.nota-totals div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:3px 0;
  font-size:13px;
}
.nota-totals .grand{
  font-size:15px;
  border-top:1px solid var(--border-soft);
  margin-top:4px;
  padding-top:8px;
}
.nota-totals .grand b{
  color:var(--green);
}
.nota-desc{
  margin-top:14px;
  font-size:12px;
}
.nota-desc>span{
  color:var(--text-faint);
}
.nota-desc p{
  margin:4px 0 0;
  white-space:pre-line;
  line-height:1.6;
  color:var(--text-dim);
}
.nota-sign{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
  text-align:center;
  font-size:13px;
  line-height:1.6;
  color:var(--text-dim);
}
/* Cetak nota: hanya modal yang keluar, tema terang hemat tinta */
@media print{
  /* margin:0 membuat Chrome/Edge mematikan header-footer bawaan
     (URL, tanggal, judul, nomor halaman). Padding konten diganti
     lewat .access-modal di bawah agar teks tidak mepet tepi. */
  @page{
    size:auto;
    margin:0;
  }
  body>*:not(#acc-modal):not(#surat-root){
    display:none !important;
  }
  .access-modal-backdrop{
    position:static;
    display:block;
    padding:0;
    background:none;
  }
  .access-modal,.access-modal-large{
    width:100%;
    max-width:100%;
    max-height:none;
    overflow:visible;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:12mm;
  }
  .no-print{
    display:none !important;
  }
  .access-modal .table-scroll{
    overflow:visible;
    border:none;
  }
  /* Tabel data normalnya min-width:1180px (scroll horizontal di layar) —
     di kertas harus muat penuh, teks boleh wrap */
  #acc-modal table.data{
    min-width:0;
    font-size:11px;
  }
  #acc-modal table.data thead th,#acc-modal table.data tbody td{
    white-space:normal;
    padding:6px 8px;
  }
  #acc-modal .access-modal,#acc-modal .access-modal *{
    color:#000 !important;
    text-shadow:none !important;
    box-shadow:none !important;
    background-image:none !important;
  }
  #acc-modal .access-modal{
    background:#fff !important;
  }
  #acc-modal table.data th,#acc-modal table.data td{
    border-color:#888 !important;
  }
  .nota-meta{
    grid-template-columns:1fr 1fr;
  }
  .nota-totals{
    border-top-color:#000;
  }
  .nota-totals .grand{
    border-top-color:#000;
  }
  .nota-wm img{
    opacity:.1 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}
.access-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.access-form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--text);
  font-size:12px;
  font-weight:600
}
.access-form-grid label.full{
  grid-column:1/-1
}
.access-form-grid input,.access-form-grid select,.access-form-grid textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:10px 11px;
  font:12px var(--font-body);
  outline:none
}
.access-form-grid textarea{
  min-height:90px;
  resize:vertical
}
.access-form-grid input:focus,.access-form-grid select:focus,.access-form-grid textarea:focus{
  border-color:var(--amber-dim)
}
.field-note{
  font:9px var(--font-mono);
  font-weight:400;
  color:var(--text-faint)
}
.status-toggle{
  flex-direction:row!important;
  align-items:center;
  padding:10px 12px;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:8px
}
.status-toggle input{
  width:auto!important
}
.permission-editor{
  margin-top:18px;
  border-top:1px solid var(--border-soft);
  padding-top:16px
}
.permission-editor-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px
}
.permission-editor-head strong{
  font-size:13px
}
.permission-editor-head span{
  font:10px var(--font-mono);
  color:var(--text-faint)
}
.permission-check-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px
}
.perm-check{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:8px;
  font-size:11px;
  color:var(--text-dim)
}
.perm-check input{
  accent-color:var(--amber)
}
.admin-note{
  margin-top:10px;
  padding:9px 11px;
  border:1px solid rgba(245,166,35,.25);
  background:rgba(245,166,35,.07);
  border-radius:7px;
  color:var(--amber);
  font:10px var(--font-mono)
}
.modal-danger-zone{
  margin-top:18px;
  padding:13px;
  border:1px solid rgba(229,89,94,.25);
  background:rgba(229,89,94,.05);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.modal-danger-zone strong{
  display:block;
  font-size:12px;
  color:var(--text)
}
.modal-danger-zone small{
  display:block;
  color:var(--text-faint);
  font:10px var(--font-mono);
  margin-top:3px;
  line-height:1.4
}
.danger-btn{
  background:transparent;
  border:1px solid rgba(229,89,94,.4);
  color:var(--red);
  border-radius:7px;
  padding:8px 11px;
  font:11px var(--font-mono);
  cursor:pointer;
  white-space:nowrap
}
.danger-btn:hover{
  background:rgba(229,89,94,.1)
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px
}
.modal-actions .btn{
  cursor:pointer
}
@media(max-width:1100px){
  .access-grid{
    grid-template-columns:1fr
  }
  .access-kpis{
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:640px){
  .access-form-grid,.permission-check-grid,.request-filters{
    grid-template-columns:1fr
  }
  .access-form-grid label.full{
    grid-column:auto
  }
  .access-kpis{
    grid-template-columns:1fr 1fr
  }
  .modal-danger-zone{
    align-items:flex-start;
    flex-direction:column
  }
}
/* ===== LOGIN — Modern Split ===== */
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
  background:
    linear-gradient(180deg, rgba(7,11,17,.60), rgba(7,11,17,.70)),
    url('assets/bg-RA-baru.jpg') center/cover no-repeat,
    #070b11;
}
.login-split{
  position:relative;
  width:min(960px,100%);
  display:grid;
  grid-template-columns:400px 1fr;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #26313d;
  background:#12181f;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 4px 20px rgba(0,0,0,.4);
  animation:login-in .45s ease both;
}
@keyframes login-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Kilau chrome berjalan HANYA di garis tepi kartu */
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.login-split::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:20px;padding:1.5px;
  background:conic-gradient(from var(--beam) at 50% 50%,transparent 0deg,transparent 296deg,rgba(255,255,255,.28) 314deg,rgba(255,255,255,.95) 328deg,rgba(255,255,255,.28) 342deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:border-beam 6s linear infinite;
}
@keyframes border-beam{to{--beam:360deg}}

/* --- kiri --- */
.login-side{position:relative;padding:36px 32px;color:#fff;overflow:hidden;background:#0d1620;display:flex}
.side-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,28,.62) 0%,rgba(10,18,28,.45) 45%,rgba(10,18,28,.62) 100%),url('assets/bg-RA-baru.jpg') center 25%/cover no-repeat;}
/* Vignette — melembutkan tepi foto agar menyatu */
.side-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 42%,transparent 45%,rgba(5,9,14,.6) 100%);}
.side-content{position:relative;display:flex;flex-direction:column;gap:16px;width:100%}
.side-content-center{align-items:center;justify-content:center;flex:1;text-align:center}
.side-logo{height:52px;width:auto;align-self:flex-start}
.side-logo-lg{height:150px;width:auto;align-self:center;position:relative;z-index:2;
  /* Tumpukan bayangan = kesan bevel / timbul 3D (tanpa glow). Logo diam (tanpa float) */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 3px 2px rgba(0,0,0,.45)) drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
/* Panggung logo 3D — hanya sapuan gradient (halo & lantai dihapus) */
.logo-3d{position:relative;display:flex;align-items:center;justify-content:center;width:min(300px,80%);aspect-ratio:1;z-index:1}
/* Pembungkus pas seukuran gambar — kunci presisi topeng kilau */
.logo-imgwrap{position:relative;display:inline-block;line-height:0;z-index:2}
.logo-imgwrap .side-logo-lg{display:block}
/* Sapuan kilau chrome — mask 100% persis mengikuti kotak gambar */
.logo-shine{position:absolute;inset:0;z-index:3;pointer-events:none;
  -webkit-mask-image:url('assets/logo.png');mask-image:url('assets/logo.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(115deg,transparent 36%,#7d8a96 44%,#e8edf1 48%,#ffffff 50%,#dfe5ea 52%,#8b98a5 56%,transparent 64%);
  background-size:280% 100%;background-position:120% 0;
  mix-blend-mode:screen;
  animation:shine-sweep 6s ease-in-out infinite;
}
@keyframes shine-sweep{
  0%{background-position:120% 0;opacity:0}
  4%{opacity:1}
  38%{background-position:-40% 0;opacity:1}
  46%{background-position:-40% 0;opacity:0}
  50%{background-position:120% 0;opacity:0}
  54%{opacity:1}
  88%{background-position:-40% 0;opacity:1}
  96%,100%{background-position:-40% 0;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .logo-shine,.login-split::before{animation:none !important}
}

/* --- kanan --- */
.login-main{padding:40px 40px 28px;background:#141b23;display:flex;flex-direction:column;justify-content:center;min-width:0}
.login-card{width:100%;max-width:400px;margin:0 auto;min-width:0}
.login-heading h2{font-size:24px;font-weight:700;margin:0;letter-spacing:-.01em}
.login-heading p{margin:6px 0 0;color:#8d99a6;font-size:14px}
.login-field{margin-top:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.login-field label{font-size:13px;font-weight:600;color:#c7d0d9}
.input-wrap{position:relative;display:flex;align-items:center;background:#1c2530;border:1px solid #2c3948;border-radius:12px;height:50px;min-width:0;transition:border-color .15s,box-shadow .15s}
.input-wrap:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.22)}
.input-wrap svg{position:absolute;left:14px;width:18px;height:18px;color:#6b7885;pointer-events:none;flex-shrink:0}
.input-wrap input{flex:1;min-width:0;background:transparent;border:0;outline:0;height:100%;padding:0 12px 0 42px;color:#eef2f6;font-size:14.5px;font-family:inherit}
.input-wrap.no-icon input{padding-left:14px;padding-right:14px}
.input-wrap input::placeholder{color:#66727f;text-align:left}
.input-wrap input:-webkit-autofill{-webkit-text-fill-color:#eef2f6;-webkit-box-shadow:0 0 0 60px #1c2530 inset}
.password-wrap{display:contents}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#2a3542;border:1px solid #3a4a5c;border-radius:8px;color:#aeb9c5;font:600 11px var(--font-mono);padding:7px 10px;cursor:pointer}
.password-toggle:hover{color:var(--amber);border-color:var(--amber-dim)}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#9aa7b4;cursor:pointer;user-select:none}
.remember input{width:16px;height:16px;accent-color:var(--amber);cursor:pointer}
.link-btn{background:none;border:0;padding:4px 2px;color:var(--amber);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px}
.link-btn:hover{text-decoration:underline}
.login-error{display:none;margin-top:14px;padding:11px 13px;border-radius:10px;border:1px solid rgba(229,89,94,.4);background:rgba(229,89,94,.1);color:#ff9d9d;font-size:13px;line-height:1.5}
.login-error.show{display:flex;gap:8px;align-items:flex-start}
.login-error.ok{border-color:rgba(95,191,110,.4);background:rgba(95,191,110,.1);color:#8fe3a8}
.login-submit{width:100%;margin-top:18px;height:50px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);border:1px solid #d18a12;border-radius:12px;color:#1a1200;font-size:15px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 22px rgba(245,166,35,.28);transition:transform .12s,box-shadow .18s,background .15s}
.login-submit:hover{background:#ffb63d;box-shadow:0 10px 28px rgba(245,166,35,.36);transform:translateY(-1px)}
.login-submit:active{transform:translateY(0) scale(.99)}
.login-submit:disabled{opacity:.6;cursor:wait;transform:none}
.btn-arrow{font-weight:700}
.login-links{margin-top:18px}
.login-divider{display:flex;align-items:center;gap:12px;color:#66727f;font-size:12.5px;margin:6px 0 12px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:#26313d}
.login-secondary{width:100%;height:46px;border-radius:12px;background:transparent;border:1px solid #33404f;color:#e6ebf0;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.login-secondary:hover{border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,.06)}
.login-alt{margin-top:6px;min-width:0}
.login-alt .login-links{display:flex;justify-content:center;margin-top:16px}
.login-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.login-grid2 .login-field{margin-top:0}
.login-grid2 > *{min-width:0}
/* Kompaksi khusus form daftar agar tinggi kartu ≈ kartu login */
#register-form .login-grid2{margin-top:14px}
#register-form .login-field{margin-top:14px}
#register-form .input-wrap{height:48px}
#register-form .login-submit{height:48px;margin-top:16px}
#register-form .login-links{margin-top:14px}
.login-footer{margin-top:26px;text-align:center;font:500 11.5px var(--font-mono);color:#5f6d7a}
/* ===== Notifikasi popup sukses daftar akun ===== */
.notify-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,11,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.notify-overlay[hidden]{display:none}
.notify-card{width:min(380px,100%);background:#161e27;border:1px solid #2c3948;border-radius:18px;padding:30px 26px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:notify-pop .28s cubic-bezier(.22,.9,.3,1.2) both}
@keyframes notify-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.notify-icon{width:56px;height:56px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:26px;font-weight:700;color:#0b1510;background:linear-gradient(135deg,#7bdc8f,#4caf61);box-shadow:0 0 0 6px rgba(95,191,110,.16),0 10px 26px rgba(95,191,110,.35)}
.notify-card h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#eef2f6}
.notify-card p{margin:0 0 6px;font-size:13.5px;line-height:1.65;color:#9aa7b4}
.notify-card .login-submit{margin-top:16px}
@keyframes login-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.login-error.show{animation:login-shake .3s ease}

/* responsif */
@media (max-width:880px){
  .login-split{grid-template-columns:1fr;max-width:460px}
  .login-side{padding:28px 24px;min-height:220px}
  /* Foto potret + overlay lebih pekat agar logo tetap fokus */
  .side-bg{background:linear-gradient(180deg,rgba(10,18,28,.68) 0%,rgba(10,18,28,.55) 50%,rgba(10,18,28,.68) 100%),url('assets/bg-RA-baru.jpg') center 22%/cover no-repeat;}
  .login-main{padding:28px 22px 22px}
}
@media (max-width:480px){
  .login-screen{padding:16px 12px}
  .login-grid2{grid-template-columns:1fr}
}

/* ===== CLEAN & ELEGANT SKU CARD ===== */
.sku-results-container{
  margin-top:14px;
  width:100%;
}
.sku-cards-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.empty-sku-state{
  padding:42px 20px;
  text-align:center;
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:12px;
  border:1px dashed var(--border-soft);
  border-radius:10px;
  background:var(--panel-2);
}
.empty-note{
  padding:16px 8px 2px;
  text-align:center;
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:12px;
}
.empty-note:empty{ display:none; }
.btn-more-wrap{ text-align:center; padding:12px 0 2px; }
#jub-cust-table td b{ overflow-wrap:anywhere; }
/* Kontak customer: tautan WhatsApp / email */
.jub-clink{ color:#5fbf6e; text-decoration:none; overflow-wrap:anywhere; }
.jub-clink:hover{ text-decoration:underline; }
.jub-masked-note{ margin-top:8px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
/* Legacy .sku-card removed — explorer kini memakai .st-card di bawah. */




/* ===== HASIL PENCARIAN SKU (st-card) ===== */
.st-card{
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:border-color .15s ease, box-shadow .15s ease;
  width:100%;
  box-sizing:border-box;
  min-width:0;
  cursor:pointer;
}
.st-card:hover{
  border-color:var(--amber-dim);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.st-card:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* Header kartu: badge SKU + nama produk + kategori */
.st-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap;
}
.st-sku-title-group{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 260px;
  min-width:0;
}
.st-sku-badge{
  background:rgba(245,166,35,.12);
  color:var(--amber);
  border:1px solid var(--amber-dim);
  padding:4px 10px;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  flex-shrink:0;
}
.st-product-name{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin:0;
  line-height:1.35;
  flex:1 1 200px;
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.st-cat-badge{
  font-family:var(--font-mono);
  font-size:10px;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid var(--border);
  color:var(--text-dim);
  white-space:nowrap;
  flex-shrink:0;
}

/* Grid metrik: kategori, stok, dimensi, berat, ecer, grosir, industri */
.st-metrics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:6px;
}
.st-metrics-grid .st-metric-card{
  padding:6px 8px;
  gap:2px;
  min-height:60px;
  box-sizing:border-box;
  justify-content:flex-start;
}
.st-metrics-grid .st-metric-value{
  font-size:12px;
  text-align:center;
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.3;
}
.st-metric-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--panel-3);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:10px 12px;
  min-width:0;
}
.st-metric-label{
  font-family:var(--font-mono);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-faint);
}
.st-metric-value{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.st-metric-value.st-amber{ color:var(--amber); }
.st-metric-value.st-green{ color:var(--green); }
.st-metric-value.wrap-text{
  padding:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.3;
}

/* Responsif */
@media (max-width:720px){
  .st-metrics-grid{ grid-template-columns:repeat(2, 1fr); }
  .st-card{ padding:14px; }
}
@media (max-width:420px){
  .st-metrics-grid{ grid-template-columns:1fr; }
}
/* ===== ACCURATE SIDEBAR LAYOUT (ringkas ala referensi) ===== */
.acc-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.acc-topbar .btn-group{ display:flex; gap:8px; }
.acc-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.acc-sidebar{
  background:#232b33;
  border:1px solid var(--border-soft);
  border-radius:0 14px 14px 0;
  padding:14px 10px 16px;
  position:sticky;
  top:132px;
  min-height:420px;
}
.acc-side-label{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  color:#fff;
  padding:8px 12px 6px;
}
.acc-nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:0;
  border-radius:8px;
  color:#c8d0d7;
  font-size:13.5px;
  font-weight:500;
  padding:10px 12px;
  text-align:left;
  transition:background .15s ease,color .15s ease;
}
.acc-nav:hover{ background:rgba(255,255,255,.06); color:#fff; }
.acc-nav.active{ background:rgba(0,0,0,.32); color:#fff; }
.acc-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:#aeb8c0;
  flex-shrink:0;
}
.acc-nav.active .acc-ico{ color:#fff; }
.acc-nav span:nth-child(2){ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--amber);
  flex-shrink:0;
  margin-left:auto;
}
.acc-arrow{ color:#8b959e; font-size:18px; line-height:1; flex-shrink:0; }
.acc-nav.active .acc-arrow{ color:#fff; }
.acc-main{ min-width:0; }
/* Submenu di dalam grup database Fina (accordion). */
.fina-submenu{ margin:2px 0 6px 20px; border-left:2px solid rgba(255,255,255,.12); padding-left:4px; }
.fina-submenu .acc-nav.sub{ font-size:12.5px; padding:8px 10px; color:#aeb8c0; }
.fina-submenu .acc-nav.sub:hover{ background:rgba(255,255,255,.05); color:#fff; }
.fina-submenu .acc-nav.sub.active{ background:rgba(245,166,35,.16); color:var(--amber); }
.fina-submenu .acc-nav.sub.active .acc-ico{ color:var(--amber); }
.acc-nav .acc-db-count{ font-size:10.5px; color:#8b959e; margin-left:6px; white-space:nowrap; }
/* Sidebar Ringkasan: kiri Spreadsheet, kanan Accurate (1 view tampil 1 waktu) */
.ov-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.ov-sidebar{
  background:#232b33;
  border:1px solid var(--border-soft);
  border-radius:0 14px 14px 0;
  padding:14px 10px 16px;
  position:sticky;
  top:132px;
  min-height:200px;
}
.ov-side-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:8px 12px 10px;
}
.ov-nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  color:#c8d0d7;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  padding:11px 12px;
  text-align:left;
  position:relative;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ov-nav:hover{ background:rgba(255,255,255,.06); color:#fff; }
.ov-nav.active{ background:var(--amber-glow); color:#fff; border-color:rgba(245,166,35,.35); }
.ov-nav.active::before{
  content:'';
  position:absolute;
  left:-1px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:3px;
  background:var(--amber);
}
.ov-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:#aeb8c0;
  flex-shrink:0;
}
.ov-nav.active .ov-ico{ color:#fff; }
.ov-ico img{ width:22px; height:22px; object-fit:contain; display:block; }
/* Tabel kategori Accurate: header bisa diklik + baris total */
#ov-acc-cat-table thead th{ cursor:pointer; white-space:nowrap; user-select:none; }
#ov-acc-cat-table thead th:hover{ color:#fff; }
.data tr.total-row td{ font-weight:700; border-top:1px solid var(--border); background:rgba(255,255,255,.03); }
.ov-nav span:nth-child(2){ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-main{ min-width:0; }
.ov-view{ display:none; }
.ov-view.active{ display:block; animation:acc-fade .18s ease; }
/* Ritme vertikal antar blok di dalam view Ringkasan */
.ov-view > .panel + .chart-row,
.ov-view > .chart-row + .chart-row,
.ov-view > .chart-row + .panel,
.ov-view > .kpi-grid + .panel,
.ov-view > .kpi-grid + .chart-row{
  margin-top:16px;
}
.acc-view{ display:none; }
.acc-view.active{ display:block; animation:acc-fade .18s ease; }
@keyframes acc-fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.acc-view .panel{ margin-top:0; }
.acc-view .kpi-grid{ margin-bottom:0; }
.acc-view .chart-row{ margin-top:16px; }
/* Jubelio: KPI di view Ringkasan, panel berikutnya perlu jarak */
#jub-view-dashboard .kpi-grid{ margin-bottom:16px; }
/* Sidebar Jubelio cuma 3 menu — ikut tinggi kontennya (bukan 420px) */
#tab-jubelio .acc-sidebar{ min-height:0; }
.acc-view .filter-bar{ grid-template-columns:1fr auto; }
#acc-view-cari .filter-bar{ grid-template-columns:1fr auto; }
#acc-view-cari .filter-group{ flex:1 1 auto; min-width:0; }
#acc-view-cari .search-input{ width:100%; }
/* Pembatas sumber data di tab Ringkasan (Sheets vs Accurate) */
.src-divider{ display:flex; align-items:center; gap:12px; margin:22px 2px 14px; color:var(--text-dim); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
.src-divider::before, .src-divider::after{ content:''; height:1px; background:var(--border); flex:1; }
.src-divider span{ white-space:nowrap; }
/* Baris dokumen Accurate: klik 2x untuk lihat nota */
.acc-doc-row{ cursor:pointer; }
.acc-doc-row:hover td:first-child{ color:var(--amber); }
.nota-num{ white-space:nowrap; }
/* ===== Modal detail produk Jubelio ===== */
.jub-item{ cursor:pointer; }
.jub-item:hover{ border-color:var(--amber-dim); }
.jub-modal-ov{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(4,7,11,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.jub-modal{ width:min(480px,100%); max-height:88vh; overflow:auto; background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:notify-pop .25s ease both; }
.jub-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.jub-modal-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:4px; }
.jub-modal-sku{ font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--text); overflow-wrap:anywhere; }
.jub-modal-x{ flex-shrink:0; width:32px; height:32px; border-radius:10px; background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-size:14px; }
.jub-modal-x:hover{ color:var(--amber); border-color:var(--amber-dim); }
.jub-modal-img{ width:100%; max-height:220px; object-fit:contain; border-radius:12px; background:var(--panel-2); border:1px solid var(--border-soft); margin-bottom:12px; }
.jub-modal-name{ font-size:14.5px; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:14px; }
.jub-modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.jub-modal-grid > div{ background:var(--panel-2); border:1px solid var(--border-soft); border-radius:10px; padding:9px 12px; min-width:0; }
.jub-modal-grid span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:3px; }
.jub-modal-grid b{ font-size:13.5px; color:var(--text); overflow-wrap:anywhere; }
.jub-modal-sec{ font-size:12px; font-weight:700; color:var(--text-dim); margin:12px 0 8px; }
.jub-modal-stores{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.jub-modal-stores .acc-dash-kind{
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center; padding:7px 10px;
}
@media (max-width:420px){
  .jub-modal-stores{ grid-template-columns:1fr; }
}
.jub-modal-sibs{ display:flex; flex-wrap:wrap; gap:6px; }
.jub-modal-sibs button{ background:var(--panel-2); border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-family:var(--font-mono); font-size:11.5px; padding:6px 10px; cursor:pointer; }
.jub-modal-sibs button:hover{ color:var(--amber); border-color:var(--amber-dim); }
.jub-modal-ok{ width:100%; margin-top:18px; }
/* Sel dokumen Accurate: potong elipsis agar tabel muat tanpa scroll */
#tab-accurate td.clip{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Widget dashboard ringkas Accurate (aktivitas + tren + pembelian) */
.acc-view .panel + .panel{ margin-top:16px; }
.acc-dash-list{ display:flex; flex-direction:column; gap:8px; }
.acc-dash-item{ padding:8px 12px; border:1px solid var(--border-soft); border-radius:8px; font-size:12.5px; }
.acc-dash-kind{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:99px; background:rgba(245,166,35,.14); color:var(--amber); font-size:10.5px; font-family:var(--font-mono); }
.acc-dash-sub{ margin-top:2px; font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }
.acc-bar{ height:10px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.acc-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#5fbf6e,#8fe388); }
/* Panel Penjualan/Pembelian ala widget Accurate */
.acc-dash-period{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-bottom:8px; }
.acc-dash-bigrow{ display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.acc-dash-biglabel{ font-size:12px; color:var(--text-dim); }
.acc-dash-bigval{ font-size:20px; font-weight:700; }
.acc-dash-sub4{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:10px; font-size:11.5px; color:var(--text-dim); }
.acc-dash-sub4 b{ display:block; font-size:13px; }
.c-green{ color:#5fbf6e; } .c-yellow{ color:#f2c94c; } .c-red{ color:#e5595e; }
.acc-view .acc-bar{ display:flex; margin-bottom:8px; }
.acc-bar-fill.green{ background:#5fbf6e; border-radius:0; }
.acc-bar-fill.yellow{ background:#f2c94c; border-radius:0; }
.acc-bar-fill.red{ background:#e5595e; border-radius:0; }
@media (max-width:900px){
  .acc-layout{ grid-template-columns:1fr; }
  /* Sidebar Ringkasan tetap vertikal di kiri pada semua ukuran layar. */
  .ov-layout{ grid-template-columns:200px minmax(0,1fr); gap:12px; }
  .ov-sidebar{
    position:sticky;
    top:120px;
    min-height:0;
    border-radius:0 14px 14px 0;
    padding:10px 8px 12px;
  }
  .ov-nav{ padding:9px 10px; font-size:13px; }
  .acc-sidebar{
    position:static;
    min-height:0;
    border-radius:14px;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:10px;
    align-items:center;
  }
  .acc-side-label{ display:none; }
  #acc-view-cari .filter-bar{ grid-template-columns:1fr; }
  .acc-nav{ width:auto; white-space:nowrap; flex-shrink:0; }
  .acc-dot, .acc-arrow{ display:none; }
}

/* ===== GLOBAL SIDEBAR (floating card, circular active indicator) =====
   Baris biasa: pil gelap ringan. Baris aktif: transparan + lingkaran
   amber floating di ikon + label amber. Tanpa notch/pill menonjol. */
:root{
  --sb-w:252px;
  --sb-c:84px;
}
body.app{ display:block; padding:0; }
header.topbar{
  position:fixed;
  top:14px;
  left:14px;
  bottom:14px;
  width:var(--sb-w);
  border:1px solid var(--border-soft);
  border-radius:20px;
  background:rgba(22,27,33,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(0,0,0,.14));
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:width .25s ease, transform .25s ease;
  z-index:200;
}
.topbar-inner{
  max-width:none;
  margin:0;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:20px 14px 16px;
  overflow-y:auto;
  overflow-x:hidden;
  /* Cadangkan ruang scrollbar simetris agar konten (logo) selalu tepat
     di tengah kartu, ada tidaknya scroll. */
  scrollbar-gutter:stable both-edges;
}
.brand-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 4px 16px;
  position:relative;
}
.brand{ display:flex; align-items:center; justify-content:center; gap:0; }
.brand .logo-full{ height:58px; width:auto; display:block; }
.brand .logo-mark{ display:none; height:42px; width:auto; }
/* Kilau chrome ala logo login — presisi mengikuti kotak gambar */
.brand-shine-wrap{position:relative;display:inline-block;line-height:0}
.brand-shine{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url('assets/logo.png');mask-image:url('assets/logo.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(115deg,transparent 36%,#7d8a96 44%,#e8edf1 48%,#ffffff 50%,#dfe5ea 52%,#8b98a5 56%,transparent 64%);
  background-size:280% 100%;background-position:120% 0;
  mix-blend-mode:screen;
  animation:shine-sweep 6s ease-in-out infinite;
}
.brand-shine-mark{
  -webkit-mask-image:url('assets/favicon.png');mask-image:url('assets/favicon.png');
}
#nav-hamburger, #nav-overlay{ display:none; }
.header-actions{
  margin-left:0;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:14px 2px 0;
  border-top:1px solid var(--border-soft);
  flex-wrap:nowrap;
}
.header-divider{ display:none; }
.session-user{ width:100%; }
.logout-btn{ width:100%; height:40px; justify-content:center; }
.nav-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:2px 12px 10px;
  white-space:nowrap;
  overflow:hidden;
  transition:opacity .18s ease;
}
.tabs{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:0;
  margin-bottom:18px;
  border-bottom:none;
  background:transparent;
  border:none;
  padding:0;
}
.tab-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#c8d0d7;
  background:transparent;
  border:none;
  padding:10px 12px 10px 14px;
  border-radius:10px;
  position:relative;
  transition:background .15s ease, color .15s ease, padding .25s ease;
}
.tab-btn:hover{ color:#fff; background:rgba(255,255,255,.06); }
/* Indikator aktif ala referensi: bar vertikal + tint lembut. */
.tab-btn::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:transparent;
  transition:background .15s ease;
}
.tab-btn.active::before{ background:var(--amber); }
.tab-btn .tab-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8b959e;
  flex-shrink:0;
  border-radius:50%;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, width .2s ease, height .2s ease, margin .25s ease;
}
.tab-btn .tab-ico svg{ width:20px; height:20px; display:block; }
.tab-btn .tab-ico img{ width:24px; height:24px; object-fit:contain; display:block; border-radius:6px; }
/* Logo brand: tampil apa adanya (tanpa lingkaran amber agar warnanya utuh).
   Aktif ditandai label amber + ring amber saat collapsed. */
.tab-btn.active .tab-ico.has-logo{
  width:30px;
  height:30px;
  background:transparent;
  box-shadow:none;
  margin-left:0;
}
.tab-btn.active .tab-ico.has-logo img{ width:26px; height:26px; }
body.nav-collapsed .tab-btn.active .tab-ico.has-logo{
  width:32px;
  height:32px;
  background:transparent;
  box-shadow:0 0 0 2px var(--amber);
}
.tab-btn .tab-label{
  white-space:nowrap;
  overflow:hidden;
  max-width:220px;
  transition:opacity .18s ease, max-width .25s ease;
}
.tab-btn.active{ color:var(--amber); background:rgba(245,166,35,.10); border:none; }
.tab-btn.active .tab-label{ color:var(--amber); font-weight:700; }
.tab-btn.active .tab-ico{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--amber);
  color:#171106;
  box-shadow:0 0 0 5px rgba(245,166,35,.14), 0 8px 20px rgba(245,166,35,.35);
  margin-left:-4px;
}
.tab-badge{
  margin-left:auto;
  flex-shrink:0;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--amber);
  color:#1a1400;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
}
.wrap{
  max-width:1400px;
  margin:0 auto;
  padding:0 28px 80px 280px;
}
.ov-sidebar{ top:20px; }
.acc-sidebar{ top:20px; }

/* Tombol ciut/bentang sidebar di tepi kanan sidebar. */
#nav-toggle{
  position:absolute;
  top:50%;
  right:-16px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--panel-2);
  border:1px solid var(--amber-dim);
  color:var(--amber);
  cursor:pointer;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#nav-toggle:hover{ background:rgba(245,166,35,.14); box-shadow:0 8px 26px rgba(245,166,35,.25); }
#nav-toggle:active{ transform:translateY(-50%) scale(.92); }
#nav-toggle svg{ width:16px; height:16px; display:block; transition:transform .25s ease; }
body.nav-collapsed #nav-toggle svg{ transform:scaleX(-1); }
/* ----- Collapsed: ikon tengah, label hilang, konten melebar ----- */
body.nav-collapsed header.topbar{ width:var(--sb-c); }
body.nav-collapsed .brand-row{ flex-direction:column; align-items:center; gap:10px; }
body.nav-collapsed .brand .logo-full{ display:none; }
body.nav-collapsed .brand .logo-mark{ display:block; }
body.nav-collapsed .nav-label{ opacity:0; height:0; padding:0; margin:0; }
body.nav-collapsed .tab-btn{ justify-content:center; padding-left:0; padding-right:0; }
body.nav-collapsed .tab-btn .tab-label{ opacity:0; max-width:0; }
body.nav-collapsed .tab-btn.active .tab-ico{ margin-left:0; }
body.nav-collapsed .session-text{ display:none; }
body.nav-collapsed .session-user{ justify-content:center; padding:4px; }
body.nav-collapsed .logout-btn span{ display:none; }
body.nav-collapsed .logout-btn{ justify-content:center; padding:0; }
body.nav-collapsed .live-badge{ background:transparent; border-color:transparent; padding:4px; justify-content:center; }
body.nav-collapsed .live-badge span:not(.live-dot){ display:none; }
body.nav-collapsed .wrap{ padding-left:112px; }

@media (max-width:900px){
  header.topbar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(284px, 84vw);
    border:1px solid var(--border-soft);
    border-left:none;
    border-radius:0 20px 20px 0;
    background:rgba(22,27,33,.96);
    transform:translateX(-110%);
    transition:transform .25s ease;
    z-index:300;
  }
  body.nav-open header.topbar{ transform:none; }
  body.nav-open{ overflow:hidden; }
  #nav-overlay{ display:none; }
  body.nav-open #nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:250;
    background:rgba(0,0,0,.6);
  }
  #nav-hamburger{
    display:inline-flex;
    position:fixed;
    top:14px;
    left:14px;
    z-index:200;
    width:44px;
    height:44px;
    border-radius:12px;
    align-items:center;
    justify-content:center;
    background:var(--panel);
    border:1px solid var(--border);
    color:var(--text);
  }
  #nav-hamburger svg{ width:22px; height:22px; }
  #nav-toggle{ display:none; }
  .topbar-inner{ padding:20px 14px 16px; overflow-y:auto; }
  .brand-row{ flex-direction:row; align-items:center; }
  .brand .logo-full{ display:block; }
  .brand .logo-mark{ display:none; }
  .header-actions{ flex-direction:column; align-items:stretch; }
  .session-user{ width:100%; }
  .logout-btn{ width:100%; }
  .nav-label{ display:block; }
  .tabs{ margin:0 0 18px; padding:0; border:none; border-radius:0; }
  .tab-btn{ width:100%; white-space:normal; border-radius:12px; }
  .tab-btn .tab-label{ opacity:1; max-width:220px; }
  .wrap{ padding:70px 16px 80px; }
}

/* ===== USER CARD ala referensi (avatar + dot + nama + chevron) ===== */
.session-user{
  height:auto;
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:10px 12px;
  gap:10px;
  align-items:center;
}
.session-avatar{
  width:40px;
  height:40px;
  font-size:13px;
  position:relative;
  flex-shrink:0;
}
.session-avatar::after{
  content:'';
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--green);
  border:2px solid var(--panel-2);
}
.session-text{ flex:1; min-width:0; }
.session-chev{
  display:inline-flex;
  flex-shrink:0;
  color:var(--text-faint);
}
.session-chev svg{ width:16px; height:16px; display:block; }
.live-badge{
  height:auto;
  border-radius:16px;
  padding:10px 14px;
  justify-content:flex-start;
}
.logout-btn{ border-radius:16px; }
body.nav-collapsed .session-chev{ display:none; }
/* Sub-navigasi Manajemen User: Daftar User | Request | Log. */
.acc-subnav{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.acc-subnav-btn{
  background:var(--panel-2);
  border:1px solid var(--border-soft);
  color:var(--text-dim);
  border-radius:999px;
  padding:9px 16px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.acc-subnav-btn:hover{ border-color:var(--amber-dim); color:var(--amber); }
.acc-subnav-btn.active{
  background:rgba(245,166,35,.12);
  border-color:var(--amber-dim);
  color:var(--amber);
}
.acc-subnav-count{
  display:inline-block;
  min-width:20px;
  padding:1px 6px;
  margin-left:6px;
  border-radius:999px;
  background:var(--amber);
  color:#1a1400;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
}
/* Kartu nama: user + live + logout dalam satu kartu. Ritme presisi. */
.user-card{
  background:var(--panel-2);
  background-image:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.user-card .session-user,
.user-card .live-badge,
.user-card .logout-btn{
  background:transparent;
  border-color:transparent;
}
.user-card .session-user:hover,
.user-card .logout-btn:hover{
  background:rgba(255,255,255,.05);
  border-color:transparent;
  box-shadow:none;
}
/* Urutan kartu user: blok nama di atas, baris LIVE/tema/bahasa di tengah. */
.user-card > .session-user{ order:-1; margin-top:0; }
.user-card > .float-stack{ order:0; justify-content:center; margin-top:10px; }
.user-card > .logout-btn{ order:1; }
.user-card .live-badge{ border-top:1px solid var(--border-soft); border-radius:0; }
.user-card .logout-btn{ width:100%; justify-content:flex-start; background:transparent; border-color:transparent; border-radius:10px; }
.user-card > .logout-btn{ margin-top:8px; padding:10px 12px 4px; }
.user-card .theme-toggle:hover,
.user-card .logout-btn:hover{ background:rgba(255,255,255,.05); border-color:transparent; box-shadow:none; }
.user-card .logout-btn{ border-top:1px solid var(--border-soft); border-radius:0; }
.user-card .theme-toggle:hover{ background:rgba(255,255,255,.05); border-color:transparent; box-shadow:none; }
/* Tombol tema mengambang di bawah LIVE (pojok kanan atas halaman). */
.theme-float{
  position:fixed;top:58px;right:16px;z-index:200;
  display:flex;align-items:center;
  background:var(--panel-2);border:1px solid var(--border-soft);border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.theme-float .theme-toggle{ border:none; background:transparent; }
/* Bar kontrol (LIVE + tema + bahasa) menyatu di atas kartu user. */
.float-stack{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  padding:2px 2px 10px;margin-bottom:2px;
  border-bottom:1px solid var(--border-soft);
}
.float-stack .live-top,
.float-stack .theme-float,
.float-stack .lang-float{
  position:static;margin:0;width:auto;top:auto;right:auto;
  background:transparent;border:none;box-shadow:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.float-stack .live-top{ padding:2px 0; }
.float-stack .theme-float .theme-toggle{ width:26px; height:26px; }
.float-stack .theme-float .theme-toggle svg{ width:13px; height:13px; }
.float-stack .lang-switch{ gap:1px; padding:2px; }
.float-stack .lang-switch button{ padding:4px 7px; font-size:9px; }
.live-mini{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  color:var(--green);white-space:nowrap;
}
.live-mini .live-dot{ width:6px; height:6px; }
.user-card .session-chev{ display:none; }
body.nav-collapsed .clock-wrap{ display:none; }
/* Mode ciut: kontrol bawah seragam — boks ikon 40px, celah rata. */
body.nav-collapsed .float-stack{
  flex-direction:column;align-items:center;gap:10px;
  padding:2px 0 12px;margin-bottom:0;
}
body.nav-collapsed .live-mini{ justify-content:center; }
body.nav-collapsed .theme-float .theme-toggle{ width:40px; height:40px; margin:0 auto; }
body.nav-collapsed .theme-float .theme-toggle svg{ width:17px; height:17px; }
body.nav-collapsed .float-stack .lang-switch{ flex-direction:column; width:100%; gap:6px; }
body.nav-collapsed .float-stack .lang-switch button{ width:100%; padding:7px 0; text-align:center; }
body.nav-collapsed .session-user{ justify-content:center; padding:6px 4px; }
body.nav-collapsed .logout-btn{
  width:40px; height:40px; margin:2px auto 0; padding:0;
  justify-content:center; align-items:center;
  border:1px solid var(--border-soft); border-radius:12px;
}
body.nav-collapsed .user-card{ padding:8px 4px; align-items:center; }



/* ===== TEMA TERANG (light mode) ===== */
html[data-theme="light"]{ color-scheme:light; }
html[data-theme="dark"]{ color-scheme:dark; }
[data-theme="light"]{
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-2:#f4f7fb;
  --panel-3:#e8edf3;
  --border:#d3dce5;
  --border-soft:#e2e9f0;
  --text:#17222d;
  --text-dim:#4e5e6e;
  --text-faint:#8595a5;
  --amber:#d97706;
  --amber-dim:#b45309;
  --amber-glow:rgba(217,119,6,.16);
  --cyan:#0e7490;
  --green:#15803d;
  --red:#dc2626;
  --violet:#6d28d9;
}

/* --- tombol toggle tema --- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  transition:border-color .15s,color .15s,background-color .15s,transform .1s;
}
.theme-toggle:hover{border-color:var(--amber-dim);color:var(--amber)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
[data-theme="light"] .theme-toggle .moon{display:block}
[data-theme="light"] .theme-toggle .sun{display:none}
/* --- pemilih bahasa ID/EN --- */
.lang-switch{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px}
.lang-switch button{border:0;background:transparent;color:var(--text-dim);font:700 11px var(--font-mono);padding:7px 10px;border-radius:9px;cursor:pointer;letter-spacing:.05em;transition:background .15s,color .15s}
.lang-switch button:hover{color:var(--text)}
.lang-switch button.active{background:var(--amber);color:#1a1400}
.lang-login{position:absolute;top:18px;right:64px;z-index:5;background:rgba(20,27,35,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="light"] .lang-login{background:rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(20,32,43,.10)}
.lang-float{position:fixed;top:104px;right:16px;z-index:200;box-shadow:0 8px 22px rgba(0,0,0,.35)}
#login-screen .theme-toggle{position:absolute;top:18px;right:18px;z-index:5;background:rgba(20,27,35,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="light"] #login-screen .theme-toggle{background:rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(20,32,43,.10)}

/* --- login: panel kanan jadi terang, panel kiri tetap gelap --- */

[data-theme="light"] .login-main{background:#ffffff}
[data-theme="light"] .login-heading h2{color:#17222d}
[data-theme="light"] .login-heading p{color:#5b6b7a}
[data-theme="light"] .login-field label{color:#3d4c5c}
[data-theme="light"] .input-wrap{background:#f1f4f8;border-color:#d3dce5}
[data-theme="light"] .input-wrap svg{color:#8595a5}
[data-theme="light"] .input-wrap input{color:#17222d}
[data-theme="light"] .input-wrap input::placeholder{color:#8595a5}
[data-theme="light"] .input-wrap input:-webkit-autofill{-webkit-text-fill-color:#17222d;-webkit-box-shadow:0 0 0 60px #f1f4f8 inset}
[data-theme="light"] .password-toggle{background:#e8edf3;border-color:#d3dce5;color:#4e5e6e}
[data-theme="light"] .remember{color:#4e5e6e}
[data-theme="light"] .login-error{background:rgba(220,38,38,.07);color:#b91c1c;border-color:rgba(220,38,38,.35)}
[data-theme="light"] .login-error.ok{background:rgba(21,128,61,.08);color:#15803d;border-color:rgba(21,128,61,.35)}
[data-theme="light"] .login-divider{color:#8595a5}
[data-theme="light"] .login-divider::before,[data-theme="light"] .login-divider::after{background:#e2e9f0}
[data-theme="light"] .login-secondary{border-color:#c3ced9;color:#17222d}
[data-theme="light"] .login-secondary:hover{border-color:var(--amber-dim);color:var(--amber-dim);background:rgba(217,119,6,.07)}
[data-theme="light"] .login-footer{color:#8595a5}
[data-theme="light"] .notify-card{background:#ffffff;border-color:#e2e9f0;box-shadow:0 30px 80px rgba(20,32,43,.22)}
[data-theme="light"] .notify-card h3{color:#17222d}
[data-theme="light"] .notify-card p{color:#4e5e6e}
[data-theme="light"] .login-split::before{
  background:conic-gradient(from var(--beam) at 50% 50%,transparent 0deg,transparent 296deg,rgba(217,119,6,.30) 314deg,rgba(217,119,6,.95) 328deg,rgba(217,119,6,.30) 342deg,transparent 360deg);
}
@media (max-width:640px){
  
}

/* --- dashboard: sidebar atas kaca terang --- */
[data-theme="light"] header.topbar{background:rgba(255,255,255,.72)}
[data-theme="light"] .tab-btn:hover,[data-theme="light"] .ov-nav:hover,[data-theme="light"] .acc-nav:hover{background:rgba(15,30,45,.05);color:var(--text)}
[data-theme="light"] .ov-nav.active,[data-theme="light"] .acc-nav.active{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.4);color:#92400e}
[data-theme="light"] .ov-nav.active .ov-ico,[data-theme="light"] .acc-nav.active .acc-ico{color:#92400e}
[data-theme="light"] .ov-nav.active .ov-arrow,[data-theme="light"] .acc-nav.active .acc-arrow{color:#92400e}
[data-theme="light"] .tab-btn.active{color:var(--amber-dim)}
[data-theme="light"] .ov-side-label,[data-theme="light"] .acc-side-label,[data-theme="light"] .nav-label{color:var(--text-faint)}
[data-theme="light"] .ov-ico,[data-theme="light"] .acc-ico,[data-theme="light"] .tab-ico{color:var(--text-faint)}
[data-theme="light"] thead th:hover{color:var(--text)}
[data-theme="light"] .acc-arrow{color:var(--text-faint)}
[data-theme="light"] .c-green{color:#15803d}
[data-theme="light"] .c-yellow{color:#a16207}
[data-theme="light"] .c-red{color:#dc2626}
[data-theme="light"] .acc-bar-fill.green{background:#15803d}
[data-theme="light"] .acc-bar-fill.yellow{background:#d97706}
[data-theme="light"] .acc-bar-fill.red{background:#dc2626}
[data-theme="light"] .st-sku-badge{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.45);color:#92400e}
[data-theme="light"] .session-text span{color:#92400e;background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.3)}
[data-theme="light"] .session-avatar{color:#fff8ec}
[data-theme="light"] .user-card .session-user:hover{background:rgba(15,30,45,.05)}
[data-theme="light"] .user-card .theme-toggle:hover{background:rgba(15,30,45,.05)}
[data-theme="light"] .user-card .logout-btn:hover{background:rgba(220,38,38,.07)}
[data-theme="light"] #loading{background:var(--bg)}
[data-theme="light"] ::-webkit-scrollbar-track{background:var(--panel-2)}


[data-theme="light"] .ov-sidebar,[data-theme="light"] .acc-sidebar{background:var(--panel)}
[data-theme="light"] .tab-btn,[data-theme="light"] .ov-nav,[data-theme="light"] .acc-nav{color:#3d4c5c}
[data-theme="light"] .tab-btn{background:rgba(15,30,45,.045)}
[data-theme="light"] .tab-btn .tab-ico{color:#5b6b7a}

/* --- Tiket IT Helpdesk: tombol floating + popup --- */
#it-help-fab{
  position:fixed;right:18px;bottom:18px;z-index:300;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  background:var(--amber);color:#1a1400;font:700 13px var(--font,inherit);
  border:1px solid var(--amber-dim);box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .12s;
}
#it-help-fab:hover{transform:translateY(-1px)}
#it-help-fab:active{transform:scale(.97)}
#it-help-fab .fab-ico svg{width:18px;height:18px;display:block}
#it-help-fab .fab-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#dc2626;color:#fff;font:700 11px/20px var(--font-mono,monospace);text-align:center;
}
#it-ticket-overlay{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
#it-ticket-overlay[hidden]{display:none}
.it-ticket-modal{
  width:min(720px,100%);max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;
}
.it-ticket-modal textarea{width:100%;resize:vertical;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px}
.it-ticket-modal input[type="file"]{margin-top:6px;color:var(--text-dim)}
.it-ticket-modal input[readonly]{opacity:.7;cursor:default}
.status-pill.ticket-baru{background:rgba(220,38,38,.14);color:#f87171;border:1px solid rgba(220,38,38,.45)}
.status-pill.ticket-diproses{background:rgba(59,130,246,.14);color:#60a5fa;border:1px solid rgba(59,130,246,.45)}
.status-pill.ticket-selesai{background:rgba(21,128,61,.14);color:#4ade80;border:1px solid rgba(21,128,61,.45)}
.status-pill.ticket-ditutup{background:rgba(120,130,140,.18);color:#9aa7b4;border:1px solid rgba(120,130,140,.4)}
/* --- Form Aset HRD --- */
.status-pill.asset-menunggu{background:rgba(217,119,6,.16);color:#fbbf24;border:1px solid rgba(217,119,6,.45)}
.status-pill.asset-selesai{background:rgba(21,128,61,.14);color:#4ade80;border:1px solid rgba(21,128,61,.45)}
.status-pill.asset-ditolak{background:rgba(220,38,38,.14);color:#f87171;border:1px solid rgba(220,38,38,.45)}
.status-pill.slot-pending{background:rgba(120,130,140,.18);color:#9aa7b4;border:1px solid rgba(120,130,140,.4)}
.status-pill.slot-approved{background:rgba(21,128,61,.14);color:#4ade80;border:1px solid rgba(21,128,61,.45)}
.status-pill.slot-rejected{background:rgba(220,38,38,.14);color:#f87171;border:1px solid rgba(220,38,38,.45)}
.asset-item-row{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr auto;gap:8px;align-items:end;
  padding:10px;border:1px solid var(--border-soft);border-radius:10px;margin-bottom:8px;
}
.asset-item-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim)}
.asset-item-row input,.asset-item-row select{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px}
@media (max-width:900px){ .asset-item-row{grid-template-columns:1fr 1fr} }
/* --- Surat Aset HRD (cetak / PDF A4, mirip contoh HRD) --- */
#surat-root{position:fixed;inset:0;z-index:500;overflow:auto;background:rgba(0,0,0,.6);padding:20px}
.surat-toolbar{max-width:210mm;margin:0 auto 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px}
.surat-sheet{position:relative;width:210mm;min-height:290mm;margin:0 auto;background:#fff;color:#111;
  padding:14mm 15mm 14mm;font:13.5px/1.6 Arial,Helvetica,sans-serif;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.surat-sheet::before,.surat-sheet::after{content:none}
.surat-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:125mm;height:125mm;pointer-events:none}
.surat-wm img{display:block;width:100%;height:100%;object-fit:contain;opacity:.07}
.surat-tab{position:absolute;top:16mm;right:0;width:7mm;height:18mm;background:#e8720c;border-radius:3mm 0 0 3mm}
.surat-sheet p{margin:9px 0}
.surat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.surat-brand{display:flex;flex-direction:column;align-items:center}
.surat-mark{display:block;width:76px;height:84px;margin-bottom:2px}
.surat-mark img{display:block;width:100%;height:100%;object-fit:contain}
.surat-logo{font:800 22px Arial,Helvetica,sans-serif;color:#f5820b;letter-spacing:.02em}
.surat-logo span{color:#0b3d91}
.surat-npwp{font-size:11.5px;color:#333;margin-top:1px}
.surat-contact{display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex-shrink:0}
.sc-line{display:flex;gap:10px;align-items:flex-start}
.sc-icons{display:flex;flex-direction:column;width:38px;flex-shrink:0;border-radius:10px;overflow:hidden}
.sc-blue{background:#0a2a5e}
.sc-orange{background:#e8720c}
.sc-ico-cell{height:40px;display:flex;align-items:center;justify-content:center}
.sc-ico-cell + .sc-ico-cell{border-top:3px solid #fff}
.sc-svg{display:block;width:18px;height:18px;fill:#fff}
.sc-txt{display:flex;flex-direction:column}
.sc-info{font-size:12.5px;line-height:1.5;color:#111;min-height:40px}
.sc-info + .sc-info{margin-top:3px}
.sc-mails{color:#0b3d91}
.sc-mail{color:#1a5cc8;text-decoration:underline}
a.sc-mail:hover{color:#0b3d91}
.surat-title{text-align:center;font-size:15px;font-weight:700;letter-spacing:.02em;margin:56px 0 14px;text-decoration:underline}
.s-blok{margin:4px 0 4px 16px}
.s-line{display:flex}
.s-no{display:inline-block;min-width:20px}
.s-k{display:inline-block;min-width:62px}
.s-dev{display:flex;gap:8px;margin:2px 0 2px 16px}
.s-num{flex-shrink:0;min-width:20px}
.surat-ttd{display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px 20px;margin-top:150px;text-align:left}
.ttd-col{min-height:70px}
.sig-nama{font-size:15px}
.sig-blank{color:#999;letter-spacing:2px}
.surat-foot{margin-top:30px;font-size:11px;color:#888;border-top:1px solid #ddd;padding-top:6px}
@media print{
  html,body{margin:0 !important;padding:0 !important;background:#fff !important}
  body.has-surat > *:not(#surat-root){display:none !important}
  #surat-root{position:static;overflow:visible;background:none;padding:0}
  .surat-toolbar{display:none !important}
  .surat-sheet{width:210mm;min-height:296mm;margin:0;box-shadow:none;overflow:visible}
  .surat-sheet,.surat-sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .surat-head,.s-blok,.s-dev,.surat-ttd,.ttd-col{page-break-inside:avoid}
  .surat-sheet p{orphans:3;widows:3}
  .surat-foot{display:none !important}
  @page{size:A4;margin:0}
}
@media (max-width:640px){
  #it-help-fab{right:12px;bottom:12px;padding:11px 14px}
  #it-help-fab .fab-label{display:none}
}
/* Modal lebar utk tabel detail (mis. Fina Penjualan Detail): modal sempit
   480px membuat tabel 9 kolom terjepit. Class dipasang dari JS saat
   modal menampilkan tabel, dilepas saat kembali ke info header. */
.jub-modal.modal-wide{ width:min(1020px,96vw); }
.jub-modal.modal-wide .table-scroll{ margin-top:4px; }
.jub-modal.modal-wide table.data{ min-width:860px; }
.jub-modal.modal-wide table.data th, .jub-modal.modal-wide table.data td{ white-space:nowrap; }
.jub-modal.modal-wide table.data td.wrap{ white-space:normal; min-width:180px; }
/* Label status PPN pada harga history (fina_db.js ppnTag). */
.ppn-tag{ display:inline-block; font-size:10px; padding:1px 8px; border-radius:20px; border:1px solid var(--border-soft); color:var(--text-dim); white-space:nowrap; }
.ppn-tag.incl{ color:#7fd08a; border-color:rgba(127,208,138,.45); }
.ppn-tag.excl{ color:#e8b34b; border-color:rgba(232,179,75,.45); }
@media (max-width:700px){
  .jub-modal.modal-wide{ width:96vw; padding:16px; }
}