/* ═══════════════════════════════════════════════════════════════════════════
   IGI Portal — gaya bersama untuk halaman login, portal, Setting, dan
   penolakan.

   Mengikuti design system IGI (igi-theme.css), sama seperti IGI Accounting
   dan alat internal lainnya: Roboto, oranye #E85D2F sebagai aksen, latar
   terang, dan terang/gelap lewat [data-theme]. Muat igi-theme.css LEBIH
   DULU, baru berkas ini.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nama lama (--red, --ink, --line, ...) dipertahankan sebagai lapisan
   pemetaan ke token resmi igi-theme.css. Dengan begitu ratusan aturan di
   bawah tidak perlu disentuh satu per satu, tapi warnanya sudah warna IGI —
   dan kalau --igi-orange di igi-theme.css diubah, portal ikut berubah.

   Terang/gelap mengikuti [data-theme] seperti alat IGI lain, bukan
   prefers-color-scheme, supaya satu pilihan berlaku di semua alat. */
:root{
  --red:var(--igi-orange);
  --red-dark:var(--igi-orange-hover);
  --orange:var(--igi-orange);
  --orange-soft:var(--igi-orange-bright);
  --ink:var(--text);
  --ink-2:var(--text-secondary);
  --gray-bg:var(--surface);
  --line:var(--border);
  --muted:var(--text-muted);
  --muted-2:var(--border-strong);
  --page:var(--bg);
  --card:var(--elevated);
  /* igi-theme.css tidak mendefinisikan token bayangan; nilainya diambil
     dari yang dipakai kartu dan modal di berkas itu. */
  /* Tinggi bar atas: logo 38px + padding 2x9px + garis 1px. Dipakai
     kepala tabel supaya berhenti TEPAT di bawah bar atas, bukan di
     baliknya, saat halaman digulir. */
  --topnav-h:57px;
  --shadow:0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 20px 60px rgba(0,0,0,.25);
  color-scheme:light;
}
[data-theme="dark"]{
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);
  font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
/* Halaman Setting memuat tabel 20 kolom. Membatasinya pada 1160px membuat
   datanya berdesakan dan memaksa gulir mendatar di dalam kotak. Di halaman
   itu wadahnya dilepas selebar layar. */
body.page-wide .portal-body .container,
body.page-wide .hero-strip .container,
body.page-wide .crumb .container{max-width:none;padding:0 22px}
/* Bar atas ikut melebar, tapi padding atas-bawahnya (lihat .topnav) dipertahankan. */
body.page-wide .topnav .container{max-width:none;padding-left:22px;padding-right:22px}

.btn{
  display:inline-block;padding:12px 38px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;border-radius:50px;border:2px solid transparent;transition:all .25s ease;cursor:pointer;text-align:center;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--orange);border-color:var(--orange)}
.btn-ghost{background:none;color:var(--text-secondary);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--elevated);color:var(--igi-orange);border-color:var(--igi-orange)}

/* ── Panggung login ───────────────────────────────────────────────────────
   Dulu hero gelap bergradasi ala iluva.co.id. Sekarang mengikuti design
   system IGI: latar terang, oranye sebagai aksen saja, bukan bidang besar. */
.dark-stage{
  min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  padding:64px 16px 120px;background:var(--surface);
}
.dark-stage:before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(760px 420px at 82% 8%, var(--igi-orange-soft), transparent 64%),
    repeating-linear-gradient(115deg, rgba(128,128,128,.05) 0 1px, transparent 1px 11px);
}
.dark-stage .container{position:relative;z-index:10}
.diagonal{position:absolute;bottom:0;z-index:5;pointer-events:none}
.diagonal.left{left:0;width:21%;height:170px}
.diagonal.right{right:0;width:80%;height:170px}
.diagonal path{fill:var(--bg)}

/* ── Login ────────────────────────────────────────────────────────────────── */
.login-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;max-width:1060px;width:100%;margin:0 auto}
.login-brand img.big{width:min(280px,58vw);margin-bottom:26px}
.login-brand h1{font-family:var(--font-display);font-size:clamp(30px,4.8vw,50px);color:var(--text);
  font-weight:600;letter-spacing:-.02em;margin:0 0 12px;line-height:1.08}
/* Judul tidak lagi diketik bergerak, jadi tidak perlu garis kursor. */
.login-brand h1 b{display:block}
.login-brand h1 .element{color:var(--orange)}
.login-brand .sub{color:var(--text-secondary);font-size:clamp(12px,1.8vw,14px);letter-spacing:.14em;text-transform:uppercase}
.login-brand .rule{width:64px;height:3px;background:var(--red);margin:22px 0}
.login-brand p{color:var(--text-secondary);font-size:13.5px;max-width:440px;margin:0}
.login-brand ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:9px}
.login-brand li{color:var(--text-secondary);font-size:13px;display:flex;gap:11px;align-items:flex-start}
.login-brand li:before{content:"";flex:0 0 7px;height:7px;margin-top:9px;background:var(--orange);transform:rotate(45deg)}

.login-card{background:var(--card);border-radius:6px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:400px;width:100%;margin:0 auto}
.login-head{padding:26px 32px 22px;text-align:center;color:#fff;
  background:linear-gradient(125deg,var(--igi-orange-bright) 0%,var(--igi-orange) 55%,var(--igi-orange-hover) 100%)}
.login-head img{height:36px;margin:0 auto 12px;filter:brightness(0) invert(1)}
.login-head b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;display:block}
.login-head small{display:block;font-size:10.5px;color:rgba(255,255,255,.8);letter-spacing:.06em;margin-top:3px}
.login-body{padding:28px 32px 32px}
.field{margin-bottom:16px}
.field label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input{
  width:100%;border:1px solid var(--line);border-radius:3px;padding:12px 13px;font-size:14px;color:var(--ink);
  background:var(--page);font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.field input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(190,29,45,.13)}
.login-body .btn{width:100%;padding:14px;border:0;margin-top:6px}
.login-err{
  background:var(--danger-bg);border-left:3px solid var(--danger);color:var(--danger);
  font-size:12.5px;padding:9px 12px;margin-bottom:16px;
}
.login-ok{
  background:var(--success-bg);border-left:3px solid var(--success);color:var(--success);
  font-size:12.5px;padding:9px 12px;margin-bottom:16px;
}
.login-foot{font-size:11px;color:var(--muted-2);text-align:center;margin-top:16px;font-weight:300;line-height:1.7}
.login-foot .back-link{color:var(--orange);text-decoration:none}
.login-foot .back-link:hover{text-decoration:underline}

/* Kartu tunggal di tengah panggung gelap — dipakai halaman Ganti Password. */
.solo-inner{display:flex;justify-content:center;width:100%}

/* ── Bar atas portal ──────────────────────────────────────────────────────── */
.topnav{position:sticky;top:0;z-index:900;background:var(--card);border-bottom:1px solid var(--line);box-shadow:-5px 10px 12px -10px rgba(0,0,0,.18)}
.topnav .container{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px}
.logo{display:flex;align-items:center;gap:12px;min-width:0}
.logo img{height:38px;width:auto}
.logo .text b{font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1.25;display:block}
.logo .text small{font-size:10px;color:var(--muted);letter-spacing:.05em}
.whoami{margin-left:auto;display:flex;align-items:center;gap:14px}
.whoami .who{text-align:right;line-height:1.3}
.whoami .who b{display:block;font-size:13px;font-weight:600}
.whoami .who small{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;background:linear-gradient(135deg,var(--red),var(--orange));flex:0 0 40px}
.logout{border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:50px;padding:7px 18px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.logout:hover{border-color:var(--red);color:var(--red)}

/* Tombol terang/gelap di bar atas, di kiri nama pengguna. Ikonnya bertukar
   lewat CSS mengikuti [data-theme], bukan lewat JavaScript, supaya sudah
   benar sejak halaman pertama digambar. */
.theme-btn{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  background:none;color:var(--text-secondary);border-radius:var(--radius-pill);
  padding:6px 13px;font-family:inherit;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s;
}
.theme-btn:hover{border-color:var(--igi-orange);color:var(--igi-orange)}
.theme-btn:focus-visible{outline:2px solid var(--igi-orange);outline-offset:2px}
.theme-btn svg{width:14px;height:14px;flex:0 0 14px}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}
@media (max-width:760px){.theme-btn .lbl{display:none}.theme-btn{padding:6px 9px}}

/* ── Daftar pengguna (Setting > User) ─────────────────────────────────────── */
/* Varian tabel matriks yang rata kiri — kolomnya keterangan, bukan centang.

   Dan tidak selebar layar. Matriks Trusty memang butuh seluruh lebar (18
   kolom aplikasi), daftar pengguna tidak: lima kolom pendek yang direntang
   sampai tepi kanan hanya menyisakan padang kosong di tengah baris, dan
   mata harus melompat jauh dari nama ke tombol Aksi-nya. Jadi lebarnya
   dibiarkan mengikuti isi, dipatok seperlunya. */
.matrix-wrap.narrow{width:fit-content;max-width:100%}
table.matrix.userlist{width:auto;min-width:640px}
table.matrix.userlist th,table.matrix.userlist td{text-align:left;padding:8px 14px}
table.matrix.userlist td.act{text-align:right}
table.matrix.userlist td.mid{text-align:center;white-space:nowrap}
table.matrix.userlist th.stick{min-width:0;padding-right:26px}

/* Judul kelompok per bagian, sekaligus tombol buka/tutupnya. Tertutup,
   daftar 90 orang jadi 20-an baris; dibuka seperlunya, anggotanya menyusul
   di bawahnya. Baris ini sengaja bukan .stick — tabelnya sudah tidak
   menggulir ke samping, jadi tidak ada yang perlu dibekukan. */
table.matrix .dept-row th.dept-head{
  background:var(--surface);padding:0;border-bottom:1px solid var(--border);
}
table.matrix .dept-row:hover th.dept-head{background:var(--gray-bg)}
.dept-arm{
  display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  padding:10px 14px;font-family:inherit;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);cursor:pointer;
  text-align:left;transition:color .15s;
}
.dept-arm:hover{color:var(--igi-orange)}
.dept-arm:focus-visible{outline:2px solid var(--igi-orange);outline-offset:-2px}
.dept-arm .caret{color:var(--igi-orange);font-size:10px;line-height:1;
  transition:transform .15s;display:inline-block}
.dept-row.open .dept-arm{color:var(--igi-orange)}
.dept-row.open .dept-arm .caret{transform:rotate(90deg)}
.dept-line{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dept-arm .nm{flex:1;min-width:0}
/* Di matriks Trusty tabelnya menggulir ke samping. Judul bagiannya dibuat
   menempel di kiri seperti kolom nama, supaya saat digeser ke kolom aplikasi
   paling kanan masih kelihatan sedang melihat bagian yang mana. */
table.matrix:not(.userlist) .dept-line{position:sticky;left:0;flex:0 0 auto;width:max-content}
table.matrix:not(.userlist) .dept-arm .nm{flex:0 0 auto}
.dept-arm .cnt,.dept-arm .adm,.dept-arm .warn{
  font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--text-muted);
}
.dept-arm .cnt b{font-weight:700;color:var(--text-secondary)}
.dept-arm .adm{border:1px solid rgba(241,89,42,.35);color:var(--orange);
  border-radius:50px;padding:2px 9px}
.dept-arm .warn{color:var(--red);border:1px solid var(--line);border-radius:50px;padding:2px 9px}
/* Anggota bagian diberi tepi kiri tipis supaya terbaca sebagai isi kelompok
   di atasnya, bukan sebagai baris lepas. */
table.matrix.userlist tbody tr[data-dept] th.stick{box-shadow:inset 1px 0 0 var(--border)}
table.matrix.userlist tbody tr.me th.stick{box-shadow:inset 3px 0 0 var(--orange)}
table.matrix.userlist tbody tr.is-admin th.stick{box-shadow:inset 3px 0 0 var(--red)}
.tag-adm{display:inline-block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;padding:3px 10px;border-radius:50px;background:rgba(241,89,42,.12);
  color:var(--orange);border:1px solid rgba(241,89,42,.35)}
.tag-usr{display:inline-block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;padding:3px 10px;border-radius:50px;color:var(--muted);border:1px solid var(--line)}

/* ── Sambutan ─────────────────────────────────────────────────────────────── */
.hero-strip{
  position:relative;color:var(--text);padding:14px 0 16px;overflow:hidden;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.hero-strip:before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 300px at 88% 0%, var(--igi-orange-soft), transparent 66%)}
.hero-strip .container{position:relative;z-index:3}
.hero-strip .eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary)}
.hero-strip h2{font-family:var(--font-display);font-size:clamp(16px,2.1vw,20px);font-weight:600;
  margin:2px 0 3px;letter-spacing:-.01em}
.hero-strip h2 em{font-style:normal;color:var(--igi-orange)}
.hero-strip p{margin:0;color:var(--text-secondary);font-size:12.5px;max-width:620px}
.access-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:5px 14px;font-size:11.5px;color:var(--text-secondary)}
.pill b{font-weight:600;color:var(--igi-orange)}

/* ── Kartu aplikasi ───────────────────────────────────────────────────────── */
.portal-body{background:var(--gray-bg);padding-bottom:60px;min-height:40vh}
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-top:-48px;position:relative;z-index:5;background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:14px 18px;box-shadow:var(--shadow);
}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:none;color:var(--ink-2);padding:7px 18px;border-radius:50px;font-family:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--muted-2)}
.chip.active{background:var(--igi-orange);border-color:var(--igi-orange);color:#fff}
.search{border:1px solid var(--line);border-radius:50px;padding:8px 18px;font-family:inherit;font-size:12.5px;background:var(--page);color:var(--ink);outline:none;min-width:200px}
.search:focus{border-color:var(--red)}

.cat-block{padding-top:44px}
.cat-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.cat-head h3{margin:0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.cat-head .bar{flex:1;height:1px;background:var(--line)}
.cat-head .cnt{font-size:11px;color:var(--muted-2);letter-spacing:.08em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px 22px 20px;
  display:flex;flex-direction:column;gap:11px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--orange));transition:width .35s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.card:hover:before{width:100%}
.card .top{display:flex;align-items:center;gap:13px}
/* Lencana kini hanya wadah ikon — tanpa inisial dan tanpa bidang oranye. */
.badge{flex:0 0 40px;height:40px;border-radius:4px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface)}
.badge img{width:100%;height:100%;object-fit:cover;display:block}
.card h4{margin:0;font-size:14.5px;font-weight:600}
.card .cat{font-size:10px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase}
.card p{margin:0;font-size:13px;color:var(--ink-2);font-weight:300;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
.port{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted)}
.open{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--red);display:flex;align-items:center;gap:6px}
.card:hover .open{color:var(--orange)}
.open svg{transition:transform .25s}
.card:hover .open svg{transform:translateX(4px)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);font-weight:300;font-size:14px;border:1px dashed var(--line);border-radius:4px;padding:40px 20px}

/* ── Halaman ditolak ──────────────────────────────────────────────────────── */
.denied-card{background:var(--card);border-radius:6px;box-shadow:var(--shadow-lg);max-width:480px;width:100%;margin:0 auto;padding:40px 38px;text-align:center}
.denied-card .mark{width:62px;height:62px;border-radius:50%;background:rgba(190,29,45,.1);color:var(--red);display:grid;place-items:center;margin:0 auto 18px;font-size:26px}
.denied-card h1{font-size:20px;font-weight:700;margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}
.denied-card p{color:var(--ink-2);font-weight:300;font-size:14px;margin:0 0 6px}
.denied-card .app{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--red)}
.denied-card .btn{margin-top:22px}

footer{background:var(--surface);border-top:1px solid var(--border);
  padding:22px 0 26px;text-align:center;color:var(--text-muted)}
footer p{margin:0;font-size:12px;line-height:1.9}
footer a{color:var(--igi-orange)}

@media (max-width:1000px){
  .login-inner{grid-template-columns:1fr;gap:44px}
  .login-brand{text-align:center}
  .login-brand img.big,.login-brand .rule{margin-left:auto;margin-right:auto}
  .login-brand p{margin:0 auto}
  .login-brand ul{text-align:left;max-width:360px;margin-left:auto;margin-right:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
  .diagonal.left,.diagonal.right{height:90px}
  .whoami .who{display:none}
  .toolbar{margin-top:-30px}
  .search{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   HALAMAN ADMIN — kelola pengguna
   ══════════════════════════════════════════════════════════════════ */
.panel{background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:24px 26px 22px;margin-top:24px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.row-end{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:18px}
.row-end .btn{padding:11px 30px}

.switch{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);
  cursor:pointer;user-select:none;padding:9px 0}
.switch input{appearance:none;width:36px;height:20px;border-radius:50px;background:var(--line);
  position:relative;cursor:pointer;transition:background .2s;margin:0;flex:0 0 36px}
.switch input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked{background:var(--red)}
.switch input:checked:after{transform:translateX(16px)}

.app-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
.pick{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:300;
  color:var(--ink-2);padding:5px 0;cursor:pointer}
.pick input{accent-color:var(--red);width:15px;height:15px;cursor:pointer;flex:0 0 15px}
.pick span{display:flex;align-items:center;gap:8px;min-width:0}
.pick b{font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px;font-weight:600;flex:0 0 auto}

/* ── matriks ── */
/* Tabel TIDAK dibungkus kotak gulir sendiri: tingginya dibiarkan penuh dan
   yang menggulir adalah halaman, memakai gulir bawaan peramban. Kotak gulir
   di dalam halaman membuat area datanya terasa sempit.

   Konsekuensinya kepala tabel harus sticky terhadap layar, bukan terhadap
   kotak - karena itu top-nya --topnav-h, supaya berhenti tepat di bawah bar
   atas dan bukan tersembunyi di baliknya. */
.matrix-wrap{
  border:1px solid var(--line);border-radius:4px;background:var(--card);
}
table.matrix{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
table.matrix th,table.matrix td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:center}
table.matrix thead th{position:sticky;top:var(--topnav-h);z-index:5;background:var(--card);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Kepala kolom aplikasi.

   Sempat ditulis tegak (writing-mode vertical) supaya 18 nama muat. Itu
   memang muat, tapi membaca 18 nama miring satu per satu melelahkan. Jadi
   sekarang mendatar, dibungkus dua-tiga baris di kolom sempit:

     - awalan "IGI " dibuang di kepala kolom (semuanya IGI, jadi tidak
       membedakan apa pun dan hanya memakan lebar). Nama utuhnya tetap ada
       di tooltip.
     - nomor port di baris kecil di bawahnya, sebagai penegas kalau ada dua
       nama yang mirip.
     - lebar kolom dipatok supaya tinggi kepala tabel tidak berubah-ubah. */
table.matrix thead th.app{
  width:72px;min-width:72px;max-width:72px;vertical-align:bottom;padding:8px 4px 9px;
}
table.matrix thead th.app .nm{
  display:block;writing-mode:horizontal-tb;transform:none;
  font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.01em;
  text-transform:none;color:var(--text);white-space:normal;word-break:normal;hyphens:none;
}
table.matrix thead th.app .pt{
  display:block;margin-top:3px;font-size:9px;font-weight:400;letter-spacing:.02em;
  color:var(--text-muted);font-family:var(--font-mono);
}
table.matrix thead th.app:hover .nm{color:var(--igi-orange)}
/* Kolom yang punya hak akses per menu diberi titik oranye, bukan panah di
   tengah teks — panahnya dulu ikut terbawa saat nama membungkus baris. */
table.matrix thead th.app.caps .nm:after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:4px;
  border-radius:50%;background:var(--igi-orange);vertical-align:middle;
}
table.matrix tr.cat-row th{top:var(--topnav-h);font-size:9px;letter-spacing:.14em;color:var(--muted-2);
  border-bottom:1px solid var(--line);padding:7px 8px 5px}
table.matrix tr.cat-row th[colspan]{border-left:1px solid var(--border);
  background:var(--surface);font-weight:600;color:var(--text-secondary)}
table.matrix thead tr:nth-child(2) th{top:calc(var(--topnav-h) + 28px)}
table.matrix th.stick{position:sticky;left:0;z-index:4;background:var(--card);
  text-align:left;white-space:nowrap;min-width:190px}
/* Sudut kiri-atas ikut dua arah sekaligus, jadi harus di atas keduanya. */
table.matrix thead th.stick{z-index:6}
/* Garis pemisah supaya jelas mana yang beku dan mana yang bergeser. */
table.matrix th.stick:after{content:"";position:absolute;top:0;bottom:0;right:0;
  width:1px;background:var(--border)}
table.matrix thead th:after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--border)}
table.matrix tbody th.stick{font-weight:600;font-size:13px;color:var(--ink);
  text-transform:none;letter-spacing:0}
table.matrix tbody th.stick small{display:block;font-weight:300;color:var(--muted);
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
table.matrix tbody tr:hover th.stick,table.matrix tbody tr:hover td{background:var(--gray-bg)}
table.matrix tbody tr.me th.stick{box-shadow:inset 3px 0 0 var(--orange)}
table.matrix tbody tr.is-admin th.stick{box-shadow:inset 3px 0 0 var(--red)}
.warn{color:var(--red);font-weight:500}

/* ── Trusty: hak akses per menu (sub baris) ───────────────────────────────── */
td.has-caps{white-space:nowrap}
.caps-open{
  border:0;background:none;color:var(--text-muted);cursor:pointer;padding:0 0 0 3px;
  font-size:11px;line-height:1;transition:transform .15s,color .15s;display:inline-block;
}
.caps-open:hover{color:var(--igi-orange)}
.caps-open.on{transform:rotate(90deg);color:var(--igi-orange)}

table.matrix tr.caps-row th.caps-head{
  background:var(--surface);font-weight:600;font-size:12px;color:var(--igi-orange);
  padding-left:22px;position:relative;
}
table.matrix tr.caps-row th.caps-head small{
  display:block;font-weight:400;color:var(--text-muted);font-size:10px;
  text-transform:none;letter-spacing:0;margin-top:1px;
}
.caps-arm{position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--igi-orange);opacity:.45}
table.matrix tr.caps-row td{background:var(--surface);text-align:left;padding:12px 14px}

/* Judul kelompok menu (mis. Account Receivable) untuk aplikasi yang menunya
   bertingkat. Aplikasi bermenu datar tidak memunculkan baris ini sama
   sekali, jadi tidak ada judul kosong yang menggantung. */
.caps-group{
  margin:14px 0 6px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--igi-orange);
  border-bottom:1px solid var(--border);padding-bottom:4px;
}
.caps-group:first-child{margin-top:0}
.caps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px}
.caps-item{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:12px;line-height:1.45}
.caps-item input{margin-top:1px;flex:0 0 17px}
.caps-item span{color:var(--text-secondary)}
/* Nama menu yang menonjol; kode teknisnya di bawah, kecil - admin memilih
   berdasarkan nama menu yang dilihat pemakainya, bukan berdasarkan kode. */
.caps-item b{display:block;color:var(--text);font-weight:600;font-size:12px;letter-spacing:.01em}
.caps-item span{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted)}
.caps-item.is-full b{color:var(--igi-orange)}
.caps-item input:disabled + span{opacity:.45}
/* "Boleh akses semua" - di atas daftar menu, lebih menonjol dari satu menu. */
.caps-all{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  padding:10px 12px;margin:0 0 12px;border:1px solid var(--border);
  border-left:3px solid var(--igi-orange);border-radius:var(--radius-md);
  background:var(--igi-orange-soft)}
.caps-all input{margin-top:2px;flex:0 0 17px}
.caps-all b{display:block;color:var(--igi-orange);font-size:12.5px;font-weight:600}
.caps-all small{display:block;margin-top:2px;font-size:11px;color:var(--text-muted);line-height:1.5}
.caps-all input:disabled + span{opacity:.6}
.caps-note{margin:11px 0 0;font-size:11.5px;color:var(--text-muted);line-height:1.6}
.caps-note.hint{margin-top:4px;font-style:italic}
.caps-note.admin{margin-top:0;margin-bottom:10px;color:var(--igi-orange);font-weight:500}

/* Lencana status: membedakan izin yang sudah ditegakkan aplikasinya dari yang
   baru tersimpan. Tanpa ini, admin akan mengira semua centang membatasi. */
.caps-badge{display:inline-block;margin-top:5px;font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill)}
.caps-badge.aktif{background:var(--success-bg);color:var(--success)}
.caps-badge.siap{background:var(--warning-bg);color:var(--warning)}
tr.caps-row.is-ready td{background:var(--surface)}
tr.caps-row.is-ready .caps-arm{background:var(--warning);opacity:.5}

.mx{appearance:none;width:17px;height:17px;border:1px solid var(--muted-2);border-radius:3px;
  cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s;margin:0}
.mx:checked{background:var(--red);border-color:var(--red)}
.mx:checked:after{content:"";display:block;width:4px;height:8px;margin:2px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mx.adm:checked{background:var(--orange);border-color:var(--orange)}
.mx:disabled{opacity:.4;cursor:not-allowed}
.mx:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
td.total b{font-size:13px}
td.act{white-space:nowrap}
td.act .preview-btn+.preview-btn{margin-left:5px}

.preview-btn{border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:50px;
  padding:4px 13px;font-family:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;white-space:nowrap}
.preview-btn:hover{border-color:var(--red);color:var(--red)}
.preview-btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}

.admin-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12px;
  color:var(--muted);font-weight:300;align-items:center}
.admin-note span{display:flex;align-items:center;gap:7px}
.admin-note .path{margin-left:auto;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--muted-2)}
.swatch{width:13px;height:13px;border-radius:3px;border:1px solid var(--muted-2);display:inline-block}
.swatch.on{background:var(--red);border-color:var(--red)}

/* ── riwayat ── */
.audit{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 18px;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink-2);
  max-height:230px;overflow:auto;line-height:1.85}
.audit div+div{border-top:1px solid var(--line);padding-top:3px;margin-top:3px}
.audit .none{color:var(--muted);font-family:var(--font-body);font-weight:300;font-size:13px}

/* ── dialog ── */
dialog{border:0;border-radius:6px;padding:0;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-lg);max-width:430px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog form{padding:28px 30px 26px}
dialog h3{margin:0 0 4px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
dialog .who-line{margin:0 0 20px;font-size:12.5px;color:var(--muted);font-weight:300}
dialog .hint{font-size:11.5px;color:var(--muted-2);font-weight:300;margin:12px 0 0;line-height:1.6}

/* ── pesan singkat ── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1200;
  background:var(--text);color:var(--bg);border-radius:50px;padding:11px 26px;font-size:12.5px;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);max-width:calc(100% - 32px);text-align:center}
.toast.bad{background:var(--danger);color:#fff}

@media (max-width:860px){
  .grid-3{grid-template-columns:1fr}
  .admin-note .path{margin-left:0;width:100%}
  table.matrix th.stick{min-width:160px}
  .matrix-wrap.narrow{width:auto}
  table.matrix.userlist{width:100%;min-width:0}
  table.matrix.userlist th,table.matrix.userlist td{padding:8px 9px}
  table.matrix.userlist th.stick{min-width:0;padding-right:9px}
}
.port .sso{margin-left:7px;font-family:var(--font-body);font-size:8.5px;font-weight:700;
  letter-spacing:.1em;color:#fff;background:var(--red);border-radius:50px;padding:2px 7px;
  vertical-align:middle}

/* ══ Bar jenjang (breadcrumb) ══════════════════════════════════════ */
.crumb{background:var(--card);border-bottom:1px solid var(--line)}
.crumb .container{display:flex;align-items:center;gap:11px;
  padding-top:9px;padding-bottom:9px}
.crumb .mark{width:7px;height:7px;background:var(--red);transform:rotate(45deg);flex:0 0 7px}
.crumb nav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;min-width:0}
.crumb a{color:var(--muted);transition:color .15s}
.crumb a:hover{color:var(--red);text-decoration:underline}
.crumb .sep{color:var(--muted-2);opacity:.65;font-size:13px;line-height:1}
.crumb b{font-weight:600;color:var(--ink)}
.crumb .crumb-end{margin-left:auto;display:flex;align-items:center}

/* ══ Menu di bar atas: Setting dan Akun ═════════════════════════════
   Menggantikan menu kiri (19 Sep 2026) supaya layar data selebar mungkin.
   Duduk di kiri tombol terang/gelap dan memakai bentuk pil yang sama.

   Dibangun dari <details>/<summary>, bukan tombol + JavaScript, supaya
   buka-tutupnya tetap jalan meski skrip gagal dimuat. menu.js hanya
   menutup menu lain, dan menutup semuanya saat klik di luar atau Esc. */

.top-menus{display:flex;align-items:center;gap:8px}
.top-menu{position:relative}
.top-menu>summary{
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:6px 11px 6px 13px;color:var(--text-secondary);cursor:pointer;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .15s,color .15s;user-select:none;
}
.top-menu>summary::-webkit-details-marker{display:none}
.top-menu>summary:hover,.top-menu[open]>summary{border-color:var(--igi-orange);color:var(--igi-orange)}
.top-menu>summary:focus-visible{outline:2px solid var(--igi-orange);outline-offset:2px}
.top-menu.has-on>summary{border-color:var(--igi-orange);color:var(--igi-orange);font-weight:500}
.top-menu .ico{width:14px;height:14px;flex:0 0 14px}
.top-menu .caret{width:10px;height:10px;flex:0 0 10px;opacity:.7;transition:transform .18s}
.top-menu[open] .caret{transform:rotate(180deg)}

.top-drop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:950;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:6px 0;
}
.top-label{display:block;padding:8px 16px 6px;font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid var(--border);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.top-drop a{display:block;padding:9px 16px;font-size:13px;color:var(--text);
  border-left:3px solid transparent;white-space:nowrap}
.top-drop a:hover{background:var(--elevated);color:var(--igi-orange)}
.top-drop a.on{border-left-color:var(--igi-orange);color:var(--igi-orange);
  background:var(--igi-orange-soft);font-weight:500}

/* Di bar jenjang (halaman Ganti Password) menunya berdampingan dengan
   tombol terang/gelap. */
.crumb .crumb-end{gap:8px}

@media (max-width:760px){
  .top-menu .lbl{display:none}
  .top-menu>summary{padding:6px 9px}
}
/* Layar HP: bar atas tidak muat semuanya. Teks logo disembunyikan (logonya
   tetap), dan tombol Keluar yang terpisah juga — Keluar tetap ada di menu
   Akun, jadi tidak ada yang hilang. */
@media (max-width:700px){
  .topnav .logo .text{display:none}
  .whoami{gap:8px}
  .whoami .logout{display:none}
}
@media (prefers-reduced-motion: reduce){
  .top-menu .caret{transition:none}
}

/* Ruas pertama breadcrumb: rumah, titik pulang dari mana pun. */
.crumb .home{display:flex;align-items:center;gap:6px;color:var(--muted)}
.crumb .home svg{width:13px;height:13px;flex:0 0 13px}
.crumb .home:hover{color:var(--red)}