/* ==========================================================================
   app_gmaslahatpro — Portal Tenant
   Diringkas dari web_erp/template/00-design-system/template-design-system.html
   (v3 "Dompet" — bento/rounded). Token & nama class SENGAJA dipertahankan
   sama supaya konsisten kalau komponen lain dari design system itu
   dipakai lagi di modul-modul berikutnya.
   ========================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  --teal-900:#122D28; --teal-700:#17423B; --teal-500:#1E9384;
  --gold-500:#E9AB3D; --gold-300:#F5CD84;
  --cream-50:#EAF4EF; --cream-100:#E4F1EC;
  --ink-900:#141E1B; --ink-700:#3A4C46;
  --coral-500:#F08D73; --coral-300:#F8C4B4;
  --peach-chip:#FAEADD;

  --mint-bg:#D0E6DD; --bg-shell:#EFF6F2;
  --bg:var(--mint-bg); --bg-alt:var(--cream-100); --bg-raised:#ffffff;
  --text:var(--ink-900); --text-dim:#4A615A;
  --accent:var(--teal-900); --accent-soft:var(--teal-500);
  --gold:var(--gold-500); --gold-soft:var(--gold-300);
  --coral:var(--coral-500); --coral-soft:var(--coral-300);
  --line:rgba(18,45,40,0.12); --line-strong:rgba(18,45,40,0.22);
  --tag-bg:rgba(18,45,40,0.07);
  --shadow:0 20px 45px rgba(18,45,40,0.12);
  --shadow-sm:0 6px 16px rgba(18,45,40,0.08);
  --shadow-lg:0 30px 70px -20px rgba(11,25,20,0.30);

  --success-600:#2E7C35; --success-100:rgba(46,124,53,0.12);
  --warning-600:#E9AB3D; --warning-100:rgba(233,171,61,0.16);
  --danger-600:#B63132; --danger-100:rgba(182,49,50,0.10);
  --info-600:var(--teal-500); --info-100:rgba(30,147,132,0.10);
  --ungu-600:#6B4FBB; --ungu-100:rgba(107,79,187,0.12);
  /* Palet grafik (AppGrafik): kategorikal urutan tetap, lolos uji CVD (dataviz validate_palette) di permukaan terang & gelap */
  --grafik-1:#1E9384; --grafik-2:#D9932A; --grafik-3:#6B4FBB; --grafik-4:#E0705A; --grafik-5:#2F72B8; --grafik-6:#7A8F2E; --grafik-netral:#A9BAB3;

  --radius-sm:10px; --radius-md:14px; --radius-lg:22px; --radius-xl:28px; --radius-full:100px; --radius-shell:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  /* Standar visual (CLAUDE.md): skala teks, tinggi kontrol, kepadatan daftar. Komponen daftar/sheet/detail/kepala halaman WAJIB pakai token ini. */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --h-kontrol:40px; --r-kontrol:var(--radius-sm); --ikon-btn:40px; --sentuh:44px;
  --kontrol-latar:var(--bg-raised); --kontrol-garis:1.5px solid var(--line-strong); --kontrol-bayang:0 1px 2px rgba(18,45,40,.08);
  --tinggi-topbar:64px;
  /* Kepadatan "Nyaman" (bawaan); "Rapat" = html[data-kepadatan="rapat"] */
  --baris-py:12px; --baris-px:12px; --baris-hp:56px; --baris-hp-py:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mint-bg:#0B1815; --bg-shell:#101F1A;
    --bg:var(--mint-bg); --bg-alt:#14231D; --bg-raised:#17281F;
    --text:var(--cream-50); --text-dim:#92A69D;
    --accent:var(--gold-300); --accent-soft:var(--gold-500);
    --gold:var(--gold-300); --gold-soft:var(--gold-500);
    --coral:#F5A088; --coral-soft:var(--coral-300);
    --line:rgba(234,244,239,0.14); --line-strong:rgba(234,244,239,0.24);
    --tag-bg:rgba(233,171,61,0.10);
    --shadow:0 20px 45px rgba(0,0,0,0.35); --shadow-sm:0 6px 16px rgba(0,0,0,0.3);
    --success-600:#4FAF58; --success-100:rgba(79,175,88,0.14);
    --warning-600:#E9AB3D; --warning-100:rgba(233,171,61,0.14);
    --danger-600:#E0685B; --danger-100:rgba(224,104,91,0.14);
    --info-600:#3EB39F; --info-100:rgba(62,179,159,0.12);
    --ungu-600:#A18CE6; --ungu-100:rgba(161,140,230,0.16);
    --grafik-1:#2FA391; --grafik-2:#BD8420; --grafik-3:#9079D8; --grafik-4:#D2735C; --grafik-5:#5592D6; --grafik-6:#889A35; --grafik-netral:#4E625A;
  }
}
html[data-kepadatan="rapat"]{ --baris-py:6px; --baris-px:10px; --baris-hp:48px; --baris-hp-py:4px; }
@media (max-width: 767px){ :root{ --tinggi-topbar:56px; } }
:root[data-theme="dark"]{
  --mint-bg:#0B1815; --bg-shell:#101F1A;
  --bg:var(--mint-bg); --bg-alt:#14231D; --bg-raised:#17281F;
  --text:var(--cream-50); --text-dim:#92A69D;
  --accent:var(--gold-300); --accent-soft:var(--gold-500);
  --gold:var(--gold-300); --gold-soft:var(--gold-500);
  --coral:#F5A088; --coral-soft:var(--coral-300);
  --line:rgba(234,244,239,0.14); --line-strong:rgba(234,244,239,0.24);
  --tag-bg:rgba(233,171,61,0.10);
  --shadow:0 20px 45px rgba(0,0,0,0.35); --shadow-sm:0 6px 16px rgba(0,0,0,0.3);
  --success-600:#4FAF58; --success-100:rgba(79,175,88,0.14);
  --warning-600:#E9AB3D; --warning-100:rgba(233,171,61,0.14);
  --danger-600:#E0685B; --danger-100:rgba(224,104,91,0.14);
  --info-600:#3EB39F; --info-100:rgba(62,179,159,0.12);
  --ungu-600:#A18CE6; --ungu-100:rgba(161,140,230,0.16);
  --grafik-1:#2FA391; --grafik-2:#BD8420; --grafik-3:#9079D8; --grafik-4:#D2735C; --grafik-5:#5592D6; --grafik-6:#889A35; --grafik-netral:#4E625A;
}

/* ============ 2. RESET & BASE ============ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden;} /* panel kanan tertutup (translateX 100%) tidak boleh melebarkan viewport tablet */
body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease;}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif; margin:0; color:var(--text);}
p{margin:0;}
a{color:inherit;}
button{font:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
img,svg{display:block;}
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

.tx-h1{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:22px; line-height:1.3;}
.tx-h2{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:17px; line-height:1.35;}
.tx-h3{font-family:'Plus Jakarta Sans'; font-weight:700; font-size:14.5px; line-height:1.35;}
.tx-small{font-family:'Inter'; font-size:12.5px; line-height:1.5; color:var(--text-dim);}
.tx-mono-label{font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim);}

.ic{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; color:currentColor;}
.ic svg{width:100%; height:100%;}
.ic-sm{width:16px; height:16px;}
.ic-lg{width:24px; height:24px;}

/* ============ 3. APP SHELL ============ */
.app-shell{display:flex; min-height:100vh; background:var(--bg); overflow-x:clip;} /* elemen lebar tidak boleh melebarkan halaman (tablet: sidebar sticky ikut mengecil) */
.app-content > .card.ts{ min-width:0; max-width:100%; }
.app-sidebar{
  width:252px; flex:none; background:var(--bg-raised); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh; z-index:40;
  transition:transform .2s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.brand-mark{ width:34px; height:34px; border-radius:10px; flex:none; object-fit:cover; display:block; }
.brand-inisial{ display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--bg-raised); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:13px; }
.brand-name{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:15px; }
.brand-name{ min-width:0; }
.brand-name .brand-nama, .brand-name small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.sidebar-brand .brand-name{ flex:1; }
.auth-brand .brand-name{ max-width:calc(100% - 48px); }
.brand-name small{ display:block; font-family:'IBM Plex Mono'; font-weight:500; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }

.sidebar-nav{ flex:1; min-height:0; overflow-y:auto; padding:6px 12px 12px; }
.nav-group-label{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:16px 10px 6px; }
.nav-item, .nav-toggle{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--text-dim); text-decoration:none; font-size:14px; font-weight:600; cursor:pointer;
  border:none; margin-bottom:2px; background:none; width:100%; text-align:left;
}
.nav-item:hover, .nav-toggle:hover{ background:var(--bg-alt); color:var(--text); }
.nav-item.active{ background:var(--gold-soft); color:var(--ink-900); border-radius:var(--radius-md); font-weight:700; }
.nav-item .ic, .nav-toggle .ic{ opacity:.85; }
.nav-item .fas, .nav-toggle .fas{ width:20px; text-align:center; opacity:.85; flex:none; }
.nav-toggle .chevron{ margin-left:auto; width:auto; font-size:10px; transition:transform .15s ease; }
.nav-toggle[aria-expanded="true"] .chevron{ transform:rotate(-90deg); }
.nav-item .nav-dot, .nav-toggle .nav-dot{ font-size:6px; opacity:.6; }
.nav-group-label.has-active{ color:var(--text); }
.nav-toggle.has-active{ color:var(--text); font-weight:700; }
.nav-sub{ padding-left:20px; overflow:hidden; }
/* Ikon item dropdown: lingkaran (aktif = lingkaran bertitik, teks tebal); latar aktif abu lembut seperti referensi. */
.nav-sub .nav-circle{ font-size:15px; opacity:.7; }
.nav-sub .nav-item.active{ background:var(--bg-alt); color:var(--text); font-weight:700; }
.nav-sub .nav-item.active .nav-circle{ opacity:1; }
.nav-sub[hidden]{ display:none; }

.sidebar-footer{ padding:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.avatar:has(> img){ background:var(--bg-raised); padding:0; flex:none; outline:2px solid var(--line-strong); outline-offset:-2px; } /* <button> punya padding bawaan + border:none inline → foto lonjong; padding 0 + ring outline */
.avatar:has(> img) img{ padding:3px; box-sizing:border-box; } /* foto sedikit masuk seperti di Profil → logo tidak terpotong */
a.menu-item{ text-decoration:none; }
.avatar{ overflow:hidden; width:34px; height:34px; border-radius:100px; background:var(--teal-500); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; flex:none; }
.sidebar-footer .who{ flex:1; min-width:0; }
.sidebar-keluar{ flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color:var(--text-dim); text-decoration:none; }
.sidebar-keluar:hover{ background:var(--danger-100); color:var(--danger-600); }
.sidebar-keluar:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.sidebar-footer .who b{ display:block; font-size:12.5px; }
.sidebar-footer .who span{ display:block; font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--text-dim); }

.sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:35; }
.sidebar-scrim.show{ display:block; }

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
  height:64px; flex:none; display:flex; align-items:center; gap:6px; padding:0 14px;
  border-bottom:1px solid var(--line); background:var(--bg-raised); position:sticky; top:0; z-index:30;
}
.topbar-spacer{ flex:1; }
.app-topbar .sidebar-toggle-btn{ width:40px; height:40px; margin-right:2px; }
.icon-btn{ width:44px; height:44px; border-radius:var(--radius-sm); border:none; background:transparent; color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.icon-btn:hover{ background:var(--bg-alt); color:var(--text); }

.app-content{ flex:1; padding:24px 28px 56px; max-width:1320px; width:100%; margin:0 auto; }
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.breadcrumb{ font-family:'IBM Plex Mono'; font-size:var(--fs-11); text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:var(--sp-2); }

/* ============ CONTEXT SWITCHER (header pill — poin 4 spec) ============ */
.context-switch{ display:flex; align-items:center; gap:6px; }
.context-pill{
  display:flex; align-items:center; gap:9px; padding:6px 12px 6px 8px; border-radius:var(--radius-full);
  border:1.5px solid var(--line); background:var(--bg-alt); cursor:pointer; text-align:left;
}
.context-pill:hover{ border-color:var(--line-strong); }
.context-pill .ctx-icon{ width:26px; height:26px; border-radius:100px; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; flex:none; }
.context-pill .ctx-text{ display:flex; flex-direction:column; line-height:1.2; }
.context-pill .ctx-label{ font-family:'IBM Plex Mono'; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.context-pill .ctx-value{ font-family:'Plus Jakarta Sans'; font-weight:700; font-size:12.5px; color:var(--text); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.context-sep{ color:var(--line-strong); }

/* ============ PILL KONTEKS ERP "Proyek › Modul" + panel 2 kolom (roadmap B1) ============ */
.ctx-wrap{ min-width:0; flex:0 1 auto; }
.ctx-pill{
  display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:440px; height:44px; padding:0 12px 0 6px;
  border-radius:var(--radius-full); border:1.5px solid var(--line); background:var(--bg-alt); color:var(--text);
  font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; cursor:pointer; text-align:left;
}
.ctx-pill:not(.is-statis):hover{ border-color:var(--line-strong); }
.ctx-pill.is-statis{ cursor:default; padding-right:16px; }
.ctx-pill-ikon{ width:30px; height:30px; border-radius:100px; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; flex:none; }
.ctx-pill-proyek, .ctx-pill-modul{ min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-pill-proyek{ max-width:200px; }
.ctx-pill-modul{ max-width:150px; }
.ctx-pill-sep{ color:var(--text-dim); font-weight:500; flex:none; }
.ctx-pill-modul-ikon{ width:24px; height:24px; border-radius:7px; font-size:11px; }
.ctx-pill-panah{ color:var(--text-dim); transition:transform .15s ease; }
.ctx-pill[aria-expanded="true"] .ctx-pill-panah{ transform:rotate(180deg); }

.ctx-panel{ width:min(920px, calc(100vw - 32px)); padding:0; max-height:min(calc(100vh - 88px), 600px); overflow:hidden; }
.menu-pop.ctx-panel.show{ display:flex; flex-direction:column; }
/* baris grid dibatasi tinggi panel → tiap kolom menggulir sendiri (panel tidak ikut tergulir & terpotong atasnya) */
.ctx-panel-body{ display:grid; grid-template-columns:minmax(260px, 320px) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); flex:1; min-height:0; }
.ctx-kol{ padding:8px; min-height:0; overflow-y:auto; }
.ctx-kol-proyek{ display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--bg-shell); }
.ctx-cari{ position:relative; margin:2px 2px 8px; color:var(--text-dim); }
.ctx-cari .ic{ position:absolute; left:10px; top:50%; transform:translateY(-50%); }
.ctx-cari input{ width:100%; height:36px; padding:0 10px 0 32px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); font:13px 'Inter', sans-serif; }
.ctx-cari input:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.ctx-proyek-list{ flex:1; overflow-y:auto; }
.ctx-dev-label{ font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:10px 10px 4px; }
.ctx-proyek{ display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:8px 10px; border:none; border-radius:var(--radius-sm); background:none; color:var(--text); font:13px 'Inter', sans-serif; text-align:left; cursor:pointer; }
.ctx-proyek:hover{ background:var(--bg-alt); }
.ctx-proyek.is-sorot{ background:var(--bg-raised); box-shadow:inset 3px 0 0 var(--accent-soft), var(--shadow-sm); font-weight:600; }
.ctx-proyek .ic{ color:var(--text-dim); }
.ctx-proyek[aria-current="true"] .ic{ color:var(--accent-soft); }
.ctx-proyek-nama{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-proyek-jml{ flex:none; font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--text-dim); }
/* Baris "Semua …" (mode lihat gabungan) — gaya tetap .ctx-proyek, hanya ikon FA & garis pemisah */
.ctx-proyek-semua > .fas{ flex:none; width:16px; text-align:center; font-size:12px; color:var(--text-dim); }
.ctx-proyek-semua[aria-current="true"] > .fas{ color:var(--accent-soft); }
.ctx-modul-cakupan{ position:absolute; top:10px; right:10px; font-family:'IBM Plex Mono'; font-size:10px; font-weight:500; line-height:1.2; color:var(--text-dim); opacity:.85; }
.ctx-pill-mode{ flex:none; padding:2px 7px; border-radius:var(--radius-full); background:var(--warning-100); color:var(--text); border:1px solid var(--warning-600); font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; line-height:1.3; white-space:nowrap; }
.app-topbar.is-gabung{ box-shadow:inset 0 -3px 0 var(--gold); }
.ctx-kosong{ padding:16px 10px; text-align:center; font-size:12.5px; color:var(--text-dim); }
.ctx-modul-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:4px 2px 2px; }
.ctx-modul-kartu{
  --tema:var(--accent-soft); position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-height:72px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised);
  color:var(--text); font-family:'Plus Jakarta Sans'; font-weight:700; font-size:12.5px; line-height:1.3; text-align:left; cursor:pointer;
}
.ctx-modul-kartu:hover{ border-color:var(--tema); }
.ctx-modul-kartu.is-aktif{ border-color:var(--tema); box-shadow:inset 0 0 0 1px var(--tema); cursor:default; }
.ctx-modul-ikon{ width:32px; height:32px; border-radius:10px; background:var(--tema); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ctx-modul-nama{ word-break:break-word; }
.ctx-modul-cek{ position:absolute; top:10px; right:10px; color:var(--tema); }
.ctx-modul-kartu.is-memuat{ opacity:.65; cursor:progress; }
.ctx-modul-kartu.is-memuat::after{ content:''; position:absolute; top:10px; right:10px; width:14px; height:14px; border-radius:100px; border:2px solid var(--line-strong); border-top-color:var(--tema); animation:spin .7s linear infinite; }
.ctx-panel-foot{ flex:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:6px 10px; border-top:1px solid var(--line); background:var(--bg-alt); border-radius:0 0 var(--radius-sm) var(--radius-sm); }
.ctx-panel-foot .menu-item{ width:auto; flex:none; font-weight:600; color:var(--accent); }
.ctx-default-baris{ display:flex; align-items:center; flex:0 1 auto; min-width:0; }
.info-tip.atas::after{ top:auto; bottom:calc(100% + 4px); width:260px; }
.ctx-default-baris .info-tip{ flex:none; width:32px; height:32px; margin-left:0; }
.ctx-default-baris .info-tip:last-child::after{ left:auto; right:0; }
.ctx-default{ display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:6px 4px; cursor:pointer; flex:0 1 auto; }
.ctx-default input{ flex:none; width:16px; height:16px; margin-top:3px; accent-color:var(--accent); cursor:pointer; }
.ctx-default span{ display:flex; flex-direction:column; font-size:13px; font-weight:600; color:var(--text); line-height:1.3; align-self:center; }
.ctx-default small{ font-size:11.5px; font-weight:400; color:var(--text-muted, var(--text)); opacity:.7; }

/* ============ KOLOM CARI HEADER + COMMAND PALETTE (⌘K / Ctrl+K) ============ */
.hdr-search{
  display:flex; align-items:center; gap:8px; flex:1 1 480px; max-width:480px; min-width:0; height:40px; padding:0 8px 0 12px;
  border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt); color:var(--text-dim);
  font:13px 'Inter', sans-serif; text-align:left; cursor:text;
}
.hdr-search:hover{ border-color:var(--line-strong); }
.hdr-search-teks{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdr-search-kbd, .cmdk kbd{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; line-height:1; padding:3px 6px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; background:var(--bg-raised); color:var(--text-dim); white-space:nowrap; }
.icon-btn[aria-disabled="true"]{ opacity:.55; cursor:default; }
.icon-btn[aria-disabled="true"]:hover{ background:transparent; color:var(--text-dim); }

body.cmdk-terbuka{ overflow:hidden; }
.cmdk-backdrop{ position:fixed; inset:0; z-index:160; display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; background:rgba(11,25,20,.45); }
.cmdk{ width:100%; max-width:600px; max-height:min(72vh, 560px); display:flex; flex-direction:column; overflow:hidden; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); animation:toast-masuk .15s ease; }
.cmdk-cari{ display:flex; align-items:center; gap:10px; padding:6px 6px 6px 16px; border-bottom:1px solid var(--line); color:var(--text-dim); }
.cmdk-cari input{ flex:1; min-width:0; height:44px; border:none; outline:none; background:transparent; color:var(--text); font:15px 'Inter', sans-serif; }
.cmdk-hasil{ flex:1; min-height:0; overflow-y:auto; padding:4px 8px 8px; }
.cmdk-grup-label{ font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:10px 10px 4px; }
.cmdk-item{ display:flex; align-items:center; gap:12px; min-height:44px; padding:7px 10px; border-radius:var(--radius-sm); color:var(--text); cursor:pointer; }
.cmdk-item.is-aktif{ background:var(--bg-alt); box-shadow:inset 3px 0 0 var(--accent-soft); }
.cmdk-item.is-memuat{ opacity:.6; cursor:progress; }
.cmdk-ikon{ --tema:var(--accent-soft); width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--tag-bg); color:var(--text-dim); font-size:13px; }
.cmdk-ikon.berwarna{ background:var(--tema); color:#fff; }
.cmdk-teks{ display:flex; flex-direction:column; min-width:0; }
.cmdk-judul{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-induk, .cmdk-sep{ color:var(--text-dim); font-weight:500; }
.cmdk-sub{ font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-kosong{ text-align:center; padding:36px 16px; color:var(--text-dim); font-size:13px; }
.cmdk-kosong .ic{ margin:0 auto 10px; opacity:.6; }
.cmdk-kaki{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-dim); }
.cmdk-kaki kbd + kbd{ margin-left:-2px; }
/* Laptop/tablet (≥576px): palette lebih lebar & tinggi supaya hasil banyak tak perlu banyak scroll. */
@media (min-width: 576px){
  .cmdk-backdrop{ padding-top:8vh; }
  .cmdk{ max-width:760px; max-height:min(84vh, 760px); }
  .cmdk-cari{ padding:8px 8px 8px 20px; }
  .cmdk-cari input{ height:52px; font-size:16px; }
  .cmdk-hasil{ padding:6px 10px 10px; }
  .cmdk-item{ min-height:50px; padding:8px 12px; }
  .cmdk-ikon{ width:34px; height:34px; font-size:14px; }
  .cmdk-judul{ font-size:14.5px; }
  .cmdk-sub{ font-size:12.5px; }
}

/* Responsif header ERP: tablet (≤991) pill & cari menyempit; HP (≤575) cari jadi ikon,
   panel & palette layar penuh, target sentuh ≥44px. */
@media (max-width: 991px){
  .ctx-pill-proyek{ max-width:140px; }
  .ctx-pill-modul{ max-width:110px; }
  .ctx-panel{ width:min(680px, calc(100vw - 32px)); }
  .ctx-panel-body{ grid-template-columns:minmax(240px, 280px) minmax(0, 1fr); }
  .ctx-modul-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .hdr-search-kbd{ display:none; }
}
@media (max-width: 575px){
  .app-main > .app-topbar{ padding:0 12px; gap:6px; }
  .ctx-wrap{ flex:1 1 auto; }
  .ctx-pill{ max-width:100%; padding-left:12px; }
  .ctx-pill-ikon{ display:none; }
  .ctx-pill-proyek, .ctx-pill-modul{ max-width:none; }
  .hdr-search{ flex:none; width:44px; height:44px; padding:0; justify-content:center; }
  .hdr-search-teks{ display:none; }
  .ctx-panel{ position:fixed; top:64px; left:8px; right:8px; width:auto; max-height:calc(100vh - 80px); }
  .ctx-panel-body{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; overflow-y:auto; }
  .ctx-kol{ overflow:visible; }
  .ctx-kol-proyek{ border-right:none; border-bottom:1px solid var(--line); }
  .ctx-proyek-list{ max-height:38vh; }
  .ctx-proyek{ min-height:44px; }
  .ctx-cari input{ height:44px; font-size:16px; }
  .ctx-panel-foot .menu-item{ min-height:44px; }
  .cmdk-backdrop{ padding:0; }
  .cmdk{ max-width:none; height:100%; max-height:none; border-radius:0; border:none; }
  .cmdk-cari input{ font-size:16px; }
  .cmdk-kaki{ display:none; }
}

/* ============ 4. BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13.5px; padding:0 18px; height:40px; border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-primary{ background:var(--accent); color:var(--bg); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(11,74,67,0.25); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn .spin{ width:14px; height:14px; border-radius:100px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ 5. FORM ============ */
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-field label .pop-info-wrap{ text-transform:none; letter-spacing:0; font-family:'Inter'; font-weight:400; margin-left:2px; vertical-align:middle; }
.form-field label .pop-info-btn{ width:28px; height:28px; margin:-6px -4px; }
.form-field label .pop-info{ cursor:default; white-space:normal; }
.form-field label{ font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.form-field input[type=text], .form-field input[type=search], .form-field input[type=password], .form-field input[type=email], .form-field input[type=tel], .form-field input[type=file], .form-field input[type=number], .form-field input[type=time], .form-field input[type=date], .form-field input[type=url], .form-field input[type=datetime-local], .form-field textarea, .form-field select{
  font-family:'Inter'; font-size:13.5px; color:var(--text);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; width:100%;
}
.form-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A615A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea{ border-color:var(--danger-600); }
.form-field.has-error .upload-card{ border-color:var(--danger-600); }
/* FormValidasi: tab yang memuat galat diberi titik merah */
.tab-btn.ada-galat::after, [role="tab"].ada-galat::after{ content:""; flex:none; width:8px; height:8px; margin-left:6px; border-radius:var(--radius-full); background:var(--danger-600); display:inline-block; }
.wajib{ color:var(--danger-600); font-weight:700; }
.form-field input[readonly]{ background:var(--bg-alt); color:var(--text-dim); cursor:not-allowed; }
.field-hint{ font-size:12px; color:var(--text-dim); margin:0; }
.field-hint.error{ color:var(--danger-600); font-size:12px; display:flex; align-items:center; gap:5px; }
.input-affix{ position:relative; }
.input-affix .ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); }
.input-affix input{ padding-left:38px !important; }
/* .pw-wrap = pembungkus otomatis app.js (tampil/sembunyi password) untuk input password tanpa .input-affix */
.pw-wrap{ position:relative; display:block; }
.pw-wrap > input{ width:100%; padding-right:44px !important; }
.input-affix .toggle-eye, .pw-wrap .toggle-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-dim); cursor:pointer; padding:6px; }

/* ============ 6. CARDS & AUTH ============ */
.card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; }

/* --- Modern Auth Experience (Login, Lupa Password, Reset Password) --- */
.auth-shell{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px 16px;
  position:relative; overflow:hidden;
}

/* Ambient animated backdrop orbs */
.auth-bg-ambient{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none; z-index:0;
}
.auth-orb{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.75;
  will-change:transform;
}
.auth-orb-1{
  top:-120px; left:-100px;
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(30,147,132,.30) 0%, rgba(30,147,132,.08) 50%, transparent 70%);
  animation:authOrbFloat1 18s ease-in-out infinite alternate;
}
.auth-orb-2{
  bottom:-140px; right:-120px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(233,171,61,.22) 0%, rgba(233,171,61,.06) 50%, transparent 70%);
  animation:authOrbFloat2 22s ease-in-out infinite alternate;
}
.auth-orb-3{
  top:35%; right:15%;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(18,45,40,.10) 0%, transparent 70%);
  animation:authOrbFloat3 16s ease-in-out infinite alternate;
}
.auth-grid-pattern{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(18,45,40,.08) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  opacity:.6;
}

:root[data-theme="dark"] .auth-orb-1{
  background:radial-gradient(circle, rgba(30,147,132,.22) 0%, rgba(30,147,132,.05) 50%, transparent 70%);
}
:root[data-theme="dark"] .auth-orb-2{
  background:radial-gradient(circle, rgba(233,171,61,.18) 0%, rgba(233,171,61,.04) 50%, transparent 70%);
}
:root[data-theme="dark"] .auth-orb-3{
  background:radial-gradient(circle, rgba(79,175,88,.14) 0%, transparent 70%);
}
:root[data-theme="dark"] .auth-grid-pattern{
  background-image:radial-gradient(rgba(234,244,239,.08) 1px, transparent 1px);
  opacity:.35;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-orb-1{
    background:radial-gradient(circle, rgba(30,147,132,.22) 0%, rgba(30,147,132,.05) 50%, transparent 70%);
  }
  :root:not([data-theme="light"]) .auth-orb-2{
    background:radial-gradient(circle, rgba(233,171,61,.18) 0%, rgba(233,171,61,.04) 50%, transparent 70%);
  }
  :root:not([data-theme="light"]) .auth-orb-3{
    background:radial-gradient(circle, rgba(79,175,88,.14) 0%, transparent 70%);
  }
  :root:not([data-theme="light"]) .auth-grid-pattern{
    background-image:radial-gradient(rgba(234,244,239,.08) 1px, transparent 1px);
    opacity:.35;
  }
}

@keyframes authOrbFloat1{
  0%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(45px, 35px) scale(1.08); }
  100%{ transform:translate(-25px, 60px) scale(0.95); }
}
@keyframes authOrbFloat2{
  0%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(-40px, -50px) scale(1.1); }
  100%{ transform:translate(35px, -25px) scale(0.92); }
}
@keyframes authOrbFloat3{
  0%{ transform:translate(0, 0) scale(1); opacity:.35; }
  50%{ transform:translate(-30px, 25px) scale(1.12); opacity:.65; }
  100%{ transform:translate(25px, -15px) scale(0.9); opacity:.35; }
}

/* Auth Card */
.auth-card{
  position:relative; z-index:1;
  width:100%; max-width:400px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.85);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 50px -12px rgba(18,45,40,0.13), 0 4px 16px rgba(18,45,40,0.04), 0 0 0 1px rgba(18,45,40,0.04);
  padding:36px 30px 28px;
  animation:authCardEntrance .55s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:transform .2s ease, box-shadow .2s ease;
}

:root[data-theme="dark"] .auth-card{
  background:rgba(23,40,31,0.90);
  border-color:rgba(234,244,239,0.12);
  box-shadow:0 24px 50px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(234,244,239,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-card{
    background:rgba(23,40,31,0.90);
    border-color:rgba(234,244,239,0.12);
    box-shadow:0 24px 50px -10px rgba(0,0,0,0.45), 0 0 0 1px rgba(234,244,239,0.06);
  }
}

@keyframes authCardEntrance{
  0%{ opacity:0; transform:translateY(22px) scale(0.97); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* Shake feedback on error */
.auth-card.shake{
  animation:authShake .45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes authShake{
  0%, 100%{ transform:translateX(0); }
  20%, 60%{ transform:translateX(-6px); }
  40%, 80%{ transform:translateX(6px); }
}

/* Stagger entrance motion for card contents */
.auth-stagger{
  animation:authStaggerIn .5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-stagger-1{ animation-delay:.08s; }
.auth-stagger-2{ animation-delay:.16s; }
.auth-stagger-3{ animation-delay:.24s; }
.auth-stagger-4{ animation-delay:.32s; }
.auth-stagger-5{ animation-delay:.40s; }
.auth-stagger-6{ animation-delay:.48s; }

@keyframes authStaggerIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Auth Brand Header */
.auth-brand{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:24px; text-decoration:none;
}
.auth-brand-logo{
  width:44px; height:44px; border-radius:12px;
  background:#ffffff; padding:4px;
  box-shadow:0 4px 14px rgba(18,45,40,0.08), 0 0 0 1px rgba(18,45,40,0.06);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-brand-logo img, .auth-brand img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
.auth-brand:hover .auth-brand-logo{
  transform:scale(1.05);
}
.auth-brand .brand-name{
  text-align:left;
}
.auth-brand .brand-nama{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:800;
  color:var(--text); letter-spacing:-0.01em; line-height:1.2; display:block;
}
.auth-brand small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-top:2px;
}
.auth-judul{ font-family:'Plus Jakarta Sans'; font-size:18px; font-weight:700; margin:0 0 6px; color:var(--text); }
.auth-lupa{ margin:-6px 0 14px; text-align:right; font-size:13px; }

/* Refined Form Controls inside Auth Card */
.auth-card .form-field{
  margin-bottom:18px;
}
.auth-card .form-field label{
  display:block; margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);
}
.auth-card .input-affix{
  position:relative; width:100%;
}
.auth-card .input-affix .ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-dim);
  pointer-events:none; transition:color .2s ease, transform .2s ease; z-index:2;
}
.auth-card .input-affix input{
  width:100%; height:46px;
  padding:0 14px 0 42px !important;
  font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:500;
  color:var(--text); background:rgba(255,255,255,0.96);
  border:1.5px solid var(--line-strong); border-radius:var(--radius-md);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 1px 2px rgba(18,45,40,0.03);
}
:root[data-theme="dark"] .auth-card .input-affix input{
  background:rgba(20,35,29,0.9);
  border-color:rgba(234,244,239,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-card .input-affix input{
    background:rgba(20,35,29,0.9);
    border-color:rgba(234,244,239,0.18);
  }
}
.auth-card .input-affix input:hover{
  border-color:rgba(30,147,132,0.45);
}
.auth-card .input-affix input:focus{
  outline:none;
  background:#ffffff;
  border-color:var(--teal-500);
  box-shadow:0 0 0 4px rgba(30,147,132,0.14), 0 2px 6px rgba(18,45,40,0.04);
}
:root[data-theme="dark"] .auth-card .input-affix input:focus{
  background:rgba(23,40,31,1);
  box-shadow:0 0 0 4px rgba(62,179,159,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-card .input-affix input:focus{
    background:rgba(23,40,31,1);
    box-shadow:0 0 0 4px rgba(62,179,159,0.18);
  }
}
.auth-card .input-affix:focus-within .ic{
  color:var(--teal-500);
  transform:translateY(-50%) scale(1.08);
}
.auth-card .input-affix .toggle-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:var(--radius-sm);
  background:transparent; border:none; color:var(--text-dim);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all .15s ease; z-index:2;
}
.auth-card .input-affix .toggle-eye:hover{
  background:var(--tag-bg); color:var(--text);
}
.auth-card .input-affix .toggle-eye:active{
  transform:translateY(-50%) scale(0.92);
}

/* Auth Options Row (Remember me + Forgot password) */
.auth-row-options{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:4px 0 20px; min-height:24px;
}
.auth-remember-wrap{
  display:inline-flex; align-items:center; gap:6px;
}
.auth-checkbox-label{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; user-select:none; font-family:'Inter',system-ui,sans-serif;
  font-size:12.5px; font-weight:500; color:var(--text);
  margin:0; text-transform:none; letter-spacing:0;
}
.auth-checkbox-input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.auth-checkbox-box{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--line-strong); background:rgba(255,255,255,0.9);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .18s cubic-bezier(0.16, 1, 0.3, 1);
  flex:none; color:#ffffff; font-size:10px;
}
:root[data-theme="dark"] .auth-checkbox-box{
  background:rgba(20,35,29,0.9);
  border-color:rgba(234,244,239,0.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-checkbox-box{
    background:rgba(20,35,29,0.9);
    border-color:rgba(234,244,239,0.22);
  }
}
.auth-checkbox-box i{
  opacity:0; transform:scale(0.5);
  transition:all .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-checkbox-label:hover .auth-checkbox-box{
  border-color:var(--teal-500);
}
.auth-checkbox-input:checked + .auth-checkbox-box{
  background:var(--accent);
  border-color:var(--accent);
}
.auth-checkbox-input:checked + .auth-checkbox-box i{
  opacity:1; transform:scale(1);
}
.auth-checkbox-input:focus-visible + .auth-checkbox-box{
  outline:2px solid var(--gold); outline-offset:2px;
}
.auth-remember-wrap .pop-info-wrap{
  margin-left:0;
}
.auth-remember-wrap .pop-info-btn{
  width:24px; height:24px; font-size:13px; color:var(--text-dim);
  opacity:.75; transition:opacity .15s ease, color .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.auth-remember-wrap .pop-info-btn:hover{
  opacity:1; color:var(--teal-500);
}
.auth-forgot-link{
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px; font-weight:600;
  color:var(--teal-700); text-decoration:none;
  transition:color .15s ease; white-space:nowrap; margin-left:auto;
}
:root[data-theme="dark"] .auth-forgot-link{
  color:var(--gold-300);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-forgot-link{
    color:var(--gold-300);
  }
}
.auth-forgot-link:hover{
  color:var(--teal-500); text-decoration:underline; text-underline-offset:3px;
}

/* Submit Button & Micro-interactions */
.auth-btn-submit{
  height:46px; border-radius:var(--radius-md);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:.02em; border:none;
  background:linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900) 100%);
  color:#ffffff;
  box-shadow:0 8px 20px -3px rgba(18,45,40,0.28), 0 2px 6px rgba(18,45,40,0.12);
  transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  position:relative; overflow:hidden;
}
.auth-btn-submit::after{
  content:'';
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:skewX(-20deg);
  transition:left .75s ease;
}
.auth-btn-submit:hover::after{
  left:140%;
}
:root[data-theme="dark"] .auth-btn-submit{
  background:linear-gradient(135deg, var(--gold-500) 0%, #ca8a04 100%);
  color:var(--teal-900);
  box-shadow:0 8px 20px -3px rgba(233,171,61,0.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-btn-submit{
    background:linear-gradient(135deg, var(--gold-500) 0%, #ca8a04 100%);
    color:var(--teal-900);
    box-shadow:0 8px 20px -3px rgba(233,171,61,0.3);
  }
}
.auth-btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -4px rgba(18,45,40,0.36);
}
.auth-btn-submit:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(18,45,40,0.2);
}
.auth-btn-submit[disabled]{
  opacity:.65; cursor:not-allowed; transform:none;
}
.auth-btn-loader{
  display:inline-flex; align-items:center; gap:8px;
}
.auth-btn-loader .spin{
  width:15px; height:15px; border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .65s linear infinite;
}
:root[data-theme="dark"] .auth-btn-loader .spin{
  border:2px solid rgba(18,45,40,0.25);
  border-top-color:var(--teal-900);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-btn-loader .spin{
    border:2px solid rgba(18,45,40,0.25);
    border-top-color:var(--teal-900);
  }
}

/* Footer text */
.auth-footer-text{
  font-family:'Inter',system-ui,sans-serif; font-size:12px;
  color:var(--text-dim); text-align:center;
  margin:20px 0 0; line-height:1.5;
}

.auth-tema{ position:absolute; top:12px; right:12px; }
.auth-aman{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:12px 0 0; font-size:12px; color:var(--success-600);
}
.auth-versi{ margin:6px 0 0; font-size:11px; color:var(--text-dim); text-align:center; }

/* Modern Alerts inside Auth */
.auth-card .alert{
  border-radius:var(--radius-md); padding:12px 14px;
  font-size:13px; line-height:1.45;
  animation:authAlertIn .3s cubic-bezier(0.16, 1, 0.3, 1) both;
  align-items:center;
}
@keyframes authAlertIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width: 767px){
  .auth-card{ padding:30px 22px 24px; border-radius:var(--radius-lg); }
  .auth-card .input-affix input{ font-size:16px; }
}

.pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.pick-card{ background:var(--bg-raised); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:18px; cursor:pointer; text-align:left; width:100%; }
.pick-card:hover{ border-color:var(--accent-soft); }
.pick-card.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pick-card .pick-icon{ width:38px; height:38px; border-radius:10px; background:var(--tag-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.pick-card h3{ font-size:14.5px; }
.pick-card .tx-small{ margin-top:4px; }

.alert{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius-md); font-size:13px; margin-bottom:16px; }
.alert-danger{ background:var(--danger-100); color:var(--danger-600); }
.alert-info{ background:var(--info-100); color:var(--accent); }
.alert-success{ background:var(--success-100); color:var(--success-600); }

/* ============ MENU AKSI / DROPDOWN (dipakai ulang untuk context switch & profile) ============ */
.menu-wrap{ position:relative; display:inline-flex; }
.menu-pop{ display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:260px; max-height:70vh; overflow-y:auto; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:100; padding:6px; }
.menu-pop.align-right{ left:auto; right:0; }
.menu-pop.show{ display:block; }
.menu-pop-label{ font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:8px 10px 4px; }
.menu-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:var(--radius-sm); border:none; background:none; font-family:'Inter'; font-size:13px; color:var(--text); cursor:pointer; text-align:left; }
.menu-item:hover{ background:var(--bg-alt); }
.menu-item.active{ background:var(--gold-soft); color:var(--ink-900); font-weight:600; }
.menu-item.danger{ color:var(--danger-600); }
.menu-divider{ height:1px; background:var(--line); margin:6px 4px; }
/* Baris "Mode gelap" di menu avatar: hanya HP <768px (≥768px pakai #themeToggleBtn di header). */
.menu-item.menu-tema{ display:none; }
.switch-mini{ position:relative; flex:none; width:34px; height:20px; margin-left:auto; border-radius:100px; background:var(--line-strong); transition:background .15s ease; }
.switch-mini::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease; }
.menu-tema[aria-checked="true"] .switch-mini, [role="switch"][aria-checked="true"] .switch-mini{ background:var(--accent-soft); }
.menu-tema[aria-checked="true"] .switch-mini::after, [role="switch"][aria-checked="true"] .switch-mini::after{ transform:translateX(14px); }
@media (max-width: 767px){ .menu-item.menu-tema{ display:flex; min-height:44px; } }

.empty-state{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state .ic{ width:48px; height:48px; margin:0 auto 14px; color:var(--text-dim); opacity:.6; }

/* ============ 7. TABS (Pengaturan Proyek) ============ */
.tab-list{ position:relative; display:flex; width:fit-content; max-width:100%; gap:4px; flex-wrap:wrap; margin-bottom:20px; padding:6px; background:color-mix(in srgb, var(--text) 8%, transparent); border-radius:var(--radius-lg); }   /* tab segmen: lintasan + pil aktif terangkat */
.tab-btn{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border:none; background:none; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; color:var(--text-dim); cursor:pointer; border-radius:var(--radius-md); transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.tab-btn .fas{ color:var(--text-dim); opacity:.7; }
.tab-btn:hover{ background:color-mix(in srgb, var(--text) 6%, transparent); color:var(--text); }
.tab-btn.active{ background:var(--bg-raised); color:var(--text); font-weight:800; box-shadow:var(--shadow-sm); }
.tab-btn.active .fas{ color:var(--accent-soft); opacity:1; }
/* Angka di tab (Pusat Persetujuan): netral; .tab-hitung-aksen = perlu tindakan */
.tab-hitung{ flex:none; min-width:20px; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text-dim); font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.tab-hitung-aksen{ background:var(--danger-600); color:#fff; }
a.tab-btn{ text-decoration:none; }   /* tab berupa tautan (pindah halaman), mis. Daftar · Pipeline CRM */
.tab-panel[hidden]{ display:none; }

/* ============ UPLOAD (Logo Proyek) ============ */
.upload-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.upload-card{ border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); padding:16px; text-align:center; }
.upload-preview{ width:100%; height:110px; border-radius:var(--radius-sm); background:var(--bg-alt); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:10px; color:var(--text-dim); }
.upload-preview img{ width:100%; height:100%; object-fit:contain; }
.upload-card input[type=file]{ font-size:12px; margin-top:8px; width:100%; color:var(--text-dim); }

/* ============ COLOR SWATCH (Tampilan Sistem) ============ */
.color-swatch-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.color-swatch{ width:34px; height:34px; border-radius:100px; border:2px solid var(--line); cursor:pointer; padding:0; }
.color-swatch.active{ border-color:var(--text); box-shadow:0 0 0 2px var(--bg-raised), 0 0 0 4px var(--text); }
.color-swatch[disabled]{ opacity:.5; cursor:not-allowed; }

/* ============ TIMELINE (Riwayat Aktivitas) ============ */
.timeline{ display:flex; flex-direction:column; gap:14px; }
.timeline-item{ display:flex; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.timeline-item:last-child{ border-bottom:none; padding-bottom:0; }
.timeline-item .ic{ margin-top:2px; color:var(--accent-soft); flex:none; }
.timeline-item > .fas{ margin-top:3px; width:18px; text-align:center; color:var(--accent-soft); flex:none; }
.timeline-item.tl-ok > .fas{ color:var(--success-600); } .timeline-item.tl-warn > .fas{ color:var(--warning-600); } .timeline-item.tl-danger > .fas{ color:var(--danger-600); }
.timeline-isi .tx-small{ overflow-wrap:anywhere; }

/* ============ TOAST ============ */
.toast{ position:fixed; top:16px; right:16px; left:auto; bottom:auto; transform:none; max-width:min(380px, calc(100vw - 32px)); padding:12px 20px; border-radius:var(--radius-md); font-size:13px; font-weight:600; color:#fff; box-shadow:var(--shadow-lg); z-index:200; animation:toast-masuk .2s ease; }
@keyframes toast-masuk{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.tst-wadah{ position:fixed; top:76px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:10px; width:min(360px, calc(100vw - 32px)); pointer-events:none; }
.tst{ --tst-garis:var(--accent); pointer-events:auto; display:flex; align-items:center; gap:14px; min-width:0; margin-left:4px; padding:14px 12px 14px 16px; background:var(--bg-raised); color:var(--text); border:0; border-radius:10px; box-shadow:-4px 0 0 var(--tst-garis), 0 10px 28px rgba(18,45,40,.16); animation:tst-masuk .25s ease; }
.tst.tst-keluar{ opacity:0; transform:translateY(-8px); transition:opacity .2s, transform .2s; }
.tst-klik{ cursor:pointer; }
.tst-ikon{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-full); font-size:16px; }
.tst-ok{ --tst-garis:var(--accent); }
.tst-ok .tst-ikon{ background:var(--success-100); color:var(--accent); }
.tst-info{ --tst-garis:var(--info-600); }
.tst-info .tst-ikon{ background:var(--info-100); color:var(--info-600); }
.tst-peringatan{ --tst-garis:var(--warning-600); }
.tst-peringatan .tst-ikon{ background:var(--warning-100); color:var(--warning-600); }
.tst-bahaya{ --tst-garis:var(--danger-600); }
.tst-bahaya .tst-ikon{ background:var(--danger-100); color:var(--danger-600); }
.tst-isi{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tst-judul{ font-size:15px; font-weight:700; line-height:1.3; color:var(--text); }
.tst-teks{ font-size:13.5px; line-height:1.45; color:var(--text-dim); overflow-wrap:anywhere; }
.tst-teks b{ font-weight:700; color:var(--tst-garis); }
.tst-aksi{ align-self:flex-start; margin-top:6px; }
.tst-x{ flex:none; align-self:center; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:var(--radius-full); background:none; color:var(--text-dim); opacity:.7; font-size:14px; cursor:pointer; }
.tst-x:hover, .tst-x:focus-visible{ opacity:1; background:var(--tag-bg); outline:none; }
.tst-lonceng .tst-ikon i{ transform-origin:50% 0; animation:tst-lonceng 1.1s ease-in-out .3s 3; }
@keyframes tst-masuk{ from{ opacity:0; transform:translateY(-12px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes tst-lonceng{ 0%,100%{ transform:rotate(0); } 15%{ transform:translateY(-4px) rotate(18deg); } 30%{ transform:translateY(0) rotate(-16deg); } 45%{ transform:translateY(-3px) rotate(12deg); } 60%{ transform:rotate(-8deg); } 75%{ transform:rotate(4deg); } }
@media (max-width:575px){ .tst-wadah{ top:68px; left:16px; right:16px; width:auto; } .tst-x{ width:36px; height:36px; } }
.toast-success{ background:var(--success-600); }
.toast-danger{ background:var(--danger-600); }

/* ============ 8. MODAL ============ */
.modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(11,25,20,.45); z-index:150; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.show{ display:flex; }
#modalStepUp{ z-index:200; } /* di atas AppSheet (160), mis. impor yang meminta password */
.modal-box{ background:var(--bg-raised); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; }
.modal-box.modal-wide{ max-width:800px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-body{ padding:20px; overflow-y:auto; }
.modal-foot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }

/* ============ SIMPLE TABLE (Manajemen Pengguna) ============ */
.simple-table{ width:100%; border-collapse:collapse; font-size:13px; }
.simple-table th{ text-align:left; font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:8px 10px; border-bottom:1.5px solid var(--line); }
.simple-table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.simple-table tr:last-child td{ border-bottom:none; }
.simple-table .row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.btn-icon-sm{ width:30px; height:30px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:transparent; color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.btn-icon-sm:hover{ border-color:var(--accent-soft); color:var(--accent); }
.btn-icon-sm.danger:hover{ border-color:var(--danger-600); color:var(--danger-600); }

.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:700; }
.pill-default{ background:var(--tag-bg); color:var(--text-dim); }
.pill-custom{ background:var(--info-100); color:var(--info-600); }

/* ============ PERMISSION TREE (Hak Akses Menu) ============ */
.perm-module{ margin-bottom:18px; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.perm-module-head{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg-alt); font-family:'Plus Jakarta Sans'; font-weight:700; font-size:13px; }
.perm-tree{ padding:6px 14px 10px; }
.perm-row{ border-left:1.5px dashed var(--line); padding-left:14px; margin-top:8px; }
.perm-row-main{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:6px 0; }
.perm-name{ font-size:13px; font-weight:600; min-width:160px; }
.perm-check{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); }
.perm-scope{ font-size:12px; padding:5px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--bg); color:var(--text); }
.perm-children{ margin-left:6px; }

/* Sidebar off-canvas + tombol ☰ hanya ≤991px (HP & tablet). */
@media (max-width: 991px){
  .app-sidebar{ position:fixed; left:0; top:0; height:100vh; height:100dvh; transform:translateX(-100%); box-shadow:var(--shadow-lg); z-index:60; }
  .sidebar-scrim{ z-index:55; } /* di atas footer menu HP (z 32) & header (z 30) */
  .sidebar-footer{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .sidebar-brand, .modul-identitas{ flex:none; }
  .app-sidebar.open{ transform:translateX(0); }
  .sidebar-toggle-btn{ display:flex; }
  .context-pill .ctx-value{ max-width:90px; }
}

/* ============ PORTAL (Beranda & Ruang Kerja — roadmap C1/C2) ============ */
.portal-topbar{ padding:0 16px; }
.portal-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-width:0; }
.portal-brand img{ width:34px; height:34px; border-radius:10px; flex:none; }
.btn-keluar{ height:44px; }
/* Portal: spacer tampil di semua lebar (aturan <768px khusus header modul menyembunyikannya) → avatar + Keluar rata kanan.
   Mode gelap ikut pola ERP: ≥768px ikon #themeToggleBtn di topbar, <768px baris "Mode gelap" di menu avatar. */
.portal-topbar .topbar-spacer{ display:block; flex:1; }
.modal-box.modal-sm{ max-width:400px; }
.portal-main{ width:100%; max-width:1280px; margin:0 auto; padding:24px 16px 56px; }
.btn-sm{ height:36px; padding:0 12px; font-size:12.5px; }
.pill-ok{ background:var(--success-100); color:var(--success-600); }
.pill-warn{ background:var(--warning-100); color:var(--ink-700); }
.pill-danger{ background:var(--danger-100); color:var(--danger-600); }

.lanjut-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.lanjut-card .pick-icon, .dev-logo{ width:44px; height:44px; border-radius:12px; background:var(--tag-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.dev-logo img{ width:100%; height:100%; object-fit:cover; }
.avatar-inisial{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:15px; letter-spacing:.02em; }
.dev-logo-lg .avatar-inisial{ font-size:24px; }
.dev-logo-lg{ width:72px; height:72px; border-radius:var(--radius-md); }
.lanjut-teks{ flex:1; min-width:180px; }

.portal-toolbar{ display:flex; gap:10px; margin-bottom:16px; }
.portal-cari{ flex:1; max-width:420px; }
.portal-cari input{ width:100%; height:44px; padding-right:12px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); font-family:'Inter'; font-size:14px; }
.portal-cari input:focus{ outline:none; border-color:var(--accent); }

.dev-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.dev-card{ display:flex; flex-direction:column; gap:12px; background:var(--bg-raised); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:18px; color:var(--text); text-decoration:none; }
a.dev-card:hover{ border-color:var(--accent-soft); box-shadow:var(--shadow-sm); }
.dev-card.is-blocked, .project-card.is-blocked{ background:var(--bg-alt); filter:grayscale(1); opacity:.75; }
div.dev-card.is-blocked{ cursor:not-allowed; }
.dev-card-head{ display:flex; align-items:center; gap:12px; }
.dev-card-title{ flex:1; min-width:0; }
.dev-card-title .tx-h3{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-badges{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.dev-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; margin:0; }
.dev-meta dt{ font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.dev-meta dd{ margin:2px 0 0; font-size:13px; font-weight:600; }
.dev-alasan{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--danger-600); }

.portal-context{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.portal-context .menu-item-teks{ flex:1; }
.portal-pager{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.btn-icon-sm.is-disabled{ opacity:.35; cursor:default; }
.dev-header{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.dev-header-info{ flex:1; min-width:200px; }

.portal-tabs .tab-list{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.portal-tabs .tab-btn{ flex:none; min-height:44px; }
.btn-ghost .spin{ border-color:var(--line); border-top-color:var(--accent); }

/* ---- stat-tile & progress-bar (Beranda strip, Ruang Kerja header) ---- */
.stat-strip{ display:grid; gap:12px; margin-bottom:16px; }
.stat-strip-2, .stat-strip-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.stat-strip-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.stat-tile{ position:relative; display:flex; flex-direction:column; min-width:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; }
.stat-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.stat-body > .stat-label, .stat-body > .stat-value{ padding-right:64px; }
.stat-body .stat-sub{ margin-bottom:10px; }
.stat-body .progress-bar{ margin-top:auto; flex:none; }
.stat-ic{ position:absolute; top:16px; right:16px; width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; background:var(--tag-bg); color:var(--accent-soft); }
.stat-ic.ic-proyek{ background:rgba(37,99,235,.12); color:#2563EB; }
.stat-ic.ic-user{ background:rgba(124,58,237,.12); color:#7C3AED; }
.stat-ic.ic-modul{ background:rgba(234,88,12,.12); color:#EA580C; }
.stat-ic.ic-dev{ background:var(--info-100); color:var(--info-600); }
.stat-ic.ic-masa{ background:var(--success-100); color:var(--success-600); }
.stat-ic.ic-masa.is-warn{ background:var(--warning-100); color:#B7791F; }
.stat-ic.ic-masa.is-danger{ background:var(--danger-100); color:var(--danger-600); }
.meter-head .fas, .meter-ic{ width:14px; margin-right:6px; text-align:center; opacity:.75; }
.stat-label{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-value{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:20px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-sub{ font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Cuti Saya: bilah sisa saldo di kartu (nilai lebar = sisa/kuota dari server) */
.page-sub{ margin-top:4px; }
.cuti-bar{ display:block; height:6px; margin-top:10px; border-radius:var(--radius-full); background:var(--line); overflow:hidden; }
.cuti-bar > span{ display:block; height:100%; border-radius:inherit; transition:width .3s ease; }
/* Semua kartu hijau; merah hanya bila saldo tersedia habis (--ct = aksen, --ct-bg = latar ikon) */
.cuti-saldo .stat-tile{ --ct:var(--success-600); --ct-bg:var(--success-100); }
.cuti-saldo .stat-ic{ background:var(--ct-bg); color:var(--ct); }
.cuti-bar > span{ background:var(--ct, var(--success-600)); }
.cuti-saldo .cuti-t-habis{ --ct:var(--danger-600); --ct-bg:var(--danger-100); }
.cuti-saldo .stat-body .stat-sub{ margin-bottom:0; }
.stat-tile-sm{ padding:12px 14px; justify-content:center; min-height:72px; }
.stat-tile-sm .stat-ic{ top:50%; right:14px; width:46px; height:46px; margin-top:-23px; font-size:19px; border-radius:13px; }
.stat-tile-sm .stat-body > .stat-label, .stat-tile-sm .stat-body > .stat-value{ padding-right:56px; }
.stat-tile-sm .stat-body{ flex:none; }
/* Ringkasan angka 6 petak (mis. detail run payroll): HP/tablet 2 kolom, laptop 3; tanpa ikon → nilai selebar petak; is-sorot = angka utama */
.stat-strip-6{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-bottom:var(--sp-3); }
.stat-strip-6 .stat-body > .stat-label, .stat-strip-6 .stat-body > .stat-value{ padding-right:0; }
.stat-strip-6 .stat-label{ overflow:visible; white-space:normal; }
.stat-strip-6 .stat-value{ font-size:var(--fs-18); font-variant-numeric:tabular-nums; }
.stat-tile.is-sorot{ background:var(--bg-alt); border-color:var(--accent-soft); }
.stat-tile.is-sorot .stat-value{ color:var(--accent); }
@media (min-width: 992px){ .stat-strip-6{ grid-template-columns:repeat(3, minmax(0,1fr)); } .stat-strip-6 .stat-value{ font-size:var(--fs-20); } }
.stat-tile-sm .stat-value{ font-size:18px; }

.progress-bar{ height:6px; border-radius:var(--radius-full); background:var(--tag-bg); overflow:hidden; }
.progress-bar > span{ display:block; height:100%; border-radius:inherit; background:var(--success-600); transition:width .3s ease; }
.progress-bar.is-warn > span{ background:var(--warning-600); }
.progress-bar.is-danger > span{ background:var(--danger-600); }
.meter{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.meter-head{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--text-dim); }
.meter-head b, .meter-head .mono{ color:var(--text); font-weight:600; }
.meter-pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }

/* ---- kartu developer (Beranda) ---- */
.dev-proyek-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.dev-proyek-list li{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-proyek-list .fas{ width:14px; margin-right:8px; text-align:center; color:var(--text-dim); }
.dev-card-foot{ margin-top:auto; }
.btn.is-disabled{ opacity:.45; cursor:not-allowed; }
.tip-wrap{ display:inline-flex; }

/* ---- info-row (ikon + teks kecil) ---- */
.info-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--text-dim); }
.info-row li{ display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.info-row .fas{ width:14px; text-align:center; flex:none; opacity:.8; }
.dev-kontak{ margin-top:8px; }
.dev-header-aksi{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- project-card (Tab Proyek) ---- */
.project-card{ display:flex; flex-direction:column; gap:12px; min-width:0; background:var(--bg-raised); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:22px 18px 18px; box-shadow:inset 0 6px 0 var(--tema, #1E9384); }
.project-card-head{ display:flex; align-items:center; gap:12px; }
.project-card-head .dev-logo{ background:color-mix(in srgb, var(--tema, #1E9384) 14%, transparent); color:var(--tema, #1E9384); }
.project-card-title{ flex:1; min-width:0; display:flex; flex-direction:column; }
.project-card-title .tx-h3{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setup-notice{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:var(--radius-md); background:var(--warning-100); font-size:12.5px; font-weight:600; }
.setup-notice .fas{ margin-right:6px; }
.proyek-toolbar{ flex-wrap:wrap; align-items:center; }
.select-portal{ height:44px; padding:0 32px 0 12px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A615A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color:var(--text); font-family:'Inter'; font-size:13.5px; appearance:none; min-width:0; }
.select-portal:focus{ outline:none; border-color:var(--accent); }

/* ---- modul-launcher (tombol utama + dropdown modul ber-ikon) ---- */
.modul-launcher{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.launcher{ display:flex; gap:2px; min-width:0; }
.launcher-btn{ background:color-mix(in srgb, var(--tema, #1E9384) 13%, var(--bg-raised)); border-color:color-mix(in srgb, var(--tema, #1E9384) 38%, transparent); color:color-mix(in srgb, var(--tema, #1E9384) 72%, var(--text)); }
.launcher-btn:hover{ background:color-mix(in srgb, var(--tema, #1E9384) 22%, var(--bg-raised)); border-color:var(--tema, #1E9384); transform:none; box-shadow:0 4px 12px color-mix(in srgb, var(--tema, #1E9384) 22%, transparent); }
.launcher-btn:focus-visible{ outline:2px solid var(--tema, #1E9384); outline-offset:2px; }
.launcher-btn .spin{ border-color:color-mix(in srgb, var(--tema, #1E9384) 30%, transparent); border-top-color:var(--tema, #1E9384); }
.launcher-main{ flex:1; min-width:0; height:44px; justify-content:flex-start; }
.launcher-main .lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.launcher .menu-wrap{ flex:none; }
.launcher:has(.menu-wrap) .launcher-main{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
.launcher-caret{ width:44px; height:44px; padding:0; border-top-left-radius:4px; border-bottom-left-radius:4px; }
.launcher-ic{ width:18px; text-align:center; flex:none; }
.menu-pop.drop-up{ top:auto; bottom:calc(100% + 8px); }
.modul-menu{ width:min(320px, calc(100vw - 32px)); min-width:0; padding:6px; }
.modul-item{ position:relative; gap:12px; min-height:52px; padding:8px 10px; }
.modul-item.is-last{ background:var(--bg-alt); }
.modul-item[disabled]{ opacity:.55; cursor:not-allowed; }
.modul-ic{ width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--tema, #1E9384) 15%, transparent); color:var(--tema, #1E9384); }
.modul-item-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.modul-item-txt b{ font-family:'Plus Jakarta Sans'; font-size:13px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.modul-item-txt small{ font-size:11px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modul-item-badge{ flex:none; padding:2px 8px; font-size:10px; }
.modul-item.is-loading::after{ content:''; flex:none; width:16px; height:16px; border-radius:100px; border:2px solid var(--line); border-top-color:var(--tema, var(--accent)); animation:spin .7s linear infinite; }
.modul-kosong{ margin-top:auto; padding:16px; border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); text-align:center; font-size:12.5px; color:var(--text-dim); }
.modul-kosong .fas{ display:block; font-size:20px; margin-bottom:6px; opacity:.6; }

/* ---- skeleton (tab dimuat) ---- */
.skeleton-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.skeleton-card{ display:flex; flex-direction:column; gap:10px; padding:18px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); }
.sk{ display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--tag-bg) 25%, var(--line) 50%, var(--tag-bg) 75%); background-size:200% 100%; animation:sk-shimmer 1.2s ease-in-out infinite; }
.sk-title{ height:18px; width:60%; }
.sk-short{ width:40%; }
.sk-block{ height:64px; }
@keyframes sk-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.profil-logo{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.profil-logo .upload-preview{ width:88px; height:88px; margin-bottom:0; flex:none; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:0 16px; }
.sticky-actions{ position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; margin:8px -20px -20px; padding:14px 20px; background:var(--bg-raised); border-top:1px solid var(--line); box-shadow:0 -6px 16px rgba(18,45,40,0.06); border-radius:0 0 var(--radius-lg) var(--radius-lg); }

/* Akun Saya (akun/v_akun.php) */
.akun-main{ max-width:960px; }
.portal-main .akun-main{ margin:0 auto; }
.akun-card{ margin-bottom:16px; }
.akun-judul{ margin-bottom:14px; }
.akun-hint{ margin-top:6px; }
.perangkat-ket{ margin:-6px 0 14px; }
.perangkat-daftar{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.perangkat-item{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); }
.perangkat-ikon{ width:40px; height:40px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; background:var(--tag-bg); color:var(--text-dim); font-size:16px; }
.perangkat-info{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.perangkat-nama{ font-size:14px; font-weight:600; color:var(--text); overflow-wrap:anywhere; line-height:1.3; }
.perangkat-sub{ font-size:12px; color:var(--text-dim); line-height:1.4; }
.perangkat-info .pill{ margin-top:4px; }
.perangkat-aksi{ white-space:nowrap; }
.perangkat-kaki{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.perangkat-kaki .form-actions{ margin-top:12px; }
/* Akun Saya → Notifikasi (Web Push, AppPush) */
.push-status{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.push-ket{ margin:10px 0 0; }
.push-aksi{ flex-wrap:wrap; margin-top:16px; }
.push-sakelar{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; border:0; background:none; cursor:pointer; }
.push-sakelar:disabled{ opacity:.6; cursor:progress; }
.push-sakelar:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:var(--radius-md); }
@media (max-width: 575px){
  .perangkat-item{ grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:10px 8px 10px 12px; }
  .perangkat-ikon{ width:36px; height:36px; font-size:15px; }
  .perangkat-aksi{ width:44px; height:44px; padding:0; }
  .perangkat-aksi span{ display:none; }
  .perangkat-kaki > .btn, .perangkat-kaki .form-actions .btn{ flex:1; justify-content:center; }
  .perangkat-kaki > .btn{ width:100%; }
  .push-aksi .btn{ flex:1 1 100%; justify-content:center; }
}
.akun-foto-widget .peg-foto-av-wrap{ width:96px; height:96px; }
.akun-foto-nama{ display:flex; flex-direction:column; min-width:0; }
.akun-foto-nama b{ font-size:var(--fs-16); color:var(--text); overflow-wrap:anywhere; }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.input-affix input{ padding-right:44px !important; }
.input-affix .toggle-eye, .pw-wrap .toggle-eye{ min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.pw-meter{ display:flex; align-items:center; gap:10px; }
.pw-meter-bar{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
.pw-meter-bar span{ height:5px; border-radius:var(--radius-full); background:var(--line); transition:background .2s ease; }
.pw-meter-teks{ font-size:12px; font-weight:600; color:var(--text-dim); min-width:78px; text-align:right; }
.pw-meter[data-level="1"] .pw-meter-bar span:nth-child(-n+1){ background:var(--danger-600); }
.pw-meter[data-level="2"] .pw-meter-bar span:nth-child(-n+2){ background:var(--warning-600); }
.pw-meter[data-level="3"] .pw-meter-bar span:nth-child(-n+3),
.pw-meter[data-level="4"] .pw-meter-bar span{ background:var(--success-600); }
.pw-meter[data-level="1"] .pw-meter-teks{ color:var(--danger-600); }
.pw-meter[data-level="3"] .pw-meter-teks, .pw-meter[data-level="4"] .pw-meter-teks{ color:var(--success-600); }
.pw-aturan{ list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:1fr; gap:6px; font-size:12.5px; color:var(--text-dim); }
.pw-aturan li{ display:flex; align-items:center; gap:8px; }
.pw-aturan li i{ font-size:11px; }
.pw-aturan li.ok{ color:var(--success-600); }

/* ---- side-panel (panel samping; HP: layar penuh dari bawah · tablet 70% · laptop 420px) ---- */
.project-card[data-ringkasan]{ cursor:pointer; transition:border-color .15s ease; }
.project-card[data-ringkasan]:hover{ border-color:var(--line-strong); }
.project-card[data-ringkasan]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.side-panel-backdrop{ position:fixed; inset:0; background:rgba(11,25,20,.45); z-index:150; opacity:0; transition:opacity .2s ease; }
.side-panel-backdrop.show{ opacity:1; }
.side-panel{ position:fixed; z-index:160; display:flex; flex-direction:column; background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-lg); inset:0; transform:translateY(100%); transition:transform .25s ease; }
.side-panel.show{ transform:none; }
.side-panel:focus{ outline:none; }
/* × melayang HANYA untuk isi panel yang dimuat AJAX (skeleton/galat); begitu kepala .side-panel-head-x ada, × di kepala yang dipakai. */
.side-panel-tutup{ position:absolute !important; top:var(--sp-3); right:var(--sp-3); z-index:1; }
.side-panel:has(.side-panel-head-x) > .side-panel-tutup{ display:none; }
.side-panel-isi{ flex:1; min-height:0; display:flex; flex-direction:column; }
.side-panel-head{ display:flex; align-items:center; gap:12px; padding:18px 64px 16px 18px; border-bottom:1px solid var(--line); }
/* Kepala panel dengan tombol × di dalam baris judul (sejajar tengah, tanpa bingkai, 40×40 / area sentuh 44). */
.side-panel-head-x{ padding:var(--sp-3) var(--sp-3) var(--sp-3) 18px; min-height:64px; }
.side-panel-head-x .project-card-title{ flex:1; min-width:0; }
.side-panel-x{ position:relative; margin-left:auto; border:none; box-shadow:none; background:transparent; color:var(--text-dim); border-radius:var(--r-kontrol); }
.side-panel-x::before{ content:''; position:absolute; inset:-2px; }
.side-panel-x:hover{ background:var(--bg-alt); color:var(--text); }
.side-panel-head .project-card-title .tx-h3{ font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-panel-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 18px 18px; }
.side-panel-sec{ display:flex; flex-direction:column; gap:10px; padding:16px 0; border-bottom:1px solid var(--line); }
.side-panel-sec:last-child{ border-bottom:none; }
.side-panel-foot{ display:flex; gap:10px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-raised); }
.side-panel-foot .tip-wrap{ flex:1; }
.side-panel-foot .btn{ width:100%; height:44px; justify-content:center; }
.side-panel-skeleton{ display:flex; flex-direction:column; gap:12px; padding:22px 64px 22px 18px; }
.panel-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.panel-list li{ display:flex; gap:10px; align-items:flex-start; min-width:0; overflow-wrap:anywhere; }
.panel-list li > i{ width:16px; text-align:center; flex:none; margin-top:3px; color:var(--text-dim); }
.panel-checklist li.ok > i{ color:var(--success-600); }
.panel-checklist li:not(.ok){ color:var(--text-dim); }
.panel-link{ display:inline-flex; align-items:center; gap:6px; min-height:32px; color:var(--accent); font-weight:600; text-decoration:none; }
.panel-link:hover{ text-decoration:underline; }
.panel-tim{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
.panel-tim li{ display:flex; align-items:center; gap:10px; min-width:0; }
.dev-logo.avatar-sm{ width:36px; height:36px; border-radius:100px; }
.dev-logo.avatar-sm .avatar-inisial{ font-size:12px; }
.panel-tim-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.panel-tim-txt b, .panel-tim-txt small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-tim-txt b{ font-size:13px; }
.panel-tim-txt small{ font-size:11.5px; color:var(--text-dim); }
.panel-modul{ display:grid; grid-template-columns:1fr; gap:6px; }
.panel-modul .modul-item{ border:1px solid var(--line); }
.panel-modul .modul-item:not([disabled]):hover{ border-color:var(--tema, var(--accent)); }
.panel-aktivitas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.panel-aktivitas li{ display:flex; justify-content:space-between; gap:12px; min-width:0; }
.panel-aktivitas li span{ min-width:0; overflow-wrap:anywhere; }
.panel-aktivitas time{ flex:none; font-size:11.5px; color:var(--text-dim); white-space:nowrap; }
body.panel-terbuka{ overflow:hidden; }

/* ---- Tab Tim & modal Tambah Staf ---- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.btn-danger{ background:var(--danger-600); border-color:var(--danger-600); color:#fff; }
.btn-danger-teks{ color:var(--danger-600); }
.tim-kuota{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:20px; }
.tim-kuota .meter{ flex:1 1 240px; }
.tim-sec{ margin-bottom:24px; }
.tim-sec > .tx-h3{ margin-bottom:10px; }
.tim-sub{ overflow-wrap:anywhere; }
.chip-list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.chip{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--radius-full); background:var(--tag-bg); font-size:11.5px; font-weight:600; color:var(--text); }
.chip-label{ font-size:11.5px; color:var(--text-dim); }
.seg-toggle{ display:inline-flex; padding:3px; margin-bottom:16px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); gap:3px; }
.seg-toggle label{ position:relative; cursor:pointer; }
.seg-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.seg-toggle span{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:calc(var(--radius-md) - 3px); font-size:13px; font-weight:600; color:var(--text-dim); }
.seg-toggle input:checked + span{ background:var(--accent); color:#fff; }
.seg-toggle input:focus-visible + span{ box-shadow:0 0 0 3px var(--tag-bg); }
/* seg-toggle di dalam .form-field: pilihan jangan mewarisi gaya label field (mono kapital 11px); boleh turun baris bila panjang. */
.form-field .seg-toggle{ flex-wrap:wrap; max-width:100%; }
.form-field .seg-toggle label{ font-family:inherit; font-size:inherit; font-weight:inherit; text-transform:none; letter-spacing:0; color:inherit; }
.modal-box > form{ display:flex; flex-direction:column; min-height:0; flex:1; }
.modal-box > form > .modal-body{ flex:1; min-height:0; }
.pool-box{ border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); margin-bottom:16px; overflow:hidden; }
.pool-box:focus-within{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.pool-label{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; padding:10px 14px 0; font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.pool-label span{ font-family:'Inter'; font-size:11.5px; font-weight:400; text-transform:none; letter-spacing:0; }
.pool-input input{ width:100%; height:46px; border:none; border-bottom:1px solid var(--line); background:transparent; color:var(--text); font-family:'Inter'; font-size:14px; padding-right:14px !important; -webkit-appearance:none; appearance:none; }
.pool-input input:focus{ outline:none; }
.pool-input .ic{ left:14px; }
.pool-hasil{ max-height:280px; overflow-y:auto; }
.pool-hasil:empty{ display:none; }
.pool-status{ display:flex; align-items:center; gap:8px; margin:0; padding:14px; }
.pool-status .spin{ width:14px; height:14px; border-radius:100px; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite; }
.pool-item{ display:flex; align-items:flex-start; gap:12px; width:100%; min-height:44px; padding:12px 14px; text-align:left; border:none; border-bottom:1px solid var(--line); background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.pool-hasil .pool-item:last-child{ border-bottom:none; }
.pool-hasil .pool-item:hover, .pool-hasil .pool-item:focus-visible{ background:var(--bg-alt); outline:none; }
.pool-avatar{ width:36px; height:36px; font-size:12.5px; }
.pool-info{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.pool-nama{ font-weight:700; font-size:14px; }
.pool-akun{ font-size:12.5px; color:var(--text-dim); overflow-wrap:anywhere; }
.pool-pilih{ align-self:center; flex:none; font-size:12px; font-weight:700; color:var(--accent); opacity:0; transition:opacity .15s ease; }
.pool-item:hover .pool-pilih, .pool-item:focus-visible .pool-pilih{ opacity:1; }
.pool-terpilih{ margin-bottom:16px; }
.pool-item.is-terpilih{ cursor:default; border:1.5px solid var(--accent); border-radius:var(--radius-md); background:var(--bg-raised); }
.pool-item.is-terpilih .btn{ align-self:center; flex:none; }
.asal-list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-dim); }
.asal-list li{ display:flex; align-items:center; gap:6px; min-width:0; }
.asal-list .pill{ padding:1px 7px; font-size:10px; flex:none; }
.asal-lain{ font-weight:600; cursor:help; }
.penugasan-judul{ margin:4px 0 8px; }
.penugasan-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.penugasan-row{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); padding:10px 14px 12px; }
.penugasan-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; margin-bottom:6px; }
.penugasan-no{ font-size:12.5px; font-weight:700; color:var(--text-dim); }
.penugasan-field{ display:grid; grid-template-columns:1fr; gap:0 12px; }
.penugasan-field .form-field{ margin-bottom:10px; min-width:0; }
.penugasan-field select{ background-color:var(--bg-raised); }
.penugasan-row .chip-list:empty{ display:none; }

/* Responsif portal: HP ≤575 · tablet 576–991 · laptop ≥992 */
@media (max-width: 575px){
  .hide-hp, .btn-keluar-teks, .portal-brand .brand-name small{ display:none; }
  .btn-keluar{ width:44px; padding:0; }
  .portal-context .context-pill .ctx-value{ max-width:120px; }
  .sticky-actions .btn{ flex:1; height:44px; }
  .lanjut-card .btn{ width:100%; height:44px; }
  .btn-sm{ height:44px; }
  .dev-header-aksi{ width:100%; }
  .dev-header-aksi > *{ flex:1; }
  .dev-header-aksi .btn{ width:100%; }
  .proyek-toolbar .portal-cari{ flex:1 1 100%; max-width:none; }
  .proyek-toolbar .select-portal{ flex:1 1 0; }
  .proyek-toolbar .tip-wrap, .proyek-toolbar .tip-wrap .btn{ width:100%; height:44px; }
  .stat-strip{ gap:8px; }
  .stat-tile{ padding:12px; }
  .stat-ic{ top:12px; right:12px; width:42px; height:42px; font-size:18px; border-radius:12px; }
  .stat-body > .stat-label, .stat-body > .stat-value{ padding-right:52px; }
  .stat-tile-sm{ padding:10px 12px; min-height:64px; }
  .stat-tile-sm .stat-ic{ top:50%; right:10px; width:36px; height:36px; margin-top:-18px; font-size:15px; border-radius:10px; }
  .stat-tile-sm .stat-body > .stat-label, .stat-tile-sm .stat-body > .stat-value{ padding-right:44px; }
  .tab-list-geser{ width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tab-list-geser .tab-btn{ flex:none; min-height:44px; }
  .form-actions .btn, .btn-kembali{ width:100%; height:44px; }
  .form-field input{ min-height:44px; }
  .input-affix .toggle-eye, .pw-wrap .toggle-eye{ min-width:44px; min-height:44px; right:2px; }
  .akun-foto-widget .peg-foto-aksi .btn{ min-height:44px; }
  .tim-kuota .tip-wrap, .tim-kuota .tip-wrap .btn{ width:100%; height:44px; }
  .seg-toggle{ display:flex; }
  .seg-toggle label{ flex:1; }
  .seg-toggle span{ width:100%; justify-content:center; min-height:44px; }
  .penugasan-field select, .tabel-kartu .btn-sm{ min-height:44px; }
  .penugasan-head .btn-icon-sm{ width:44px; height:44px; }
  .pool-pilih{ display:none; }
  /* Tabel → kartu label:nilai */
  .tabel-kartu thead{ display:none; }
  .tabel-kartu, .tabel-kartu tbody, .tabel-kartu tr, .tabel-kartu td{ display:block; width:100%; }
  .tabel-kartu tr{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); padding:6px 12px; margin-bottom:10px; }
  .tabel-kartu td{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; padding:8px 0; text-align:right; }
  .tabel-kartu td::before{ content:attr(data-label); flex:none; font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); text-align:left; }
  .tabel-kartu td .chip-list{ justify-content:flex-end; }
  .tabel-kartu td[data-label="Aksi"]{ display:block; }
  .tabel-kartu td[data-label="Aksi"]::before{ display:none; }
  .tabel-kartu .row-actions .btn{ flex:1 1 100%; }
}
@media (min-width: 576px){
  .dev-grid, .skeleton-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .proyek-toolbar .tip-wrap{ margin-left:auto; }
  .dev-header-aksi{ margin-left:auto; }
  .pw-aturan{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .side-panel{ inset:0 0 0 auto; width:70%; border-radius:var(--radius-lg) 0 0 var(--radius-lg); transform:translateX(100%); }
  .panel-tim, .panel-modul{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tim-kuota .tip-wrap{ margin-left:auto; }
  .penugasan-field{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .dev-grid, .skeleton-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .stat-strip-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .form-grid > .span-penuh{ grid-column:1 / -1; }
  .pw-aturan{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .portal-main{ padding:28px 24px 64px; }
  .side-panel{ width:420px; }
  .panel-tim, .panel-modul{ grid-template-columns:1fr; }
}

/* ===== Wizard proyek (roadmap C3) — HP default, lalu ≥576 & ≥992 ===== */
.wizard-judul{ font-family:'Plus Jakarta Sans'; font-size:20px; margin:12px 0 16px; display:flex; flex-direction:column; gap:2px; }
.wizard-judul small{ font-size:13px; font-weight:500; color:var(--text-dim); }
.wizard{ display:block; }
.stepper-ringkas{ font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:0 0 8px; }
.stepper{ list-style:none; margin:0 0 16px; padding:0; display:flex; gap:6px; overflow-x:auto; }
.stepper li{ flex:1 0 auto; }
.step{ width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 10px; border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text-dim); font:inherit; cursor:pointer; text-align:left; }
.step-no{ flex:none; width:26px; height:26px; border-radius:100px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--bg-alt); }
.step-label{ display:none; font-size:13px; font-weight:600; }
.step.is-aktif{ border-color:var(--accent); color:var(--text); }
.step.is-aktif .step-no{ background:var(--accent); color:var(--bg); }
.step.is-aktif .step-label{ display:inline; }
.step.is-selesai .step-no{ background:var(--success-600); color:#fff; }
.step[disabled]{ opacity:.5; cursor:not-allowed; }
.wizard-panel[hidden]{ display:none; }
.wizard-isi{ min-width:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; }
.wizard-panel-judul{ font-family:'Plus Jakarta Sans'; font-size:16px; margin:0 0 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wizard .form-field{ scroll-margin:96px 0 140px; }
.wizard-isi .form-grid{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:16px; }
.form-row2{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px 12px; }
.wizard-isi .form-grid .bagian-judul{ margin:4px 0 -4px; padding-top:12px; border-top:1px solid var(--line); }
.wajib{ color:var(--danger-600); }
.input-affix .ic-teks{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:700; color:var(--text-dim); }
.form-field input[type=text].input-uang, .form-field input.input-tanggal{ font-variant-numeric:tabular-nums; }
.check-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.form-field .check-chip, .simple-table .check-chip, .nrs-filter .check-chip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); font-family:'Inter'; font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text); cursor:pointer; }
.check-chip input{ accent-color:var(--accent); width:16px; height:16px; margin:0; }
.check-chip:has(input:checked){ border-color:var(--accent); background:var(--tag-bg); }
.upload-card .upload-pratinjau{ min-height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.upload-preview{ max-width:100%; max-height:96px; object-fit:contain; border-radius:var(--radius-md); }
.upload-ikon{ font-size:28px; color:var(--text-dim); opacity:.6; }
.upload-nama{ font-size:13px; font-weight:600; color:var(--accent); word-break:break-all; }
.link-pratinjau{ display:block; margin:0; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-alt); font-size:13px; word-break:break-all; }
.info-tip{ position:relative; display:inline-grid; place-items:center; width:22px; height:22px; margin-left:4px; padding:0; border:none; background:none; color:var(--text-dim); cursor:pointer; vertical-align:middle; }
.info-tip::after{ content:attr(data-tip); display:none; position:absolute; left:0; top:calc(100% + 4px); width:240px; max-width:70vw; padding:8px 10px; border-radius:var(--radius-md); background:var(--text); color:var(--bg); font:500 12px/1.4 'Inter'; letter-spacing:0; text-transform:none; text-align:left; z-index:30; }
.info-tip:hover::after, .info-tip:focus::after, .info-tip.buka::after{ display:block; }

/* Wilayah langkah 1: combobox cari desa + kartu ringkas; cascade lama = cadangan "Pilih manual". */
.wilayah-cari[hidden], .wilayah-kartu[hidden], .combo[hidden], .combo-daftar[hidden], .combo-spin[hidden]{ display:none; }
.wilayah-manual:not([hidden]){ display:contents; }
.combo-input{ position:relative; }
/* Bawaan input combobox (filter panel, form tanpa .form-field); konteks khusus (.form-field, .dk-cari, .detail-cari) menimpa. */
.combo-input > input[type=text]{ width:100%; height:var(--h-kontrol); padding:0 36px 0 34px; font:inherit; font-size:var(--fs-14); color:var(--text); background:var(--kontrol-latar); border:var(--kontrol-garis); border-radius:var(--r-kontrol); box-shadow:var(--kontrol-bayang); min-width:0; }
.combo-input > input[type=text]::placeholder{ color:var(--text-dim); opacity:.9; }
.combo-input > input[type=text]:hover{ border-color:var(--accent-soft); }
.combo-input > input[type=text]:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.da-medan .combo-ikon{ top:calc(var(--h-kontrol) / 2); color:var(--accent); }
.da-medan .combo-spin{ top:calc(var(--h-kontrol) / 2 - 7px); }
.combo-ikon{ position:absolute; left:12px; top:22px; transform:translateY(-50%); font-size:13px; color:var(--text-dim); pointer-events:none; }
.form-field .combo-input input[type=text]{ padding-left:34px; padding-right:36px; min-height:44px; }
.combo-spin{ position:absolute; right:12px; top:15px; width:14px; height:14px; border-radius:100px; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite; }
.combo-daftar{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:min(320px, 50vh); overflow-y:auto; overscroll-behavior:contain; margin:0; padding:4px; list-style:none; background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.combo-opsi{ display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:44px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.combo-opsi.aktif, .combo-opsi:hover{ background:var(--tag-bg); }
.combo-opsi.aktif{ box-shadow:inset 3px 0 0 var(--accent); }
.combo-b1{ font-size:14px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.combo-b2{ font-size:12px; color:var(--text-dim); overflow-wrap:anywhere; }
.combo-kosong{ display:flex; align-items:center; min-height:44px; padding:8px 10px; font-size:13px; color:var(--text-dim); cursor:default; }
/* Combobox standar (AppCombo, app.js): avatar/inisial, opsi terpilih, "Lihat semua…", chip mode banyak, modal pemilih. */
.combo-opsi:has(.combo-av){ flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; }
.combo-teks{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.combo-av{ width:32px; height:32px; font-size:12px; }
.combo-opsi[aria-selected="true"]{ background:var(--tag-bg); }
.combo-opsi[aria-selected="true"] .combo-b1::after{ content:" ✓"; color:var(--accent); }
.combo-lagi{ min-height:32px; font-size:12px; }
.combo-semua{ display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px; margin-top:4px; border-top:1px solid var(--line); font-size:13px; font-weight:600; color:var(--accent-soft); cursor:pointer; }
.combo-semua.aktif, .combo-semua:hover{ background:var(--tag-bg); }
/* "Lihat semua…" menempel di dasar daftar: tetap terlihat tanpa scroll bila datanya banyak */
.combo-daftar .combo-semua{ position:sticky; bottom:-4px; z-index:1; background:var(--bg-raised); }
/* latar hover tembus pandang → tumpuk di atas warna solid agar item di bawahnya tidak tembus */
.combo-daftar .combo-semua.aktif, .combo-daftar .combo-semua:hover{ background:linear-gradient(var(--tag-bg), var(--tag-bg)), var(--bg-raised); }
.combo-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.combo-chips:not(:empty){ margin-bottom:var(--sp-2); }
/* Mode banyak: kolom ketik tetap di atas (ikon cari pas), chip di bawahnya */
.combo-banyak{ display:flex; flex-direction:column; }
.combo-banyak > .combo-chips{ order:2; }
.combo-banyak > .combo-chips:not(:empty){ margin:var(--sp-2) 0 0; }
/* Filter modal pemilih: baris boleh turun ke bawah (tidak terpotong) */
.combo-pemilih .ts-kepala{ flex-wrap:wrap; }
.combo-pemilih .ts-cari{ flex:1 1 100%; }
.combo-pemilih .ts-filter{ display:flex; flex-wrap:wrap; flex:1 1 100%; min-width:0; gap:var(--sp-2); }
.combo-pemilih .ts-fcepat{ display:inline-flex; max-width:100%; }
.combo-pemilih{ z-index:170; }
.combo-pemilih .modal-box{ max-height:88vh; }
.combo-pemilih .modal-head h2{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-pemilih .cp-semua{ margin:0 0 var(--sp-2); }
.combo-pemilih .cp-tabel{ width:100%; }
.combo-pemilih .cp-tabel tr[data-cp-i]{ cursor:pointer; }
.combo-pemilih .cp-tabel tr[data-cp-i]:hover, .combo-pemilih .cp-tabel tr.is-dipilih{ background:var(--bg-alt); }
.combo-pemilih .cp-nama{ display:inline-flex; align-items:center; gap:10px; }
.combo-pemilih .ts-lagi{ margin-top:var(--sp-3); }
@media (max-width: 575px){
  .combo-pemilih{ padding:0; }
  .combo-pemilih .modal-box{ max-width:none; height:100%; max-height:100%; border-radius:0; }
}
.wilayah-kartu{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); }
.form-field.has-error .wilayah-kartu{ border-color:var(--danger-600); }
.wilayah-kartu-ikon{ flex:none; color:var(--accent); }
.wilayah-kartu-teks{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wilayah-kartu-teks strong{ font-size:14px; color:var(--text); overflow-wrap:anywhere; }
.wilayah-kartu-teks span{ font-size:12.5px; color:var(--text-dim); overflow-wrap:anywhere; }
.wilayah-kartu .btn{ flex:none; min-height:44px; }
.btn-tautan{ align-self:flex-start; min-height:44px; padding:0; border:none; background:none; color:var(--accent); font:600 13px 'Inter'; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (min-width: 992px){
  .wilayah-kartu .btn{ min-height:36px; }
  .btn-tautan{ min-height:32px; }
}

.wizard-bar{ position:sticky; bottom:0; z-index:20; margin:16px 0 -40px; padding:28px 0 calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--bg) 55%, transparent); pointer-events:none; }
.wizard-bar-in{ pointer-events:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06); }
.wizard-bar .btn{ min-height:44px; flex:1 1 0; }
.wizard-bar .btn-lanjut{ order:-1; flex:1 1 100%; font-size:14px; }
.wizard-bar .btn-lewati{ border-color:transparent; color:var(--text-dim); }
.wizard-bar .btn-lewati:hover{ color:var(--accent); border-color:transparent; text-decoration:underline; }
.wizard-bar .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.wizard-bar .spacer{ display:none; }
.wizard-bar-info{ min-width:0; flex-direction:column; gap:6px; padding:0 12px; font-size:12.5px; font-weight:600; color:var(--text-dim); text-align:right; }
.bar-progres{ display:block; height:4px; border-radius:100px; background:var(--bg-alt); overflow:hidden; }
.bar-progres i{ display:block; height:100%; width:0; border-radius:100px; background:var(--accent); transition:width .3s ease; }
.wizard-bar [hidden]{ display:none; }

@media (min-width: 576px){
  .stepper-ringkas{ display:none; }
  .step-label{ display:inline; }
  .step{ justify-content:flex-start; }
  .wizard-isi{ padding:24px; }
  .form-row2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wizard-bar .btn{ flex:0 0 auto; }
  .wizard-bar .btn-lanjut{ order:0; flex:0 0 auto; min-width:150px; }
  .wizard-bar .spacer{ display:flex; flex:1; }
}
@media (min-width: 992px){
  .wizard{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; }
  .stepper{ flex-direction:column; overflow:visible; margin:0; position:sticky; top:16px; }
  .stepper li{ flex:none; }
  .wizard-isi .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wizard-isi .form-grid .span-2{ grid-column:1 / -1; }
  .wizard-edit{ display:block; }
}

/* ===== Wizard proyek: langkah 4–5, mode edit, hapus draft ===== */
.wizard-kepala{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wizard-kepala .wizard-judul{ margin-right:auto; }
.wizard-kepala .btn[hidden]{ display:none; }
.wizard-edit .tab-list-geser{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; }
.wizard-edit .tab-btn{ white-space:nowrap; min-height:44px; }
.sub-judul{ font-family:'Plus Jakarta Sans'; font-size:14.5px; margin:0; }
.tx-dim{ color:var(--text-dim); }

.langkah-tim{ display:grid; gap:24px; }
.tim-blok-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.tim-daftar{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tim-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); min-height:44px; }
.tim-avatar{ flex:none; width:32px; height:32px; font-size:12px; }
.tim-nama{ font-size:13.5px; font-weight:600; min-width:0; overflow-wrap:anywhere; margin-right:auto; }
.tim-kosong{ display:flex; align-items:center; gap:12px; padding:16px; border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); color:var(--text-dim); font-size:13px; }
.tim-kosong .fas{ font-size:20px; opacity:.6; }

.ringkasan{ display:grid; gap:16px; }
.ringkasan-kartu{ border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; min-width:0; }
.ringkasan-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.ringkasan-dl{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px 20px; }
.ringkasan-dl div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ringkasan-dl dt{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.ringkasan-dl dd{ margin:0; font-size:13.5px; overflow-wrap:anywhere; }
.warna-titik{ display:inline-block; width:12px; height:12px; border-radius:100px; vertical-align:-1px; border:1px solid var(--line-strong); }
.cek-list{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; }
.cek-list li{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:13.5px; }
.cek-list li span{ margin-right:auto; }
.cek-ok{ color:var(--success-600); }
.cek-belum{ color:var(--text-dim); opacity:.6; }
.cek-list li.is-selesai span{ color:var(--text-dim); }

.project-card.is-sorot{ box-shadow:0 0 0 3px var(--accent-soft); animation:sorot 1.1s ease 3; }
@keyframes sorot{ 50%{ box-shadow:0 0 0 6px transparent; } }

@media (min-width: 576px){
  .ringkasan-dl{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tim-daftar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---- tab Langganan (kartu paket, accordion details, bagian nonaktif) ---- */
.lg-tab{ display:flex; flex-direction:column; gap:12px; }
.lg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.lg-head-sm{ align-items:center; margin-bottom:12px; }
.lg-sub + .lg-sub{ margin-top:20px; }
.lg-sub > .tx-h3{ margin-bottom:10px; }
.lg-tabel{ overflow-x:auto; position:relative; }
.lg-harga{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.lg-referral{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.lg-kode{ flex:1 1 220px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-md); }
.lg-kode .tx-mono-label{ flex:1 0 100%; }
.lg-kode code{ font-family:'IBM Plex Mono'; font-size:16px; font-weight:700; letter-spacing:.04em; margin-right:auto; }
.lg-kredit{ color:var(--success-600); }
.lg-debit{ color:var(--danger-600); }
.lg-kosong{ padding:28px 16px; }
.lg-kosong > .fas{ display:block; font-size:28px; margin-bottom:10px; opacity:.6; }
.lg-kosong p{ margin:0 0 12px; }
.lg-nonaktif-info{ display:flex; align-items:center; gap:12px; padding:16px; border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--tag-bg); color:var(--text-dim); }
.lg-nonaktif-info > .fas{ font-size:20px; }
.lg-nonaktif-info p{ margin:2px 0 0; }
.lg-isi.is-nonaktif, .lg-sub.is-nonaktif{ filter:grayscale(1); }
[data-bagian].is-memuat{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }
@media (max-width: 575px){
  .lg-saldo.stat-strip-3, .stat-strip-3.cuti-saldo{ grid-template-columns:1fr; }
  .cuti-saldo .stat-tile{ padding:12px 14px; }
  .cuti-saldo .stat-ic{ top:12px; right:14px; width:38px; height:38px; font-size:17px; border-radius:11px; }
  .cuti-saldo .stat-body > .stat-label, .cuti-saldo .stat-body > .stat-value{ padding-right:48px; }
  .cuti-saldo .stat-value{ font-size:18px; }
  .lg-kode .btn, .lg-tab [data-muat-bagian], .lg-paket-aksi .btn{ min-height:44px; }
  .lg-tabel{ overflow-x:visible; }
}

/* ---- tab Langganan: kartu Paket Aktif ringkas ---- */
.lg-paket{ padding:14px 16px; }
.lg-paket-baris{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.lg-paket-baris-2{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.lg-paket-nama{ display:flex; flex-direction:column; min-width:0; }
.lg-paket-sisa{ flex:1 1 260px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.lg-paket-sisa .progress-bar{ flex:1 0 100%; }
.lg-paket-aksi{ display:flex; gap:8px; margin-left:auto; }
.lg-paket-baris-2 .chip-list{ flex:1 1 auto; }
.lg-kuota{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.lg-kuota .fas{ color:var(--text-dim); }
.lg-head .tx-small{ margin:2px 0 0; }
.lg-konten{ min-height:160px; }
.lg-isi-skeleton{ display:flex; flex-direction:column; gap:12px; }

/* ---- card-tab: kartu sebagai tab (role=tablist), aktif = garis aksen + panah ke konten ---- */
.card-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.card-tab{ position:relative; display:flex; align-items:center; gap:12px; min-width:0; min-height:72px; padding:14px 16px; text-align:left; font:inherit; color:var(--text); background:var(--bg-raised); border:1px solid var(--line); border-bottom:3px solid transparent; border-radius:var(--radius-md); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.card-tab:hover:not(.is-off){ border-color:var(--line-strong); }
.card-tab:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.card-tab[aria-selected="true"]{ border-bottom-color:var(--accent-soft); box-shadow:0 6px 16px rgba(18,45,40,0.08); }
.card-tab[aria-selected="true"]::after{ content:''; position:absolute; left:50%; bottom:-10px; width:14px; height:14px; margin-left:-7px; background:var(--accent-soft); clip-path:polygon(0 0, 100% 0, 50% 60%); }
.card-tab-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--tag-bg); color:var(--accent-soft); font-size:16px; }
.card-tab[aria-selected="true"] .card-tab-ic{ background:var(--accent-soft); color:#fff; }
.card-tab-body{ display:flex; flex-direction:column; min-width:0; }
.card-tab-judul{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.card-tab-nilai{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-tab-sub{ font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-tab.is-off{ cursor:not-allowed; filter:grayscale(1); opacity:.6; background:var(--tag-bg); }
.card-tab.is-off[data-tip]:hover::after, .card-tab.is-off[data-tip]:focus::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); padding:4px 8px; border-radius:6px; background:var(--ink-700, #333); color:#fff; font-size:11.5px; font-weight:600; white-space:nowrap; z-index:5; pointer-events:none; }
@media (max-width: 575px){
  /* HP: kartu digeser horizontal di dalam strip sendiri (halaman tidak ikut melebar). */
  .card-tabs{ display:flex; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:12px; }
  .card-tabs::-webkit-scrollbar{ display:none; }
  .card-tab{ flex:0 0 78%; scroll-snap-align:start; min-height:64px; padding:10px 12px; gap:10px; }
  .card-tab-ic{ width:34px; height:34px; font-size:14px; }
  .card-tab-nilai{ font-size:14px; }
  .card-tab[aria-selected="true"]::after{ bottom:-9px; }
  .card-tab.is-off[data-tip]:hover::after, .card-tab.is-off[data-tip]:focus::after{ bottom:auto; top:4px; }
  .lg-paket-aksi{ flex:1 1 100%; }
  .lg-paket-aksi .btn-primary{ flex:1; }
}

/* ===== Prompt 12: banner, tab Ringkasan, polish (fokus, sentuh ≥44px, empty state) ===== */
.alert{ align-items:flex-start; }
.alert .ic{ margin-top:2px; }
.alert-warn{ background:var(--warning-100); color:var(--text); border:1px solid color-mix(in srgb, var(--warning-600) 45%, transparent); }
.alert-warn .ic{ color:#B7791F; }
.alert-isi{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-width:0; }
/* Alert Dashboard (mis. evaluasi kontrak): kartu putih beraksen kiri (nada), kepala = ikon + judul + keterangan + tutup, daftar baris tanpa kotak bersarang */
.dash-alert{ position:relative; margin:0 0 var(--sp-4); min-width:0; background:var(--bg-raised); border:1px solid var(--line); border-left:4px solid var(--aksen, var(--warning-600)); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.dash-alert-warn{ --aksen:var(--warning-600); --aksen-bg:var(--warning-100); --aksen-ink:#B7791F; }
.dash-alert-danger{ --aksen:var(--danger-600); --aksen-bg:var(--danger-100); --aksen-ink:var(--danger-600); }
.dash-alert-kepala{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 52px var(--sp-3) var(--sp-3); min-width:0; }
.dash-alert-ic{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--aksen-bg); color:var(--aksen-ink); font-size:16px; }
.dash-alert-judul{ display:block; font-size:var(--fs-14); font-weight:700; line-height:1.3; color:var(--text); }
.dash-alert-sub{ margin:2px 0 0; font-size:var(--fs-12); line-height:1.35; color:var(--text-dim); }
.dash-alert-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; min-width:0; border-top:1px solid var(--line); }
.dash-alert-list li{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-3); }
.dash-alert-list li + li{ border-top:1px solid var(--line); }
.dash-alert-titik{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--warning-600); }
.dash-alert-titik.is-ok{ background:var(--success-600); }
.dash-alert-teks{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-alert-nama{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:var(--fs-13); font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.dash-alert-nama .pill{ font-size:11px; font-weight:600; }
.dash-alert-teks small{ font-size:var(--fs-12); line-height:1.35; color:var(--text-dim); overflow-wrap:anywhere; }
.dash-alert-list .btn{ flex:none; white-space:nowrap; }
.dash-alert .alert-x{ top:10px; right:10px; }
@media (max-width:575px){
  .dash-alert-kepala{ padding:var(--sp-3) 44px var(--sp-2) var(--sp-3); align-items:flex-start; }
  .dash-alert-list li{ flex-wrap:wrap; row-gap:var(--sp-2); }
  .dash-alert-teks{ flex:1 1 calc(100% - 24px); }
  .dash-alert-list .btn{ flex:1 1 100%; justify-content:center; min-height:40px; }
}
.alert-tutup{ position:relative; padding-right:44px; }
.alert-tutup .alert-isi{ flex:1; flex-direction:column; align-items:flex-start; gap:4px; }
.dw-abs-banner.is-tutup{ position:relative; padding-right:44px; }
.dw-abs-banner.is-tutup .alert-x{ top:50%; transform:translateY(-50%); }
.alert-x{ position:absolute; top:8px; right:8px; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:var(--radius-sm); background:transparent; color:inherit; cursor:pointer; opacity:.7; }
.alert-x:hover{ opacity:1; background:color-mix(in srgb, currentColor 10%, transparent); }
.alert-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; min-width:0; overflow-wrap:anywhere; }
.alert-link{ color:inherit; font-weight:700; text-decoration:underline; white-space:nowrap; }

.ringkasan-tab{ display:flex; flex-direction:column; gap:16px; }
.ringkasan-tab .stat-strip{ margin-bottom:0; }
.ringkasan-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.tindakan-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tindakan-item{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.tindakan-item:hover{ border-color:var(--accent-soft); background:var(--bg-alt); }
.tindakan-ic{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--warning-100); color:#B7791F; }
.tindakan-teks{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:13.5px; font-weight:600; }
.tindakan-item > .fa-chevron-right{ flex:none; font-size:12px; color:var(--text-dim); }
ol.timeline{ list-style:none; margin:0; padding:0; }
.timeline-isi{ min-width:0; }
.timeline-isi .tx-h3{ overflow-wrap:anywhere; }
.empty-state-sm{ padding:28px 16px; }
.empty-state-sm > .fas{ display:block; font-size:28px; margin-bottom:10px; opacity:.6; }
.empty-state-sm p{ margin:0 0 12px; }
.empty-state .tx-small{ margin-top:4px; }

/* Fokus terlihat untuk semua kontrol interaktif */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.icon-btn:focus-visible, .btn-icon-sm:focus-visible, .tab-btn:focus-visible, .menu-item:focus-visible,
.nav-item:focus-visible, .nav-toggle:focus-visible, .context-pill:focus-visible, .tindakan-item:focus-visible,
.select-portal:focus-visible, .portal-cari input:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.form-field input:focus-visible, .form-field select:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:1px; }
.side-panel:focus-visible{ outline:none; }
.info-tip::before{ content:''; position:absolute; inset:-11px; }
.tab-btn{ min-height:44px; }

/* Kartu Mulai Cepat (Owner, tab Ringkasan) */
.mulai-cepat .ringkasan-head{ margin-bottom:10px; }
.mulai-cepat .ringkasan-head .tx-h2{ margin-right:auto; }
.mulai-cepat-progres{ font-size:13px; font-weight:700; color:var(--success-600); }
.mulai-cepat .progress-bar{ margin-bottom:12px; }
.mulai-cepat-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.mulai-cepat-item{ display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.mulai-cepat-item:hover{ border-color:var(--accent-soft); background:var(--bg-alt); }
.mulai-cepat-item:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.mulai-cepat-item > .far{ flex:none; font-size:18px; color:var(--text-dim); }
.mulai-cepat-teks{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:13.5px; font-weight:600; }
.mulai-cepat-item > .fa-chevron-right{ flex:none; font-size:12px; color:var(--text-dim); }
.mulai-cepat-item.is-selesai > .far{ color:var(--success-600); }
.mulai-cepat-item.is-selesai .mulai-cepat-teks{ color:var(--success-600); text-decoration:line-through; }
@media (max-width: 767px){ .mulai-cepat .btn-icon-sm{ width:44px; height:44px; } }
@media (min-width: 576px){
  .mulai-cepat-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .mulai-cepat-list{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (min-width: 992px){
  .ringkasan-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Tab Proyek: kartu setinggi isinya (tanpa ruang kosong), notice kelengkapan, aksi Owner */
/* Kartu satu baris selalu sama tinggi; launcher modul & baris aksi menempel di dasar kartu, jadi sejajar antar kartu. */
#gridProyek{ align-items:stretch; }
#gridProyek .project-card > .modul-launcher,
#gridProyek .project-card > .modul-kosong{ margin-top:auto; }
#gridProyek .project-card > .modul-launcher + .project-card-aksi{ margin-top:0; }
#gridProyek .project-card > .project-card-aksi:not(.modul-launcher + .project-card-aksi){ margin-top:auto; }
.lengkapi-notice{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:var(--radius-md); background:var(--info-100); font-size:12.5px; }
.lengkapi-teks{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; flex:1 1 200px; font-weight:600; }
.lengkapi-teks .fas{ color:var(--info-600); }
.project-card-aksi{ display:flex; gap:8px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.project-card-aksi .btn{ flex:1 1 0; }
.btn-danger-teks:hover{ border-color:var(--danger-600); color:var(--danger-600); }

/* Tab Tim: kartu staf (menggantikan tabel) */
.tim-sec > .tx-h3{ display:flex; align-items:center; gap:8px; }
.tim-sec > .tim-sec-sub{ margin:-6px 0 12px; }
.tim-owner-card{ padding:14px 16px; }
.tim-owner-card .pill{ flex:none; }
.tim-anda{ font-family:'Inter'; font-weight:500; font-size:12.5px; color:var(--text-dim); }
.staf-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.staf-card{ display:flex; flex-direction:column; gap:14px; min-width:0; padding:16px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); }
.staf-card.is-nonaktif{ background:var(--bg-alt); }
.staf-card.is-nonaktif .staf-head .dev-logo, .staf-card.is-nonaktif .staf-id, .staf-card.is-nonaktif .staf-tugas{ opacity:.65; }
.staf-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.staf-card .dev-logo.avatar-sm{ width:44px; height:44px; }
.staf-card .dev-logo.avatar-sm .avatar-inisial{ font-size:14px; }
.staf-id{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4; }
.staf-id b{ font-family:'Plus Jakarta Sans'; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staf-id .tx-small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staf-tugas-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.staf-tugas-list li{ display:flex; align-items:center; gap:8px; min-width:0; padding:8px 10px; border-radius:var(--radius-sm); background:var(--bg-alt); font-size:13px; }
.staf-tugas-list .fas{ flex:none; width:14px; text-align:center; color:var(--text-dim); }
.staf-proyek{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.staf-tugas-list .pill{ flex:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staf-tugas-kosong{ display:flex; align-items:flex-start; gap:8px; margin:8px 0 0; padding:10px 12px; border-radius:var(--radius-sm); background:var(--warning-100); font-size:12.5px; }
.staf-tugas-kosong .fas{ margin-top:2px; color:#B7791F; }
.staf-aksi{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.staf-aksi > .btn{ flex:1; }
.staf-aksi .btn-icon-sm{ width:36px; height:36px; }
.menu-item .fas{ width:16px; text-align:center; }
@media (min-width: 576px){ .staf-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 992px){ .staf-list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 575px), (pointer: coarse){ .staf-aksi .btn-icon-sm{ width:44px; height:44px; } }

/* Target sentuh ≥44px: HP dan layar sentuh */
@media (max-width: 575px), (pointer: coarse){
  .btn{ min-height:44px; }
  .btn-icon-sm{ min-width:44px; min-height:44px; }
  .menu-item{ min-height:44px; }
  .panel-link, .alert-link{ display:inline-flex; align-items:center; min-height:44px; }
  .toast{ left:16px; right:16px; max-width:none; }
}

/* ---------- Halaman galat 404/403/500 (errors/v_galat) ---------- */
.galat-wrap{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px 16px; box-sizing:border-box; }
.galat-brand{ align-self:center; }
.galat-kartu{ width:100%; max-width:480px; box-sizing:border-box; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:32px 28px; text-align:center; }
.galat-ilustrasi{ width:72px; height:72px; color:var(--accent); opacity:.85; margin:0 auto 8px; display:block; }
.galat-kode{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:64px; line-height:1; letter-spacing:-.02em; color:var(--accent); }
.galat-kartu .tx-h1{ margin:12px 0 6px; }
.galat-pesan{ margin:0; color:var(--text-dim); }
.galat-detail{ margin:14px 0 0; padding:10px 12px; background:var(--tag-bg); border-radius:var(--radius-sm); text-transform:none; word-break:break-word; text-align:left; }
.galat-aksi{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.galat-aksi .btn[hidden]{ display:none; }
@media (max-width: 575px){
  .galat-wrap{ justify-content:flex-start; padding-top:24px; }
  .galat-kartu{ padding:28px 20px; }
  .galat-kode{ font-size:56px; }
  .galat-aksi{ flex-direction:column; }
  .galat-aksi .btn{ width:100%; min-height:44px; }
}

/* ============ SIDEBAR ERP: identitas modul, tombol Portal ============ */
.modul-identitas{ --tema:var(--accent-soft); --tema-soft:color-mix(in srgb, var(--tema) 12%, transparent);
  display:flex; align-items:center; gap:10px; margin:0 12px 8px; padding:10px; border-radius:var(--radius-md);
  background:var(--tema-soft); border-left:3px solid var(--tema); }
.modul-ikon{ width:34px; height:34px; border-radius:10px; font-size:15px; }
.modul-teks{ min-width:0; }
.modul-teks b{ display:block; font-size:13.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modul-teks small{ display:block; font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* <768px (laci): kartu nama singkat + proyek. ≥768px: label navigasi 1 baris — ikon kecil + NAMA SINGKAT kapital kecil
   (tanpa proyek, tidak interaktif; nama lengkap di title). Ganti konteks lewat pill header. */
.modul-kicker{ display:none; }
.modul-nama-penuh{ display:none; } /* HP & laptop: nama singkat (lengkap ada di title) */
@media (min-width: 768px){
  .modul-identitas{ gap:10px; margin:2px 12px 8px; padding:8px 10px; background:var(--tema-soft); border-left:0; border:1px solid color-mix(in srgb, var(--tema) 22%, transparent); border-radius:var(--radius-md); cursor:default; }
  .modul-ikon{ width:30px; height:30px; border-radius:9px; font-size:13px; }
  .modul-teks{ flex:1; }
  .modul-nama-penuh, .modul-teks small, .modul-ganti{ display:none; }
  .modul-nama-singkat{ display:inline; }
  .modul-kicker{ display:block; font-family:'IBM Plex Mono'; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; color:var(--text-dim); }
  .modul-teks b{ display:block; font-size:13.5px; font-weight:700; line-height:1.3; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Sidebar mode rail (≥992px, tombol ☰): 72px ikon saja + title per item. Dropdown → .is-intip
   melebarkan sementara ke 252px menimpa konten (margin negatif, tata letak konten tidak bergeser). */
@media (min-width: 992px){
  .app-sidebar{ transition:width .2s ease, margin-right .2s ease; }
  .app-sidebar.is-rail{ width:72px; }
  .app-sidebar.is-rail.is-intip{ width:252px; margin-right:-180px; box-shadow:var(--shadow-lg); }
  .is-rail:not(.is-intip) .brand-name, .is-rail:not(.is-intip) .modul-teks,
  .is-rail:not(.is-intip) .nav-item > span, .is-rail:not(.is-intip) .nav-toggle > span,
  .is-rail:not(.is-intip) .nav-toggle .chevron, .is-rail:not(.is-intip) .nav-sub, .is-rail:not(.is-intip) .sidebar-footer .who{ display:none; }
  .is-rail:not(.is-intip) .sidebar-brand{ justify-content:center; padding:18px 0 14px; }
  .is-rail:not(.is-intip) .modul-identitas{ justify-content:center; margin:0 10px 6px; padding:6px 0; }
  .is-rail:not(.is-intip) .sidebar-nav{ padding:6px 10px 12px; }
  .is-rail:not(.is-intip) .nav-item, .is-rail:not(.is-intip) .nav-toggle{ justify-content:center; gap:0; padding:11px 0; }
  .is-rail:not(.is-intip) .nav-group-label{ height:1px; margin:10px 8px; padding:0; overflow:hidden; font-size:0; background:var(--line); }
  .is-rail:not(.is-intip) .sidebar-footer{ flex-direction:column; justify-content:center; gap:8px; padding:12px 0; }
}

.sidebar-nav [hidden]{ display:none !important; }

.judul-menu{ display:flex; align-items:center; gap:10px; }
.judul-menu .fas{ font-size:.8em; color:var(--text-dim); }

/* HP ≤575px: sidebar layar hampir penuh, target sentuh ≥44px, input 16px (tanpa zoom iOS). */
@media (max-width: 575px){
  .app-sidebar{ width:min(86vw, 320px); }
  .sidebar-nav .nav-item, .sidebar-nav .nav-toggle{ min-height:44px; }
}
/* Tablet 576–991px: sidebar off-canvas (lihat @media 991px), target sentuh tetap nyaman. */
@media (min-width: 576px) and (max-width: 991px){
  .sidebar-nav .nav-item, .sidebar-nav .nav-toggle{ min-height:40px; }
}

/* ============ POPUP SAMBUTAN (SweetAlert2 v9.10.8, hanya halaman ERP) ============ */
.sambutan-popup.swal2-popup{ width:min(26em, calc(100% - 32px)); max-width:calc(100% - 32px); padding:24px 20px 22px;
  background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); font-family:'Inter', sans-serif; cursor:pointer; }
.sambutan-popup .swal2-title.sambutan-judul{ color:var(--text); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.2rem; line-height:1.3; padding:0 4px; word-break:break-word; }
.sambutan-popup .swal2-content.sambutan-isi, .sambutan-popup .swal2-html-container{ color:var(--text-dim); font-size:.9rem; line-height:1.5; word-break:break-word; }
.sambutan-popup .swal2-actions{ flex-direction:column; gap:8px; }
.sambutan-popup .swal2-actions .sambutan-link{ background:none; border:0; padding:6px 8px; min-height:44px; color:var(--accent); font-size:.82rem; font-weight:600; text-decoration:underline; cursor:pointer; }
.sambutan-popup .swal2-content b{ color:var(--text); }
.sambutan-popup.swal2-popup{ position:relative; overflow:hidden; }
.sambutan-popup .swal2-timer-progress-bar-container{ position:absolute; left:20px; right:20px; bottom:8px; top:auto; width:auto; height:4px;
  border-radius:999px; overflow:hidden; background:var(--line); }
.sambutan-popup .swal2-timer-progress-bar{ height:100%; border-radius:999px; background:var(--accent); }
.sambutan-popup .swal2-icon.sambutan-ikon{ --tema:var(--accent-soft); width:64px; height:64px; margin:.2em auto 1em; border:0; border-radius:50%;
  background:var(--tema); color:#fff; font-size:26px; }
.sambutan-popup .swal2-icon.sambutan-ikon .swal2-icon-content{ font-size:inherit; }
.sambutan-popup .swal2-icon.tema-success{ --tema:var(--success-600); }
.sambutan-popup .swal2-icon.tema-warning{ --tema:var(--warning-600); }
.sambutan-popup .swal2-icon.tema-danger{ --tema:var(--danger-600); }
.sambutan-popup .swal2-icon.tema-info{ --tema:var(--info-600); }
.sambutan-popup .swal2-icon.tema-secondary, .sambutan-popup .swal2-icon.tema-dark{ --tema:var(--text-dim); }
.swal2-container.swal2-backdrop-show{ background:rgba(11,25,20,.45); }
@media (prefers-reduced-motion: reduce){
  .sambutan-popup, .sambutan-popup *, .swal2-container{ animation:none !important; transition:none !important; }
  .sambutan-popup .swal2-timer-progress-bar{ transition:none !important; }
}
/* HP ≤575px: lebar sudah dibatasi calc(100% - 32px); padding & judul sedikit lebih kecil. */
@media (max-width: 575px){
  .sambutan-popup.swal2-popup{ padding:20px 16px 18px; }
  .sambutan-popup .swal2-title.sambutan-judul{ font-size:1.05rem; }
}

/* Tombol "Buka Dashboard" pada popup sambutan (target sentuh ≥44px). */
.sambutan-popup .swal2-actions{ margin:18px 0 0; }
.sambutan-popup .swal2-confirm.sambutan-tombol{ min-height:44px; padding:0 22px; cursor:pointer; }
@media (max-width: 575px){ .sambutan-popup .swal2-confirm.sambutan-tombol{ width:100%; } }

/* ============ HP <768px: header ringkas, bottom sheet konteks, footer menu (roadmap B1 & B2) ============ */
/* Default (laptop): elemen khusus HP/tablet tersembunyi — tampilan ≥992px tidak berubah. */
.hp-judul, .hp-cari, .footer-menu, .sheet, .sheet-scrim, .modul-ganti{ display:none; }

@keyframes sheet-naik{ from{ transform:translateY(100%); } to{ transform:none; } }

/* Tablet 768–991px: kolom cari jadi ikon 🔍 (buka palette), pill konteks ringkas. */
@media (min-width: 768px) and (max-width: 991px){
  .app-topbar .hdr-search{ display:none; }
  .app-topbar .hp-cari{ display:flex; flex:none; }
  .ctx-pill{ gap:6px; padding-left:12px; }
  .ctx-pill-ikon{ display:none; }
  .ctx-pill-proyek{ max-width:16ch; }
  .ctx-pill-modul{ max-width:110px; }
}

@media (max-width: 767px){
  body.sheet-terbuka{ overflow:hidden; }

  /* Header: [☰] [judul modul ▾ / proyek] … [🔍] [🔔] [avatar]; semua ikon 40px. Pill, kolom cari & tema disembunyikan. */
  .app-main > .app-topbar{ height:56px; padding:0 8px; gap:4px; }
  .app-topbar .ctx-wrap, .app-topbar > .ctx-pill, .app-topbar .hdr-search, .app-topbar #themeToggleBtn, .topbar-spacer{ display:none; }
  .app-topbar .icon-btn, .app-topbar .avatar{ width:40px; height:40px; flex:none; }
  .app-topbar .sidebar-toggle-btn{ display:flex; }
  .app-topbar .hdr-lonceng{ display:flex; }
  .hp-judul{
    display:flex; flex-direction:column; justify-content:center; gap:1px; flex:1 1 auto; min-width:0; min-height:44px; padding:0 6px;
    border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text); text-align:left; font:inherit;
  }
  button.hp-judul{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  button.hp-judul:active{ background:var(--bg-alt); }
  .hp-judul-modul{ display:flex; align-items:center; gap:6px; min-width:0; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:15px; line-height:1.2; }
  .hp-judul-modul .fas{ flex:none; font-size:13px; }
  .hp-judul-modul .ic{ flex:none; color:var(--text-dim); }
  .hp-judul-teks{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hp-judul-proyek{ font-size:12px; line-height:1.25; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Judul HP presisi: ikon modul 36px kiri (span 2 baris) · nama modul · proyek · panah kanan, sejajar grid */
  .app-topbar .hp-judul{ display:grid; grid-template-columns:26px minmax(0,1fr) 14px; grid-template-areas:"ik tk ch" "ik pr ch"; column-gap:8px; row-gap:0; align-items:center; align-content:center; padding:4px 2px; }
  .app-topbar .hp-judul-modul{ display:contents; }
  .app-topbar .hp-judul .ikon-modul{ grid-area:ik; width:26px; height:26px; border-radius:8px; align-self:center; }
  .app-topbar .hp-judul .ikon-modul .fas{ font-size:11px; }
  .app-topbar .hp-judul-teks{ grid-area:tk; align-self:end; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:14px; line-height:1.2; color:var(--text); }
  .app-topbar .hp-judul-proyek{ grid-area:pr; align-self:start; font-size:11.5px; line-height:1.25; }
  .app-topbar .hp-judul .ic{ grid-area:ch; align-self:center; justify-self:end; color:var(--text-dim); width:14px; height:14px; }
  .hp-cari{ display:flex; flex:none; }

  /* Tipografi: input ≥16px supaya iOS tidak auto-zoom. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ font-size:max(16px, 1em) !important; }

  /* Kartu modul di laci sidebar = tombol ⇄ pembuka bottom sheet (kelas dipasang JS bila sheet ada). */
  .modul-identitas.bisa-ganti{ min-height:48px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
  .modul-identitas.bisa-ganti:active{ transform:scale(.98); }
  .modul-identitas.bisa-ganti:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .modul-identitas.bisa-ganti .modul-teks{ flex:1; }
  .modul-identitas.bisa-ganti .modul-ganti{
    display:flex; flex:none; width:28px; height:28px; align-items:center; justify-content:center;
    border-radius:8px; background:var(--bg-raised); color:var(--tema); font-size:12px;
  }

  /* Palette layar penuh (sama dengan ≤575, diperluas ke seluruh HP). */
  .cmdk-backdrop{ padding:0; }
  .cmdk{ max-width:none; height:100%; max-height:none; border-radius:0; border:none; }
  .cmdk-cari input{ font-size:16px; }
  .cmdk-kaki{ display:none; }

  /* Bottom sheet "Ganti konteks". */
  .sheet-scrim{ position:fixed; inset:0; z-index:150; background:rgba(11,25,20,.45); }
  .sheet-scrim:not([hidden]){ display:block; }
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:155; max-height:85vh; flex-direction:column;
    background:var(--bg-raised); border-radius:18px 18px 0 0; box-shadow:var(--shadow-lg);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sheet:not([hidden]){ display:flex; animation:sheet-naik .22s ease; }
  .sheet-grip{ flex:none; width:40px; height:4px; border-radius:100px; background:var(--line-strong); margin:8px auto 0; position:relative; touch-action:none; }
  .sheet-grip::before{ content:''; position:absolute; inset:-10px -30px; }
  .sheet-kepala{ touch-action:none; }
  .sheet-kepala{ flex:none; display:flex; align-items:center; gap:4px; padding:4px 8px 4px 12px; border-bottom:1px solid var(--line); }
  .sheet-judul{ flex:1; min-width:0; margin:0; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:16px; }
  .sheet-isi{ flex:1; min-height:0; overflow-y:auto; padding:8px 12px 12px; overscroll-behavior:contain; }
  .sheet-proyek{ min-height:48px; }
  .sheet-kaki{ flex:none; display:grid; gap:6px; padding:10px 12px 8px; border-top:1px solid var(--line); box-shadow:0 -4px 10px rgba(18,45,40,.06); }
  .sheet-kaki .menu-item{ min-height:44px; justify-content:center; border:1.5px solid var(--line-strong); background:var(--bg-raised); font-weight:600; color:var(--accent); }
  .sheet-kaki .ctx-default-baris{ flex:none; justify-content:space-between; min-height:52px; padding:0 4px 0 10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt); }
  .sheet-kaki .ctx-default{ flex:1; padding:6px 0; }
  .sheet-kaki .info-tip::after{ left:auto; right:0; width:min(280px, calc(100vw - 48px)); max-width:none; }
  .sheet-proyek{ border:1px solid var(--line); background:var(--bg-raised); box-shadow:var(--shadow-sm); border-radius:var(--radius-md); margin-bottom:8px; padding:10px 12px; }
  .sheet-proyek[aria-current="true"]{ border-color:var(--accent-soft); background:var(--bg-alt); box-shadow:inset 4px 0 0 var(--accent-soft), var(--shadow-sm); font-weight:600; }
  .sheet-proyek .ctx-proyek-jml{ padding:2px 9px; border-radius:100px; background:var(--bg-alt); border:1px solid var(--line); }
  .sheet-proyek .ctx-proyek-nama{ font-size:14.5px; }
  .sheet-isi .ctx-dev-label{ margin:14px 2px 8px; }

  /* Footer menu (bottom nav) = "floating dock": bar kaca melayang modern, sudut membulat halus; di bawah drawer sidebar (z 40) & scrim (z 35).
     Aktif = pill aksen lembut di belakang ikon dengan micro-animasi & warna modul dinamis. Hanya dirender bila ada konfigurasi valid. */
  .footer-menu{
    --fm-utama:var(--accent-soft, #1E9384); --fm-bayang:rgba(11,25,20,.14); --fm-kilau:rgba(255,255,255,.85); --fm-tinggi:64px; --fm-jarak:12px;
    display:grid; grid-template-columns:repeat(var(--fm-kolom, 5), minmax(0, 1fr)); align-items:stretch;
    position:fixed; left:14px; right:14px; bottom:calc(var(--fm-jarak) + env(safe-area-inset-bottom)); z-index:32;
    height:var(--fm-tinggi); padding:0 4px; border-radius:28px;
    background:color-mix(in srgb, var(--bg-raised) 86%, transparent);
    -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px);
    border:1px solid color-mix(in srgb, var(--line) 45%, rgba(255,255,255,.7));
    box-shadow:0 16px 36px -8px var(--fm-bayang), 0 4px 12px -2px rgba(11,25,20,.05), inset 0 1px 1px var(--fm-kilau);
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .footer-menu.is-sembunyi{ transform:translateY(calc(100% + var(--fm-jarak) + 40px)); }
  .footer-menu[data-tema="success"], .footer-menu[data-tema="green"]{ --fm-utama:var(--success-600); }
  .footer-menu[data-tema="warning"], .footer-menu[data-tema="yellow"]{ --fm-utama:var(--warning-600); }
  .footer-menu[data-tema="danger"], .footer-menu[data-tema="red"]{ --fm-utama:var(--danger-600); }
  .footer-menu[data-tema="info"], .footer-menu[data-tema="cyan"], .footer-menu[data-tema="teal"]{ --fm-utama:var(--info-600); }
  .fm-item{
    position:relative; min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px; color:var(--text-dim); text-decoration:none; -webkit-tap-highlight-color:transparent;
    transition:transform .16s cubic-bezier(.2,.8,.2,1), color .18s ease;
  }
  button.fm-item{ appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0; margin:0; font:inherit; cursor:pointer; width:100%; }
  .fm-ikon{
    position:relative; width:44px; height:28px; display:flex; align-items:center; justify-content:center;
    border-radius:14px; font-size:17px; line-height:1; transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease;
  }
  .fm-ikon > i{ position:relative; z-index:1; }
  /* Pill aktif / sentuh = ::before */
  .fm-item:not(.fm-utama) .fm-ikon::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:color-mix(in srgb, var(--fm-utama) 14%, transparent);
    opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .fm-label{ max-width:100%; padding:0 2px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600; font-size:10px; letter-spacing:-.015em; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .18s ease, font-weight .18s ease; }
  .fm-item:active{ transform:scale(.92); }
  .fm-item:not(.fm-utama):active .fm-ikon::before{ opacity:.65; transform:scale(.9); }
  .fm-item:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; border-radius:14px; }
  .fm-item.is-aktif{ color:var(--fm-utama); }
  .fm-item.is-aktif .fm-label{ font-weight:700; color:var(--fm-utama); }
  .fm-item.is-aktif:not(.fm-utama) .fm-ikon{ transform:translateY(-1px); }
  .fm-item.is-aktif:not(.fm-utama) .fm-ikon::before{ opacity:1; transform:scale(1); box-shadow:0 2px 8px -2px color-mix(in srgb, var(--fm-utama) 30%, transparent); animation:fm-pill .36s cubic-bezier(.34,1.56,.64,1); }
  @keyframes fm-pill{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
  /* Item utama (slot tengah): floating gem/squircle bergradien lembut, elevated dengan rim cahaya kaca & glow dinamis */
  .fm-utama{ justify-content:flex-end; padding-bottom:7px; }
  .fm-utama .fm-ikon{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:52px; height:52px; border-radius:20px; overflow:hidden;
    background:linear-gradient(145deg, color-mix(in srgb, var(--fm-utama) 88%, #fff 12%) 0%, var(--fm-utama) 56%, color-mix(in srgb, var(--fm-utama) 80%, #062820) 100%);
    color:#fff; font-size:20px;
    box-shadow:0 0 0 3.5px var(--bg-raised), 0 10px 22px -4px color-mix(in srgb, var(--fm-utama) 52%, transparent), 0 3px 8px -2px rgba(11,25,20,.12), inset 0 1.5px 2px rgba(255,255,255,.45);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  }
  .fm-utama .fm-ikon::after{ /* kilau kaca atas halus */
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.05) 45%, transparent 100%);
  }
  .fm-utama .fm-ikon > i{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.24)); }
  .fm-utama:active{ transform:none; }
  .fm-utama:active .fm-ikon{ transform:translateX(-50%) scale(.92); box-shadow:0 0 0 3.5px var(--bg-raised), 0 4px 12px -2px color-mix(in srgb, var(--fm-utama) 45%, transparent); }
  .fm-utama .fm-label{ color:var(--text); font-weight:600; }
  .fm-utama.is-aktif .fm-label{ font-weight:700; color:var(--fm-utama); }
  .fm-utama.is-aktif .fm-ikon{ box-shadow:0 0 0 3.5px var(--bg-raised), 0 0 0 5.5px color-mix(in srgb, var(--fm-utama) 32%, transparent), 0 12px 26px -3px color-mix(in srgb, var(--fm-utama) 60%, transparent), inset 0 1.5px 2px rgba(255,255,255,.5); }

  /* Konten tidak tertutup footer — hanya bila footer dirender. */
  body:has(#footerMenu) .app-content{ padding-bottom:calc(64px + 12px + env(safe-area-inset-bottom) + 24px); }
}
@media (max-width: 767px) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .footer-menu{ --fm-bayang:rgba(0,0,0,.55); --fm-kilau:rgba(255,255,255,.1); border-color:rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .fm-utama .fm-ikon{ box-shadow:0 0 0 3.5px var(--bg-raised), 0 12px 24px -3px color-mix(in srgb, var(--fm-utama) 65%, transparent), 0 4px 12px -1px rgba(0,0,0,.45), inset 0 1.5px 2px rgba(255,255,255,.3); }
}
@media (max-width: 767px){
  :root[data-theme="dark"] .footer-menu{ --fm-bayang:rgba(0,0,0,.55); --fm-kilau:rgba(255,255,255,.1); border-color:rgba(255,255,255,.12); }
  :root[data-theme="dark"] .fm-utama .fm-ikon{ box-shadow:0 0 0 3.5px var(--bg-raised), 0 12px 24px -3px color-mix(in srgb, var(--fm-utama) 65%, transparent), 0 4px 12px -1px rgba(0,0,0,.45), inset 0 1.5px 2px rgba(255,255,255,.3); }
}
/* Gerak dikurangi: footer tidak disembunyikan saat gulir, tanpa animasi tekan. */
@media (prefers-reduced-motion: reduce){
  .footer-menu, .footer-menu.is-sembunyi{ transform:none; transition:none; }
  .fm-item, .fm-item:active, .modul-identitas.bisa-ganti:active{ transform:none; transition:none; }
  .fm-ikon, .fm-ikon::before, .fm-item.is-aktif .fm-ikon, .fm-utama:active .fm-ikon{ transform:none; transition:none; animation:none; }
  .fm-utama .fm-ikon{ transform:translateX(-50%) !important; }
}

/* ---- Dashboard modul (B3): grid 12 kolom; HP <576, tablet 576-991, laptop >=992 ---- */
.dash-hero{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; margin-bottom:20px; padding:14px 24px; border-radius:var(--radius-lg); background:var(--bg-raised); border:1px solid var(--line); box-shadow:0 1px 2px rgba(18,45,40,.04), 0 8px 24px -12px rgba(18,45,40,.12); }
.dash-hero::before{ content:''; position:absolute; inset:0 0 0 35%; pointer-events:none; opacity:.14; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231E9384' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E") repeat; -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%); }
.dash-hero > *{ position:relative; z-index:1; }
.dash-hero-kiri{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 340px; }
.dash-lencana{ position:relative; flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.dash-lencana::before, .dash-lencana::after{ content:''; position:absolute; inset:7px; border-radius:7px; background:linear-gradient(135deg, var(--teal-500), var(--teal-700)); }
.dash-lencana::after{ transform:rotate(45deg); }
.dash-lencana > span{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:11px; color:var(--teal-900); background:var(--gold-300); box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.dash-hero-teks{ min-width:0; }
.dash-salam{ font-size:11.5px; line-height:1.3; font-weight:700; letter-spacing:.02em; color:#B7791F; }
.dash-hero-judul{ margin-top:1px; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:20px; line-height:1.25; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-tanggal{ display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:2px; font-size:12.5px; color:var(--text-dim); }
.dash-tanggal span{ display:inline-flex; align-items:center; gap:6px; }
.dash-tanggal i{ font-size:11px; color:var(--accent-soft); }
.dash-aksi{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; min-width:0; flex:0 1 auto; }
.dash-chip{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:240px; min-height:38px; padding:0 14px 0 6px; border-radius:999px; border:1px solid var(--line); background:var(--bg-raised); color:var(--text); font-size:12.5px; font-weight:600; line-height:1.25; text-decoration:none; white-space:nowrap; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.dash-chip-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dash-chip-ic{ flex:none; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--info-100); color:var(--accent-soft); }
.dash-chip-ic i{ font-size:11px; }
a.dash-chip:hover{ border-color:var(--accent-soft); background:var(--info-100); text-decoration:none; color:var(--text); }
a.dash-chip:hover .dash-chip-ic{ background:var(--accent-soft); color:#fff; }
a.dash-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* Tombol "＋ Aksi Cepat ▾" (kartu sambutan) */
.dash-chip-ac{ cursor:pointer; font-family:inherit; padding:0 14px; border-style:dashed; border-color:var(--line-strong); background:transparent; color:var(--accent); }
.dash-chip-ac:hover, .dash-chip-ac[aria-expanded="true"]{ border-style:solid; border-color:var(--accent-soft); background:var(--info-100); }
.dash-chip-ac:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.dash-chip-plus{ font-size:14px; line-height:1; }
.dash-chip-panah{ font-size:10px; color:var(--text-dim); transition:transform .15s ease; }
.dash-chip-ac[aria-expanded="true"] .dash-chip-panah{ transform:rotate(180deg); }
@media (min-width: 992px){
  .dash-hero{ flex-wrap:nowrap; padding:18px 24px; }
  .dash-hero-kiri{ flex:1 1 auto; }
  .dash-aksi{ max-width:62%; }
}
/* Tablet: sapaan di atas, aksi jadi baris sendiri dipisah garis tipis */
@media (max-width: 991px){
  .dash-hero{ flex-direction:column; align-items:stretch; gap:14px; padding:18px 20px; }
  .dash-hero-kiri{ flex:none; }
  .dash-aksi{ justify-content:flex-start; padding-top:14px; border-top:1px solid var(--line); }
}

/* ---- Aksi Cepat: popover (≥768px), panel tengah (tanpa tombol), bottom sheet (<768px) ---- */
.ac-scrim{ position:fixed; inset:0; z-index:165; background:transparent; }
.ac-scrim.is-redup{ background:rgba(11,25,20,.45); }
.ac-scrim[hidden], .ac-panel[hidden]{ display:none; }
.ac-panel{ position:fixed; z-index:170; display:flex; flex-direction:column; width:min(380px, calc(100vw - 32px)); max-height:min(70vh, 520px); overflow:hidden;
  background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); animation:toast-masuk .15s ease; }
.ac-panel.is-tengah{ top:12vh; left:0; right:0; margin:0 auto; width:min(520px, calc(100vw - 32px)); border-radius:var(--radius-lg); }
/* Ukuran adaptif (≥768px) menurut jumlah aksi: s ≤6 · m 7–18 (2 kolom) · l >18 (selebar kartu sambutan, grup = kolom).
   Posisi, lebar l/tablet & max-height dihitung JS (visualViewport); di sini hanya bawaan. */
.ac-panel.ac-s{ width:min(420px, calc(100vw - 32px)); }
.ac-panel.ac-m{ width:min(760px, calc(100vw - 32px)); }
.ac-panel.ac-l{ width:calc(100vw - 32px); }
.ac-panel.is-tengah.ac-m, .ac-panel.is-tengah.ac-l{ width:min(760px, calc(100vw - 32px)); }
.ac-panel.is-tablet{ width:auto; }
.ac-grid .ac-daftar{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 14px; align-content:start; padding:0 12px 10px; }
.ac-grid.ac-l .ac-daftar{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.ac-grid .ac-grup{ min-width:0; }
.ac-grid .ac-grup + .ac-grup{ border-top:0; margin-top:0; }
.ac-grid .ac-grup-label{ padding:10px 10px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.ac-grid .ac-sub{ display:none; }
.ac-grid .ac-grup-lebar{ grid-column:span 2; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:column; column-gap:14px; align-content:start; }
.ac-grid .ac-grup-lebar .ac-grup-label{ grid-column:1 / -1; grid-row:1; }
.ac-grid .ac-kosong{ grid-column:1 / -1; }
.ac-kaki-grid{ display:none; }
.ac-grid .ac-kaki-grid{ display:inline; }
@media (min-width: 1200px){ .ac-grid.ac-l:not(.is-tablet) .ac-daftar{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ac-grip{ display:none; }
.ac-kepala{ display:none; align-items:center; gap:8px; padding:4px 8px 4px 16px; }
.ac-judul{ flex:1; min-width:0; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:16px; }
.ac-cari{ flex:none; display:flex; align-items:center; gap:10px; margin:8px; padding:0 12px; height:40px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg); color:var(--text-dim); cursor:text; }
.ac-cari:focus-within{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.ac-cari input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; }
.ac-cari input::-webkit-search-cancel-button{ cursor:pointer; }
.ac-daftar{ flex:1; min-height:0; overflow-y:auto; padding:0 6px 6px; overscroll-behavior:contain; }
.ac-grup + .ac-grup{ border-top:1px solid var(--line); margin-top:4px; }
.ac-grup-label{ font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:10px 10px 4px; }
.ac-item{ display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 6px 6px 10px; border-radius:var(--radius-sm); cursor:pointer; }
.ac-item.is-aktif{ background:var(--bg-alt); box-shadow:inset 3px 0 0 var(--accent-soft); }
.ac-item.is-memuat{ opacity:.6; cursor:progress; }
.ac-ikon{ width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; background:var(--tag-bg); color:var(--accent-soft); }
.ac-ikon.jenis-tambah{ background:var(--success-100); color:var(--success-600); }
.ac-ikon.jenis-lihat{ background:var(--info-100); color:var(--info-600); }
.ac-ikon.jenis-ekspor{ background:var(--warning-100); color:var(--warning-600); }
.ac-teks{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ac-label{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-sub{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-pin{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer; opacity:.55; transition:opacity .15s ease, background .15s ease; }
.ac-item:hover .ac-pin, .ac-item.is-aktif .ac-pin, .ac-pin.is-pin, .ac-pin:focus-visible{ opacity:1; }
.ac-pin:hover{ background:var(--tag-bg); color:var(--accent); }
.ac-pin:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.ac-pin.is-memuat{ opacity:.4; cursor:progress; }
.ac-kosong{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 12px; text-align:center; color:var(--text-dim); font-size:13px; }
.ac-kaki{ flex:none; display:flex; flex-wrap:wrap; gap:4px 14px; padding:8px 12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-dim); }
.ac-kaki kbd{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; line-height:1; padding:2px 5px; margin-right:2px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px; background:var(--bg-raised); color:var(--text-dim); }
@media (pointer: coarse){ .ac-pin{ width:44px; height:44px; opacity:1; } .ac-kaki, .ac-grid .ac-kaki-grid{ display:none; } .ac-panel:focus{ outline:0; } }
@media (max-width: 767px){
  body.ac-terbuka{ overflow:hidden; }
  .ac-panel.is-sheet{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:85vh; transform:none; border:0; border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom); animation:sheet-naik .22s ease; }
  .ac-panel.is-sheet .ac-grip{ display:block; flex:none; width:40px; height:4px; border-radius:100px; background:var(--line-strong); margin:8px auto 0; }
  .ac-panel.is-sheet .ac-kepala{ display:flex; }
  .ac-panel.is-sheet .ac-tutup{ width:44px; height:44px; border:0; }
  .ac-panel.is-sheet .ac-cari{ height:44px; margin:4px 12px 8px; }
  .ac-panel.is-sheet .ac-cari input{ font-size:16px; } /* cegah zoom iOS */
  .ac-panel.is-sheet .ac-item{ min-height:52px; }
  .ac-panel.is-sheet .ac-kaki{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .ac-panel, .ac-panel.is-sheet{ animation:none; } .dash-chip-panah{ transition:none; } }
:root[data-theme="dark"] .dash-salam{ color:var(--gold-300); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .dash-salam{ color:var(--gold-300); } }

.dash-seksi{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.dash-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; align-items:stretch; }
.dash-grup{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.dash-grup > .dash-grid{ flex:1; }
.dash-grup-judul{ margin:0; }
.dash-card{ display:flex; flex-direction:column; min-width:0; padding:20px 22px; border-radius:18px; background:var(--bg-raised); border:1px solid var(--line); box-shadow:0 1px 3px rgba(18,45,40,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dash-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); box-shadow:0 10px 24px -6px rgba(18,45,40,.10), 0 2px 6px rgba(18,45,40,.03); }
.dash-nada-1{ --nada:var(--teal-500); --nada-bg:rgba(30,147,132,.12); }
.dash-nada-2{ --nada:#2563EB; --nada-bg:rgba(37,99,235,.11); }
.dash-nada-3{ --nada:#7C3AED; --nada-bg:rgba(124,58,237,.11); }
.dash-nada-4{ --nada:#EA580C; --nada-bg:rgba(234,88,12,.11); }
.dash-nada-5{ --nada:#0D9488; --nada-bg:rgba(13,148,136,.12); }
.dash-nada-6{ --nada:#0284C7; --nada-bg:rgba(2,132,199,.11); }
.dash-card-atas{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; min-width:0; }
.dash-card-judul-wrap{ display:flex; align-items:center; gap:11px; min-width:0; }
.dash-ic{ flex:none; width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; background:linear-gradient(135deg, var(--nada-bg), color-mix(in srgb, var(--nada-bg) 35%, var(--bg-raised))); color:var(--nada); border:1px solid color-mix(in srgb, var(--nada) 25%, transparent); box-shadow:0 3px 8px -2px color-mix(in srgb, var(--nada) 30%, transparent); transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.dash-card:hover .dash-ic{ transform:scale(1.06); }
.dash-label{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em; }
.dash-pill-pct{ flex:none; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:11.5px; font-weight:700; line-height:1; padding:4px 9px; border-radius:var(--radius-full); background:var(--nada-bg); color:var(--nada); border:1px solid color-mix(in srgb, var(--nada) 22%, transparent); }
.dash-pill-status{ flex:none; font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:700; line-height:1; padding:4px 8px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:4px; }
.dash-pill-status.is-warning{ background:var(--warning-100); color:var(--warning-600); border:1px solid color-mix(in srgb, var(--warning-600) 25%, transparent); }
.dash-card-isi{ display:flex; flex-direction:column; min-width:0; }
.dash-nilai{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:32px; line-height:1.12; letter-spacing:-.03em; min-width:0; color:var(--text); display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; min-height:36px; }
.dash-nilai-angka{ font-weight:800; color:var(--text); }
.dash-nilai-pembanding{ font-size:17px; font-weight:600; color:var(--text-dim); letter-spacing:-.01em; opacity:.85; }
.dash-nilai-slash{ opacity:.4; margin-right:2px; }
.dash-nilai-tgl, .dash-nilai-waktu{ font-size:22px; font-weight:800; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:8px; }
.dash-nilai-ik{ font-size:16px; color:var(--nada); opacity:.85; flex:none; }
.dash-nilai.dash-nilai-teks{ font-size:20px; letter-spacing:-.01em; font-weight:700; }
.dash-progress{ width:100%; height:6px; background:color-mix(in srgb, var(--line) 50%, transparent); border-radius:99px; overflow:hidden; margin:8px 0 2px; }
.dash-progress-bar{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--nada), color-mix(in srgb, var(--nada) 75%, #ffffff)); transition:width .45s cubic-bezier(.16,1,.3,1); }
.dash-progress-bar.is-waspada{ background:linear-gradient(90deg, var(--warning-600), #FBBF24); }
.dash-progress-bar.is-bahaya{ background:linear-gradient(90deg, var(--danger-600), #F87171); }
.dash-spark{ display:block; width:100%; height:44px; margin-top:14px; overflow:visible; }
.dash-batang{ margin-top:2px; margin-bottom:12px; }
.dash-batang-info{ min-height:18px; font-size:12px; font-weight:600; color:var(--text); }
.dash-batang-isi{ display:flex; align-items:stretch; gap:6px; margin-top:6px; }
.dash-bt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; border:0; background:none; font:inherit; color:var(--text-dim); cursor:pointer; }
.dash-bt-n{ font-size:11px; font-weight:600; line-height:1; }
.dash-bt-bar{ display:flex; align-items:flex-end; width:100%; height:44px; }
.dash-bt-isi{ display:block; width:100%; border-radius:4px 4px 2px 2px; background:var(--nada, var(--accent-soft)); opacity:.35; transition:opacity .15s ease; }
.dash-bt.is-ini .dash-bt-isi, .dash-bt:hover .dash-bt-isi, .dash-bt:focus-visible .dash-bt-isi{ opacity:1; }
.dash-bt.is-ini .dash-bt-n, .dash-bt:hover .dash-bt-n{ color:var(--text); }
.dash-bt-h{ font-size:11px; line-height:1; }
.dash-bt:focus-visible{ outline:2px solid var(--nada, var(--accent)); outline-offset:2px; border-radius:4px; }
.dash-spark-sumbu{ display:flex; justify-content:space-between; margin-top:4px; font-size:11px; color:var(--text-dim); }
.dash-spark-area{ fill:var(--nada, var(--accent-soft)); opacity:.12; }
.dash-spark-garis{ fill:none; stroke:var(--nada, var(--accent-soft)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dash-tren{ margin-top:8px; margin-bottom:12px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:12px; color:var(--text-dim); line-height:1.45; }
.dash-sub-ket{ color:var(--text-dim); }
.dash-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-full); font-size:12px; font-weight:700; }
.dash-badge i{ font-size:9px; }
.dash-badge.is-naik{ background:var(--success-100); color:var(--success-600); }
.dash-badge.is-turun{ background:var(--danger-100); color:var(--danger-600); }
.dash-badge-sub{ display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:6px; font-size:11.5px; font-weight:600; line-height:1.2; flex:none; }
.dash-badge-sub i{ font-size:10px; }
.dash-badge-sub.is-persen{ background:var(--nada-bg); color:var(--nada); border:1px solid color-mix(in srgb, var(--nada) 20%, transparent); }
.dash-badge-sub.is-warning{ background:var(--warning-100); color:var(--warning-600); border:1px solid color-mix(in srgb, var(--warning-600) 25%, transparent); }
.dash-badge-sub.is-success{ background:var(--success-100); color:var(--success-600); border:1px solid color-mix(in srgb, var(--success-600) 25%, transparent); }
.dash-badge-sub.is-danger{ background:var(--danger-100); color:var(--danger-600); border:1px solid color-mix(in srgb, var(--danger-600) 25%, transparent); }
.dash-user-chip{ display:inline-flex; align-items:center; gap:5px; color:var(--text); font-weight:600; font-size:12px; }
.dash-user-chip i{ color:var(--nada); font-size:13px; }
.dash-sub-aksi{ color:var(--text-dim); font-size:12px; }
.dash-titik{ opacity:.35; font-size:11px; }
.dash-card-kaki{ margin-top:auto; padding-top:8px; border-top:1px solid color-mix(in srgb, var(--line) 75%, transparent); display:flex; align-items:flex-start; gap:8px; }
.dash-kaki-ic{ flex:none; font-size:11px; color:var(--nada); opacity:.6; margin-top:3px; }
.dash-selengkapnya{ display:inline-flex; align-items:center; gap:8px; min-height:32px; font-size:13px; font-weight:600; color:var(--accent); text-decoration:none; }
.dash-selengkapnya:hover{ text-decoration:underline; }
.dash-selengkapnya .fas{ width:16px; flex:none; }
.dash-desk{ margin:0; font-size:12px; line-height:1.45; color:var(--text-dim); }
.dash-contoh{ gap:6px; padding:3px 10px; font-size:11px; font-weight:600; background:var(--warning-100); color:var(--ink-700); }
.dash-contoh i{ font-size:10px; }
.dash-card-kepala{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dash-card-kepala .tx-small{ margin-top:2px; }
.dash-menu{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:8px; }
.dash-menu a{ display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--bg-raised); color:var(--text); font-weight:600; font-size:13.5px; text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.dash-menu a:hover{ border-color:var(--accent-soft); background:var(--info-100); }
.dash-menu a:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.dash-menu-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; background:var(--info-100); color:var(--accent-soft); }
.dash-menu-nama{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-menu-panah{ font-size:11px; color:var(--text-dim); opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease; }
.dash-menu a:hover .dash-menu-panah{ opacity:1; transform:none; color:var(--accent-soft); }
.dash-kolom{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.dash-bantuan{ flex-direction:row; align-items:center; gap:14px; background:var(--bg-shell); }
.dash-bantuan .tx-small{ margin-top:2px; }
.dash-kosong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 0; text-align:center; }
/* Isi widget pribadi (DashboardWidget 'html' → .dw): slot Masuk/Pulang, info jadwal, stat mini berwarna */
.dw{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-3); min-width:0; }
.dw-slot-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); }
.dw-slot{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-md); border:1px dashed var(--line-strong); background:var(--bg-alt); min-width:0; }
.dw-slot.is-isi{ border-style:solid; border-color:color-mix(in srgb, var(--nada, var(--accent-soft)) 30%, transparent); background:color-mix(in srgb, var(--nada-bg, var(--tag-bg)) 70%, var(--bg-raised)); }
.dw-slot-label{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-dim); }
.dw-slot-label i{ font-size:11px; color:var(--nada, var(--accent-soft)); }
.dw-slot b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.dw-slot:not(.is-isi) b{ color:var(--text-dim); opacity:.7; }
.dw-info{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dw-info li{ display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px; color:var(--text-dim); }
.dw-info i{ flex:none; width:16px; text-align:center; font-size:12px; color:var(--nada, var(--accent-soft)); opacity:.8; }
.dw-info b{ margin-left:auto; font-weight:600; color:var(--text); text-align:right; overflow-wrap:anywhere; }
.dw-aksi{ align-self:stretch; justify-content:center; min-height:42px; }
.dash-nilai:empty{ display:none; }
.dw .kk-stat{ margin:0; }
.dw-bar{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--nada-bg, var(--tag-bg)) 60%, var(--bg-raised)); border:1px solid color-mix(in srgb, var(--nada, var(--accent-soft)) 18%, transparent); }
.dw-bar-teks{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); font-size:12.5px; color:var(--text-dim); }
.dw-bar-teks b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:var(--fs-16); font-weight:800; color:var(--nada, var(--accent-soft)); }
.dw-bar-trek{ height:8px; border-radius:var(--radius-full); background:color-mix(in srgb, var(--line) 70%, transparent); overflow:hidden; }
.dw-bar-trek > span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--nada, var(--accent-soft)), color-mix(in srgb, var(--nada, var(--accent-soft)) 70%, #fff)); transition:width .45s ease; }
.dash-catatan{ display:flex; align-items:center; gap:6px; margin-top:16px; }
@media (min-width: 576px){ .dash-menu{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px){
  /* HP: aksi jadi grid 2 kolom berupa tile ringkas (ikon + label 2 baris) */
  .dash-hero{ gap:12px; padding:16px; margin-bottom:16px; border-radius:var(--radius-md); }
  .dash-hero::before{ inset:0; opacity:.07; }
  .dash-hero-kiri{ align-items:center; gap:14px; }
  .dash-lencana{ width:60px; height:60px; }
  .dash-lencana::before, .dash-lencana::after{ inset:8px; border-radius:9px; }
  .dash-lencana > span{ width:34px; height:34px; font-size:13px; }
  .dash-salam{ font-size:11px; }
  .dash-hero-judul{ font-size:18px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .dash-tanggal{ gap:2px 12px; margin-top:4px; font-size:12px; }
  .dash-tanggal i{ font-size:10.5px; }
  .dash-aksi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; gap:8px; padding-top:12px; }
  .dash-chip{ max-width:none; min-height:44px; padding:6px 10px; gap:8px; border-radius:var(--radius-sm); white-space:normal; font-size:12px; }
  a.dash-chip{ flex-direction:row; align-items:center; justify-content:flex-start; }
  .dash-chip-ic{ width:26px; height:26px; border-radius:8px; }
  .dash-chip-ic i{ font-size:12px; }
  a.dash-chip .dash-chip-label{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .dash-chip-ac{ min-height:44px; justify-content:center; white-space:nowrap; }
  .dash-chip-ac:nth-child(odd){ grid-column:1 / -1; }
  .dash-grid{ gap:12px; }
  .dash-card{ padding:16px 18px; border-radius:16px; }
  .dash-nilai{ font-size:26px; }
  .dash-nilai-pembanding{ font-size:15px; }
  .dash-nilai-tgl, .dash-nilai-waktu{ font-size:18px; }
  .dash-ic{ width:36px; height:36px; border-radius:10px; font-size:14px; }
}
@media (max-width: 575px){ .dash-m-1{ grid-column:span 1; } .dash-m-2{ grid-column:span 2; } .dash-m-3{ grid-column:span 3; } .dash-m-4{ grid-column:span 4; } .dash-m-5{ grid-column:span 5; } .dash-m-6{ grid-column:span 6; } .dash-m-7{ grid-column:span 7; } .dash-m-8{ grid-column:span 8; } .dash-m-9{ grid-column:span 9; } .dash-m-10{ grid-column:span 10; } .dash-m-11{ grid-column:span 11; } .dash-m-12{ grid-column:span 12; } }
@media (min-width: 576px) and (max-width: 991px){ .dash-t-1{ grid-column:span 1; } .dash-t-2{ grid-column:span 2; } .dash-t-3{ grid-column:span 3; } .dash-t-4{ grid-column:span 4; } .dash-t-5{ grid-column:span 5; } .dash-t-6{ grid-column:span 6; } .dash-t-7{ grid-column:span 7; } .dash-t-8{ grid-column:span 8; } .dash-t-9{ grid-column:span 9; } .dash-t-10{ grid-column:span 10; } .dash-t-11{ grid-column:span 11; } .dash-t-12{ grid-column:span 12; } }
@media (min-width: 992px){ .dash-l-1{ grid-column:span 1; } .dash-l-2{ grid-column:span 2; } .dash-l-3{ grid-column:span 3; } .dash-l-4{ grid-column:span 4; } .dash-l-5{ grid-column:span 5; } .dash-l-6{ grid-column:span 6; } .dash-l-7{ grid-column:span 7; } .dash-l-8{ grid-column:span 8; } .dash-l-9{ grid-column:span 9; } .dash-l-10{ grid-column:span 10; } .dash-l-11{ grid-column:span 11; } .dash-l-12{ grid-column:span 12; } }

/* ---- Ikon modul: SATU bentuk di sidebar, pill konteks header & dashboard.
   Warna dari --tema (helper warna_modul), ukuran diatur per tempat. ---- */
.ikon-modul{ flex:none; display:inline-flex; align-items:center; justify-content:center; line-height:1; color:#fff; background:var(--tema, var(--accent-soft)); box-shadow:0 4px 10px -4px color-mix(in srgb, var(--tema, var(--accent-soft)) 60%, transparent); }
.ikon-modul-xs{ width:22px; height:22px; border-radius:7px; }
.hp-judul-modul .ikon-modul .fas{ font-size:10px; }

/* ============ TUR APLIKASI (Driver.js 1.x lokal) & TOMBOL ❔ BANTUAN — roadmap tur A/C1 ============ */
/* Bantuan: ≥768px ikon di header (.bantuan-wrap); <768px item di menu avatar (.bantuan-hp). */
.menu-item[hidden]{ display:none; }
.bantuan-hp{ display:none; }
@media (max-width: 767px){
  .bantuan-wrap{ display:none; }
  .bantuan-hp{ display:block; }
  .bantuan-hp .menu-item{ min-height:44px; }
}
/* Pintasan keyboard: sembunyi di HP/tablet (≤991px) & perangkat sentuh tanpa mouse (iPad landscape). */
@media (max-width: 991px), (hover: none) and (pointer: coarse){
  .bantuan-pintasan{ display:none; }
}
.pintasan-daftar{ margin:0; display:flex; flex-direction:column; gap:10px; }
.pintasan-daftar > div{ display:flex; align-items:center; gap:12px; }
.pintasan-daftar dt{ flex:none; min-width:76px; display:flex; gap:4px; }
.pintasan-daftar dd{ margin:0; font-size:13px; color:var(--text); }
.pintasan-daftar kbd{ font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; line-height:1; padding:4px 7px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; background:var(--bg-raised); color:var(--text-dim); white-space:nowrap; }
.kontak-admin{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.kontak-admin .btn{ height:44px; justify-content:flex-start; white-space:normal; overflow-wrap:anywhere; }

/* Popover tur: warna & radius ikut .card / var(--accent); mode gelap otomatis lewat token. */
.driver-popover.tur-popover{
  font-family:'Inter',system-ui,sans-serif; color:var(--text); background:var(--bg-raised);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:18px 18px 14px; min-width:0; width:min(360px, calc(100vw - 32px)); max-width:calc(100% - 32px);
}
.tur-popover .driver-popover-title{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:16px; font-weight:800; line-height:1.35; color:var(--text); padding-right:72px; min-height:28px; } /* ≥ bawah tombol Lewati (13+32px) agar deskripsi tidak tertimpa */
.tur-popover .driver-popover-description{ font-size:13.5px; line-height:1.55; color:var(--text-dim); }
/* Lewati: tinggi visual 32px sejajar baris judul (pusat ±29px dari atas), area sentuh 44px lewat ::before. */
.tur-popover .driver-popover-close-btn{
  top:13px; right:12px; width:auto; height:32px; min-width:0; padding:0 10px; border-radius:var(--radius-sm);
  font-family:'Inter'; font-size:13px; font-weight:600; color:var(--text-dim); line-height:32px; background:transparent;
}
.tur-popover .driver-popover-close-btn::before{ content:""; position:absolute; inset:-6px -4px; }
.tur-popover .driver-popover-close-btn:hover, .tur-popover .driver-popover-close-btn:focus{ color:var(--text); background:var(--bg-alt); }
.tur-popover .driver-popover-footer{ flex-wrap:wrap; gap:8px; margin-top:16px; }
.tur-pindah .driver-popover.tur-popover{ opacity:0; pointer-events:none; } /* lihat onHighlightStarted di tur.js */
.tur-popover .driver-popover-progress-text{ font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; color:var(--text-dim); }
.tur-popover .driver-popover-navigation-btns{ gap:8px; }
.tur-popover .driver-popover-navigation-btns button + button{ margin-left:0; }
.tur-popover .driver-popover-footer-btn{
  min-height:44px; padding:0 16px; line-height:41px; text-align:center; white-space:nowrap;
  border-radius:var(--radius-md); border:1.5px solid var(--line-strong); background:transparent; color:var(--text);
  font-family:'Plus Jakarta Sans'; font-size:13.5px; font-weight:700; text-shadow:none;
}
.tur-popover .driver-popover-footer-btn:hover, .tur-popover .driver-popover-footer-btn:focus{ background:transparent; border-color:var(--accent); color:var(--accent); }
.tur-popover .driver-popover-next-btn{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.tur-popover .driver-popover-next-btn:hover, .tur-popover .driver-popover-next-btn:focus{ background:var(--accent); color:var(--bg); box-shadow:0 8px 18px -6px rgba(11,74,67,.35); }
.tur-popover .driver-popover-footer-btn:focus-visible, .tur-popover .driver-popover-close-btn:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.tur-popover .driver-popover-arrow-side-left{ border-left-color:var(--bg-raised); }
.tur-popover .driver-popover-arrow-side-right{ border-right-color:var(--bg-raised); }
.tur-popover .driver-popover-arrow-side-top{ border-top-color:var(--bg-raised); }
.tur-popover .driver-popover-arrow-side-bottom{ border-bottom-color:var(--bg-raised); }
.tur-baru{ display:inline-block; vertical-align:2px; margin-right:6px; padding:2px 8px; border-radius:var(--radius-full); background:var(--gold-soft); color:var(--ink-900); font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width: 767px){
  .driver-popover.tur-popover{ width:calc(100vw - 32px); max-width:calc(100% - 32px); }
  .tur-popover .driver-popover-footer{ justify-content:flex-start; }
  .tur-popover .driver-popover-progress-text{ flex:1 0 100%; }
  .tur-popover .driver-popover-navigation-btns{ flex:1 1 auto; }
  .tur-popover .driver-popover-navigation-btns button{ flex:1 1 0; }
}
@media (prefers-reduced-motion: reduce){
  .driver-fade .driver-overlay, .driver-fade .driver-popover{ animation:none; }
  .driver-overlay path{ transition:none; }
}

/* ============ Modul 7 — Group Pengguna (7101 M7_RBAC) ============ */
.rbac-cari{ position:relative; width:100%; max-width:340px; }
.rbac-cari .ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none; }
.rbac-cari input{ width:100%; min-height:44px; padding:10px 12px 10px 36px; font:inherit; font-size:13.5px; color:var(--text); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm); }
.rbac-cari input:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.rbac-bagian{ margin-bottom:16px; }
.rbac-bagian-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.rbac-nama{ font-weight:700; color:var(--text); text-decoration:none; overflow-wrap:anywhere; }
.rbac-nama:hover{ color:var(--accent); }
.rbac-bagian .simple-table td .pill{ margin-left:6px; }
/* Detail: bar atas (pola CLAUDE.md §6) */
.detail-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.detail-bar .btn-kembali{ flex:none; }
.detail-cari{ position:relative; flex:1 1 220px; max-width:360px; }
.detail-cari input[type=text]{ width:100%; min-height:44px; padding:10px 36px 10px 34px; font:inherit; font-size:13.5px; color:var(--text); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm); }
.detail-cari input[type=text]:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.detail-nav{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.detail-nav .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.info-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px 24px; margin:0; }
.info-grid dt{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:4px; }
.info-grid dd{ margin:0; font-size:14px; overflow-wrap:anywhere; }
@media (min-width: 576px) and (max-width: 991px){ .info-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .info-grid .span-penuh{ grid-column:1 / -1; } }
@media (min-width: 992px){ .info-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } .info-grid .span-penuh{ grid-column:1 / -1; } }
@media (max-width: 575px){
  .rbac-cari, .detail-cari{ max-width:none; flex-basis:100%; }
  .detail-bar .btn-kembali{ flex:1 1 100%; }
  .detail-nav{ width:100%; justify-content:space-between; margin-left:0; }
  .rbac-bagian .tabel-kartu td[data-label="Nama Role"]{ text-align:right; }
  .rbac-bagian .tabel-kartu .row-actions .btn{ min-height:44px; }
  .page-header .row-actions .btn{ flex:1 1 100%; min-height:44px; }
}

/* ---- Modul 7 Group Pengguna: perbaikan keterbacaan (token tema tetap) ---- */
/* Ikon di dalam tombol empty state tidak ikut aturan ikon besar .empty-state .ic */
.empty-state .btn .ic{ width:16px; height:16px; margin:0; opacity:1; flex:none; color:inherit; }
.rbac-bagian .btn .ic, .detail-bar .btn .ic, .page-header .btn .ic{ flex:none; }
.rbac-bagian .btn, .detail-bar .btn, .page-header .row-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
/* Kolom input & tombol sekunder = permukaan putih + garis tegas + bayangan tipis agar terpisah dari latar mint */
.rbac-cari input, .detail-cari input[type=text]{ background:var(--bg-raised); border:1.5px solid var(--line-strong); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.rbac-cari input::placeholder, .detail-cari input::placeholder{ color:var(--text-dim); opacity:.9; }
.rbac-cari input:hover, .detail-cari input[type=text]:hover{ border-color:var(--accent-soft); }
.rbac-cari .ic, .detail-cari .combo-ikon{ color:var(--accent); }
.detail-cari .combo-ikon{ top:50%; left:12px; }
.detail-cari .combo-spin{ top:50%; margin-top:-7px; }
.detail-bar .btn-ghost, .page-header .row-actions .btn-ghost{ background:var(--bg-raised); border:1.5px solid var(--line-strong); color:var(--text); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.detail-bar .btn-ghost:hover:not([aria-disabled="true"]), .page-header .row-actions .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.page-header .row-actions .btn-danger-teks{ color:var(--danger-600); border-color:var(--danger-600); }
.detail-nav .btn[aria-disabled="true"]{ background:transparent; border-style:dashed; box-shadow:none; color:var(--text-dim); opacity:.7; }
.detail-nav .mono{ min-width:72px; text-align:center; font-weight:600; color:var(--text); }
/* Bar detail: tombol & kolom cari satu tinggi (44px), satu radius, satu ukuran font */
.detail-bar{ align-items:stretch; }
.detail-bar .btn{ height:44px; min-height:44px; padding:0 16px; font-size:13.5px; line-height:1; border-radius:var(--radius-sm); white-space:nowrap; }
.detail-cari{ display:flex; align-items:center; }
.detail-cari input[type=text]{ height:44px; min-height:44px; padding:0 36px 0 36px; line-height:44px; }
/* Header halaman: pisahkan judul dari area kontrol */
.page-header .breadcrumb{ color:var(--accent-soft); font-weight:600; }
/* Kartu daftar: batas jelas di atas latar mint */
.rbac-bagian{ border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.rbac-bagian .simple-table th{ background:var(--bg-alt); }
.rbac-bagian .simple-table tbody tr:hover{ background:var(--bg-alt); }
/* Angka Pengguna = tombol (buka modal pengguna role); target sentuh ≥44px di HP */
.rbac-jml{ font:inherit; font-weight:700; color:var(--accent); background:var(--tag-bg); border:1px solid transparent; border-radius:var(--radius-full); min-width:36px; padding:2px 10px; cursor:pointer; }
.rbac-jml:hover{ border-color:var(--accent-soft); }
.rbac-baris-owner td{ background:var(--bg-alt); }
.pill .ic{ width:12px; height:12px; flex:none; margin-right:4px; vertical-align:-1px; }
.spin-teks{ display:inline-block; width:14px; height:14px; border-radius:100px; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite; vertical-align:-2px; }
@media (max-width: 575px){ .rbac-jml{ min-height:44px; min-width:44px; } #modalRbacPengguna .modal-box{ max-width:none; height:100%; max-height:100%; border-radius:0; } }
/* Alert di halaman detail: kartu putih + garis aksen kiri, bukan blok transparan */
.alert-rbac{ background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--accent-soft); box-shadow:var(--shadow-sm); align-items:center; }
.alert-rbac > .ic{ flex:none; color:var(--accent-soft); }
.alert-rbac b{ color:var(--text); }
/* Tab: area klik jelas */
#rbacTabs .tab-btn{ min-height:44px; color:var(--text); opacity:.75; }
#rbacTabs .tab-btn.active{ opacity:1; }
#rbacTabs .card, .info-grid{ }
#rbacTabs .card{ border:1px solid var(--line); box-shadow:var(--shadow-sm); }

/* ---- Modul 7 Group Pengguna S2: tab Hak Akses Menu (hm-) ---- */
.hm-baca{ flex-wrap:wrap; }
.hm-baca .btn{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.hm-baca .btn .ic{ flex:none; }
.hm-memuat{ display:flex; align-items:center; gap:10px; color:var(--text-dim); }
.hm-catatan{ display:flex; align-items:center; gap:6px; margin:0 0 12px; }
.hm-catatan .ic{ flex:none; color:var(--accent-soft); }
.hm-modul{ margin-bottom:12px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.hm-modul-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:4px 14px; background:var(--bg-alt); }
.hm-toggle{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px; padding:0; border:0; background:transparent; color:var(--text); font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.hm-toggle:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:6px; }
.hm-panah{ flex:none; transition:transform .15s ease; }
.hm-toggle[aria-expanded="false"] .hm-panah{ transform:rotate(-90deg); }
.hm-modul-nama{ min-width:0; overflow-wrap:anywhere; }
.hm-hitung{ flex:none; font-family:'IBM Plex Mono'; font-size:11px; }
.hm-modul-aksi{ display:flex; gap:8px; flex-wrap:wrap; }
.hm-modul-aksi .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.hm-terapkan{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.hm-terapkan .hm-scope{ width:auto; min-width:150px; min-height:34px; }
.hm-terapkan .btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.hm-terapkan-label{ font-size:var(--fs-12); color:var(--text-dim); white-space:nowrap; }
.hm-terapkan-atas{ margin:0 0 12px; padding:8px 14px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.hm-ikon{ flex:none; width:16px; text-align:center; font-size:13px; color:var(--accent-soft); }
.hm-baris{ display:grid; grid-template-columns:minmax(180px, 1fr) auto; align-items:center; gap:12px; padding:6px 14px; border-top:1px solid var(--line); }
.hm-sels{ display:grid; grid-template-columns:repeat(6, 64px) 170px; align-items:center; justify-items:center; }
.hm-nama{ display:flex; align-items:center; gap:8px; min-width:0; padding-left:calc(var(--lv, 0) * 18px); }
.hm-teks{ min-width:0; overflow-wrap:anywhere; }
.hm-pill{ flex:none; font-size:10.5px; padding:2px 8px; }
.hm-kepala{ background:var(--bg-alt); font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.hm-baris-modul{ background:var(--tag-bg); }
.hm-baris-grup{ font-weight:600; }
.hm-baris-grup .hm-teks{ color:var(--text); }
.hm-item:hover{ background:var(--bg-alt); }
.hm-sel-scope{ justify-self:stretch; }
.hm-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; cursor:pointer; }
.hm-chip > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hm-chip input{ width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }
.hm-chip input:disabled{ cursor:not-allowed; }
.hm-chip.is-batas{ opacity:.45; }
.hm-strip{ color:var(--text-dim); opacity:.6; }
.hm-scope{ width:100%; min-height:34px; padding:4px 8px; font:inherit; font-size:12.5px; color:var(--text); background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); }
.hm-scope:disabled{ opacity:.55; }
.hm-bar{ position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:0 -2px 10px rgba(18,45,40,.08); }
.hm-bar.is-berubah #hmStatus{ color:var(--accent); font-weight:700; }
.hm-bar-aksi{ display:flex; gap:10px; }
.hm-bar-aksi .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.hm-bar-aksi .btn .ic{ flex:none; }

/* Tablet 768–991: kolom aksi dirapatkan */
@media (max-width: 991px){
  .hm-baris{ grid-template-columns:minmax(140px, 1fr) auto; }
  .hm-sels{ grid-template-columns:repeat(6, 52px) 140px; }
}
/* HP & tablet kecil ≤767: modul akordeon, aksi jadi chip 3 kolom × 2 baris, tanpa scroll horizontal */
@media (max-width: 767px){
  .hm-modul-head{ padding:4px 12px 10px; }
  .hm-modul-aksi{ width:100%; }
  .hm-modul-aksi .btn{ flex:1; min-height:44px; }
  .hm-terapkan{ width:100%; }
  .hm-terapkan .hm-scope{ flex:1; min-width:0; min-height:44px; }
  .hm-terapkan .btn{ min-height:44px; }
  .hm-terapkan-label{ display:none; }
  .hm-kepala{ display:none; }
  .hm-baris{ grid-template-columns:minmax(0, 1fr); gap:8px; padding:10px 12px; }
  .hm-nama{ padding-left:calc(var(--lv, 0) * 12px); }
  .hm-sels{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; justify-items:stretch; }
  .hm-sel-kosong, .hm-sel-scope:empty{ display:none; }
  .hm-sel-scope{ grid-column:1 / -1; }
  .hm-chip{ gap:6px; min-height:44px; padding:0 10px; border:1.5px solid var(--line-strong); border-radius:var(--radius-full); background:var(--bg-raised); font-size:12.5px; font-weight:600; }
  .hm-chip > span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .hm-chip:has(input:checked){ border-color:var(--accent-soft); background:var(--tag-bg); }
  .hm-scope{ min-height:44px; }
  .hm-bar{ margin-left:-4px; margin-right:-4px; }
  .hm-bar-aksi{ width:100%; }
  .hm-bar-aksi .btn{ flex:1; min-height:44px; }
  body:has(#footerMenu) .hm-bar{ bottom:calc(64px + 10px + env(safe-area-inset-bottom) + 8px); border-radius:var(--radius-md); }
}

/* ---- Modul 7 Group Pengguna S2b: tab Dashboard (db-) & Footer Menu (ft-) ---- */
.hm-bar.is-berubah .tx-small{ color:var(--accent); font-weight:700; }
.db-baris{ display:grid; grid-template-columns:auto auto minmax(160px, 1fr) 170px 160px auto; align-items:center; gap:12px; padding:8px 14px; border-top:1px solid var(--line); background:var(--bg-raised); }
.db-baris:hover{ background:var(--bg-alt); }
.db-baris.is-mati .db-info{ opacity:.55; }
.db-aktif{ min-width:44px; min-height:44px; gap:6px; }
.db-aktif > span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; font-size:12.5px; font-weight:600; }
.db-nama{ font-weight:600; overflow-wrap:anywhere; }
.db-desk{ color:var(--text-dim); overflow-wrap:anywhere; }
/* S3b: pegangan seret (pengganti ↑↓), target ≥44px; fokus + panah atas/bawah = pindah baris */
.db-pegangan{ flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1.5px dashed transparent; border-radius:var(--radius-sm); background:transparent; color:var(--text-dim); cursor:grab; touch-action:none; }
.db-pegangan i{ font-size:16px; }
.db-pegangan:hover{ color:var(--accent); border-color:var(--line-strong); background:var(--bg-alt); }
.db-pegangan:active{ cursor:grabbing; }
.db-pegangan:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:1px; }
.db-pegangan:disabled{ cursor:default; opacity:.55; background:transparent; border-color:transparent; }
.db-baris.ui-sortable-helper{ box-shadow:var(--shadow-sm); border:1px solid var(--accent-soft); border-radius:var(--radius-sm); }
.db-sorot{ border:2px dashed var(--accent-soft); background:var(--info-100); border-radius:var(--radius-sm); margin:4px 8px; }
.hm-modul.is-pratinjau{ border-left:4px solid var(--accent-soft); }
.hm-modul.is-pratinjau .hm-modul-head{ background:var(--info-100); }
.db-pratinjau .fas{ font-size:14px; flex:none; }
.db-tanpa{ color:var(--text-dim); }
.db-lebar-grup{ display:flex; gap:8px; }
.db-lebar{ display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--text-dim); }
.db-lebar .hm-scope{ min-width:112px; }

.ft-kepala{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:12px; padding:12px 14px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.ft-modul{ display:flex; flex-direction:column; gap:4px; min-width:200px; }
.ft-jumlah{ display:flex; gap:8px; }
.ft-radio{ gap:6px; padding:0 12px; border:1.5px solid var(--line-strong); border-radius:var(--radius-full); background:var(--bg-raised); font-weight:600; font-size:12.5px; }
.ft-radio > span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
.ft-radio:has(input:checked){ border-color:var(--accent-soft); background:var(--tag-bg); }
.ft-tata{ display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:16px; align-items:start; }
.ft-slot-daftar{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ft-slot{ display:flex; gap:12px; padding:12px 14px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.ft-slot.is-salah{ border-color:var(--danger-600); }
.ft-slot-no{ flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-full); background:var(--tag-bg); font-family:'IBM Plex Mono'; font-weight:600; font-size:12px; }
.ft-slot-isi{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ft-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ft-f input[type="text"]{ min-height:44px; padding:6px 10px; font:inherit; color:var(--text); background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); }
.ft-f .hm-scope{ min-height:44px; }
.ft-f input:disabled{ opacity:.55; }
.ft-salah{ grid-column:1 / -1; margin:0; color:var(--danger-600); }
.ft-cek{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; min-height:44px; }
.ft-cek[hidden]{ display:none; }
.ft-pratinjau{ position:sticky; top:12px; }
.ft-pratinjau-judul{ margin-bottom:6px; font-weight:600; }
.ft-hp{ display:flex; flex-direction:column; width:100%; min-width:360px; max-width:390px; height:240px; margin:0 auto; border:6px solid var(--text); border-radius:28px; background:var(--bg); overflow:hidden; }
.ft-hp-layar{ flex:1; }
.ft-nav{ display:grid; grid-template-columns:repeat(var(--ft-kolom, 5), minmax(0, 1fr)); align-items:start; gap:2px; padding:10px 4px 8px; background:var(--bg-raised); border-top:1px solid var(--line); box-shadow:0 -2px 8px rgba(18,45,40,.08); }
.ft-nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:4px 2px; font-size:11px; line-height:1.25; color:var(--text-dim); text-align:center; }
.ft-nav-item i{ font-size:15px; flex:none; }
.ft-nav-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.ft-nav-utama{ color:var(--accent); font-weight:700; }
.ft-nav-utama i{ padding:10px; margin-top:-20px; font-size:17px; border-radius:14px; background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.ft-nav-kosong{ opacity:.45; }

/* ---- A7: Grup widget di tab Dashboard (7101) ---- */
.hm-modul-alat{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-width:0; }
.db-baris{ min-width:0; }
.db-anak{ margin-left:18px; border-left:3px solid var(--line-strong); }
.db-grup{ background:var(--bg-alt); }
.db-grup-lencana{ font-size:11px; }
.db-judul-grup{ width:100%; }
.db-induk-sel .hm-scope{ min-width:0; width:100%; }
.db-hapus-grup{ display:inline-flex; align-items:center; gap:6px; color:var(--danger-600, var(--danger)); }
.pv-grup-kolom{ min-width:0; }
.pv-grup-kotak{ position:relative; padding:6px 22px 6px 6px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); }
.pv-grup-kotak.is-resizing{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--info-100); user-select:none; }
.pv-grup-kotak.is-resizing > .pv-tarik{ background:var(--info-100); box-shadow:inset -3px 0 0 var(--accent-soft); }
.pv-grup-kepala{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:32px; padding:2px 4px 6px; cursor:grab; touch-action:none; }
.pv-grup-kepala:active{ cursor:grabbing; }
.pv-terkunci .pv-grup-kepala{ cursor:default; touch-action:auto; }
.pv-grup-nama{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-grup-grid{ gap:8px; }
.pv-grup-grid .pv-kartu-kepala{ cursor:default; touch-action:auto; }
@media (pointer: coarse){ .pv-grup-kotak{ padding-right:30px; } }

/* Tablet 768–991 */
@media (max-width: 991px){
  .db-baris{ grid-template-columns:auto auto minmax(120px, 1fr); }
  .db-scope-sel, .db-induk-sel, .db-lebar-grup{ grid-column:3 / -1; }
  .db-grup .db-scope-sel{ display:none; }
  .db-hapus-grup{ min-height:44px; }
  .ft-tata{ grid-template-columns:minmax(0, 1fr); }
  .ft-pratinjau{ position:static; order:-1; }
  .ft-slot-isi{ grid-template-columns:1fr; }
}
/* HP ≤767: 1 kolom, pratinjau di atas, target sentuh ≥44px */
@media (max-width: 767px){
  .db-baris{ grid-template-columns:auto auto minmax(0, 1fr); padding:10px 12px; gap:8px; }
  .db-scope-sel, .db-induk-sel, .db-lebar-grup{ grid-column:1 / -1; }
  .db-anak{ margin-left:10px; }
  .db-pratinjau{ min-height:44px; }
  .db-scope-sel .hm-scope, .db-induk-sel .hm-scope, .db-lebar .hm-scope{ min-height:44px; }
  .db-lebar-grup{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .db-lebar .hm-scope{ min-width:0; width:100%; }
  .ft-kepala{ flex-direction:column; align-items:stretch; }
  .ft-modul{ min-width:0; }
  .ft-hp{ height:200px; }
  .ft-slot{ padding:12px; }
}

/* ============ Pratinjau dashboard role (S3b) — salin CSS preview web_erp v_role_detail.php, awalan .pv-, warna = token ============ */
/* Panel: pakai .side-panel (HP layar penuh · tablet 70%) — laptop dilebarkan 85vw seperti web_erp. */
.pv-panel{ --pv-bezel:var(--text-dim); }
@media (min-width: 992px){ .pv-panel{ width:min(85vw, 1280px); } }
body.pv-kunci-gulir{ overflow:hidden; }
body.pv-sedang-tarik, body.pv-sedang-tarik *{ cursor:col-resize !important; user-select:none; }
.pv-kepala{ align-items:flex-start; }
.pv-kepala-teks{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.pv-judul{ display:flex; align-items:center; gap:8px; font-size:16px; }
.pv-judul .fas{ font-size:16px; color:var(--accent-soft); flex:none; }
.pv-kepala .chip .fas{ font-size:11px; margin-right:6px; }
.pv-chip-aktif{ background:var(--success-100); color:var(--success-600); }
.pv-alat{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--bg-raised); }
.pv-perangkat-tombol{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.pv-perangkat-tombol .btn{ background:var(--bg-raised); border-color:var(--line-strong); }
.pv-perangkat-tombol .btn .fas{ font-size:16px; flex:none; }
.pv-perangkat-tombol .btn.is-aktif{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.pv-petunjuk{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); }
.pv-petunjuk .fas{ color:var(--accent-soft); flex:none; }
.pv-badan{ background:var(--bg-alt); padding:16px; }

/* Bingkai perangkat (preview-device-*) */
.pv-bingkai{ margin:0 auto; background:var(--bg); transition:max-width .3s cubic-bezier(.4,0,.2,1), padding .3s ease; }
.pv-perangkat-laptop{ width:100%; padding:16px; border-radius:var(--radius-md); border:1px solid var(--line); }
.pv-perangkat-tablet{ max-width:768px; width:100%; padding:16px; border-radius:18px; border:6px solid var(--pv-bezel); box-shadow:var(--shadow); }
.pv-perangkat-mobile{ max-width:380px; width:100%; padding:12px; border-radius:26px; border:8px solid var(--pv-bezel); box-shadow:var(--shadow); }
.pv-notch{ text-align:center; margin-bottom:8px; }
.pv-notch span{ display:block; width:60px; height:5px; margin:0 auto; border-radius:3px; background:var(--line-strong); }

/* Grid pratinjau 12 kolom — TANPA media query (bingkai ≠ layar asli) */
.pv-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px; align-items:start; }
.pv-col-1{ grid-column:span 1; } .pv-col-2{ grid-column:span 2; } .pv-col-3{ grid-column:span 3; } .pv-col-4{ grid-column:span 4; }
.pv-col-5{ grid-column:span 5; } .pv-col-6{ grid-column:span 6; } .pv-col-7{ grid-column:span 7; } .pv-col-8{ grid-column:span 8; }
.pv-col-9{ grid-column:span 9; } .pv-col-10{ grid-column:span 10; } .pv-col-11{ grid-column:span 11; } .pv-col-12{ grid-column:span 12; }
.pv-kolom{ min-width:0; position:relative; }

/* Kartu (preview-widget-card) */
.card.pv-kartu{ position:relative; padding:0; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:box-shadow .2s, border-color .2s; }
.pv-kartu:hover{ border-color:var(--accent-soft); }
.pv-kartu.is-resizing{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--info-100), var(--shadow); z-index:5; user-select:none; }
.pv-kartu-kepala{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; padding:8px 18px 8px 12px; background:var(--bg-alt); border-bottom:1px solid var(--line); border-radius:var(--radius-md) var(--radius-md) 0 0; cursor:grab; touch-action:none; }
.pv-kartu-kepala:active{ cursor:grabbing; }
.pv-terkunci .pv-kartu-kepala{ cursor:default; touch-action:auto; }
.pv-kartu-judul{ display:flex; align-items:center; gap:8px; min-width:0; }
.pv-grip{ flex:none; color:var(--text-dim); font-size:12px; }
.pv-kartu-ic{ flex:none; width:14px; text-align:center; color:var(--accent-soft); font-size:13px; }
.pv-kartu-nama{ min-width:0; font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-kartu-lencana{ display:flex; align-items:center; gap:4px; flex:none; }
.pv-kartu-lencana .chip{ font-size:10.5px; padding:2px 7px; }
.pv-persen{ background:var(--accent); color:var(--bg); letter-spacing:.3px; }
.pv-chip-kunci .fas{ font-size:10px; }
.pv-kartu-badan{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:85px; padding:12px; }
.ui-sortable-helper .pv-kartu{ box-shadow:var(--shadow); }

/* Pegangan tarik lebar (preview-resize-handle) */
.pv-tarik{ position:absolute; top:0; right:0; z-index:3; width:14px; height:100%; display:flex; align-items:center; justify-content:center; cursor:col-resize; touch-action:none; border-radius:0 var(--radius-md) var(--radius-md) 0; transition:background .15s ease; }
.pv-tarik:hover, .pv-kartu.is-resizing .pv-tarik, .pv-tarik:focus-visible{ background:var(--info-100); box-shadow:inset -3px 0 0 var(--accent-soft); outline:none; }
.pv-tarik-grip{ width:4px; height:28px; border-left:2px dotted var(--line-strong); border-right:2px dotted var(--line-strong); opacity:.8; transition:opacity .15s ease, transform .15s ease; }
.pv-tarik:hover .pv-tarik-grip, .pv-kartu.is-resizing .pv-tarik-grip, .pv-tarik:focus-visible .pv-tarik-grip{ opacity:1; border-left:2px solid var(--accent-soft); border-right:2px solid var(--accent-soft); transform:scaleY(1.2); }
@media (pointer: coarse){ .pv-tarik{ width:22px; } .pv-kartu-kepala{ padding-right:26px; } }

/* Tooltip lebar + titik grid (preview-resize-tooltip, grid-dots-preview) */
.pv-tooltip{ position:absolute; bottom:calc(100% + 6px); right:0; z-index:6; display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; background:var(--text); color:var(--bg); font-size:11px; font-weight:600; white-space:nowrap; pointer-events:none; box-shadow:var(--shadow-sm); }
.pv-tooltip::after{ content:''; position:absolute; top:100%; right:6px; border:5px solid transparent; border-top-color:var(--text); }
.pv-titik{ display:inline-flex; gap:2px; margin-left:4px; }
.pv-titik-unit{ width:4px; height:8px; border-radius:1px; background:var(--bg); opacity:.35; }
.pv-titik-unit.is-aktif{ background:var(--success-600); opacity:1; }

/* Placeholder seret (sort-highlight) */
.pv-sorot{ min-height:90px; border:2px dashed var(--accent-soft); border-radius:var(--radius-md); background:var(--info-100); visibility:visible !important; }

/* Kolom sempit (col-compact ≤2 / col-semi-compact =3) */
.pv-ringkas .pv-kartu-kepala{ padding:6px 18px 6px 6px; gap:3px; }
.pv-ringkas .pv-kartu-judul{ gap:3px; }
.pv-ringkas .pv-kartu-badan{ align-items:center; min-height:75px; padding:8px 4px; text-align:center; }
.pv-ringkas .pv-kartu-nama{ max-width:52px; font-size:11px; }
.pv-ringkas .pv-grip{ font-size:10px; }
.pv-ringkas .pv-persen{ font-size:9px; padding:2px 4px; }
.pv-ringkas .pv-chip-scope, .pv-semi-ringkas .pv-chip-scope{ display:none; }
.pv-semi-ringkas .pv-kartu-kepala{ padding:7px 18px 7px 8px; }
.pv-semi-ringkas .pv-kartu-badan{ min-height:80px; padding:10px 8px; }
.pv-semi-ringkas .pv-kartu-nama{ max-width:85px; font-size:12px; }
.pv-semi-ringkas .pv-persen{ font-size:10px; padding:2px 5px; }

/* Isi mockup kartu (pengganti utilitas Bootstrap di get_widget_mockup_html) */
.pv-m-tengah{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; min-width:0; }
.pv-m-tengah-x{ margin-left:auto; margin-right:auto; }
.pv-m-baris{ display:flex; align-items:center; gap:6px; min-width:0; }
.pv-m-antara{ justify-content:space-between; }
.pv-m-bungkus{ flex-wrap:wrap; gap:3px; }
.pv-m-kecil{ font-size:11px; color:var(--text-dim); }
.pv-m-kuat{ font-weight:700; color:var(--text); }
.pv-m-potong{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-m-ic{ font-size:13px; }
.pv-m-titik{ font-size:6px; vertical-align:middle; }
.pv-m-angka{ font-size:13px; font-weight:800; line-height:1; }
.pv-m-angka .fas{ font-size:10px; }
.pv-m-ok{ color:var(--success-600); } .pv-m-warn{ color:var(--warning-600); } .pv-m-info{ color:var(--info-600); } .pv-m-bahaya{ color:var(--danger-600); }
.pv-kartu-badan .chip{ font-size:10px; padding:2px 6px; }
.pv-kartu-badan .chip .fas{ font-size:9px; margin-right:4px; }
.pv-m-chip-aksen{ background:var(--accent); color:var(--bg); }
.pv-m-progres{ width:100%; height:4px; border-radius:100px; background:var(--tag-bg); overflow:hidden; }
.pv-m-progres > span{ display:block; height:100%; border-radius:inherit; background:var(--accent-soft); }
.pv-m-progres.is-ok > span{ background:var(--success-600); }
.pv-m-grafik{ display:flex; align-items:flex-end; justify-content:space-between; gap:6%; padding:0 3px; }
.pv-m-grafik > span{ flex:1; border-radius:3px 3px 0 0; background:var(--accent-soft); }
.pv-m-kerangka{ height:8px; border-radius:4px; background:var(--tag-bg); }

/* Empty state pratinjau */
.pv-kosong{ background:var(--bg-raised); border:1px dashed var(--line-strong); border-radius:var(--radius-md); }
.pv-kosong-ic{ color:var(--accent-soft); }

@media (max-width: 575px){
  .pv-badan{ padding:10px; }
  .pv-alat{ padding:10px 12px; }
  .pv-perangkat-tombol{ width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pv-perangkat-tombol .btn{ height:44px; padding:0 8px; }
  .pv-perangkat-laptop{ padding:8px; }
  .pv-grid{ gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  .pv-bingkai, .pv-kartu, .pv-tarik, .pv-tarik-grip{ transition:none; }
  .pv-tarik:hover .pv-tarik-grip, .pv-kartu.is-resizing .pv-tarik-grip{ transform:none; }
}

/* ============ Modul 7 S3c: Footer (ikon, default, link) · alat akordeon Hak Akses/Dashboard · icon picker bersama ============ */
/* Alat akordeon: cari + Buka/Tutup semua (kartu modul awal tertutup) */
.hm-alat{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.hm-alat[hidden]{ display:none; }
.hm-cari{ flex:1 1 260px; max-width:420px; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.hm-cari:hover, .hm-cari:focus-within{ border-color:var(--accent-soft); }
.hm-cari .fas{ flex:none; font-size:14px; color:var(--accent); }
.hm-cari input{ flex:1; min-width:0; min-height:40px; border:0; outline:0; background:transparent; font:inherit; color:var(--text); }
.hm-alat-tombol{ display:flex; gap:8px; }
.hm-alat-tombol .btn{ background:var(--bg-raised); border-color:var(--line-strong); }
.hm-alat-tombol .btn .fas, .ft-default-aksi .btn .fas, .ft-ikon-baris .btn .fas{ font-size:16px; flex:none; }
.hm-modul[hidden], .is-saring{ display:none !important; }

/* Footer: keterangan default (teks, bukan tombol) + aksi default */
.ft-default{ flex:1 1 260px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ft-keterangan{ display:flex; align-items:flex-start; gap:6px; margin:0; color:var(--text-dim); }
.ft-keterangan .fas{ flex:none; margin-top:2px; color:var(--accent-soft); }
.ft-default-aksi{ display:flex; gap:8px; flex-wrap:wrap; }
.ft-default-aksi .btn{ background:var(--bg-raised); border-color:var(--line-strong); }
#ftModul option:disabled{ color:var(--text-dim); }

/* Footer: ikon per slot (kotak pratinjau + input readonly + Pilih ikon + reset) & link khusus */
.ft-ikon-f, .ft-link-f{ grid-column:1 / -1; }
.ft-ikon-baris{ display:flex; align-items:center; gap:8px; min-width:0; }
.ft-ikon-kotak{ flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--tag-bg); color:var(--accent); font-size:18px; }
.ft-ikon-baris input.ft-ikon{ flex:1; min-width:0; font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--bg-alt); cursor:default; }
.ft-ikon-baris .btn{ flex:none; height:44px; background:var(--bg-raised); border-color:var(--line-strong); }
.ft-ikon-reset{ width:44px; padding:0; }
.ft-ikon-baris .btn:disabled{ opacity:.5; cursor:not-allowed; }
.ft-link-f .ft-cek{ grid-column:auto; }
.ft-link-f input[hidden], .ft-link-bawaan[hidden]{ display:none; }
.ft-link-bawaan{ margin:0; color:var(--text-dim); overflow-wrap:anywhere; }

/* Icon picker bersama (lib/_pilih_ikon.php) — modal komponen app */
.ikon-cari{ display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:12px; padding:0 12px; background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.ikon-cari:focus-within{ border-color:var(--accent-soft); }
.ikon-cari .fas{ flex:none; color:var(--accent); }
.ikon-cari input{ flex:1; min-width:0; min-height:40px; border:0; outline:0; background:transparent; font:inherit; color:var(--text); }
.ikon-kategori{ margin:10px 0 6px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.ikon-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:6px; }
.ikon-item{ width:100%; min-width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); font-size:16px; cursor:pointer; }
.ikon-item:hover, .ikon-item:focus-visible{ border-color:var(--accent-soft); background:var(--tag-bg); color:var(--accent); outline:none; }
.ikon-item.is-aktif{ border-color:var(--accent); background:var(--tag-bg); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.ikon-kosong{ font-size:28px; color:var(--text-dim); }
.modal-ikon .modal-head .fas{ color:var(--accent-soft); margin-right:6px; }

/* Tablet ≤991: ikon slot tetap 1 baris; HP ≤575: pratinjau & modal ikon selebar layar, target sentuh 44px */
@media (max-width: 575px){
  .hm-alat{ flex-direction:column; align-items:stretch; }
  .hm-cari{ max-width:none; flex-basis:auto; }
  .hm-alat-tombol .btn{ flex:1; }
  .ft-hp{ min-width:0; max-width:none; }
  .ft-ikon-baris{ flex-wrap:wrap; }
  .ft-ikon-baris input.ft-ikon{ flex:1 1 calc(100% - 52px); }
  .ft-ikon-pilih{ flex:1 !important; }
  .ft-default-aksi .btn{ flex:1; }
  .modal-ikon{ padding:0; }
  .modal-ikon .modal-box{ max-width:none; height:100%; max-height:100%; border-radius:0; }
}

/* Toast konteks (409 penjaga tulis): pesan + tombol aksi, tetap tampil sampai ditutup */
.konteks-toast{ position:fixed; top:16px; right:16px; z-index:120; max-width:min(420px, calc(100vw - 32px)); background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--danger-600); border-radius:12px; box-shadow:var(--shadow-sm), 0 8px 24px rgba(18,45,40,.16); padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.konteks-toast-aksi{ display:flex; gap:8px; flex-wrap:wrap; }
.konteks-toast-aksi .btn{ min-height:44px; }
@media (max-width:575px){ .konteks-toast{ left:16px; right:16px; max-width:none; } }

/* ============ MODE GABUNGAN (K3): banner, kunci "pilih satu proyek", rincian widget, pemilih proyek ============ */
.banner-gabung{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:8px 12px; background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(18,45,40,.08); font-size:13px; line-height:1.45; }
.banner-gabung > .fas{ flex:none; color:var(--gold); }
.banner-gabung-teks{ flex:1 1 240px; min-width:0; }
.banner-gabung-btn{ flex:none; min-height:36px; padding:0 12px; font-size:12.5px; white-space:nowrap; background:var(--bg-raised); border:1.5px solid var(--line-strong); }
/* Lencana jumlah menunggu keputusan di item sidebar (menu Persetujuan) */
.nav-item .nav-badge{ flex:none; margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--danger-600); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.nav-item .nav-kunci, .ac-kunci{ flex:none; width:auto; margin-left:auto; font-size:10px; opacity:.7; color:var(--text-dim); }
.dash-chip .ac-kunci, .ac-label .ac-kunci{ margin-left:4px; }
.dash-rincian{ position:relative; margin-top:10px; font-size:12.5px; }
.dash-rincian > summary{ display:inline-flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; color:var(--accent-soft); font-weight:600; list-style:none; }
.dash-rincian > summary::-webkit-details-marker{ display:none; }
.dash-rincian > summary::after{ content:'▾'; font-size:10px; }
.dash-rincian[open] > summary::after{ content:'▴'; }
.dash-rincian > summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
.dash-rincian-pop{ position:absolute; z-index:30; left:0; top:100%; min-width:240px; max-width:min(360px, 90vw); max-height:280px; overflow:auto; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); }
.dash-rincian-pop table{ width:100%; border-collapse:collapse; }
.dash-rincian-pop th{ position:sticky; top:0; background:var(--bg-alt); text-align:left; font-size:11px; font-weight:700; padding:6px 10px; }
.dash-rincian-pop td{ padding:6px 10px; border-top:1px solid var(--line); vertical-align:top; }
.dash-rincian-pop td:last-child, .dash-rincian-pop th:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dash-rincian-pop td small{ display:block; color:var(--text-dim); font-size:11px; }
.pilih-proyek-grup{ margin-bottom:16px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pilih-proyek-grup .tx-h3{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pilih-proyek-daftar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.pilih-proyek-item{ display:flex; flex-direction:column; gap:6px; min-height:44px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.pilih-proyek-item:hover{ border-color:var(--accent-soft); background:var(--bg-alt); }
.pilih-proyek-item:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pilih-proyek-nama{ display:flex; flex-direction:column; min-width:0; }
.pilih-proyek-nama small{ color:var(--text-dim); font-size:12px; }
.pilih-proyek-aksi{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--accent-soft); }
@media (min-width: 576px) and (max-width: 991px){ .pilih-proyek-daftar{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px){
  .pilih-proyek-daftar{ grid-template-columns:1fr; }
  .banner-gabung-btn{ width:100%; min-height:44px; justify-content:center; }
  .dash-rincian > summary{ min-height:44px; }
  .dash-rincian-pop{ position:static; max-width:none; margin-top:6px; box-shadow:none; }
}

/* ============ K4: komponen konteks halaman data (lib/_kolom_konteks, _filter_konteks, _aksi_baris,
   _tombol_tambah, _tabel_laporan, _konfirmasi_password) ============ */
.kk-redup{ color:var(--text-dim); font-style:italic; }
/* Tabel pilih dokumen (form Kas: Bayar Gaji/Kasbon) — baris yang belum bisa dipilih diredupkan, alasannya tampil di bawah nomor */
.tabel-pilih tr.is-nonaktif > td:not(.pilih-cek){ opacity:.6; }
.kk-lampiran{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.kk-lampiran-img{ display:block; max-width:min(100%,320px); max-height:200px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.kk-lampiran-aksi{ display:flex; flex-wrap:wrap; gap:8px; }
.kk-chip-hp{ display:none; flex-wrap:wrap; gap:4px; margin-top:4px; }
.kk-chip{ display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 8px; border-radius:var(--radius-full); background:var(--tag-bg); color:var(--text-dim); font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-chip .fas{ flex:none; font-size:10px; color:var(--accent-soft); }

.filter-konteks{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px; padding:10px 12px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); }
.filter-konteks-baris{ display:flex; align-items:center; gap:10px; min-width:0; }
.filter-konteks-label{ flex:none; width:76px; font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.filter-konteks-chip{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.chip-filter{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--radius-full); border:1.5px solid var(--line-strong); background:var(--bg-raised); color:var(--text); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.chip-filter:hover{ border-color:var(--accent-soft); color:var(--accent); }
.chip-filter:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.chip-filter.is-aktif{ background:var(--accent-soft); border-color:var(--accent-soft); color:#fff; }

.aksi-buka{ white-space:nowrap; gap:6px; }
.aksi-buka .fas{ width:14px; flex:none; }
.aksi-baca-saja{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); white-space:nowrap; }
.tambah-konteks-pop{ min-width:240px; }
.tambah-konteks .btn .fas{ width:16px; flex:none; }

.tabel-laporan .kol-angka{ text-align:right; font-variant-numeric:tabular-nums; }
.ts .simple-table .kol-angka{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabel-laporan tr.baris-subtotal_proyek{ background:var(--bg-alt); }
.tabel-laporan tr.baris-subtotal_developer{ background:var(--tag-bg); font-weight:700; }
.tabel-laporan tr.baris-total{ background:var(--tag-bg); font-weight:800; border-top:2px solid var(--line-strong); }
.tabel-laporan tr[class^="baris-"] th{ text-align:left; font-weight:inherit; }
/* Laporan HRIS (H26): tabel lebar digeser di wadahnya; position:relative wajib (.sr-only absolut tidak boleh melebarkan halaman). */
/* Filter laporan HRIS: kepala (ikon + judul + Reset), medan berikon, Terapkan satu baris. */
.lap-filter{ margin-bottom:var(--sp-3); padding:var(--sp-3); min-width:0; }
.lap-filter-kepala{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); min-width:0; }
.lap-filter-ikon{ flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--tag-bg); color:var(--accent); }
.lap-filter-judul{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; padding-left:var(--sp-3); border-left:1px solid var(--line); }
.lap-filter-judul b{ font-size:16px; }
.lap-filter-reset{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); font-size:13px; font-weight:600; color:var(--text); text-decoration:none; }
.lap-filter-reset:hover{ background:var(--bg-alt); }
.lap-filter-isi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); align-items:end; gap:var(--sp-3); }
.lap-filter-isi > .form-field{ margin-bottom:0; min-width:0; }
.lap-filter-isi .form-field > label{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-family:'Inter'; font-size:13px; font-weight:600; color:var(--text); }
.lap-filter-isi .form-field > label > .fas{ width:16px; flex:none; color:var(--accent); }
.lap-filter-terap .btn{ width:100%; min-height:44px; justify-content:center; gap:8px; }
@media (max-width: 575px){
  .lap-filter-kepala{ flex-wrap:wrap; }
  .lap-filter-judul{ flex-basis:calc(100% - 60px); }
  .lap-filter-reset{ width:100%; justify-content:center; }
  .lap-filter-isi{ grid-template-columns:1fr; }
}
/* Ringkasan atas & alert keterangan laporan HRIS: kartu putih di atas latar mint agar terbaca jelas. */
.lap-ringkas{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); font-size:13px; min-width:0; }
.lap-ringkas > span{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.lap-ringkas-tab{ padding:5px 12px; border-radius:999px; background:var(--tag-bg); color:var(--accent); font-weight:700; font-size:12.5px; }
.lap-ringkas-sekat{ width:1px; align-self:stretch; background:var(--line-strong); }
.lap-ringkas-lingkup .fas{ color:var(--accent); font-size:14px; }
.lap-ringkas-lingkup b{ color:var(--text); }
.lap-ringkas-jumlah{ padding:4px 12px; border:1px solid var(--line); font-size:12.5px; border-radius:999px; color:var(--text-dim); }
.lap-ringkas-jumlah i{ color:var(--accent); }
.lap-alert{ display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); background:var(--bg-raised); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius-md); font-size:13px; line-height:1.5; color:var(--text); }
.lap-alert-ikon{ flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--bg-raised); font-size:11px; }
.lap-alert-isi b{ font-weight:700; }
@media (max-width: 575px){ .lap-ringkas-sekat{ display:none; } .lap-ringkas > span{ flex:1 1 100%; } }
.lap-scroll{ overflow-x:auto; position:relative; min-width:0; }
.lap-tabel td, .lap-tabel th{ white-space:nowrap; }
@media (max-width: 575px){ .lap-tabel td, .lap-tabel th{ white-space:normal; } }

a.btn.is-sibuk{ pointer-events:none; opacity:.7; }

@media (max-width: 575px){
  .tabel-kartu .kk-kol{ display:none; }
  .kk-chip-hp{ display:flex; }
  .filter-konteks-baris{ flex-direction:column; align-items:stretch; gap:6px; }
  .filter-konteks-label{ width:auto; }
  .filter-konteks-chip{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .chip-filter{ min-height:44px; }
  .aksi-buka, .tambah-konteks, .tambah-konteks .btn{ width:100%; min-height:44px; justify-content:center; }
  .tabel-laporan tr[class^="baris-"] th{ display:block; padding:8px 0; }
}

/* Popover aturan mode gabungan (banner "Mode lihat"); HP = bottom sheet kecil. JS: app.js [data-pop-btn]. */
.pop-info-wrap{ position:relative; flex:none; display:inline-flex; }
.pop-info-btn{ display:inline-grid; place-items:center; width:44px; height:44px; margin:-8px -6px; padding:0; border:none; background:none; color:var(--accent); cursor:pointer; font-size:16px; }
.pop-info{ position:absolute; z-index:60; top:calc(100% + 4px); left:0; width:340px; max-width:80vw; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm), 0 8px 24px rgba(18,45,40,.16); font-size:13px; line-height:1.5; color:var(--text); }
.pop-info[hidden]{ display:none; }
.pop-info-grip{ display:none; }
.pop-info-kepala{ display:flex; align-items:center; justify-content:space-between; padding:8px 8px 0 12px; }
.pop-info-tutup{ width:36px; height:36px; border:none; background:none; color:var(--text-dim); cursor:pointer; }
.pop-info-isi{ padding:4px 12px 10px; }
.pop-info-isi p{ margin:0 0 8px; }
@media (max-width: 575px){
  .pop-info{ position:fixed; z-index:165; left:0; right:0; top:auto; bottom:0; width:auto; max-width:none; max-height:70vh; overflow-y:auto; border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom); animation:sheet-naik .22s ease; }
  .pop-info-grip{ display:block; width:40px; height:4px; border-radius:100px; background:var(--line-strong); margin:8px auto 0; }
  .pop-info-tutup{ width:44px; height:44px; }
}

/* ============ Pengguna Proyek (admin/pengguna, 7102) ============ */
.pg-kuota{ margin-bottom:16px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pg-kuota-aksi{ flex:none; }
.pg-kuota-penuh{ color:var(--danger-600); }
.pg-username{ display:block; color:var(--text-dim); }
td [data-ts-sub]{ display:block; color:var(--text-dim); } /* sub-baris sel judul selalu di bawah nama, bukan menempel */
.pg-email{ overflow-wrap:anywhere; }
.pg-redup > td, li.pg-redup{ opacity:.65; }
.pg-catatan{ margin:10px 0 0; color:var(--text-dim); }
.is-memuat{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }
.pg-detail-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:16px; }
.pg-detail-grid .card, .pg-aktivitas{ border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pg-detail-grid .tx-h3, .pg-aktivitas .tx-h3{ margin:0 0 12px; }
.pg-info{ display:flex; flex-direction:column; gap:10px; margin:0; }
.pg-info > div{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.pg-info dt{ color:var(--text-dim); }
.pg-info dd{ margin:0; text-align:right; overflow-wrap:anywhere; }
.pg-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pg-log li{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.pg-log li:last-child{ border-bottom:none; }
.pg-log .ic{ flex:none; margin-top:2px; color:var(--accent-soft); }
.pg-log-isi{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pg-log-isi b{ font-size:13.5px; overflow-wrap:anywhere; }
@media (max-width:575px){
  .pg-kuota-aksi, .pg-kuota-aksi .menu-wrap, .pg-kuota-aksi .btn{ width:100%; }
  .pg-kuota-aksi .btn{ min-height:44px; justify-content:center; }
  .pg-alat{ flex-direction:column; align-items:stretch; }
  .pg-cari{ flex:1 1 auto; max-width:none; }
  .pg-tabel{ padding:0; border:0; box-shadow:none; background:transparent; }
  .pg-tabel-head{ padding:0 0 10px; }
  .pg-tabel .simple-table tbody tr:hover{ background:var(--bg-raised); }
}
@media (min-width:992px){
  .pg-detail-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ==== Tabel server-side (tabel-server.js + DaftarServer) — awalan .ts-, token app (mode gelap ikut) ==== */
.ts{ padding:var(--sp-3); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.ts-kepala{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:2px 0 var(--sp-3); }
.ts-cari{ position:relative; flex:1 1 240px; min-width:0; max-width:none; margin:0; }
.ts-cari .fas{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:var(--fs-13); color:var(--accent); pointer-events:none; }
.ts-cari input{ width:100%; height:var(--h-kontrol); padding:0 var(--sp-3) 0 36px; font:inherit; font-size:var(--fs-14); color:var(--text); background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.ts-cari input:hover{ border-color:var(--accent-soft); }
.ts-cari input:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.ts-cari input::placeholder{ color:var(--text-dim); opacity:.9; }
.ts-filter{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
/* Filter cepat = dropdown berlabel "Role: Semua ▾" (bukan deretan chip). */
.ts-fcepat{ display:inline-flex; align-items:center; gap:var(--sp-2); height:var(--h-kontrol); margin:0; padding:0 var(--sp-1) 0 var(--sp-3); background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(18,45,40,.08); font-size:var(--fs-13); white-space:nowrap; flex:none; }
.ts-fcepat:hover, .ts-fcepat.is-aktif{ border-color:var(--accent-soft); }
.ts-fcepat > span{ color:var(--text-dim); font-weight:600; }
.ts-fcepat .select-portal{ height:calc(var(--h-kontrol) - 4px); padding:0 30px 0 2px; border:0; border-radius:var(--radius-sm); background-color:transparent; box-shadow:none; font-size:var(--fs-13); font-weight:600; color:var(--text); max-width:170px; text-overflow:ellipsis; }
.ts-fcepat .select-portal:focus{ outline:none; }
.ts-fcepat:focus-within{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.ts-per{ display:inline-flex; align-items:center; gap:var(--sp-2); margin:0; font-size:var(--fs-12); color:var(--text-dim); white-space:nowrap; }
.ts-per .select-portal{ height:var(--h-kontrol); font-size:var(--fs-12); border-radius:var(--radius-sm); }
.ts-kaki-kiri{ display:flex; align-items:center; gap:var(--sp-2) var(--sp-4); flex-wrap:wrap; }
/* Tombol ikon khusus HP (Urutkan, Pilih, Lainnya) — disembunyikan di tablet/laptop. */
.da-ikon-hp, .da-hp-saja{ display:none; }
.ts .simple-table thead th{ background:var(--bg-alt); }
.ts .simple-table th, .ts .simple-table td{ padding:var(--baris-py) var(--baris-px); vertical-align:middle; font-size:var(--fs-14); }
.ts .simple-table th{ font-size:var(--fs-12); }
.ts .simple-table th{ white-space:nowrap; }
.ts .simple-table th{ position:relative; }   /* span.sr-only (absolut) di header kolom tetap terkurung gulir .ts-area — tanpa ini tabel lebar membuat halaman tablet bergulir ke samping */
.ts .simple-table th.ts-pilih-kol, .ts .simple-table td.ts-pilih-sel{ width:40px; min-width:40px; max-width:40px; padding:0; text-align:center; vertical-align:middle; }
.ts .simple-table th[data-ts-peran~="aksi"], .ts .simple-table td.ts-p-aksi{ width:56px; text-align:right; }
.ts-area{ overflow-x:auto; position:relative; } /* position:relative = .sr-only (absolute) di kolom Aksi ikut terpotong; tanpa ini tabel lebar melebarkan seluruh halaman di tablet */
.ts-sembunyi{ display:none !important; }
.ts-more{ display:inline-grid; place-items:center; width:var(--ikon-btn); height:var(--ikon-btn); padding:0; border:1.5px solid transparent; border-radius:var(--radius-sm); background:none; color:var(--text-dim); font-size:var(--fs-14); cursor:pointer; }
.ts-more:hover, .ts-more[aria-expanded="true"]{ border-color:var(--line-strong); background:var(--bg-raised); color:var(--accent); }
.ts-more:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ts-hp{ display:none; }
.ts .simple-table tbody tr:hover{ background:var(--bg-alt); }
.ts .simple-table tbody tr.ts-sk:hover, .ts .simple-table tbody tr.ts-galat-baris:hover{ background:none; }
.ts-urut-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:0; border:0; background:none; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; }
.ts-urut-btn:hover{ color:var(--accent); }
.ts-urut-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
.ts-urut-ikon{ font-size:var(--fs-11); opacity:.45; }
th[aria-sort="ascending"] .ts-urut-ikon, th[aria-sort="descending"] .ts-urut-ikon{ opacity:1; color:var(--accent-soft); }
th[aria-sort="ascending"], th[aria-sort="descending"]{ color:var(--text); }
.ts-sk td{ padding:var(--sp-4) var(--sp-3); }
.ts-sk-bar{ display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--tag-bg) 25%, var(--line) 50%, var(--tag-bg) 75%); background-size:200% 100%; animation:sk-shimmer 1.2s ease-in-out infinite; }
.ts-galat{ display:flex; align-items:center; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-6) var(--sp-3); color:var(--danger-600); font-weight:600; text-align:center; }
.ts-galat .btn{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.ts-kaki{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-4); flex-wrap:wrap; padding:var(--sp-3) 2px 2px; }
.ts-kaki:empty{ display:none; }
.ts-info{ font-family:'IBM Plex Mono'; font-size:var(--fs-12); color:var(--text-dim); }
.ts-halaman{ display:flex; align-items:center; gap:var(--sp-1); flex-wrap:wrap; }
.ts-hal{ min-width:var(--ikon-btn); height:var(--h-kontrol); padding:0 var(--sp-3); display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); font:600 var(--fs-12) 'Inter', sans-serif; cursor:pointer; }
.ts-hal:hover{ border-color:var(--accent-soft); color:var(--accent); }
.ts-hal:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ts-hal.is-aktif{ background:var(--accent-soft); border-color:var(--accent-soft); color:#fff; cursor:default; }
.ts-hal:disabled, .ts-hal[aria-disabled="true"]:not(.is-aktif){ border-style:dashed; background:transparent; color:var(--text-dim); opacity:.7; cursor:default; }
.ts-elipsis{ min-width:20px; text-align:center; color:var(--text-dim); }
.ts-lagi{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); width:100%; min-height:var(--h-kontrol); }
.ts [data-ts-kosong]{ padding:36px var(--sp-4); }
.ts table[hidden], .ts [data-ts-kosong][hidden]{ display:none !important; }
.ts[aria-busy="true"] .ts-urut-btn{ pointer-events:none; }
@media (max-width: 767px){
  .ts{ padding:var(--sp-3); }
  /* toolbar HP: cari + ikon Filter(n) · Urutkan · Pilih · ⋯ (satu baris; cari turun baris sendiri bila sempit) */
  .ts-kepala{ gap:var(--sp-2); }
  .ts-cari{ flex:1 1 140px; }
  .ts-filter{ display:contents; }
  .ts-fcepat, .ts-filter .chip-filter{ display:none; }
  .da-ikon-hp{ display:inline-flex; align-items:center; justify-content:center; width:var(--ikon-btn); height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0; flex:none; font-size:var(--fs-14); }
  .da-ikon-hp.is-aktif{ border-color:var(--accent-soft); color:var(--accent); }
  .da-hp-saja{ display:inline-flex; }
  /* baris → kartu label:nilai (sama dengan .tabel-kartu ≤575px, berlaku sampai 767px di tabel server) */
  .ts .tabel-kartu thead{ display:none; }
  .ts .tabel-kartu, .ts .tabel-kartu tbody, .ts .tabel-kartu tr, .ts .tabel-kartu td{ display:block; width:100%; }
  .ts .tabel-kartu tr{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
  .ts .tabel-kartu td{ display:flex; gap:var(--sp-3); justify-content:space-between; align-items:flex-start; padding:var(--sp-2) 0; text-align:right; border-bottom:1px solid var(--line); }
  .ts .tabel-kartu td:last-child{ border-bottom:none; }
  .ts .tabel-kartu td::before{ content:attr(data-label); flex:none; font-family:'IBM Plex Mono'; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); text-align:left; }
  .ts .tabel-kartu td[data-label="Aksi"]{ display:block; }
  .ts .tabel-kartu td[data-label="Aksi"]::before, .ts .tabel-kartu tr.ts-sk td::before, .ts .tabel-kartu tr.ts-galat-baris td::before{ display:none; }
  .ts .tabel-kartu .row-actions .btn{ flex:1 1 100%; min-height:var(--h-kontrol); }
  .ts .tabel-kartu .kk-kol{ display:none; }
  .ts .kk-chip-hp{ display:flex; }
  .ts-kaki{ flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; }
  .ts-lagi{ width:auto; min-height:var(--h-kontrol); padding:0 var(--sp-6); }
}

/* ============ TIMELINE LOG (S5): timeline-server.js + lib/_timeline_hari + Log Aktivitas ============
   Responsif: HP ≤575px (baris → kartu label:nilai, panel layar penuh) · tablet 576–991px · laptop ≥992px (tabel). */
.tl-hari + .tl-hari{ margin-top:var(--sp-2); }
.tl-tgl{ margin:0; padding:var(--sp-4) 2px var(--sp-2); font-family:'Plus Jakarta Sans'; font-size:var(--fs-14); font-weight:700; color:var(--accent-soft); }
.tl-tabel{ table-layout:fixed; }
.tl-hari ~ .tl-hari .tl-tabel thead{ display:none; }
.tl-c-jam{ width:64px; }
.tl-c-user{ width:170px; overflow-wrap:anywhere; }
.tl-c-jenis{ width:92px; }
.tl-c-isi{ overflow-wrap:anywhere; }
.tl-c-ukuran{ width:110px; }
.tl-c-aksi{ width:180px; text-align:right; }
.tl-c-aksi .row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
.tl-judul{ display:block; font-size:var(--fs-14); }
.tl-ket{ display:block; margin-top:2px; }
.tl-item{ cursor:pointer; }
.tl-item:hover{ background:var(--bg-alt); }
.tl-item:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.tl-ringkas .tl-item{ padding:var(--sp-3) var(--sp-2); border-radius:var(--radius-sm); }
.tl-ikon{ flex:none; width:16px; margin-top:3px; text-align:center; font-size:var(--fs-13); color:var(--accent-soft); }
.tl-kaki{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-4); flex-wrap:wrap; padding:var(--sp-3) 2px 2px; }
.tl-kaki .ts-lagi{ width:auto; min-width:200px; }
.tl .ts-galat{ padding:var(--sp-4) var(--sp-2); }
.tl-isi-teks{ min-width:0; }
.tl-panel .tl-info{ margin:0; padding:var(--sp-3) 0; display:flex; flex-direction:column; gap:var(--sp-3); border-bottom:1px solid var(--line); }
.tl-info-baris{ display:flex; flex-direction:column; gap:2px; }
.tl-info-baris dt{ font-family:'IBM Plex Mono'; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.tl-info-baris dd{ margin:0; font-size:var(--fs-14); overflow-wrap:anywhere; }
.tl-sub{ margin:0; font-family:'IBM Plex Mono'; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.tl-diff{ margin:0; padding-left:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-13); overflow-wrap:anywhere; }
.tl-ket-penuh{ margin:0; font-size:var(--fs-14); white-space:pre-wrap; overflow-wrap:anywhere; }
.tl-panel .side-panel-foot .btn{ text-decoration:none; }
@media (max-width:767px){
  .tl .tabel-kartu thead{ display:none !important; }
  .tl .tabel-kartu, .tl .tabel-kartu tbody, .tl .tabel-kartu tr, .tl .tabel-kartu td{ display:block; width:100%; }
  .tl .tabel-kartu tr{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
  .tl .tabel-kartu td{ display:flex; gap:var(--sp-3); justify-content:space-between; align-items:flex-start; padding:var(--sp-2) 0; text-align:right; border-bottom:1px solid var(--line); width:100%; }
  .tl .tabel-kartu td:last-child{ border-bottom:none; }
  .tl .tabel-kartu td::before{ content:attr(data-label); flex:none; font-family:'IBM Plex Mono'; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); text-align:left; }
  .tl .tabel-kartu .kk-kol{ display:none; }
  .tl .kk-chip-hp{ display:flex; justify-content:flex-end; }
  .tl-isi-teks{ flex:1; }
  .tl .tabel-kartu td.tl-c-aksi, .tl .tabel-kartu td[data-label="Aksi"]{ display:block; padding-top:var(--sp-2); }
  .tl .tabel-kartu td.tl-c-aksi::before, .tl .tabel-kartu td[data-label="Aksi"]::before{ display:none; }
  .tl .tabel-kartu td.tl-c-aksi .row-actions, .tl .tabel-kartu td[data-label="Aksi"] .row-actions{ display:flex; gap:var(--sp-2); width:100%; }
  .tl .tabel-kartu td.tl-c-aksi .row-actions .btn, .tl .tabel-kartu td[data-label="Aksi"] .row-actions .btn{ flex:1 1 0; min-height:40px; justify-content:center; }
  .tl-kaki{ flex-direction:column; align-items:stretch; text-align:center; }
  .tl-kaki .ts-lagi{ width:100%; min-height:var(--h-kontrol); }
}
.pg-aktivitas-kepala{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-1); }
.pg-aktivitas-kepala .tx-h3{ margin:0; }
.pg-aktivitas.tl .tl-tgl{ padding-top:var(--sp-3); }

/* ==== Alat daftar (daftar-alat.js, CLAUDE.md 6d): filter 2 lapis, chip aktif, panel lanjutan, ekspor, salin tautan ==== */
.da-chip-grup{ display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; }
.da-filter-btn{ position:relative; height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0 var(--sp-4); font-size:var(--fs-13); gap:var(--sp-2); white-space:nowrap; flex:none; background:var(--bg-raised); border:1.5px solid var(--line-strong); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.da-filter-btn.is-aktif{ border-color:var(--accent-soft); color:var(--accent); }
.da-lencana{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 var(--sp-2); border-radius:var(--radius-full); background:var(--accent-soft); color:#fff; font:700 var(--fs-11) 'Inter', sans-serif; }
.da-lencana[hidden]{ display:none; }
.da-chip-bar{ display:flex; align-items:center; gap:var(--sp-2) var(--sp-2); flex-wrap:wrap; margin:-4px 0 var(--sp-3); }
.da-chip-bar[hidden]{ display:none; }
.da-chip{ display:inline-flex; align-items:center; gap:2px; max-width:100%; min-height:32px; padding:0 2px 0 var(--sp-3); border-radius:var(--radius-full); background:var(--tag-bg); border:1px solid var(--line); font-size:var(--fs-12); color:var(--text); }
.da-chip-teks{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.da-chip-teks b{ font-weight:600; color:var(--text-dim); }
.da-chip button{ display:inline-grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:none; color:var(--text-dim); cursor:pointer; flex:none; }
.da-chip button:hover{ background:var(--danger-100); color:var(--danger-600); }
.da-chip button:focus-visible, .da-hapus-semua:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.da-hapus-semua{ border:0; background:none; padding:var(--sp-2) var(--sp-1); font:600 var(--fs-12) 'Inter', sans-serif; color:var(--danger-600); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.da-panel .side-panel-body{ display:flex; flex-direction:column; gap:var(--sp-1); padding-top:var(--sp-3); }
.da-medan{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:var(--sp-3) 0; border:0; border-bottom:1px solid var(--line); min-width:0; }
.da-medan:last-child{ border-bottom:0; }
.da-medan legend, .da-medan > label:first-child, .da-label{ display:flex; align-items:center; gap:2px; padding:0; font-size:var(--fs-12); font-weight:600; color:var(--text); }
.da-medan .select-portal, .da-input{ width:100%; height:var(--h-kontrol); padding:0 var(--sp-3); font:inherit; font-size:var(--fs-14); color:var(--text); background:var(--bg-raised); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:0 1px 2px rgba(18,45,40,.08); min-width:0; }
.da-medan .select-portal{ padding-right:32px; }
.da-input:hover{ border-color:var(--accent-soft); }
.da-input:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.da-rentang{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.da-rentang label{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.da-hint{ margin:0; }
.da-cek-daftar{ display:flex; flex-direction:column; gap:2px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; }
.da-cek{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--h-kontrol); padding:0 var(--sp-2); border-radius:var(--radius-sm); font-size:var(--fs-14); cursor:pointer; }
.da-cek:hover{ background:var(--bg-alt); }
.da-cek[hidden]{ display:none; }
.da-cek input, .ts-cek{ width:18px; height:18px; margin:0; accent-color:var(--accent-soft); flex:none; cursor:pointer; }
.da-cek-tunggal{ padding:0; }
.da-alat{ display:inline-flex; align-items:center; gap:var(--sp-2); margin-left:auto; flex-wrap:wrap; }
.da-alat .btn{ height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0 var(--sp-3); font-size:var(--fs-12); gap:var(--sp-2); white-space:nowrap; }
.da-alat .btn .fas{ font-size:var(--fs-13); width:16px; flex:none; }
.tip-tombol-ikon{ font-size:var(--fs-13) !important; width:auto !important; color:var(--text-dim); opacity:.8; }
[data-tip-tombol]:hover .tip-tombol-ikon, [data-tip-tombol]:focus-visible .tip-tombol-ikon{ color:var(--accent); opacity:1; }
.tip-melayang{ position:fixed; z-index:2000; width:max-content; max-width:min(280px, calc(100vw - 16px)); padding:8px 10px; border-radius:var(--radius-md); background:var(--text); color:var(--bg); font:500 12px/1.4 'Inter'; text-align:left; pointer-events:none; box-shadow:var(--shadow-lg); }
.tip-melayang[hidden]{ display:none; }
@media (hover: none){ .tip-melayang{ display:none; } } /* HP: penjelasan ada di sheet ⋯ Lainnya */
.da-menu-wrap{ position:relative; }
.da-caret{ font-size:var(--fs-11) !important; width:auto !important; opacity:.7; }
.da-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:240px; padding:var(--sp-2); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); }
.da-menu[hidden]{ display:none; }
.da-menu-judul{ margin:var(--sp-2) var(--sp-2) 2px; font-family:'IBM Plex Mono'; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.da-menu button{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-kontrol); padding:0 var(--sp-3); border:0; border-radius:var(--radius-sm); background:none; font:500 var(--fs-13) 'Inter', sans-serif; color:var(--text); text-align:left; cursor:pointer; }
.da-menu button:hover, .da-menu button:focus-visible{ background:var(--bg-alt); outline:none; color:var(--accent); }
.da-menu button .fas{ width:16px; flex:none; color:var(--accent-soft); }
.da-menu-catatan{ margin:var(--sp-2) var(--sp-2) var(--sp-1); font-size:var(--fs-12); color:var(--text-dim); }

/* ---- Aksi massal tabel-server.js: kolom checkbox + bar pengganti kepala tabel ---- */
.ts-pilih-kol, .ts-pilih-sel{ width:44px; text-align:center; }
.ts-pilih-sel .ts-cek{ margin:0 auto; }
.ts .simple-table tbody tr.is-dipilih{ background:var(--info-100); }
.ts.is-massal .ts-area thead{ display:none; }
.ts-massal{ position:sticky; top:var(--tinggi-topbar); z-index:25; margin-bottom:var(--sp-2); padding:var(--sp-2) var(--sp-3); background:var(--bg-alt); border:1.5px solid var(--accent-soft); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); }
.ts-massal[hidden]{ display:none; }
.ts-massal-utama{ display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; min-height:40px; }
.ts-massal-semua{ display:inline-grid; place-items:center; width:32px; height:32px; cursor:pointer; }
.ts-massal-jml{ font-size:var(--fs-14); white-space:nowrap; }
.ts-massal-aksi{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; flex:1; }
.ts-massal-aksi .btn, .ts-massal-utama > .btn{ min-height:var(--h-kontrol); gap:var(--sp-2); white-space:nowrap; }
.ts-massal-aksi .btn .fas{ width:16px; flex:none; }
.ts-massal-tawar{ padding:var(--sp-2) 2px 2px 44px; font-size:var(--fs-12); color:var(--text-dim); }
.ts-tautan{ border:0; background:none; padding:0; font:600 var(--fs-12) 'Inter', sans-serif; color:var(--accent-soft); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.ts-laporan{ display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3); padding:var(--sp-3) var(--sp-4); min-width:0; background:var(--warning-100); color:var(--text); border:1px solid color-mix(in srgb, var(--warning-600) 45%, transparent); border-radius:var(--radius-md); }
.ts-laporan[hidden]{ display:none; }
.ts-laporan-ikon{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--radius-full); background:var(--warning-600); color:#fff; font-size:var(--fs-13); }
.ts-laporan-isi{ flex:1; min-width:0; font-size:var(--fs-13); }
.ts-laporan-judul{ display:block; font-size:var(--fs-14); line-height:28px; }
.ts-laporan-isi ul{ list-style:none; margin:var(--sp-1) 0 0; padding:0; display:flex; flex-direction:column; overflow-wrap:anywhere; }
.ts-laporan-isi li{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) 0; border-top:1px solid color-mix(in srgb, var(--warning-600) 28%, transparent); }
.ts-laporan-isi li > span{ color:var(--text-dim); }
.ts-laporan > .btn{ flex:none; }
@media (min-width:576px){ .ts-laporan-isi li{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-3); } .ts-laporan-isi li > b{ flex:0 1 auto; } }
.ts-konfirmasi-daftar{ margin:var(--sp-2) auto; padding-left:var(--sp-4); max-width:320px; text-align:left; font-size:var(--fs-14); }
.tl-sk{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-1); }

@media (max-width:767px){
  .ts-filter .da-chip-grup{ flex:none; }
  .da-filter-btn{ width:44px; padding:0; justify-content:center; font-size:var(--fs-14); }
  .da-filter-btn > span:not(.da-lencana){ display:none; }
  .da-filter-btn .da-lencana{ position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; font-size:var(--fs-11); }
  .da-alat{ flex-basis:100%; margin-left:0; }
  .da-alat-halaman{ display:none; }
  .da-alat .btn{ min-height:var(--h-kontrol); height:var(--h-kontrol); }
  .da-alat .da-menu-wrap, .da-alat > [data-salin-tautan]{ flex:1; }
  .da-alat .da-menu-wrap .btn, .da-alat > [data-salin-tautan]{ width:100%; justify-content:center; }
  .da-menu{ left:0; right:auto; min-width:min(280px, calc(100vw - 48px)); }
  .da-menu button{ min-height:var(--h-kontrol); }
  .da-chip{ min-height:var(--h-kontrol); }
  .da-chip button{ width:36px; height:var(--h-kontrol); }
  .da-hapus-semua{ min-height:var(--h-kontrol); }
  /* HP: tabel jadi kartu — checkbox di pojok kartu, bar aksi massal sticky di bawah layar (di atas footer menu). */
  .ts .tabel-kartu td.ts-pilih-sel{ justify-content:flex-start; border-bottom:none; padding:var(--sp-2) 0 0; }
  .ts .tabel-kartu td.ts-pilih-sel::before{ display:none; }
  .ts .tabel-kartu td.ts-pilih-kosong{ display:none; }
  .ts-cek{ width:22px; height:22px; }
  .ts-massal{ position:fixed; top:auto; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:140; margin:0; box-shadow:var(--shadow-lg); background:var(--bg-raised); }
  body:has(#footerMenu) .ts-massal{ bottom:calc(64px + 18px + env(safe-area-inset-bottom)); }
  .ts-massal-aksi{ flex-basis:100%; order:3; }
  .ts-massal-aksi .btn, .ts-massal-utama > .btn{ min-height:var(--h-kontrol); flex:1 1 auto; }
  .ts-massal-tawar{ padding-left:2px; }
}
@media (min-width:768px) and (max-width:991px){
  .da-alat{ margin-left:0; }
  .ts-cari{ flex:1 1 100%; }   /* tablet: cari baris 1, filter baris 2 */
}
@media (min-width:992px){
  .ts-filter{ flex-wrap:nowrap; flex:none; }
  #pegawaiDaftar .ts-fcepat .select-portal{ max-width:110px; } /* Data Pegawai: 3 filter cepat + Filter + Kolom muat satu baris dengan cari */
}

/* ==== Tata letak halaman daftar (T3): kepala halaman + aksi, sheet/menu aksi, daftar HP ringkas ====
   Responsif: HP ≤767px (baris ringkas 64px, sheet, ikon) · tablet 768–991px (cari baris 1) · laptop ≥992px (toolbar satu baris). */
.page-header-isi{ width:100%; min-width:0; }
.page-header-baris{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.page-header-baris .tx-h1{ margin:0; }
.page-aksi{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:nowrap; margin-left:auto; align-self:flex-end; }
.page-aksi .btn{ height:var(--h-kontrol); min-height:var(--h-kontrol); display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); white-space:nowrap; }
.page-aksi .btn .fas, .page-aksi .btn .ic{ flex:none; width:16px; height:16px; font-size:var(--fs-14); }
.page-aksi .btn-ghost{ background:var(--bg-raised); border:1.5px solid var(--line-strong); color:var(--text); box-shadow:0 1px 2px rgba(18,45,40,.08); }
.page-aksi .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.page-aksi .da-alat{ margin-left:0; flex-wrap:nowrap; }
.page-aksi .da-alat .btn{ height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0 var(--sp-4); font-size:var(--fs-14); }
.page-aksi .da-alat .btn .fas{ font-size:var(--fs-14); }
.page-aksi .menu-wrap{ position:relative; }
.page-aksi{ flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.page-aksi .aksi-lipat{ display:none !important; }
.page-aksi > *{ order:2; } .page-aksi > .da-alat{ order:0; } .page-aksi > [data-impor]{ order:1; } .page-aksi > .aksi-lain{ order:9; }   /* Ekspor + Impor berdampingan */
.page-aksi .aksi-lain{ width:var(--h-kontrol); min-width:var(--h-kontrol); padding:0; }
.page-aksi .aksi-lain[hidden]{ display:none; }
/* Kepala halaman laptop & tablet (≥768): judul (breadcrumb + h1) selebar penuh, lalu keterangan .tx-small dan tombol .page-aksi SEBARIS
   (tanpa ruang kosong di bawah keterangan). Elemen terakhir blok judul (keterangan, atau h1 bila tanpa keterangan) berbagi baris dengan tombol;
   tombol yang tidak muat turun ke baris berikut tetap rata kanan. HP (≤767) tetap aturan di bawah. */
@media (min-width:768px){
  .page-header:has(> .page-aksi){ align-items:center; row-gap:0; column-gap:var(--sp-4); }
  .page-header:has(> .page-aksi) > div:first-child:not(.page-aksi){ display:contents; }
  .page-header:has(> .page-aksi) > div:first-child:not(.page-aksi) > *{ flex:0 0 100%; min-width:0; }
  .page-header:has(> .page-aksi) > div:first-child:not(.page-aksi) > :last-child{ flex:1 1 0; }
  .page-header:has(> .page-aksi) > .page-aksi{ align-self:center; margin-left:auto; }
}
/* Dialog konfirmasi (SweetAlert2): judul panjang (nomor dokumen) dipatah, tidak keluar kotak. */
.swal2-popup .swal2-title{ font-size:var(--fs-20); line-height:1.35; overflow-wrap:anywhere; }
.swal2-popup .swal2-content, .swal2-popup .swal2-html-container{ overflow-wrap:anywhere; }

/* Nominal/rekening tersamar + ikon mata & salin: satu baris, tidak patah ("Rp 2.000.000" utuh). */
.gaji-nilai{ display:inline-flex; align-items:center; gap:var(--sp-1); flex-wrap:nowrap; white-space:nowrap; }

/* Menu aksi baris (popover laptop/tablet) & item bersama sheet. */
.ts-pop{ position:fixed; z-index:170; min-width:200px; max-width:min(320px, calc(100vw - 16px)); padding:var(--sp-2); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); }
.ts-mi-daftar{ display:flex; flex-direction:column; }
.ts-mi{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-kontrol); padding:0 var(--sp-3); border:0; border-radius:var(--radius-sm); background:none; font:500 var(--fs-14) 'Inter', sans-serif; color:var(--text); text-align:left; cursor:pointer; text-decoration:none; }
.ts-mi:hover:not(:disabled), .ts-mi:focus-visible{ background:var(--bg-alt); outline:none; color:var(--accent); }
.ts-mi .fas{ flex:none; width:16px; font-size:var(--fs-14); text-align:center; color:var(--accent-soft); }
.ts-mi > span{ flex:1; min-width:0; }
.ts-mi:disabled{ opacity:.6; cursor:default; }
.ts-mi.is-aktif{ font-weight:700; color:var(--accent); }
.ts-mi .ts-mi-cek{ flex:none; margin-left:auto; color:var(--accent-soft); }
.ts-mi.is-bahaya, .ts-mi.is-bahaya .fas{ color:var(--danger-600); }
.ts-mi.is-bahaya:hover:not(:disabled), .ts-mi.is-bahaya:focus-visible{ background:var(--danger-100); color:var(--danger-600); }
.ts-mi:not(.is-bahaya) + .ts-mi.is-bahaya{ margin-top:var(--sp-1); border-top:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); }

@media (max-width:767px){
  /* Kepala halaman: hanya "+ Tambah" (ikon); Salin tautan & Ekspor pindah ke ⋯ Lainnya. */
  .page-aksi{ margin-left:auto; align-self:center; flex-shrink:0; }
  .page-aksi .btn-primary, .page-aksi .btn-ghost{ width:44px; min-width:44px; height:44px; padding:0; justify-content:center; }
  .page-aksi .btn-primary .btn-teks, .page-aksi .btn-ghost .btn-teks{ display:none; }
  .page-header{ flex-wrap:nowrap; align-items:flex-start; }
  .page-header > div:first-child{ min-width:0; flex:1 1 auto; }
  .page-header-baris{ flex-wrap:nowrap; }
  /* Banyak tombol: judul penuh, baris tombol (maks 3 + ⋯) pindah ke bawahnya. */
  .page-header:has(> .page-aksi[data-aksi-banyak]){ flex-wrap:wrap; }
  .page-header > .page-aksi[data-aksi-banyak]{ flex:1 1 100%; width:100%; margin-left:0; justify-content:flex-start; align-self:flex-start; }
  .page-aksi .aksi-lain{ width:44px; min-width:44px; height:44px; }

  /* Mode pilih: checkbox hanya muncul via tekan-lama / tombol Pilih. */
  .ts-bisa-pilih:not(.is-pilih) .tabel-kartu td.ts-pilih-sel{ display:none; }

  /* Daftar ringkas: avatar | judul + sub | badge | ⋯ (kolom dengan data-ts-peran). */
  .ts-ringkas .ts-area{ overflow:visible; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok]{ display:grid; grid-template-columns:auto 40px minmax(0,1fr) auto 44px; grid-template-areas:"cek av judul badge aksi" "cek av sub badge aksi"; align-items:center; align-content:center; column-gap:0; min-height:64px; margin:0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-1); border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(26,127,111,.12); cursor:pointer; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok]:last-child{ border-bottom:0; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td{ display:none; width:auto; padding:0; border:0; text-align:left; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td::before{ display:none; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-avatar{ display:grid; grid-area:av; place-items:center; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-p-judul{ display:block; grid-area:judul; min-width:0; padding:0 var(--sp-2); }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-sub{ display:block; grid-area:sub; min-width:0; padding:0 var(--sp-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-13); line-height:1.35; color:var(--text-dim); }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-sub:empty{ display:none; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-badge{ display:flex; grid-area:badge; flex-direction:column; align-items:flex-end; gap:var(--sp-1); padding:0 var(--sp-1); }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-badge:empty{ display:none; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-p-aksi{ display:grid; grid-area:aksi; place-items:center; }
  .ts-ringkas.is-pilih .tabel-kartu tr[data-ts-ok] > td.ts-pilih-sel{ display:grid; grid-area:cek; place-items:center; width:36px; padding:0; }
  .ts-ringkas .ts-p-judul > :not(a):not(b):not(.org-sel){ display:none; }
  .ts-ringkas .ts-p-judul .org-sel{ display:block; padding:0; }
  .ts-ringkas .ts-p-judul .org-ikon, .ts-ringkas .ts-p-judul .org-teks .tx-small{ display:none; }
  .ts-ringkas .ts-p-judul a, .ts-ringkas .ts-p-judul > b, .ts-ringkas .ts-p-judul .org-teks > b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-14); font-weight:700; line-height:1.35; }
  .ts-av{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--tag-bg); color:var(--accent); font:700 var(--fs-14) 'Plus Jakarta Sans', sans-serif; letter-spacing:.02em; }
  .ts-hp-b{ display:inline-flex; max-width:112px; }
  .ts-hp .pill{ margin:0; padding:2px var(--sp-2); font-size:var(--fs-12); max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok].is-dipilih{ background:var(--info-100); }
  .ts-more{ width:44px; height:var(--h-kontrol); font-size:var(--fs-16); }
}

/* ==== STANDAR VISUAL (CLAUDE.md "Standar visual") — skala token, sheet standar, quick view, atur kolom, expand,
   baris HP 56/48px, mode pilih HP, kepala & isi detail. Responsif: HP ≤767px · tablet 768–991px · laptop ≥992px. ==== */
.page-header .tx-h1{ font-size:var(--fs-24); }
.page-header .tx-small{ font-size:var(--fs-13); }

/* -- Tombol ikon 40×40 (bar detail, quick view) -- */
.btn-ikon{ display:inline-grid; place-items:center; width:var(--ikon-btn); height:var(--ikon-btn); padding:0; flex:none; border:var(--kontrol-garis); border-radius:var(--r-kontrol); background:var(--kontrol-latar); color:var(--text); box-shadow:var(--kontrol-bayang); font-size:var(--fs-14); text-decoration:none; cursor:pointer; }
.btn-ikon:hover:not(:disabled):not([aria-disabled="true"]){ border-color:var(--accent); color:var(--accent); }
.btn-ikon:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn-ikon:disabled, .btn-ikon[aria-disabled="true"]{ border-style:dashed; background:transparent; box-shadow:none; color:var(--text-dim); opacity:.6; cursor:default; }

/* -- Bottom sheet standar (AppSheet, app.js) -- */
.app-sheet-latar{ position:fixed; inset:0; z-index:155; background:rgba(11,25,20,.45); opacity:0; transition:opacity .2s ease; }
.app-sheet-latar.show{ opacity:1; }
.app-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:160; display:flex; flex-direction:column; max-height:88vh; max-height:88dvh; background:var(--bg-raised); color:var(--text); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-lg); transform:translateY(100%); transition:transform .2s ease; padding-bottom:env(safe-area-inset-bottom); }
.app-sheet.show{ transform:none; }
.app-sheet:focus{ outline:none; }
.app-sheet-grip{ position:relative; flex:none; width:40px; height:4px; margin:var(--sp-2) auto var(--sp-1); border-radius:100px; background:var(--line-strong); }
.app-sheet-grip::before{ content:""; position:absolute; inset:-12px -40px; }
.app-sheet-kepala{ flex:none; display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-1) var(--sp-1) var(--sp-4); border-bottom:1px solid var(--line); }
.app-sheet-judul{ flex:1; min-width:0; margin:0; font:700 var(--fs-16)/1.35 'Plus Jakarta Sans', sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-sheet-x{ display:inline-grid; place-items:center; width:var(--sentuh); height:var(--sentuh); flex:none; padding:0; border:0; border-radius:var(--r-kontrol); background:none; color:var(--text-dim); font-size:var(--fs-16); cursor:pointer; }
.app-sheet-x:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.app-sheet-isi{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:var(--sp-2) var(--sp-2) var(--sp-3); }
@media (min-width:768px){ .app-sheet{ left:50%; right:auto; width:440px; max-width:calc(100vw - 32px); margin-left:-220px; } }
.sheet-menu{ display:flex; flex-direction:column; }
.sheet-item{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:48px; padding:0 var(--sp-3); border:0; border-radius:var(--r-kontrol); background:none; font:500 var(--fs-14) 'Inter', sans-serif; color:var(--text); text-align:left; text-decoration:none; cursor:pointer; }
.sheet-item > .fas:first-child{ flex:none; width:20px; font-size:var(--fs-18); text-align:center; color:var(--accent-soft); }
.sheet-item > span{ flex:1; min-width:0; }
.sheet-item:hover:not(:disabled), .sheet-item:focus-visible{ background:var(--bg-alt); outline:none; color:var(--accent); }
.sheet-item:disabled{ opacity:.55; cursor:default; }
.sheet-item.is-aktif{ font-weight:700; color:var(--accent); }
.sheet-item-cek{ flex:none; margin-left:auto; color:var(--accent-soft); }
.sheet-item.is-bahaya, .sheet-item.is-bahaya > .fas{ color:var(--danger-600); }
.sheet-item.is-bahaya:hover:not(:disabled){ background:var(--danger-100); color:var(--danger-600); }
.sheet-item:not(.is-bahaya) + .sheet-item.is-bahaya{ margin-top:var(--sp-2); border-top:1px solid var(--line); border-radius:0 0 var(--r-kontrol) var(--r-kontrol); }
.sheet-blok{ padding:var(--sp-1) 0 var(--sp-2); }
.sheet-blok + .sheet-blok{ border-top:1px solid var(--line); padding-top:var(--sp-2); }
.sheet-sub{ margin:var(--sp-2) var(--sp-3) var(--sp-1); font-size:var(--fs-12); font-weight:600; color:var(--text-dim); }
.sheet-info{ margin:0; padding:0 var(--sp-3) var(--sp-1) 44px; font-size:var(--fs-12); color:var(--text-dim); }
.sheet-baris{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:48px; padding:0 var(--sp-3); font-size:var(--fs-14); }
.sheet-baris .select-portal{ width:96px; height:var(--h-kontrol); }
.sheet-cari .app-sheet-isi{ min-height:50vh; padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.sheet-cari .dk-cari{ display:flex; flex-direction:column; align-items:stretch; flex:1 1 auto; max-width:none; width:100%; }
.sheet-cari .combo-daftar{ position:static; width:100%; margin-top:var(--sp-2); max-height:none; box-shadow:none; }
.sheet-cari .dk-cari .combo-ikon{ top:calc(var(--h-kontrol) / 2); }
.sheet-cari .dk-cari .combo-spin{ top:calc(var(--h-kontrol) / 2); }
.sheet-kamera .app-sheet-isi{ padding:var(--sp-3) var(--sp-4); }
.toast-unggah{ min-width:min(300px, calc(100vw - 32px)); background:var(--accent); }
.unggah-teks{ display:flex; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.unggah-nama{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.unggah-bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.3); overflow:hidden; }
.unggah-bar i{ display:block; width:0; height:100%; background:#fff; transition:width .15s linear; }
.kamera-video{ display:block; width:100%; max-height:60vh; background:#000; border-radius:var(--radius-sm); transform:scaleX(-1); }
.kamera-video.belakang{ transform:none; } /* kamera belakang (pindai QR) tidak dicerminkan */
.pindai-qr{ position:relative; overflow:hidden; border-radius:var(--radius-sm); background:#000; }
.pindai-qr .kamera-video{ border-radius:0; }
.pindai-qr-bingkai{ position:absolute; inset:8%; border:3px solid var(--gold-300); border-radius:var(--radius-md); box-shadow:0 0 0 100vmax rgba(0,0,0,.28); pointer-events:none; }
.pindai-qr-ket{ margin:var(--sp-2) 0 0; font-size:var(--fs-13); color:var(--text-dim); text-align:center; }
.sheet-kamera .app-sheet-kaki{ display:flex; justify-content:flex-end; gap:var(--sp-2); }
/* AppPotong (potong foto avatar): panggung persegi + bingkai lingkaran, zoom slider; HP = bottom sheet */
.sheet-potong .app-sheet-isi{ padding:var(--sp-3) var(--sp-4); }
.sheet-potong .app-sheet-kaki{ display:flex; justify-content:flex-end; gap:var(--sp-2); }
.potong{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.potong-panggung{ position:relative; width:min(100%, 360px, 52vh); aspect-ratio:1; overflow:hidden; border-radius:var(--radius-md); background:#111; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.potong-panggung:active{ cursor:grabbing; }
.potong-panggung:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.potong-panggung canvas{ position:absolute; inset:0; display:block; }
.potong-panggung::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 9999px rgba(0,0,0,.55); outline:2px solid rgba(255,255,255,.85); outline-offset:-2px; pointer-events:none; }
.potong-zoom{ display:flex; align-items:center; gap:var(--sp-2); width:min(100%, 360px); }
.potong-zoom input[type="range"]{ flex:1; min-width:0; accent-color:var(--accent-soft); height:28px; }
.potong-ket{ margin:0; font-size:var(--fs-12); color:var(--text-dim); text-align:center; }
@media (max-width:575px){ .sheet-potong .app-sheet-kaki .btn{ flex:1; justify-content:center; min-height:44px; } .potong-zoom .btn-ikon{ width:44px; height:44px; } }
/* Absen HRIS (4201): HP satu kolom (kartu utama di atas); laptop 2 kolom (kartu utama | pemeriksaan + linimasa), maks 1040px */
.absen-tata{ max-width:1040px; margin:0 auto; display:grid; gap:var(--sp-4); }
.absen-samping{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.absen-hero{ --hero-teks:var(--cream-50); --hero-redup:color-mix(in srgb, var(--cream-50) 72%, transparent); --hero-kaca:color-mix(in srgb, var(--cream-50) 10%, transparent); --hero-garis:color-mix(in srgb, var(--cream-50) 22%, transparent);
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); padding:var(--sp-5) var(--sp-4) var(--sp-6); border-radius:var(--radius-lg); color:var(--hero-teks); text-align:center;
  background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--teal-500) 55%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--teal-700) 0%, var(--teal-900) 70%); box-shadow:var(--shadow); }
.absen-hero::after{ content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-120px; border-radius:50%; border:40px solid var(--hero-kaca); pointer-events:none; }
.absen-hero > *{ position:relative; z-index:1; }
.absen-hero-atas{ width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.absen-tanggal{ font-size:var(--fs-14); font-weight:600; }
.absen-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--radius-full); background:var(--hero-kaca); border:1px solid var(--hero-garis); font-size:var(--fs-12); font-weight:600; }
.absen-hero[data-fase="lengkap"] .absen-chip i{ color:var(--success-600); }
.absen-hero[data-fase="masuk"] .absen-chip i, .absen-hero[data-fase="pulang"] .absen-chip i{ color:var(--gold-300); }
.absen-jam{ margin-top:var(--sp-4); font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:56px; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--hero-teks); }
.absen-zona{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-13); color:var(--hero-redup); }
.absen-hero .pop-info-btn{ color:var(--hero-redup); }
.absen-aksi{ margin-top:var(--sp-5); display:flex; align-items:center; justify-content:center; gap:var(--sp-5); }
.absen-foto{ position:relative; overflow:hidden; width:96px; height:128px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; border-radius:var(--radius-md);
  border:1.5px dashed var(--hero-garis); background:var(--hero-kaca); color:var(--hero-teks); font:inherit; font-size:var(--fs-12); font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
.absen-foto i{ font-size:22px; }
.absen-foto small{ font-size:var(--fs-11); font-weight:500; color:var(--hero-redup); }
.absen-foto:hover{ background:color-mix(in srgb, var(--cream-50) 16%, transparent); border-color:var(--hero-redup); }
.absen-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.absen-foto.ada{ border-style:solid; }
.absen-foto.ada i, .absen-foto.ada small{ display:none; }
.absen-foto.ada span{ position:absolute; left:0; right:0; bottom:0; padding:4px; background:color-mix(in srgb, var(--teal-900) 70%, transparent); }
.absen-tombol{ --tombol:var(--gold-500); width:148px; height:148px; flex:none; padding:0; border:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2);
  background:radial-gradient(circle at 30% 25%, var(--gold-300), var(--tombol) 70%); color:var(--teal-900); font-size:var(--fs-16); font-weight:700;
  box-shadow:0 0 0 8px color-mix(in srgb, var(--tombol) 22%, transparent), 0 14px 30px -8px rgba(0,0,0,.45); transition:transform .15s, opacity .15s; }
.absen-tombol i{ font-size:40px; }
.absen-hero[data-fase="pulang"] .absen-tombol{ --tombol:var(--coral-500); background:radial-gradient(circle at 30% 25%, var(--coral-300), var(--tombol) 70%); }
.absen-tombol:not(:disabled){ animation:absen-denyut 2.2s ease-out infinite; }
.absen-tombol:not(:disabled):hover{ transform:scale(1.03); }
.absen-tombol:not(:disabled):active{ transform:scale(.97); }
.absen-tombol:disabled{ opacity:.5; cursor:not-allowed; }
.absen-tombol .spin{ width:28px; height:28px; border-width:3px; border-color:color-mix(in srgb, var(--teal-900) 25%, transparent); border-top-color:var(--teal-900); }
@keyframes absen-denyut{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--tombol) 55%, transparent), 0 14px 30px -8px rgba(0,0,0,.45); } 70%{ box-shadow:0 0 0 22px transparent, 0 14px 30px -8px rgba(0,0,0,.45); } 100%{ box-shadow:0 0 0 0 transparent, 0 14px 30px -8px rgba(0,0,0,.45); } }
@media (prefers-reduced-motion: reduce){ .absen-tombol, .absen-titik{ animation:none !important; } }
.absen-tunggu{ margin:var(--sp-2) 0 0; display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--hero-redup); }
.absen-titik{ width:8px; height:8px; border-radius:50%; background:var(--gold-300); animation:absen-kedip 1.2s ease-in-out infinite; }
@keyframes absen-kedip{ 50%{ opacity:.25; } }
.absen-selesai{ margin-top:var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); }
.absen-selesai-ikon{ width:72px; height:72px; margin-bottom:var(--sp-2); display:grid; place-items:center; border-radius:50%; font-size:30px; background:var(--hero-kaca); border:2px solid var(--hero-garis); }
.absen-hero[data-fase="lengkap"] .absen-selesai-ikon{ background:var(--success-600); border-color:color-mix(in srgb, var(--success-600) 40%, transparent); box-shadow:0 0 0 8px color-mix(in srgb, var(--success-600) 22%, transparent); }
.absen-selesai b{ font-size:var(--fs-16); }
.absen-selesai span{ font-size:var(--fs-13); color:var(--hero-redup); }
/* B1: tombol Pindai QR = gaya .absen-foto; tiga tombol di HP diperkecil agar muat 375 tanpa scroll */
.absen-aksi-tiga{ gap:var(--sp-3); }
@media (max-width:575px){ .absen-aksi-tiga .absen-foto{ width:80px; height:112px; } .absen-aksi-tiga .absen-tombol{ width:136px; height:136px; } }
.absen-pindai.ada{ border-style:solid; border-color:var(--success-600); }
.absen-pindai.ada i{ color:var(--success-600); }
/* Pilihan satu-dari-banyak berbentuk kartu (radio): judul + keterangan singkat */
.pilih-kartu-grup{ display:flex; flex-direction:column; gap:var(--sp-2); }
.form-field .pilih-kartu, .pilih-kartu{ display:flex; align-items:flex-start; gap:var(--sp-3); min-height:var(--sentuh); padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--line-strong); border-radius:var(--radius-md); font-family:'Inter'; letter-spacing:0; text-transform:none; color:var(--text); cursor:pointer; min-width:0; }
.pilih-kartu input{ flex:none; margin:3px 0 0; width:16px; height:16px; accent-color:var(--accent); }
.pilih-kartu > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pilih-kartu b{ font-size:var(--fs-14); font-weight:600; }
.pilih-kartu small{ font-size:var(--fs-12); font-weight:400; color:var(--text-dim); line-height:1.4; }
.pilih-kartu:has(input:checked){ border-color:var(--accent); background:var(--tag-bg); }
.pilih-kartu:has(input:focus-visible){ outline:2px solid var(--accent-soft); outline-offset:2px; }
/* Petunjuk aturan form (B1, mis. Kebijakan Absensi): daftar butir bernada ok/info/warn/danger, dihitung ulang JS saat pilihan berubah */
.aturan-petunjuk{ min-width:0; margin-bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md); background:var(--bg-alt); border:1px solid var(--line); font-size:var(--fs-13); color:var(--text); }
.aturan-petunjuk-judul{ display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-2); font-size:var(--fs-13); }
.aturan-petunjuk-judul i{ color:var(--gold-500); }
.aturan-petunjuk ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.aturan-petunjuk li{ display:flex; align-items:flex-start; gap:var(--sp-2); line-height:1.45; }
.aturan-petunjuk li > i{ flex:none; margin-top:2px; }
.aturan-petunjuk li.is-ok > i{ color:var(--success-600); }
.aturan-petunjuk li.is-info > i{ color:var(--accent-soft); }
.aturan-petunjuk li.is-warn > i{ color:var(--warning-600); }
.aturan-petunjuk li.is-danger{ color:var(--danger-600); font-weight:600; }
/* B1 Layar QR absen (hris/absensi/qr/{kode}): halaman mandiri layar penuh tablet/monitor. Latar teal = gaya .absen-hero (sama di terang & gelap).
   Landscape ≥900px: info | kartu QR; selain itu bertumpuk. */
body.qr-layar{ --qr-teks:var(--cream-50); --qr-redup:color-mix(in srgb, var(--cream-50) 72%, transparent); --qr-kaca:color-mix(in srgb, var(--cream-50) 10%, transparent); --qr-garis:color-mix(in srgb, var(--cream-50) 22%, transparent);
  margin:0; min-height:100vh; min-height:100dvh; color:var(--qr-teks); font-family:Inter, system-ui, sans-serif; overflow-x:hidden;
  background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--teal-500) 50%, transparent) 0%, transparent 60%), radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--gold-500) 18%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--teal-700) 0%, var(--teal-900) 75%); }
.qr-layar-isi{ min-height:100vh; min-height:100dvh; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr); align-content:center; justify-items:center; gap:var(--sp-5); padding:var(--sp-5) var(--sp-4); text-align:center; }
.qr-layar-info{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.qr-layar-pt{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-16); }
.qr-layar-pt img{ max-height:40px; max-width:120px; object-fit:contain; border-radius:var(--radius-sm); background:var(--cream-50); padding:4px; }
.qr-layar-inisial{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--gold-500); color:var(--teal-900); font-weight:800; }
.qr-layar-label{ margin-top:var(--sp-3); display:inline-flex; align-items:center; gap:6px; padding:4px 14px; border-radius:var(--radius-full); background:var(--qr-kaca); border:1px solid var(--qr-garis); font-size:var(--fs-13); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.qr-layar-label i{ color:var(--gold-300); }
.qr-layar-nama{ margin:0; color:var(--qr-teks); font-family:'Plus Jakarta Sans', Inter, sans-serif; font-size:clamp(28px, 4.6vw, 60px); font-weight:800; line-height:1.1; overflow-wrap:anywhere; }
.qr-layar-jam{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:clamp(40px, 7vw, 96px); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-1px; }
.qr-layar-tgl{ font-size:var(--fs-16); color:var(--qr-redup); }
.qr-layar-langkah{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); text-align:left; font-size:clamp(14px, 1.5vw, 18px); }
.qr-layar-langkah li{ display:flex; align-items:center; gap:var(--sp-3); }
.qr-layar-langkah li > span{ flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--gold-500); color:var(--teal-900); font-weight:800; }
.qr-layar-kartu{ min-width:0; width:min(88vw, 70vh, 600px); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--radius-xl); background:var(--qr-kaca); border:1px solid var(--qr-garis); box-shadow:var(--shadow-lg); }
.qr-layar-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--radius-full); background:var(--qr-kaca); border:1px solid var(--qr-garis); font-size:var(--fs-14); font-weight:700; }
.qr-layar-denyut{ --qr-ok:color-mix(in srgb, var(--success-600) 65%, var(--cream-50)); width:10px; height:10px; border-radius:50%; background:var(--qr-ok); box-shadow:0 0 0 0 color-mix(in srgb, var(--qr-ok) 60%, transparent); animation:qr-denyut 1.6s ease-out infinite; }
.qr-layar-chip.is-galat .qr-layar-denyut{ background:var(--danger-600); animation:none; }
@keyframes qr-denyut{ 70%{ box-shadow:0 0 0 10px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
/* QR wajib modul gelap di atas putih (bukan token tema) agar terbaca kamera */
.qr-layar-kode{ width:100%; aspect-ratio:1; padding:5%; box-sizing:border-box; background:#fff; border-radius:var(--radius-lg); }
.qr-layar-kode svg{ width:100%; height:100%; display:block; }
.qr-layar-kode.is-mati{ background:var(--qr-kaca); border:2px dashed var(--qr-garis); }
.qr-layar-mundur{ width:100%; height:8px; border-radius:var(--radius-full); background:var(--qr-kaca); overflow:hidden; }
.qr-layar-mundur span{ display:block; height:100%; width:0; background:var(--gold-300); transition:width .25s linear; }
.qr-layar-sisa{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; font-size:var(--fs-14); color:var(--qr-redup); }
.qr-layar-sisa b{ color:var(--qr-teks); font-variant-numeric:tabular-nums; }
.qr-layar-alat{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }
.qr-layar-alat .btn{ min-height:var(--sentuh); color:var(--qr-teks); border-color:var(--qr-garis); background:transparent; }
.qr-layar-kaki{ margin:0; font-size:var(--fs-12); color:var(--qr-redup); }
:fullscreen .qr-layar-alat{ display:none; }
@media (min-width:900px) and (orientation:landscape){
  .qr-layar-isi{ grid-template-columns:minmax(0,1fr) auto; column-gap:6vw; padding:var(--sp-6) 6vw; text-align:left; }
  .qr-layar-info{ align-items:flex-start; justify-self:stretch; }
  .qr-layar-kartu{ width:min(42vw, 78vh, 640px); }
  .qr-layar-kaki{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){ .qr-layar-denyut{ animation:none; } }
.absen-panel{ padding:var(--sp-4); }
.absen-panel-judul{ margin:0 0 var(--sp-3); font-size:var(--fs-14); font-weight:700; color:var(--text); }
.absen-cek{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.absen-cek li{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.absen-cek li:first-child{ border-top:0; padding-top:0; }
.absen-cek li > div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.absen-cek-ikon{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--tag-bg); color:var(--text-dim); }
.absen-cek li[data-ok="1"] .absen-cek-ikon{ background:var(--success-100); color:var(--success-600); }
.absen-cek li[data-ok="0"] .absen-cek-ikon{ background:var(--warning-100); color:var(--warning-600); }
.absen-cek-label{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-12); color:var(--text-dim); }
.absen-cek-nilai{ font-size:var(--fs-14); font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.absen-linimasa{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.absen-linimasa li{ position:relative; display:flex; gap:var(--sp-3); padding-bottom:var(--sp-4); }
.absen-linimasa li:last-child{ padding-bottom:0; }
.absen-linimasa li:not(:last-child)::before{ content:""; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:var(--line); }
.absen-linimasa-titik{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:var(--fs-14); background:var(--tag-bg); color:var(--text-dim); }
.absen-linimasa li.is-ok .absen-linimasa-titik{ background:var(--success-100); color:var(--success-600); }
.absen-linimasa li.is-warn .absen-linimasa-titik{ background:var(--warning-100); color:var(--warning-600); }
.absen-linimasa li.is-nanti .absen-linimasa-titik{ background:transparent; border:2px dashed var(--line-strong); }
.absen-linimasa-isi{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); min-height:36px; }
.absen-linimasa-jenis{ flex-basis:100%; font-size:var(--fs-12); color:var(--text-dim); }
.absen-linimasa-jam{ font-family:'IBM Plex Mono', monospace; font-size:var(--fs-20); font-variant-numeric:tabular-nums; color:var(--text); }
.absen-linimasa li.is-nanti .absen-linimasa-jam{ color:var(--text-dim); }
.absen-linimasa-alasan{ flex-basis:100%; }
.pasang-banner{ position:relative; max-width:1040px; margin:0 auto var(--sp-4); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3) var(--sp-4); padding:var(--sp-4) calc(var(--sp-4) + 28px) var(--sp-4) var(--sp-4); border-radius:var(--radius-lg, 16px); background:linear-gradient(135deg, var(--bg-raised), var(--bg-alt)); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.pasang-banner-ikon{ width:52px; height:52px; border-radius:14px; box-shadow:var(--shadow-sm); }
.pasang-banner-teks{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pasang-banner-teks b{ font-family:'Plus Jakarta Sans'; font-size:var(--fs-15, 15px); font-weight:700; color:var(--text); line-height:1.25; }
.pasang-banner-teks span{ font-size:var(--fs-12); color:var(--text-dim); line-height:1.45; }
.pasang-banner-btn{ white-space:nowrap; gap:8px; padding-inline:var(--sp-5, 20px); }
.pasang-banner [data-pasang-tutup]{ position:absolute; top:6px; right:6px; width:32px; height:32px; font-size:13px; }
.hm-pembuka{ max-width:420px; margin:0 0 12px; }
.pasang-langkah{ margin:var(--sp-3) 0 0; padding:0; list-style:none; counter-reset:langkah; display:flex; flex-direction:column; gap:var(--sp-3); font-size:var(--fs-14); line-height:1.5; }
.pasang-langkah li{ counter-increment:langkah; position:relative; padding:var(--sp-3) var(--sp-3) var(--sp-3) 52px; border-radius:var(--radius-sm); background:var(--bg-alt); }
.pasang-langkah li::before{ content:counter(langkah); position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--bg-raised); font-weight:700; font-size:var(--fs-13); }
@media (max-width:575px){
  .absen-hero{ border-radius:var(--radius-md); }
  .absen-jam{ font-size:48px; }
  .absen-aksi{ gap:var(--sp-4); }
  .absen-tombol{ width:136px; height:136px; }
  .pasang-banner{ grid-template-columns:auto 1fr; padding:var(--sp-4); padding-right:var(--sp-5); }
  .pasang-banner-ikon{ width:44px; height:44px; border-radius:12px; }
  .pasang-banner-btn{ grid-column:1 / -1; width:100%; justify-content:center; }
}
@media (min-width:992px){
  .absen-tata{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
  .absen-hero{ padding:var(--sp-6) var(--sp-6) var(--sp-8); min-height:460px; justify-content:flex-start; }
  .absen-jam{ font-size:72px; margin-top:var(--sp-6); }
  .absen-aksi{ margin-top:var(--sp-7); }
  .absen-tombol{ width:164px; height:164px; }
}
/* Pilihan 2 opsi (Kepadatan Nyaman/Rapat) */
.seg{ display:inline-flex; gap:2px; margin:var(--sp-1) var(--sp-3); padding:2px; border:var(--kontrol-garis); border-radius:var(--r-kontrol); background:var(--bg-alt); }
.seg-btn{ min-width:88px; height:calc(var(--h-kontrol) - 6px); padding:0 var(--sp-3); border:0; border-radius:calc(var(--r-kontrol) - 3px); background:none; font:600 var(--fs-13) 'Inter', sans-serif; color:var(--text-dim); cursor:pointer; }
.seg-btn.is-aktif{ background:var(--bg-raised); color:var(--accent); box-shadow:var(--kontrol-bayang); }
.seg-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.da-menu .seg{ display:flex; margin:var(--sp-1) var(--sp-2) var(--sp-2); }
.da-menu .seg-btn{ flex:1; width:auto; min-height:0; justify-content:center; }

/* -- Toolbar: Kolom ▾ (laptop/tablet) -- */
.ts-kolom-btn, .da-filter-btn{ height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0 var(--sp-3); font-size:var(--fs-13); gap:var(--sp-2); background:var(--kontrol-latar); border:var(--kontrol-garis); border-radius:var(--r-kontrol); box-shadow:var(--kontrol-bayang); white-space:nowrap; flex:none; }
.ts-kolom-btn .fas{ width:16px; flex:none; font-size:var(--fs-14); }
.ts-kolom-menu{ min-width:240px; max-height:min(70vh, 480px); overflow-y:auto; }
.ts-kolom-menu .da-cek{ font-size:var(--fs-13); min-height:36px; }
.ts-kolom-menu .da-cek.is-terkunci{ color:var(--text-dim); cursor:default; }
.ts-kolom-menu .ts-kunci{ margin-left:auto; font-size:var(--fs-11); color:var(--text-dim); }
.ts-fcepat, .ts-cari input, .da-alat .btn{ border-radius:var(--r-kontrol); }

/* -- Tabel laptop/tablet: baris, quick view, expand -- */
.ts .simple-table td{ line-height:1.4; }
.ts-qv .simple-table tbody tr[data-ts-ok]{ cursor:pointer; }
.ts .simple-table tbody tr.is-qv{ background:var(--info-100); box-shadow:inset 3px 0 0 var(--accent-soft); }
.ts .simple-table th.ts-rinci-kol, .ts .simple-table td.ts-rinci-sel{ width:40px; min-width:40px; padding:0 0 0 var(--sp-1); text-align:center; }
.ts-rinci-btn{ display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--r-kontrol); background:none; color:var(--text-dim); cursor:pointer; }
.ts-rinci-btn:hover{ background:var(--bg-alt); color:var(--accent); }
.ts-rinci-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.ts-rinci-btn .fas{ font-size:var(--fs-12); transition:transform .15s ease; }
tr.is-terbuka .ts-rinci-btn .fas{ transform:rotate(180deg); }
.ts .simple-table tr.ts-rinci-baris > td{ padding:var(--sp-3) var(--sp-4) var(--sp-3) 56px; background:var(--bg-alt); }
.ts .simple-table tbody tr.ts-rinci-baris:hover{ background:none; }
.ts-rinci-isi{ font-size:var(--fs-13); }
.ts-rinci-galat{ color:var(--danger-600); }
.rinci-daftar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--sp-1) var(--sp-4); }
.rinci-daftar li{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:32px; padding:0 var(--sp-2); border-radius:var(--r-kontrol); background:var(--bg-raised); border:1px solid var(--line); }
.rinci-daftar li span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rinci-daftar b{ flex:none; font:600 var(--fs-12) 'IBM Plex Mono', monospace; color:var(--accent); }
.rinci-kosong{ margin:0; color:var(--text-dim); }

/* -- Quick view: panel kanan (laptop/tablet) -- */
.qv-panel{ position:fixed; top:var(--tinggi-topbar); right:0; bottom:0; z-index:120; display:flex; flex-direction:column; width:min(420px, 100vw); background:var(--bg-raised); color:var(--text); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .2s ease; }
.qv-panel.show{ transform:none; }
/* Panel kanan tertutup diparkir di luar layar: tanpa visibility Chrome tablet melebarkan viewport (halaman mengecil, sidebar tidak penuh ke bawah). */
.qv-panel:not(.show), .side-panel:not(.show), .app-sheet.sheet-samping:not(.show){ visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s; }
.qv-panel:focus{ outline:none; }
.qv-panel[hidden]{ display:none; }
.qv-bar{ flex:none; display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); }
.qv-bar-teks{ flex:1; text-align:center; font-size:var(--fs-12); }
.qv-isi{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4); }
.qv-kepala{ display:flex; align-items:center; gap:var(--sp-3); }
.qv-nama-wrap{ min-width:0; flex:1; }
.qv-nama{ margin:0; font:700 var(--fs-18)/1.3 'Plus Jakarta Sans', sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.qv-badge{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1); }
.qv-badge:empty{ display:none; }
.qv-av{ width:48px !important; height:48px !important; font-size:var(--fs-16) !important; }
.qv-tambahan{ display:flex; align-items:center; gap:var(--sp-2); }
.qv-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.qv-aksi .btn{ height:var(--h-kontrol); padding:0 var(--sp-3); font-size:var(--fs-13); border-radius:var(--r-kontrol); background:var(--kontrol-latar); border:var(--kontrol-garis); }
.qv-aksi .btn .fas{ width:16px; flex:none; }
.qv-aksi .btn-danger-teks{ border-color:var(--danger-600); color:var(--danger-600); }
.qv-detail{ align-self:flex-start; height:var(--h-kontrol); font-size:var(--fs-13); border-radius:var(--r-kontrol); text-decoration:none; }
.qv-kaki{ flex:none; display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); background:var(--bg-raised); box-shadow:0 -2px 6px rgba(18,45,40,.06); overflow:hidden; }
.qv-kaki[hidden]{ display:none; }
.qv-kaki .btn{ flex:none; height:var(--h-kontrol); min-height:var(--h-kontrol); padding:0 var(--sp-3); font-size:var(--fs-13); gap:var(--sp-2); white-space:nowrap; border-radius:var(--r-kontrol); }
.qv-kaki .btn-ghost{ background:var(--kontrol-latar); border:var(--kontrol-garis); }
.qv-kaki .btn .fas{ width:16px; flex:none; }
.qv-kaki .btn-danger-teks{ border-color:var(--danger-600); color:var(--danger-600); }
.qv-kaki .qv-lain{ margin-left:auto; }
.qv-kaki .qv-lain[hidden]{ display:none; }
.qv-panel .dk-info, .sheet-qv .dk-info{ grid-template-columns:minmax(0,1fr) !important; }
.qv-panel .dk-info dt, .sheet-qv .dk-info dt{ font-weight:700; color:var(--text); }
.qv-info dd.dd-tombol{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.qv-info dd.dd-tombol .btn{ flex:none; }
.app-sheet-kaki{ flex:none; display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); background:var(--bg-raised); box-shadow:0 -2px 6px rgba(18,45,40,.06); overflow:hidden; }
.app-sheet-kaki[hidden]{ display:none; }
.app-sheet-kaki .btn{ flex:none; height:var(--sentuh); min-height:var(--sentuh); padding:0 var(--sp-3); font-size:var(--fs-13); gap:var(--sp-2); white-space:nowrap; border-radius:var(--r-kontrol); justify-content:center; }
.app-sheet-kaki .btn-ghost{ background:var(--kontrol-latar); border:var(--kontrol-garis); }
.app-sheet-kaki .btn .fas{ width:16px; flex:none; }
.app-sheet-kaki .btn-danger-teks{ border-color:var(--danger-600); color:var(--danger-600); }
.app-sheet-kaki .btn-primary{ flex:1 0 auto; text-decoration:none; }   /* aksi utama mengisi sisa lebar; tidak menyusut di bawah isinya */
.app-sheet-kaki .qv-lain{ width:var(--sentuh); height:var(--sentuh); }
.app-sheet-kaki .qv-lain[hidden]{ display:none; }
.sheet-qv .app-sheet-isi{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.sheet-qv .qv-aksi{ flex-direction:column; gap:0; margin:0 calc(var(--sp-2) * -1); }
.sheet-qv .qv-detail{ align-self:stretch; justify-content:center; }

/* -- Avatar inisial + titik status (daftar HP, quick view) -- */
.ts-av{ position:relative; display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--tag-bg); color:var(--accent); font:700 var(--fs-12) 'Plus Jakarta Sans', sans-serif; letter-spacing:.02em; }
.ts-av-titik{ position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg-raised); }
.ts-av-titik.is-aktif{ background:var(--success-600); }
.ts-av-titik.is-nonaktif{ background:var(--text-dim); opacity:.7; }

/* -- Halaman detail standar (lib/_kepala_detail) -- */
.dk-bar{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--h-kontrol); margin-bottom:var(--sp-4); }
.dk-cari{ position:relative; display:flex; align-items:center; flex:0 1 320px; min-width:0; }
.dk-cari input[type=text]{ width:100%; height:var(--h-kontrol); padding:0 36px; font:inherit; font-size:var(--fs-14); color:var(--text); background:var(--kontrol-latar); border:var(--kontrol-garis); border-radius:var(--r-kontrol); box-shadow:var(--kontrol-bayang); }
.dk-cari input[type=text]::placeholder{ color:var(--text-dim); opacity:.9; }
.dk-cari input[type=text]:hover{ border-color:var(--accent-soft); }
.dk-cari input[type=text]:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.dk-cari .combo-ikon{ top:50%; left:12px; color:var(--accent); }
.dk-cari .combo-spin{ top:50%; margin-top:-7px; }
.dk-cari-btn{ display:none !important; }
.dk-nav{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }
.dk-posisi{ min-width:64px; font:600 var(--fs-13) 'IBM Plex Mono', monospace; color:var(--text); text-align:center; white-space:nowrap; }
.dk-kepala{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.dk-id{ display:flex; align-items:flex-start; gap:var(--sp-3); flex:1 1 320px; min-width:0; }
.dk-av{ position:relative; display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; background:var(--tag-bg); color:var(--accent); font:700 var(--fs-16) 'Plus Jakarta Sans', sans-serif; }
.dk-av.is-ikon{ border-radius:var(--radius-md); font-size:var(--fs-20); }
.dk-av .ts-av-titik{ width:12px; height:12px; right:0; bottom:0; }
.dk-teks{ flex:1; min-width:0; }
.dk-label{ display:block; margin-bottom:2px; font-size:var(--fs-12); font-weight:600; color:var(--accent-soft); }
.dk-nama-baris{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); }
.dk-nama{ margin:0; min-width:0; font:800 var(--fs-24)/1.25 'Plus Jakarta Sans', sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.dk-badge{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1); }
.dk-badge .pill{ font-size:var(--fs-11); }
.dk-sub{ margin:var(--sp-1) 0 0; font-size:var(--fs-13); color:var(--text-dim); overflow-wrap:anywhere; }
.dk-aksi{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }
.dk-aksi-isi{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); }
.dk-aksi .btn{ height:var(--h-kontrol); padding:0 var(--sp-4); gap:var(--sp-2); font-size:var(--fs-13); border-radius:var(--r-kontrol); }
.dk-aksi .btn-ghost{ background:var(--kontrol-latar); border:var(--kontrol-garis); color:var(--text); box-shadow:var(--kontrol-bayang); }
.dk-aksi .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.dk-aksi .btn-danger-teks{ color:var(--danger-600); border-color:var(--danger-600); }
.dk-aksi .btn .fas, .dk-aksi .btn .ic{ flex:none; width:16px; height:16px; font-size:var(--fs-14); }
.dk-lain{ display:none !important; }
.dk-aksi-isi > .dk-ekstra{ display:none; }
.dk-lain.dk-lain-ada{ display:inline-grid !important; }
.dk-tabs .tab-list{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-bottom:var(--sp-4); }
.dk-tabs .tab-list::-webkit-scrollbar{ display:none; }
.dk-tabs .tab-btn{ flex:none; min-height:var(--sentuh); font-size:var(--fs-14); white-space:nowrap; }
.dk-kartu{ border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.dk-kartu ~ .dk-tabs{ margin-top:var(--sp-4); } /* kartu di atas tab (boleh ada <script> di antaranya): jarak sama dengan bawah tab-list */
/* Kartu "Tidak ikut run" (detail run): kelompok alasan → penyebab + langkah → nama pegawai */
.tik{ min-width:0; }
.tik-kepala{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); cursor:pointer; }
.tik-grup{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); min-width:0; }
.tik-judul{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); }
.tik-saran{ margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--warning-100); border-radius:var(--radius-sm); min-width:0; }
.tik-penyebab{ margin:0 0 var(--sp-2); font-size:var(--fs-14); color:var(--text); }
.tik-langkah{ margin:0 0 var(--sp-3); padding-left:var(--sp-5); font-size:var(--fs-13); color:var(--text); }
.tik-langkah li{ margin-bottom:2px; overflow-wrap:anywhere; }
.tik-nama{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); min-width:0; }
.dk-kartu > .tx-h3{ margin:0 0 var(--sp-3); font-size:var(--fs-16); }
.dk-info{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4) var(--sp-6); margin:0; }
.dk-info > div{ min-width:0; }
.dk-info dt{ margin:0 0 2px; font-family:'Inter', sans-serif; font-size:var(--fs-12); font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-dim); }
.dk-info dd{ margin:0; font-size:var(--fs-14); color:var(--text); text-align:left; overflow-wrap:anywhere; }
.dk-info .span-penuh{ grid-column:1 / -1; }
@media (min-width:768px){ .dk-info{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* -- HP ≤767px -- */
@media (max-width:767px){
  .page-header .tx-h1{ font-size:var(--fs-20); }
  /* Toolbar SATU baris 40px: [Cari…] [Filter] [Urutkan] [⋯]; Kolom ▾ & ekspor/salin tidak di toolbar. */
  .ts-kepala{ flex-wrap:nowrap; gap:var(--sp-2); }
  .ts-cari{ flex:1 1 auto; min-width:0; }
  .ts-kolom-wrap{ display:none !important; }
  .da-filter-btn{ width:var(--ikon-btn); padding:0; justify-content:center; }
  .ts-kepala .da-alat{ display:none; }
  /* Baris ringkas ±56px (Rapat ±48px): avatar 32 + titik | judul 14/600 2 baris + SATU sub 12px | SATU badge 11px | ⋯ 20px (area 44). */
  .ts-ringkas .tabel-kartu tr[data-ts-ok]{ grid-template-columns:auto 32px minmax(0,1fr) auto var(--sentuh); min-height:var(--baris-hp); padding:var(--baris-hp-py) 0 var(--baris-hp-py) var(--sp-1); column-gap:0; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-avatar{ grid-row:1 / span 2; align-self:center; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-p-judul, .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-sub{ padding:0 var(--sp-3); }
  .ts-ringkas .ts-p-judul a, .ts-ringkas .ts-p-judul > b, .ts-ringkas .ts-p-judul .org-teks > b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; font-size:var(--fs-14); font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-sub{ font-size:var(--fs-12); line-height:1.35; margin-top:2px; }
  .ts-ringkas .tabel-kartu tr[data-ts-ok] > td.ts-hp-badge{ padding:0 var(--sp-1); }
  .ts-hp .pill{ padding:2px var(--sp-2); font-size:var(--fs-11); max-width:104px; }
  .ts-hp-b{ max-width:104px; }
  .ts-hp-nilai{ font-size:var(--fs-12); font-weight:600; line-height:1.3; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .ts-av{ width:32px; height:32px; font-size:var(--fs-12); }
  .ts-ringkas .ts-more, .ts-more{ width:var(--sentuh); height:var(--sentuh); border:0; background:none; font-size:var(--fs-20); color:var(--text-dim); }
  .ts-ringkas .ts-more:hover, .ts-more[aria-expanded="true"]{ border:0; background:var(--bg-alt); }
  .ts-rinci-sel, .ts-rinci-kol, .ts-rinci-baris{ display:none !important; }
  .qv-panel{ display:none !important; }
  /* Mode pilih: bar atas lengket [☐ semua yang tampil] "n dipilih" [Batal] (+ tawaran semua hasil filter); aksi lengket di bawah. */
  .ts-massal{ position:sticky; top:var(--tinggi-topbar); left:auto; right:auto; bottom:auto; z-index:25; margin:0 0 var(--sp-2); padding:var(--sp-1) var(--sp-2); background:var(--bg-raised); box-shadow:var(--shadow-sm); }
  body:has(#footerMenu) .ts-massal{ bottom:auto; }
  .ts-massal-utama{ flex-wrap:nowrap; min-height:var(--h-kontrol); }
  .ts-massal-semua{ width:var(--sentuh); height:var(--sentuh); }
  .ts-massal-jml{ flex:1; font-size:var(--fs-14); }
  .ts-massal-utama > .btn{ flex:none; min-height:var(--h-kontrol); }
  .ts-massal-aksi{ position:fixed; left:var(--sp-2); right:var(--sp-2); bottom:calc(var(--sp-2) + env(safe-area-inset-bottom)); z-index:140; order:initial; flex-basis:auto; display:flex; flex-wrap:nowrap; gap:var(--sp-2); padding:var(--sp-2); background:var(--bg-raised); border:1.5px solid var(--accent-soft); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow-x:auto; }
  body:has(#footerMenu) .ts-massal-aksi{ bottom:calc(64px + 18px + env(safe-area-inset-bottom)); }
  .ts-massal.is-kosong .ts-massal-aksi{ display:none; }
  .ts-massal-aksi .btn{ flex:1 0 auto; min-height:var(--h-kontrol); }
  .ts-massal-tawar{ padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sentuh); }
  /* Detail: bar satu baris [←] [🔍] … [‹] n dari N [›]; kepala; 1 aksi utama selebar penuh + ⋯. */
  .dk-cari{ display:none; }
  .sheet-cari .dk-cari{ display:flex; }
  .dk-cari-btn{ display:inline-grid !important; }
  .dk-posisi{ min-width:0; font-size:var(--fs-12); }
  .dk-kepala{ flex-direction:column; align-items:stretch; gap:var(--sp-3); margin-bottom:var(--sp-4); }
  .dk-id{ flex:none; }
  .dk-nama{ font-size:var(--fs-20); }
  .dk-aksi{ width:100%; margin:0; }
  .dk-aksi-isi{ flex:1; flex-wrap:nowrap; }
  .dk-aksi-isi > .btn:not(.dk-utama){ display:none; }
  .dk-aksi-isi > .dk-utama{ flex:1; width:100%; }
  .dk-lain{ display:inline-grid !important; }
}
@media (prefers-reduced-motion: reduce){ .app-sheet, .app-sheet-latar, .qv-panel, .ts-rinci-btn .fas{ transition:none; } }

/* ============ PENGATURAN PROYEK (7501 admin/pengaturan/proyek) ============
   Responsif: HP ≤575 = 1 kolom, tab-bar geser, bar Simpan sticky selebar layar (target ≥44px), tabel pratinjau jadi kartu;
   tablet 576–991 = form 1 kolom; laptop ≥992 = form 2 kolom (.span-2 satu baris penuh), konten maks mengikuti .app-content. */
.peng .tab-btn{ position:relative; white-space:nowrap; }
.peng .tab-btn .fas{ flex:none; }
.tab-dot{ flex:none; width:8px; height:8px; border-radius:var(--radius-full); background:var(--warning-600); box-shadow:0 0 0 2px var(--bg-raised); }
.tab-dot[hidden]{ display:none; }
.peng .tab-list{ margin-bottom:16px; }
.peng-set{ border:0; margin:0; padding:0; min-width:0; }
.peng-set[disabled] .check-chip, .peng-set[disabled] .color-swatch{ cursor:not-allowed; opacity:.7; }
.peng-judul{ margin-bottom:12px; }
.peng-judul-2{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.peng-ket{ margin:-6px 0 16px; }
.peng-form, .peng-blok, .peng-logo-dev{ margin-bottom:16px; }
.peng .form-grid{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:16px; }
.peng .form-grid .bagian-judul{ margin:4px 0 -4px; padding-top:12px; border-top:1px solid var(--line); }
.peng .form-field input[type=text], .peng .form-field input[type=tel], .peng .form-field input[type=email], .peng .form-field select{ min-height:var(--h-kontrol); }
.peng-aksi{ align-items:center; }
.peng-belum{ display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:var(--fs-12); color:var(--text-dim); }
.peng-belum[hidden]{ display:none; }
.peng-belum .fas{ font-size:8px; color:var(--warning-600); }
.peng-impor-hasil{ margin-top:16px; }
.peng-impor-hasil[hidden]{ display:none; }
.peng-impor-aksi{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.peng-galat{ margin:6px 0 0 18px; padding:0; }
.peng-blok .btn, .peng-aksi .btn, .peng-impor-aksi .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.peng-blok .btn .fas, .peng-aksi .btn .fas, .peng-impor-aksi .btn .fas, .peng .btn-sm .fas{ flex:none; width:16px; }
@media (min-width:992px){
  .peng .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .peng .form-grid .span-2{ grid-column:1 / -1; }
}
@media (max-width:575px){
  .peng .tab-list{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .peng .tab-btn{ flex:none; min-height:44px; }
  .peng-aksi{ margin:8px -16px -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap:wrap; }
  .peng-aksi .btn, .peng-impor-aksi .btn, .peng-blok .btn{ min-height:44px; }
  .peng-aksi .btn{ flex:1 1 100%; }
  .peng-belum{ flex:1 1 100%; margin-right:0; }
  .peng-impor-aksi{ flex-direction:column-reverse; }
  .peng-form, .peng-blok, .peng-logo-dev, .peng .card{ padding:16px; }
}

/* ============ PENGATURAN EMAIL (7502 admin/pengaturan/email) — memakai .peng untuk tab & form ============
   Responsif: HP ≤575 = 1 kolom, tab geser, kartu mode bertumpuk, tombol uji selebar penuh (≥44px), panel editor layar
   penuh; tablet 576–991 = kartu mode 2 kolom, panel 70%; laptop ≥992 = form 2 kolom, panel editor 720px. */
.eml-tabs a.tab-btn{ text-decoration:none; color:inherit; }
.eml-tab-kunci{ font-size:var(--fs-11); opacity:.6; }
.eml-mode{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.eml-mode-kartu{ display:flex; align-items:flex-start; gap:var(--sp-3); min-height:var(--sentuh); padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); cursor:pointer; }
.eml-mode-kartu input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.eml-mode-kartu:has(input:checked){ border-color:var(--accent); background:var(--tag-bg); }
.eml-mode-kartu.is-off{ border-style:dashed; opacity:.6; cursor:not-allowed; }
.eml-mode-isi{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.eml-mode-isi b{ font-size:var(--fs-14); }
.eml-mode-isi small{ font-size:var(--fs-12); color:var(--text-dim); }
.eml .form-field textarea, .eml .form-field input[type=email]{ font-family:'Inter'; font-size:var(--fs-14); color:var(--text); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; width:100%; }
.eml .form-field textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.eml .form-field textarea.mono{ font-family:'IBM Plex Mono'; font-size:var(--fs-13); }
.eml .form-field textarea:focus{ outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.eml .form-field.has-error textarea{ border-color:var(--danger-600); }
.eml-warna{ display:flex; gap:var(--sp-2); align-items:center; }
.eml-warna input[type=color]{ flex:none; width:var(--h-kontrol); height:var(--h-kontrol); padding:2px; border:1.5px solid var(--line); border-radius:var(--r-kontrol); background:var(--bg-raised); cursor:pointer; }
.eml-warna input[type=text]{ flex:1; min-width:0; font-family:'IBM Plex Mono'; }
.eml-uji-aksi{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); }
.eml-uji-aksi .btn{ display:inline-flex; align-items:center; gap:8px; min-height:var(--h-kontrol); }
.eml-uji-aksi .btn .fas{ flex:none; width:16px; }
.eml-tes-akhir{ margin-top:var(--sp-3); }
.eml-dns{ margin-top:var(--sp-4); }
.eml-dns[hidden]{ display:none; }
.eml-dns-daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.eml-dns-daftar li{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3); border:1px solid var(--line); border-left:4px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-raised); font-size:var(--fs-13); }
.eml-dns-daftar li .fas{ flex:none; margin-top:3px; }
.eml-dns-daftar li > div{ display:flex; flex-direction:column; gap:4px; min-width:0; overflow-wrap:anywhere; }
.eml-dns-daftar li.is-ok{ border-left-color:var(--success-600); }
.eml-dns-daftar li.is-ok .fas{ color:var(--success-600); }
.eml-dns-daftar li.is-gagal{ border-left-color:var(--danger-600); }
.eml-dns-daftar li.is-gagal .fas{ color:var(--danger-600); }
.eml-tpl-nama{ display:block; }
.eml-tpl-aksi{ text-align:right; white-space:nowrap; }
.eml-tpl-aksi .btn{ display:inline-flex; align-items:center; gap:6px; }
.eml-tpl-aksi .btn .fas{ flex:none; width:14px; }
.eml-tpl-aksi-th{ width:1%; }
.eml-tpl-muat[hidden]{ display:none; }
.eml-tpl-muat{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-6) 0; color:var(--text-dim); font-size:var(--fs-13); }
.eml-var{ display:flex; flex-wrap:wrap; gap:6px; }
.eml-var-chip{ min-height:32px; padding:0 10px; border:1px dashed var(--line-strong); border-radius:var(--radius-full); background:var(--bg-alt); font-family:'IBM Plex Mono'; font-size:var(--fs-12); color:var(--accent); cursor:pointer; }
.eml-var-chip:hover:not(:disabled){ border-color:var(--accent); background:var(--tag-bg); }
.eml-var-chip:disabled{ opacity:.55; cursor:not-allowed; }
.eml-iframe{ display:block; width:100%; height:420px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; }
.eml-galat{ color:var(--danger-600); overflow-wrap:anywhere; }
.eml-c-ke, .eml-c-subjek{ overflow-wrap:anywhere; }
.eml-c-ket{ display:block; margin-top:2px; color:var(--text-dim); }
.eml-retensi{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); color:var(--text-dim); }
.eml-retensi .fas{ flex:none; width:16px; }
.qv-email{ margin:var(--sp-3) 0; }
/* Email v2 (7502): Ringkasan, kartu mode Pengirim, Tampilan + pratinjau */
.eml-kuota-is-warn{ color:var(--warning-600); font-weight:600; }
.eml-kuota-is-danger{ color:var(--danger-600); font-weight:600; }
.eml-kuota-cat{ margin:var(--sp-2) 0 var(--sp-4); }
.eml-ringkas{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); margin-bottom:var(--sp-4); border-left:4px solid var(--accent); }
.eml-ringkas-isi{ display:flex; gap:var(--sp-3); align-items:flex-start; min-width:0; }
.eml-ringkas-ic{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--h-kontrol); height:var(--h-kontrol); border-radius:var(--radius-full); background:var(--tag-bg); color:var(--accent); }
.eml-ringkas-teks{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); min-width:0; }
.eml-ringkas-teks > b{ font-size:var(--fs-16); }
.eml-ringkas-teks > .tx-small:first-child, .eml-ringkas-dipakai{ flex:1 1 100%; overflow-wrap:anywhere; }
.eml-ringkas-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.eml-ringkas-aksi .btn{ display:inline-flex; align-items:center; gap:8px; min-height:var(--h-kontrol); }
.eml-ringkas-aksi .btn .fas{ flex:none; width:16px; }
.eml-ringkas-cat{ margin:0; }
.eml-ringkas-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.eml-ringkas-daftar{ list-style:none; margin:0 0 var(--sp-3); padding:0; display:flex; flex-direction:column; }
.eml-ringkas-daftar li{ display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-13); }
.eml-ringkas-daftar li:last-child{ border-bottom:0; }
.eml-gagal li{ padding:0; }
.eml-gagal a{ display:flex; flex-direction:column; gap:2px; width:100%; min-height:var(--sentuh); padding:var(--sp-2); border-radius:var(--radius-sm); color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.eml-gagal a:hover, .eml-gagal a:focus-visible{ background:var(--bg-alt); }
.eml-gagal-ke{ font-weight:600; }
.eml-mode-kartu2{ display:flex; flex-direction:column; border:1.5px solid var(--line-strong); background:var(--bg-raised); box-shadow:var(--shadow-sm); min-width:0; }
.eml-mode-kartu2.is-aktif{ border-color:var(--accent); }
.eml-mode-kartu2.is-off{ border-style:dashed; opacity:.75; }
.eml-mode-kepala{ display:flex; align-items:flex-start; gap:var(--sp-3); min-height:var(--sentuh); padding:var(--sp-3) var(--sp-4); cursor:pointer; }
.eml-mode-kartu2.is-off .eml-mode-kepala{ cursor:not-allowed; }
.eml-mode-kepala input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.eml-mode-kepala > .fas{ flex:none; margin-left:auto; color:var(--text-dim); }
.eml-mode-badan{ display:block; min-width:0; margin:0; padding:0 var(--sp-4) var(--sp-4); border:0; }
.eml-mode-badan[hidden]{ display:none; }
.eml-reply{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.eml-reply input{ flex:1 1 200px; min-width:0; }
.eml-reply .btn, .eml-perangkat .btn{ display:inline-flex; align-items:center; gap:8px; min-height:var(--h-kontrol); }
.eml-reply .btn .fas, .eml-perangkat .btn .fas{ flex:none; width:16px; }
.eml-panduan{ margin:var(--sp-1) 0 0; }
.eml-mode-badan .eml-uji-aksi{ margin-top:var(--sp-5, 20px); }
.eml-mode-badan .peng-ket{ margin:var(--sp-4) 0 0; }
.eml-subtab{ display:none; }
.eml-tampil{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
.eml-preview{ padding:var(--sp-4); min-width:0; }
.eml-preview-kepala{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--sp-2); }
.eml-perangkat{ display:flex; gap:var(--sp-2); }
.eml-perangkat .btn.is-aktif{ border-color:var(--accent); background:var(--tag-bg); color:var(--accent); }
.eml-preview-bingkai{ margin-top:var(--sp-3); overflow-x:auto; position:relative; }
.eml-preview-iframe{ height:520px; margin:0 auto; }
.eml-preview-bingkai[data-dev="hp"] .eml-preview-iframe{ width:375px; max-width:100%; }
@media (min-width:576px){
  .eml-mode{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
  .eml-ringkas{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .eml-ringkas-cat{ flex:1 1 100%; }
  .eml-ringkas-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:992px){
  .eml-tampil{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .eml-preview{ position:sticky; top:var(--sp-4); }
}
@media (max-width:575px){
  .eml-subtab{ display:flex; }
  .eml-tampil[data-sub="pengaturan"] .eml-preview, .eml-tampil[data-sub="preview"] .eml-tampil-form{ display:none; }
  .eml-perangkat{ display:none; }
  .eml-preview-iframe{ height:420px; }
  .eml-ringkas-aksi .btn, .eml-reply .btn{ flex:1 1 100%; min-height:var(--sentuh); justify-content:center; }
  .eml-uji-aksi .btn{ flex:1 1 100%; min-height:var(--sentuh); justify-content:center; }
  .eml-tpl-aksi{ text-align:left; white-space:normal; }
  .eml-tpl-aksi .btn{ min-height:var(--sentuh); }
  .eml-iframe{ height:360px; }
}

/* ---- Pemakaian & Kuota (modul 7, admin/pemakaian) ---- */
.pk-dev{ margin-bottom:var(--sp-6); }
.pk-dev-judul{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3); font-size:var(--fs-16); font-weight:700; }
.pk-dev-judul .fas{ width:16px; flex:none; color:var(--accent); }
.pk-grid{ display:grid; gap:var(--sp-3); grid-template-columns:minmax(0,1fr); }
.pk-kartu{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; padding:var(--sp-4); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.pk-kartu.pk-warn{ border-left:4px solid var(--warning-600); }
.pk-kartu.pk-danger{ border-left:4px solid var(--danger-600); }
.pk-kepala{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.pk-ic{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--tag-bg); color:var(--accent-soft); font-size:var(--fs-14); }
.pk-warn .pk-ic{ background:var(--warning-100); color:var(--warning-600); }
.pk-danger .pk-ic{ background:var(--danger-100); color:var(--danger-600); }
.pk-judul{ flex:1; min-width:0; margin:0; font-size:var(--fs-14); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-nilai{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px; font-size:var(--fs-13); color:var(--text-dim); }
.pk-nilai b{ font-size:var(--fs-24); font-weight:800; line-height:1.2; color:var(--text); }
.pk-danger .pk-nilai b{ color:var(--danger-600); }
.pk-kaki{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); font-size:var(--fs-12); color:var(--text-dim); }
.pk-danger .pk-persen{ color:var(--danger-600); font-weight:600; }
.pk-upgrade{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--sentuh); font-size:var(--fs-12); font-weight:600; color:var(--accent); text-decoration:none; }
.pk-upgrade .fas{ width:16px; flex:none; }
.pk-upgrade:hover{ text-decoration:underline; }
.pk-rincian{ display:flex; flex-direction:column; gap:var(--sp-1); margin:0; padding:0; list-style:none; font-size:var(--fs-12); color:var(--text-dim); }
.pk-rincian li{ display:flex; justify-content:space-between; gap:var(--sp-2); }
.pk-rincian b{ color:var(--text); font-weight:600; }
.pk-grafik-kartu{ margin-bottom:var(--sp-6); }
.pk-grafik-kepala{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.pk-grafik-judul{ margin:0; font-size:var(--fs-16); font-weight:700; }
.pk-grafik{ display:flex; align-items:flex-end; gap:3px; height:140px; padding-bottom:1px; border-bottom:1.5px solid var(--line-strong); }
.pk-col{ flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; position:relative; cursor:pointer; }
.pk-col:focus-visible{ outline:none; }
.pk-bar{ width:100%; height:var(--h); min-height:2px; border-radius:3px 3px 0 0; background:var(--accent-soft); transition:background-color .15s ease; }
.pk-bar.is-nol{ background:var(--line-strong); }
.pk-col:hover .pk-bar, .pk-col:focus-visible .pk-bar{ background:var(--accent); }
.pk-col:hover .pk-bar.is-nol, .pk-col:focus-visible .pk-bar.is-nol{ background:var(--text-dim); }
.pk-col[data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:4px 8px; border-radius:var(--radius-sm); background:var(--text); color:var(--bg); font-size:11.5px; font-weight:600; line-height:1.3; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:20; box-shadow:var(--shadow-sm); }
.pk-col[data-tip]::before{ content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); border-width:4px 4px 0 4px; border-style:solid; border-color:var(--text) transparent transparent transparent; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:20; }
.pk-col:hover::after, .pk-col:focus-visible::after, .pk-col:hover::before, .pk-col:focus-visible::before{ opacity:1; visibility:visible; }
.pk-col:first-child::after, .pk-col:nth-child(-n+4)::after{ left:0; transform:translateX(0); }
.pk-col:first-child::before, .pk-col:nth-child(-n+4)::before{ left:6px; transform:none; }
.pk-col:last-child::after, .pk-col:nth-last-child(-n+4)::after{ left:auto; right:0; transform:translateX(0); }
.pk-col:last-child::before, .pk-col:nth-last-child(-n+4)::before{ left:auto; right:6px; transform:none; }
.pk-sumbu{ display:flex; justify-content:space-between; margin-top:var(--sp-1); font-size:var(--fs-11); color:var(--text-dim); }
@media (min-width:576px){
  .pk-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pk-grafik{ gap:4px; height:180px; }
}
@media (min-width:992px){
  .pk-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ============ Struktur Organisasi (4102): sel nama + pohon ============ */
.org-sel{ display:flex; align-items:center; gap:10px; padding-left:calc(var(--lv,0) * 22px); position:relative; min-width:0; }
.org-sel::before{ content:''; display:none; position:absolute; left:calc(var(--lv,0) * 22px - 12px); top:-14px; height:calc(50% + 14px); width:10px; border-left:2px solid var(--line-strong); border-bottom:2px solid var(--line-strong); border-bottom-left-radius:8px; }
.org-anak::before{ display:block; }
.org-ikon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; background:var(--accent-100, #e3efe9); color:var(--accent, #2f6f55); }
.org-d0{ background:var(--accent); color:var(--bg); }
.org-d2{ opacity:.8; }
.org-j{ background:var(--info-100, #e4ecf8); color:var(--info-600, #2f5aa8); }
.org-teks{ display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.25; }
.org-teks .tx-small{ color:var(--text-dim); }
.org-jml, .org-lv, .org-atasan{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono'; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:100px; background:var(--accent-100, #e3efe9); }
.org-jml.is-nol{ background:transparent; color:var(--text-dim); font-weight:500; }
.org-lv{ background:var(--info-100, #e4ecf8); color:var(--info-600, #2f5aa8); }
.org-atasan{ font-family:inherit; font-weight:500; background:transparent; padding:0; }
.org-atasan i{ color:var(--text-dim); font-size:11px; }
@media (max-width:767px){ .org-sel{ padding-left:0; } .org-sel::before{ display:none !important; } }

/* Foto pegawai (H10b): avatar bulat berisi gambar; widget unggah foto detail & form */
.ts-av-foto,.dk-av-foto{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.peg-foto-widget{ display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-4); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-lg); transition:border-color .15s ease; }
.peg-foto-widget:hover{ border-color:var(--line-strong); }
.peg-foto-av-wrap{ position:relative; flex:none; width:84px; height:84px; }
.peg-foto-av{ position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--bg-raised); border:2px solid var(--line-strong); box-shadow:var(--shadow-sm); color:var(--text-dim); overflow:hidden; }
.peg-foto-av i{ font-size:32px; color:var(--text-dim); opacity:.65; }
.peg-foto-av .dk-av-foto{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.peg-foto-badge{ position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--bg); display:grid; place-items:center; font-size:11px; border:2px solid var(--bg-raised); box-shadow:0 2px 4px rgba(18,45,40,.15); cursor:pointer; transition:transform .15s ease, background .15s ease; }
.peg-foto-badge:hover{ transform:scale(1.08); background:var(--accent-soft); }
.peg-foto-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.peg-foto-aksi{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
.peg-btn-foto{ background:var(--kontrol-latar); border:var(--kontrol-garis); color:var(--text); box-shadow:var(--kontrol-bayang); font-size:var(--fs-13); font-weight:600; height:36px; padding:0 14px; border-radius:var(--radius-md); transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease; }
.peg-btn-foto:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.peg-btn-foto.btn-danger-teks{ color:var(--danger-600); border-color:var(--line-strong); }
.peg-btn-foto.btn-danger-teks:hover{ border-color:var(--danger-600); color:var(--danger-600); background:var(--danger-100); }
.peg-foto-ket{ margin:0; font-size:var(--fs-12); color:var(--text-dim); line-height:1.45; }
.peg-foto-field{ margin-bottom:var(--sp-4); }
@media (max-width:575px){
  .peg-foto-widget{ flex-direction:column; text-align:center; align-items:center; padding:var(--sp-4) var(--sp-3); gap:var(--sp-3); }
  .peg-foto-info{ align-items:center; width:100%; }
  .peg-foto-aksi{ justify-content:center; width:100%; }
  .peg-foto-aksi .btn{ flex:1 1 calc(50% - var(--sp-2)); min-width:120px; }
  .peg-foto-ket{ text-align:center; }
}
.check-grup{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.dok-grup{ display:grid; gap:var(--sp-3); margin-top:var(--sp-3); }
.dok-baris{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.dok-baris .dok-info{ flex:1 1 220px; min-width:0; }
.dok-baris .dok-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.dok-riwayat{ flex-basis:100%; font-size:var(--fs-12); color:var(--text-dim); }
.dok-riwayat ul{ list-style:none; margin:var(--sp-2) 0 0; padding:0 0 0 var(--sp-3); border-left:2px solid var(--line); display:grid; gap:var(--sp-2); }
.dok-pratinjau{ width:100%; min-height:60vh; border:0; border-radius:var(--radius-md); background:var(--bg-alt); }
img.dok-pratinjau{ min-height:0; max-height:70vh; object-fit:contain; }

/* ============ UPLOAD BERKAS DOKUMEN (4101 Detail Pegawai) ============ */
.dok-upload-zone{ width:100%; }
.dok-dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 18px; border:2px dashed var(--line-strong); border-radius:var(--radius-md);
  background:var(--bg-alt); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
  overflow:hidden;
}
.dok-dropzone:hover{ border-color:var(--accent-soft); background:var(--tag-bg); }
.dok-dropzone.is-dragover{ border-color:var(--teal-500); background:rgba(30,147,132,0.12); transform:scale(1.008); }
.dok-dropzone:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.form-field.has-error .dok-dropzone{ border-color:var(--danger-600); background:var(--danger-100); }
.dok-input-file{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.dok-drop-icon{
  width:48px; height:48px; margin-bottom:10px; border-radius:var(--radius-full);
  background:var(--bg-raised); display:grid; place-items:center; font-size:20px;
  color:var(--accent-soft); box-shadow:var(--shadow-sm); pointer-events:none;
}
.dok-drop-teks{ text-align:center; pointer-events:none; }
.dok-drop-utama{ display:block; font-size:var(--fs-13); font-weight:600; color:var(--text); margin-bottom:4px; }
.dok-drop-pilih{ color:var(--accent-soft); text-decoration:underline; font-weight:700; }
.dok-drop-bantu{ display:block; font-size:var(--fs-12); color:var(--text-dim); }

.dok-pratinjau-card{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1.5px solid var(--accent-soft); border-radius:var(--radius-md);
  background:var(--bg-raised); box-shadow:var(--shadow-sm); animation:dok-fade-in .2s ease;
}
@keyframes dok-fade-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.dok-pratinjau-ikon{
  width:46px; height:46px; flex:none; border-radius:var(--radius-sm);
  background:var(--bg-alt); display:grid; place-items:center; font-size:22px;
  color:var(--danger-600); overflow:hidden; border:1px solid var(--line);
}
.dok-pratinjau-ikon img{ width:100%; height:100%; object-fit:cover; }
.dok-pratinjau-info{ flex:1; min-width:0; }
.dok-pratinjau-nama{ font-size:var(--fs-13); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dok-pratinjau-meta{ display:flex; align-items:center; gap:8px; margin-top:2px; font-size:var(--fs-12); color:var(--text-dim); }
.dok-pratinjau-aksi{ display:flex; align-items:center; gap:6px; flex:none; }
.dok-pratinjau-pill{ font-size:11px; padding:2px 8px; }
.modal-head-grup{ display:flex; align-items:center; gap:12px; }
.modal-head-ikon{
  width:38px; height:38px; border-radius:var(--radius-sm); background:var(--tag-bg);
  color:var(--accent); display:grid; place-items:center; font-size:16px; flex:none;
}

/* Simpan/Batal sticky untuk form halaman penuh (di luar .card): selebar konten, tanpa margin negatif */
.sticky-actions.sticky-halaman{ margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); z-index:20; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }

/* ============ IMPOR (lib/_impor + impor.js; AppSheet .sheet-impor) ============ */
.sheet-impor .app-sheet-isi{ padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.sheet-impor .app-sheet-kaki{ justify-content:flex-end; }
/* Stepper progress bar alur impor */
.impor-langkah{ display:flex; align-items:center; margin:0 0 var(--sp-4); padding:0 0 var(--sp-3); border-bottom:1px solid var(--line); list-style:none; counter-reset:impor; }
.impor-langkah li{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); font-weight:500; color:var(--text-dim); counter-increment:impor; white-space:nowrap; }
.impor-langkah li:last-child{ flex:none; }
.impor-langkah li::before{ content:counter(impor); flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--radius-full); border:1.5px solid var(--line-strong); background:var(--bg-raised); color:var(--text-dim); font-size:var(--fs-12); font-weight:700; transition:all .2s ease; }
.impor-langkah-label{ transition:color .2s ease; }
.impor-langkah li:not(:last-child)::after{ content:''; flex:1; min-width:12px; height:2px; background:var(--line); margin:0 var(--sp-2); border-radius:2px; transition:background .2s ease; }

.impor-langkah li.is-aktif{ color:var(--text); font-weight:700; }
.impor-langkah li.is-aktif .impor-langkah-label{ color:var(--text); }
.impor-langkah li.is-aktif::before{ border-color:var(--accent); background:var(--accent); color:var(--bg); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.impor-langkah li.is-selesai{ color:var(--text-dim); font-weight:600; }
.impor-langkah li.is-selesai::before{ content:'✓'; border-color:var(--accent-soft); background:var(--accent-soft); color:#ffffff; font-size:13px; font-weight:900; }
.impor-langkah li.is-selesai:not(:last-child)::after{ background:var(--accent-soft); }

@media (max-width:575px){
  .impor-langkah{ margin-bottom:var(--sp-3); padding-bottom:var(--sp-2); }
  .impor-langkah li{ font-size:var(--fs-12); gap:6px; }
  .impor-langkah li::before{ width:22px; height:22px; font-size:var(--fs-11); }
  .impor-langkah li:not(:last-child)::after{ margin:0 var(--sp-1); min-width:8px; }
}

/* Banner / Panduan Unduh Templat */
.impor-panduan-card{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:var(--sp-3); }
.impor-panduan-isi{ flex:1; min-width:0; }
.impor-panduan-judul{ font-size:var(--fs-13); font-weight:700; color:var(--text); display:flex; align-items:center; gap:var(--sp-1); margin-bottom:2px; }
.impor-panduan-isi p{ margin:0; color:var(--text-dim); font-size:var(--fs-12); line-height:1.4; }
.impor-templat-btn{ flex:none; white-space:nowrap; background:var(--bg-raised); border:1px solid var(--line-strong); font-weight:600; font-size:var(--fs-12); height:32px; padding:0 var(--sp-3); border-radius:var(--radius-sm); color:var(--text); display:inline-flex; align-items:center; gap:6px; text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.impor-templat-btn:hover{ background:var(--tag-bg); color:var(--accent); border-color:var(--accent-soft); }
@media (max-width:575px){
  .impor-panduan-card{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .impor-templat-btn{ justify-content:center; width:100%; height:36px; }
}

/* Upload Dropzone UI/UX Modern */
.impor-dropzone{ position:relative; border:2px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); padding:var(--sp-6) var(--sp-4); text-align:center; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease; outline:none; }
.impor-dropzone:hover{ border-color:var(--accent-soft); background:var(--bg-alt); }
.impor-dropzone:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.impor-dropzone.is-dragover{ border-color:var(--accent); background:var(--tag-bg); box-shadow:var(--shadow-sm); transform:scale(1.008); }

.impor-drop-kosong{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); }
.impor-drop-ikon{ width:48px; height:48px; border-radius:var(--radius-full); background:var(--tag-bg); color:var(--accent-soft); display:grid; place-items:center; font-size:var(--fs-20); margin-bottom:var(--sp-1); transition:transform .18s ease, background .18s ease, color .18s ease; }
.impor-dropzone:hover .impor-drop-ikon{ transform:translateY(-2px); background:var(--accent); color:var(--bg); }
.impor-drop-teks{ font-size:var(--fs-14); color:var(--text); }
.impor-drop-tautan{ color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.impor-drop-info{ font-size:var(--fs-12); color:var(--text-dim); }

.impor-drop-terpilih{ display:block; }
.impor-file-kartu{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-sm); text-align:left; }
.impor-file-ikon{ width:40px; height:40px; border-radius:var(--radius-sm); background:var(--tag-bg); color:var(--accent); display:grid; place-items:center; font-size:var(--fs-20); flex:none; }
.impor-file-meta{ flex:1; min-width:0; }
.impor-file-nama{ font-size:var(--fs-13); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.impor-file-ganti{ flex:none; font-size:var(--fs-12); height:32px; }

.impor-catatan{ margin-top:var(--sp-2); margin-bottom:0; color:var(--text-dim); font-size:var(--fs-12); display:flex; align-items:center; gap:var(--sp-1); }
.impor-catatan code{ background:var(--tag-bg); padding:1px 5px; border-radius:4px; font-family:monospace; font-size:var(--fs-11); }

.impor-daftar{ margin:0; padding:0; list-style:none; }
.impor-daftar li{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-14); overflow-wrap:anywhere; }
.impor-no{ font-size:var(--fs-11); color:var(--text-dim); }
.impor-alasan{ font-size:var(--fs-12); color:var(--danger-600); }
.impor-ikon{ display:block; margin:0 auto var(--sp-3); font-size:var(--fs-24); color:var(--accent-soft); }
.sheet-impor .empty-state .btn{ margin-top:var(--sp-3); }
@media (min-width:768px){ .app-sheet.sheet-impor{ width:600px; margin-left:-300px; } }

/* Kalender input tanggal (AppTanggal di app.js): popover fixed; HP = bottom sheet */
.form-field input[data-tanggal]{ cursor:pointer; }
.tgl-pop{ position:fixed; z-index:210; width:288px; padding:var(--sp-3); background:var(--bg-raised); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.tgl-grip{ display:none; }
.tgl-kepala{ display:flex; align-items:center; gap:var(--sp-1); margin-bottom:var(--sp-2); }
.tgl-nav{ flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border:0; border-radius:var(--r-kontrol, 8px); background:none; color:var(--text-dim); cursor:pointer; }
.tgl-nav:hover, .tgl-nav:focus-visible{ background:var(--bg-alt); color:var(--accent); outline:none; }
.tgl-kepala select{ flex:1; min-width:0; height:36px; padding:0 var(--sp-1); border:1px solid var(--line); border-radius:var(--r-kontrol, 8px); background:var(--bg-raised); color:var(--text); font:600 var(--fs-13) 'Inter', sans-serif; }
.tgl-kepala .tgl-thn{ flex:none; width:76px; }
.tgl-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.tgl-hdr{ padding:4px 0; text-align:center; font-size:var(--fs-12); font-weight:700; color:var(--text-dim); }
.tgl-hari{ height:36px; border:1px solid transparent; border-radius:var(--r-kontrol, 8px); background:none; color:var(--text); font:500 var(--fs-13) 'Inter', sans-serif; cursor:pointer; }
.tgl-hari:hover:not(:disabled), .tgl-hari:focus-visible{ background:var(--tag-bg); outline:none; }
.tgl-hari.is-hari{ border-color:var(--accent-soft); font-weight:700; }
.tgl-hari.is-pilih{ background:var(--accent); color:var(--bg); font-weight:700; }
.tgl-hari:disabled{ opacity:.35; cursor:not-allowed; }
.tgl-kaki{ display:flex; justify-content:space-between; margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--line); }
.tgl-pop.tgl-hp{ left:0; right:0; bottom:0; top:auto; width:auto; padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.tgl-pop.tgl-hp .tgl-grip{ display:block; width:40px; height:4px; margin:0 auto var(--sp-2); border-radius:100px; background:var(--line-strong); }
.tgl-pop.tgl-hp .tgl-hari, .tgl-pop.tgl-hp .tgl-nav, .tgl-pop.tgl-hp .tgl-kepala select{ height:44px; }
.wkt-pop{ width:248px; }
.wkt-badan{ display:flex; align-items:stretch; gap:var(--sp-2); }
.wkt-kol{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.wkt-judul{ text-align:center; font-size:var(--fs-12); font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.wkt-daftar{ display:flex; flex-direction:column; gap:2px; height:216px; overflow-y:auto; overscroll-behavior:contain; padding:2px; scrollbar-width:thin; }
.wkt-titik{ align-self:center; font-size:var(--fs-18, 18px); font-weight:700; color:var(--text-dim); }
.wkt-item{ flex:none; height:36px; border:1px solid transparent; border-radius:var(--r-kontrol, 8px); background:none; color:var(--text); font:500 var(--fs-14, 14px) 'Inter', sans-serif; font-variant-numeric:tabular-nums; cursor:pointer; }
.wkt-item:hover, .wkt-item:focus-visible{ background:var(--tag-bg); outline:none; }
.wkt-item.is-pilih{ background:var(--accent); color:var(--bg); font-weight:700; }
.wkt-pop .tgl-kaki{ gap:var(--sp-1); align-items:center; }
.wkt-pop .tgl-kaki [data-wkt-ok]{ margin-left:auto; }
.tgl-pop.tgl-hp.wkt-pop{ width:auto; }
.tgl-pop.tgl-hp .wkt-item{ height:44px; }
.tgl-pop.tgl-hp .wkt-daftar{ height:220px; }

/* HRIS H12 — peta Lokasi Absensi (Leaflet lokal) & Kalender Libur (grid bulanan). Warna lewat token. */
.peta-cari{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.peta-cari input{ flex:1; min-width:0; }
.peta-hasil{ list-style:none; margin:0 0 var(--sp-2); padding:0; border:1px solid var(--line-strong); border-radius:var(--r-kontrol); background:var(--bg-raised); max-height:200px; overflow:auto; }
.peta-hasil li+li{ border-top:1px solid var(--line); }
.peta-hasil button{ display:block; width:100%; min-height:var(--sentuh); padding:var(--sp-2) var(--sp-3); text-align:left; background:none; border:0; color:var(--text); font-size:var(--fs-13); cursor:pointer; }
.peta-hasil button:hover{ background:var(--bg-alt); color:var(--accent); }
@media (min-width:576px){ .form-grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .form-grid-2 > .span-penuh{ grid-column:1 / -1; } }
.qv-peta.is-penuh{ position:fixed; inset:0; height:auto; z-index:2000; border-radius:0; }
.qv-peta-penuh{ display:grid; place-items:center; width:30px; height:30px; background:#fff; color:#222; cursor:pointer; }
.qv-peta{ height:200px; border:1.5px solid var(--line-strong); border-radius:var(--r-kontrol); background:var(--bg-alt); z-index:0; flex:none; }
@media (min-width:992px){
  .lokasi-sel{ position:relative; padding-left:56px !important; }
  .lokasi-sel::before{ content:"\f3c5"; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; left:10px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--tag-bg); color:var(--accent); font-size:var(--fs-16); }
}
.peta-lokasi{ height:280px; border:1.5px solid var(--line-strong); border-radius:var(--r-kontrol); background:var(--bg-alt); z-index:0; }
/* ============ 4106 KALENDER LIBUR ============ */
.kal{ padding:var(--sp-4); }
.kal-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap;
}
.kal-nav-kiri{ display:flex; align-items:center; gap:var(--sp-2); }
.kal-nav-grup{
  display:inline-flex; align-items:center;
  background:var(--bg-raised); border:1.5px solid var(--line-strong);
  border-radius:var(--radius-md); box-shadow:var(--kontrol-bayang); overflow:hidden;
}
.kal-nav-grup .btn{ border:0; border-radius:0; min-height:36px; padding:0 12px; }
.kal-nav-grup .btn + .btn{ border-left:1px solid var(--line); }
.kal-btn-hari-ini{ font-size:var(--fs-12); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.btn-ikon-pad{ width:36px; padding:0 !important; display:grid; place-items:center; }
.kal-nav-tengah{ text-align:center; }
.kal-hijri-judul{ color:var(--text-dim); margin-top:2px; }
.kal-hijri{ margin:0 auto 0 6px; font-size:var(--fs-11); color:var(--text-dim); line-height:1; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kal-judul{
  margin:0; font-family:'Plus Jakarta Sans'; font-size:var(--fs-20); font-weight:800;
  color:var(--text); display:inline-flex; align-items:center; gap:10px;
}
.kal-judul-ikon{ color:var(--accent-soft); font-size:18px; }
.kal-nav-kanan{ display:flex; align-items:center; gap:8px; }
.kal-stat-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:var(--radius-full);
  background:var(--bg-alt); border:1px solid var(--line);
  font-size:var(--fs-12); color:var(--text-dim);
}
.kal-stat-titik{ width:8px; height:8px; border-radius:50%; background:var(--accent-soft); flex:none; }

.kal-legenda-wrap{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-3); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.kal-legenda-label{ font-size:var(--fs-11); font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.kal-legenda{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.kal-leg-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:var(--fs-11); font-weight:600;
}
.kal-leg-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

.kal-grid{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  border:1.5px solid var(--line-strong); border-radius:var(--radius-md);
  overflow:hidden; background:var(--line); gap:1px;
}
.kal-kepala{
  padding:10px 4px; text-align:center;
  font-size:var(--fs-11); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); background:var(--bg-alt);
}
.kal-kepala.is-minggu{ color:var(--danger-600); }
.kal-kepala.is-sabtu{ color:var(--warning-600); }

.kal-hari{
  min-height:104px; padding:6px;
  background:var(--bg-raised);
  display:flex; flex-direction:column; min-width:0;
  transition:background-color .15s ease, box-shadow .15s ease;
  cursor:pointer; position:relative;
}
.kal-hari:hover:not(.is-luar){
  background:var(--bg-shell);
}
.kal-hari.is-luar{
  background:var(--bg-alt); opacity:.45; cursor:default;
}
.kal-hari.is-libur{
  background:rgba(18,45,40,0.02);
}
.kal-hari.is-minggu .kal-tgl{ color:var(--danger-600); }
.kal-hari.is-sabtu .kal-tgl{ color:var(--text-dim); }

.kal-hari-atas{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.kal-tgl{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border:0; border-radius:var(--radius-full);
  background:none; color:var(--text);
  font-family:'Inter', sans-serif; font-size:var(--fs-13); font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.kal-hari.is-hari-ini .kal-tgl{
  background:var(--accent); color:var(--bg-raised);
  box-shadow:0 0 0 2px var(--bg-raised), 0 0 0 4px var(--accent-soft);
  font-weight:700;
}
.kal-hari:not(.is-luar):hover .kal-tgl:not(.kal-hari.is-hari-ini .kal-tgl){
  background:var(--tag-bg); color:var(--accent);
}
.kal-cell-tambah{
  display:none; width:22px; height:22px; border:0;
  border-radius:var(--radius-full); background:var(--tag-bg);
  color:var(--accent-soft); font-size:10px; cursor:pointer;
  place-items:center; transition:all .15s ease;
}
.kal-cell-tambah:hover{ background:var(--accent); color:var(--bg-raised); }
.kal-hari:hover:not(.is-luar) .kal-cell-tambah{ display:grid; }

.kal-item{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px; flex:1;
}
.kal-i{
  display:block; width:100%; min-height:22px; padding:3px 8px;
  border:0; border-left:3px solid var(--accent); border-radius:5px;
  background:var(--tag-bg); color:var(--text);
  font:500 var(--fs-11) 'Inter', sans-serif; text-align:left;
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
}
.kal-i > span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.kal-i{ cursor:pointer; }
button.kal-i:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  filter:brightness(.96);
}

.kal-i-nasional, .kal-leg-badge.kal-i-nasional{
  --kal-w:var(--danger-600); border-left-color:var(--danger-600);
  background:var(--danger-100); color:var(--danger-600);
}
.kal-i-cb, .kal-leg-badge.kal-i-cb{
  --kal-w:var(--warning-600); border-left-color:var(--warning-600);
  background:var(--warning-100); color:#8d5e08;
}
.kal-i-perusahaan, .kal-leg-badge.kal-i-perusahaan{
  --kal-w:var(--teal-500); border-left-color:var(--teal-500);
  background:rgba(30,147,132,0.12); color:var(--teal-700);
}
.kal-i-lokal, .kal-leg-badge.kal-i-lokal{
  --kal-w:var(--success-600); border-left-color:var(--success-600);
  background:var(--success-100); color:var(--success-600);
}
.kal-i-batal, .kal-leg-badge.kal-i-batal{
  --kal-w:var(--text-dim); border-left-color:var(--text-dim);
  background:var(--tag-bg); color:var(--text-dim);
}
/* Mode gelap: teks nada teal (perusahaan/survey) & cokelat (cuti bersama/tugas) terlalu gelap di latar gelap → token terang. */
:root[data-theme="dark"] .kal-i-perusahaan, :root[data-theme="dark"] .kal-leg-badge.kal-i-perusahaan{ color:var(--text); }
:root[data-theme="dark"] .kal-i-cb, :root[data-theme="dark"] .kal-leg-badge.kal-i-cb{ color:var(--warning-600); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kal-i-perusahaan, :root:not([data-theme="light"]) .kal-leg-badge.kal-i-perusahaan{ color:var(--text); }
  :root:not([data-theme="light"]) .kal-i-cb, :root:not([data-theme="light"]) .kal-leg-badge.kal-i-cb{ color:var(--warning-600); }
}
.kal-i.is-dibatalkan > span, .kal-agenda-nama.is-dibatalkan{
  text-decoration:line-through; color:var(--text-dim);
}

/* Tab Profil Detail Pegawai (4101): kartu ringkas + 2 kolom kartu berikon */
.pf{ display:flex; flex-direction:column; gap:var(--sp-4); }
.pf-hero{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-6); align-items:center; padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  background:linear-gradient(135deg, var(--tag-bg) 0%, transparent 65%), var(--bg-raised); }
.pf-foto{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.pf-foto .peg-foto-av-wrap{ width:112px; height:112px; }
.pf-foto .peg-foto-av i{ font-size:40px; }
.pf-foto-aksi{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-1); }
.pf-ringkas{ min-width:0; }
.pf-stat{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-3); margin:0; }
.pf-stat > div{ min-width:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.pf-stat dt{ display:flex; align-items:center; gap:6px; margin:0; font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.pf-stat dt i{ color:var(--accent-soft); }
.pf-stat dd{ margin:6px 0 0; font-size:var(--fs-16); font-weight:700; line-height:1.3; color:var(--text); overflow-wrap:anywhere; }
.pf-stat-sub{ display:block; margin-top:2px; font-size:var(--fs-12); font-weight:400; color:var(--text-dim); }
.pf-lengkap{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-4); font-size:var(--fs-13); color:var(--text-dim); }
.pf-lengkap b{ color:var(--text); }
.pf-bar{ flex:1; min-width:140px; height:8px; border-radius:var(--radius-full); background:var(--tag-bg); overflow:hidden; }
.pf-bar > span{ display:block; height:100%; border-radius:inherit; background:var(--accent-soft); transition:width .4s ease; }
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); align-items:start; }
.pf-kol{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.pf-kepala{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.pf-kepala .tx-h3{ flex:1; min-width:0; margin:0; font-size:var(--fs-16); }
.pf-ikon{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-sm); background:var(--tag-bg); color:var(--accent-soft); font-size:var(--fs-14); }
.pf-list{ display:flex; flex-direction:column; margin:0; }
.pf-item{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.pf-item:first-child{ border-top:0; padding-top:var(--sp-1); }
.pf-item > i{ margin-top:3px; text-align:center; font-size:var(--fs-14); color:var(--text-dim); }
.pf-item dt{ margin:0 0 2px; font-size:var(--fs-12); color:var(--text-dim); }
.pf-item dd{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0; font-size:var(--fs-14); font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.pf-kosong{ font-weight:400; font-style:italic; color:var(--text-dim); }
/* Profil Saya (E4): pengajuan menunggu/ditolak di kartu + tabel lama → baru (juga quick view Pusat Persetujuan) */
.pf-aju{ margin-top:var(--sp-3); padding:var(--sp-3); border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); }
.pf-aju-tolak{ border-style:solid; border-color:var(--danger-600); background:var(--danger-100); }
.pf-aju p{ margin:0 0 var(--sp-2); }
.pf-aju p:last-child{ margin-bottom:0; }
/* Profil Saya: meta di kartu ringkas, kaki kartu (tombol ajukan), catatan privasi, dokumen */
.pf-sub{ margin-top:4px; }
.pf-nama{ margin:0; overflow-wrap:anywhere; }
.pf-jabatan{ margin:4px 0 0; }
.pf-meta{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pf-meta li{ display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 10px; border-radius:var(--radius-full); background:var(--bg-raised); border:1px solid var(--line); font-size:var(--fs-12); font-weight:600; color:var(--text); }
.pf-meta i{ font-size:10px; color:var(--accent-soft); }
.pf-kaki{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.pf-catatan{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--radius-md); background:var(--bg-alt); }
.pf-catatan > i{ margin-top:3px; font-size:var(--fs-12); color:var(--text-dim); }
.pf-catatan p{ flex:1; min-width:180px; margin:0; }
.pf-aju-judul{ display:flex; align-items:center; gap:6px; font-size:var(--fs-13); font-weight:600; color:var(--text); }
.pf-aju-judul i{ color:var(--warning-600); }
.pf-lampiran{ margin-top:var(--sp-2); }
.pf-dok-nama{ flex:1; min-width:0; }
.pf-dok-aksi{ display:inline-flex; gap:4px; margin-left:auto; }
.tabel-lama-baru{ width:100%; border-collapse:collapse; font-size:var(--fs-13); margin-bottom:var(--sp-2); }
.tabel-lama-baru th, .tabel-lama-baru td{ padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-top:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.tabel-lama-baru thead th{ border-top:0; font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.tabel-lama-baru td.lama{ color:var(--text-dim); }
.dash-tabel{ padding:0 var(--sp-3) var(--sp-3); overflow-x:auto; position:relative; }
.dash-tabel p{ margin:0 0 var(--sp-1); }
.qv-alert{ margin-bottom:0; }
.qv-alert .alert-list{ list-style:disc; padding-left:18px; }
.qv-rincian{ min-width:0; }
.qv-rincian-judul{ margin:0 0 var(--sp-1); font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.tabel-rincian{ width:100%; border-collapse:collapse; font-size:var(--fs-13); }
.tabel-rincian td{ padding:var(--sp-2) 0; border-top:1px dashed var(--line); vertical-align:top; overflow-wrap:anywhere; }
.tabel-rincian tbody tr:first-child td{ border-top:0; }
.tabel-rincian td:first-child{ padding-right:var(--sp-3); }
.tabel-rincian td .tx-small{ display:block; margin-top:2px; font-size:var(--fs-12); color:var(--text-dim); }
.tabel-rincian td.angka{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tabel-rincian tfoot td{ border-top:1px solid var(--line); font-weight:700; }
.qv-sorot{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3); border-radius:var(--radius-md); background:var(--bg-alt); border:1px solid var(--line); }
.qv-sorot span{ font-weight:600; }
.qv-sorot b{ font-size:var(--fs-18); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ts-tanda{ display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.ts-tanda .pill i{ margin-right:4px; }
.tabel-lama-baru td.baru{ font-weight:600; color:var(--text); }
.pf-tindak{ display:inline-flex; gap:6px; margin-left:auto; }
.pf-tindak .btn-ikon{ width:32px; height:32px; color:var(--accent-soft); }
@media (min-width:992px){ .pf-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .pf-grid > .pf-penuh{ grid-column:1 / -1; } }
@media (max-width:991px){ .pf-stat{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:575px){
  .pf-hero{ grid-template-columns:minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-4); }
  .pf-stat dd{ font-size:var(--fs-14); }
  .pf-lengkap{ justify-content:center; text-align:center; }
  .pf-hero{ justify-items:center; text-align:center; }
  .pf-meta{ justify-content:center; }
  .pf-foto-aksi, .pf-kaki .btn, .pf-foto-aksi .btn, .pf-catatan .btn{ width:100%; justify-content:center; min-height:44px; }
  .pf-dok-aksi{ width:100%; }
  .pf-dok-aksi .btn{ flex:1; justify-content:center; min-height:40px; }
  .pf-aju-tabel thead{ display:none; }
  .pf-aju-tabel tr{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--line); }
  .pf-aju-tabel tbody tr:first-child{ border-top:0; }
  .pf-aju-tabel td{ padding:0; border:0; }
  .pf-aju-tabel td:first-child{ grid-column:1 / -1; font-weight:600; color:var(--text); }
  .pf-aju-tabel td[data-label]::before{ content:attr(data-label); display:block; font-size:var(--fs-11); font-weight:500; color:var(--text-dim); }
}

/* Kalender kehadiran (partial v_kalender_kehadiran): ringkasan bulan & rincian absen di panel hari */
.ra-sub{ margin-top:4px; }
/* Ringkasan bulan kalender kehadiran: kotak stat berikon (warna = legenda kal-i-*) */
.kk-stat{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-4); }
.kk-stat-item{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:var(--sp-3); align-items:center; padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); min-width:0; }
.kk-stat-ic{ grid-row:1 / 3; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-sm); font-size:var(--fs-14); }
.kk-stat dt{ margin:0; font-size:var(--fs-12); color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-stat dd{ margin:0; font-size:var(--fs-12); color:var(--text-dim); }
.kk-stat dd b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:var(--fs-20); font-weight:800; line-height:1.2; color:var(--text); margin-right:2px; }
.kk-kosong{ margin-top:var(--sp-3); }
.kk-daftar{ display:none; list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.kk-baris{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:64px; padding:var(--sp-3) var(--sp-1); border:0; border-top:1px solid var(--line); background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:var(--radius-sm); }
.kk-baris:active{ background:var(--bg-alt); }
.kk-daftar li:first-child .kk-baris{ border-top:0; }
.kk-baris-tgl{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-sm); background:var(--bg-alt); border:1px solid var(--line); line-height:1.1; }
.kk-baris-tgl b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:var(--fs-18); font-weight:800; color:var(--text); }
.kk-baris-tgl small{ font-size:var(--fs-11); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.kk-baris-tgl.is-hari-ini{ background:var(--accent); border-color:var(--accent); }
.kk-baris-tgl.is-hari-ini b, .kk-baris-tgl.is-hari-ini small{ color:var(--bg-raised); }
.kk-baris-isi{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:var(--fs-12); color:var(--text-dim); }
.kk-baris-jam{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--fs-13); font-weight:600; color:var(--text); }
.kk-baris-jam i{ font-size:10px; color:var(--text-dim); }
.kk-baris-jam i:not(:first-child){ margin-left:6px; }
.kk-baris-telat{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-12); font-weight:600; color:var(--text); }
.kk-baris-telat i{ color:var(--warning-600); }
.kk-baris > .fas{ flex:none; color:var(--text-dim); font-size:var(--fs-12); }
@media (max-width:575px){
  [data-kk][data-mode="pribadi"] .kal-grid, [data-kk][data-mode="pribadi"] .kal-legenda-wrap{ display:none; }
  [data-kk][data-mode="pribadi"] .kk-daftar{ display:block; }
  /* HP: judul bulan kiri, navigasi ringkas kanan dalam satu baris */
  [data-kk] .kal-nav{ flex-direction:row; flex-wrap:nowrap; align-items:center; text-align:left; }
  [data-kk] .kal-nav-tengah{ order:-1; flex:1; min-width:0; text-align:left; }
  [data-kk] .kal-judul{ font-size:var(--fs-18); gap:8px; }
  [data-kk] .kal-judul-ikon{ display:none; }
  [data-kk] .kal-nav-kanan{ display:none; }
  [data-kk] .kal-btn-hari-ini span{ display:none; }
  [data-kk] .kal-nav-grup .btn{ min-height:40px; min-width:40px; justify-content:center; }
  .kk-stat{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kk-stat-item:first-child:nth-last-child(odd){ grid-column:1 / -1; }
  .kk-stat-item{ padding:10px; column-gap:10px; }
  .kk-stat-ic{ width:32px; height:32px; }
}
.kk-absen{ margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--line); }

/* Agenda bulan */
.kal-agenda-card{
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.kal-agenda-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-3); flex-wrap:wrap; gap:var(--sp-2);
}
.kal-agenda-head-info .tx-h3{ display:flex; align-items:center; gap:8px; }
.kal-agenda-list{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2);
}
.kal-agenda-row{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:12px 16px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--bg-raised);
  transition:all .15s ease;
}
.kal-agenda-row:hover{
  border-color:var(--line-strong); box-shadow:var(--shadow-sm);
}
.kal-agenda-tgl-kotak{
  width:48px; height:48px; border-radius:var(--radius-sm);
  background:var(--bg-alt); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:none; line-height:1.1;
}
.kal-agenda-tgl-kotak .tgl-hari{
  font-size:var(--fs-18); font-weight:800; font-family:'Plus Jakarta Sans';
  color:var(--text);
}
.kal-agenda-tgl-kotak .tgl-sub{
  font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text-dim);
}
.kal-agenda-konten{ flex:1; min-width:0; }
.kal-agenda-judul-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px;
}
.kal-agenda-nama{ font-size:var(--fs-14); font-weight:700; color:var(--text); }
.kal-agenda-meta{ display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:var(--fs-12); flex-wrap:wrap; }

/* Detail tanggal modal */
.kal-hari-info{
  padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--bg-alt); color:var(--text-dim); font-size:var(--fs-13);
  margin-bottom:var(--sp-3); display:flex; align-items:center; gap:8px;
}
.kal-hari-list{
  list-style:none; margin:0 0 var(--sp-3); padding:0; display:grid; gap:var(--sp-2);
}
.kal-hari-list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:12px 14px; border:1px solid var(--line);
  border-left:4px solid var(--kal-w, var(--accent));
  border-radius:var(--radius-sm); background:var(--bg-raised);
}
.kal-hari-list .kal-hari-teks{ flex:1; min-width:0; }
.kal-hari-list .kal-hari-teks b{ font-size:var(--fs-14); display:block; margin-bottom:2px; }
.kal-hari-list .is-dibatalkan b{ text-decoration:line-through; color:var(--text-dim); }

@media (max-width:575px){
  .kal{ padding:var(--sp-2); }
  .kal-nav{ flex-direction:column; align-items:stretch; text-align:center; }
  .kal-nav-kiri{ justify-content:center; }
  .kal-nav-kanan{ justify-content:center; }
  .kal-hari{ min-height:64px; padding:3px; }
  .kal-hari-atas{ justify-content:center; }
  .kal-cell-tambah{ display:none !important; }
  .kal-item{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px; }
  .kal-item .kal-i{ width:8px; height:8px; min-height:0; padding:0; border:0; border-radius:50%; background:var(--kal-w); pointer-events:none; }
  .kal-item .kal-i > span{ display:none; }
  .kal-agenda-row{ padding:10px 12px; }
}

/* ============ MODE LAYAR PENUH KALENDER ============ */
body.kal-is-penuh{ overflow:hidden !important; }
body.kal-is-penuh .modal-backdrop{ z-index:200 !important; }

.kal.is-penuh{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  z-index:130 !important;
  margin:0 !important;
  border-radius:0 !important;
  border:0 !important;
  overflow-y:auto !important;
  background:var(--bg) !important;
  padding:var(--sp-4) var(--sp-6) var(--sp-8) !important;
  box-shadow:none !important;
  animation:kal-masuk-penuh .2s ease;
}
@keyframes kal-masuk-penuh{ from{ opacity:.7; transform:scale(.995); } to{ opacity:1; transform:none; } }

.kal.is-penuh .kal-grid{
  min-height:calc(100vh - 240px);
}
.kal.is-penuh .kal-hari{
  min-height:120px;
}
.kal.is-penuh .kal-nav{
  position:sticky; top:0; z-index:10;
  background:var(--bg); padding:var(--sp-2) 0;
}

.kal-btn-penuh{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-12); font-weight:600;
  border:1.5px solid var(--line-strong);
  background:var(--bg-raised);
}
.kal-btn-penuh:hover{
  background:var(--tag-bg); color:var(--accent);
}

@media (max-width:575px){
  .kal.is-penuh{
    padding:var(--sp-2) var(--sp-2) var(--sp-6) !important;
  }
  .kal.is-penuh .kal-grid{
    min-height:auto;
  }
  .kal.is-penuh .kal-hari{
    min-height:64px;
  }
}

/* Aturan per hari (Pola Kerja 4104): chip hari + 3 kolom jam; HP 2 kolom */
.hari-baris{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 var(--sp-3); align-items:end; padding-top:var(--sp-2); border-top:1px solid var(--line); }
@media (max-width:575px){ .hari-baris{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .hari-baris > :first-child{ grid-column:1 / -1; } }

/* Kepala halaman yang diikuti tab: rapatkan jarak ke tab (tanpa ruang kosong) */
.page-header:has(+ .tabs){ margin-bottom:var(--sp-3); }

/* AppSheet sebagai panel samping kanan di laptop/tablet (ringkasan lokasi dari tab Diterapkan ke); HP tetap bottom sheet */
@media (min-width:768px){
  .app-sheet.sheet-samping{ left:auto; right:0; top:0; bottom:0; width:420px; max-width:100vw; margin:0; max-height:none; border-radius:0; transform:translateX(100%); }
  .app-sheet.sheet-samping.show{ transform:none; }
  .app-sheet.sheet-samping .app-sheet-grip{ display:none; }
}

/* Absen Tim (4213): 2 kartu terpisah (daftar anggota | foto grup + kirim); HP satu kolom, laptop sejajar grid .absen-tata */
.absen-tab{ max-width:1040px; margin:0 auto; }
.absen-tab > .tab-list{ margin-bottom:var(--sp-4); }
.absen-tim{ display:grid; gap:var(--sp-4); }
.absen-tim > :only-child{ grid-column:1 / -1; }
.absen-tim-kepala{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); }
.absen-tim-jenis{ display:flex; width:100%; margin:0 0 var(--sp-3); }
.absen-tim-jenis label{ flex:1; }
.absen-tim-jenis span{ width:100%; justify-content:center; gap:var(--sp-2); min-height:40px; }
.absen-tim-semua{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-13); color:var(--text-dim); cursor:pointer; }
.absen-tim-semua span{ flex:1; }
.absen-tim-semua b{ font-weight:600; color:var(--accent); white-space:nowrap; }
.absen-tim-daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.absen-tim-daftar li + li{ border-top:1px solid var(--line); }
.absen-tim-daftar label{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); cursor:pointer; min-height:56px; transition:background .15s; }
.absen-tim-daftar label:hover{ background:var(--bg-alt); }
.absen-tim-daftar label:has(input:checked){ background:var(--tag-bg); }
.absen-tim-daftar label:has(input:disabled){ cursor:default; }
.absen-tim-daftar label:has(input:disabled) .avatar, .absen-tim-daftar label:has(input:disabled) .absen-tim-nama{ opacity:.55; }
.absen-tim-daftar input, .absen-tim-semua input{ width:18px; height:18px; flex:none; accent-color:var(--accent); }
.absen-tim-nama{ flex:1; min-width:0; display:flex; flex-direction:column; }
.absen-tim-nama b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.absen-tim-daftar .pill{ flex:none; }
.absen-tim-kirim{ display:flex; flex-direction:column; gap:var(--sp-3); }
.absen-tim-kirim .absen-panel-judul{ margin:0; }
.absen-tim-foto{ position:relative; overflow:hidden; width:100%; aspect-ratio:4 / 3; max-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1); padding:0;
  border:1.5px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); color:var(--text); font:inherit; font-size:var(--fs-14); font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
.absen-tim-foto i{ width:56px; height:56px; display:grid; place-items:center; margin-bottom:var(--sp-1); border-radius:50%; background:var(--tag-bg); color:var(--accent); font-size:22px; }
.absen-tim-foto small{ font-size:var(--fs-12); font-weight:400; color:var(--text-dim); }
.absen-tim-foto:hover{ border-color:var(--accent); }
.absen-tim-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.absen-tim-foto.ada{ border-style:solid; }
.absen-tim-foto.ada i, .absen-tim-foto.ada small{ display:none; }
.absen-tim-foto.ada span{ position:absolute; left:0; right:0; bottom:0; padding:var(--sp-2); background:color-mix(in srgb, var(--teal-900) 70%, transparent); color:var(--cream-50); font-size:var(--fs-13); }
.absen-tim-tombol{ min-height:48px; gap:var(--sp-2); font-size:var(--fs-14); font-weight:700; }
.absen-tim-catatan{ margin:0; text-align:center; }
@media (min-width:992px){
  .absen-tim{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
  .absen-tim-kirim{ position:sticky; top:var(--sp-4); }
}

/* ============ Undangan akun pegawai (undangan-akun.js, E1) ============ */
.sheet-undangan .undangan-selesai{ flex:1 1 auto; }
.undangan-aksi{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-2); margin-top:var(--sp-3); }
.undangan-aksi .btn{ min-width:0; justify-content:center; gap:var(--sp-2); padding-inline:var(--sp-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.undangan-aksi .btn i{ flex:none; }
.undangan-pratinjau{ display:block; width:100%; margin-top:var(--sp-2); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-alt); color:var(--text); font-family:inherit; font-size:var(--fs-14); line-height:1.5; white-space:pre-wrap; resize:vertical; min-height:180px; max-height:38vh; }
.undangan-email{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); }
.undangan-email.is-ok{ color:var(--success-600); }
.undangan-daftar{ list-style:none; margin:var(--sp-2) 0 0; padding:0; }
.undangan-baris{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.undangan-baris-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.undangan-baris-aksi{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.mulai-hris{ margin-bottom:var(--sp-4); }
.mulai-hris-daftar{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; gap:var(--sp-1); }
.mulai-hris-daftar a{ display:flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-2); border-radius:var(--radius-sm); color:var(--text); text-decoration:none; }
.mulai-hris-daftar li{ display:flex; align-items:center; gap:var(--sp-1); min-width:0; }
.mulai-hris-daftar li > a:first-child{ flex:1; min-width:0; }
.mulai-hris-daftar li > span:first-child{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-2); color:var(--text-dim); }
.mulai-hris-daftar a.mulai-hris-cara{ flex:none; padding:0 var(--sp-2); font-size:.8125rem; color:var(--text-dim); text-decoration:underline; }
.mulai-hris-daftar a:hover{ background:var(--bg-alt); }
.mulai-hris-daftar .is-selesai{ color:var(--text-dim); text-decoration:line-through; }
.mulai-hris-daftar .is-selesai i{ color:var(--success-600); }
.mulai-hris-daftar i{ width:20px; text-align:center; color:var(--text-dim); }
@media (min-width:992px){ .mulai-hris-daftar{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* ---- Keuangan · Pengaturan (KU5): kartu kesiapan, pasangan bulan/tahun, tabel pemetaan akun ---- */
.kes-kartu .alert{ margin:var(--sp-3) 0; }
.kes-daftar{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.kes-butir{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.kes-butir .pill{ flex:none; min-width:84px; justify-content:center; }
.kes-saldo{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.form-baris-2{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--sp-2); }
.pmt-daftar{ display:grid; margin-top:var(--sp-3); }
.pmt-baris{ display:grid; grid-template-columns:minmax(180px,2fr) minmax(240px,3fr) 110px; gap:var(--sp-3); align-items:center; padding:var(--sp-3) 0; border-top:1px solid var(--line); }
.pmt-baris .form-field{ margin:0; }
.pmt-kode{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pmt-kode b{ font-family:'IBM Plex Mono'; font-size:12.5px; overflow-wrap:anywhere; }
.pmt-kepala{ border-top:0; padding:0 0 var(--sp-2); font-size:12.5px; font-weight:600; color:var(--text-dim); }
@media (max-width: 575px){
  .pmt-kepala{ display:none; }
  .pmt-baris{ grid-template-columns:minmax(0,1fr); gap:var(--sp-2); margin-bottom:var(--sp-2); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt); }
  .kes-butir .pill{ min-width:72px; }
  .kes-saldo{ flex-direction:column; align-items:stretch; }
}

/* ---- Keuangan · Daftar Akun (KU6): akun induk = pemisah kelompok, akun posting menjorok (laptop/tablet), akun nonaktif redup ---- */
.tabel-kartu tr.akn-redup td:not([data-label="Aksi"]){ opacity:.6; }
@media (min-width:576px){
  .tabel-kartu tr.akn-induk td{ background:var(--bg-alt); }
  .tabel-kartu tr.akn-anak td[data-label="Nama"]{ padding-left:var(--sp-6); }
}

/* ---- Keuangan · Jurnal Umum (KU7): kartu jumlah tanpa ikon → tanpa ruang ikon; HP: label & keterangan boleh membungkus ---- */
.jrn-jumlah .stat-body > .stat-label, .jrn-jumlah .stat-body > .stat-value{ padding-right:0; }
@media (max-width: 575px){
  .jrn-jumlah .stat-label, .jrn-jumlah .stat-sub{ white-space:normal; }
}

/* ---- Keuangan · Kas Masuk & Keluar (KU9 Tahap 3): kartu ringkas tanpa ikon; rincian kas memakai grid .jrn-* dengan kolom Akun · (Proyek) · Uraian · Nominal ---- */
.kas-kartu .stat-body > .stat-label, .kas-kartu .stat-body > .stat-value{ padding-right:0; }
@media (max-width: 575px){
  .kas-kartu .stat-label, .kas-kartu .stat-sub{ white-space:normal; }
}
.kas-hitung{ display:flex; align-items:center; gap:var(--sp-2); }
.kas-hitung input{ flex:1; min-width:0; text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; }
.kas-hitung .btn{ flex:none; white-space:nowrap; }
@media (min-width: 992px){
  .kas-form .jrn-kepala, .kas-form .jrn-baris{ grid-template-columns:minmax(240px,2.4fr) minmax(160px,1.8fr) 170px 32px; }
  .kas-form.jrn-kp .jrn-kepala, .kas-form.jrn-kp .jrn-baris{ grid-template-columns:minmax(200px,2fr) minmax(130px,1.1fr) minmax(140px,1.6fr) 160px 32px; }
}

/* ---- Keuangan · Rekening Kas & Bank (KU9): kartu ringkas tanpa ikon (seperti Jurnal Umum), rekening nonaktif redup ---- */
.rek-jumlah .stat-body > .stat-label, .rek-jumlah .stat-body > .stat-value{ padding-right:0; }
.tabel-kartu tr.rek-redup td:not([data-label="Aksi"]){ opacity:.6; }
.tabel-kartu tr.pm-redup td:not([data-label="Aksi"]){ opacity:.6; } /* KU10 Pemasok nonaktif */
@media (max-width: 575px){
  .rek-jumlah .stat-label, .rek-jumlah .stat-sub{ white-space:normal; }
}

/* ---- Keuangan · Form Jurnal Umum (KU7 2b): baris jurnal = grid (laptop) / kartu 2 kolom (tablet) / kartu bertumpuk (HP);
   kolom Proyek hanya jurnal Kantor Pusat (.jrn-kp); total & selisih juga tampil di bar sticky ---- */
.jrn-form:not(.jrn-kp) [data-jrn-kol-proyek]{ display:none; }
.jrn-tabel{ gap:0; }
.jrn-kepala{ display:none; }
.jrn-baris{ position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--sp-3); padding:var(--sp-3); margin-bottom:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius-md); }
.jrn-baris .form-field{ margin-bottom:var(--sp-2); min-width:0; }
.jrn-k-akun, .jrn-k-proyek, .jrn-k-ket{ grid-column:1 / -1; }
.jrn-k-akun{ padding-right:40px; }
.jrn-baris input[data-rupiah]{ text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; }
.jrn-hapus{ position:absolute; top:var(--sp-2); right:var(--sp-3); }
.jrn-teks-hp{ display:none; }
.jrn-penyeimbang{ align-items:center; background:var(--bg-alt); border-style:dashed; }
.jrn-penyeimbang > span:empty{ display:none; }
.jrn-py-akun{ display:flex; flex-direction:column; gap:2px; grid-column:1 / -1; }
.jrn-bawah{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-2); }
.jrn-total{ margin-bottom:0; }
.jrn-total dl{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin:0; }
.jrn-total dl > div{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:2px; }
.jrn-total dt{ font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.jrn-total dd{ margin:0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.jrn-tidak-seimbang dd, .jrn-status.jrn-status-galat{ color:var(--danger-600); }
.jrn-ambang{ margin-top:var(--sp-3); }
.jrn-aksi{ align-items:center; flex-wrap:wrap; }
/* Detail Jurnal (KU7 2c): tabel baris angka rata kanan (di luar .ts), keterangan di atas tabel, kartu Rincian berjarak. */
.jrn-detail-tabel .kol-angka{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jrn-detail .dk-kartu + .pg-detail-grid{ margin-top:var(--sp-4); }
.jrn-detail .dk-kartu > .tx-small{ margin:0 0 var(--sp-3); }
.jrn-status{ margin-right:auto; font-size:12.5px; color:var(--text-dim); }
@media (min-width: 992px){
  .jrn-kepala, .jrn-baris{ grid-template-columns:minmax(220px,2.2fr) 150px 150px minmax(140px,1.6fr) 32px; gap:var(--sp-2); }
  .jrn-kp .jrn-kepala, .jrn-kp .jrn-baris{ grid-template-columns:minmax(200px,2fr) minmax(130px,1.1fr) 140px 140px minmax(130px,1.4fr) 32px; }
  .jrn-kepala{ display:grid; padding-bottom:var(--sp-2); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
  .jrn-kepala .kol-angka{ text-align:right; }
  .jrn-baris{ align-items:start; margin:0; padding:var(--sp-2) 0; border:0; border-bottom:1px solid var(--line); border-radius:0; }
  .jrn-baris .form-field{ margin-bottom:0; }
  .jrn-k-akun, .jrn-k-proyek, .jrn-k-ket, .jrn-py-akun{ grid-column:auto; }
  .jrn-k-akun{ padding-right:0; }
  .jrn-baris [data-jrn-label]{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .jrn-hapus{ position:static; margin-top:7px; }
  .jrn-penyeimbang{ padding:var(--sp-2); border-radius:var(--radius-sm); border:1px dashed var(--line-strong); }
  .jrn-penyeimbang > span:empty{ display:block; }
}
@media (max-width: 575px){
  .jrn-bawah > .btn{ width:100%; }
  .jrn-total, .jrn-total dl{ width:100%; }
  .jrn-total dl{ justify-content:space-between; gap:var(--sp-2); }
  .jrn-total dd{ font-size:13.5px; }
  .jrn-status{ order:-1; flex-basis:100%; margin:0; text-align:center; }
  .jrn-aksi [data-kembali]{ flex:0 0 44px; padding:0; }
  .jrn-aksi [data-kembali] .btn-teks{ display:none; }
  .jrn-aksi .btn{ min-width:0; padding:0 var(--sp-3); white-space:nowrap; }
  .jrn-teks-hp{ display:inline; }
}

/* ---- Keuangan · Buku Besar & Neraca Saldo (KU8): baris saldo awal/akhir, filter Neraca Saldo, kepala laporan ---- */
.ts .simple-table tr.bkb-saldo{ background:var(--tag-bg); }
.ts .simple-table tr.bkb-saldo td{ font-weight:700; }
.nrs-filter{ margin-bottom:var(--sp-3); padding:var(--sp-3); min-width:0; }
/* Filter laporan (audit 2B, K-06/V-04): medan .form-field dalam grid rata bawah; centang + Terapkan satu baris di bawahnya. */
.nrs-filter-isi{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); align-items:end; gap:var(--sp-3); }
.nrs-filter-isi > .form-field{ margin-bottom:0; min-width:0; }
.nrs-filter-isi > .btn{ justify-self:start; }
.nrs-filter-isi .combo-input > input[type=text]{ height:auto; min-height:0; padding-top:10px; padding-bottom:10px; font-size:13.5px; background:var(--bg); border:1.5px solid var(--line); box-shadow:none; }   /* setinggi & selatar medan .form-field lain */
.nrs-filter-pilihan{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.nrs-filter-pilihan .btn-primary{ margin-left:auto; }
.nrs-kepala{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
.alert + .alert{ margin-top:var(--sp-2); }
@media (max-width: 575px){
  .nrs-filter-isi{ grid-template-columns:1fr; }
  .nrs-filter-isi .btn{ width:100%; justify-content:center; margin-left:0; }
  .nrs-filter-pilihan .check-chip{ flex:1 1 100%; }
}

/* ---- Keuangan · Form Tagihan & Termin (KU10 4B): Termin/uang muka tanpa kolom akun; rincian hitung memakai .jrn-total ---- */
@media (min-width: 992px){
  .tag-tanpa-akun .jrn-kepala, .tag-tanpa-akun .jrn-baris{ grid-template-columns:minmax(240px,1fr) 190px 32px; }
}
.tag-form .field-hint[data-tag-saldo-um], .tag-form .field-hint[data-tag-progres], .tag-form .field-hint[data-tag-kual], .tag-form .field-hint[data-tag-ppn-hint]{ margin-top:4px; }

/* ---- Keuangan · Susun jadwal piutang (KU15 §6d): kolom Jenis · Jatuh tempo · Nominal · Keterangan · Status; panel Buat cicilan ---- */
.jdw-tombol{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.jdw-status{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.jdw-terkunci{ background:var(--bg-alt); }
.jdw-form .jrn-hapus[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.jdw-cicilan{ margin-top:var(--sp-3); padding:var(--sp-3); background:var(--bg-alt); }
.jdw-cicilan > .tx-h3{ margin:0 0 var(--sp-1); }
.jdw-cicilan > .tx-small{ margin:0 0 var(--sp-3); }
.jdw-cicilan .jdw-tombol{ margin-top:var(--sp-2); }
@media (max-width: 991px){
  .jdw-form .jdw-k-jt{ padding-right:40px; }
  .jdw-form .jrn-baris .jrn-k-ket{ order:1; }
}
@media (min-width: 992px){
  .jdw-form .jrn-kepala, .jdw-form .jrn-baris{ grid-template-columns:150px 150px 170px minmax(160px,1fr) 160px 32px; }
  .jdw-status{ padding-top:7px; }
}
@media (max-width: 575px){
  .jdw-tombol{ width:100%; }
  .jdw-tombol .btn{ flex:1; }
}

/* ---- Keuangan · Tutup Periode (KU13 T2): daftar periksa syarat, aksi tutup/buka kembali, riwayat ---- */
.tp-kartu{ margin-bottom:var(--sp-3); padding:var(--sp-3); }
.tp-kartu > .tx-h2{ margin:0 0 var(--sp-2); }
.tp-syarat{ list-style:none; margin:0; padding:0; }
.tp-s{ display:flex; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.tp-s:last-child{ border-bottom:0; }
.tp-ikon{ flex:none; width:20px; margin-top:2px; text-align:center; }
.tp-ok .tp-ikon{ color:var(--success-600); }
.tp-gagal .tp-ikon{ color:var(--danger-600); }
.tp-peringatan .tp-ikon{ color:#B7791F; }
.tp-isi{ min-width:0; flex:1; }
.tp-judul{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2); }
.tp-pesan{ margin-top:2px; overflow-wrap:anywhere; }
.tp-dok{ list-style:none; margin:var(--sp-1) 0 0; padding:0; font-size:13px; }
.tp-dok li{ padding:2px 0; overflow-wrap:anywhere; }
.tp-semua{ margin-top:var(--sp-1); }
.tp-penutup{ margin-top:var(--sp-3); }
.tp-aksi{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-top:var(--sp-3); }
.tp-riwayat{ list-style:none; margin:0; padding:0; }
.tp-riwayat li{ padding:var(--sp-1) 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.tp-riwayat li:last-child{ border-bottom:0; }
@media (max-width: 575px){
  #tpAksi{ position:sticky; bottom:0; z-index:5; margin:var(--sp-3) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)); padding:var(--sp-2) var(--sp-3); background:var(--bg-raised); border-top:1px solid var(--line); }
  #tpAksi .btn{ width:100%; }
}
.tp-s .pill-warn{ color:var(--text); }
.tp-centang{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-md); font-size:13px; font-weight:500; color:var(--text); cursor:pointer; }

/* ============ KANBAN (papan tahap; pertama dipakai CRM Pipeline) ============
   .kanban > .kanban-kolom[data-tahap] > .kanban-kepala + .kanban-isi > .kanban-kartu; .kanban-sorot = placeholder seret (jQuery UI sortable).
   Laptop/tablet: kolom berdampingan, papan bergulir mendatar di DALAM kartu (halaman tidak ikut melebar). HP ≤575: satu kolom
   (.is-aktif) dipilih lewat .kanban-pilih; pindah tahap lewat tombol kartu (tanpa seret). */
.kanban-pilih{ display:none; margin-bottom:var(--sp-3); }
.kanban-saring{ margin-bottom:var(--sp-3); }   /* kartu cari/saring di atas papan */
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-2); align-items:start; overscroll-behavior-x:contain; }
.kanban-kolom{ display:flex; flex-direction:column; min-width:0; max-height:calc(100vh - 240px); max-height:calc(100dvh - 240px); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md); }
.kanban-kepala{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-3); font-weight:700; font-size:var(--fs-13); }
.kanban-jumlah{ font-family:'IBM Plex Mono'; font-size:var(--fs-12); color:var(--text-dim); }
.kanban-isi{ flex:1; min-height:96px; overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-2); padding:0 var(--sp-2) var(--sp-2); }
.kanban-kartu{ display:block; padding:var(--sp-3); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); font-size:var(--fs-13); color:var(--text); text-decoration:none; }
.kanban.bisa-seret .kanban-kartu{ cursor:grab; }
.kanban-kartu:hover, .kanban-kartu:focus-visible{ border-color:var(--accent-soft); outline:none; }
.kanban-kartu b{ display:block; font-size:var(--fs-13); overflow-wrap:anywhere; }
.kanban-kartu .tx-small{ display:block; margin-top:2px; color:var(--text-dim); }
.kanban-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--sp-2); }
.kanban-waktu{ font-family:'IBM Plex Mono'; font-size:var(--fs-12); color:var(--text-dim); }
.kanban-kartu.is-telat .kanban-waktu{ color:var(--danger-600); font-weight:600; }
.kanban-kartu .kanban-pindah{ display:none; }
.kanban-sorot{ min-height:72px; border:2px dashed var(--accent-soft); border-radius:var(--radius-sm); background:var(--tag-bg); }
.kanban-kartu.ui-sortable-helper{ box-shadow:var(--shadow); transform:rotate(1deg); }
.kanban-lagi{ margin:0 var(--sp-2) var(--sp-2); }
.kanban-kosong{ padding:var(--sp-3); text-align:center; font-size:var(--fs-12); color:var(--text-dim); }
@media (max-width: 575px){
  .kanban-pilih{ display:block; }
  .kanban{ display:block; overflow:visible; }
  .kanban-kolom{ display:none; max-height:none; }
  .kanban-kolom.is-aktif{ display:flex; }
  .kanban-kartu .kanban-pindah{ display:inline-flex; margin-top:var(--sp-2); }
}

/* ---------- CRM Iklan & Pengaturan CRM (acuan docs/konsep-erp/crm/template-crm-v2.html) ----------
   Tab bernomor (.tab-no, .tab-hitung) · "Cara kerja" (.cara-kerja) · saklar checkbox (.saklar) · pilihan tautan bersegmen (.seg-tautan)
   · kode mono (.kode-chip) · bilah kualitas A/B/C/TV/Belum (.bilah-kualitas) · bilah corong (.bc-baris) · kartu validasi (.ak-validasi)
   · pohon kampanye (.pohon-iklan) · rantai tahap (.jalur-chip, .alur-corong) · daftar periksa (.daftar-periksa) · kartu pengaturan (.kartu-set)
   · kepala halaman bersusun di HP (.page-header-susun) · zona unggah (.zona-unggah) · langkah bergaris (.stepper-garis) · awalan input "Rp" (.input-awalan) · baris label–nilai (.nilai-baris) · agen beravatar mini (.agen-sel, .avatar-xs) · pill bergaris (.pill-garis) · bagian lipat detail (details.ld-bagian) · baris lewat tempo (tr.is-telat) · chip opsi kriteria (.opsi-chip) · pilihan pratinjau (.pn-pilih) · baris bertingkat tabel (.tingkat-1/2)
   · pesan massal (.pm-grid, .ph-chips, .msg-preview, .msg-bubble, .audience-box) · kartu koneksi (.conn-card) · langkah berulang (.repeater) · ringkasan komisi (.km-ringkas) · QR event (.qr-wrap, .qr-kotak) · bintang rating (.bintang, .bintang-input) · Kamus Istilah (.kamus-grid, .kamus-daftar)
   · AI Copilot (.ai-fab tombol mengambang, AppSheet .sheet-kanan = panel kanan di laptop, .ai-chat, .ai-msg, .ai-contoh, .ai-input, .reco-item, .ai-insight). */
.tab-no{ flex:none; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:var(--radius-full); background:var(--tag-bg); font-size:11px; font-weight:700; color:var(--text-dim); }
.tab-btn.active .tab-no{ background:var(--tag-bg); color:var(--accent); }
.tab-hitung{ flex:none; display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full); background:var(--warning-600); color:var(--ink-900); font-size:10.5px; font-weight:700; }
.cara-kerja{ margin:6px 0 0; font-size:13px; }
.page-header + .cara-kerja{ margin:calc(var(--sp-2) - var(--sp-6)) 0 var(--sp-4); }   /* "Cara kerja" di bawah kepala halaman: keterangan .tx-small tetap elemen terakhir blok judul (sebaris tombol .page-aksi) */
.cara-kerja > summary{ display:inline-flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; color:var(--accent-soft); font-weight:600; list-style:none; }
.cara-kerja > summary::-webkit-details-marker{ display:none; }
.cara-kerja > summary::after{ content:'\f107'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:11px; transition:transform .15s ease; }
.cara-kerja[open] > summary::after{ transform:rotate(180deg); }
.cara-kerja > div{ margin-top:6px; padding:12px 14px; max-width:860px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text-dim); line-height:1.55; }
.saklar{ position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.saklar input{ position:absolute; width:1px; height:1px; opacity:0; }
.saklar-jalur{ position:relative; flex:none; width:42px; height:24px; border-radius:var(--radius-full); background:var(--line-strong); transition:background .15s ease; }
.saklar-jalur::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease; }
.saklar input:checked + .saklar-jalur{ background:var(--accent); }
.saklar input:checked + .saklar-jalur::after{ transform:translateX(18px); }
.saklar input:focus-visible + .saklar-jalur{ box-shadow:0 0 0 3px var(--tag-bg); }
.saklar input:disabled + .saklar-jalur{ opacity:.5; cursor:not-allowed; }
.seg-tautan{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:var(--radius-full); background:var(--tag-bg); }
.seg-tautan > a, .seg-tautan > button{ display:inline-flex; align-items:center; min-height:34px; padding:0 13px; border:none; border-radius:var(--radius-full); background:none; font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; cursor:pointer; }
.seg-tautan > .is-aktif{ background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-sm); }
.kode-chip{ display:inline-block; padding:3px 8px; border-radius:6px; background:var(--tag-bg); font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; white-space:nowrap; }
.bilah-kualitas{ display:flex; height:10px; min-width:60px; border-radius:var(--radius-full); overflow:hidden; background:var(--tag-bg); }
.bilah-kualitas > span{ display:block; height:100%; }
.bk-a{ background:var(--success-600); } .bk-b{ background:var(--info-600); } .bk-c{ background:var(--line-strong); } .bk-tv{ background:var(--danger-600); }
.bk-belum{ background:repeating-linear-gradient(135deg, var(--line-strong) 0 3px, transparent 3px 6px); }
.bilah-legenda{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 0; font-size:12.5px; }
.bilah-legenda > span > i{ display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:3px; vertical-align:-1px; }
.bc-judul{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:14px 0 6px; font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.bc-baris{ display:grid; grid-template-columns:minmax(90px,170px) minmax(0,1fr) 92px 64px; align-items:center; gap:12px; padding:4px 0; }
.bc-label{ text-align:right; font-size:13px; } .bc-label small{ display:block; font-family:'IBM Plex Mono'; font-size:10px; color:var(--text-dim); }
.bc-jalur{ height:18px; border-radius:4px; background:var(--tag-bg); overflow:hidden; }
.bc-isi{ height:100%; min-width:3px; background:var(--info-600); }
.bc-baris.is-crm .bc-isi{ background:var(--warning-600); }
.bc-nilai{ text-align:right; font-family:'IBM Plex Mono'; font-weight:600; }
.bc-rasio{ text-align:right; font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim); }
.bc-pemisah{ margin:14px 0 4px; padding-top:10px; border-top:1px dashed var(--line-strong); font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.05em; text-transform:uppercase; text-align:center; color:var(--text-dim); }
.ak-validasi{ border-left:4px solid var(--success-600); }
.ak-validasi.is-danger{ border-left-color:var(--danger-600); background:color-mix(in srgb, var(--danger-100) 70%, var(--bg-raised)); }
.ak-validasi.is-info{ border-left-color:var(--info-600); }
.ak-angka{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:10px 0; }
.ak-angka > div{ min-width:0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-alt); }
.ak-angka span{ display:block; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.ak-angka b{ display:block; margin:2px 0; font-family:'Plus Jakarta Sans'; font-size:24px; }
.ak-selisih{ font-family:'IBM Plex Mono'; font-weight:700; }
.ak-validasi.is-danger .ak-selisih{ color:var(--danger-600); }
.pohon-iklan, .pohon-iklan ul{ list-style:none; margin:0; padding:0; }
.pohon-iklan ul{ margin-left:6px; padding-left:16px; border-left:1px solid var(--line); }
.pohon-iklan summary{ list-style:none; cursor:pointer; }
.pohon-iklan summary::-webkit-details-marker{ display:none; }
.pohon-baris{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; }
.pohon-panah{ flex:none; width:14px; padding-top:3px; font-size:11px; color:var(--text-dim); transition:transform .15s ease; }
.pohon-iklan details[open] > summary .pohon-panah{ transform:rotate(90deg); }
.pohon-tipe{ flex:none; min-width:62px; padding-top:3px; font-family:'IBM Plex Mono'; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.pohon-isi{ flex:1; min-width:0; }
.pohon-isi > .tx-small{ display:block; font-family:'IBM Plex Mono'; font-size:11px; }
.pohon-nama{ padding:0; border:none; background:none; font:inherit; font-weight:600; color:var(--text); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.pohon-nama:hover, .pohon-nama:focus-visible{ color:var(--accent-soft); text-decoration:underline; }
.pohon-aksi{ display:flex; flex:none; gap:2px; opacity:0; transition:opacity .15s ease; }
.pohon-baris:hover .pohon-aksi, .pohon-aksi:focus-within{ opacity:1; }
.pohon-aksi .btn{ width:32px; height:32px; padding:0; justify-content:center; }
@media (hover:none){ .pohon-aksi{ opacity:1; } }
.jalur-chip{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px; }
.jalur-chip > span{ padding:3px 9px; border-radius:var(--radius-full); background:var(--tag-bg); font-family:'IBM Plex Mono'; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.jalur-chip > i, .alur-corong > i{ font-size:10px; color:var(--text-dim); }
.alur-corong{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ac-chip{ display:inline-flex; align-items:baseline; gap:6px; padding:7px 12px; border-radius:var(--radius-full); background:var(--info-100); font-size:13px; font-weight:600; }
.ac-chip small{ font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:500; color:var(--text-dim); }
.ac-chip.is-server{ background:var(--success-100); } .ac-chip.is-metrik{ background:var(--tag-bg); }
.ac-chip.is-crm{ background:var(--bg-raised); border:1px solid var(--line-strong); }
.ac-chip.is-mati{ background:var(--tag-bg); opacity:.55; text-decoration:line-through; }
.daftar-periksa{ list-style:none; margin:0; padding:0; }
.daftar-periksa li{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.daftar-periksa li:last-child{ border-bottom:none; }
.daftar-periksa input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); }
.daftar-periksa li.is-selesai > span{ color:var(--text-dim); text-decoration:line-through; }
.kartu-set{ display:flex; align-items:flex-start; gap:14px; padding:18px; color:inherit; text-decoration:none; transition:border-color .15s ease; }
a.kartu-set:hover, a.kartu-set:focus-visible{ border-color:var(--accent-soft); outline:none; }
.kartu-set-ikon{ flex:none; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:12px; background:var(--bg-alt); color:var(--text); }
.kartu-set h3{ margin:0 0 4px; font-size:14px; font-weight:700; }
.kartu-set p{ margin:0 0 10px; }
.kartu-set.is-kunci{ opacity:.6; }
.zona-unggah{ position:relative; display:block; padding:32px 16px; cursor:pointer; }
.form-field label.zona-unggah{ font-family:'Inter'; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text); }
.form-field .zona-unggah input[type=file]{ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; border:0; opacity:0; overflow:hidden; }
.zona-unggah.is-seret, .zona-unggah:focus-within{ border-color:var(--accent-soft); background:var(--tag-bg); }
.zona-unggah .fas{ font-size:20px; color:var(--accent-soft); }
.stepper-garis{ display:flex; gap:12px; margin:0 0 16px; padding:0; list-style:none; overflow-x:auto; }
.stepper-garis li{ flex:1 0 auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
.stepper-garis li b{ flex:none; display:grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--line-strong); border-radius:50%; font-size:11px; }
.stepper-garis li.is-aktif{ color:var(--text); font-weight:600; }
.stepper-garis li.is-aktif b{ border-color:var(--accent-soft); color:var(--accent-soft); box-shadow:0 0 0 3px var(--tag-bg); }
.stepper-garis li.is-selesai b{ border-color:var(--success-600); background:var(--success-600); color:#fff; }
.input-awalan{ display:flex; align-items:stretch; }
.input-awalan > span{ flex:none; display:grid; place-items:center; padding:0 10px; border-radius:var(--radius-sm) 0 0 var(--radius-sm); background:var(--accent); color:var(--bg-raised); font-size:12px; font-weight:700; }
.form-field .input-awalan input{ flex:1; min-width:0; border-top-left-radius:0; border-bottom-left-radius:0; }
.tingkat-1 > td:first-child{ padding-left:28px; } .tingkat-2 > td:first-child{ padding-left:48px; }
.tingkat-label{ display:block; font-family:'IBM Plex Mono'; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
tr.baris-belum > td{ background:var(--warning-100); }
.nilai-baris{ margin:0; }
.nilai-baris > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.nilai-baris > div:last-child{ border-bottom:none; }
.nilai-baris dt{ font-family:'Inter'; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text); } .nilai-baris dt small{ display:block; font-size:11.5px; text-transform:none; letter-spacing:0; color:var(--text-dim); }
.nilai-baris dd{ margin:0; text-align:right; font-family:'IBM Plex Mono'; font-weight:600; } .nilai-baris dd small{ display:block; font-size:10.5px; font-weight:400; color:var(--text-dim); }
details.card.ld-bagian{ padding:0; margin-bottom:var(--sp-3); }
details.ld-bagian > summary{ display:flex; align-items:center; gap:8px; min-height:52px; padding:14px 20px; cursor:pointer; list-style:none; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:15px; }
details.ld-bagian > summary::-webkit-details-marker{ display:none; }
/* Tag leads (CRM): baris chip di bawah nama (daftar) & di bawah kepala detail */
.ld-tagbaris{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:4px; }
.ld-tag-detail{ gap:6px; margin:0 0 var(--sp-3); }
.pill.pill-kecil{ padding:1px 7px; font-size:11px; line-height:1.5; }
/* Gabungkan leads ganda (CRM, sheet di detail leads): baris kandidat = pilihan Utama + centang Gabung + info */
.gb-daftar{ display:flex; flex-direction:column; gap:8px; }
.gb-baris{ display:grid; grid-template-columns:auto auto 1fr; gap:4px 14px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.gb-baris.is-utama{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.gb-baris label{ display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:var(--fs-13); font-weight:600; cursor:pointer; white-space:nowrap; }
.gb-baris label:has(input:disabled){ opacity:.45; cursor:not-allowed; }
.gb-info{ min-width:0; }
.gb-info .tx-small{ margin-top:2px; }
@media (max-width:767px){ .gb-baris{ grid-template-columns:auto auto; } .gb-info{ grid-column:1 / -1; } }
details.ld-bagian > summary .hint{ margin-left:auto; font-family:'Inter'; font-weight:400; font-size:12.5px; color:var(--text-dim); text-align:right; }
details.ld-bagian > summary::after{ content:'\f107'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:12px; color:var(--text-dim); transition:transform .15s ease; }
details.ld-bagian[open] > summary::after{ transform:rotate(180deg); }
details.ld-bagian > .ld-isi{ padding:0 20px 16px; }
.nilai-baris dd .btn{ margin-left:6px; }
.opsi-chip{ display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:2px 2px 2px 10px; border:1px solid var(--line); border-radius:var(--radius-full); background:var(--bg-raised); }
.opsi-chip input[type=text]{ flex:1 1 auto; min-width:60px; }
.pn-baris{ display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,1.3fr) auto; gap:10px; align-items:end; }
.opsi-chip input{ min-width:0; height:30px; padding:0 4px; border:none; border-radius:6px; background:transparent; font:inherit; font-size:13px; color:var(--text); }
.opsi-chip input:focus{ outline:none; background:var(--tag-bg); }
.opsi-chip input.opsi-poin{ width:44px; text-align:center; font-family:'IBM Plex Mono'; background:var(--bg-alt); }
.opsi-chip .btn{ width:28px; height:28px; padding:0; justify-content:center; }
.pn-pilih{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.pn-pilih button{ display:inline-flex; align-items:baseline; gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-full); background:var(--bg-raised); font:inherit; font-size:13px; color:var(--text); cursor:pointer; }
.pn-pilih button small{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--text-dim); }
.pn-pilih button.is-aktif{ border-color:var(--accent); background:var(--tag-bg); font-weight:600; }
tr.is-telat > td:first-child{ box-shadow:inset 3px 0 0 var(--danger-600); }
.agen-sel{ display:inline-flex; align-items:center; gap:8px; }
.avatar.avatar-xs{ width:24px; height:24px; font-size:10px; }
.agen-sel.is-kosong{ color:var(--danger-600); font-weight:700; } .agen-sel.is-kosong .avatar{ background:var(--danger-600); }
.pill.pill-garis{ background:none; border:1px dashed var(--line-strong); color:var(--text-dim); }
.titik-peringatan{ display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--warning-600); vertical-align:1px; }
.pm-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
@media (min-width: 992px){ .pm-grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } .pm-grid > div:last-child{ position:sticky; top:72px; } }
.pm-kaki{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:12px; }
.ph-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ph-chips button{ min-height:30px; padding:3px 10px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); background:none; color:var(--text); font-family:'IBM Plex Mono', monospace; font-size:var(--fs-12); cursor:pointer; }
.ph-chips button:hover{ border-color:var(--accent); background:var(--tag-bg); }
.msg-preview{ padding:14px; border-radius:var(--radius-md); background:var(--bg-alt); }
.msg-bubble{ max-width:420px; padding:10px 12px; border:1px solid var(--line); border-radius:12px 12px 12px 2px; background:var(--bg-raised); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.audience-box{ display:flex; align-items:flex-start; flex-wrap:nowrap; gap:10px; margin-top:12px; padding:12px 14px; border-radius:var(--radius-md); background:var(--info-100); color:var(--text); font-size:13px; }
.audience-box b{ font-family:'IBM Plex Mono', monospace; }
.conn-card{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:16px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-raised); }
.conn-card .conn-ic{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-full); background:var(--bg-alt); color:var(--text-dim); font-size:18px; }
.conn-card.is-on .conn-ic{ background:var(--success-100); color:var(--success-600); }
.conn-card .grow{ flex:1; min-width:200px; }
.km-ringkas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.km-kotak{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; }
.km-kotak b{ font-size:var(--fs-16); }
@media (max-width: 575px){ .km-ringkas{ grid-template-columns:1fr; gap:8px; } .km-kotak{ flex-direction:row; align-items:center; flex-wrap:wrap; } .km-kotak b{ margin-left:auto; } }
.qr-wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.qr-kotak{ flex:none; width:180px; height:180px; padding:8px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }
.qr-kotak svg{ display:block; width:100%; height:100%; }
.bintang{ display:inline-flex; gap:2px; color:var(--gold); font-size:13px; }
.bintang .is-mati{ color:var(--line-strong); }
.bintang-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.bintang-input input{ position:absolute; width:1px; height:1px; opacity:0; }
.bintang-input label{ display:grid; place-items:center; width:40px; height:40px; margin:0; font-size:26px; color:var(--line-strong); cursor:pointer; text-transform:none; letter-spacing:0; }
.bintang-input input:checked ~ label, .bintang-input label:hover, .bintang-input label:hover ~ label{ color:var(--gold); }
.bintang-input input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }
@media (max-width: 575px){ .qr-kotak{ width:100%; max-width:240px; height:auto; aspect-ratio:1; margin:0 auto; } }
.simple-table tr.baris-total > td{ background:var(--tag-bg); border-top:2px solid var(--line-strong); }
.kamus-alat{ display:flex; margin-bottom:var(--sp-3); }
.kamus-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); align-items:start; }
.kamus-grid > .card{ margin:0; }
.kamus-grid .tx-h3{ margin:0 0 4px; }
.kamus-daftar{ margin:0; }
.kamus-daftar > div{ padding:9px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.kamus-daftar > div:last-child{ border-bottom:0; }
.kamus-daftar dt{ font-weight:600; color:var(--text); }
.kamus-daftar dd{ margin:2px 0 0; font-size:var(--fs-13); color:var(--text-dim); line-height:1.5; }
.kamus-daftar > .kamus-sorot{ background:var(--tag-bg); border-radius:var(--radius-sm); padding-left:8px; padding-right:8px; }
@media (max-width: 575px){ .kamus-grid{ grid-template-columns:minmax(0,1fr); } }
.repeater{ display:flex; flex-direction:column; gap:10px; }
.repeater-row{ display:grid; grid-template-columns:110px minmax(0,1fr) 40px; gap:8px; align-items:end; padding:10px; border-radius:var(--radius-md); background:var(--bg-alt); }
.repeater-row .form-field{ margin:0; }
.repeater-row .form-field input, .repeater-row .form-field select{ background:var(--bg-raised); }
@media (max-width: 575px){
  .page-header.page-header-susun{ flex-wrap:wrap; }
  .pn-baris{ grid-template-columns:22px minmax(0,1fr) auto; }
  .pn-baris > .form-field:nth-of-type(2){ grid-column:2 / -1; }
  .seg-tautan{ flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .seg-tautan > a, .seg-tautan > button{ flex:none; }
  .page-header-susun > div:first-child{ flex:1 1 100%; }   /* judul panjang + tombol: tombol turun ke baris sendiri */
  .page-header-susun > .page-aksi{ margin-left:0; flex-wrap:wrap; }
  .bc-baris{ grid-template-columns:minmax(0,1fr) auto auto; gap:2px 10px; }
  .bc-label{ grid-column:1 / -1; text-align:left; }
  .bc-jalur{ grid-column:1 / 2; }
  .ak-angka b{ font-size:20px; }
  .tingkat-1 > td:first-child, .tingkat-2 > td:first-child{ padding-left:0; }
  .repeater-row{ grid-template-columns:minmax(0,1fr) 40px; }
  .repeater-row > .form-field:nth-child(2){ grid-column:1 / 2; }
  .repeater-row > .rm{ grid-row:1; grid-column:2; }
}

/* AI Copilot (konsep §10): tombol mengambang di semua layar CRM — gold kecil = satu-satunya aksen gold di luar tabel leads (§10). */
.ai-fab{ position:fixed; right:24px; bottom:24px; z-index:90; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:var(--radius-full); background:var(--accent); color:var(--bg-raised); font-size:22px; box-shadow:var(--shadow-lg); cursor:pointer; transition:transform .15s ease; }
.ai-fab:hover{ transform:translateY(-2px) scale(1.03); }
.ai-fab:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.ai-fab .ai-fab-titik{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:var(--radius-full); background:var(--gold); border:2px solid var(--bg-raised); }
body.panel-terbuka .ai-fab{ visibility:hidden; }
@media print{ .ai-fab{ display:none; } }
/* AppSheet varian panel kanan (laptop/tablet): tinggi penuh dari kanan; HP tetap bottom sheet. */
@media (min-width:768px){
  .app-sheet.sheet-kanan{ top:0; bottom:0; left:auto; right:0; width:min(460px, 100vw); max-height:none; margin-left:0; border-radius:0; transform:translateX(100%); }
  .app-sheet.sheet-kanan.show{ transform:none; }
  .app-sheet.sheet-kanan .app-sheet-grip{ display:none; }
  .app-sheet.sheet-kanan .app-sheet-kepala{ padding-top:var(--sp-2); }
}
.sheet-copilot .app-sheet-isi{ display:flex; flex-direction:column; padding:var(--sp-2) var(--sp-4) var(--sp-4); }
.sheet-copilot .dk-tabs{ display:flex; flex-direction:column; flex:1; min-height:0; }
.sheet-copilot .tab-panel{ padding-top:var(--sp-3); }
.ai-cakupan{ margin:0 0 var(--sp-2); }
.ai-teks p{ margin:0 0 8px; } .ai-teks p:last-child{ margin-bottom:0; }
.ai-teks ul, .ai-teks ol{ margin:4px 0 8px; padding-left:20px; } .ai-teks li{ margin:2px 0; }
.ai-sumber{ display:block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--text-dim); }
.ai-chat{ display:flex; flex-direction:column; gap:10px; }
.ai-msg{ max-width:88%; padding:10px 13px; border-radius:12px; font-size:var(--fs-13); line-height:1.5; overflow-wrap:anywhere; }
.ai-msg.user{ align-self:flex-end; background:var(--accent); color:var(--bg-raised); border-radius:12px 12px 2px 12px; white-space:pre-wrap; }
.ai-msg.bot{ align-self:flex-start; background:var(--bg-alt); color:var(--text); border-radius:12px 12px 12px 2px; }
.ai-msg.galat{ background:var(--danger-100, var(--bg-alt)); color:var(--danger-600); }
.ai-msg .btn{ margin-top:8px; }
.ai-contoh{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 10px; }
.ai-contoh button{ min-height:32px; padding:4px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-full); background:var(--bg-raised); color:var(--text); font-size:12px; cursor:pointer; }
.ai-contoh button:hover{ border-color:var(--accent-soft); }
.ai-input{ display:flex; gap:8px; align-items:flex-end; }
.ai-input .form-field{ flex:1; margin:0; }
.ai-input textarea{ min-height:42px; max-height:140px; resize:none; }
.ai-input .btn{ flex:none; height:42px; }
.reco-item{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px 0; border-bottom:1px solid var(--line); }
.reco-item:last-of-type{ border-bottom:0; }
.reco-item .reco-t{ font-size:var(--fs-13); line-height:1.5; }
.ai-insight .ai-draf{ margin:6px 0 0; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-alt); font-size:var(--fs-13); white-space:pre-wrap; }
.ai-insight .ai-aksi{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
@media (max-width:767px){
  body:has(#footerMenu) .ai-fab{ bottom:calc(64px + 12px + env(safe-area-inset-bottom) + 12px); }
  .ai-fab{ right:16px; bottom:16px; width:52px; height:52px; }
  .ai-msg{ max-width:94%; }
  body:has(.ai-fab) .app-content{ padding-bottom:calc(64px + 12px + env(safe-area-inset-bottom) + 24px + 64px); }   /* baris terakhir bisa digulir ke atas tombol AI */
}
@media (min-width:768px){ body:has(.ai-fab) .sticky-actions{ padding-right:96px; } }   /* tombol Simpan di bilah lekat tidak tertutup tombol AI (pojok kanan bawah) */
@media (prefers-reduced-motion: reduce){ .ai-fab{ transition:none; } }

/* ============ Notifikasi: lonceng header + halaman (AppNotif, app.js) ============ */
.hdr-lonceng{ position:relative; }
.notif-badge{ position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full); background:var(--danger-600); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--bg-raised); pointer-events:none; }
.notif-badge[hidden]{ display:none; }
.notif-pop{ width:380px; max-width:calc(100vw - 24px); padding:0; overflow:hidden; }
.notif-pop.show{ display:flex; flex-direction:column; max-height:min(70vh, 560px); }
.notif-kepala{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.notif-pop-judul{ margin:0; font-size:var(--fs-14); font-weight:700; }
.notif-daftar{ flex:1 1 auto; overflow-y:auto; }
.notif-ajak{ display:flex; align-items:center; gap:8px; min-width:0; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--tag-bg); font-size:13px; color:var(--text); }
.notif-ajak > .fas{ color:var(--accent-soft); flex:none; }
.notif-ajak-teks{ flex:1 1 auto; min-width:0; }
.notif-ajak .btn{ flex:none; }
.notif-ajak-tutup{ width:32px; padding:0; justify-content:center; }
.notif-item{ display:flex; align-items:flex-start; gap:10px; min-height:var(--sentuh); padding:10px 12px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover, .notif-item:focus-visible{ background:var(--tag-bg); outline:none; }
.notif-item:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); }
.notif-item.is-baru{ background:var(--info-100); }
.notif-ikon{ flex:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-full); background:var(--tag-bg); color:var(--accent); font-size:14px; }
.notif-kat-persetujuan{ background:var(--warning-100); color:var(--warning-600); }
.notif-kat-kehadiran{ background:var(--info-100); color:var(--info-600); }
.notif-teks{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.notif-judul{ font-size:13.5px; font-weight:600; }
.notif-item.is-baru .notif-judul{ font-weight:700; }
.notif-isi{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font-size:12.5px; color:var(--text-dim); overflow-wrap:anywhere; }   /* lonceng: maks 2 baris; feed: penuh */
.notif-daftar-feed .notif-isi{ display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.notif-waktu{ font-size:11.5px; color:var(--text-dim); }
.notif-titik{ flex:none; width:8px; height:8px; margin-top:6px; border-radius:var(--radius-full); background:var(--info-600); }
.notif-kaki{ padding:4px; border-top:1px solid var(--line); }
.notif-kaki .menu-item{ justify-content:center; font-weight:600; color:var(--accent); }
.notif-memuat{ margin:0; padding:16px 12px; }
.notif-kosong{ padding:28px 16px; }
.sheet-notif .notif-kepala{ justify-content:flex-end; padding:0 0 8px; border-bottom:none; }
.sheet-notif .notif-item{ padding:12px 4px; }
.notif-feed{ max-width:820px; width:100%; min-width:0; }
.notif-feed .page-header .tx-small{ margin-top:var(--sp-1); }
.notif-feed-kartu{ padding:16px; min-width:0; }
.notif-saring{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; min-width:0; }
.notif-saring .seg-toggle{ margin-bottom:0; }
.notif-kat{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; max-width:100%; }
.notif-kat .chip-filter{ gap:6px; cursor:pointer; }
.notif-kat .chip-filter[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--bg-raised); }
.notif-daftar-feed .notif-item{ border-radius:var(--radius-sm); }
.notif-lagi-wrap{ display:flex; justify-content:center; margin-top:8px; }
/* Lembar detail (AppSheet; laptop = dialog tengah, HP = sheet bawah) */
@media (min-width:768px){ .app-sheet.sheet-notif-detail{ width:520px; margin-left:-260px; } }
.sheet-notif-detail .app-sheet-isi{ padding:var(--sp-3) var(--sp-4) var(--sp-4); min-width:0; }
.notif-detail{ min-width:0; }
.notif-detail-judul{ margin:0; font-size:var(--fs-16); font-weight:700; overflow-wrap:anywhere; }
.notif-detail-waktu{ margin:var(--sp-1) 0 0; font-size:var(--fs-12); color:var(--text-dim); }
.notif-detail-isi{ margin:var(--sp-3) 0 0; font-size:var(--fs-14); overflow-wrap:anywhere; white-space:pre-line; }
.notif-rincian{ display:grid; grid-template-columns:minmax(96px, 36%) minmax(0, 1fr); gap:0; margin:var(--sp-3) 0 0; border-top:1px solid var(--line); }
.notif-rincian dt, .notif-rincian dd{ margin:0; padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-13); overflow-wrap:anywhere; }
.notif-rincian dt{ padding-right:var(--sp-3); color:var(--text-dim); }
.notif-rincian dd{ font-weight:600; white-space:pre-line; }
.sheet-notif-detail .app-sheet-kaki{ justify-content:flex-end; }
@media (max-width:575px){ .notif-rincian{ grid-template-columns:minmax(0, 1fr); } .notif-rincian dt{ padding-bottom:0; border-bottom:none; } .notif-rincian dd{ padding-top:2px; } }
@media (max-width:767px){ .notif-pop.show{ display:none; } }   /* HP: AppSheet menggantikan dropdown */
@media (max-width:575px){
  .notif-feed-kartu{ padding:12px; }
  .notif-saring{ flex-direction:column; align-items:stretch; }
  .notif-saring .seg-toggle > label{ flex:1; text-align:center; }
  .notif-kat .chip-filter{ min-height:44px; }
}

/* -- Panel "Yang berlaku untuk pegawai ini" & tautan data terkait (Detail Pegawai) -- */
.bl-kepala{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-3); }
.bl-kepala .tx-h3{ margin:0; }
.bl-kepala .form-field{ margin:0; min-width:160px; }
.bl-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); margin:0; }
@media (min-width:768px){ .bl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.bl-item{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.bl-label{ display:flex; align-items:center; gap:6px; font-size:var(--fs-11); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.bl-nilai{ font-size:var(--fs-14); font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.bl-meta{ font-size:var(--fs-12); color:var(--text-dim); overflow-wrap:anywhere; }
.bl-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.bl-item .bl-aksi:empty{ display:none; }
a.tautan-data{ color:inherit; font-weight:inherit; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
a.tautan-data:hover, a.tautan-data:focus-visible{ text-decoration-color:currentColor; }
.dw-stat{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dw-stat li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--line); }
.dw-stat li:first-child{ border-top:0; }
.dw-stat-ic{ display:grid; place-items:center; width:28px; height:28px; border-radius:var(--radius-sm); font-size:var(--fs-12); }
.dw-stat-l{ font-size:var(--fs-14); color:var(--text); }
.dw-stat-n{ font-size:var(--fs-12); color:var(--text-dim); }
.dw-stat-n b{ font-size:var(--fs-16); font-weight:800; color:var(--text); margin-right:2px; }
.dw-stat .is-nol .dw-stat-l, .dw-stat .is-nol .dw-stat-n b{ color:var(--text-dim); font-weight:500; }
.dw-ajak{ display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-md); background:var(--bg-raised); border:1px solid var(--line); color:var(--text-dim); }
.dw-ajak i{ margin-top:2px; }
.dw-hint{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-md); font-size:var(--fs-13); font-weight:600; background:var(--bg-raised); border:1px solid var(--line); color:var(--text); }
.dw-hint-ok{ background:color-mix(in srgb, var(--success-600) 10%, var(--bg-raised)); border-color:color-mix(in srgb, var(--success-600) 30%, transparent); }
.dw-hint-warn{ background:color-mix(in srgb, var(--warning-600) 12%, var(--bg-raised)); border-color:color-mix(in srgb, var(--warning-600) 35%, transparent); }
.dw-hint-ok i{ color:var(--success-600); } .dw-hint-warn i{ color:var(--warning-600); }
/* Widget pribadi HRIS — satu bahasa visual (kelas kartu dari DashboardWidget 'kelas'):
   permukaan bertint teal, layar gelap (slot jam & persen), petak metrik, daftar ber-ikon + pill */
.dash-card.dw-kartu{ --nada:var(--teal-500); --nada-bg:var(--info-100); background:linear-gradient(165deg, color-mix(in srgb, var(--teal-500) 7%, var(--bg-raised)) 0%, var(--bg-raised) 55%, color-mix(in srgb, var(--bg-shell) 60%, var(--bg-raised)) 100%); border-color:color-mix(in srgb, var(--teal-500) 16%, var(--line)); }
.dash-card.dw-kartu-utama{ border-top:3px solid var(--teal-500); }
.dash-card.dw-kartu-waspada{ --nada:var(--warning-600); --nada-bg:var(--warning-100); background:linear-gradient(165deg, color-mix(in srgb, var(--warning-600) 13%, var(--bg-raised)) 0%, color-mix(in srgb, var(--warning-600) 4%, var(--bg-raised)) 100%); border-color:color-mix(in srgb, var(--warning-600) 38%, transparent); border-top:3px solid var(--warning-600); }
.dash-card.dw-kpi-sebaris .dash-card-isi{ flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-bottom:var(--sp-3); }
.dash-card.dw-kpi-sebaris .dash-nilai{ min-height:0; font-size:30px; font-variant-numeric:tabular-nums; }
.dash-card.dw-kpi-sebaris .dash-tren{ margin:0; flex:1 1 120px; font-weight:600; }
/* Nada bersama: --t warna, --t-bg latar */
.dw-t-ok{ --t:var(--success-600); --t-bg:var(--success-100); }
.dw-t-warn{ --t:#B7791F; --t-bg:var(--warning-100); }
.dw-t-danger{ --t:var(--danger-600); --t-bg:var(--danger-100); }
.dw-t-teal{ --t:var(--teal-500); --t-bg:var(--info-100); }
.dw-t-default{ --t:var(--text-dim); --t-bg:var(--tag-bg); }
.dw-t-gawat{ --t:var(--bg-raised); --t-bg:var(--danger-600); } /* merah tua (pekat): lebih genting dari danger, mis. kontrak lewat masa */
/* Status berdenyut */
.dw-status{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px; border-radius:var(--radius-full); font-size:12px; font-weight:700; border:1px solid; }
.dw-status-warn{ background:var(--warning-100); color:var(--ink-700); border-color:color-mix(in srgb, var(--warning-600) 40%, transparent); --dot:var(--warning-600); }
.dw-status-ok{ background:var(--success-100); color:var(--success-600); border-color:color-mix(in srgb, var(--success-600) 30%, transparent); --dot:var(--success-600); }
.dw-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--dot); }
.dw-status.is-live .dw-dot::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--dot); animation:dw-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes dw-ping{ 75%, 100%{ transform:scale(2.4); opacity:0; } }
/* Layar gelap: slot jam (kartu Absen) & persen (kartu Rekap) */
.dw-slot, .dw-slot.is-isi, .dw-layar{ border:1px solid color-mix(in srgb, var(--teal-900) 70%, #000); background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--teal-500) 22%, var(--teal-900)) 0%, var(--teal-900) 60%); box-shadow:inset 0 2px 8px rgba(0,0,0,.35); border-radius:var(--radius-md); }
.dw-slot{ padding:10px 14px; }
.dw-slot-label, .dw-slot-label i, .dw-layar-label, .dw-layar-sub{ color:color-mix(in srgb, var(--teal-500) 30%, #fff); opacity:.8; }
.dw-slot b, .dw-slot:not(.is-isi) b, .dw-layar-angka{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:.03em; color:color-mix(in srgb, var(--teal-500) 45%, #fff); opacity:1; text-shadow:0 0 14px color-mix(in srgb, var(--teal-500) 60%, transparent); }
.dw-slot b{ font-size:24px; font-weight:700; }
.dw-slot:not(.is-isi) b{ opacity:.35; text-shadow:none; }
.dw-layar{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; }
.dw-layar-atas{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-2); }
.dw-layar-label{ font-size:11.5px; font-weight:600; letter-spacing:.02em; }
.dw-layar-angka{ font-size:34px; font-weight:700; line-height:1; }
.dw-layar-angka small{ font-size:16px; opacity:.7; margin-left:1px; }
.dw-layar-sub{ font-size:12px; }
.dw-layar-sub b{ color:#fff; font-weight:700; }
.dw-layar .dw-bar-trek{ height:8px; background:rgba(255,255,255,.1); }
.dw-bar-trek > span{ animation:dw-isi 1s cubic-bezier(.16,1,.3,1); transform-origin:left; }
.dw-layar .dw-bar-trek > span{ background:linear-gradient(90deg, var(--teal-500), color-mix(in srgb, var(--teal-500) 40%, #fff)); box-shadow:0 0 10px color-mix(in srgb, var(--teal-500) 70%, transparent); }
@keyframes dw-isi{ from{ transform:scaleX(0); } }
/* Peringatan & info jadwal */
.dw-hint-warn{ border-style:dashed; }
.dw-info{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; }
.dw-info li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:6px; align-items:center; }
.dw-info li > span{ font-size:11px; color:var(--text-dim); }
.dw-info b{ grid-column:2; margin:0; text-align:left; font-size:12.5px; }
/* Tombol aksi utama */
.dw-aksi{ border:0; background:linear-gradient(135deg, var(--teal-500), var(--teal-700)); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--teal-500) 70%, transparent); transition:transform .15s ease, box-shadow .2s ease, filter .15s ease; }
.dw-aksi:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 22px -8px color-mix(in srgb, var(--teal-500) 80%, transparent); }
.dw-aksi:active{ transform:scale(.97); }
.dw-kartu-waspada .dw-aksi{ background:linear-gradient(135deg, var(--warning-600), #B7791F); color:var(--ink-900); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--warning-600) 70%, transparent); }
/* Ikon squircle bernada */
.dw-item-ic{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; font-size:12px; background:var(--t-bg); color:var(--t); border:1px solid color-mix(in srgb, var(--t) 18%, transparent); }
/* Petak metrik (Rekap) */
.dw-petak{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); }
.dw-petak li:last-child:nth-child(odd){ grid-column:1 / -1; } /* jumlah petak ganjil → petak terakhir selebar baris, tanpa sel kosong */
.dw-petak li{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:10px 12px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--t-bg) 55%, var(--bg-raised)); border:1px solid color-mix(in srgb, var(--t) 14%, transparent); transition:transform .15s ease, box-shadow .2s ease; }
.dw-petak li:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dw-petak .dw-item-ic{ grid-row:1 / 3; }
.dw-petak b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:20px; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-petak b small{ font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:0; }
.dw-petak li > span:last-child{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-petak li.is-nol{ background:var(--bg-raised); border-color:var(--line); }
.dw-petak li.is-nol .dw-item-ic{ filter:grayscale(1); opacity:.55; }
.dw-petak li.is-nol b{ color:var(--text-dim); }
/* Penghitung status (Pengajuan) */
.dw-hitung{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2); }
.dw-hitung li{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--t-bg) 60%, var(--bg-raised)); border:1px solid color-mix(in srgb, var(--t) 16%, transparent); border-top:3px solid var(--t); min-width:0; }
.dw-hitung b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:24px; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-hitung span{ font-size:11.5px; font-weight:600; color:var(--t); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-hitung li.is-nol{ background:var(--bg-raised); border-color:var(--line); border-top-color:color-mix(in srgb, var(--t) 35%, var(--line)); }
.dw-hitung li.is-nol b{ color:var(--text-dim); }
.dw-subjudul{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:calc(-1 * var(--sp-2)); }
/* Daftar ringkas ber-ikon + pill (Pengajuan, Perlu Dikoreksi) */
.dw-list{ list-style:none; margin:0; padding:4px; display:flex; flex-direction:column; border-radius:var(--radius-md); background:color-mix(in srgb, var(--bg-raised) 75%, transparent); border:1px solid var(--line); }
.dw-item{ display:flex; align-items:center; gap:10px; min-width:0; padding:8px 8px; border-radius:var(--radius-sm); transition:background .15s ease, transform .15s ease; }
.dw-item + .dw-item{ box-shadow:0 -1px 0 color-mix(in srgb, var(--line) 70%, transparent); }
.dw-item:hover{ background:color-mix(in srgb, var(--tag-bg) 80%, transparent); transform:translateX(2px); }
.dw-item-teks{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dw-item-teks b{ font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-item-teks small{ font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.dw-item .pill{ flex:none; white-space:nowrap; }
.dw-ajak{ background:color-mix(in srgb, var(--warning-600) 9%, var(--bg-raised)); border:1px dashed color-mix(in srgb, var(--warning-600) 40%, transparent); color:var(--text); }
.dw-ajak i{ color:#B7791F; }
/* Donat kuota (conic-gradient, tanpa library): --p = persen 0..100, warna dari nada .dw-t-* */
@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }
.dw-kuota{ display:flex; align-items:center; gap:var(--sp-4, 18px); min-width:0; }
.dw-donat{ flex:none; position:relative; width:118px; height:118px; border-radius:50%; background:conic-gradient(var(--t) calc(var(--p) * 1%), color-mix(in srgb, var(--t) 12%, var(--line)) 0); animation:dw-donat 1s cubic-bezier(.16,1,.3,1); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--t) 60%, transparent); }
@keyframes dw-donat{ from{ --p:0; } }
.dw-donat > span{ position:absolute; inset:13px; border-radius:50%; background:var(--bg-raised); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 1px 4px rgba(0,0,0,.06); }
.dw-donat b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:26px; font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-donat b small{ font-size:13px; font-weight:700; color:var(--text-dim); }
.dw-donat > span > small{ font-size:10.5px; font-weight:600; color:var(--text-dim); margin-top:2px; }
.dw-kuota-info{ list-style:none; margin:0; padding:0; flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.dw-kuota-info li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); }
.dw-kuota-info b{ margin-left:auto; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-kuota-batas{ padding-top:8px; border-top:1px dashed var(--line-strong); }
.dw-titik{ flex:none; width:10px; height:10px; border-radius:3px; background:var(--t); }
.dw-donat-multi{ box-shadow:0 6px 18px -8px rgba(18,45,40,.25); -webkit-mask:conic-gradient(#000 calc(var(--p) * 1%), transparent 0); mask:conic-gradient(#000 calc(var(--p) * 1%), transparent 0); }
.dw-titik.dw-t-warn{ background:var(--warning-600); }
.dw-kuota-l{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 6px; min-width:0; color:var(--text); font-weight:600; }
.dw-kuota-info b small{ font-size:11px; font-weight:600; color:var(--text-dim); }
.dw-kuota-catatan{ padding:1px 7px; font-size:10.5px; gap:4px; }
.dw-kuota-catatan i{ font-size:9px; color:#B7791F; }
.dw-kuota-info li.is-nol .dw-kuota-l, .dw-kuota-info li.is-nol b{ color:var(--text-dim); font-weight:500; }
.dw-kuota-info li.is-nol .dw-titik{ opacity:.35; }
.dw-kuota-ekor{ color:var(--text-dim); }
.dw-kuota-ekor > i{ flex:none; width:10px; font-size:10px; text-align:center; color:var(--text-dim); }
.dw-kuota-ekor .dw-kuota-l, .dw-kuota-ekor b{ color:var(--text-dim); font-weight:600; }
@media (max-width: 360px){ .dw-kuota{ flex-direction:column; align-items:stretch; } .dw-donat{ align-self:center; } }
/* Rekap kehadiran (kartu polos berisi panel-panel; tata letak mengikuti LEBAR KARTU lewat container query, bukan layar) */
.dash-card.dw-kartu-polos, .dash-card.dw-kartu-polos:hover{ padding:0; background:none; border:0; box-shadow:none; transform:none; }
.dash-card.dw-kartu-polos > .dash-card-atas{ margin-bottom:12px; }
.dw-rekap{ container-type:inline-size; gap:var(--sp-3); }
.dw-panel{ min-width:0; padding:16px; border-radius:16px; background:var(--bg-raised); border:1px solid var(--line); box-shadow:0 1px 3px rgba(18,45,40,.04); }
.dw-panel-kepala{ display:flex; align-items:center; gap:10px; margin-bottom:14px; min-width:0; }
.dw-panel-kepala > b{ flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-panel-ic{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:14px; background:var(--info-100); color:var(--info-600); }
.dw-chip{ flex:none; padding:3px 10px; border-radius:var(--radius-full); border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--text-dim); }
.dw-rekap-petak{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
.dw-rp{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ic l" "n n" "t t"; align-items:center; column-gap:10px; row-gap:6px; min-width:0; padding:14px; border-radius:16px; overflow:hidden; text-decoration:none; color:var(--text);
  background:linear-gradient(160deg, color-mix(in srgb, var(--t) 9%, var(--bg-raised)) 0%, color-mix(in srgb, var(--t) 3%, var(--bg-raised)) 100%); border:1px solid color-mix(in srgb, var(--t) 22%, transparent); box-shadow:0 1px 3px rgba(18,45,40,.04); transition:transform .15s ease, box-shadow .2s ease; }
.dw-rp::after{ content:""; position:absolute; right:-30px; bottom:-40px; width:140px; height:80px; border-radius:50%; background:color-mix(in srgb, var(--t) 8%, transparent); pointer-events:none; }
a.dw-rp:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--t) 45%, transparent); }
a.dw-rp:focus-visible{ outline:2px solid var(--t); outline-offset:2px; }
.dw-rp-ic{ grid-area:ic; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; font-size:16px; color:#fff; background:linear-gradient(145deg, color-mix(in srgb, var(--t) 80%, #fff), var(--t)); box-shadow:0 6px 14px -6px color-mix(in srgb, var(--t) 70%, transparent); }
.dw-rp-l{ grid-area:l; min-width:0; font-size:13px; font-weight:700; line-height:1.25; color:var(--text); overflow-wrap:anywhere; }
.dw-rp-panah{ grid-area:p; font-size:11px; color:var(--text-dim); transition:transform .15s ease; }
a.dw-rp:hover .dw-rp-panah{ transform:translateX(2px); color:var(--t); }
.dw-rp-n{ grid-area:n; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-rp-n small{ font-size:15px; font-weight:700; letter-spacing:0; color:var(--text); }
.dw-rp-tren{ grid-area:t; display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:11.5px; color:var(--text-dim); }
.dw-tren{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-full); font-size:11px; font-weight:700; background:var(--t-bg); color:var(--t); }
.dw-tren i{ font-size:9px; }
.dw-rekap-bawah{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
.dw-rekap-sisi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
.dw-mini{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ic l" "ic n" "ic k"; column-gap:10px; align-content:center; }
.dw-mini .dw-panel-ic{ grid-area:ic; align-self:start; }
.dw-mini-l{ grid-area:l; font-size:12.5px; font-weight:700; color:var(--text); }
.dw-mini .dw-rp-n{ font-size:22px; }
.dw-mini-ket{ grid-area:k; font-size:11.5px; color:var(--text-dim); }
.dw-legenda li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto 38px; }
.dw-legenda b{ margin-left:0; font-size:14px; }
.dw-legenda-p{ text-align:right; font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-dim); }
.dw-rekap .dw-ajak{ margin-top:14px; align-items:center; text-decoration:none; }
a.dw-ajak:hover{ border-style:solid; }
.dw-ajak u{ text-underline-offset:2px; color:var(--accent); font-weight:600; }
.dw-ajak-panah{ margin-left:auto; flex:none; font-size:11px; }
@container (min-width: 640px){
  .dw-rekap-petak{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .dw-rekap-bawah{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
  .dw-rekap-sisi{ grid-template-columns:minmax(0,1fr); }
  .dw-rekap .dw-donat{ width:150px; height:150px; }
  .dw-rekap .dw-donat > span{ inset:18px; }
  .dw-rekap .dw-donat b{ font-size:32px; }
  .dw-rekap .dw-kuota{ gap:28px; }
  .dw-rp-n{ font-size:30px; }
}
@container (max-width: 340px){
  .dw-rekap .dw-kuota{ flex-direction:column; align-items:stretch; }
  .dw-rekap .dw-donat{ align-self:center; }
  .dw-mini{ padding:12px; column-gap:8px; }
  .dw-mini .dw-panel-ic{ width:30px; height:30px; font-size:12px; }
}
/* Pemilih periode widget (select asli bergaya pill; ganti = partial reload kartu, app.js [data-dw-filter]) */
.dash-card.dw-ada-filter{ position:relative; }
.dw-rekap-filter{ position:relative; display:inline-flex; align-items:center; align-self:flex-start; min-height:40px; border-radius:var(--radius-full); background:var(--bg-raised); border:1px solid var(--line); box-shadow:0 1px 3px rgba(18,45,40,.05); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease; }
.dw-rekap-filter:hover, .dw-rekap-filter:focus-within{ border-color:var(--accent-soft); box-shadow:0 0 0 3px var(--info-100); }
.dw-rekap-filter > i{ position:absolute; pointer-events:none; font-size:12px; color:var(--info-600); }
.dw-rekap-filter > i:first-child{ left:14px; }
.dw-rekap-filter > i:nth-of-type(2){ right:14px; font-size:10px; color:var(--text-dim); }
.dw-rekap-filter-teks{ padding:0 34px; font-size:13px; font-weight:600; line-height:38px; white-space:nowrap; }
.dw-rekap-filter select{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; appearance:none; -webkit-appearance:none; }
.dw-rekap-filter select:focus{ outline:none; }
.dash-card[aria-busy="true"] .dw{ opacity:.5; pointer-events:none; transition:opacity .15s ease; }
.dash-judul-teks{ min-width:0; }
.dash-subjudul{ margin:2px 0 0; font-size:12px; line-height:1.35; color:var(--text-dim); }
/* Kepala kartu berfilter: filter kecil di kanan atas semua lebar; judul boleh 2 baris agar tidak terdorong */
.dash-card.dw-ada-filter > .dash-card-atas{ margin-bottom:8px; }
.dw-ada-filter .dash-label{ white-space:normal; overflow:visible; }
.dw-ada-filter .dw-rekap-filter{ margin-left:47px; min-height:32px; } /* HP: di bawah subjudul, sejajar kolom teks judul (ikon 36px + jarak 11px) */
.dw-ada-filter .dw-rekap-filter-teks{ padding:0 26px 0 28px; font-size:12px; line-height:30px; }
.dw-ada-filter .dw-rekap-filter > i:first-child{ left:10px; font-size:11px; }
.dw-ada-filter .dw-rekap-filter > i:nth-of-type(2){ right:10px; font-size:9px; }
@media (min-width: 576px){
  .dash-card.dw-ada-filter > .dash-card-atas{ padding-right:176px; min-height:40px; margin-bottom:12px; }
  .dw-ada-filter .dw-rekap-filter{ position:absolute; top:0; right:0; margin:0; min-height:38px; }
  .dw-ada-filter .dw-rekap-filter-teks{ padding:0 34px; font-size:13px; line-height:36px; }
  .dw-ada-filter .dw-rekap-filter > i:first-child{ left:13px; font-size:12px; }
  .dw-ada-filter .dw-rekap-filter > i:nth-of-type(2){ right:13px; font-size:10px; }
}
.dw-titik.dw-t-default{ background:color-mix(in srgb, var(--text-dim) 25%, var(--line)); }
.dw:has(> .dw-aksi){ flex:1; } .dw > .dw-aksi{ margin-top:auto; }

/* ============ GRAFIK WIDGET (AppGrafik: assets/js/grafik.js + Chart.js lokal; kontrak 'grafik' DashboardWidget) ============
   Warna seri = token --grafik-* / status (dibaca JS dari CSS, ikut tema). Legenda = tombol HTML (bisa diklik, warna tidak sendirian:
   swatch + label + angka). Tinggi kanvas tetap agar tidak melompat; donut = kanvas + legenda (sebaris bila wadah ≥ 340px). */
.dash-card-atas .dw-rekap-filter{ flex:none; min-height:32px; }
.dash-card-atas .dw-rekap-filter-teks{ padding:0 26px 0 28px; font-size:12px; line-height:30px; }
.dash-card-atas .dw-rekap-filter > i:first-child{ left:10px; font-size:11px; }
.dash-card-atas .dw-rekap-filter > i:nth-of-type(2){ right:10px; font-size:9px; }
.dw-grafik{ position:relative; /* tabel .sr-only (absolute) tetap di dalam kartu */ container-type:inline-size; display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; margin-bottom:var(--sp-3); animation:dw-grafik-masuk .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes dw-grafik-masuk{ from{ opacity:0; transform:translateY(8px); } }
.dw-grafik-badan{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.dw-grafik-kanvas{ position:relative; min-width:0; height:220px; }
.dw-grafik-kanvas canvas{ display:block; max-width:100%; }
.dw-grafik-donut .dw-grafik-kanvas{ flex:none; align-self:center; width:184px; height:184px; }
.dw-grafik-kecil .dw-grafik-kanvas{ width:136px; height:136px; }
.dw-grafik-tengah{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.dw-grafik-tengah b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-grafik-tengah small{ max-width:110px; margin-top:4px; font-size:11px; font-weight:600; line-height:1.25; color:var(--text-dim); }
.dw-grafik-kecil .dw-grafik-tengah b{ font-size:22px; }
.dw-grafik-tengah .dw-grafik-pct{ margin:0 0 0 1px; font-size:.5em; font-weight:700; color:var(--text-dim); }
/* Donut-saja (legenda dibuat pemanggil, mis. Rekap Kehadiran): tanpa wadah kontainer agar lebar mengikuti kanvas */
.dw-grafik-polos{ container-type:normal; flex:none; margin:0; animation:none; }
.dw-grafik-polos .dw-grafik-kanvas{ width:118px; height:118px; }
.dw-grafik-polos .dw-grafik-tengah b{ font-size:26px; }
.dw-grafik-cincin{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, var(--bg-raised) 0 62%, var(--line) 63%); }
.dw-rekap .dw-grafik-polos{ align-self:center; }
@container (min-width: 640px){
  .dw-rekap .dw-grafik-polos .dw-grafik-kanvas{ width:150px; height:150px; }
  .dw-rekap .dw-grafik-polos .dw-grafik-tengah b{ font-size:32px; }
}
.dw-grafik-legenda{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.dw-grafik-legenda button{ display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:32px; padding:4px 11px; border-radius:var(--radius-full); border:1px solid var(--line); background:var(--bg-raised); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:opacity .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.dw-grafik-legenda button:hover{ border-color:var(--line-strong); background:var(--tag-bg); }
.dw-grafik-legenda button:active{ transform:scale(.97); }
.dw-grafik-legenda button:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.dw-grafik-legenda button[aria-pressed="false"]{ opacity:.45; }
.dw-grafik-legenda button[aria-pressed="false"] .lg-l{ text-decoration:line-through; }
.dw-grafik-legenda .lg-w{ flex:none; width:10px; height:10px; border-radius:3px; background:var(--w); box-shadow:0 0 0 2px color-mix(in srgb, var(--w) 18%, transparent); }
.dw-grafik-legenda .lg-l{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-grafik-legenda .lg-n{ font-variant-numeric:tabular-nums; font-weight:700; }
.dw-grafik-legenda .lg-p{ min-width:38px; text-align:right; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-dim); }
.dw-grafik-donut .dw-grafik-legenda{ flex:1; flex-direction:column; flex-wrap:nowrap; gap:2px; }
.dw-grafik-donut .dw-grafik-legenda button{ width:100%; min-height:36px; padding:6px 8px; border:0; border-radius:var(--radius-sm); background:none; }
.dw-grafik-donut .dw-grafik-legenda button:hover{ background:var(--tag-bg); }
.dw-grafik-donut .dw-grafik-legenda .lg-l{ flex:1; text-align:left; }
@container (min-width: 340px){ .dw-grafik-donut .dw-grafik-badan{ flex-direction:row; align-items:center; gap:var(--sp-5); } }
.dw-grafik-catatan{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.dw-grafik-catatan i{ color:var(--info-600); }
.dw-grafik .dash-kosong{ padding:16px 0 8px; }
.dw-grafik .dash-kosong a{ font-weight:600; color:var(--info-600); }
@media (max-width: 575px){ .dw-grafik-kanvas{ height:200px; } .dw-grafik-legenda button{ min-height:36px; } }

/* Kalender Libur (widget hris_kalender_libur): grid bulan + legenda jenis + 5 libur terdekat. Warna per jenis lewat --w. */
.dw-kal{ container-type:inline-size; }
.dw-kal-kepala{ display:flex; align-items:center; gap:6px; min-width:0; }
.dw-kal-judul{ flex:1; min-width:0; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:14px; font-weight:700; text-align:center; }
.dw-kal-nav{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-full); border:1px solid var(--line); background:var(--bg-raised); color:var(--text); cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.dw-kal-nav:hover{ background:var(--tag-bg); border-color:var(--line-strong); }
.dw-kal-nav:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.dw-kal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.dw-kal-h{ padding:2px 0; font-size:10.5px; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
.dw-kal-sel{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:36px; border-radius:10px; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--text); }
.dw-kal-sel.is-luar{ visibility:hidden; }
.dw-kal-sel.is-minggu{ color:var(--danger-600); }
.dw-kal-sel.is-libur{ background:color-mix(in srgb, var(--w) 15%, transparent); font-weight:700; }
.dw-kal-sel.is-ini{ box-shadow:inset 0 0 0 2px var(--accent-soft); font-weight:800; }
.dw-kal-titik{ display:flex; gap:2px; position:absolute; bottom:4px; }
.dw-kal-titik i{ width:5px; height:5px; border-radius:50%; background:var(--w); }
.dw-kal-nama{ display:none; }
@container (min-width: 560px){
  .dw-kal-sel{ min-height:52px; align-items:stretch; justify-content:flex-start; padding:5px 6px; text-align:left; }
  .dw-kal-nama{ display:block; margin-top:2px; font-size:10.5px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); }
  .dw-kal-titik{ right:6px; top:7px; bottom:auto; }
}
.dw-kal-legenda{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11.5px; color:var(--text-dim); }
.dw-kal-legenda li{ display:inline-flex; align-items:center; gap:6px; }
.dw-kal-legenda i{ width:9px; height:9px; border-radius:3px; background:var(--w); }
.dw-kal-j-nasional{ --w:var(--danger-600); }
.dw-kal-j-bersama{ --w:var(--grafik-2); }
.dw-kal-j-perusahaan{ --w:var(--grafik-1); }
.dw-kal-j-lokal{ --w:var(--grafik-3); }
.dw-kal-tgl{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--w) 14%, var(--bg-raised)); border:1px solid color-mix(in srgb, var(--w) 30%, transparent); line-height:1; }
.dw-kal-tgl b{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:16px; font-weight:800; color:var(--text); }
.dw-kal-tgl small{ margin-top:2px; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--w); }
/* Sisa Cuti: donut ringkas di tengah ruang yang tersisa (tinggi kartu mengikuti tetangga di grid, tidak ada lubang), daftar jenis dengan bar kemajuan */
.dw-w-1{ --w:var(--grafik-1); } .dw-w-2{ --w:var(--grafik-2); } .dw-w-3{ --w:var(--grafik-3); } .dw-w-4{ --w:var(--grafik-4); } .dw-w-5{ --w:var(--grafik-5); } .dw-w-6{ --w:var(--grafik-6); }
.dw-cuti{ flex:1; gap:var(--sp-4); margin-bottom:0; }
.dw-cuti-hero{ flex:1; display:flex; align-items:center; justify-content:center; min-height:140px; padding:var(--sp-2) 0; }
.dw-cuti .dw-grafik-polos .dw-grafik-kanvas{ width:164px; height:164px; }
.dw-cuti .dw-grafik-polos .dw-grafik-tengah b{ font-size:34px; }
.dw-cuti .dw-grafik-polos .dw-grafik-tengah small{ font-size:12px; }
.dw-cuti-daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.dw-cuti-daftar li{ display:flex; align-items:flex-start; gap:12px; min-width:0; padding:14px 16px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--w) 7%, var(--bg-raised)); border:1px solid color-mix(in srgb, var(--w) 22%, var(--line)); transition:transform .15s ease, box-shadow .15s ease; }
.dw-cuti-daftar li:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dw-cuti-daftar .dw-titik{ margin-top:5px; background:var(--w); box-shadow:0 0 0 3px color-mix(in srgb, var(--w) 20%, transparent); }
.dw-cuti-isi{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.dw-cuti-baris{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; }
.dw-cuti-baris > b{ min-width:0; font-size:14px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dw-cuti-baris .pill{ flex:none; }
.dw-cuti-baris .pill-warn{ color:var(--text); } /* pill-warn bawaan gelap: tak terbaca di mode gelap */
.dw-cuti-n{ margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dw-cuti-n strong{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.dw-cuti-n small{ font-size:11.5px; font-weight:600; color:var(--text-dim); }
.dw-cuti-bar{ height:8px; border-radius:var(--radius-full); background:color-mix(in srgb, var(--w) 16%, var(--line)); overflow:hidden; }
.dw-cuti-bar > i{ display:block; height:100%; border-radius:inherit; background:var(--w); transform-origin:left; animation:dw-isi .7s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce){ .dw-cuti-daftar li{ transition:none; } .dw-cuti-bar > i{ animation:none; } }
.dw-kal-lagi{ margin-top:calc(-1 * var(--sp-1)); }
.dw-kal-lagi > summary{ display:inline-flex; align-items:center; gap:6px; min-height:var(--sentuh); padding:0 4px; list-style:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--info-600); border-radius:var(--radius-sm); }
.dw-kal-lagi > summary::-webkit-details-marker{ display:none; }
.dw-kal-lagi > summary:hover{ text-decoration:underline; }
.dw-kal-lagi > summary:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }
.dw-kal-lagi > summary i{ font-size:10px; transition:transform .2s ease; }
.dw-kal-lagi[open] > summary i{ transform:rotate(180deg); }
.dw-kal-lagi .dw-kal-tutup, .dw-kal-lagi[open] .dw-kal-buka{ display:none; }
.dw-kal-lagi[open] .dw-kal-tutup{ display:inline; }
.dw-kal-lagi[open] > .dw-list{ animation:dw-grafik-masuk .3s ease both; }
@media (prefers-reduced-motion: reduce){ .dw-kal-lagi > summary i, .dw-kal-lagi[open] > .dw-list{ transition:none; animation:none; } }
.dw-kal-sisa{ flex:none; font-size:11.5px; font-weight:600; white-space:nowrap; color:var(--text-dim); }
@media (prefers-reduced-motion: reduce){ .dw-grafik{ animation:none; } .dw-grafik-legenda button, .dw-kal-nav{ transition:none; } }

/* Navigator tanggal di atas daftar (‹ tanggal › Hari ini) — Monitoring Kehadiran */
.nav-tanggal{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; min-width:0; margin-bottom:var(--sp-3); }
.ts-kepala .nav-tanggal{ margin:0; flex-wrap:nowrap; }
@media (max-width:767px){
  .ts-kepala:has(> .nav-tanggal){ flex-wrap:wrap; } /* navigator tanggal = baris sendiri di atas cari + ikon */
  .ts-kepala > .nav-tanggal{ order:-1; flex:1 1 100%; flex-wrap:nowrap; }
  .ts-kepala > .nav-tanggal .form-field{ flex:1 1 0; width:auto; min-width:96px; }
  .ts-kepala > .nav-tanggal .btn{ flex:none; padding-inline:var(--sp-3); }
  .ts-kepala > .nav-tanggal #mkTglRentang{ display:none; }
}
.nav-tanggal .form-field{ margin:0; width:160px; max-width:100%; }
.nav-tanggal input[data-tanggal]{ text-align:center; }

/* Layanan Mandiri › Pengajuan › tab Kasbon: riwayat = <details> per pengajuan */
.kbs-item{ min-width:0; border-bottom:1px solid var(--line); }
.kbs-item:last-child{ border-bottom:0; }
.kbs-item > summary{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-3); padding:var(--sp-3) 0; cursor:pointer; min-height:44px; }
.kbs-item > summary > b{ flex:none; }
.kbs-item > summary > .tx-small{ flex:1 1 12rem; min-width:0; overflow-wrap:anywhere; }
.kbs-item > summary > .pill{ margin-inline-start:auto; flex:none; }
.kbs-isi{ min-width:0; padding:0 0 var(--sp-3); display:grid; gap:var(--sp-2); overflow-wrap:anywhere; }
.kbs-isi .btn{ justify-self:start; }
.kbs-item[data-kbs-sorot]{ background:var(--info-100); box-shadow:inset 3px 0 0 var(--accent-soft); border-radius:var(--radius-md); padding-inline:var(--sp-3); }
.kbs-pel{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
.kbs-pel .alert-list{ list-style:disc; padding-left:var(--sp-5); gap:var(--sp-1); }
.alert:has(.kbs-pel){ align-items:flex-start; }
.alert:has(.kbs-pel) > .fas{ flex:none; margin-top:2px; }
.kbs-ringkas .stat-value{ white-space:normal; overflow-wrap:anywhere; overflow:visible; }
@media (max-width:575px){
  .kbs-ringkas.stat-strip-3{ grid-template-columns:1fr; }
  .page-aksi.kbs-ajukan{ width:100%; margin-left:0; }
  .page-aksi.kbs-ajukan .btn-primary{ width:100%; min-width:0; padding:0 var(--sp-4); }
  .page-aksi.kbs-ajukan .btn-primary .btn-teks{ display:inline; }
  .page-header:has(.kbs-ajukan){ flex-wrap:wrap; }
  .kbs-isi .btn{ justify-self:stretch; min-height:44px; }
  .kbs-cicilan{ margin:0; }
}

/* Widget Absen & Jadwal Hari Ini (hris_status_saya) */
.dw-abs{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
a.dw-abs-banner{ text-decoration:none; }
.dw-abs-banner{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--radius-md); font-size:12.5px; white-space:nowrap; border:1px solid; min-width:0; }
.dw-abs-warn{ background:color-mix(in srgb, var(--warning-600) 12%, var(--bg-raised)); border-color:color-mix(in srgb, var(--warning-600) 30%, transparent); --dot:var(--warning-600); color:var(--warning-600); }
.dw-abs-ok{ background:color-mix(in srgb, var(--success-600) 10%, var(--bg-raised)); border-color:color-mix(in srgb, var(--success-600) 30%, transparent); --dot:var(--success-600); color:var(--success-600); }
.dw-status-titik{ position:relative; flex:none; width:10px; height:10px; border-radius:50%; background:var(--dot); }
.dw-status-titik.is-live::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--dot); animation:dw-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.dw-abs-hint{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--text-dim); padding-left:12px; border-left:1px solid currentColor; border-left-color:color-mix(in srgb, currentColor 35%, transparent); }
.dw-abs-banner.is-bungkus{ white-space:normal; } .dw-abs-banner.is-bungkus .dw-abs-hint{ overflow:visible; text-overflow:clip; } /* banner berisi kalimat penting (mis. sisa kontrak): boleh turun baris di HP */
.dw-abs-nav{ flex:none; margin-left:auto; font-size:12px; color:var(--text-dim); }
.dw-abs-slot{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
.dw-abs-kartu{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px; border-radius:18px; border:1px solid var(--line); background:var(--bg-raised); color:var(--text); }
.dw-abs-kartu.is-aktif{ border-color:transparent; color:#fff; background:linear-gradient(145deg, var(--teal-500), var(--teal-900)); box-shadow:0 10px 24px -12px color-mix(in srgb, var(--teal-500) 80%, transparent); }
.dw-abs-kepala{ display:flex; align-items:center; gap:10px; min-width:0; }
.dw-abs-kepala > div{ min-width:0; }
.dw-abs-kepala b{ display:block; font-size:16px; font-weight:800; line-height:1.2; }
.dw-abs-kepala small{ display:block; font-size:11.5px; line-height:1.3; opacity:.75; }
.dw-abs-ic, .dw-abs-ic2{ flex:none; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--teal-500) 16%, transparent); color:var(--teal-700); }
.dw-abs-ic{ width:40px; height:40px; font-size:16px; }
.dw-abs-kartu.is-aktif .dw-abs-ic{ background:rgba(255,255,255,.2); color:#fff; }
.dw-abs-jam{ display:flex; align-items:center; gap:10px; min-width:0; }
.dw-abs-jam i{ font-size:20px; opacity:.8; }
.dw-abs-jam b{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:22px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.dw-abs-kartu:not(.is-isi) .dw-abs-jam b{ opacity:.55; }
.dw-abs-btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 10px; border-radius:var(--radius-md); font-size:13px; font-weight:700; text-decoration:none; text-align:center; background:#fff; color:var(--teal-700); box-shadow:0 6px 14px -8px rgba(0,0,0,.4); transition:transform .15s ease, filter .15s ease; }
a.dw-abs-btn:hover{ transform:translateY(-1px); filter:brightness(.97); }
.dw-abs-kartu:not(.is-aktif) .dw-abs-btn{ background:var(--bg-alt); color:var(--text-dim); box-shadow:none; }
.dw-abs-btn.is-mati{ opacity:.6; cursor:not-allowed; }
.dw-abs-info{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2); min-width:0; }
.dw-abs-info li{ display:flex; align-items:center; gap:10px; min-width:0; padding:6px 12px; border-radius:var(--radius-md); background:var(--bg-alt); }
.dw-abs-info li > div{ min-width:0; }
.dw-abs-ic2{ width:28px; height:28px; font-size:11px; border-radius:50%; }
.dw-abs-info li.is-lebar{ grid-column:1 / -1; }
.dw-abs-info small{ display:block; font-size:11px; color:var(--text-dim); }
.dw-abs-info b{ display:block; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
@media (max-width:575px){
  .dw-abs-kartu{ padding:12px; }
  .dw-abs-jam b{ font-size:20px; }
  .dw-abs-btn{ font-size:12px; padding:0 6px; gap:5px; }
  .dw-abs-btn i:last-child{ display:none; }
}

.dw-abs-lokasi{ position:relative; display:flex; align-items:center; gap:12px; min-width:0; padding:8px 14px; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--bg-raised); }
.dw-abs-pin{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font-size:16px; color:var(--teal-700); background:color-mix(in srgb, var(--teal-500) 16%, transparent); }
.dw-abs-lok-teks{ flex:1; min-width:0; }
.dw-abs-lok-teks b{ display:block; font-size:13px; font-weight:700; line-height:1.3; }
.dw-abs-lok-teks small{ display:block; font-size:12px; line-height:1.35; color:var(--text-dim); }
.dw-abs-lok-btn{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.dw-abs-lok-ok{ display:none; flex:none; place-items:center; width:30px; height:30px; border-radius:50%; font-size:12px; }
.dw-abs-lokasi[data-s="dalam"]{ border-color:color-mix(in srgb, var(--success-600) 35%, transparent); background:color-mix(in srgb, var(--success-600) 9%, var(--bg-raised)); }
.dw-abs-lokasi[data-s="dalam"] .dw-abs-lok-teks b, .dw-abs-lokasi[data-s="dalam"] .dw-abs-pin{ color:var(--success-600); }
.dw-abs-lokasi[data-s="dalam"] .dw-abs-lok-ok{ display:grid; color:var(--success-600); background:color-mix(in srgb, var(--success-600) 15%, transparent); }
.dw-abs-lokasi[data-s="luar"]{ border-color:color-mix(in srgb, var(--warning-600) 40%, transparent); background:color-mix(in srgb, var(--warning-600) 10%, var(--bg-raised)); }
.dw-abs-lokasi[data-s="luar"] .dw-abs-pin{ color:var(--warning-600); }
.dw-abs-lokasi:not([data-s="awal"]):not([data-s="galat"]) .dw-abs-lok-btn{ display:none; }
.dw-abs-lokasi[data-s="cek"] .dw-abs-lok-btn{ display:inline-flex; opacity:.6; pointer-events:none; }
@media (max-width:575px){
  .dw-abs-kepala{ gap:8px; }
  .dw-abs-ic{ width:32px; height:32px; font-size:13px; }
  .dw-abs-kepala b{ font-size:15px; }
  .dw-abs-kepala small{ font-size:11px; }
  .dw-abs-jam{ gap:8px; } .dw-abs-jam i{ font-size:16px; }
  .dw-abs-info li{ gap:10px; padding:10px 12px; }
  .dw-abs-ic2{ width:28px; height:28px; font-size:11px; }
  .dw-abs-info small{ font-size:11px; } .dw-abs-info b{ font-size:13px; }
  .dw-abs-info{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .dw-abs-info li > div{ flex:1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .dw-abs-info small{ white-space:nowrap; } .dw-abs-info b{ text-align:right; }
  .dw-abs-hint{ padding-left:0; border-left:0; }
  .dw-abs-lokasi{ padding:10px; gap:8px; }
  .dw-abs-lok-btn span{ display:none; } .dw-abs-lok-btn{ width:36px; padding:0; justify-content:center; }
}

/* ===== Gaji Pegawai (H22c): sheet lebar untuk tabel isi per pegawai & pratinjau massal ===== */
.app-sheet.sheet-gaji{ max-height:94vh; max-height:94dvh; }
.sheet-gaji .app-sheet-isi{ padding:var(--sp-3) var(--sp-4) var(--sp-4); min-width:0; }
.sheet-gaji .app-sheet-kaki{ justify-content:flex-end; }
@media (min-width:576px){ .app-sheet.sheet-gaji{ width:min(1040px, calc(100vw - 32px)); max-width:none; margin-left:calc(min(1040px, calc(100vw - 32px)) / -2); } }
.sheet-gaji .gi-f{ margin-bottom:0; min-width:0; }
.sheet-gaji .gi-f input, .sheet-gaji .gi-f select{ min-height:44px; width:100%; }
/* Isi rekening/NPWP/PTKP: input sedikit lebih kecil, kolom NPWP paling lebar */
.sheet-gaji .gi-rek .gi-f input{ min-height:38px; padding-top:var(--sp-1); padding-bottom:var(--sp-1); }
@media (min-width:768px){
  .sheet-gaji .gi-rek{ table-layout:fixed; width:100%; }
  .sheet-gaji .gi-rek th:nth-child(1){ width:8%; } .sheet-gaji .gi-rek th:nth-child(2){ width:13%; } .sheet-gaji .gi-rek th:nth-child(3){ width:9%; }
  .sheet-gaji .gi-rek th:nth-child(4){ width:14%; } .sheet-gaji .gi-rek th:nth-child(5){ width:14%; } .sheet-gaji .gi-rek th:nth-child(6){ width:27%; } .sheet-gaji .gi-rek th:nth-child(7){ width:10%; }
}
.sheet-gaji .gi-galat{ display:block; margin-top:4px; color:var(--danger-600); }
.sheet-gaji .simple-table td, .sheet-gaji .simple-table th{ vertical-align:top; }
@media (max-width:575px){
  .sheet-gaji .tabel-kartu td .gi-f{ flex:1; min-width:0; }
  .sheet-gaji .tabel-kartu td{ align-items:center; }
}

/* ===== Gaji Pegawai (H22c3): kartu ringkasan = filter, baris "siap payroll", panduan, tab berupa tautan ===== */
.tab-list a.tab-btn{ text-decoration:none; }
@media (max-width:575px){ .tab-list a.tab-btn{ flex:1 1 auto; justify-content:center; min-height:44px; } }
.kartu-filter-wadah{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0 0 12px; min-width:0; }
@media (min-width:576px){ .kartu-filter-wadah{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:992px){ .kartu-filter-wadah{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } } /* laptop: semua kartu satu baris penuh, berapa pun jumlahnya */
.kartu-filter{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ik n" "ik l"; column-gap:10px; align-items:center; text-align:left; min-width:0; min-height:44px; padding:10px 12px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); color:var(--text); cursor:pointer; font:inherit; }
.kartu-filter:hover{ border-color:var(--accent); }
.kartu-filter.is-aktif{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.kf-ik{ grid-area:ik; width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--tag-bg); color:var(--accent-soft); }
/* Kartu filter Kontrak (ringkas, tanpa gradasi): baris 1 = ikon + angka, baris 2 = keterangan, baris 3 = kaki status; nada .kf-t-{danger|warn|ok|teal|ungu}; (i) pojok kanan atas, di luar <button> */
.kf-bungkus{ position:relative; min-width:0; display:flex; }
.kf-bungkus > .kartu-filter{ flex:1; width:100%; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ik n" "l l" "f f"; column-gap:10px; row-gap:4px; align-items:center; align-content:start; min-height:0; padding:10px 12px; border-radius:var(--radius-md); background:var(--bg-raised); }
.kf-bungkus .kf-ik{ width:38px; height:38px; font-size:18px; border-radius:var(--radius-sm); background:var(--kt-bg); color:var(--kt); }
.kf-bungkus .kf-n{ font-size:24px; line-height:1; }
.kf-bungkus .kf-l{ font-size:var(--fs-12); color:var(--text); line-height:1.25; }
.kf-f{ grid-area:f; display:flex; align-items:center; gap:6px; font-size:var(--fs-12); font-weight:600; color:var(--kt); }
.kf-f i{ width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:var(--kt); color:var(--bg-raised); font-size:8px; flex:none; }
.kf-bungkus .kf-info{ position:absolute; top:8px; right:8px; z-index:1; display:inline-flex; }
.kf-t-danger{ --kt:var(--danger-600); --kt-bg:var(--danger-100); }
.kf-t-warn{ --kt:#B7791F; --kt-bg:var(--warning-100); }
.kf-t-ok{ --kt:var(--success-600); --kt-bg:var(--success-100); }
.kf-t-teal{ --kt:var(--info-600); --kt-bg:var(--info-100); }
.kf-t-ungu{ --kt:var(--ungu-600); --kt-bg:var(--ungu-100); }
.kartu-filter.is-warn .kf-ik{ background:var(--warning-100); color:var(--warning-600); }
.kf-n{ grid-area:n; font-weight:800; font-size:var(--fs-18); line-height:1.2; }
.kf-l{ grid-area:l; font-size:var(--fs-12); color:var(--text-dim); line-height:1.3; overflow-wrap:anywhere; }
.gaji-siap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; min-width:0; }
.gaji-siap > .fas{ color:var(--success-600); flex:none; }
.gaji-siap > span{ min-width:0; }
.gaji-panduan{ margin-bottom:12px; min-width:0; }
.gaji-panduan-kepala{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.gaji-panduan-langkah{ margin:8px 0; padding-left:20px; display:grid; gap:6px; }
.tx-warn{ color:var(--warning-600); }
#gajiDaftar td .icon-btn{ width:32px; height:32px; display:inline-flex; vertical-align:middle; }
@media (max-width:575px){ #gajiDaftar td .icon-btn{ width:40px; height:40px; } }

/* ===== Input group nominal: awalan "Rp" di depan field (pakai bersama data-rupiah) ===== */
.input-rp{ position:relative; display:flex; align-items:center; min-width:0; }
.input-rp-awalan{ position:absolute; left:1px; top:1px; bottom:1px; display:inline-flex; align-items:center; padding:0 12px; border-right:1px solid var(--line-strong); border-radius:var(--radius-md) 0 0 var(--radius-md); background:var(--bg-alt); color:var(--text-dim); font:600 13px/1 'IBM Plex Mono', monospace; pointer-events:none; }
.form-field .input-rp input[type=text], .input-rp input[type=text]{ padding-left:52px; width:100%; }
.dk-aksi-isi .da-alat{ margin-left:0; flex-wrap:nowrap; }

/* Pengaturan notifikasi (lib/_notif_kartu): baris ringkas, sakelar kecil, parameter sebaris */
.notif-daftar{ min-width:0; }
.notif-baris{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:center; padding:14px 0; border-top:1px solid var(--line); min-width:0; }
.notif-judul{ display:flex; gap:12px; align-items:flex-start; min-width:0; }
.notif-ikon{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--tag-bg); color:var(--text-dim); }
.notif-judul .tx-h3{ margin:0; font-size:14px; line-height:1.3; }
.notif-ket{ margin:2px 0 0; color:var(--text-dim); }
.notif-kontrol{ display:flex; gap:20px; align-items:center; }
.notif-sw-wrap{ display:inline-flex; align-items:center; gap:6px; }
.notif-sw{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.notif-sw input{ position:absolute; opacity:0; width:1px; height:1px; }
.notif-sw-trk{ position:relative; flex:none; width:34px; height:20px; border-radius:100px; background:var(--line-strong); transition:background .15s ease; }
.notif-sw-trk::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease; }
.notif-sw input:checked + .notif-sw-trk{ background:var(--accent); }
.notif-sw input:checked + .notif-sw-trk::after{ transform:translateX(14px); }
.notif-sw input:focus-visible + .notif-sw-trk{ outline:2px solid var(--accent); outline-offset:2px; }
.notif-sw input:disabled + .notif-sw-trk{ opacity:.45; } .notif-sw:has(input:disabled){ cursor:not-allowed; color:var(--text-dim); }
.notif-param{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 16px; padding-left:46px; min-width:0; }
.notif-param .form-field{ margin:0; width:180px; max-width:100%; }
.input-awalan-akhir{ display:flex; align-items:center; gap:8px; } .input-awalan-akhir input{ min-width:0; }
.notif-satuan{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
@media (max-width:575px){
  .notif-baris{ grid-template-columns:1fr; }
  .notif-kontrol{ padding-left:46px; }
  .notif-param{ padding-left:46px; } .notif-param .form-field{ width:100%; }
}

/* Shift bergilir (B2): chip shift berwarna token palet (--grafik-1..6), penyusun urutan rotasi (seret = jQuery UI sortable), pratinjau 14 hari */
.shift-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:700; background:var(--tag-bg); color:var(--text); border:1px solid var(--line); white-space:nowrap; }
.shift-chip::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--shift-warna, var(--grafik-netral)); flex:none; }
.shift-chip[data-warna="grafik-1"]{ --shift-warna:var(--grafik-1); } .shift-chip[data-warna="grafik-2"]{ --shift-warna:var(--grafik-2); }
.shift-chip[data-warna="grafik-3"]{ --shift-warna:var(--grafik-3); } .shift-chip[data-warna="grafik-4"]{ --shift-warna:var(--grafik-4); }
.shift-chip[data-warna="grafik-5"]{ --shift-warna:var(--grafik-5); } .shift-chip[data-warna="grafik-6"]{ --shift-warna:var(--grafik-6); }
/* Pemilih warna (radio bulat bertanda centang) — dipakai form Shift; warna = token palet lewat data-warna */
.warna-pilih{ display:flex; flex-wrap:wrap; gap:var(--sp-2); min-width:0; }
.form-field .warna-pilih label{ position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 14px 6px 8px; border:1px solid var(--line); border-radius:var(--radius-full); background:var(--bg-raised); cursor:pointer; font-family:'Inter'; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text); transition:border-color .15s, box-shadow .15s; }
.warna-pilih input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.warna-bulat{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--shift-warna, var(--grafik-netral)); color:var(--bg-raised); font-size:11px; }
.warna-bulat::after{ content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:900; opacity:0; transform:scale(.4); transition:opacity .15s, transform .15s; }
.warna-pilih input:checked + .warna-bulat::after{ opacity:1; transform:scale(1); }
.form-field .warna-pilih label:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.warna-pilih input:focus-visible + .warna-bulat{ outline:2px solid var(--accent); outline-offset:2px; }
.warna-pilih [data-warna="grafik-1"]{ --shift-warna:var(--grafik-1); } .warna-pilih [data-warna="grafik-2"]{ --shift-warna:var(--grafik-2); }
.warna-pilih [data-warna="grafik-3"]{ --shift-warna:var(--grafik-3); } .warna-pilih [data-warna="grafik-4"]{ --shift-warna:var(--grafik-4); }
.warna-pilih [data-warna="grafik-5"]{ --shift-warna:var(--grafik-5); } .warna-pilih [data-warna="grafik-6"]{ --shift-warna:var(--grafik-6); }
.shift-chip[data-libur]::before{ background:transparent; border:1px dashed var(--text-dim); }
button.shift-chip{ cursor:pointer; min-height:32px; }
/* Modal besar (form panjang bertipe, mis. Pola Kerja): laptop 1040px, HP layar penuh */
.modal-box.modal-besar{ max-width:1040px; }
@media (max-width:575px){ .modal-box.modal-besar{ max-width:none; height:100%; max-height:100%; border-radius:0; } }
/* Kartu pilihan (radio) dengan ikon + penjelasan singkat */
.pilih-kartu{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-2); min-width:0; }
@media (max-width:767px){ .pilih-kartu{ grid-template-columns:minmax(0, 1fr); } }
.form-field .pilih-kartu label{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); cursor:pointer; font-family:'Inter'; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text); transition:border-color .15s, box-shadow .15s; }
.pilih-kartu input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.pilih-kartu-ikon{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--tag-bg); color:var(--accent); }
.pilih-kartu b{ display:block; margin-bottom:2px; font-size:14px; }
.pilih-kartu .tx-small{ display:block; }
.form-field .pilih-kartu label:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.form-field .pilih-kartu label:has(input:checked) .pilih-kartu-ikon{ background:var(--accent); color:var(--bg-raised); }
.pilih-kartu label:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
/* Judul bagian di dalam .form-grid */
.form-bagian-judul{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin-top:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line); font-size:13px; font-weight:700; color:var(--text); }
.form-bagian-judul[hidden]{ display:none; }
.form-bagian-judul i{ color:var(--accent); }
.aturan-petunjuk.span-penuh{ grid-column:1 / -1; margin-bottom:0; }
/* Langkah bernomor di dalam petunjuk (li = teks biasa, bukan flex seperti daftar aturan) */
.aturan-petunjuk .petunjuk-langkah{ list-style:none; counter-reset:langkah; margin:0 0 var(--sp-2); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.aturan-petunjuk .petunjuk-langkah li{ display:block; position:relative; padding-left:30px; line-height:1.5; counter-increment:langkah; }
.aturan-petunjuk .petunjuk-langkah li::before{ content:counter(langkah); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--bg-raised); font-size:11px; font-weight:700; }
.rotasi-langkah{ display:flex; align-items:center; gap:6px; margin:var(--sp-3) 0 var(--sp-1); font-size:12px; font-weight:600; color:var(--text-dim); }
.rotasi-langkah i{ color:var(--accent); }
.rotasi-urutan:empty::before{ content:attr(data-kosong); align-self:center; font-size:12px; color:var(--text-dim); }
.shift-chip small{ font-weight:400; color:var(--text-dim); }
.rotasi-urutan .fa-grip-vertical{ color:var(--text-dim); }
.rotasi-palet, .rotasi-urutan{ display:flex; flex-wrap:wrap; gap:var(--sp-2); min-width:0; }
.rotasi-urutan{ min-height:48px; padding:var(--sp-2); border:1px dashed var(--line); border-radius:var(--radius-sm); margin-top:var(--sp-2); }
.rotasi-urutan .shift-chip{ cursor:grab; min-height:32px; touch-action:none; }
.rotasi-urutan .shift-chip .rotasi-hapus{ border:0; background:none; color:var(--text-dim); padding:0 0 0 4px; cursor:pointer; min-width:24px; min-height:24px; }
.rotasi-urutan .ui-sortable-helper{ box-shadow:var(--shadow-sm); }
.rotasi-pratinjau{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--sp-1); margin-top:var(--sp-2); min-width:0; }
.rotasi-pratinjau > div{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--text-dim); min-width:0; }
.rotasi-pratinjau .shift-chip{ padding:2px 6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:575px){ .rotasi-pratinjau{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
/* Monitoring Kehadiran: judul baris statistik di atas kartu filter */
.mk-stat-kepala{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:var(--sp-4) 0 var(--sp-3); min-width:0; }
.mk-stat-kepala b{ font-size:var(--fs-14); }
/* Kartu filter 4 kolom (Monitoring): HP 2 · tablet ≥768 & laptop 4 per baris; ikon kiri, angka besar, label, kaki opsional (progres) */
@media (min-width:768px){ .kartu-filter-wadah.kf-4{ grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-3); } }
.kf-4 .kf-bungkus > .kartu-filter{ grid-template-areas:"ik n" "ik l" "f f"; column-gap:14px; row-gap:2px; padding:14px 44px 14px 16px; }
.kf-4 .kf-bungkus .kf-ik{ width:44px; height:44px; font-size:19px; border-radius:12px; }
.kf-4 .kf-bungkus .kf-n{ font-size:26px; align-self:end; }
.kf-4 .kf-bungkus .kf-l{ align-self:start; color:var(--text-dim); font-weight:600; }
.kf-4 .kf-bungkus .kf-info{ top:10px; right:10px; }
.kf-progres{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin-top:10px; color:var(--text-dim); font-weight:400; }
.kf-progres b{ color:var(--kt); font-size:var(--fs-13); }
.kf-progres .progress-bar > span{ background:var(--kt); }
@media (max-width:575px){ .kf-4 .kf-bungkus > .kartu-filter{ grid-template-areas:"ik n" "l l" "f f"; padding:12px 40px 12px 12px; } .kf-4 .kf-bungkus .kf-ik{ width:36px; height:36px; font-size:16px; } .kf-4 .kf-bungkus .kf-n{ font-size:22px; } }

/* Roster & Jadwal Shift 4217 (B3) — matriks pegawai × tanggal; HP = daftar per hari */
.roster-filter{ margin-bottom:var(--sp-3); padding:var(--sp-3); min-width:0; }
.roster-filter .form-grid-4{ display:grid; grid-template-columns:1fr; gap:0 16px; }
.roster-filter-aksi{ display:flex; gap:var(--sp-2); justify-content:flex-end; }
.roster{ min-width:0; padding:var(--sp-3); }
.roster.is-memuat{ opacity:.6; cursor:progress; }
.roster-nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-3); min-width:0; }
.roster-nav-tgl, .roster-nav-mode{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; min-width:0; }
.roster-judul{ min-width:150px; text-align:center; }
.roster-scroll{ display:none; position:relative; overflow-x:auto; min-width:0; border:1px solid var(--line); border-radius:var(--radius-md); }
.roster-tabel{ border-collapse:separate; border-spacing:0; width:100%; font-size:var(--fs-13); }
.roster-tabel th, .roster-tabel td{ padding:4px 3px; border-bottom:1px solid var(--line); text-align:center; background:var(--bg-raised); }
.roster-tabel .roster-nama{ position:sticky; left:0; z-index:1; min-width:170px; max-width:220px; text-align:left; padding:6px 10px; font-weight:400; }
.roster-tabel .roster-nama b, .roster-tabel .roster-nama .tx-small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster-tabel .roster-cek{ width:34px; min-width:34px; }
.roster-hari{ min-width:44px; font-weight:400; }
.roster-hari span{ display:block; font-size:11px; color:var(--text-dim); }
.roster-hari.is-hariini{ box-shadow:inset 0 -3px 0 var(--tema); }
.roster-tabel .is-akhir{ background:var(--bg); }
.roster-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:32px; padding:0; border:1px dashed transparent; border-radius:var(--radius-md); background:none; cursor:pointer; }
.roster-btn:hover, .roster-btn:focus-visible{ border-color:var(--tema); }
.roster-kosong{ color:var(--text-dim); }
.roster-tanda{ width:5px; height:5px; border-radius:50%; background:var(--warn, #b7791f); margin-left:2px; }
.roster-ringkas td, .roster-ringkas th{ font-size:11px; vertical-align:top; }
.roster-hit{ display:block; white-space:nowrap; } .roster-hit b{ margin-right:3px; }
.roster-kaki{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-3); }
.roster-hal{ display:flex; gap:var(--sp-2); }
.roster-hp{ display:block; }
.roster-hp-hari{ border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:var(--sp-2); background:var(--bg-raised); }
.roster-hp-hari summary{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; cursor:pointer; min-height:44px; }
.roster-hp-hari ul{ list-style:none; margin:0; padding:0 12px 8px; }
.roster-hp-hari li{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--line); min-width:0; }
.roster-hp-hari li > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:576px){ .roster-filter .form-grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:768px){ .roster-scroll{ display:block; } .roster-hp{ display:none; } }
@media (min-width:992px){ .roster-filter .form-grid-4{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* Tukar Shift — daftar kartu di Layanan Mandiri + aturan di dialog (B3) */
.tukar-kartu{ min-width:0; padding:var(--sp-3); }
.tukar-daftar{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.tukar-item{ --tk:var(--text-dim); position:relative; display:grid; gap:var(--sp-3); padding:var(--sp-4, 16px); min-width:0; border:1px solid var(--line); border-left:4px solid var(--tk); border-radius:var(--radius-md); background:var(--bg-raised); }
.tukar-item.tukar-warn{ --tk:var(--gold-500); } .tukar-item.tukar-ok{ --tk:var(--teal-500); } .tukar-item.tukar-danger{ --tk:var(--danger-600); }
.tukar-item.is-sorot{ box-shadow:0 0 0 3px color-mix(in srgb, var(--tk) 30%, transparent); }
.tukar-atas{ display:flex; align-items:center; gap:12px; min-width:0; }
.tukar-ikon{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:color-mix(in srgb, var(--tk) 16%, transparent); color:var(--tk); }
.tukar-judul{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tukar-judul b{ overflow-wrap:anywhere; }
.tukar-fakta{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; margin:0; padding:12px; border-radius:var(--radius-md); background:var(--tag-bg); }
.tukar-fakta > div{ min-width:0; }
.tukar-fakta dt{ font-size:11.5px; color:var(--text-dim); margin:0 0 2px; }
.tukar-fakta dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.tukar-fakta-lebar{ grid-column:1 / -1; }
.tukar-status{ display:flex; align-items:flex-start; gap:8px; color:var(--text-dim); }
.tukar-status .fas{ margin-top:2px; color:var(--tk); }
.tukar-item .tukar-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
@media (min-width:768px){ .tukar-fakta{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.tukar-aturan{ margin-bottom:var(--sp-3); padding:12px 14px; border-radius:var(--radius-md); background:var(--info-100); border:1px solid color-mix(in srgb, var(--info-600) 25%, transparent); font-size:13px; }
.tukar-aturan-judul{ display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--info-600); }
.tukar-aturan ol{ margin:0; padding-left:20px; display:grid; gap:4px; }
.tab-hubung{ margin-bottom:var(--sp-3); }
.tab-hubung .tab-btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 12px; white-space:nowrap; }
.tab-hubung .tab-btn .fas{ font-size:.9em; opacity:.8; }
.tab-hubung .tab-btn.active .fas{ opacity:1; }

/* Notifikasi lonceng — segmen Semua/Belum dibaca + percantik (B3) */
.notif-kepala{ padding:14px 14px 8px; border-bottom:none; }
.notif-pop-judul{ font-size:16px; }
.notif-segmen{ display:flex; gap:4px; margin:0 14px 10px; padding:3px; background:var(--tag-bg); border-radius:var(--radius-full); }
.notif-segmen-btn{ flex:1 1 0; min-height:34px; padding:0 12px; border:0; border-radius:var(--radius-full); background:transparent; color:var(--text-dim); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.notif-segmen-btn:hover{ color:var(--text); }
.notif-segmen-btn.aktif{ background:var(--bg-raised); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.notif-segmen-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.notif-daftar{ padding:0 8px 6px; }
.notif-item{ gap:12px; margin-bottom:4px; padding:12px; border:0; border-radius:var(--radius-md); }
.notif-item:last-child{ margin-bottom:0; }
.notif-item.is-baru{ background:var(--info-100); box-shadow:inset 3px 0 0 var(--info-600); }
.notif-ikon{ width:38px; height:38px; border-radius:var(--radius-md); font-size:15px; }
.notif-judul{ font-size:14px; }
.notif-titik{ margin-top:5px; box-shadow:0 0 0 3px color-mix(in srgb, var(--info-600) 22%, transparent); }
.notif-kosong{ padding:32px 16px; color:var(--text-dim); }
.notif-kaki{ padding:6px 8px; }
.notif-kaki .menu-item{ min-height:40px; border-radius:var(--radius-md); }
.sheet-notif .notif-segmen{ margin:0 0 10px; }
.sheet-notif .notif-daftar{ padding:0; }

/* Notifikasi — penyempurnaan (B3): daftar baris rata dengan pemisah, penanda belum dibaca halus, ajakan push ringkas */
.notif-kepala{ padding:12px 14px 6px; }
.notif-kepala .btn{ min-height:34px; padding:0 12px; font-size:12.5px; }
.notif-ajak{ margin:4px 14px 8px; padding:8px 8px 8px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); gap:8px; }
.notif-ajak .btn{ min-height:32px; padding:0 12px; font-size:12.5px; }
.notif-ajak-tutup{ width:32px; min-height:32px; border-radius:var(--radius-full); }
.notif-segmen{ margin:2px 14px 6px; }
.notif-segmen-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; font-size:13px; }
.notif-segmen-n{ min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-full); background:var(--info-600); color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; }
.notif-daftar{ padding:0 6px 4px; }
.notif-item{ margin:0; padding:12px 10px; border-radius:0; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:0; }
.notif-item.is-baru{ background:transparent; box-shadow:none; }
.notif-item.is-baru .notif-judul{ color:var(--text); }
.notif-item:not(.is-baru) .notif-judul{ font-weight:600; color:var(--text-dim); }
.notif-item:hover, .notif-item:focus-visible{ background:var(--tag-bg); border-radius:var(--radius-md); }
.notif-ikon{ width:36px; height:36px; font-size:14px; border-radius:var(--radius-full); }
.notif-item:not(.is-baru) .notif-ikon{ opacity:.7; }
.notif-judul{ font-size:13.5px; line-height:1.3; }
.notif-isi{ font-size:12.5px; line-height:1.4; }
.notif-titik{ width:9px; height:9px; margin-top:6px; box-shadow:none; background:var(--info-600); }
.notif-kosong{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 20px; text-align:center; }
.notif-kosong .fas{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--tag-bg); font-size:22px; color:var(--accent); }
.notif-kosong p{ margin:0; max-width:240px; }
.notif-item.is-baru{ background:color-mix(in srgb, var(--info-600) 7%, transparent); }

/* Tukar Shift — rincian dampak jadwal (B3) */
.tukar-dampak{ display:grid; gap:10px; padding:12px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); }
.tukar-dampak-judul{ display:flex; align-items:center; gap:8px; color:var(--accent); }
.tukar-dampak-hari{ display:grid; gap:6px; min-width:0; }
.tukar-dampak-tgl{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; }
.tukar-dampak ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tukar-dampak li{ display:grid; grid-template-columns:minmax(90px,auto) auto 1fr; align-items:center; gap:4px 12px; min-width:0; }
.tukar-ubah{ display:inline-flex; align-items:center; gap:6px; }
.tukar-ubah .fas{ color:var(--text-dim); font-size:12px; }
.tukar-chip-baru{ border-color:var(--accent); font-weight:800; }
.tukar-dampak li small{ color:var(--text-dim); min-width:0; overflow-wrap:anywhere; }
@media (max-width:575px){ .tukar-dampak li{ grid-template-columns:1fr auto; } .tukar-dampak li small{ grid-column:1 / -1; } }

.tukar-pratinjau{ margin-top:var(--sp-2); }
.tukar-pratinjau .tukar-dampak-judul{ margin-bottom:8px; }
.tukar-pratinjau:not([hidden]){ display:grid; gap:10px; padding:12px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--tag-bg); }
.tukar-pratinjau-galat{ border-color:var(--danger-600) !important; } .tukar-pratinjau-galat .tukar-dampak-judul{ color:var(--danger-600); }
.tukar-pratinjau .tukar-dampak-hari ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tukar-pratinjau .tukar-dampak-hari li{ display:grid; grid-template-columns:minmax(90px,auto) auto 1fr; align-items:center; gap:4px 12px; min-width:0; }
.tukar-pratinjau .tukar-dampak-hari small{ color:var(--text-dim); overflow-wrap:anywhere; }
@media (max-width:575px){ .tukar-pratinjau .tukar-dampak-hari li{ grid-template-columns:1fr auto; } .tukar-pratinjau .tukar-dampak-hari small{ grid-column:1 / -1; } }
.tukar-aturan[hidden]{ display:none; }
.tukar-aturan-tutup{ margin-left:auto; width:32px; height:32px; }
.tukar-aturan ol{ line-height:1.5; }
.tukar-aturan{ background:var(--bg-raised); border:1px solid var(--line); }

.tukar-legenda{ margin:0; color:var(--text-dim); }

.tukar-peringatan{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--radius-md); background:var(--warning-100); color:var(--text); border:1px solid color-mix(in srgb, var(--warning-600) 35%, transparent); font-size:13px; }
.tukar-peringatan > .fas{ color:var(--warning-600); margin-top:3px; }
.tukar-peringatan ul{ margin:4px 0 0; padding-left:18px; display:grid; gap:2px; }

/* ---- Surat & Template HRIS (D1, 4228): editor teks sederhana + kertas pratinjau ---- */
.surat-alat{ display:flex; flex-wrap:wrap; gap:var(--sp-1); padding:var(--sp-2); border:1px solid var(--line-strong); border-bottom:0; border-radius:var(--radius-md) var(--radius-md) 0 0; background:var(--bg-alt); min-width:0; }
.surat-alat .icon-btn{ min-width:36px; min-height:36px; }
.surat-editor{ min-height:220px; max-height:46vh; overflow:auto; padding:var(--sp-3); border:1px solid var(--line-strong); border-radius:0 0 var(--radius-md) var(--radius-md); background:var(--bg-raised); color:var(--text); font-size:var(--fs-14); line-height:1.6; min-width:0; }
.surat-editor:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.surat-editor table, .surat-kertas table{ border-collapse:collapse; width:100%; }
.surat-editor td, .surat-editor th{ border:1px dashed var(--line-strong); padding:4px 8px; vertical-align:top; }
.surat-kertas td, .surat-kertas th{ padding:4px 8px; vertical-align:top; }
.surat-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.surat-chip{ border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:var(--radius-full); padding:2px 10px; font-size:var(--fs-12); min-height:28px; cursor:pointer; }
.surat-kertas{ padding:var(--sp-4); border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); font-size:var(--fs-14); line-height:1.6; max-height:50vh; overflow:auto; min-width:0; overflow-wrap:anywhere; }

.surat-chip:hover, .surat-chip:focus-visible{ filter:brightness(.88); }
.surat-grup{ display:flex; flex-wrap:wrap; gap:2px; padding-right:var(--sp-2); margin-right:var(--sp-1); border-right:1px solid var(--line); align-items:center; }
.surat-grup:last-child{ border-right:0; }
.surat-grup-pilih{ gap:var(--sp-1); }
.surat-pilih{ height:36px; min-width:0; max-width:130px; padding:0 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); font-size:var(--fs-13); }
.surat-warna{ position:relative; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.surat-warna input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.surat-bar{ border-radius:0; align-items:center; border-bottom:0; }
.surat-bar input[type=text], .surat-bar input[type=number]{ height:34px; padding:0 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text); }
.surat-form{ --pv-lebar:40%; display:grid; grid-template-columns:minmax(0,1fr) var(--pv-lebar); gap:var(--sp-4); align-items:start; }
.surat-kiri{ min-width:0; }
.surat-pv{ position:sticky; top:calc(var(--topbar-h, 56px) + var(--sp-3)); min-width:0; max-height:calc(100vh - var(--topbar-h, 56px) - 2 * var(--sp-3)); display:flex; flex-direction:column; gap:var(--sp-2); }
.surat-pv .surat-kertas{ flex:1 1 auto; max-height:none; overflow:auto; }
.surat-pv-kepala{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.surat-pv-alat{ margin-left:auto; display:flex; gap:2px; }
.surat-editor{ min-height:420px; max-height:70vh; }
.surat-editor blockquote, .surat-kertas blockquote{ margin:0 0 8px 12px; padding-left:12px; border-left:3px solid var(--line-strong); }
.surat-editor [style*="page-break-after"], .surat-kertas [style*="page-break-after"]{ height:0; margin:14px 0; border-top:2px dashed var(--line-strong); }
@media (max-width:991px){
  .surat-form{ grid-template-columns:minmax(0,1fr); }
  .surat-pv{ position:static; max-height:none; }
  .surat-pv-alat [data-pv^="lebar"]{ display:none; }
}

/* ---- SweetAlert2 (semua modul): tampilan premium selaras tema (token, mode gelap ikut). Popup 'sambutan' & toast punya gaya sendiri. ---- */
.swal2-container.swal2-backdrop-show{ background:rgba(11,25,20,.52); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast){ width:min(26em, calc(100% - 32px)); padding:36px 28px 26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-lg); font-family:inherit; animation-duration:.22s }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-title{ margin:0 0 8px; padding:0; font-family:'Plus Jakarta Sans', inherit; font-weight:800; font-size:1.25rem; line-height:1.3; letter-spacing:-.01em; color:var(--text) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-content, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-html-container{ margin:0; padding:0; color:var(--text-dim); font-size:.95rem; line-height:1.6; text-align:center }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon{ width:68px; height:68px; margin:0 auto 20px; border-width:3px; box-sizing:content-box }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon .swal2-icon-content{ font-size:2.4rem; font-weight:700 }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-warning{ color:var(--warning-600); border-color:color-mix(in srgb, var(--warning-600) 45%, transparent); background:var(--warning-100) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-question, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-info{ color:var(--info-600); border-color:color-mix(in srgb, var(--info-600) 45%, transparent); background:var(--info-100) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-error{ color:var(--danger-600); border-color:color-mix(in srgb, var(--danger-600) 45%, transparent); background:var(--danger-100) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-error [class^=swal2-x-mark-line]{ background-color:var(--danger-600) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-success{ color:var(--success-600); border-color:transparent; background:transparent }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring{ border:3px solid color-mix(in srgb, var(--success-600) 40%, transparent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-success [class^=swal2-success-line]{ background-color:var(--success-600) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-success [class^=swal2-success-circular-line], .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix{ background:var(--bg-raised) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-actions{ margin:26px 0 0; gap:12px; flex-wrap:wrap; width:100% }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-styled{ flex:1 1 0; min-width:120px; min-height:46px; margin:0; padding:0 22px; border-radius:var(--radius-md); font-family:inherit; font-size:.95rem; font-weight:700; letter-spacing:.01em; transition:filter .15s, transform .15s, box-shadow .15s, background .15s; box-shadow:none }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-styled:focus{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-confirm{ background:var(--accent) !important; color:var(--bg) !important; border:1px solid var(--accent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-confirm:hover{ filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 10px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-confirm.swal-bahaya{ background:var(--danger-600) !important; color:#fff !important; border-color:var(--danger-600) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-confirm.swal-bahaya:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--danger-600) 30%, transparent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-cancel, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-deny{ background:transparent !important; color:var(--text) !important; border:1px solid var(--line-strong) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-cancel:hover, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-deny:hover{ background:var(--bg-alt) !important; transform:translateY(-1px) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-close{ top:10px; right:10px; width:36px; height:36px; border-radius:50%; color:var(--text-dim); font-size:1.6rem; transition:background .15s, color .15s }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-close:hover{ background:var(--bg-alt); color:var(--text); transform:none }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-input, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-textarea, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-select{ margin:16px 0 0; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); font-size:.95rem; box-shadow:none }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-input:focus, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-textarea:focus, .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-validation-message{ margin:16px -28px -26px; padding:12px 20px; background:var(--danger-100); color:var(--danger-600); font-size:.85rem; font-weight:600 }
.swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-footer{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--text-dim); font-size:.85rem }
.swal2-popup.swal2-toast{ padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text); box-shadow:var(--shadow-lg); }
.swal2-popup.swal2-toast .swal2-title{ margin:0 8px; font-size:.9rem; font-weight:600; color:var(--text); }
@media (max-width:575px){
  .swal2-popup:not(.sambutan-popup):not(.swal2-toast){ width:calc(100% - 24px); padding:30px 20px 20px; }
  .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-actions{ flex-direction:column-reverse; }
  .swal2-popup:not(.sambutan-popup):not(.swal2-toast) .swal2-styled{ width:100%; flex:none; }
}
@media (prefers-reduced-motion:reduce){ .swal2-popup, .swal2-container, .swal2-icon, .swal2-icon *{ animation:none !important; transition:none !important; } }
.surat-ttd-pratinjau{ display:flex; align-items:center; justify-content:center; min-height:84px; margin-bottom:var(--sp-2); padding:var(--sp-2); border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:var(--bg-alt); }
.surat-ttd-pratinjau img{ max-height:80px; max-width:100%; background:#fff; border-radius:var(--radius-sm); }


/* ===== Petak ringkasan halaman detail (.ringkas-petak; D2 offboarding, generik): dl > div > dt (ikon + label) + dd (angka) + .tx-small; nada .is-ok/.is-warn/.is-danger ===== */
.ringkas-petak{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); margin:0 0 var(--sp-4); min-width:0; }
@media (min-width:992px){ .ringkas-petak{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ringkas-petak > div{ min-width:0; padding:var(--sp-3) var(--sp-4); background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.ringkas-petak dt{ display:flex; align-items:center; gap:6px; margin:0; font-size:var(--fs-12); color:var(--text-dim); }
.ringkas-petak dt .fas{ color:var(--accent); }
.ringkas-petak dd{ margin:6px 0 0; font-size:var(--fs-20); font-weight:700; line-height:1.2; color:var(--text); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.ringkas-petak dd .tx-small{ display:block; margin-top:4px; font-size:var(--fs-12); font-weight:400; color:var(--text-dim); }
.ringkas-petak .is-ok dd{ color:var(--success-600); } .ringkas-petak .is-warn dd{ color:var(--warning-600); } .ringkas-petak .is-danger dd{ color:var(--danger-600); }
.ringkas-petak .pf-bar{ display:block; min-width:0; margin-top:8px; }

/* ===== Daftar cek (.cek-daftar; checklist clearance D2, generik): li.is-selesai / .is-na > .cek-ikon + .cek-isi (b + .tx-small) + .cek-aksi ===== */
.cek-daftar{ list-style:none; margin:0; padding:0; min-width:0; }
.cek-daftar > li{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); min-width:0; }
.cek-daftar > li:last-child{ border-bottom:none; }
.cek-ikon{ flex:none; display:grid; place-items:center; width:28px; height:28px; border:1.5px solid var(--line-strong); border-radius:50%; color:var(--text-dim); font-size:12px; }
.cek-daftar > li.is-selesai .cek-ikon{ background:var(--success-600); border-color:var(--success-600); color:#fff; }
.cek-daftar > li.is-na .cek-ikon{ background:var(--bg-alt); border-style:dashed; }
.cek-isi{ flex:1; min-width:0; }
.cek-isi > b{ display:block; color:var(--text); overflow-wrap:anywhere; }
.cek-daftar > li.is-selesai .cek-isi > b, .cek-daftar > li.is-na .cek-isi > b{ color:var(--text-dim); }
.cek-isi .tx-small{ display:block; margin-top:2px; overflow-wrap:anywhere; }
.cek-aksi{ flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-1); }
@media (max-width:575px){ .cek-daftar > li{ flex-wrap:wrap; } .cek-aksi{ width:100%; justify-content:flex-start; padding-left:40px; } }

/* ===== Skala kepuasan geser (.skala-puas; exit interview D2): input[type=range] 1–5 + output teks + label ujung ===== */
.skala-puas{ display:grid; gap:var(--sp-2); min-width:0; }
.skala-puas input[type="range"]{ width:100%; height:32px; margin:0; accent-color:var(--accent-soft); cursor:grab; touch-action:pan-y; }
.skala-puas input[type="range"]:active{ cursor:grabbing; }
.skala-puas output{ justify-self:center; padding:4px 14px; border-radius:var(--radius-full); background:var(--tag-bg); color:var(--accent); font-weight:700; font-size:var(--fs-13); }
.skala-puas-ujung{ display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-12); color:var(--text-dim); }
/* .nilai-baris.nilai-teks = nilai berupa teks (bukan angka): huruf biasa, boleh patah. Stepper ringkas: di HP hanya langkah aktif yang berlabel (tanpa scroll). */
.nilai-baris.nilai-teks dd{ min-width:0; font-family:inherit; font-size:var(--fs-14); overflow-wrap:anywhere; }
.nilai-baris.nilai-teks dt{ flex:none; color:var(--text-dim); }
.stepper-garis li small{ display:block; font-size:var(--fs-12); font-weight:400; color:var(--text-dim); }
@media (max-width:575px){ .stepper-garis.stepper-ringkas{ overflow:visible; } .stepper-garis.stepper-ringkas li{ flex:0 0 auto; } .stepper-garis.stepper-ringkas li:not(.is-aktif) > span{ display:none; } .stepper-garis.stepper-ringkas li.is-aktif{ flex:1 1 auto; min-width:0; } }
/* Baris label–nilai berisi nominal tersamar (.gaji-nilai: satu baris, tak boleh patah): label di atas, nilai di bawah selebar kartu agar tidak terpotong. */
.nilai-baris > div[data-komp]{ flex-direction:column; align-items:stretch; gap:var(--sp-1); min-width:0; }
.nilai-baris > div[data-komp] dt{ flex:1 1 auto; min-width:0; }
.nilai-baris > div[data-komp] dd{ text-align:left; min-width:0; }

/* ===== Rincian pengunduran diri untuk pegawai (.kl-*; D2b, kartu #pfKeluar Profil Saya): blok bertumpuk 1 kolom (HP), 2 kolom di laptop ===== */
.kl-rincian{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); margin-top:var(--sp-3); min-width:0; }
/* kartu full-width (.pf-penuh): Jenis/Status/Efektif sebagai petak sejajar; rincian 3 kolom, perkiraan penyelesaian akhir di baris atas */
.pf-penuh .pf-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
.pf-penuh .pf-item, .pf-penuh .pf-item:first-child{ padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt); }
@media (min-width:576px){ .pf-penuh .pf-list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:992px){
  .kl-rincian{ grid-template-columns:repeat(3, minmax(0,1fr)); align-items:stretch; }
  .kl-rincian > .rekap-akhir{ grid-column:1 / -1; order:-1; }
  .kl-rincian > .kl-blok{ height:100%; }
  .kl-rincian > .kl-cek-blok{ grid-row:span 2; }   /* checklist tinggi di kiri; kasbon + cuti di kanan atas */
  .kl-rincian:not(.kl-ada-exit) > .kl-cek-blok{ grid-row:auto; }
  .kl-rincian > .kl-exit-blok{ grid-column:2 / -1; }
}
.kl-blok{ min-width:0; padding:var(--sp-3) var(--sp-4); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md); }
.kl-judul{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); font-weight:600; color:var(--text); }
.kl-judul > .pill{ margin-left:auto; }
.kl-cek, .kl-daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.kl-cek li{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.kl-cek li > i{ color:var(--text-dim); }
.kl-cek li.is-selesai > i{ color:var(--success-600); }
.kl-cek li b, .kl-daftar li > b{ font-weight:600; }
.kl-cek li > span:nth-child(2){ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow-wrap:anywhere; }
.kl-cek li > span small, .kl-daftar li > span small{ display:block; font-size:var(--fs-12); color:var(--text-dim); }
.kl-cek li.is-na b{ text-decoration:line-through; color:var(--text-dim); }
.kl-daftar li{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-width:0; }
.kl-daftar li > span, .kl-daftar li > b{ min-width:0; overflow-wrap:anywhere; }
.kl-daftar li.kl-saran{ flex-direction:column; align-items:flex-start; }
.kl-total{ flex-direction:row; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-2); }
.kl-blok.rekap-akhir{ margin-bottom:0; background:var(--accent-100, var(--bg-alt)); }
@media (max-width:575px){ .kl-total .btn{ min-height:44px; } }

/* ===== Kartu rekap penyelesaian akhir (.rekap-akhir; D2): kepala (ikon + judul | total besar) + rincian petak. Jarak bawah sama dengan kartu di .pg-detail-grid ===== */
.rekap-akhir{ margin-bottom:var(--sp-4); min-width:0; }
.rekap-akhir-kepala{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-6); min-width:0; }
.rekap-akhir-judul{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; flex:1 1 280px; }
.rekap-akhir-judul .tx-h3{ margin:0 0 2px; }
.rekap-akhir-total{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0; margin-left:auto; }
.rekap-akhir-total .gaji-nilai b{ font-size:var(--fs-20); font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.rekap-akhir-total .gaji-nilai b.text-danger{ color:var(--danger-600); }
.rekap-akhir-rincian{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); }
@media (min-width:576px){ .rekap-akhir-rincian{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:992px){ .rekap-akhir-rincian{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.rekap-sel{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:var(--sp-3) var(--sp-4); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md); }
.rekap-sel > span{ font-size:var(--fs-12); color:var(--text-dim); }
.rekap-sel > b{ font-size:var(--fs-16); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.rekap-sel > small{ font-size:var(--fs-12); color:var(--text-dim); overflow-wrap:anywhere; }
.rekap-sel.is-kurang > b{ color:var(--danger-600); } .rekap-sel.is-kosong > b{ color:var(--text-dim); }
@media (max-width:575px){ .rekap-akhir-total{ align-items:flex-start; margin-left:0; width:100%; } }

/* ===== Kartu keputusan penyetuju (.putus-kartu; D2, generik): teks + tombol Tolak/Setujui di halaman detail yang dibuka dari notifikasi persetujuan ===== */
.putus-kartu{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-6); margin-bottom:var(--sp-4); border-left:4px solid var(--warning-600); min-width:0; }
.putus-isi{ display:flex; align-items:flex-start; gap:var(--sp-3); flex:1 1 320px; min-width:0; }
.putus-isi .tx-h3{ margin:0 0 4px; } .putus-isi .tx-small{ margin:0; }
.putus-aksi{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-left:auto; }
@media (max-width:575px){ .putus-aksi{ width:100%; margin-left:0; } .putus-aksi .btn{ flex:1 1 0; } }

/* Tabel quick view mode daftar (tabel.polos): tanpa penekanan kolom terakhir; sub-teks di bawah nama; tautan nama = rbac-nama. */
.tabel-polos td .tx-small{ display:block; color:var(--text-dim); }
.tabel-polos td a.rbac-nama{ font-weight:600; }

/* Indikator geser tab/segmen yang terpotong: tepi memudar di sisi yang masih bisa digeser (CSS murni, scroll-driven animation;
   browser tanpa dukungan = tanpa pemudaran, tab tetap bisa digeser). Tak ada overflow = timeline tidak aktif = tanpa pemudaran. */
@property --geser-kiri{ syntax:'<length>'; inherits:false; initial-value:0px; }
@property --geser-kanan{ syntax:'<length>'; inherits:false; initial-value:0px; }
@keyframes geser-kiri-muncul{ from{ --geser-kiri:0px; } to{ --geser-kiri:32px; } }
@keyframes geser-kanan-hilang{ from{ --geser-kanan:32px; } to{ --geser-kanan:0px; } }
@supports (animation-timeline: scroll()){
  .tab-list-geser, .dk-tabs .tab-list, .portal-tabs .tab-list, .peng .tab-list{
    animation: geser-kiri-muncul linear both, geser-kanan-hilang linear both;
    animation-timeline: scroll(self x), scroll(self x);
    animation-range: 0 48px, calc(100% - 48px) 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--geser-kiri), #000 calc(100% - var(--geser-kanan)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--geser-kiri), #000 calc(100% - var(--geser-kanan)), transparent 100%);
  }
}