/* ==========================================================================
   Sistem Monitoring Stok Gudang Material PLTD — ULPL Maumere
   Gaya korporat PLN: biru-putih, tabel padat, rapi.
   ========================================================================== */
:root{
  --blue-900:#062b4d; --blue-800:#083a63; --blue-700:#0a4a7d;
  --blue:#0b5fa5; --blue-500:#1478c4; --blue-100:#e8f1fa; --sky:#00a0df;
  --ink:#12263a; --muted:#5b7089; --line:#dbe4ee; --bg:#f2f5f9; --white:#fff;
  --green:#2e7d32; --green-bg:#e7f5e8; --amber:#b45309; --amber-bg:#fdf3e0;
  --red:#c62828; --red-bg:#fdeaea; --violet:#6d28d9;
  --radius:10px; --gap:20px;
  --shadow:0 1px 2px rgba(16,42,67,.06),0 6px 18px -12px rgba(16,42,67,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.muted-sm{color:var(--muted); font-size:12px}
.muted-xs{color:var(--muted); font-size:11px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}
.ta-r{text-align:right} .ta-c{text-align:center} .nowrap{white-space:nowrap}
.empty{color:var(--muted); font-size:13px; padding:14px; text-align:center; margin:0}
.hint{color:var(--muted); font-size:12px; margin:10px 0 0}
.page-note{
  background:var(--blue-100); border:1px solid #c8e0f3; border-left:4px solid var(--blue);
  padding:11px 14px; border-radius:8px; font-size:13px; margin:0 0 var(--gap); color:#0e3f68;
}

/* ------------------------------- kerangka ------------------------------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:258px; flex:0 0 258px; background:linear-gradient(180deg,var(--blue-800),var(--blue-900));
  color:#dce9f5; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:30;
}
.brand{display:flex; gap:11px; align-items:center; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.12)}
/* logo PLN selalu di atas latar putih agar warna biru logo tetap terbaca */
.brand-logo{
  width:62px; height:36px; border-radius:8px; background:#fff; display:flex;
  align-items:center; justify-content:center; padding:4px 6px; flex:0 0 62px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.brand-logo img{max-width:100%; max-height:100%; display:block}
.login-logo{
  display:inline-flex; align-items:center; justify-content:center; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:10px 16px; box-shadow:var(--shadow);
}
.login-logo img{max-width:190px; height:auto; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1.25}
.brand-text strong{color:#fff; font-size:14px}
.brand-text span{font-size:11px; color:#a9c6e0}
.nav{flex:1; overflow-y:auto; padding:12px 10px}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; color:#cfe2f2;
  font-size:13px; font-weight:500; margin-bottom:2px;
}
.nav-item:hover{background:rgba(255,255,255,.09); text-decoration:none; color:#fff}
.nav-item.is-active{background:var(--blue); color:#fff; box-shadow:inset 3px 0 0 #ffd54a}
.nav-icon{width:18px; text-align:center; opacity:.85}
.nav-sub{padding:2px 0 6px 30px}
.nav-subitem{display:block; padding:6px 10px; font-size:12.5px; color:#a9c6e0; border-radius:7px}
.nav-subitem:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.nav-subitem.is-active{color:#fff; background:rgba(255,255,255,.13)}
.nav-section{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#7fa5c6; padding:16px 12px 6px}
.sidebar-foot{padding:14px; border-top:1px solid rgba(255,255,255,.12)}
.user-mini{display:flex; gap:10px; align-items:center}
.user-mini strong{display:block; color:#fff; font-size:12.5px}
.user-mini span{font-size:11px; color:#a9c6e0}
.user-avatar{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700
}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  background:var(--white); border-bottom:1px solid var(--line); padding:12px 22px;
  display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:20;
}
.topbar-title h1{font-size:18px}
.topbar-title p{margin:2px 0 0; font-size:12px; color:var(--muted)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.scope-chip{
  font-size:11px; font-weight:600; color:var(--blue-700); background:var(--blue-100);
  border:1px solid #c8e0f3; padding:5px 10px; border-radius:20px;
}
.user-chip{display:flex; flex-direction:column; line-height:1.2; text-align:right}
.user-chip strong{font-size:12.5px}
.user-chip span{font-size:11px; color:var(--muted)}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:8px; font-size:16px; padding:5px 9px; cursor:pointer}
.content{padding:22px; max-width:1700px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:var(--gap)}
.foot{padding:18px 22px; color:var(--muted); font-size:11.5px; text-align:center; border-top:1px solid var(--line); background:#fbfdff}

/* ------------------------------- kartu --------------------------------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card-head{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfdff,#f6f9fc); flex-wrap:wrap;
}
.card-head h2{font-size:14px}
.card-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.card-body{padding:16px}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:var(--gap); align-items:start}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap)}
.card-title-ico{color:var(--blue)}

/* --------------------------------- KPI --------------------------------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.kpi{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px;
  border-left:4px solid var(--blue); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px;
}
.kpi-amber{border-left-color:#f59e0b} .kpi-red{border-left-color:var(--red)}
.kpi-green{border-left-color:var(--green)} .kpi-violet{border-left-color:var(--violet)}
.kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600}
.kpi-value{font-size:23px; letter-spacing:-.02em}
.kpi-sub{font-size:11.5px; color:var(--muted)}

/* ---------------------------- aksi cepat ------------------------------ */
.quick-actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.qa{
  display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px solid var(--line);
  border-radius:9px; font-size:13px; font-weight:600; color:var(--ink); background:#fbfdff;
}
.qa:hover{border-color:var(--blue); background:var(--blue-100); text-decoration:none}
.qa span{
  width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:14px; background:var(--blue); flex:0 0 28px;
}
.qa-green span{background:var(--green)} .qa-amber span{background:#f59e0b}
.qa-red span{background:var(--red)} .qa-gray span{background:#64748b} .qa-violet span{background:var(--violet)}

/* ------------------------------- chips -------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  border-radius:20px; padding:6px 13px; font-size:12px; color:var(--muted); box-shadow:var(--shadow);
}
.chip strong{color:var(--ink); font-size:13.5px}
.chip-blue strong{color:var(--blue)} .chip-amber strong{color:var(--amber)}
.chip-red strong{color:var(--red)} .chip-green strong{color:var(--green)}

/* -------------------------------- tabel -------------------------------- */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--white)}
.table-wrap.table-scroll{max-height:520px}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.table th{
  background:#f5f9fd; color:var(--blue-800); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap;
}
.table td{padding:9px 10px; border-bottom:1px solid #eef3f8; vertical-align:top}
.table tbody tr:hover{background:#f9fcff}
.table tbody tr:last-child td{border-bottom:none}
.table-dense th{padding:7px 9px} .table-dense td{padding:7px 9px; font-size:12.5px}
.table-sticky thead th{position:sticky; top:0; z-index:2}
.table-mini td,.table-mini th{font-size:11.5px; padding:5px 7px}
.table tfoot th{background:#f5f9fd; font-size:12px}

/* ------------------------------- badge --------------------------------- */
.badge{
  display:inline-block; padding:2.5px 9px; border-radius:20px; font-size:11px; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.badge-ok{background:var(--green-bg); color:#1b5e20; border-color:#bfe3c1}
.badge-warn{background:var(--amber-bg); color:#8a4b00; border-color:#f5d9a8}
.badge-danger{background:var(--red-bg); color:#9b1c1c; border-color:#f3c2c2}
.badge-info{background:var(--blue-100); color:#0a4a7d; border-color:#c3ddf2}
.badge-plain{background:#eef2f6; color:#455a70; border-color:#dbe4ee}

/* ------------------------------ tombol --------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center; border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:600; border:1px solid transparent; cursor:pointer;
  font-family:inherit; line-height:1.2; white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-700)}
.btn-outline{background:#fff; color:var(--blue); border-color:#c3ddf2}
.btn-outline:hover{background:var(--blue-100)}
.btn-ghost{background:#f2f6fa; color:var(--ink); border-color:var(--line)}
.btn-danger{background:var(--red); color:#fff; border-color:var(--red)}
.btn-sm{padding:6px 11px; font-size:12px}
.btn-xs{padding:4px 9px; font-size:11.5px; border-radius:6px}
.btn-block{width:100%}
.inline{display:inline-flex; gap:6px; align-items:center; margin:0}
.input-xs{padding:4px 7px; font-size:11.5px; border:1px solid var(--line); border-radius:6px; width:110px; font-family:inherit}

/* ------------------------------- filter -------------------------------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.filter-bar label{display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.filter-bar .grow{flex:1; min-width:190px}
input,select,textarea{
  font-family:inherit; font-size:13px; color:var(--ink); padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:#fff; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(20,120,196,.15)}
input:disabled,select:disabled{background:#f4f7fa; color:var(--muted)}

/* -------------------------------- form --------------------------------- */
.form{display:flex; flex-direction:column; gap:14px}
.form label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:#2c4358}
.form label.check{flex-direction:row; align-items:center; gap:8px; font-weight:500}
.form label.check input{width:auto}
.form-grid .row-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.form-grid .row-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; padding-top:4px}
.form .pw{border-top:1px dashed var(--line); padding-top:12px}
.stock-hint{
  background:var(--blue-100); border:1px solid #c8e0f3; border-radius:8px; padding:10px 12px;
  font-size:12.5px; color:#0e3f68;
}
.card-form{max-width:1050px}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.info-grid > div{background:#f9fcff; border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.info-grid span{display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px}
.info-grid strong{font-size:13px}

/* -------------------------------- modal -------------------------------- */
.modal{
  border:none; border-radius:12px; padding:0; width:min(560px,94vw); box-shadow:0 24px 60px -20px rgba(6,43,77,.45);
}
.modal::backdrop{background:rgba(6,43,77,.45)}
.modal .form{padding:20px}
.modal h3{font-size:16px; margin-bottom:6px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; padding-top:4px}

/* ------------------------------- chart --------------------------------- */
.chart{width:100%; height:auto; display:block}
.axis{font-size:11px; fill:var(--muted)}
.bar-label{font-size:11.5px; fill:#2c4358; font-weight:600}
.bar-value{font-size:11.5px; fill:var(--blue-700); font-weight:700}
.donut-wrap{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.donut{width:200px; height:200px; flex:0 0 200px}
.donut-total{font-size:11px; fill:var(--muted)}
.donut-value{font-size:15px; font-weight:700; fill:var(--blue-800)}
.donut-legend-wrap{flex:1; min-width:190px; display:flex; flex-direction:column; gap:9px}
.donut-legend{display:flex; align-items:center; gap:8px; font-size:12.5px}
.donut-legend strong{margin-left:auto; color:var(--blue-800)}

/* ------------------------------ pagination ----------------------------- */
.pagination{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.pg{
  padding:6px 11px; border:1px solid var(--line); border-radius:7px; font-size:12.5px;
  background:#fff; color:var(--ink);
}
.pg.is-active{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700}
.pg.disabled{color:#b0bfcd; background:#f7f9fb}
.pg.dots{border:none; background:none}

/* ---------------------------- report cards ----------------------------- */
.report-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.report-card{
  display:flex; flex-direction:column; gap:5px; padding:15px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); color:var(--ink);
}
.report-card:hover{border-color:var(--blue); background:#fbfdff; text-decoration:none; transform:translateY(-1px)}
.report-card strong{font-size:13.5px}
.rc-ico{
  width:32px;height:32px;border-radius:8px;background:var(--blue-100);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:3px
}

/* -------------------------------- login -------------------------------- */
.login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px;
  background:
    radial-gradient(900px 500px at 12% 8%,rgba(0,160,223,.20),transparent),
    radial-gradient(700px 480px at 92% 92%,rgba(11,95,165,.22),transparent),
    linear-gradient(160deg,#f4f8fc,#e7f0f9);
}
.login-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; max-width:1020px; width:100%; align-items:center}
.login-hero h1{font-size:29px; color:var(--blue-900); margin:16px 0 10px; line-height:1.2}
.login-hero p{color:#3f5b76; font-size:14px; max-width:520px}
.login-hero ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.login-hero li{position:relative; padding-left:24px; font-size:13px; color:#2c4358}
.login-hero li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800}
.login-card{padding:26px}
.login-card h2{font-size:19px; margin-bottom:4px}
.login-card .form{margin-top:16px}
.demo{margin-top:18px; border-top:1px solid var(--line); padding-top:12px}
.demo summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--blue)}
.demo .table{margin-top:10px}

/* ------------------------------ dokumen -------------------------------- */
.doc-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.doc-sheet{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:34px 38px; max-width:1000px; margin:0 auto; width:100%;
}
.doc-kop{display:flex; gap:18px; align-items:center; border-bottom:2.5px solid var(--blue-800); padding-bottom:12px}
.doc-logo{width:132px; height:auto; display:block; flex:0 0 auto}
.doc-kop-teks{flex:1}
.doc-pt{font-weight:800; font-size:15px; color:var(--blue-900)}
.doc-unit{font-size:11.5px; color:var(--muted)}
.doc-ulpl{font-size:13px; font-weight:700; color:var(--blue-800)}
.doc-alamat{font-size:11px; color:var(--muted)}
.doc-judul{text-align:center; font-size:15px; margin:20px 0 4px; text-decoration:underline; letter-spacing:.02em}
.doc-nomor{text-align:center; font-size:12.5px; margin-bottom:16px}
.doc-info{width:100%; border-collapse:collapse; margin-bottom:16px; font-size:12.5px}
.doc-info .k{width:190px; color:var(--muted)}
.doc-table{width:100%; border:1px solid var(--line); font-size:12.5px}
.doc-table th,.doc-table td{border-bottom:1px solid var(--line)}
.doc-catatan{font-size:12.5px; margin-top:12px}
.doc-sign{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; text-align:center; font-size:12px}
.doc-sign span{display:block; color:var(--muted)}
.sign-space{height:62px; border-bottom:1px solid #8fa6bb; margin:6px 18px 6px}
.flash{
  border-radius:9px; padding:11px 14px; font-size:13px; display:flex; gap:10px; align-items:center;
  border:1px solid transparent;
}
.flash-success{background:var(--green-bg); border-color:#bfe3c1; color:#1b5e20}
.flash-error{background:var(--red-bg); border-color:#f3c2c2; color:#9b1c1c}
.flash-close{margin-left:auto; background:none; border:none; font-size:16px; cursor:pointer; color:inherit}

/* ------------------------------ responsif ------------------------------ */
@media (max-width:1080px){
  .login-wrap{grid-template-columns:1fr}
  .login-hero{text-align:center} .login-hero ul{align-items:center} .login-hero li{text-align:left}
}
@media (max-width:900px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:8px 0 30px -10px rgba(6,43,77,.5)}
  .sidebar.open{transform:translateX(0)}
  .burger{display:inline-block}
  .content{padding:16px}
  .topbar{padding:10px 14px}
  .topbar-right .user-chip{display:none}
  .grid-2{grid-template-columns:1fr}
  .doc-sheet{padding:20px}
}
@media (max-width:640px){
  .kpi-value{font-size:20px}
  .table{font-size:12px}
  .scope-chip{display:none}
}

/* -------------------------------- cetak -------------------------------- */
@media print{
  .sidebar,.topbar,.foot,.no-print,.flash{display:none !important}
  body{background:#fff}
  .content{padding:0; gap:0}
  .doc-sheet{border:none; box-shadow:none; padding:0; max-width:none}
  .card{box-shadow:none; border-color:#cbd6e2}
  .main{width:100%}
  @page{size:A4; margin:14mm}
}

/* --------------------- dialog hapus & tombol bahaya -------------------- */
.info-grid-1{grid-template-columns:1fr; gap:10px; margin-bottom:4px}
.modal .info-grid > div{background:#f7fafd}
.modal .muted-sm{margin-bottom:6px; line-height:1.45}

/* -------------------------- zona berbahaya ----------------------------- */
.card-danger{border-color:#f0c4c4}
.card-danger .card-head{background:linear-gradient(180deg,#fdf3f3,#fbeaea)}
.card-danger .card-head h2{color:#9b1c1c}
.card-danger code{background:#fdeaea; color:#9b1c1c; padding:1px 6px; border-radius:5px; font-weight:700}