/* =====================================================================
   IMIS Laporan SA — Gaya tampilan (diadaptasi dari prototype final)
   ===================================================================== */
:root{
  --color-text-primary:#2A2A1F; --color-text-secondary:#6B6B5A; --color-text-tertiary:#9A9A88;
  --color-background-primary:#FFFFFF; --color-background-secondary:#F4F4EE;
  --color-border-tertiary:#E2E2D8; --color-border-secondary:#C8C8BA;
  --border-radius-md:8px; --border-radius-lg:12px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);background:#EDEDE6;color:var(--color-text-primary);font-size:13px;}
.ti{font-family:"tabler-icons"!important;font-style:normal;}
.muted{color:var(--color-text-secondary);}
.green{color:#085041;}
.center{text-align:center;}
.hint{font-size:11px;color:var(--color-text-secondary);}
code{background:var(--color-background-secondary);padding:1px 5px;border-radius:4px;font-size:12px;}

/* ---- Layar tengah (loading / error / config) ---- */
.center-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;}
.config-card{background:#fff;border:1px solid var(--color-border-tertiary);border-radius:14px;padding:24px;max-width:380px;}
.config-card h2{font-size:18px;margin:8px 0;}
.config-card ol{text-align:left;margin:12px 0;padding-left:20px;line-height:1.9;font-size:13px;}
.spinner{width:34px;height:34px;border:3px solid var(--color-border-tertiary);border-top-color:#1D9E75;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Input & tombol ---- */
.fi{width:100%;background:var(--color-background-secondary);border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:11px 12px;font-size:13px;outline:none;color:var(--color-text-primary);font-family:var(--font-sans);}
.fi:focus{border-color:#1D9E75;}
.btn-primary{width:100%;padding:12px;background:#1D9E75;color:#fff;border:none;border-radius:var(--border-radius-md);font-size:14px;font-weight:600;cursor:pointer;}
.btn-primary:hover{background:#15825F;}
.btn-primary:disabled{opacity:.6;cursor:default;}
.icon-btn{border:none;background:transparent;cursor:pointer;color:var(--color-text-secondary);font-size:18px;}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:#fff;border:1px solid var(--color-border-tertiary);border-radius:18px;padding:30px 24px;width:100%;max-width:360px;text-align:center;}
.login-logo{font-size:32px;}
.login-card h1{font-size:20px;letter-spacing:.5px;margin:6px 0 2px;}
.login-sub{color:var(--color-text-secondary);font-size:12px;margin-bottom:18px;}
.login-card form{display:flex;flex-direction:column;gap:10px;text-align:left;}
.login-err{color:#A32D2D;font-size:12px;}
.login-hint{margin-top:14px;font-size:11px;color:var(--color-text-tertiary);}

/* ---- Phone shell (SA) ---- */
.phone{max-width:420px;margin:0 auto;min-height:100vh;background:var(--color-background-primary);display:flex;flex-direction:column;}
.ph-head{background:var(--color-background-secondary);border-bottom:.5px solid var(--color-border-tertiary);padding:13px 16px;display:flex;align-items:center;gap:10px;}
.ph-head .ph-name{font-size:14px;font-weight:600;}
.ph-head .icon-btn{margin-left:auto;}
.ph-body{flex:1;padding:12px;}
.section-label{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 8px;}
.m3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.mc{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:9px 6px;text-align:center;}
.ml{font-size:11px;color:var(--color-text-secondary);margin-bottom:3px;}
.mv{font-size:14px;font-weight:600;}
.card{background:#fff;border:.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{font-size:10px;font-weight:600;color:var(--color-text-secondary);text-align:left;padding:8px 10px;background:var(--color-background-secondary);border-bottom:.5px solid var(--color-border-tertiary);}
.data-table td{padding:9px 10px;border-bottom:.5px solid var(--color-border-tertiary);font-size:12px;}
.data-table tr:last-child td{border-bottom:none;}
.pill{font-size:10px;font-weight:500;padding:2px 8px;border-radius:99px;}
.pill-ok{background:#E1F5EE;color:#085041;}
.pill-warn{background:#FAEEDA;color:#633806;}

/* ---- Bottom navigation (SA) ---- */
.phone{position:relative;}
.bnav{border-top:.5px solid var(--color-border-tertiary);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 0 8px;background:var(--color-background-primary);position:sticky;bottom:0;}
.nb{border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;color:var(--color-text-secondary);}
.nb.on{color:#085041;}
.nb i{font-size:18px;}
.nb span{font-size:10px;font-weight:500;}

/* ---- Baris transaksi ---- */
.row-line{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:.5px solid var(--color-border-tertiary);}
.row-line:last-child{border-bottom:none;}
.row-line p{font-size:12px;}

/* ---- Tombol ghost & modal ---- */
.btn-ghost{width:100%;padding:11px;background:transparent;border:.5px solid var(--color-border-secondary);color:var(--color-text-primary);border-radius:var(--border-radius-md);font-size:13px;font-weight:500;cursor:pointer;}
/* fixed (bukan absolute): mask & kartu selalu menutup + men-tengah di VIEWPORT.
   Dulu absolute → di halaman panjang (beranda SA) kartu dirender di tengah
   TINGGI HALAMAN, jauh di luar layar — user cuma melihat layar menggelap. */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50;}
.modal-mask[hidden]{display:none;}
.modal-card{background:#fff;border-radius:14px;width:100%;max-width:320px;overflow:hidden;}
.modal-head{background:#FAEEDA;padding:13px 15px;font-size:14px;font-weight:600;color:#633806;}
.tag-area{background:var(--color-background-secondary);border:.5px solid var(--color-border-tertiary);border-radius:6px;padding:3px 9px;font-size:11px;display:inline-block;margin:2px 4px 2px 0;}
.link-back{background:transparent;border:none;color:#085041;cursor:pointer;font-size:13px;font-weight:500;padding:4px 0;margin-bottom:6px;}
.x-btn{border:none;background:transparent;cursor:pointer;color:var(--color-text-secondary);font-size:18px;}
.btn-ghost.act{padding:13px 14px;font-size:13px;}

/* ---- Dashboard Koordinator (dark) ---- */
.kdash{position:fixed;inset:0;background:#0E0E0C;color:#EDEAE0;display:flex;}
.kside{width:230px;flex-shrink:0;background:#1A1714;padding:16px 12px;display:flex;flex-direction:column;border-right:1px solid #2A2620;}
.kbrand{display:flex;gap:8px;align-items:flex-start;padding:8px 8px 14px;border-bottom:1px solid #2A2620;margin-bottom:10px;font-size:18px;}
.kbrand-name{font-size:15px;font-weight:700;color:#fff;}
.kbrand-sub{font-size:11px;color:#a09a8b;margin-top:2px;}
.knav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;border:none;background:transparent;color:#EDEAE0;font-size:13px;font-weight:500;cursor:pointer;width:100%;text-align:left;}
.knav-item.on,.knav-item:hover{background:#22201A;}
.kside-foot{margin-top:auto;padding-top:12px;border-top:1px solid #2A2620;}
.kmain{flex:1;overflow-y:auto;padding:24px 28px;}
.kpage-title{font-size:22px;font-weight:700;color:#fff;}
.kpage-sub{font-size:13px;color:#a09a8b;margin:2px 0 18px;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.kpi-card{background:#1A1714;border:1px solid #2A2620;border-radius:14px;padding:14px 16px;}
.kpi-lbl{font-size:12px;color:#a09a8b;}
.kpi-val{font-size:20px;font-weight:700;color:#fff;margin-top:4px;}
.kpi-val.green{color:#5DD9A0;}
.ksec-hd{font-size:11px;font-weight:600;color:#a09a8b;text-transform:uppercase;letter-spacing:.05em;margin:14px 0 10px;}
.kstore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.kstore-card{background:#1A1714;border:1px solid #2A2620;border-radius:14px;padding:14px 16px;}
.kstore-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.kstore-nm{font-size:14px;font-weight:600;color:#fff;}
.kprogress{margin-top:12px;font-size:11px;color:#a09a8b;margin-bottom:4px;}
.kbar{height:6px;background:#0E0E0C;border-radius:99px;overflow:hidden;border:1px solid #2A2620;}
.kbar>div{height:100%;border-radius:99px;}
.kb-on{background:#15301F;color:#5DD9A0;}
.kb-pr{background:#3A2A0F;color:#F0B25C;}
.kb-nr{background:#3A1818;color:#F08080;}
.kmain .hint{color:#a09a8b;}
.kstore-card.clickable{cursor:pointer;transition:border-color .15s;}
.kstore-card.clickable:hover{border-color:#1D9E75;}
.knav-item{position:relative;}
.knav-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#A32D2D;color:#fff;font-size:10px;font-weight:700;border-radius:99px;min-width:18px;padding:1px 5px;text-align:center;}

/* tabel area */
.karea-tbl{width:100%;border-collapse:collapse;background:#1A1714;border:1px solid #2A2620;border-radius:14px;overflow:hidden;margin-bottom:18px;}
.karea-tbl th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#a09a8b;text-align:left;padding:11px 14px;background:#22201A;border-bottom:1px solid #2A2620;}
.karea-tbl th.num,.karea-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;}
.karea-tbl td{padding:10px 14px;font-size:13px;color:#EDEAE0;border-bottom:1px solid #2A2620;}
.karea-tbl tr:last-child td{border-bottom:none;}
.karea-tbl tbody tr.click{cursor:pointer;}
.karea-tbl tbody tr.click:hover td{background:#1E1A15;}
.karea-tbl tr.kar-grand td{background:#15301F;color:#5DD9A0;font-weight:700;border-top:2px solid #1D9E75;}

/* pill, list, avatar */
.kpill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;display:inline-block;}
.kp-g{background:#15301F;color:#5DD9A0;}.kp-o{background:#3A2A0F;color:#F0B25C;}.kp-r{background:#3A1818;color:#F08080;}
.kpersil-list{background:#1A1714;border:1px solid #2A2620;border-radius:14px;overflow:hidden;}
.kpersil-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #2A2620;}
.kpersil-row:last-child{border-bottom:none;}
.kavt{width:34px;height:34px;border-radius:99px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* form & tombol dark */
.kfi{width:100%;background:#0E0E0C;border:1px solid #2A2620;border-radius:9px;padding:10px 12px;font-size:13px;color:#EDEAE0;outline:none;font-family:inherit;}
.kfi:focus{border-color:#1D9E75;}
.kbtn{width:100%;padding:11px;background:#1D9E75;color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;}
.kbtn:hover{background:#15825F;}
.kalert{background:#2A1414;border:1px solid #4A2424;border-radius:12px;padding:13px 16px;margin-bottom:18px;cursor:pointer;}
.kalert p{color:#F08080;}

/* drawer */
.kdrawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:79;}
.kdrawer{position:fixed;top:0;right:0;width:520px;max-width:92vw;height:100vh;background:#1A1714;border-left:1px solid #2A2620;color:#EDEAE0;z-index:80;overflow-y:auto;padding:22px;}
.kdrawer-close{position:absolute;top:14px;right:14px;border:none;background:transparent;color:#a09a8b;cursor:pointer;font-size:22px;}
.kdrawer h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:2px;}
.kdrawer .ksec-hd{margin-top:16px;}

/* ---- Indikator sync ---- */
.sync-badge{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:999;font-size:12px;font-weight:600;padding:7px 14px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.2);}
.sync-badge.offline{background:#FCEBEB;color:#791F1F;}
.sync-badge.pending{background:#FAEEDA;color:#633806;}

/* ---- Beranda SA lengkap (banner, shortcut, kalender, todo) ---- */
.card-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:.5px solid var(--color-border-tertiary);font-size:12px;font-weight:600;}
/* banner promo */
.banner{position:relative;height:150px;border-radius:var(--border-radius-lg);overflow:hidden;margin-bottom:12px;}
.banner-track{display:flex;height:100%;transition:transform .4s ease;}
.banner-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:flex-end;}
.banner-cap{padding:12px 14px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4);background:linear-gradient(transparent,rgba(0,0,0,.45));width:100%;}
.banner-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:99px;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.banner-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.bdot{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.5);}
.bdot.on{background:#fff;}
/* shortcut */
.info-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.info-card{display:flex;flex-direction:column;gap:4px;height:78px;padding:10px;border-radius:var(--border-radius-md);color:#fff;cursor:pointer;}
.info-card:active{transform:scale(.98);}
/* progress */
.pbar{height:7px;background:var(--color-background-secondary);border-radius:99px;overflow:hidden;}
.pbar>div{height:100%;background:#1D9E75;border-radius:99px;}
/* kalender */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:10px 12px 12px;}
.cal-hd{text-align:center;font-size:10px;color:var(--color-text-secondary);font-weight:600;padding-bottom:2px;}
.cal-c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:7px;background:var(--color-background-secondary);color:var(--color-text-primary);}
.cal-ok{background:#D6F0E6;color:#085041;font-weight:600;}
.cal-off{background:#FCEBEB;color:#A32D2D;font-weight:600;}
.cal-miss{background:#FBE3DD;color:#B45236;}
.cal-today{background:#085041;color:#fff;font-weight:700;}
.cal-weekend{background:transparent;color:#C9C5BD;}
.cal-future{background:transparent;color:#C9C5BD;}
/* kompetitor */
.kita{display:inline-block;background:#1D9E75;color:#fff;font-size:9px;font-weight:600;padding:1px 6px;border-radius:99px;margin-left:4px;vertical-align:middle;}
/* todo */
.todo-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.todo-tag{font-size:10px;font-weight:600;padding:2px 9px;border-radius:99px;}
.kt3{background:#FAEEDA;color:#633806;}
.kt4{background:#EEEDFE;color:#3C3489;}
.kt5{background:#FCEBEB;color:#791F1F;}
.todo:active{background:var(--color-background-secondary);}

/* ---- Kartu Stok fisik (tampilan seperti kartu stok manual) ---- */
.ks-doc{background:#F4EAC6;border:1px solid #C9B884;border-radius:8px;padding:16px 14px;color:#1a1a1a;font-family:Arial,Helvetica,sans-serif;overflow-x:auto;}
.ks-title{text-align:center;font-size:22px;font-weight:800;letter-spacing:.06em;margin-bottom:14px;}
.ks-meta{font-size:13px;font-weight:600;margin-bottom:4px;}
.ks-meta span{font-weight:400;}
.ks-tbl{width:100%;border-collapse:collapse;margin-top:12px;}
.ks-tbl th{background:#E7D7A0;border:1px solid #B19A5C;padding:5px 6px;font-size:11px;font-weight:700;color:#1a1a1a;}
.ks-tbl td{border:1px solid #B19A5C;padding:5px 6px;font-size:11px;text-align:center;color:#1a1a1a;}
.ks-tbl td.l{text-align:left;}
.ks-tbl td.sisa{font-weight:700;}
.ks-tbl td.ks-neg{color:#A32D2D;}

/* ---- Daily Report (preview + export JPG ke WA), gaya Excel ---- */
.rp-doc{background:#fff;color:#1a1a1a;font-family:Arial,Helvetica,sans-serif;font-size:10px;padding:14px;border:1px solid #ccc;border-radius:6px;overflow-x:auto;}
.rp-title{background:#FFF000;color:#1a1a1a;font-weight:700;font-size:12px;padding:3px 8px;display:inline-block;margin-bottom:10px;}
.rp-head{font-size:10px;line-height:1.8;margin-bottom:10px;color:#1a1a1a;}
.rp-tbl,.rp-tbl2{width:100%;border-collapse:collapse;}
.rp-tbl th,.rp-tbl2 th{background:#d9d9d9;border:1px solid #7a7a7a;padding:3px 4px;font-size:9px;font-weight:700;color:#1a1a1a;}
.rp-tbl td,.rp-tbl2 td{border:1px solid #7a7a7a;padding:3px 4px;font-size:9px;text-align:center;color:#1a1a1a;}
.rp-sec{margin-top:12px;border:1px solid #4a4a4a;}
.rp-sec-h{background:#3a3a3a;color:#fff;text-align:center;font-weight:700;font-size:10px;padding:4px;}
.rp-sub-h{background:#bdbdbd;color:#1a1a1a;text-align:center;font-weight:700;font-size:9px;padding:3px;border-top:1px solid #7a7a7a;}

@media (max-width:760px){
  .kside{width:60px;}
  .kbrand-name,.kbrand-sub,.knav-item span{display:none;}
  .knav-item{justify-content:center;font-size:0;}
  .knav-item .ti{font-size:18px;}
  .kpi-grid{grid-template-columns:1fr;}
  .kstore-grid{grid-template-columns:1fr;}
  .kmain{padding:18px 14px;}
}