@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── TEMA ── */
:root{
  --bg:#f5f3ef;--s1:#ffffff;--s2:#fafaf8;--s3:#f0ede8;
  --border:#e2ddd6;--border2:#cdc7bc;
  --text:#1a1714;--text2:#6b6560;--text3:#a09890;
  --acc:#c9a030;--acc2:#b08828;--acc-bg:#fdf6e3;
  --red:#d94f4f;--green:#2d9e5f;--blue:#2d7fc9;--orange:#c97320;--purple:#7c4fd4;
  --r:10px;--rl:14px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
}
[data-theme="dark"]{
  --bg:#0c0c0b;--s1:#141413;--s2:#1c1c1a;--s3:#242422;
  --border:#2e2e2b;--border2:#3a3a36;
  --text:#f0ede6;--text2:#a09890;--text3:#5a5650;
  --acc:#e8c96a;--acc2:#c9a840;--acc-bg:rgba(232,201,106,.08);
  --red:#e86a6a;--green:#6ae8a0;--blue:#6ab4e8;--orange:#e8956a;--purple:#b46ae8;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);
}

html,body{font-family:'Geist',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .2s,color .2s}

/* TOPBAR */
.topbar{display:flex;align-items:center;border-bottom:1px solid var(--border);background:var(--s1);height:52px;padding:0 20px;position:sticky;top:0;z-index:100;gap:4px;box-shadow:var(--shadow)}
.logo{font-family:'Instrument Serif',serif;font-size:20px;color:var(--text);margin-right:20px;flex-shrink:1;text-decoration:none;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo span{color:var(--acc)}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto}
.nav-btn{padding:6px 13px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;transition:all .15s;white-space:nowrap}
.nav-btn:hover{background:var(--s3);color:var(--text)}
.nav-btn.active{background:var(--s3);color:var(--text)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.user-chip{display:flex;align-items:center;gap:7px;background:var(--s3);border:1px solid var(--border);border-radius:20px;padding:3px 12px 3px 4px}
.uc-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.uc-name{font-size:12px;font-weight:500;line-height:1.2;color:var(--text)}
.uc-role{font-size:10px;color:var(--text3)}
.btn-sm{padding:5px 11px;border-radius:7px;font-size:12px;font-weight:500;border:1px solid var(--border2);background:var(--s3);color:var(--text2);cursor:pointer;text-decoration:none;transition:all .15s;font-family:'Geist',sans-serif}
.btn-sm:hover{color:var(--text);border-color:var(--text2)}

/* THEME TOGGLE */
.theme-toggle{width:32px;height:32px;border-radius:8px;background:var(--s3);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .15s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--border2)}

/* PAGE */
.page-wrap{padding:24px;max-width:1400px;margin:0 auto}
.page-title{font-family:'Instrument Serif',serif;font-size:26px;font-weight:400;color:var(--text)}
.page-title em{color:var(--acc);font-style:italic}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}

/* BUTTONS */
.btn{padding:7px 15px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--border2);background:var(--s2);color:var(--text2);cursor:pointer;transition:all .15s;font-family:'Geist',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--s3);color:var(--text);border-color:var(--border2)}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-acc{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-acc:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
.btn-acc:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-red{background:rgba(217,79,79,.08);color:var(--red);border-color:rgba(217,79,79,.2)}
.btn-red:hover{background:rgba(217,79,79,.15)}
.btn-icon{width:30px;height:30px;padding:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.android-print-button,.eppos-print-button{display:none}
[data-theme="dark"] .btn-acc{color:#0c0c0b}
[data-theme="dark"] .btn-acc:hover{color:#0c0c0b}

/* FORM */
.form-row{margin-bottom:13px}
.form-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;display:block;letter-spacing:.01em}
.form-input,.form-select,.form-textarea{width:100%;background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;font-family:'Geist',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(201,160,48,.12)}
[data-theme="dark"] .form-input:focus,[data-theme="dark"] .form-select:focus,[data-theme="dark"] .form-textarea:focus{box-shadow:0 0 0 3px rgba(232,201,106,.12)}
.form-textarea{resize:vertical;min-height:70px}
.form-select{cursor:pointer}
option{background:var(--s2)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-size:11px;color:var(--text3);font-weight:400}
.form-check{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s3);cursor:pointer}
.form-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--acc);flex-shrink:0;margin-top:2px}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.stat-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;font-weight:600}
.stat-val{font-family:'Geist Mono',monospace;font-size:28px;font-weight:500;color:var(--text);line-height:1}
.stat-sub{font-size:11px;color:var(--text2);margin-top:4px;display:flex;align-items:center;gap:4px}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* 3 KOLOM */
.dash-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}
.col3-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow)}
.col3-head{padding:12px 15px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.col3-body{max-height:320px;overflow-y:auto}
.col3-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);gap:8px}
.col3-row:last-child{border-bottom:none}

/* FILTER */
.filter-section{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.filter-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.filter-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.filter-btn{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--s2);color:var(--text3);cursor:pointer;font-family:'Geist',sans-serif;transition:all .15s;white-space:nowrap}
.filter-btn:hover{color:var(--text2);border-color:var(--border2)}
.filter-btn.active{background:var(--acc-bg);color:var(--acc);border-color:var(--acc)}

/* ROLE-FOCUSED WORKSPACE */
.focus-summary{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.focus-summary.two{grid-template-columns:repeat(2,minmax(150px,1fr))}
.focus-stat{min-height:72px;padding:11px 14px;border:1px solid var(--border);border-radius:8px;background:var(--s1);color:var(--text);font-family:'Geist',sans-serif;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.focus-stat:hover{background:var(--s2);border-color:var(--border2)}
.focus-stat.active{border-color:var(--acc);background:var(--acc-bg)}
.focus-stat-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);line-height:1.35}
.focus-stat.active .focus-stat-label{color:var(--acc)}
.focus-stat strong{font-family:'Geist Mono',monospace;font-size:27px;font-weight:600;color:var(--text)}
.focus-action{font-size:11px;padding:5px 9px;white-space:nowrap}
.focus-add-fab{display:none}

/* TABLE */
.data-table{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;width:100%;box-shadow:var(--shadow)}
.data-table table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);background:var(--s2);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:var(--text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background .12s;cursor:pointer}
.data-table tbody tr:hover{background:var(--s3)}
.empty-row{padding:32px;text-align:center;color:var(--text3);font-size:13px}
.td-proj{font-weight:500;color:var(--text)}
.td-sub{font-size:11px;color:var(--text3);margin-top:2px}
.td-actions{display:flex;gap:5px}

/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.02em}
.badge-brief{background:rgba(160,152,144,.15);color:var(--text2);border:1px solid var(--border2)}
.badge-desain{background:rgba(124,79,212,.1);color:var(--purple);border:1px solid rgba(124,79,212,.2)}
.badge-proses{background:rgba(201,160,48,.12);color:var(--acc);border:1px solid rgba(201,160,48,.25)}
.badge-review{background:rgba(201,160,48,.12);color:var(--acc);border:1px solid rgba(201,160,48,.25)}
.badge-produksi{background:rgba(45,127,201,.1);color:var(--blue);border:1px solid rgba(45,127,201,.2)}
.badge-selesai{background:rgba(45,158,95,.1);color:var(--green);border:1px solid rgba(45,158,95,.2)}
[data-theme="dark"] .badge-brief{background:rgba(90,86,80,.3);color:var(--text3);border-color:var(--border)}
[data-theme="dark"] .badge-desain{background:rgba(180,106,232,.12);color:#b46ae8;border-color:rgba(180,106,232,.2)}
[data-theme="dark"] .badge-proses{background:rgba(232,201,106,.12);color:#e8c96a;border-color:rgba(232,201,106,.2)}
[data-theme="dark"] .badge-produksi{background:rgba(106,180,232,.12);color:#6ab4e8;border-color:rgba(106,180,232,.2)}
[data-theme="dark"] .badge-selesai{background:rgba(106,232,160,.12);color:#6ae8a0;border-color:rgba(106,232,160,.2)}

.role-badge{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;white-space:nowrap}
.rb-superadmin{background:rgba(217,79,79,.1);color:var(--red);border:1px solid rgba(217,79,79,.25)}
.rb-admin{background:rgba(201,160,48,.12);color:var(--acc);border:1px solid rgba(201,160,48,.25)}
.rb-desainer{background:rgba(45,158,95,.1);color:var(--green);border:1px solid rgba(45,158,95,.2)}
.rb-operator{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.rb-produksi{background:rgba(45,127,201,.1);color:var(--blue);border:1px solid rgba(45,127,201,.2)}
.rb-finishing{background:rgba(124,79,212,.1);color:var(--purple);border:1px solid rgba(124,79,212,.2)}
[data-theme="dark"] .rb-superadmin{background:rgba(232,106,106,.15);color:#e86a6a;border-color:rgba(232,106,106,.3)}
[data-theme="dark"] .rb-admin{background:rgba(232,201,106,.15);color:#e8c96a;border-color:rgba(232,201,106,.25)}
[data-theme="dark"] .rb-desainer{background:rgba(106,232,160,.15);color:#6ae8a0;border-color:rgba(106,232,160,.25)}
[data-theme="dark"] .rb-operator{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.25)}
[data-theme="dark"] .rb-produksi{background:rgba(106,180,232,.15);color:#6ab4e8;border-color:rgba(106,180,232,.25)}
[data-theme="dark"] .rb-finishing{background:rgba(180,106,232,.15);color:#b46ae8;border-color:rgba(180,106,232,.25)}

/* DEADLINE */
.dl-red{color:var(--red)!important;font-weight:600}
.dl-orange{color:var(--orange)!important;font-weight:600}
.dl-normal{color:var(--text2)}
.dl-done{color:var(--text3)}

/* STATUS BADGE IN DETAIL (clickable) */
.status-change-wrap{position:relative;display:inline-block}
.status-clickable-detail{cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:2px 4px;border-radius:6px;transition:background .15s}
.status-clickable-detail:hover{background:var(--s3)}
.status-clickable-detail .arrow{font-size:10px;color:var(--text3);font-weight:400}

/* STATUS DROPDOWN POPUP — fixed position via JS */
.status-dd-popup{position:fixed;background:var(--s1);border:1px solid var(--border2);border-radius:10px;z-index:9999;overflow:hidden;min-width:140px;box-shadow:0 8px 30px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08)}
[data-theme="dark"] .status-dd-popup{box-shadow:0 8px 30px rgba(0,0,0,.5)}
.status-opt{padding:9px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s;color:var(--text2);display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:none;font-family:'Geist',sans-serif;text-align:left}
.status-opt:hover:not(:disabled){background:var(--s3);color:var(--text)}
.status-opt.is-current{color:var(--text);background:var(--acc-bg)}
.status-opt:disabled,.status-opt.disabled-opt{opacity:.3;cursor:not-allowed}

/* SPK */
.spk-zone{border:2px dashed var(--border2);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:all .15s;background:var(--s3);position:relative;min-height:70px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.spk-zone:hover,.spk-zone.drag{border-color:var(--acc);background:var(--acc-bg)}
.spk-zone.has-img{padding:0;border-color:var(--border);cursor:default}
.spk-zone.has-img img{width:100%;max-height:200px;object-fit:contain;border-radius:6px;display:block}
.spk-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2;opacity:.85}
.spk-del:hover{opacity:1}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.7)}
.modal-overlay.open{display:flex}
.modal{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);padding:24px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15)}
[data-theme="dark"] .modal{box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-title{font-family:'Instrument Serif',serif;font-size:22px;color:var(--text);margin-bottom:16px;font-weight:400}
.modal-footer{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.detail-field{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.detail-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px;font-weight:600}
.detail-val{font-size:13px;font-weight:500;color:var(--text)}

/* LIGHTBOX */
#lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9998;align-items:center;justify-content:center;cursor:zoom-out}
#lightbox.open{display:flex}
#lightbox img{max-width:95vw;max-height:92vh;object-fit:contain;border-radius:8px}
#lb-close{position:fixed;top:16px;right:20px;font-size:28px;color:#fff;cursor:pointer;z-index:9999;opacity:.8;line-height:1;background:none;border:none}
#lb-close:hover{opacity:1}

/* NOTIF */
.notif{position:fixed;bottom:20px;right:20px;background:var(--s1);border:1px solid var(--border2);border-radius:var(--r);padding:10px 16px;font-size:13px;color:var(--text);transform:translateY(80px);opacity:0;transition:all .3s;z-index:9997;max-width:300px;pointer-events:none;box-shadow:var(--shadow)}
.notif.show{transform:translateY(0);opacity:1}

.connection-banner{position:fixed;top:64px;left:20px;right:20px;z-index:9996;display:none;align-items:center;justify-content:space-between;gap:14px;background:var(--s1);border:1px solid rgba(217,79,79,.35);border-left:4px solid var(--red);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.connection-banner.show{display:flex}
.connection-banner-title{font-size:13px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.connection-banner-text{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.45}
.connection-banner-time{font-family:'Geist Mono',monospace;font-size:12px;color:var(--acc);white-space:nowrap}
@media(max-width:768px){.connection-banner{top:58px;left:12px;right:12px;align-items:flex-start;flex-direction:column;gap:5px}}

/* DASHBOARD BAR */
.bar-wrap{height:5px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:5px}
.bar-fill{height:100%;border-radius:4px;transition:width .5s}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.login-box{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:36px 32px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
[data-theme="dark"] .login-box{box-shadow:0 4px 24px rgba(0,0,0,.4)}
.login-logo{font-family:'Instrument Serif',serif;font-size:28px;color:var(--text);text-align:center;margin-bottom:4px}
.login-logo span{color:var(--acc)}
.login-sub{font-size:13px;color:var(--text3);text-align:center;margin-bottom:28px}
.login-btn{width:100%;padding:11px;border-radius:10px;font-size:14px;font-weight:600;background:var(--acc);color:#fff;border:none;cursor:pointer;font-family:'Geist',sans-serif;transition:background .15s}
.login-btn:hover{background:var(--acc2)}
[data-theme="dark"] .login-btn{color:#0c0c0b}
.login-err{background:rgba(217,79,79,.08);border:1px solid rgba(217,79,79,.2);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:16px}

/* RESPONSIVE */
@media(max-width:900px){.dash-3col{grid-template-columns:1fr}}
@media(max-width:600px){.form-grid-2{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ═══════════════════════════════════
   BOTTOM NAV — Mobile only (≤ 768px)
   ═══════════════════════════════════ */
.bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {

  .android-print-button,
  .eppos-print-button { display: inline-flex; }

  /* Sembunyikan topbar nav links di mobile, tapi tetap tampilkan logo + right */
  .topbar .nav { display: none; }
  .topbar { height: 48px; padding: 0 14px; }
  .topbar .logo { font-size: 17px; margin-right: 8px; max-width: calc(100vw - 84px); }
  .user-chip { display: none; } /* chip dipindah ke more-menu */
  .btn-sm { display: none; }    /* keluar dipindah ke more-menu */

  /* Page wrap beri padding bawah agar konten tidak ketutup bottom nav */
  .page-wrap { padding: 16px 14px 80px; }

  /* ── BOTTOM NAV ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: var(--s1);
    border-top: 1px solid var(--border);
    z-index: 110;
    align-items: stretch;
    /* Safe area untuk notch/home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  }
  [data-theme="dark"] .bottom-nav {
    box-shadow: 0 -2px 12px rgba(0,0,0,.3);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text3);
    cursor: pointer;
    transition: color .15s, background .15s;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding: 6px 4px;
  }
  .bottom-nav-item:hover,
  .bottom-nav-item.active {
    color: var(--acc);
  }
  /* Active indicator bar */
  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--acc);
    border-radius: 0 0 3px 3px;
  }
  .bni-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
  }
  .bni-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
  }

  /* ── MORE MENU ── */
  .more-menu-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 115;
    backdrop-filter: blur(2px);
  }
  .more-menu-overlay.open { display: block; }

  .more-menu {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--s1);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: 120;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  .more-menu.open { transform: translateY(0); }

  .more-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text2);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .more-menu-item:hover { background: var(--s3); color: var(--text); }
  .more-menu-item span { font-size: 18px; }

  .dash-mobile-table {
    overflow: hidden;
  }
  .dash-mobile-table table,
  .dash-mobile-table thead,
  .dash-mobile-table tbody,
  .dash-mobile-table tr,
  .dash-mobile-table td {
    width: auto;
  }
  .dash-mobile-table table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }
  .dash-mobile-table thead { display: table-header-group; }
  .dash-mobile-table tbody { display: table-row-group; }
  .dash-mobile-table tr { display: table-row; }
  .dash-mobile-table th {
    font-size: 8px;
    letter-spacing: .02em;
    padding: 7px 3px;
    white-space: normal;
  }
  .dash-mobile-table td {
    display: table-cell;
    padding: 8px 3px;
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .dash-mobile-table td:nth-child(1),
  .dash-mobile-table th:nth-child(1) { width: 29%; }
  .dash-mobile-table td:nth-child(2),
  .dash-mobile-table th:nth-child(2) { width: 14%; }
  .dash-mobile-table td:nth-child(3),
  .dash-mobile-table th:nth-child(3) { width: 12%; }
  .dash-mobile-table td:nth-child(4),
  .dash-mobile-table th:nth-child(4) { width: 15%; }
  .dash-mobile-table td:nth-child(5),
  .dash-mobile-table th:nth-child(5) { width: 17%; }
  .dash-mobile-table td:nth-child(6),
  .dash-mobile-table th:nth-child(6) { width: 13%; }
  .dash-mobile-table .td-proj {
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 10px;
    line-height: 1.2;
  }
  .dash-mobile-table .td-sub { font-size: 9px; }
  .dash-mobile-table .badge {
    font-size: 9px;
    padding: 2px 5px;
    white-space: normal;
  }
  .dash-mobile-table .empty-row {
    display: table-cell;
    padding: 24px 12px;
    text-align: center;
  }
  .dash-mobile-table .empty-row::before { content: none; }

  .order-mobile-table {
    overflow: hidden;
  }
  .order-mobile-table table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }
  .order-mobile-table thead { display: table-header-group; }
  .order-mobile-table tbody { display: table-row-group; }
  .order-mobile-table tr { display: table-row; }
  .order-mobile-table th {
    font-size: 8px;
    letter-spacing: .02em;
    padding: 7px 2px;
    white-space: normal;
  }
  .order-mobile-table td {
    display: table-cell;
    padding: 8px 2px;
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .order-mobile-table td:nth-child(1),
  .order-mobile-table th:nth-child(1) { width: 24%; }
  .order-mobile-table td:nth-child(2),
  .order-mobile-table th:nth-child(2) { width: 13%; }
  .order-mobile-table td:nth-child(3),
  .order-mobile-table th:nth-child(3) { width: 11%; }
  .order-mobile-table td:nth-child(4),
  .order-mobile-table th:nth-child(4) { width: 14%; }
  .order-mobile-table td:nth-child(5),
  .order-mobile-table th:nth-child(5) { width: 15%; }
  .order-mobile-table td:nth-child(6),
  .order-mobile-table th:nth-child(6) { width: 11%; }
  .order-mobile-table td:nth-child(7),
  .order-mobile-table th:nth-child(7) { width: 12%; }
  .order-mobile-table .td-proj {
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .order-mobile-table .td-sub { font-size: 9px; }
  .order-mobile-table .badge {
    font-size: 9px;
    padding: 2px 5px;
    white-space: normal;
  }
  .order-mobile-table .td-actions {
    gap: 2px;
    flex-wrap: nowrap;
  }
  .order-mobile-table .btn-icon {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .order-mobile-table .empty-row {
    display: table-cell;
    padding: 24px 12px;
    text-align: center;
  }

  .focus-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
  .focus-summary.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus-stat{min-height:58px;padding:8px;display:block;text-align:center}
  .focus-stat-label{display:block;font-size:8px;min-height:22px}
  .focus-stat strong{display:block;font-size:21px;margin-top:2px}
  .focus-workspace .order-mobile-table td:nth-child(1),
  .focus-workspace .order-mobile-table th:nth-child(1){width:22%}
  .focus-workspace .order-mobile-table td:nth-child(7),
  .focus-workspace .order-mobile-table th:nth-child(7){width:14%}
  .focus-workspace .focus-action{font-size:9px;padding:4px 5px;white-space:normal;line-height:1.05;text-align:center}
  .focus-add-desktop{display:none}
  .focus-add-fab{position:fixed;right:18px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:109;width:54px;height:54px;border:0;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-size:30px;font-weight:400;line-height:1;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.24);-webkit-tap-highlight-color:transparent}
  [data-theme="dark"] .focus-add-fab{color:#0c0c0b}
  .focus-add-fab:active{transform:scale(.94)}

  /* Sembunyikan bottom-nav item "Lainnya" jika menu yang perlu disembunyikan tidak ada */
  #btn-more-nav { display: flex; }
}

/* Desktop: sembunyikan elemen mobile */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
  .more-menu  { display: none !important; }
  .more-menu-overlay { display: none !important; }
}

/* Print - sembunyikan elemen UI saat print */
@media print {
  .topbar, .bottom-nav, .more-menu, .more-menu-overlay,
  .notif, .connection-banner, #lightbox, .modal-overlay { display: none !important; }
  .page-wrap { padding: 0 !important; }
}