/* Master Part v8.0 — tema kerja profesional, responsif PC / laptop / HP */
:root{
  --bg:#eef1f5;
  --surface:#ffffff;
  --ink:#1f2933;
  --muted:#64748b;
  --line:#dbe2ea;
  --side:#1b2735;
  --side-2:#243447;
  --accent:#0f766e;
  --accent-dark:#0b5f59;
  --danger:#b42318;
  --radius:10px;
  --topbar-h:50px;
  --side-w:248px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.55;
}
a{color:var(--accent)}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* Popup form: area isi selalu bisa scroll + footer Simpan menempel terlihat */
.modal-dialog-scrollable .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-dialog-scrollable .modal-footer{position:sticky;bottom:0;background:var(--surface,#fff);z-index:10;border-top:1px solid var(--line,#dbe2ea)}
/* Semua popup tambah/ubah memakai pola <form> pembungkus body+footer: jadikan
   form kolom flex agar modal-body mendapat batas tinggi & scroll-nya hidup.
   Tanpa ini body tumbuh melewati popup dan baris bawah terpotong TANPA scroll. */
.modal-dialog-scrollable .modal-content > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%}
.modal-dialog-scrollable .modal-content > form > .modal-body{flex:1 1 auto;min-height:0}
.modal-dialog-scrollable .modal-content > form > .modal-footer{flex:0 0 auto}
/* Daftar Part popup Input Part Order: scroll mandiri agar di layar kecil
   tetap bisa tambah banyak baris (tombol + Tambah selalu terlihat di bawahnya) */
#addModal .part-rows{max-height:min(44vh,400px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:1px solid var(--line,#dbe2ea);border-radius:8px;padding:8px;background:var(--bg,#f8fafc)}
#addModal .part-rows .part-row:last-child{margin-bottom:0 !important}
#addModal .part-addbar{position:sticky;bottom:0;background:var(--surface,#fff);padding:6px 0 2px;z-index:5}
/* Dropdown hasil live-search part: melayang (fixed) mengikuti kolom input agar
   tidak terpotong area scroll .part-rows di layar kecil */
#addModal .pn-list, #editModal .pn-list{position:fixed;z-index:1080;right:auto}
.content{padding:14px 16px;width:100%;margin:0;flex:1}
.page-head{display:flex;align-items:baseline;gap:2px 10px;flex-wrap:wrap;margin:0 0 8px}
.page-head h1{font-size:15px;margin:0;font-weight:650;white-space:nowrap}
.page-head p{margin:0;color:var(--muted);font-size:11.5px}
/* Toolbar modul (baris tombol + filter di atas tabel): ringkas agar muat sebaris di laptop */
.content > .d-flex.flex-wrap{gap:.4rem !important;margin-bottom:.65rem !important}
.content > .d-flex.flex-wrap .btn{padding:.3rem .7rem;font-size:.82rem}
.content > .d-flex.flex-wrap .btn-sm{padding:.25rem .55rem;font-size:.78rem}
.content > .d-flex.flex-wrap .form-control,.content > .d-flex.flex-wrap .form-select{padding:.3rem .6rem;font-size:.82rem;min-height:0}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--side);color:#cbd5e1;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:1040;
  transition:flex-basis .22s ease,width .22s ease,opacity .18s ease;
  overflow:hidden;
}
/* Desktop: sembunyikan sidebar (konten melebar penuh); status di body.side-hidden,
   dipulihkan via localStorage sebelum render (anti kedip). Mobile tak terpengaruh
   (drawer memakai transform, bukan flex-basis). */
body.side-hidden .sidebar{flex-basis:0;width:0;opacity:0;pointer-events:none;border-left:none}
body.side-hidden .sidebar *{visibility:hidden}
/* Tombol toggle sidebar di topbar (hanya desktop) */
.side-toggle{
  display:none;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 32px;border:1px solid var(--line);background:#fff;
  border-radius:8px;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,transform .22s ease;
}
.side-toggle svg{width:15px;height:15px}
.side-toggle:hover{border-color:var(--accent);color:var(--accent-dark)}
body.side-hidden .side-toggle{transform:scaleX(-1);color:var(--accent-dark);border-color:var(--accent)}
@media (min-width:992px){
  .side-toggle{display:inline-flex}
}
.brand{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{
  width:38px;height:38px;border-radius:8px;flex:0 0 38px;
  background:var(--accent);color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;letter-spacing:.5px;
}
.brand-name{color:#fff;font-weight:650;font-size:15px;line-height:1.2}
.brand-name small{display:block;color:#94a3b8;font-weight:400;font-size:11px}
.side-nav{flex:1;overflow-y:auto;padding:10px 10px 16px}
.side-sec{font-size:10.5px;letter-spacing:1.2px;color:#7d8ea3;margin:14px 8px 6px;text-transform:uppercase}
.side-link{
  display:flex;align-items:center;gap:10px;
  color:#cbd5e1;text-decoration:none;font-size:13.5px;
  padding:8px 10px;border-radius:7px;margin:1px 0;
  border-left:3px solid transparent;
}
.side-link:hover{background:var(--side-2);color:#fff}
.side-link.active{background:var(--side-2);color:#fff;border-left-color:var(--accent)}
.side-ico{width:17px;height:17px;flex:0 0 17px;opacity:.8}
.side-link.active .side-ico{opacity:1}
/* Submenu Setting (lipat/buka) */
.side-parent{width:100%;background:none;border:none;border-left:3px solid transparent;cursor:pointer;font:inherit;text-align:left}
.side-parent .chev{margin-left:auto;width:15px;height:15px;transition:transform .18s ease}
.side-group.open .side-parent .chev{transform:rotate(90deg)}
.side-sub{display:none;padding:2px 0 4px 27px}
.side-group.open .side-sub{display:block}
.side-link.sub{font-size:13px;padding:7px 10px}
.backdrop{display:none}

/* ===== Topbar ===== */
.topbar{
  height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:0 14px;
  position:sticky;top:0;z-index:1030;
}
.topbar h2{font-size:14px;margin:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-btn{
  display:none;border:1px solid var(--line);background:#fff;border-radius:8px;
  width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;color:var(--ink);
}
.top-user{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.user-chip{text-align:right;line-height:1.3;min-width:0}
.user-chip strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.role-badge{
  display:inline-block;font-size:10.5px;font-weight:600;color:var(--accent-dark);
  background:#e6f4f1;border:1px solid #bfe3dd;border-radius:20px;padding:1px 9px;
}
.btn-logout{
  border:1px solid var(--line);background:#fff;color:var(--danger);
  border-radius:8px;padding:5px 11px;font-size:12.5px;text-decoration:none;white-space:nowrap;
}
.btn-logout:hover{background:#fef2f2;border-color:#f3c2bd}
/* Bell notifikasi keamanan (admin) */
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.notif-bell svg{width:18px;height:18px}
.notif-bell:hover{border-color:var(--accent);color:var(--accent-dark)}
.notif-badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;line-height:19px;padding:0 5px;background:#64748b;color:#fff;font-size:10.5px;font-weight:700;text-align:center;border-radius:12px}
.notif-bell.danger{border-color:#f3c2bd;color:var(--danger)}
.notif-bell.danger .notif-badge{background:var(--danger);animation:notifPulse 1.2s ease-in-out infinite}
@keyframes notifPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.toast-crit{border-left:4px solid var(--danger)}
.toast-rpp{border-left:4px solid var(--danger)}
.sev{display:inline-block;font-size:11px;font-weight:700;border-radius:20px;padding:1px 10px;white-space:nowrap}
.sev-critical{background:#fdeceb;color:#b42318;border:1px solid #f3c2bd}
.sev-warning{background:#fff7e6;color:#92580a;border:1px solid #f0dcae}
.sev-info{background:#eef4ff;color:#2b5797;border:1px solid #cdddf5}
tr.sec-unread td{background-color:#fff7e6 !important}

/* ===== Kartu & panel ===== */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.card-header{background:#f8fafc;font-weight:650;font-size:13.5px;border-bottom:1px solid var(--line)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel.muted{background:#f8fafc}
.table{font-size:13px;margin-bottom:0}
/* Baris rapat agar tabel panjang tidak memanjang ke bawah */
.table>:not(caption)>*>*{padding:.32rem .5rem}
/* Baris tabel setinggi 1 teks: tanpa wrap, terpotong elipsis */
.table td,.table th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;vertical-align:middle}
/* Baris ter-highlight saat diklik */
.table tbody tr{cursor:pointer}
.table>tbody>tr.sel>*{--bs-table-accent-bg:#cfe2ff;background-color:#cfe2ff}
.pager .pagination{flex-wrap:wrap;row-gap:4px}
.table thead th{background:#f1f5f9;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:#475569;white-space:nowrap}
.table td{vertical-align:middle}
/* Freeze header tabel: area tabel jadi scroll vertikal sendiri + baris header
   menempel di atasnya (mencakup tabel ber-<thead> maupun header <tr> polos).
   Nonaktif global via body.freeze-off; di dalam popup modal selalu nonaktif. */
body:not(.freeze-off) .table-responsive{max-height:max(280px,calc(100vh - 320px));overflow-y:auto}
body:not(.freeze-off) .table-responsive thead th,
body:not(.freeze-off) .table-responsive table > tbody > tr:first-child > th,
body:not(.freeze-off) .table-responsive table > tr:first-child > th{
  position:sticky;top:0;z-index:5;background:#f1f5f9;
  box-shadow:0 1px 0 var(--line),0 3px 6px rgba(16,24,40,.08);
}
.modal .table-responsive{max-height:none}
.modal .table-responsive thead th,
.modal .table-responsive table > tbody > tr:first-child > th,
.modal .table-responsive table > tr:first-child > th{position:static;box-shadow:none}
/* Tombol Freeze/Unfreeze header tabel di topbar */
.freeze-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;
  border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--muted);cursor:pointer}
.freeze-btn svg{width:15px;height:15px}
.freeze-btn:hover{border-color:var(--accent);color:var(--accent-dark)}
.freeze-btn.on{background:#0f766e;border-color:#0f766e;color:#fff}

/* ===== Stat dashboard ===== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;position:relative}
.stat::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:var(--accent)}
.stat small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.stat b{font-size:24px;font-weight:700;letter-spacing:-.5px}
/* Varian kartu mini (mis. info per jabatan): sebaris label+angka, ramping */
.stats.mini{display:flex;flex-wrap:wrap;gap:8px}
.stats.mini .stat{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;max-width:210px;padding:5px 10px 5px 12px}
.stats.mini .stat::before{top:7px;bottom:7px}
.stats.mini .stat small{font-size:10.5px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats.mini .stat b{font-size:15px;white-space:nowrap}

/* ===== Login — biru glassmorphism ===== */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px;background:linear-gradient(160deg,#8dbcf2,#6ea6e8 45%,#5f97dd)}
.login-stage{position:relative;width:100%;max-width:1060px;min-height:640px;display:flex;align-items:center;justify-content:center;border-radius:32px;overflow:hidden;
  background:linear-gradient(130deg,#7fb4f0 0%,#2e80d8 26%,#1d62bd 52%,#123f85 74%,#3b8fe0 100%);
  background-size:240% 240%;
  box-shadow:0 30px 70px rgba(13,53,110,.35);
  animation:stageIn .5s ease-out both,gradFlow 16s ease-in-out infinite alternate}
.login-stage::before{content:'';position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(560px 380px at 68% 30%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
  animation:glowDrift 20s ease-in-out infinite alternate}
/* Gradasi warna di belakang kartu: lapisan cahaya lembut (tanpa bentuk bulat) */
.stage-wash{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 24% 22%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(860px 560px at 80% 82%, rgba(7,36,84,.4) 0%, rgba(7,36,84,0) 64%);
  animation:washDrift 24s ease-in-out infinite alternate}
.login-card{position:relative;z-index:1;width:100%;max-width:384px;margin:0 18px;padding:30px 28px 24px;border-radius:22px;text-align:left;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.38);box-shadow:0 24px 60px rgba(8,40,90,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:cardIn .6s ease-out both}
/* Kilau lembut menyapu kartu tiap beberapa detik */
.login-card::after{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));
  transform:translateX(-130%) skewX(-18deg);animation:cardSheen 11s ease-in-out 1.8s infinite}
.login-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(150deg,#5ea1ec,#1d62bd);
  border:1px solid rgba(255,255,255,.4);box-shadow:0 12px 26px rgba(6,35,80,.35), inset 0 1px 0 rgba(255,255,255,.35);
  animation:iconFloat 5s ease-in-out infinite}
.login-icon img{animation:iconFloat 5s ease-in-out infinite}
.login-icon svg{width:34px;height:34px;overflow:visible}
/* Ikon sparepart: roda gigi berputar + kunci inggris bergoyang */
.login-icon .ic-gear{transform-origin:6.8px 7.4px;animation:gearSpin 9s linear infinite}
.login-icon .ic-wrench{transform-origin:10px 17px;animation:wrenchSway 3.6s ease-in-out infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes gearSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes wrenchSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
.login-card .login-co{display:block;text-align:center;color:rgba(255,255,255,.92);font-size:15px;font-weight:600;letter-spacing:.3px;line-height:1.35}
.login-card h1{margin:2px 0 4px;text-align:center;color:#fff;font-size:30px;font-weight:800;letter-spacing:.4px}
.login-card .login-sub{display:block;text-align:center;color:rgba(255,255,255,.8);font-size:13.5px;font-weight:600;letter-spacing:.5px;margin:0 0 14px}
.login-card label{display:block;color:#fff;font-size:12.5px;font-weight:600;margin:12px 0 6px}
.login-card .form-control{border:none;border-radius:9px;padding:11px 12px;font-size:14px;color:#12263f;background:#fff;box-shadow:0 2px 6px rgba(9,40,90,.18)}
.login-card .form-control::placeholder{color:#9fadc0}
.login-card .form-control:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.pass-wrap{position:relative}
.pass-wrap .form-control{padding-right:70px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:#4a6da7;font-size:12px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:6px}
.pass-toggle:hover{background:rgba(74,109,167,.12)}
.locked-banner{margin-top:14px;background:rgba(220,53,69,.18);border:1px solid rgba(255,120,130,.5);color:#ffd9dd;font-size:12.5px;border-radius:9px;padding:10px 12px;text-align:center}
.cap-wrap{display:flex;align-items:center;gap:10px}
.cap-q{display:inline-block;background:rgba(255,255,255,.92);color:#12263f;font-weight:700;font-size:14px;border-radius:9px;padding:10px 14px;min-width:86px;text-align:center;box-shadow:0 2px 6px rgba(9,40,90,.18);user-select:none}
.cap-wrap .form-control{flex:1}
.btn-login{display:block;width:100%;margin-top:18px;background:#0e2f5e;border:none;padding:12px;font-size:14.5px;font-weight:700;letter-spacing:.4px;border-radius:9px;color:#fff;box-shadow:0 10px 22px rgba(5,25,60,.35);transition:background .15s,transform .06s}
.btn-login:hover{background:#0a2449;color:#fff}
.btn-login:active{transform:translateY(1px)}
.login-foot{font-size:12.5px;color:rgba(255,255,255,.92);text-align:center;margin:14px 0 0}
.login-foot b{color:#dbeaff}
.login-ver{color:rgba(255,255,255,.6);font-size:11.5px;margin:6px 0 0;text-align:center}
@media (max-width:600px){
  .login-page{padding:14px}
  .login-stage{min-height:calc(100vh - 28px);border-radius:24px}
  .login-card{padding:24px 20px 20px}
}
/* ---- Animasi latar (gradasi mengalir, cahaya bergeser, kilau kartu) ---- */
@keyframes stageIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes gradFlow{from{background-position:8% 12%}to{background-position:92% 88%}}
@keyframes washDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes glowDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(6%,4%,0) scale(1.12)}}
@keyframes cardSheen{0%{transform:translateX(-130%) skewX(-18deg)}18%,100%{transform:translateX(240%) skewX(-18deg)}}
/* Hormati preferensi pengguna: matikan semua animasi bila diminta OS */
@media (prefers-reduced-motion: reduce){
  .login-stage,.login-stage::before,.login-card,.login-card::after,.stage-wash,.login-icon,.login-icon img,.login-icon .ic-gear,.login-icon .ic-wrench{animation:none !important}
}

.foot{padding:14px 20px;color:var(--muted);font-size:12px;text-align:center}
/* Notifikasi toast */
.toast{border-left:4px solid var(--accent);box-shadow:0 8px 24px rgba(16,24,40,.15)}
.toast-err{border-left-color:var(--danger)}
.toast-body{font-size:13.5px}

/* ===== Avatar ===== */
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px;background:#e2e8f0}
.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:#dcebe8;color:var(--accent-dark);font-weight:700;font-size:13px}
.avatar-lg{width:96px;height:96px;flex-basis:96px;font-size:30px;border-radius:50%;object-fit:cover;background:#e2e8f0}
/* Logo gambar (Toyota) pengganti inisial teks */
.brand-mark.has-logo{background:#fff;padding:4px}
.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain}
.top-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;object-fit:cover;background:#e2e8f0}
.top-avatar.fallback{display:inline-flex;align-items:center;justify-content:center;background:#dcebe8;color:var(--accent-dark);font-weight:700;font-size:13px}
/* Area akun di topbar: klik -> Info Akun */
.top-account{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;padding:4px 8px;margin:-4px -8px;border-radius:10px;transition:background .15s}
.top-account:hover{background:rgba(0,0,0,.05)}
.top-account:hover .role-badge{text-decoration:underline}
/* Toggle AUTO-CAPS di topbar */
.caps-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#d8dee4);background:#fff;color:var(--muted,#64748b);font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:999px;cursor:pointer;user-select:none;transition:all .15s;white-space:nowrap}
.caps-toggle .caps-lamp{width:8px;height:8px;border-radius:50%;background:#cbd5e1;transition:background .15s}
.caps-toggle.on{background:#0f766e;border-color:#0f766e;color:#fff}
.caps-toggle.on .caps-lamp{background:#5eead4;box-shadow:0 0 6px #5eead4}
.caps-toggle:hover{border-color:#0f766e;color:#0f766e}
.caps-toggle.on:hover{color:#fff}
/* Pemilih & badge cabang di topbar (multi-cabang) */
.branch-switcher{margin:0;display:inline-flex;align-items:center}
.branch-sel{font-size:11.5px;font-weight:700;color:var(--ink);border:1px solid var(--line,#d8dee4);background:#f8fafc;border-radius:999px;padding:4px 26px 4px 11px;max-width:230px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:11px;transition:border-color .15s,box-shadow .15s;white-space:nowrap;text-overflow:ellipsis}
.branch-sel:hover{border-color:#0f766e}
.branch-sel:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.branch-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;color:#0f766e;background:#f0fdfa;border:1px solid #99f6e4;border-radius:999px;padding:4px 11px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.branch-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#14b8a6;flex:0 0 auto}
@media (max-width:820px){.branch-sel{max-width:150px}.branch-badge{max-width:150px}}
@media (max-width:560px){.branch-sel,.branch-badge{display:none}}
/* Jam realtime di topbar (semua role) */
.top-clock{display:inline-flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);background:#f8fafc;border-radius:999px;padding:3px 11px;white-space:nowrap;flex:0 0 auto}
.top-clock b{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:900px){.top-clock #topClockDate{display:none}}
@media (max-width:700px){.top-clock{display:none}}
/* Running text di bawah topbar (info utk semua user) — ramping */
.rt-wrap{display:flex;align-items:stretch;background:#0d1a36;color:#fff;font-size:11.5px;overflow:hidden}
.rt-tag{display:flex;align-items:center;background:var(--ml-red,#e30613);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:1.2px;padding:4px 10px;flex:0 0 auto;z-index:1}
.rt-track{flex:1;overflow:hidden;display:flex;align-items:center;min-width:0}
.rt-move{display:inline-flex;width:max-content;animation:rtScroll 30s linear infinite}
.rt-move span{padding:4px 48px 4px 0;white-space:nowrap}
.rt-wrap:hover .rt-move{animation-play-state:paused}
@keyframes rtScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rt-move{animation:none}}
/* Toolbar mini editor + pratinjau running text */
.rt-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.rt-tool{border:1px solid var(--line);background:#f8fafc;border-radius:8px;min-width:34px;height:32px;
  padding:0 9px;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer}
.rt-tool:hover{border-color:var(--accent);color:var(--accent-dark)}
.rt-tool.swatch{width:32px;min-width:32px;padding:0;border-radius:8px}
.rt-preview{background:#0d1a36;color:#fff;border-radius:8px;padding:10px 12px;min-height:44px;font-size:13px;line-height:1.6}
.rt-hint{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){.caps-toggle span.caps-lamp+*{display:none}.caps-toggle{padding:4px 8px}}
.user-cell{display:flex;align-items:center;gap:10px;min-width:180px}
.user-cell small{display:block;color:var(--muted)}
.acc-detail{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.acc-detail dl{margin:0;flex:1;min-width:220px}
.acc-detail dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.acc-detail dd{margin:0 0 10px;font-size:14px}
.acc-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Tombol aksi icon-only (kolom minimalis) */
.btn-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:6px;flex:0 0 26px}
.btn-ico svg{width:13px;height:13px}
/* Dropdown saran pencarian */
.search-drop{display:none;position:absolute;top:100%;left:0;z-index:30;max-height:240px;overflow:auto;margin-top:2px;box-shadow:0 8px 24px rgba(16,24,40,.15);min-width:220px}
/* Viewfinder scanner: persegi panjang + garis laser horizontal */
.scan-wrap{position:relative;background:#000;border-radius:8px;overflow:hidden;min-height:200px}
.scan-wrap video{border-radius:8px}
/* Area scan OCR: band tengah sempit ala barcode scanner — HANYA area di dalam
   garis yang dibaca (disinkronkan dgn konstanta BAND di assets/ocr_scan.js) */
.scan-rect{position:absolute;left:6%;right:6%;top:40%;bottom:40%;border:2px solid rgba(255,255,255,.9);border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.4);pointer-events:none;z-index:40}
.scan-laser{position:absolute;left:8%;right:8%;top:42%;height:3px;background:#ff3b30;box-shadow:0 0 12px 3px rgba(255,59,48,.9);animation:scanY 2s ease-in-out infinite;pointer-events:none;z-index:50}
@keyframes scanY{0%{top:42%}50%{top:58%}100%{top:42%}}
/* Tombol salin di sel tabel (muncul saat hover) */
table[data-copy-cells] tbody td{position:relative}
.cell-copy{position:absolute;top:2px;right:2px;display:none;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer}
.cell-copy svg{width:12px;height:12px}
table[data-copy-cells] tbody td:hover .cell-copy{display:inline-flex}
.cell-copy:hover{color:var(--accent-dark);border-color:var(--accent)}
.cell-copy.ok{color:#fff;background:var(--accent);border-color:var(--accent)}
@media (hover:none){ table[data-copy-cells] .cell-copy{display:inline-flex;opacity:.75} }
#copyFlash{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:#1f2933;color:#fff;font-size:13px;padding:8px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2000;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#copyFlash.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Dropdown hasil cari */
.plat-drop{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;max-height:220px;overflow:auto;box-shadow:0 8px 24px rgba(16,24,40,.15)}

/* ===== Responsif ===== */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991.98px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.nav-open .sidebar{transform:none}
  /* Mobile: status hide-show desktop diabaikan — drawer selalu bisa dibuka menuBtn */
  body.side-hidden .sidebar{flex-basis:var(--side-w);width:var(--side-w);opacity:1;pointer-events:auto}
  body.side-hidden .sidebar *{visibility:visible}
  .side-toggle{display:none !important}
  .backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1035}
  body.nav-open .backdrop{opacity:1;pointer-events:auto}
  .menu-btn{display:inline-block}
  .content{padding:14px}
}
@media (max-width:640px){
  body{font-size:13.5px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat b{font-size:20px}
  /* kartu mini jadi 1 lajur geser horizontal agar pendek */
  .stats.mini{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;gap:6px}
  .stats.mini .stat{flex:0 0 auto;max-width:none;padding:4px 9px 4px 11px}
  .stats.mini .stat small{font-size:10px;max-width:110px}
  .stats.mini .stat b{font-size:14px}
  .content{padding:12px}
  .topbar{padding:0 12px}
  .user-chip strong{max-width:110px}
  .user-chip{display:none}
  .topbar h2{font-size:14px}
  .btn .btn-sm, .btn-sm{padding:.3rem .5rem;font-size:.75rem}
  .d-flex.gap-2{flex-wrap:wrap}
}
@media (min-width:1400px){
  .content{padding:20px 24px}
}

/* ================= ROLE MANAGEMENT (kartu per modul) ================= */
.rm-group{margin-bottom:14px}
.rm-group-title{font-weight:700;font-size:13.5px;color:var(--text,#1e293b);margin:10px 0 8px;display:flex;align-items:center;gap:8px}
.rm-group-title::after{content:"";flex:1;height:1px;background:var(--line,#e5e7eb)}
.rm-group:first-child .rm-group-title{margin-top:0}
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.rm-card{border:1px solid var(--line,#e5e7eb);border-radius:10px;background:#fff;padding:10px 12px;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:opacity .15s,border-color .15s,box-shadow .15s}
.rm-card.rm-off{opacity:.55;border-style:dashed;background:#fafafa}
.rm-card-title{font-weight:600;font-size:13px;margin-bottom:6px;color:#12263f}
.rm-checks{display:flex;flex-wrap:wrap;gap:2px 12px;margin-bottom:6px}
.rm-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#334155;cursor:pointer;white-space:nowrap}
.rm-check input{width:14px;height:14px;cursor:pointer}
.rm-colwrap{border-top:1px dashed var(--line,#e5e7eb);margin-top:6px;padding-top:6px}
.rm-colwrap.rm-disabled{opacity:.45}
.rm-colwrap .rm-free{margin-bottom:4px}
.rm-free input{width:14px;height:14px}
.rm-free span b{font-size:12px}
.rm-colgrid{display:flex;flex-wrap:wrap;gap:2px 10px;padding:4px 0 6px}
.rm-colgrid.rm-disabled{opacity:.45}
.rm-cols{font-size:12px;background:#f8fafc;margin-top:2px}
.rm-cols::placeholder{color:#9fadc0}
.rm-badges{display:flex;flex-wrap:wrap;gap:4px}
.rm-badges .badge{font-size:11px;font-weight:600;padding:.32em .55em}
a.rm-badge{text-decoration:none;transition:transform .1s,box-shadow .1s}
a.rm-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(16,24,40,.25)}