/* ================================================================
   SIGMA - Feature / Page-specific Components
   File 5 of 5: Page layouts, dashboard widgets, domain components.
   Depends on: sigma-tokens.css, sigma-base.css, sigma-components.css
   ================================================================ */

/* ================================================================
   Page header
   ================================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
    background: transparent;
}
.page-header__inner,
.page-header__meta { flex: 1; min-width: 0; }
.page-header__title {
    font-family: var(--font-d);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
}
.page-header__subtitle {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 0.3rem;
    line-height: 1.5;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
/* Centered variant (wizard/form pages) */
.page-header--centered {
    text-align: center;
    justify-content: center;
    padding-block: var(--sp-6) var(--sp-3);
}
.page-header--centered .page-header__title { font-size: 1.55rem; }
.page-header--centered .page-header__title::after { margin-inline: auto; }
.page-header--centered .page-header__subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }

@media (max-width: 600px) {
    .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .page-header__actions { width: 100%; flex-wrap: wrap; }
    .page-header__title { font-size: var(--text-lg); }
    .page-header__subtitle { font-size: var(--text-sm); }
}

/* ================================================================
   Section - generic content grouping
   ================================================================ */
.section { margin-bottom: var(--sp-8); }
.section__title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0 0 var(--sp-4);
}
.section__subtitle {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: -0.65rem;
    margin-bottom: var(--sp-4);
}
.section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
/* Variant: header dengan tabs di kanan title. Tabs wrap di bawah pada layar
   sempit, tetap inline pada lebar cukup. */
.section__header--with-tabs {
    align-items: flex-end;
    gap: var(--sp-3) var(--sp-5);
}
.section__header-meta { min-width: 0; flex: 1 1 auto; }
.section__header--with-tabs .tabs {
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* Section panel (card with header) */
.section-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.section-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem var(--sp-5);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}
.section-panel__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}
.section-panel__title svg { width: 0.95rem; height: 0.95rem; color: var(--accent); flex-shrink: 0; }
.section-panel__body { padding: 1.1rem var(--sp-5); }
.section-panel--warning { border-color: var(--warning-border); }
.section-panel--warning .section-panel__head { background: var(--warning-bg); border-bottom-color: var(--warning-border); }
.section-panel--warning .section-panel__title { color: var(--warning-text); }
.section-panel--warning .section-panel__title svg { color: var(--warning-text); }

/* ================================================================
   Toolbar - filter/search bar above tables
   ================================================================ */
.toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.toolbar__filters {
    display: flex;
    /* align-items: center; */
    gap: var(--sp-2);
    flex-wrap: wrap;
    /* flex: 1; */
}
.toolbar__search {
    position: relative;
    min-width: 12rem;
    border-radius: var(--radius-input, 10px);
}
.toolbar__search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9rem;
    height: 0.9rem;
    color: var(--text-faint);
    pointer-events: none;
    z-index: 1;
}
.toolbar__search .field__input { padding-left: 2rem !important; }
.toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
@media (max-width: 640px) {
    .toolbar           { flex-direction: column; align-items: stretch; }
    .toolbar__filters  { flex-direction: column; }
    .toolbar__search   { min-width: 0; width: 100%; }
    .toolbar__actions  { flex-wrap: wrap; }
}

/* Info bar (count + sort selector) */
.list-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    min-height: 1.75rem;
    margin-bottom: var(--sp-2);
}
.list-info-bar__count { font-size: 0.78rem; color: var(--text-muted); }
.list-info-bar__right { display: flex; align-items: center; gap: var(--sp-2); }
.sort-select {
    height: 2rem;
    font-size: 0.78rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ================================================================
   Page toolbar - flex row dengan slot kiri/kanan (reusable)
   ----------------------------------------------------------------
   Layout primitive untuk baris toolbar di atas tabel/grid: filter
   tabs di kiri, search + adv-toggle + view-toggle di kanan.
   Bisa di-stack vertikal pada layar sempit.

   HTML pattern:
   <div class="page-toolbar">
     <div class="page-toolbar__left">   ... filter-tabs ...   </div>
     <div class="page-toolbar__right">  ... search + toggles  </div>
   </div>

   Modifier:
   - .page-toolbar--tight  : gap lebih rapat
   - .page-toolbar--stack  : selalu vertikal
   ================================================================ */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.page-toolbar__left,
.page-toolbar__right {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    min-width: 0;
}
.page-toolbar__right { justify-content: flex-end; margin-left: auto; }
.page-toolbar__divider {
    width: 1px;
    height: 1.5rem;
    background: var(--border);
    margin: 0 var(--sp-1);
    flex-shrink: 0;
}
.page-toolbar--tight { gap: var(--sp-2); }
.page-toolbar--tight .page-toolbar__left,
.page-toolbar--tight .page-toolbar__right { gap: var(--sp-2); }
.page-toolbar--stack {
    flex-direction: column;
    align-items: stretch;
}
.page-toolbar--stack .page-toolbar__left,
.page-toolbar--stack .page-toolbar__right { width: 100%; }
.page-toolbar--stack .page-toolbar__right { justify-content: flex-start; margin-left: 0; }

@media (max-width: 768px) {
    .page-toolbar { flex-direction: column; align-items: stretch; }
    .page-toolbar__left,
    .page-toolbar__right {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    .page-toolbar__right .toolbar__search { flex: 1; min-width: 0; }
}

/* ================================================================
   Advanced filter panel - collapsible filter section (reusable)
   ----------------------------------------------------------------
   Komponen reusable untuk panel filter lanjutan yang dapat
   dibuka/tutup. Pasangkan dengan .adv-toggle (di bawah) sebagai
   trigger.

   HTML pattern (panel):
   <div class="adv-filter" id="adv-filter-panel"
        role="region" aria-label="Filter lanjutan">
     <div class="adv-filter__head">
       <span class="adv-filter__title">
         <svg>...</svg> Filter Lanjutan
       </span>
       <div class="adv-filter__head-actions">
         <span class="adv-filter__count">3 filter aktif</span>
         <button class="adv-filter__clear" type="button">Reset semua</button>
       </div>
     </div>
     <div class="adv-filter__grid">
       <div class="adv-filter__field">
         <label class="adv-filter__label" for="x">Tanggal Dari</label>
         <input id="x" class="field__input" type="date">
       </div>
       ...
     </div>
   </div>

   JS: toggle class .is-open + sync aria-expanded di trigger.
   ================================================================ */
.adv-filter {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s;
}
.adv-filter.is-open {
    max-height: 32rem;
    margin-bottom: var(--sp-4);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease 0.05s,
        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* Header (title + clear all) */
.adv-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.adv-filter__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
}
.adv-filter__title svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--accent);
    flex-shrink: 0;
}
.adv-filter__head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}
.adv-filter__count {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.adv-filter__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.75rem;
    padding: 0 0.7rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.adv-filter__clear:hover {
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}
.adv-filter__clear svg { width: 0.72rem; height: 0.72rem; flex-shrink: 0; }

/* Grid layout - auto-fill responsive */
.adv-filter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
    align-items: end;
}
.adv-filter__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.adv-filter__label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.35rem;
}

/* Footer dengan tombol terapkan/reset (optional) */
.adv-filter__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 640px) {
    .adv-filter__grid     { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ================================================================
   Advanced toggle button - trigger untuk .adv-filter (reusable)
   ----------------------------------------------------------------
   Tombol toggle dengan icon + label + count badge + chevron.
   Cocok untuk membuka panel filter lanjutan, panel sort, panel
   tambahan apapun yang collapsible.

   HTML pattern:
   <button class="adv-toggle" id="btn-adv-filter" type="button"
           aria-expanded="false" aria-controls="adv-filter-panel">
     <svg class="adv-toggle__icon">...</svg>
     <span class="adv-toggle__label">Filter Lanjutan</span>
     <span class="adv-toggle__count" hidden>0</span>
     <svg class="adv-toggle__chevron">...</svg>
   </button>

   States:
   - default              : muted bg
   - hover                : border-strong
   - aria-expanded="true" : accent tint + chevron rotated 180deg
   - .has-active          : count badge tampil + accent border
   ================================================================ */
.adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.2rem;
    padding: 0 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.adv-toggle:hover { border-color: var(--border-strong); }
.adv-toggle:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.adv-toggle__icon {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color var(--t-fast);
}
.adv-toggle__label { font-weight: 600; }
.adv-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.32rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: var(--radius-full);
    line-height: 1;
}
/* .adv-toggle__count[hidden] { display: none; } */
.adv-toggle__chevron {
    width: 0.7rem;
    height: 0.7rem;
    color: var(--text-faint);
    flex-shrink: 0;
    transition: transform var(--t-base), color var(--t-fast);
}

/* Active state - panel terbuka */
.adv-toggle[aria-expanded="true"] {
    background: var(--accent-light);
    border-color: var(--accent-ring);
    color: var(--accent);
}
.adv-toggle[aria-expanded="true"] .adv-toggle__icon,
.adv-toggle[aria-expanded="true"] .adv-toggle__chevron { color: var(--accent); }
.adv-toggle[aria-expanded="true"] .adv-toggle__chevron { transform: rotate(180deg); }

/* Variant: punya filter aktif - accent ring di sekitar */
.adv-toggle.has-active { border-color: var(--accent-ring); }
.adv-toggle.has-active .adv-toggle__icon { color: var(--accent); }

/* Responsive: di layar kecil sembunyikan label, tetap icon + count */
@media (max-width: 640px) {
    .adv-toggle__label { display: none; }
    .adv-toggle        { padding: 0 0.7rem; }
}

/* Bulk action floating bar */
.bulk-bar {
    position: fixed;
    left: 50%;
    bottom: var(--sp-6);
    transform: translateX(-50%) translateY(calc(100% + 2.5rem));
    z-index: 200;
    background: var(--surface);
    border: 1.5px solid var(--accent-ring);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 0 0 3px var(--accent-light);
    padding: 0.55rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), opacity 0.22s;
    opacity: 0;
    min-width: 20rem;
    pointer-events: none;
}
.bulk-bar.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.bulk-bar__count { font-size: 0.8rem; font-weight: 600; color: var(--accent); white-space: nowrap; flex: 1; }
.bulk-bar__actions { display: flex; align-items: center; gap: 0.4rem; }
.bulk-bar__close {
    background: none; border: none; cursor: pointer;
    color: var(--text-faint); padding: 0.2rem;
    border-radius: var(--radius-sm); display: flex;
    align-items: center; margin-left: 0.25rem;
    transition: color var(--t-fast);
}
.bulk-bar__close:hover { color: var(--text); }
.bulk-bar__close svg { width: 0.85rem; height: 0.85rem; }

/* Compact checkbox for table rows */
.sigma-cb {
    width: 1rem; height: 1rem;
    accent-color: var(--accent);
    cursor: pointer; flex-shrink: 0;
}

/* ================================================================
   Stats grid + Stat cards
   ================================================================ */

/* ── Grid layouts ────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    gap: 1rem;
}
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1200px) {
    .stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
    .stats-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stats-grid--4,
    .stats-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stat card - premium vertical ───────────────────────────── */
.stat {
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.375rem 1.375rem 1.125rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.stat:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* Glow blob at top-left corner */
.stat::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    top: -60px;
    left: -40px;
    filter: blur(50px);
    pointer-events: none;
    opacity: 0.55;
    transition: opacity var(--t-base);
}
.stat:hover::before { opacity: 0.75; }

/* Thin accent top bar */
.stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
}

/* Variant color blobs + accent bars */
.stat--accent::before  { background: rgba(34,217,124,0.35); }
.stat--accent::after   { background: linear-gradient(90deg, var(--accent), transparent); }

.stat--success::before { background: rgba(63,185,80,0.35); }
.stat--success::after  { background: linear-gradient(90deg, var(--success-text), transparent); }

.stat--warning::before { background: rgba(224,164,34,0.35); }
.stat--warning::after  { background: linear-gradient(90deg, var(--warning-text), transparent); }

.stat--danger::before  { background: rgba(247,95,88,0.35); }
.stat--danger::after   { background: linear-gradient(90deg, var(--danger-text), transparent); }

.stat--info::before    { background: rgba(88,166,255,0.30); }
.stat--info::after     { background: linear-gradient(90deg, var(--info-text), transparent); }

/* Light mode: reduce glow opacity */
[data-theme="light"] .stat::before { opacity: 0.3; }
[data-theme="light"] .stat:hover { box-shadow: var(--shadow-sm); }

/* ── Icon ────────────────────────────────────────────────────── */
.stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.stat__icon svg { width: 1.2rem; height: 1.2rem; }

.stat--accent  .stat__icon { background: var(--accent-light);  color: var(--accent);       box-shadow: 0 0 18px var(--accent-ring); }
.stat--success .stat__icon { background: var(--success-bg);    color: var(--success-text); box-shadow: 0 0 18px rgba(63,185,80,0.20); }
.stat--warning .stat__icon { background: var(--warning-bg);    color: var(--warning-text); box-shadow: 0 0 18px rgba(224,164,34,0.20); }
.stat--danger  .stat__icon { background: var(--danger-bg);     color: var(--danger-text);  box-shadow: 0 0 18px rgba(247,95,88,0.20); }
.stat--info    .stat__icon { background: var(--info-bg);       color: var(--info-text);    box-shadow: 0 0 18px rgba(88,166,255,0.18); }

/* ── Value - big mono number ─────────────────────────────────── */
.stat__value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--text);
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Label ───────────────────────────────────────────────────── */
.stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 0.375rem;
    position: relative;
    z-index: 1;
}

/* ── Footer: trend + sub ─────────────────────────────────────── */
.stat__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    position: relative;
    z-index: 1;
}

/* ── Trend change ────────────────────────────────────────────── */
.stat__change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 3px 9px;
    border-radius: var(--radius-full);
}
.stat__change svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.stat__change--up   { background: var(--success-bg); color: var(--success-text); }
.stat__change--down { background: var(--danger-bg);  color: var(--danger-text); }
.stat__change--info { background: var(--info-bg);    color: var(--info-text); }
.stat__change--warn { background: var(--warning-bg); color: var(--warning-text); }

/* ── Sub text ────────────────────────────────────────────────── */
.stat__sub {
    font-size: 0.6875rem;
    color: var(--text-faint);
}

/* Horizontal variant (legacy compat) */
.stat--horizontal { display: flex; align-items: center; gap: var(--sp-4); }
.stat--horizontal .stat__icon { margin-bottom: 0; }
.stat--horizontal .stat__body { flex: 1; min-width: 0; }

/* Responsive tweaks */
@media (max-width: 640px) {
    .stat__value { font-size: 1.6rem; }
    .stat { padding: 1rem 1rem 0.875rem; }
    .stat__icon { width: 36px; height: 36px; margin-bottom: 0.625rem; }
    .stat__icon svg { width: 1rem; height: 1rem; }
}

/* Legacy stat cards (4-column layout with header columns) */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-bottom: 1rem;
}
.stat-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    box-shadow: var(--shadow-xs);
    border-top: 3px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
    position: relative;
    overflow: hidden;
}
.stat-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.stat-card--accent   { border-top-color: var(--accent); }
.stat-card--info     { border-top-color: var(--info-text); }
.stat-card--warning  { border-top-color: var(--warning-text); }
.stat-card--success  { border-top-color: var(--success-text); }
.stat-card--danger   { border-top-color: var(--danger-text); }
.stat-card--teal     { border-top-color: var(--teal); }
.stat-card__value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text);
    font-family: var(--font-mono);
    letter-spacing: -0.075em;
    line-height: 1;
    margin-bottom: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.stat-card__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
}
.stat-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.73rem;
    font-weight: 600;
    margin-top: 0.55rem;
    cursor: pointer;
    transition: opacity var(--t-fast);
    line-height: 1;
    width: fit-content;
}
.stat-card__tag:hover { opacity: 0.7; }
.stat-card__tag svg { width: 0.65rem; height: 0.65rem; flex-shrink: 0; }
.stat-card--accent  .stat-card__tag { color: var(--accent); }
.stat-card--info    .stat-card__tag { color: var(--info-text); }
.stat-card--warning .stat-card__tag { color: var(--warning-text); }
.stat-card--success .stat-card__tag { color: var(--success-text); }
.stat-card--loading .stat-card__value {
    color: transparent;
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-sunken) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    display: inline-block;
    min-width: 3rem;
    height: 2rem;
}
.stat-card--loading .stat-card__tag { opacity: 0.25; pointer-events: none; }

@media (max-width: 640px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .stat-cards { grid-template-columns: 1fr; } }

/* Stat detail toggle */
.stat-detail-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.38rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.71rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    letter-spacing: 0.01em;
    font-family: var(--font);
}
.stat-detail-toggle-btn:hover { background: var(--surface); color: var(--text); }
.stat-detail-toggle-btn__chevron { transition: transform var(--t-base); }
.stat-detail-toggle-btn[aria-expanded="true"] .stat-detail-toggle-btn__chevron { transform: rotate(180deg); }

.stat-detail-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
}
.stat-detail-inner {
    padding: 0.875rem var(--sp-4) var(--sp-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
}
.stat-detail-group { padding-bottom: 0.25rem; }
.stat-detail-group__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding-bottom: var(--sp-2);
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.stat-detail-group__count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-detail-row {
    display: grid;
    grid-template-columns: 0.55rem 1fr 6rem 2.5rem;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.3rem 0;
    border-radius: var(--radius-sm);
}
.stat-detail-row--urgent { background: var(--danger-bg); padding: 0.3rem 0.4rem; margin: 0.1rem -0.4rem; }
.stat-detail-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
.stat-detail-label { font-size: 0.78rem; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.stat-detail-bar-wrap { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
.stat-detail-bar { height: 100%; border-radius: 99px; width: 0%; transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.stat-detail-count { font-size: 0.82rem; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-d); }
@media (max-width: 640px) { .stat-detail-inner { grid-template-columns: 1fr; } }

/* ================================================================
   Quick links (dashboard navigation grid)
   ================================================================ */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.875rem;
}
.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    text-decoration: none;
    color: var(--text);
    gap: 0.6rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.quick-link:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--text);
}
.quick-link__icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-base), transform var(--t-base);
}
.quick-link:hover .quick-link__icon { background: var(--accent); transform: scale(1.08); }
.quick-link__icon svg { width: 1.2rem; height: 1.2rem; color: var(--accent); transition: color var(--t-base); }
.quick-link:hover .quick-link__icon svg { color: var(--on-accent); }
.quick-link__label { font-size: 0.82rem; font-weight: 600; color: var(--text); line-height: 1.35; }

/* ================================================================
   Welcome banner (dashboard greeting)
   ================================================================ */
.welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
}
.welcome-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 70%);
}
.welcome-banner__body    { flex: 1; min-width: 0; }
.welcome-banner__greeting {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.welcome-banner__name {
    font-family: var(--font-d);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.welcome-banner__sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}
.welcome-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--accent-ring);
    flex-shrink: 0;
}
.welcome-banner__badge svg { width: 0.85rem; height: 0.85rem; }
@media (max-width: 640px) {
    .welcome-banner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ================================================================
   Detail page layout
   ================================================================ */
.detail-root {
    display: flex;
    flex-direction: column;
    /* gap: var(--sp-6); */
}
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 1023px) { .detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px)  { .detail-grid { grid-template-columns: 1fr; } }

.detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .detail-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .detail-grid--3 { grid-template-columns: 1fr; } }

/* Tab layout: single full-width column */
.detail-tab-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: start;
    margin-bottom: var(--sp-4);
}
.detail-tab-main { min-width: 0; }

/* Detail page header (back + actions) */
.detail-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--sp-4);
}
.detail-page-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 0;
    flex: 1;
}
.detail-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.detail-page-header__back:hover { color: var(--text); }
.detail-page-header__sep { opacity: 0.35; flex-shrink: 0; }
.detail-page-header__nomor {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Detail header card */
.detail-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
}
.detail-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.detail-header__left  { flex: 1; min-width: 0; }
.detail-header__nomor {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.detail-header__judul {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}
.detail-header__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.detail-header__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
.detail-header__context {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.detail-header__context svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.detail-header__mitra {
    margin-top: var(--sp-2);
    font-size: var(--text-base);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.detail-header__mitra svg { width: 0.875rem; height: 0.875rem; color: var(--text-faint); flex-shrink: 0; }
.detail-header__mitra strong { color: var(--text); font-weight: 600; }

/* Detail sections */
.detail-section { margin-bottom: 1.75rem; }
.detail-section__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    margin-bottom: 0.875rem;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--sp-4);
}
.detail-meta-field__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.detail-meta-field__value { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.detail-meta-field__value--muted { color: var(--text-muted); }
.detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .detail-two-col { grid-template-columns: 1fr; } }

/* Contextual status alert */
.detail-ctx-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: var(--radius-md);
    padding: 0.75rem var(--sp-4);
    font-size: 0.83rem;
    margin-bottom: var(--sp-4);
}
/* .detail-ctx-alert .alert__icon-svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; } */
.detail-ctx-alert .alert__icon-svg { margin-top: 0.05rem; font-size: 1.5rem; padding-top: 0.1rem; flex-shrink: 0; margin-top: 0.05rem; }
.detail-ctx-alert .alert__action { margin-left: auto; flex-shrink: 0; align-self: center; }

/* Info list (label:value rows) */
.info-list { display: flex; flex-direction: column; }
.info-row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0 var(--sp-4);
    padding: 0.575rem 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
}
.info-row:last-child { border-bottom: none; }
.info-row dt { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); padding-top: 0.05rem; line-height: 1.5; }
.info-row dd { font-size: var(--text-base); font-weight: 500; color: var(--text); margin: 0; min-width: 0; }
@media (max-width: 480px) {
    .info-row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.55rem 0; }
    .info-row dt { font-size: 0.68rem; }
}

/* ── info-list__row alias (used in user management detail page) ── */
.info-list__row {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0 var(--sp-4);
    padding: 0.575rem 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
}
.info-list__row:last-child { border-bottom: none; }
.info-list__row dt { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); line-height: 1.5; }
.info-list__row dd { font-size: var(--text-base); font-weight: 500; color: var(--text); margin: 0; min-width: 0; }
@media (max-width: 480px) {
    .info-list__row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.55rem 0; }
    .info-list__row dt { font-size: 0.68rem; }
}

/* ── Stat card progress track (user management list page) ──
   Tinggi 5px supaya fill bar visible & jelas di kedua mode.
   Track lebih opaque (border-strong). Fill dengan gradient + subtle glow. */
.stat-card__track {
    height: 5px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--sp-3);
    border: 1px solid var(--border);
}
.stat-card__fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card--accent  .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, transparent), var(--accent));
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent);
}
.stat-card--success .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--success-text) 75%, transparent), var(--success-text));
    box-shadow: 0 0 6px color-mix(in srgb, var(--success-text) 35%, transparent);
}
.stat-card--info    .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--info-text) 75%, transparent), var(--info-text));
    box-shadow: 0 0 6px color-mix(in srgb, var(--info-text) 35%, transparent);
}
.stat-card--teal    .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 75%, transparent), var(--teal));
    box-shadow: 0 0 6px color-mix(in srgb, var(--teal) 35%, transparent);
}
.stat-card--warning .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--warning-text) 75%, transparent), var(--warning-text));
    box-shadow: 0 0 6px color-mix(in srgb, var(--warning-text) 35%, transparent);
}
.stat-card--danger  .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--danger-text) 75%, transparent), var(--danger-text));
    box-shadow: 0 0 6px color-mix(in srgb, var(--danger-text) 35%, transparent);
}
.stat-card--neutral .stat-card__fill {
    background: linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 75%, transparent), var(--text-muted));
    box-shadow: 0 0 6px color-mix(in srgb, var(--text-muted) 35%, transparent);
}

/* ── tabs__tab (user management detail page - tab button style) ── */
.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font);
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ================================================================
   Scope chip (context pill) - kiri-atas page header
   ================================================================ */
.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: var(--sp-3);
    width: fit-content;
}
.scope-chip svg {
    width: 0.78rem;
    height: 0.78rem;
    color: var(--accent);
    flex-shrink: 0;
}
.scope-chip strong {
    color: var(--text);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.74rem;
}

/* Italic accent word inside page title (DM Serif Display) */
.page-header__title em,
.page-header__title .title-em {
    font-style: normal;
}

/* ================================================================
   Filter pill - chip dropdown LABEL+value (referensi style)
   ================================================================ */
.filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
    line-height: 1;
}
.filter-pill:hover { border-color: var(--accent-ring); background: var(--surface); }
.filter-pill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.filter-pill.is-active {
    background: var(--accent-light);
    border-color: var(--accent-ring);
    color: var(--accent);
}
.filter-pill__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.filter-pill.is-active .filter-pill__label { color: var(--accent); opacity: 0.8; }
.filter-pill__value {
    font-weight: 600;
    color: var(--text);
    margin-top: -2px;
}
.filter-pill.is-active .filter-pill__value { color: var(--accent); }
.filter-pill__chevron {
    width: 0.7rem;
    height: 0.7rem;
    color: var(--text-faint);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}
.filter-pill.is-active .filter-pill__chevron { color: var(--accent); }
.filter-pill select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    color: transparent;
    font: inherit;
}
.filter-pill select option {
    background: var(--surface-raised);
    color: var(--text);
}

/* Filter chip tabs (Semua / Aktif / Nonaktif / Belum Verifikasi) */
.filter-tabs {
    max-width: calc(100vw - 30px);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Mis. tab status disembunyikan untuk mitra (hanya melihat dokumen sah). */
.filter-tabs[hidden] { display: none; }
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding: 0 0.85rem;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.filter-tab:hover { color: var(--text); }
.filter-tab.is-active {
    /* background: var(--bg);
    color: var(--accent); */
    background: var(--accent);
    color: var(--on-accent, #fff);
}
.filter-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.05rem;
    padding: 0 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-inverse);
    background: var(--accent);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
}
.filter-tab.is-active .filter-tab__count {
    /* color: var(--accent);
    background: var(--accent-light); */
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.filter-tabs::-webkit-scrollbar { height: 3px; }
.filter-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.filter-tabs > .filter-tab { flex-shrink: 0; }    /* jangan ke-squeeze */


/* Hide-filter toggle button with badge count */
.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.filter-toggle:hover { background: var(--surface-sunken); color: var(--text); }
.filter-toggle svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    border-radius: var(--radius-full);
}

/* ================================================================
   User cell - avatar + nama + email kombo (tabel)
   ================================================================ */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.user-cell__avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid var(--accent-ring);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.user-cell__avatar--lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
    border-width: 2px;
}
.user-cell__info { min-width: 0; }
.user-cell__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-cell__email {
    font-family: var(--font);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatar palette variants (consistent per-user color) */
.user-cell__avatar--c1 { background: rgba(34,217,124,.13);  color: var(--accent);       border-color: rgba(34,217,124,.30); }
.user-cell__avatar--c2 { background: rgba(88,166,255,.13);  color: var(--info-text);    border-color: rgba(88,166,255,.30); }
.user-cell__avatar--c3 { background: rgba(45,212,191,.13);  color: var(--teal);         border-color: rgba(45,212,191,.30); }
.user-cell__avatar--c4 { background: rgba(224,164,34,.13);  color: var(--warning-text); border-color: rgba(224,164,34,.30); }
.user-cell__avatar--c5 { background: rgba(247,95,88,.13);   color: var(--danger-text);  border-color: rgba(247,95,88,.30); }
.user-cell__avatar--c6 { background: rgba(167,139,250,.13); color: #a78bfa;             border-color: rgba(167,139,250,.30); }

[data-theme="light"] .user-cell__avatar--c2 { background: rgba(16,96,200,.12); }
[data-theme="light"] .user-cell__avatar--c6 { background: rgba(116,84,210,.12); color: #5b3fb6; border-color: rgba(116,84,210,.30); }

/* ================================================================
   Action icons - icon-only buttons di kolom aksi tabel
   ================================================================ */
.action-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    justify-content: flex-end;
}
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    color: var(--text-muted);           /* lebih kontras dari --text-faint */
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    padding: 0;
    text-decoration: none;
}
.action-icon svg { width: 0.95rem; height: 0.95rem; }
.action-icon:hover {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent-ring);
}
.action-icon:focus-visible {
    outline: none;
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.action-icon--danger:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
}
.action-icon--warning:hover {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}
.action-icon--success:hover {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}
.action-icon:disabled,
.action-icon.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================================
   Profile hero - detail page (avatar besar + badges row)
   ================================================================ */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.profile-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.07;
    filter: blur(70px);
    pointer-events: none;
    transform: translate(-30%, -50%);
}
.profile-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 60%);
}
.profile-hero__avatar {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 1.85rem;
    border: 2px solid var(--accent-ring);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 22px var(--accent-ring);
}
.profile-hero__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.profile-hero__name {
    font-family: var(--font-d);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.2rem;
}
.profile-hero__email {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
    word-break: break-all;
}
.profile-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
@media (max-width: 600px) {
    .profile-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        text-align: left;
    }
    .profile-hero__avatar { width: 4rem; height: 4rem; font-size: 1.45rem; }
    .profile-hero__name { font-size: 1.25rem; }
}

/* ================================================================
   Stat card __sub - sublabel "↗ descriptor" mini
   ================================================================ */
.stat-card__sub {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-faint);
    line-height: 1;
}
.stat-card__sub svg {
    width: 0.78rem;
    height: 0.78rem;
    flex-shrink: 0;
}
/* Ikon keterangan di sebelah label kartu: dipakai saat dua halaman menghitung
   himpunan berbeda dan selisihnya perlu dijelaskan di tempat angkanya dibaca. */
.stat-card__info {
    margin-left: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-faint);
    cursor: help;
    vertical-align: middle;
}
.stat-card__info:hover,
.stat-card__info:focus-visible { color: var(--text-muted); }

.stat-card--accent  .stat-card__sub { color: var(--accent); }
.stat-card--info    .stat-card__sub { color: var(--info-text); }
.stat-card--warning .stat-card__sub { color: var(--warning-text); }
.stat-card--success .stat-card__sub { color: var(--success-text); }
.stat-card--danger  .stat-card__sub { color: var(--danger-text); }
.stat-card--teal    .stat-card__sub { color: var(--teal); }

/* Jumlah kolom eksplisit. `.stat-cards` dasarnya 4 kolom, jadi halaman dengan
   2/3 kartu WAJIB memakai modifier ini — tanpanya kartu hanya mengisi sebagian
   lebar dan menyisakan kolom kosong di kanan. Deklarasi ada di bawah aturan
   dasar (baris ~822) sehingga breakpoint mobile-nya perlu ditulis ulang. */
.stat-cards--2 { grid-template-columns: repeat(2, 1fr); }
.stat-cards--3 { grid-template-columns: repeat(3, 1fr); }
/* Allow 5 stat-cards on wide screens */
.stat-cards--5 { grid-template-columns: repeat(5, 1fr); }
.stat-cards--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) {
    .stat-cards--5 { grid-template-columns: repeat(3, 1fr); }
    .stat-cards--6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px)  {
    .stat-cards--3 { grid-template-columns: repeat(2, 1fr); }
    .stat-cards--5, .stat-cards--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px)  {
    .stat-cards--2, .stat-cards--3 { grid-template-columns: 1fr; }
}
@media (max-width: 380px)  {
    .stat-cards--5, .stat-cards--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   Detail summary grid - 2-column responsive untuk info cards
   ================================================================ */
.detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: stretch;
}
@media (max-width: 900px) {
    .detail-summary-grid { grid-template-columns: 1fr; }
}

.summary-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.summary-card__body { flex: 1; }
.summary-card__body dl { height: 100%; }
.summary-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.summary-card__head svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--accent);
    flex-shrink: 0;
}
.summary-card__title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.summary-card__body {
    padding: 0.65rem 1.1rem;
}
.summary-card__body dl {
    margin: 0;
}
.summary-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.65rem 1rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.summary-row dd {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
    text-align: right;
    line-height: 1.5;
    min-width: 0;
    word-break: break-word;
}
.summary-row dd.font-mono {
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.summary-row dd .badge { vertical-align: middle; }
@media (max-width: 520px) {
    .summary-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .summary-row dd { text-align: left; }
}

/* ================================================================
   Page header - paired action style (filled + outline)
   ================================================================ */
.page-header__actions .btn + .btn { margin-left: 0; }
@media (max-width: 600px) {
    .page-header__actions { width: 100%; }
}

/* ================================================================
   Premium table touches - clickable rows + uppercase head
   ================================================================ */
.table--premium thead th {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 0.75rem 1rem;
    background: var(--surface);
}
.table--premium tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}
.table--premium tbody tr {
    cursor: pointer;
}
.table--premium tbody tr:hover td {
    background: var(--accent-light);
}
[data-theme="light"] .table--premium tbody tr:hover td {
    background: rgba(13,122,67,0.05);
}
.td-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* Modal: banner above/below form - sama style dengan .alert (anchor strip + icon disc) */
.modal-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    border: 1px solid;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.modal-banner:last-child { margin-bottom: 0; margin-top: var(--sp-4); }

/* Left accent strip */
.modal-banner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: currentColor;
    opacity: 0.85;
}

/* Icon dalam disc tinted */
.modal-banner > svg {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.3rem;
    flex-shrink: 0;
    margin: 0.1rem 0 0 0.25rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.modal-banner--warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}
.modal-banner--info {
    background: var(--info-bg);
    color: var(--info-text);
    border-color: var(--info-border);
}
.modal-banner--success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}
.modal-banner--danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
}
.modal-banner__title {
    font-weight: 700;
    margin-bottom: 0.1rem;
}
.modal-banner__body { flex: 1; min-width: 0; }

/* Modal header subtitle (already exists but reinforce display font) */
.modal__title--display {
    font-family: var(--font-d);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

/* ================================================================
   Font-mono utility (numbers, IDs, timestamps)
   ================================================================ */
.font-mono { font-family: var(--font-mono); }

/* ================================================================
   List meta - "Menampilkan X dari Y" baris
   ================================================================ */
.list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.list-meta__count {
    font-family: var(--font-mono);
    color: var(--text);
    font-weight: 600;
}

/* ================================================================
   Helpdesk message thread
   ================================================================ */
.pesan-thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.pesan-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.pesan-item--loading { opacity: 0.55; }
.pesan-item__avatar { flex-shrink: 0; }
.pesan-item__body,
.pesan-item__bubble {
    flex: 1;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem var(--sp-4);
}
.pesan-item__bubble--self {
    background: var(--accent-light);
    border-color: var(--accent-ring);
}
.pesan-item__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.pesan-item__author { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.pesan-item__time   { font-size: 0.75rem; color: var(--text-faint); }
.pesan-item__text   { font-size: var(--text-base); color: var(--text); line-height: 1.65; }
.pesan-reply        { margin-top: var(--sp-6); }

/* ================================================================
   Empty state
   ================================================================ */
.empty-state[hidden] { display: none; }
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem var(--sp-8);
    text-align: center;
    gap: 0.75rem;
}
.empty-state__icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    margin-bottom: 0.25rem;
}
.empty-state__icon svg { width: 1.5rem; height: 1.5rem; }
.empty-state__title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.empty-state__desc,
.empty-state__text {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 26rem;
    line-height: 1.6;
    margin: 0;
}
.empty-state__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ================================================================
   WebGIS layout
   ================================================================ */
.webgis-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: calc(100vh - 180px);
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.webgis-panel {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.webgis-panel__header {
    padding: 0.75rem var(--sp-4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.webgis-panel__title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-2);
}
.webgis-panel__body { flex: 1; overflow-y: auto; padding: var(--sp-1) 0; }
.webgis-panel__section {
    padding: 0.4rem var(--sp-4) 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.webgis-search-wrap { position: relative; }
.webgis-search-wrap svg {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-faint);
    pointer-events: none;
}
.webgis-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 1.8rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8rem;
    box-sizing: border-box;
    transition: border-color var(--t-base);
    outline: none;
}
.webgis-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.webgis-search-input::placeholder { color: var(--text-faint); }

.webgis-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1001;
    max-height: 200px;
    overflow-y: auto;
}
.webgis-search-results[hidden] { display: none; }
.webgis-search-result-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background var(--t-base);
}
.webgis-search-result-item:last-child { border-bottom: none; }
.webgis-search-result-item:hover,
.webgis-search-result-item:focus { background: var(--surface-sunken); outline: none; }
.webgis-search-result-item__sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }

.webgis-map-wrap { position: relative; display: flex; flex-direction: column; }
#webgis-map { flex: 1; background: var(--surface-sunken); height: 100%; }
.webgis-map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,10,20,0.5);
    z-index: 800;
    pointer-events: none;
    transition: opacity var(--t-slow);
}
.webgis-map-overlay[hidden] { display: none; }
.webgis-map-overlay .spinner { width: 2rem; height: 2rem; }

@media (max-width: 700px) {
    .webgis-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }
    .webgis-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
    #webgis-map { height: calc(100vh - 340px); min-height: 300px; }
}

/* ================================================================
   Wizard / Step form
   ================================================================ */
.wizard { max-width: 42rem; margin-inline: auto; }
.wizard-nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    padding: var(--sp-2);
    position: relative;
}
.wizard-nav__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    position: relative;
}
.wizard-nav__dot {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-faint);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.wizard-nav__step.is-active .wizard-nav__dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.wizard-nav__step.is-done .wizard-nav__dot {
    background: var(--success-text);
    border-color: var(--success-text);
    color: #fff;
}
.wizard-nav__dot-check { display: none; width: 0.9rem; height: 0.9rem; }
.wizard-nav__step.is-done .wizard-nav__dot-check { display: block; }
.wizard-nav__step.is-done .wizard-nav__dot-num   { display: none; }
.wizard-nav__label { font-size: 0.7rem; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.wizard-nav__step.is-active .wizard-nav__label { color: var(--accent); font-weight: 600; }
.wizard-nav__step.is-done   .wizard-nav__label { color: var(--success-text); }
.wizard-nav__line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-top: 1.05rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    transition: background 0.3s ease;
    min-width: 0.5rem;
    width: 100%;
    align-self: flex-start;
}
.wizard-nav__line.is-done { background: var(--success-text); }

.wizard-body {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 1.75rem;
}
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: wizard-slide-in 0.22s ease; }
.wizard-panel.is-reverse.is-active { animation: wizard-slide-back 0.22s ease; }
.wizard-panel__header { margin-bottom: var(--sp-6); }
.wizard-panel__title {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}
.wizard-panel__desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.wizard-footer__right { display: flex; align-items: center; gap: var(--sp-2); }
.wizard-callout {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    border-radius: var(--radius-sm);
    padding: 0.75rem var(--sp-4);
    font-size: 0.82rem;
    color: var(--info-text);
    line-height: 1.55;
    margin-top: var(--sp-2);
}
.wizard-callout svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.wizard-callout--warn { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); }
.wizard-alert {
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    animation: alert-slide-in 0.2s ease;
}
.wizard-alert .alert__title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.15rem; }
.wizard-alert .alert__msg   { font-size: 0.82rem; margin: 0; line-height: 1.5; }

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}
.wizard-actions__left  { display: flex; gap: var(--sp-2); align-items: center; }
.wizard-actions__right { display: flex; gap: var(--sp-2); align-items: center; }
.wizard-progress { font-size: 0.75rem; color: var(--text-faint); margin-right: 20px; }

@media (max-width: 520px) {
    .wizard-body    { padding: var(--sp-5) var(--sp-4); }
    .wizard-footer  { padding: 0.75rem var(--sp-4); gap: var(--sp-2); }
    .wizard-footer__right .btn--ghost { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Modal wizard stepper (mstep-*)
   Adaptasi compact dari .wizard-nav di atas agar muat di dalam modal.
   Dulu disalin ke <style> lokal di Manajemen Pengguna dan Kawasan; sejak
   pemakaian ketiga (wizard Hapus Permohonan) diangkat ke sini supaya tidak
   ada tiga salinan yang bisa saling menyimpang.
   ════════════════════════════════════════════════════════════════ */
.mstep-nav {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 var(--sp-6);
    padding: var(--sp-1) var(--sp-2) 0;
}
.mstep-nav__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    font-family: var(--font);
}
.mstep-nav__step[data-clickable="1"] { cursor: pointer; }
.mstep-nav__dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-faint);
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast);
}
.mstep-nav__check { display: none; width: 0.9rem; height: 0.9rem; }
.mstep-nav__step.is-active .mstep-nav__dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.mstep-nav__step.is-done .mstep-nav__dot {
    background: var(--success-text);
    border-color: var(--success-text);
    color: #fff;
}
.mstep-nav__step.is-done .mstep-nav__num { display: none; }
.mstep-nav__step.is-done .mstep-nav__check { display: block; }
.mstep-nav__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-faint);
    white-space: nowrap;
}
.mstep-nav__step.is-active .mstep-nav__label { color: var(--accent); font-weight: 600; }
.mstep-nav__step.is-done .mstep-nav__label { color: var(--success-text); }
.mstep-nav__step:focus-visible { outline: none; }
.mstep-nav__step:focus-visible .mstep-nav__dot {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.mstep-nav__line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--border);
    margin: 1rem -0.35rem 0;
    min-width: 1rem;
    transition: background var(--t-slow);
}
.mstep-nav__line.is-done { background: var(--success-text); }

/* Panels — tinggi minimum agar CLS aman saat pindah langkah */
.mstep-panels { min-height: 21rem; }
.mstep-panel { display: none; }
.mstep-panel.is-active { display: block; animation: mstep-fade 0.2s ease; }
@keyframes mstep-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mstep-panel.is-active { animation: none; }
}

/* Type selection cards */
.jenis-grid { display: grid; gap: 0.75rem; margin-bottom: var(--sp-5); }
.jenis-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jenis-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .jenis-grid--2, .jenis-grid--3 { grid-template-columns: 1fr; } }

.jenis-card {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.875rem var(--sp-4);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    user-select: none;
    box-shadow: var(--shadow-xs);
}
.jenis-card:hover { border-color: var(--accent); background: var(--accent-light); box-shadow: var(--shadow-sm); }
.jenis-card:has(.jenis-card__input:checked) {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 1px var(--accent);
}
.jenis-card__input { position: absolute; opacity: 0; width: 0; height: 0; }
.jenis-card__check {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.jenis-card__check svg { width: 0.55rem; height: 0.55rem; color: #fff; display: none; }
/* Ikon tabler (<i>) juga disembunyikan sampai kartu terpilih */
.jenis-card__check i { font-size: 0.7rem; line-height: 1; color: var(--on-accent); display: none; }
.jenis-card:has(.jenis-card__input:checked) .jenis-card__check { background: var(--accent); border-color: var(--accent); }
.jenis-card:has(.jenis-card__input:checked) .jenis-card__check svg,
.jenis-card:has(.jenis-card__input:checked) .jenis-card__check i { display: block; }
.jenis-card__icon {
    width: 2rem; height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.jenis-card__icon svg { width: 1rem; height: 1rem; }
.jenis-card:hover .jenis-card__icon { background: var(--accent-light); color: var(--accent); }
.jenis-card:has(.jenis-card__input:checked) .jenis-card__icon { background: var(--accent); color: var(--on-accent); }
.jenis-card__title { font-size: var(--text-base); font-weight: 700; color: var(--text); line-height: 1.3; }
.jenis-card__desc  { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

/* Pilihan penandatangan PKS (permohonan >1 UPT) — fieldset berisi .jenis-card */
.penandatangan-field { border: 0; padding: 0; margin: var(--sp-4) 0; min-width: 0; }
.penandatangan-field > legend { padding: 0; }
.penandatangan-field .jenis-grid { margin: var(--sp-3) 0 0; }
.penandatangan-field.has-error .jenis-card { border-color: var(--danger-text); }
.jenis-card:has(.jenis-card__input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.jenis-card:has(.jenis-card__input:disabled) { opacity: .55; cursor: not-allowed; }

/* Review summary cards */
.review-card {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: 0.75rem;
}
.review-card__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-card__edit {
    background: none; border: none; padding: 0;
    font-size: 0.72rem; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--accent); cursor: pointer; text-decoration: none;
}
.review-card__edit:hover { text-decoration: underline; }
.review-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.375rem 0.75rem;
    font-size: 0.84rem;
    margin-bottom: 0.35rem;
    align-items: baseline;
}
.review-row:last-child { margin-bottom: 0; }
.review-row__key { color: var(--text-muted); }
.review-row__val { color: var(--text); font-weight: 500; word-break: break-word; }
.review-row__val--empty { color: var(--text-faint); font-style: italic; font-weight: 400; }

/* ── Pernyataan dokumen fisik (wajib centang sebelum Ajukan) ─────── */
.pernyataan-card {
    border-color: var(--accent);
    background: var(--accent-soft, var(--surface-sunken));
    margin-top: 0.25rem;
}
.pernyataan-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}
.pernyataan-check input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}
.pernyataan-check__text {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text);
    text-align: justify;
}
.pernyataan-tanggal { margin-top: 0.75rem; max-width: 20rem; }

/* ================================================================
   FORM PERMOHONAN - search/picker & summary widgets
   Dipakai bersama oleh form_baru / form_perpanjangan / form_adendum.
   Semua memakai design token → dark default + light override otomatis.
   ================================================================ */

/* ── Search field (mitra · kawasan · pks) ───────────────────────── */
.mitra-search,
.kawasan-search,
.pks-picker { position: relative; }

.mitra-search__wrap,
.kawasan-search__wrap,
.pks-picker__wrap { position: relative; }

.mitra-search__icon,
.kawasan-search__icon,
.pks-picker__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--text-faint);
    pointer-events: none;
}
.mitra-search__input,
.kawasan-search__input,
.pks-picker__input { padding-left: 2.4rem; }

/* Dropdown hasil pencarian */
.mitra-search__dropdown,
.kawasan-search__dropdown,
.pks-picker__dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: dropdown-pop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.mitra-search__dropdown[hidden],
.kawasan-search__dropdown[hidden],
.pks-picker__dropdown[hidden] { display: none; }

@keyframes dropdown-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mitra-search__item,
.kawasan-search__item,
.pks-picker__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast);
}
.mitra-search__item:hover,
.kawasan-search__item:hover,
.pks-picker__item:hover { background: var(--surface-sunken); }

.mitra-search__item-name,
.kawasan-search__item-nama,
.pks-picker__item-judul {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.mitra-search__item-meta,
.kawasan-search__item-meta,
.pks-picker__item-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
}
.pks-picker__item-nomor {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
}

/* Status di dalam dropdown (loading / kosong / error) */
.mitra-search__status,
.kawasan-search__status,
.pks-picker__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.mitra-search__status--error,
.pks-picker__status--error { color: var(--danger-text); }

/* ── Kartu mitra terpilih (admin form_baru) ─────────────────────── */
.mitra-selected-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
}
.mitra-selected-card__icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mitra-selected-card__body { flex: 1; min-width: 0; }
.mitra-selected-card__name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.mitra-selected-card__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.mitra-selected-card__clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.mitra-selected-card__clear:hover { background: var(--danger-bg); color: var(--danger-text); }

/* ── Widget info mitra (mitra mode - read-only "Pemohon") ────────── */
.mitra-info-widget {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    margin-bottom: var(--sp-5);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.mitra-info-widget__icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.mitra-info-widget__body { flex: 1; min-width: 0; }
.mitra-info-widget__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}
.mitra-info-widget__name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.mitra-info-widget__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.mitra-info-widget__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--teal-bg);
    color: var(--teal);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Tag kawasan terpilih ───────────────────────────────────────── */
.kawasan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}
.kawasan-tags:empty { display: none; }
.kawasan-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.35rem 0.3rem 0.75rem;
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}
.kawasan-tag__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 50%;
    color: var(--accent);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.kawasan-tag__remove:hover { background: var(--danger-text); color: #fff; }
.kawasan-tag__remove i { font-size: 0.7rem; }

/* ── Indikator routing alur (info / warning) ────────────────────── */
.routing-indicator {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: var(--sp-5);
    padding: 0.9rem 1.1rem;
    background: var(--info-bg);
    border: 1px solid color-mix(in srgb, var(--info-text) 28%, transparent);
    border-left: 3px solid var(--info-text);
    border-radius: var(--radius-md);
}
/* display:flex di atas menimpa atribut hidden → teks alur basi tetap tampil */
.routing-indicator[hidden] { display: none; }
.routing-indicator__icon { flex-shrink: 0; color: var(--info-text); margin-top: 1px; }
.routing-indicator__body { font-size: var(--text-sm); color: var(--text); line-height: 1.5; min-width: 0; }
.routing-indicator__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--info-text);
    margin-bottom: 0.1rem;
}
.routing-indicator--warning {
    background: var(--warning-bg);
    border-color: color-mix(in srgb, var(--warning-text) 28%, transparent);
    border-left-color: var(--warning-text);
}
.routing-indicator--warning .routing-indicator__icon,
.routing-indicator--warning .routing-indicator__title { color: var(--warning-text); }

/* ── Kartu PKS terpilih (perpanjangan / adendum) ────────────────── */
.pks-info-card {
    margin-top: 0.65rem;
    padding: 1.1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
}
.pks-info-card__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border);
}
.pks-info-card__icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.pks-info-card__title {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    min-width: 0;
}
.pks-info-card__status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    background: var(--teal-bg);
    color: var(--teal);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.pks-info-card__clear {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.pks-info-card__clear:hover { background: var(--danger-bg); color: var(--danger-text); }
.pks-info-card__meta { display: grid; gap: 0.35rem; }
.pks-info-card__field {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.5rem;
    font-size: var(--text-sm);
    align-items: baseline;
}
.pks-info-card__field-label { color: var(--text-muted); }
.pks-info-card__field-value { color: var(--text); font-weight: 500; word-break: break-word; }
.pks-mitra-sub {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border);
    font-size: var(--text-sm);
}
.pks-mitra-sub__label { color: var(--text-muted); }
.pks-mitra-sub__name { color: var(--text); font-weight: 600; }

/* ── Pilihan jenis perubahan (adendum) - multi-select cards ──────── */
.adendum-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
@media (max-width: 560px) { .adendum-grid { grid-template-columns: 1fr; } }
.adendum-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: var(--surface-raised);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.adendum-card:hover { border-color: var(--accent); background: var(--accent-light); }
.adendum-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.adendum-card__check {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all var(--t-fast);
}
.adendum-card__check i { font-size: 0.8rem; }
.adendum-card.is-selected .adendum-card__check {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}
.adendum-card__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

/* ================================================================
   Detail hero block
   ================================================================ */
.detail-hero-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}
.detail-hero-block .detail-hero     { border-radius: 0; margin-bottom: 0; }
.detail-hero-block .detail-stat-bar { border: none; border-top: 1px solid var(--border); border-radius: 0; margin-bottom: 0; }
.detail-hero-block .progress-tracker { border: none; border-top: 1px solid var(--border); border-radius: 0; margin-bottom: 0; }
.detail-hero-block .progress-tracker__header { padding: 1.1rem var(--sp-6); }

.detail-hero {
    position: relative;
    background: linear-gradient(135deg, #0a4a2e 0%, #072a1a 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.75rem var(--sp-8);
    margin-bottom: 0;
    overflow: hidden;
    color: #fff;
}
/* Aksen ATAS hero per jenis permohonan → sinyal cepat Baru/Perpanjangan/Adendum. */
.detail-hero[data-jenis-pm="BARU"]         { box-shadow: inset 0 4px 0 0 var(--blue); }
.detail-hero[data-jenis-pm="PERPANJANGAN"] { box-shadow: inset 0 4px 0 0 var(--teal); }
.detail-hero[data-jenis-pm="ADENDUM"]      { box-shadow: inset 0 4px 0 0 var(--amber); }

/* Badge jenis permohonan di hero - warna khas (terbaca di atas hero hijau gelap). */
.hero-pm-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 1.75rem; padding: 0 .75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-b); font-size: var(--text-xs); font-weight: 700;
    letter-spacing: .01em; border: 1px solid transparent; color: #fff;
}
.hero-pm-badge i { font-size: .95rem; }
.hero-pm-badge--baru         { background: color-mix(in srgb, var(--blue) 32%, transparent);  border-color: color-mix(in srgb, var(--blue) 60%, transparent); }
.hero-pm-badge--perpanjangan { background: color-mix(in srgb, var(--teal) 34%, transparent);  border-color: color-mix(in srgb, var(--teal) 62%, transparent); }
.hero-pm-badge--adendum      { background: color-mix(in srgb, var(--amber) 36%, transparent); border-color: color-mix(in srgb, var(--amber) 65%, transparent); }
/* Badge sekunder (jenis KS / subtipe adendum) di hero - kalem putih transparan. */
.hero-ks-badge {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Badge jenis permohonan di info-grid (surface terang) */
.pm-tag--baru         { background: var(--info-bg);    color: var(--info-text); }
.pm-tag--perpanjangan { background: var(--teal-bg);    color: var(--teal); }
.pm-tag--adendum      { background: var(--warning-bg); color: var(--warning-text); }
.detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.detail-hero::after {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 55%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(34,217,124,0.20) 0%, transparent 65%);
    pointer-events: none;
}
.detail-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-6);
}
.detail-hero__icon {
    flex-shrink: 0;
    width: 4.5rem; height: 4.5rem;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    backdrop-filter: blur(4px);
}
.detail-hero__icon-abbr  { font-size: 1.35rem; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -0.02em; }
.detail-hero__icon-label { font-size: 0.48rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.detail-hero__content { flex: 1; min-width: 0; }
.detail-hero__context {
    font-size: 0.6rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem;
}
.detail-hero__context svg { width: 0.7rem; height: 0.7rem; flex-shrink: 0; }
.detail-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.detail-hero__left  { flex: 1; min-width: 0; }
.detail-hero__nomor { font-size: 0.68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.2rem; }
.detail-hero__judul { font-size: var(--text-xl); font-weight: 800; color: #fff; line-height: 1.25; margin: 0 0 0.4rem; }
.detail-hero__mitra { font-size: 0.84rem; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 0.35rem; }
.detail-hero__mitra svg { width: 0.84rem; height: 0.84rem; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.detail-hero__mitra strong { color: rgba(255,255,255,0.92); font-weight: 600; }
.detail-hero__status { flex-shrink: 0; }
.detail-hero__tags  { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.detail-hero__tags .badge {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.82);
    border-color: rgba(255,255,255,0.18);
}
@media (max-width: 600px) {
    .detail-hero-block { border-radius: var(--radius-lg); }
    .detail-hero { padding: var(--sp-5); }
    .detail-hero__body { gap: var(--sp-4); }
    .detail-hero__icon { display: none; }
    .detail-hero__judul { font-size: var(--text-lg); font-weight: 600; }
    .detail-hero__top { flex-direction: column; }
}

/* Stats bar below hero */
.detail-stat-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.detail-stat {
    padding: 0.85rem var(--sp-5);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.detail-stat:last-child { border-right: none; }
.detail-stat__label { font-size: 0.59rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.detail-stat__value { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-stat__sub   { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .detail-stat-bar { grid-template-columns: repeat(2, 1fr); }
    .detail-stat:nth-child(2) { border-right: none; }
    .detail-stat:nth-child(3),
    .detail-stat:nth-child(4) { border-top: 1px solid var(--border); }
}

/* ================================================================
   Progress tracker (workflow stepper)
   ================================================================ */
.progress-tracker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
}
.progress-tracker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--sp-4) var(--sp-6);
}
.progress-tracker__title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.progress-tracker__title svg { width: 0.8rem; height: 0.8rem; opacity: 0.6; }
.progress-steps {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding: 0.75rem var(--sp-6) 1.2rem;
}
.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    /* grow:1 (sebar di layar lebar) · shrink:0 (JANGAN kompres) · basis 6.5rem.
       Tanpa shrink → bila total > kontainer, baris SCROLL-X (bukan dempet).
       Lebar selalu SAMA antar step (basis konstan) → garis konektor (::before)
       yang ber-width:100% pas dari pusat dot sebelumnya ke pusat dot ini. */
    flex: 1 0 6.5rem;
    min-width: 6.5rem;
    position: relative;
}
/* Garis konektor antar node - pseudo-element di tiap step, membentang dari
   pusat dot step sebelumnya ke pusat dot step ini (di BELAKANG dot, z-index 0).
   Menggantikan elemen .progress-line lama yang dipisah (rapuh, pakai margin
   negatif & gampang dempet di layar kecil). */
.progress-step::before {
    content: '';
    position: absolute;
    top: 1rem;            /* pusat vertikal dot (tinggi dot 2rem) */
    right: 50%;           /* mulai dari pusat horizontal step ini */
    width: 100%;          /* membentang tepat satu step → pusat dot sebelumnya */
    height: 2px;
    background: var(--border);
    transform: translateY(-1px);
    z-index: 0;
    transition: background 0.3s;
}
.progress-step:first-child::before { display: none; }
/* Konektor menuju node yang sudah/ sedang dilalui = hijau (jalur tercapai). */
.progress-step--done::before,
.progress-step--active::before,
.progress-step--warning::before { background: var(--success-text); }
.progress-step__dot {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    position: relative; z-index: 1; flex-shrink: 0;
    transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.progress-step__dot svg  { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.progress-step__dot span { font-size: 0.7rem; font-weight: 700; }
.progress-step--done .progress-step__dot    { background: var(--success-text); border-color: var(--success-text); color: #fff; }
.progress-step--active .progress-step__dot  { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 5px var(--accent-ring); }
.progress-step--active .progress-step__dot::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0.35;
    animation: prog-pulse 2.2s ease-in-out infinite;
}
.progress-step--warning .progress-step__dot  { background: var(--warning-text); border-color: var(--warning-text); color: #fff; }
.progress-step--terminal .progress-step__dot { background: var(--danger-text);  border-color: var(--danger-text);  color: #fff; }
.progress-step__body  { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.progress-step__label {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-faint);
    /* max-width ≤ lebar step (6.5rem) agar label tidak tumpang tindih antar step. */
    text-align: center; line-height: 1.3; max-width: 6.5rem;
}
.progress-step--done     .progress-step__label { color: var(--success-text); }
.progress-step--active   .progress-step__label { color: var(--accent); font-weight: 700; }
.progress-step--warning  .progress-step__label { color: var(--warning-text); }
.progress-step--terminal .progress-step__label { color: var(--danger-text); }
.progress-step__time { font-size: 0.7rem; color: var(--text-faint); text-align: center; line-height: 1.2; }
.progress-step--active .progress-step__time { color: var(--text-muted); font-weight: 500; }
/* Elemen garis lama (masih dirender JS) - disembunyikan; konektor kini via
   .progress-step::before agar selalu nyambung & tidak dempet di layar kecil. */
.progress-line { display: none; }
.progress-step__pos {
    font-size: 0.6rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-ring); padding: 0.1rem 0.45rem;
    border-radius: 99px; margin-top: 0.1rem; white-space: nowrap;
}
.progress-step__pos--warning { color: var(--warning-text); background: var(--warning-bg); }
.progress-step__pos--danger  { color: var(--danger-text);  background: var(--danger-bg); }
.progress-desc {
    padding: 0.75rem var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: 0.815rem;
    line-height: 1.55;
}
.progress-desc__title { font-size: 0.72rem; font-weight: 700; color: var(--accent); margin-bottom: 0.15rem; }
.progress-desc__text  { color: var(--text-muted); }
.progress-desc--warning .progress-desc__title { color: var(--warning-text); }
.progress-desc--success .progress-desc__title { color: var(--success-text); }
.progress-desc--danger  .progress-desc__title { color: var(--danger-text); }
.progress-desc--neutral .progress-desc__title { color: var(--text-muted); }
.progress-desc--info    .progress-desc__title { color: var(--accent); }
@media (max-width: 600px) {
    .progress-steps { padding: 0.75rem var(--sp-4) 1.1rem; }
    /* Pertahankan lebar SAMA antar step (konektor tetap nyambung) lalu biarkan
       baris scroll horizontal - jangan biarkan step menyusut/dempet. */
    .progress-step  { flex: 1 0 5.25rem; min-width: 5.25rem; }
    .progress-step__label { font-size: 0.72rem; max-width: 5.25rem; }
    .progress-desc  { padding: 0.75rem var(--sp-5); }
}

/* ================================================================
   Tab sections (inside detail info tab)
   ================================================================ */
.tab-section {
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}
.tab-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tab-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--sp-4);
    opacity: 0.6;
}
.tab-section__title svg { width: 0.72rem; height: 0.72rem; color: var(--accent); flex-shrink: 0; opacity: 1; }
.tab-section--warning {
    background: var(--warning-bg);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    border: 1px solid var(--warning-border);
}
.tab-section__title--warning { color: var(--warning-text); }
.tab-section__title--warning svg { color: var(--warning-text); }

/* ── Action bar (full-width, between hero and tabs) ─────────────── */
.detail-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.detail-actionbar[hidden] { display: none; }
.detail-actionbar__info {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 14rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.detail-actionbar__info i { color: var(--accent); flex-shrink: 0; font-size: 1rem; }
.detail-actionbar__btns {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Action buttons render inline within the bar (override stacked default) */
.action-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.action-btns .btn { justify-content: center; gap: var(--sp-2); }

@media (max-width: 640px) {
    .detail-actionbar { flex-direction: column; align-items: stretch; }
    .detail-actionbar__info { min-width: 0; }
    .detail-actionbar__btns { flex-direction: column; }
    .detail-actionbar__btns .btn { width: 100%; }
}

/* ================================================================
   Detail tab navigation - underline-active style
   ================================================================ */
.tab-nav {
    display: flex;
    gap: var(--sp-1);
    padding: 0;
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: -1px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tab-nav__item i,
.tab-nav__item svg { width: 0.85rem; height: 0.85rem; font-size: 0.9rem; flex-shrink: 0; }
.tab-nav__item:hover { color: var(--text); }
.tab-nav__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
.tab-nav__item--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.tab-nav__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
}
.tab-nav__badge[hidden] { display: none; }

/* Tab panels */
.tab-pane { display: none; }
.tab-pane--active { display: block; }

/* ================================================================
   Riwayat timeline (vertical, dot + connector)
   ================================================================ */
.timeline-v2 { list-style: none; padding: 0; margin: 0; }
.timeline-v2__item {
    position: relative;
    display: flex;
    gap: var(--sp-3);
    padding-bottom: var(--sp-5);
}
.timeline-v2__item:last-child { padding-bottom: 0; }
.timeline-v2__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 1.5rem;
    bottom: 0;
    width: 1.5px;
    background: var(--border);
}
.timeline-v2__dot {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.timeline-v2__dot--current { border-color: var(--accent); background: var(--accent); }
.timeline-v2__dot svg { width: 0.6rem; height: 0.6rem; color: var(--on-accent); }
.timeline-v2__body { flex: 1; min-width: 0; }
.timeline-v2__status { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.timeline-v2__alasan {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.25rem;
    line-height: 1.5;
}
.timeline-v2__time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: 0.25rem;
}

/* ================================================================
   Dokumen list (status-striped rows)
   ================================================================ */
.dokumen-list { display: flex; flex-direction: column; gap: 0; }
.dokumen-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: var(--sp-3);
    border-top: 1px solid var(--border);
}
.dokumen-item:first-child { border-top: none; }
/* Left status stripe */
.dokumen-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
    width: 2.5px;
    border-radius: 99px;
    background: var(--border-strong);
}
.dokumen-item--pending::before  { background: var(--warning-text); opacity: 0.65; }
.dokumen-item--uploaded::before { background: var(--info-text); }
.dokumen-item--approved::before { background: var(--success-text); }
.dokumen-item--rejected::before { background: var(--danger-text); }

.dokumen-item__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
}
.dokumen-item__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dokumen-item__icon svg { width: 0.9rem; height: 0.9rem; }
.dokumen-item--uploaded .dokumen-item__icon,
.dokumen-item--approved .dokumen-item__icon {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}
.dokumen-item--rejected .dokumen-item__icon {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}
.dokumen-item__body { flex: 1; min-width: 0; }
.dokumen-item__kode {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    line-height: 1.3;
}
.dokumen-item__nama {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.dokumen-item__file {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}
.dokumen-item__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.dokumen-item__catatan {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    font-size: var(--text-sm);
    color: var(--danger-text);
    line-height: 1.5;
}
.dokumen-item__catatan svg {
    width: 0.82rem;
    height: 0.82rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Dokumen empty state */
.dokumen-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: var(--sp-8) var(--sp-6);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    text-align: center;
}
.dokumen-empty__icon { color: var(--text-faint); }
.dokumen-empty__icon svg { width: 2rem; height: 2rem; }
.dokumen-empty__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-muted);
    margin-top: var(--sp-1);
}
.dokumen-empty__desc {
    font-size: var(--text-sm);
    color: var(--text-faint);
    max-width: 22rem;
    line-height: 1.5;
}

/* Loading skeletons (lokasi + dokumen tabs) */
.lokasi-skel,
.dokumen-item-skel {
    background: var(--border);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 1.4s ease infinite;
}
.lokasi-skel { height: 3.25rem; }
.dokumen-item-skel { height: 4.5rem; }

/* ================================================================
   Upload components
   ================================================================ */
.upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
    position: relative;
}
.upload-zone:hover,
.upload-zone.is-drag-over { border-color: var(--accent); background: var(--accent-light); }
.upload-zone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-zone__icon {
    width: 2.75rem; height: 2.75rem;
    margin: 0 auto 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.upload-zone:hover .upload-zone__icon,
.upload-zone.is-drag-over .upload-zone__icon { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.upload-zone__icon svg  { width: 1.15rem; height: 1.15rem; }
.upload-zone__text { font-size: var(--text-base); font-weight: 600; color: var(--text); margin: 0 0 0.25rem; }
.upload-zone__hint { font-size: 0.77rem; color: var(--text-faint); margin: 0; }

.upload-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--accent-light);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    animation: dialog-in 0.15s ease;
}
.upload-file-info__icon {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: var(--on-accent);
}
.upload-file-info__icon svg { width: 1rem; height: 1rem; }
.upload-file-info__body { flex: 1; min-width: 0; line-height: 1.3; }
.upload-file-info__name { font-size: var(--text-base); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-file-info__size { font-size: 0.75rem; color: var(--text-muted); }
.upload-file-info__remove {
    flex-shrink: 0;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.upload-file-info__remove:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.upload-file-info__remove svg { width: 0.7rem; height: 0.7rem; }

.upload-progress { margin-top: 0.875rem; }
.upload-progress__bar { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.upload-progress__fill { height: 100%; background: var(--accent); border-radius: 999px; width: 0; transition: width 0.25s ease; }
.upload-progress__text { font-size: 0.77rem; color: var(--text-muted); margin-top: 0.4rem; text-align: center; }

/* ================================================================
   Expandable text
   ================================================================ */
.expandable-text { max-height: 6rem; overflow: hidden; transition: max-height 0.3s ease; }
.expandable-text.is-expanded { max-height: 200rem; }
.expandable-fade {
    height: 2.5rem; margin-top: -2.5rem;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
    transition: opacity 0.3s;
    position: relative; z-index: 1;
}
.expandable-text.is-expanded + .expandable-fade { opacity: 0; pointer-events: none; }
.expandable-toggle {
    font-size: 0.78rem; font-weight: 600; color: var(--accent);
    background: none; border: none; padding: 0.15rem 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.25rem;
    position: relative; z-index: 1;
}
.expandable-toggle:hover { opacity: 0.8; }
.expandable-toggle svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; transition: transform 0.25s; }
.expandable-toggle.is-expanded svg { transform: rotate(180deg); }

/* ================================================================
   Sigma Select (.ss) - searchable, ajax, multi-select component
   ================================================================ */
.ss { position: relative; display: block; }
.ss[hidden] { display: none; }

.ss__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.625rem;
    padding: 0 var(--sp-2) 0 0.7rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    gap: 0.375rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    line-height: 1.4;
}
.ss__trigger:hover { border-color: var(--accent); }
.ss__trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ss.is-open .ss__trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ss.is-open.ss--above .ss__trigger { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.ss.is-disabled .ss__trigger { background: var(--surface-sunken); color: var(--text-faint); cursor: not-allowed; pointer-events: none; }
.form-page .ss__trigger { min-height: 2.5rem; font-size: var(--text-base); padding: 0 0.625rem 0 0.8rem; }

.ss__body { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ss__placeholder { color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss__single-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

.ss__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem 0; min-width: 0; }
.ss__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.15rem 0.1rem 0.45rem;
    background: var(--accent-light);
    border: 1px solid var(--accent-ring);
    border-radius: var(--radius-full);
    max-width: 11rem; min-width: 0;
    line-height: 1.3;
}
.ss__tag-label { font-size: 0.75rem; color: var(--accent); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ss__tag-remove {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    background: none; border: none; color: var(--accent); cursor: pointer; padding: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.ss__tag-remove svg { width: 0.5rem; height: 0.5rem; }
.ss__tag-remove:hover { background: var(--accent); color: var(--on-accent); }

.ss__count {
    display: inline-flex; align-items: center;
    padding: 0.1rem var(--sp-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 0.73rem; color: var(--text-muted); white-space: nowrap; font-weight: 500;
}

.ss__icons { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; margin-left: auto; padding-left: 0.25rem; }
.ss__clear-btn {
    display: flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem;
    border-radius: var(--radius-xs);
    background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.ss__clear-btn svg { width: 0.65rem; height: 0.65rem; }
.ss__clear-btn:hover { background: var(--danger-bg); color: var(--danger-text); }
.ss__clear-btn[hidden] { display: none; }

.ss__chevron { display: flex; align-items: center; color: var(--text-faint); transition: transform var(--t-base); }
.ss__chevron svg { width: 0.75rem; height: 0.75rem; }
.ss.is-open .ss__chevron { transform: rotate(180deg); }

.ss__dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: 0; right: 0;
    background: var(--surface-raised);
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    min-width: 12rem;
}
.ss__dropdown[hidden] { display: none; }
.ss--above .ss__dropdown {
    top: auto; bottom: calc(100% - 1px);
    border-top: 1px solid var(--accent); border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.ss__search-box {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ss__search-icon { color: var(--text-faint); display: flex; flex-shrink: 0; }
.ss__search-icon svg { width: 0.75rem; height: 0.75rem; }
.ss__search {
    flex: 1; border: none; outline: none;
    background: transparent; font-size: 0.82rem;
    font-family: inherit; color: var(--text); padding: 0; min-width: 0;
}
.ss__search::placeholder { color: var(--text-faint); }

.ss__toolbar {
    display: flex; align-items: center;
    padding: 0.25rem 0.65rem;
    border-bottom: 1px solid var(--border);
    gap: 0.375rem;
    background: var(--surface-sunken);
}
.ss__toolbar-btn {
    background: none; border: none; padding: 0.15rem 0;
    font-size: 0.73rem; font-family: inherit;
    color: var(--accent); cursor: pointer; font-weight: 600;
    transition: color var(--t-fast); line-height: 1.4;
}
.ss__toolbar-btn:hover { text-decoration: underline; }
.ss__toolbar-sep { color: var(--text-faint); font-size: 0.73rem; }

.ss__list { overflow-y: auto; max-height: 13rem; padding: 0.2rem 0; scroll-padding: 0.2rem; }
.ss__list::-webkit-scrollbar { width: 4px; }
.ss__list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.ss__option {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.7rem; cursor: pointer;
    transition: background var(--t-fast); user-select: none;
}
.ss__option:hover,
.ss__option.is-focused  { background: var(--accent-light); }
.ss__option.is-selected { background: var(--accent-light); }
.ss__option.is-disabled { color: var(--text-faint); cursor: not-allowed; opacity: 0.55; }

.ss__option-mark {
    flex-shrink: 0;
    width: 0.9rem; height: 0.9rem;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.ss--single .ss__option-mark { border-radius: 50%; }
.ss__option-mark svg { width: 0.55rem; height: 0.55rem; opacity: 0; transition: opacity var(--t-fast); color: var(--on-accent); }
.ss__option.is-selected .ss__option-mark { background: var(--accent); border-color: var(--accent); }
.ss__option.is-selected .ss__option-mark svg { opacity: 1; }

.ss__option-text { flex: 1; min-width: 0; line-height: 1.3; }
.ss__option-label { font-size: 0.82rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss__option.is-selected .ss__option-label { color: var(--accent); }
/* Sub-label boleh membungkus sampai 2 baris: ia sering menjadi satu-satunya
   pembeda antar opsi berlabel sama (mis. nomor PKS + mitra identik di dua UPT),
   dan memotongnya dengan ellipsis justru menghapus informasi pembeda itu. */
.ss__option-sub { font-size: 0.73rem; color: var(--text-muted); margin-top: 0.05rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ss__group-label { padding: 0.45rem 0.7rem 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.ss__state { padding: 0.85rem 0.75rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.ss__state--error { color: var(--danger-text); }
.ss__state--loading { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }

/* Truncation notice - muncul di akhir list kalau total > displayed */
.ss__truncated {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem 0.35rem 0.15rem;
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--info-text) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--info-text) 30%, transparent);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.ss__truncated svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: var(--info-text);
}
.ss__truncated strong {
    color: var(--info-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ss__spinner {
    width: 0.875rem; height: 0.875rem;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ss-spin 0.55s linear infinite;
    flex-shrink: 0;
}
@media (max-width: 520px) { .ss__list { max-height: 10rem; } }

/* ================================================================
   Panduan modal - onboarding/guide dialog (reusable)
   ----------------------------------------------------------------
   Komponen modal khusus untuk panduan/onboarding sebuah halaman.
   Auto-open pada kunjungan pertama (via SIGMA.panduan.autoOpen),
   bisa di-trigger lagi via tombol [?] / [data-panduan-open].

   HTML pattern:
   <div id="panduan-pengguna" class="modal panduan-modal modal--xl">
     <div class="panduan-modal__hero panduan-modal__hero--accent">
       <div class="panduan-modal__hero-icon">
         <svg>...</svg>
       </div>
       <div class="panduan-modal__hero-text">
         <h2 class="panduan-modal__hero-title">Panduan Manajemen Pengguna</h2>
         <p class="panduan-modal__hero-sub">Subtitle ringkas …</p>
       </div>
       <button class="panduan-modal__close" data-modal-close
               aria-label="Tutup panduan">
         <svg>...</svg>
       </button>
     </div>

     <div class="panduan-modal__body">
       <div class="panduan-modal__col">
         <h3 class="panduan-section-title">Peran & Hak Akses</h3>
         <div class="panduan-role">
           <span class="role-badge role-badge--super">SUPER_ADMIN</span>
           <p class="panduan-role__desc">…</p>
         </div>
         ...
       </div>

       <div class="panduan-modal__col">
         <h3 class="panduan-section-title">Alur Tambah Pengguna</h3>
         <ol class="panduan-flow">
           <li class="panduan-flow__step">
             <span class="panduan-flow__num">1</span>
             <div class="panduan-flow__body">
               <span class="panduan-flow__title">…</span>
               <span class="panduan-flow__desc">…</span>
             </div>
           </li>
           ...
         </ol>
       </div>
     </div>

     <div class="panduan-modal__footer">
       <button class="btn-link" data-modal-close>Tutup</button>
       <button class="btn btn--primary" data-panduan-ack>
         <svg>...</svg> Mengerti, Mulai
       </button>
     </div>
   </div>

   Hero variant: --accent (default), --info, --teal, --warning, --danger
   ================================================================ */

/* Override default modal padding for guide */
.modal.panduan-modal { padding: 0; max-width: 56rem; overflow: hidden; }
.panduan-modal .modal__header,
.panduan-modal .modal__footer { display: none; }

/* ── Hero strip (gradient) ────────────────────────────────────── */
.panduan-modal__hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 1.2rem 1.75rem;
    /* Hero = colored banner, identik di dark & light (bukan permukaan tema).
       Teks di dalamnya dipaksa terang (lihat --hero-title/sub/icon/close). */
    background: linear-gradient(135deg, #123c2a 0%, #0d4f68 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.panduan-modal__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right,
            color-mix(in srgb, var(--info-text) 18%, transparent),
            transparent 60%);
    pointer-events: none;
}
/* Hero color variants */
.panduan-modal__hero--accent {
    background: linear-gradient(135deg,#1a5c2e 0%,#0d4f68 100%);
}
.panduan-modal__hero--accent::before {
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
}
.panduan-modal__hero--teal {
    background: linear-gradient(135deg, #0f5d55 0%, #0d4f68 100%);
}
.panduan-modal__hero--warning {
    background: linear-gradient(135deg, #7a4708 0%, #8a3d0a 100%);
}
.panduan-modal__hero--info {
    background: linear-gradient(135deg, #1e3a6b 0%, #0d4f68 100%);
}
.panduan-modal__hero--danger {
    background: linear-gradient(135deg, #7a1f1f 0%, #8a2f10 100%);
}

.panduan-modal__hero-icon {
    position: relative;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.panduan-modal__hero-icon svg { width: 1.4rem; height: 1.4rem; }

.panduan-modal__hero-text {
    flex: 1;
    min-width: 0;
    position: relative;
}
.panduan-modal__hero-title {
    margin: 0;
    font-family: var(--font-d);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.panduan-modal__hero-sub {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}
.panduan-modal__close {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.panduan-modal__close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.panduan-modal__close svg { width: 1rem; height: 1rem; }

/* ── Body - 2 column grid ─────────────────────────────────────── */
.panduan-modal__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    padding: 1.6rem 1.75rem;
    max-height: 60vh;
    overflow-y: auto;
}
/* Single-column body - pakai untuk modal form/aksi pendek (reset password, dst) */
.panduan-modal__body--single {
    display: block;
    padding: 1.4rem 1.75rem;
}
.panduan-modal__body--compact {
    padding: 1.1rem 1.5rem;
}
.panduan-modal__col { min-width: 0; }
.panduan-modal__col + .panduan-modal__col {
    padding-left: var(--sp-6);
}

.panduan-section-title {
    margin: 0 0 var(--sp-4);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.panduan-section-title + .panduan-section-title { margin-top: var(--sp-6); }

/* Stack of roles */
.panduan-role {
    margin-bottom: 1.1rem;
}
.panduan-role:last-child { margin-bottom: 0; }
.panduan-role__desc {
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Role badge (reusable across the app - list, detail, etc.) */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 10px 8px;
    line-height: 0;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.role-badge--super   { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }
.role-badge--pusat   { background: var(--accent-light); border-color: var(--accent-ring); color: var(--accent); }
.role-badge--balai   { background: var(--teal-bg);    border-color: var(--teal-border);    color: var(--teal); }
.role-badge--ksdae   { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }
.role-badge--mitra   { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.role-badge--auditor { background: var(--surface-sunken); border-color: var(--border); color: var(--text-muted); }
.role-badge--kementerian { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.role-badge--readonly    { background: var(--surface-sunken); border-color: var(--border); color: var(--text-muted); }

/* Generic content block (paragraf biasa di kolom panduan) */
.panduan-block {
    margin-top: var(--sp-3);
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ── Panduan callout - accent card untuk highlight info penting ─
   Lebih kontras dari .panduan-block: icon + title + body dalam
   card bertinta semantik. Cocok untuk Keamanan, Audit, Catatan,
   Peringatan, dst.

   HTML pattern:
   <aside class="panduan-callout panduan-callout--info">
     <div class="panduan-callout__icon"><svg>...</svg></div>
     <div class="panduan-callout__body">
       <strong class="panduan-callout__title">Keamanan Akun</strong>
       <p class="panduan-callout__text">…</p>
     </div>
   </aside>

   Variants: --info (default), --teal, --warning, --accent, --danger
   ──────────────────────────────────────────────────────────────── */
.panduan-callout {
    --cal-tint:    var(--info-text);
    --cal-border:  var(--info-border);

    position: relative;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-top: var(--sp-4);
    padding: 0.95rem 1rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--cal-tint) 14%, transparent),
            color-mix(in srgb, var(--cal-tint) 4%, transparent) 65%,
            transparent),
        var(--surface-sunken);
    border: 1px solid var(--cal-border);
    border-left: 3px solid var(--cal-tint);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.panduan-callout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--cal-tint) 12%, transparent),
        transparent 60%);
    pointer-events: none;
}
.panduan-callout__icon {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--cal-tint) 18%, transparent);
    color: var(--cal-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--cal-tint) 32%, transparent);
}
.panduan-callout__icon svg { width: 1rem; height: 1rem; }

.panduan-callout__body {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.panduan-callout__title {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cal-tint);
    line-height: 1.2;
}
.panduan-callout__text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text);
}
.panduan-callout__text em {
    color: var(--cal-tint);
    font-style: normal;
    font-weight: 600;
}

/* Variants */
.panduan-callout--info {
    --cal-tint:   var(--info-text);
    --cal-border: var(--info-border);
}
.panduan-callout--teal {
    --cal-tint:   var(--teal);
    --cal-border: var(--teal-border);
}
.panduan-callout--warning {
    --cal-tint:   var(--warning-text);
    --cal-border: var(--warning-border);
}
.panduan-callout--accent {
    --cal-tint:   var(--accent);
    --cal-border: var(--accent-ring);
}
.panduan-callout--danger {
    --cal-tint:   var(--danger-text);
    --cal-border: var(--danger-border);
}

/* Stack callouts berdekatan dengan jarak konsisten */
.panduan-callout + .panduan-callout { margin-top: var(--sp-3); }

/* ── Flow steps (ordered list w/ vertical connector) ──────────── */
.panduan-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.panduan-flow__step {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
}
.panduan-flow__step:last-child { padding-bottom: 0; }

/* Vertical connector line */
.panduan-flow__step::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2rem;
    bottom: -0.09rem;
    width: 1.5px;
    background: var(--border);
}
.panduan-flow__step:last-child::before { display: none; }

.panduan-flow__num {
    flex-shrink: 0;
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1.5px solid var(--border-strong);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 1;
}
.panduan-flow__step--active .panduan-flow__num,
.panduan-flow__step.is-active .panduan-flow__num {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
/* Color variants per step */
.panduan-flow__step[data-tone="info"]    .panduan-flow__num { border-color: var(--info-text);    color: var(--info-text);    background: var(--info-bg); }
.panduan-flow__step[data-tone="warning"] .panduan-flow__num { border-color: var(--warning-text); color: var(--warning-text); background: var(--warning-bg); }
.panduan-flow__step[data-tone="success"] .panduan-flow__num { border-color: var(--success-text); color: var(--success-text); background: var(--success-bg); }
.panduan-flow__step[data-tone="accent"]  .panduan-flow__num { border-color: var(--accent);       color: var(--accent);       background: var(--accent-light); }

.panduan-flow__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.3rem;
    min-width: 0;
}
.panduan-flow__title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.panduan-flow__desc {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ── Footer ───────────────────────────────────────────────────── */
.panduan-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: 1rem 1.75rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.panduan-modal__footer .btn-link {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Help button (re-open trigger) ────────────────────────────── */
.btn-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.85rem;
    flex-shrink: 0;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn-help:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
}
.btn-help:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-color: var(--accent);
}
.btn-help svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────────
   Breakpoints:
   - ≥ 960px: 2 kolom, hero penuh 1.2rem×1.75rem
   - 720-959: 2 kolom rapat (gap kurang)
   - 520-719: 1 kolom stack, divider horizontal
   - < 520px: super-compact untuk HP kecil
   ──────────────────────────────────────────────────────────────── */
.modal.panduan-modal {
    width: min(56rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}
.panduan-modal__body { flex: 1; min-height: 0; }

@media (max-width: 960px) {
    .panduan-modal__body {
        gap: var(--sp-5);
        padding: 1.35rem 1.5rem;
    }
    .panduan-modal__col + .panduan-modal__col { padding-left: var(--sp-4); }
}

@media (max-width: 720px) {
    .modal.panduan-modal {
        width: min(56rem, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
    }
    .panduan-modal__hero {
        padding: 1.1rem 1.25rem;
        gap: var(--sp-3);
    }
    .panduan-modal__hero-title { font-size: 1.1rem; }
    .panduan-modal__hero-sub   { font-size: 0.75rem; }
    .panduan-modal__hero-icon  { width: 2.6rem; height: 2.6rem; }
    .panduan-modal__hero-icon svg { width: 1.1rem; height: 1.1rem; }

    .panduan-modal__body {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        padding: 1.2rem 1.25rem;
        max-height: none;
    }
    .panduan-modal__col + .panduan-modal__col {
        padding-left: 0;
        border-left: none;
        padding-top: var(--sp-5);
        margin-top: var(--sp-1);
        border-top: 1px solid var(--border-subtle);
    }
    .panduan-modal__footer {
        padding: 0.75rem 1.25rem;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--sp-2);
    }
    .panduan-modal__footer .btn,
    .panduan-modal__footer .btn-link { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
    .panduan-modal__hero {
        padding: 0.95rem 1rem;
        gap: 0.65rem;
    }
    .panduan-modal__hero-title { font-size: 1rem; line-height: 1.25; }
    .panduan-modal__hero-sub   { font-size: 0.72rem; margin-top: 0.2rem; }
    .panduan-modal__hero-icon  { width: 2.25rem; height: 2.25rem; }
    .panduan-modal__hero-icon svg { width: 1rem; height: 1rem; }
    .panduan-modal__close      { width: 1.75rem; height: 1.75rem; }

    .panduan-modal__body { padding: 1rem 1rem; gap: var(--sp-4); }
    .panduan-section-title { font-size: 0.66rem; }
    .panduan-flow__step    { gap: 0.7rem; padding-bottom: 1.1rem; }
    .panduan-flow__num     { width: 1.75rem; height: 1.75rem; font-size: 0.72rem; }
    .panduan-flow__step::before { left: 0.875rem; top: 1.75rem; }
    .panduan-callout       { padding: 0.75rem 0.85rem; gap: 0.65rem; }
}

/* ================================================================
   User grid view - modern card layout (reusable: entity grid)
   ----------------------------------------------------------------
   Grid layout untuk mode tampilan kartu pada list pengguna.
   Pattern dapat di-adopsi untuk entitas lain (mitra, kawasan, dll).

   HTML pattern:
   <div class="user-grid" role="list">
     <article class="user-card user-card--active" role="listitem"
              tabindex="0" data-uuid="...">
       <div class="user-card__cover">
         <div class="user-card__cover-orbs"></div>
       </div>
       <span class="user-card__status-dot" title="Aktif"></span>
       <div class="user-card__avatar user-cell__avatar--c3">JD</div>
       <div class="user-card__identity">
         <h3 class="user-card__name">John Doe</h3>
         <p class="user-card__email">john@contoh.go.id</p>
       </div>
       <div class="user-card__roles">
         <span class="badge badge--accent">ADMIN_PUSAT</span>
       </div>
       <div class="user-card__meta">…</div>
       <div class="user-card__footer">…</div>
     </article>
   </div>

   Modifier per status:
   - .user-card--active   (default tint accent)
   - .user-card--inactive (danger tint, grayscale avatar)
   - .user-card--pending  (warning tint, untuk email belum verified)
   ================================================================ */

.user-grid {
    display: grid;
    /* Default fluid: minimal 16rem, isi sebanyak yang muat. Breakpoint di bawah
       men-cap kolom secara eksplisit agar layar besar tetap 4 kolom (tidak 5+). */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--sp-4);
    align-items: stretch;
    margin-top: var(--sp-1);
}
.user-grid[hidden] { display: none; }

/* Cap kolom eksplisit di breakpoint utama */
@media (min-width: 768px)  { .user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .user-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .user-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@keyframes user-card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Card base ────────────────────────────────────────────────── */
.user-card {
    --uc-tint:        var(--accent);
    --uc-tint-bg:     var(--accent-light);
    --uc-tint-ring:   var(--accent-ring);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        transform var(--t-base),
        box-shadow var(--t-base),
        border-color var(--t-base);
    animation: user-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform;
}
.user-card:focus-visible {
    outline: none;
    border-color: var(--uc-tint);
    box-shadow: 0 0 0 3px var(--uc-tint-ring), var(--shadow-sm);
}
.user-card:hover {
    transform: translateY(-3px);
    border-color: var(--uc-tint-ring);
    box-shadow: var(--shadow-sm),
        0 0 0 1px color-mix(in srgb, var(--uc-tint) 18%, transparent);
}
.user-card:hover .user-card__avatar {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--uc-tint) 28%, transparent);
}

/* ── Cover strip (decorative gradient with orbs) ─────────────── */
.user-card__cover {
    position: relative;
    height: 4.5rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--uc-tint) 40%, transparent),
            color-mix(in srgb, var(--uc-tint) 12%, transparent) 60%,
            transparent);
    overflow: hidden;
    flex-shrink: 0;
}
.user-card__cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        color-mix(in srgb, var(--uc-tint) 22%, transparent) 1px,
        transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}
.user-card__cover-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.user-card__cover-orbs::before,
.user-card__cover-orbs::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.55;
}
.user-card__cover-orbs::before {
    width: 7rem; height: 7rem;
    top: -3rem; right: -2rem;
    background: var(--uc-tint);
}
.user-card__cover-orbs::after {
    width: 5rem; height: 5rem;
    top: -1rem; left: 30%;
    background: color-mix(in srgb, var(--uc-tint) 70%, transparent);
}

/* Status dot - top right corner, pulse for active */
.user-card__status-dot {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--uc-tint);
    box-shadow: 0 0 0 3px var(--surface),
        0 0 12px color-mix(in srgb, var(--uc-tint) 60%, transparent);
    z-index: 2;
}
.user-card--active .user-card__status-dot {
    animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px var(--surface),
        0 0 0 0 color-mix(in srgb, var(--uc-tint) 50%, transparent); }
    50%      { box-shadow: 0 0 0 3px var(--surface),
        0 0 0 6px color-mix(in srgb, var(--uc-tint) 0%, transparent); }
}

/* ── Avatar - overlaps cover strip ────────────────────────────── */
.user-card__avatar {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    margin: -2rem auto 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent);
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 1.5rem;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    z-index: 2;
    transition: transform var(--t-base), box-shadow var(--t-base);
}

/* ── Identity (name + email) ─────────────────────────────────── */
.user-card__identity {
    padding: 0.65rem 1rem 0;
    text-align: center;
    min-width: 0;
}
.user-card__name {
    margin: 0;
    font-family: var(--font-d);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.user-card__email {
    margin: 0.2rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Roles ────────────────────────────────────────────────────── */
.user-card__roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.75rem 1rem 0.55rem;
    min-height: 1.85rem;
}
.user-card__roles:empty::after {
    content: "Tanpa role";
    font-size: 0.72rem;
    color: var(--text-faint);
    font-style: italic;
}
.user-card__roles .badge {
    font-size: 0.66rem;
    padding: 0.18rem 0.5rem;
}

/* ── Meta row (phone, joined date) ───────────────────────────── */
.user-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px dashed var(--border);
    background: color-mix(in srgb, var(--uc-tint) 3%, transparent);
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.user-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--font-mono);
}
.user-card__meta-item svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--uc-tint);
    flex-shrink: 0;
}
.user-card__meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer (status badge + quick actions) ───────────────────── */
.user-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem 0.85rem;
    margin-top: auto;
    flex-wrap: wrap;
}
.user-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.user-card__actions .action-icon {
    width: 1.85rem;
    height: 1.85rem;
}

/* ── Status variants (tint via custom property) ──────────────── */
.user-card--active {
    --uc-tint:      var(--accent);
    --uc-tint-bg:   var(--accent-light);
    --uc-tint-ring: var(--accent-ring);
}
.user-card--inactive {
    --uc-tint:      var(--danger-text);
    --uc-tint-bg:   var(--danger-bg);
    --uc-tint-ring: var(--danger-border);
    opacity: 0.92;
}
.user-card--inactive .user-card__avatar { filter: grayscale(0.45); }
.user-card--pending {
    --uc-tint:      var(--warning-text);
    --uc-tint-bg:   var(--warning-bg);
    --uc-tint-ring: var(--warning-border);
}

/* ── Card skeleton (loading) ─────────────────────────────────── */
.user-card.is-loading { pointer-events: none; cursor: default; }
.user-card.is-loading .user-card__name,
.user-card.is-loading .user-card__email {
    background: linear-gradient(90deg,
        var(--border) 25%, var(--surface-sunken) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    border-radius: var(--radius-sm);
    min-height: 0.85rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .user-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
    .user-card__cover { height: 3.5rem; }
    .user-card__avatar { width: 3rem; height: 3rem; font-size: 1.2rem; margin-top: -1.75rem; }
    .user-card__name { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .user-card { animation: none; }
    .user-card--active .user-card__status-dot { animation: none; }
}

/* ================================================================
   Password field - wrapper dengan eye-toggle (reusable)
   ----------------------------------------------------------------
   HTML pattern:
   <div class="field">
     <label class="field__label" for="pw1">Password Baru</label>
     <div class="field__control field__password">
       <input class="field__input" type="password" id="pw1"
              data-password-strength="pw1-meter">
       <button type="button" class="field__password-toggle"
               data-password-toggle aria-label="Tampilkan password">
         <!-- SVG eye injected by SIGMA -->
       </button>
     </div>
     <div class="password-strength" id="pw1-meter" data-tone="danger" data-score="0">
       <div class="password-strength__track">
         <div class="password-strength__fill"></div>
       </div>
       <span class="password-strength__label">Belum ada password</span>
     </div>
     <span class="field__error" aria-live="polite"></span>
   </div>

   SIGMA auto-binds: eye icon swap + live strength on input.
   ================================================================ */
.field__password { position: relative; }
.field__password .field__input { padding-right: 2.75rem; }

.field__password-toggle {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    z-index: 2;
}
.field__password-toggle:hover {
    color: var(--text);
    background: var(--surface-sunken);
}
.field__password-toggle:focus-visible {
    outline: none;
    color: var(--accent);
    border-color: var(--accent-ring);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.field__password-toggle.is-visible { color: var(--accent); }
.field__password-toggle svg { width: 1rem; height: 1rem; }

/* ── Password strength meter (reusable) ──────────────────────── */
.password-strength {
    --ps-tone: var(--danger-text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.password-strength[data-tone="danger"]  { --ps-tone: var(--danger-text); }
.password-strength[data-tone="warning"] { --ps-tone: var(--warning-text); }
.password-strength[data-tone="teal"]    { --ps-tone: var(--teal); }
.password-strength[data-tone="accent"]  { --ps-tone: var(--accent); }

.password-strength__track {
    flex: 1;
    height: 4px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}
.password-strength__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ps-tone) 50%, transparent),
        var(--ps-tone));
    border-radius: var(--radius-full);
    box-shadow: 0 0 8px color-mix(in srgb, var(--ps-tone) 40%, transparent);
    transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.password-strength__label {
    flex-shrink: 0;
    min-width: 5.5rem;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ps-tone);
    font-family: var(--font);
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}
.password-strength[data-score="0"] .password-strength__label {
    color: var(--text-faint);
    font-weight: 500;
}

/* ── Ordering dropdown (samping btn filter lanjutan) ──────────── */
.ordering-select {
    height: 2.25rem;
    padding: 0 2rem 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);

    /* Custom caret SVG */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2399a' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.7rem;
}
.ordering-select:hover { border-color: var(--border-strong); }
.ordering-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}


/* ================================================================
   Sigma Koordinat Picker (.skp / .skp-modal)
   Compact widget + fullscreen modal - sigma_koord_picker.js
   ================================================================ */

/* spacing when picker follows another form field */
.field + .skp,
.field-row + .skp { margin-top: .85rem; }

/* ── Widget label (matches .field__label) ───────────────────────── */
.skp__widget-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.skp__widget-label svg { color: var(--text-muted); flex-shrink: 0; }

/* ── Compact Widget ─────────────────────────────────────────────── */
.skp { position: relative; }

.skp__widget {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
    background: var(--surface);
    user-select: none;
    min-height: 3rem;
}
.skp__widget:hover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--surface-raised);
}
.skp__widget:focus-visible {
    outline: none;
    border-style: solid;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.skp--has-value .skp__widget {
    border-style: solid;
    border-color: var(--teal-border);
    background: var(--teal-bg);
}
.skp--has-value .skp__widget:hover {
    background: color-mix(in srgb, var(--teal) 16%, var(--surface));
}

.skp__icon {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background var(--t-base), color var(--t-base);
}
.skp--has-value .skp__icon {
    background: var(--teal-bg);
    color: var(--teal);
}

.skp__body { flex: 1; min-width: 0; }
.skp__body-empty {
    font-size: .84rem;
    color: var(--text-faint);
    font-style: italic;
}
.skp__body-coords {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--teal);
    font-weight: 600;
    letter-spacing: .01em;
}
.skp__body-address {
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .1rem;
    line-height: 1.35;
}

.skp__actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}
/* enforce [hidden] inside flex */
.skp__actions > [hidden] { display: none !important; }

.skp__pick-btn,
.skp__edit-btn {
    font-size: .76rem;
    font-weight: 500;
    padding: .3rem .65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    line-height: 1.4;
}
.skp__pick-btn:hover,
.skp__edit-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}
.skp__clear-btn {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    border: 1px solid transparent;
    background: var(--surface-sunken);
    color: var(--text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
}
.skp__clear-btn:hover {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

/* ── Fullscreen Modal ────────────────────────────────────────────── */
.skp-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--overlay, rgba(0,0,0,.7));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    backdrop-filter: blur(4px);
    animation: skp-fade-in .15s ease;
}
.skp-modal[hidden] { display: none !important; }
@keyframes skp-fade-in { from { opacity: 0 } to { opacity: 1 } }

.skp-modal__inner {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 880px;
    height: calc(100dvh - 2.5rem);
    max-height: 680px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: skp-modal-in .18s cubic-bezier(.25,.8,.25,1);
}
@keyframes skp-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97) }
    to   { opacity: 1; transform: none }
}

/* Header */
.skp-modal__header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-raised);
}
.skp-modal__title {
    flex: 1;
    font-family: var(--font-d);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -.01em;
}
.skp-modal__close {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
.skp-modal__close:hover {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

/* Toolbar (search + GPS) */
.skp-modal__toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}
.skp-modal__search-wrap { flex: 1; display: flex; gap: .4rem; min-width: 0; }
.skp-modal__search-input {
    flex: 1;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--text);
    font-size: .84rem;
    font-family: var(--font);
    outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base);
    min-width: 0;
}
.skp-modal__search-input::placeholder { color: var(--text-faint); }
.skp-modal__search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.skp-modal__search-btn {
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
    font-family: var(--font);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.skp-modal__search-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}
.skp-modal__gps-btn {
    height: 2.25rem;
    padding: 0 .85rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--teal-border);
    background: var(--teal-bg);
    color: var(--teal);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--font);
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
}
.skp-modal__gps-btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.skp-modal__gps-btn.is-loading { opacity: .6; pointer-events: none; }

/* Search results dropdown */
.skp-modal__results {
    position: absolute;
    top: calc(100% + 2px);
    left: .9rem;
    right: .9rem;
    z-index: 9999;
    background: var(--surface-raised);
    border: 1.5px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.skp-modal__results[hidden] { display: none !important; }
.skp-modal__result-item {
    padding: .55rem .85rem;
    cursor: pointer;
    font-size: .81rem;
    color: var(--text);
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.45;
    transition: background var(--t-fast);
}
.skp-modal__result-item:last-child { border-bottom: none; }
.skp-modal__result-item:hover {
    background: var(--accent-light);
    color: var(--text);
}
.skp-modal__result-msg {
    padding: .65rem .85rem;
    font-size: .81rem;
    color: var(--text-faint);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Map container - isolation prevents Leaflet z-indices from bleeding out */
.skp-modal__map-container {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
}
.skp-modal__map-el {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.skp-modal__map-hint-overlay {
    position: absolute;
    top: .75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    padding: .3rem .85rem;
    border-radius: var(--radius-full);
    pointer-events: none;
    white-space: nowrap;
    transition: opacity var(--t-base);
    z-index: 5;
    letter-spacing: .01em;
}
.skp-modal__map-hint-overlay.is-hidden { opacity: 0; pointer-events: none; }
.skp-modal__map-no-leaflet {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--text-muted);
    font-size: .875rem;
    background: var(--surface-sunken);
}

/* Footer */
.skp-modal__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
    flex-shrink: 0;
    min-height: 3.75rem;
}
.skp-modal__footer-info { flex: 1; min-width: 0; }
.skp-modal__footer-no-loc {
    font-size: .82rem;
    color: var(--text-faint);
    font-style: italic;
}
.skp-modal__footer-coords {
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    color: var(--teal);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.skp-modal__footer-address {
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: .12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}
.skp-modal__footer-address.is-loading {
    color: var(--text-faint);
    animation: skp-pulse 1.2s ease-in-out infinite;
}
@keyframes skp-pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

.skp-modal__footer-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Leaflet z-indices contained by isolation:isolate above */
.skp-modal__map-el .leaflet-pane        { z-index: 200 !important; }
.skp-modal__map-el .leaflet-tile-pane   { z-index: 200 !important; }
.skp-modal__map-el .leaflet-marker-pane { z-index: 600 !important; }
.skp-modal__map-el .leaflet-top,
.skp-modal__map-el .leaflet-bottom      { z-index: 800 !important; }
.skp-modal__map-el .leaflet-control     { z-index: 800 !important; }

/* Mobile */
@media (max-width: 640px) {
    .skp-modal { padding: 0; align-items: flex-end; }
    .skp-modal__inner {
        max-height: 92dvh;
        height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
    }
    .skp-modal__toolbar { flex-wrap: wrap; gap: .4rem; }
    .skp-modal__search-wrap { order: 1; width: 100%; }
    .skp-modal__gps-btn { order: 2; flex: 1; justify-content: center; }
    .skp-modal__search-btn { order: 3; }
    .skp-modal__results { left: .5rem; right: .5rem; }
    .skp-modal__footer { flex-direction: column; align-items: stretch; gap: .5rem; }
    .skp-modal__footer-actions { justify-content: flex-end; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mitra Permohonan Card List  (dipakai di hub_tracking.html + list.html)
   ───────────────────────────────────────────────────────────────────────── */

/* Container */
.pmtr-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Card */
.pmtr-card {
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.pmtr-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

/* Warning banner - KURANG_BERKAS */
.pmtr-card__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: color-mix(in srgb, var(--warning-text) 10%, var(--surface-sunken));
    border-left: 3px solid var(--warning-text);
    border-bottom: 1px solid var(--border);
}
.pmtr-card__warning-icon {
    font-size: 1rem;
    color: var(--warning-text);
    flex-shrink: 0;
    margin-top: 1px;
}
.pmtr-card__warning-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pmtr-card__warning-text strong {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--warning-text);
}
.pmtr-card__warning-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.pmtr-card__warning-deadline {
    font-size: var(--text-xs);
    color: var(--warning-text);
    font-family: var(--font-mono);
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}
.pmtr-card__warning-cta {
    flex-shrink: 0;
    align-self: center;
}

/* Card head */
.pmtr-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-2);
    flex-wrap: wrap;
}
.pmtr-card__jenis-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4rem;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    flex-shrink: 0;
}
/* Penguatan Fungsi = aksen (hijau, default); Pembangunan Strategis = danger
   (merah) - keduanya pakai token sehingga otomatis menyesuaikan dark/light. */
.pmtr-card__jenis-badge--pf {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent-ring);
}
.pmtr-card__jenis-badge--ps {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: color-mix(in srgb, var(--danger-text) 30%, transparent);
}
.pmtr-card__nomor {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.pmtr-card__status-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* Status badge colour variants */
.status--draf              { background: rgba(255,255,255,0.06); color: var(--text-faint); }
.status--menunggu-tinjauan { background: var(--info-bg);         color: var(--info-text); }
.status--sedang-ditinjau   { background: var(--info-bg);         color: var(--info-text); }
.status--perlu-perbaikan   { background: var(--warning-bg);      color: var(--warning-text); }
.status--kajian-lapangan   { background: rgba(139,92,246,0.13);  color: #a78bfa; }
.status--proses-akhir      { background: rgba(139,92,246,0.13);  color: #a78bfa; }
.status--disetujui         { background: var(--teal-bg);         color: var(--teal); }
.status--ditolak           { background: var(--danger-bg);       color: var(--danger-text); }
.status--dibatalkan        { background: rgba(255,255,255,0.06); color: var(--text-faint); }
.status--kadaluarsa        { background: rgba(255,255,255,0.06); color: var(--text-faint); }

[data-theme="light"] .status--draf,
[data-theme="light"] .status--dibatalkan,
[data-theme="light"] .status--kadaluarsa {
    background: rgba(0,0,0,0.06);
}

/* Card body */
.pmtr-card__body {
    padding: var(--sp-3) var(--sp-5) var(--sp-3);
}
.pmtr-card__judul {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    margin: 0 0 var(--sp-1);
}
.pmtr-card__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Defensive: pastikan banner ber-atribut hidden benar-benar tersembunyi
   (mengalahkan .pmtr-card__warning{display:flex}). */
.pmtr-card__warning[hidden] { display: none; }

/* Progress tracker di dalam card - pakai ulang .progress-* (sigma-features),
   hanya override padding agar pas dalam konteks card. */
.pmtr-card__tracker {
    border-top: 1px solid var(--border-subtle);
}
.pmtr-card__tracker .progress-steps {
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.pmtr-card__tracker .progress-step { min-width: 5rem; }
.pmtr-card__tracker .progress-step__label { font-size: var(--text-xs); max-width: 6rem; }
.pmtr-card__tracker .progress-desc {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle);
}

/* Card footer */
.pmtr-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-5);
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.pmtr-card__dates {
    font-size: var(--text-sm);
    color: var(--text-faint);
}
.pmtr-card__dates time {
    color: var(--text-muted);
}
.pmtr-card__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Skeleton placeholder */
.pmtr-skel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* ════════════════════════════════════════════════════════════════════════
   DETAIL PERMOHONAN - konten tab (redesain crafted, 2026-05-30)
   Override + tambahan; di-scope ke .detail-tab-main agar tidak bocor.
   ════════════════════════════════════════════════════════════════════════ */

/* Area tab = satu kartu surface ----------------------------------------- */
.detail-tab-main {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

/* Tab nav = header kartu (tanpa margin, gradient halus) ------------------ */
.detail-tab-main .tab-nav {
    gap: 0;
    margin: 0;
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 4%, var(--surface)), var(--surface));
    overflow-x: auto;
    scrollbar-width: none;
}
.detail-tab-main .tab-nav__item {
    padding: var(--sp-4) var(--sp-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    gap: .45rem;
}
.detail-tab-main .tab-nav__item:hover { color: var(--text); }
.detail-tab-main .tab-nav__item--active { color: var(--accent); border-bottom-color: var(--accent); }
.detail-tab-main .tab-nav__badge {
    font-size: .62rem; font-weight: 700; line-height: 1;
    padding: .2rem .42rem; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-faint) 18%, transparent);
    color: var(--text-muted);
}
.detail-tab-main .tab-nav__item--active .tab-nav__badge { background: var(--accent-light); color: var(--accent); }

/* Isi tab diberi padding di dalam kartu ---------------------------------- */
.detail-tab-main .tab-pane { padding: var(--sp-6); }
@media (max-width: 600px) { .detail-tab-main .tab-pane { padding: var(--sp-4); } }

/* Judul section ---------------------------------------------------------- */
.detail-tab-main .tab-section { margin-bottom: var(--sp-6); padding-bottom: 0; border-bottom: none; }
.detail-tab-main .tab-section:last-child { margin-bottom: 0; }
/* Catatan Admin = KOTAK alert ber-border penuh → kembalikan padding & border
   yang ter-reset oleh aturan tab-section di atas (border-bottom & padding-bottom
   sebelumnya terpotong). */
.detail-tab-main .tab-section--warning,
.detail-tab-main .tab-section--warning:last-child {
    padding: var(--sp-4);
    border: 1px solid var(--warning-border);
    margin-bottom: var(--sp-6);
}
.detail-tab-main .tab-section__title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-faint); margin: 0 0 var(--sp-3);
}
.detail-tab-main .tab-section__title i,
.detail-tab-main .tab-section__title svg { color: var(--accent); font-size: .9rem; width: .9rem; height: .9rem; opacity: 1; }

/* ── Informasi Umum: spec-sheet grid ───────────────────────────────────── */
.detail-tab-main .info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.detail-tab-main .info-row {
    display: flex; flex-direction: column; gap: .35rem;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    align-items: stretch;
    background: var(--surface);
    transition: background var(--t-fast);
}
.detail-tab-main .info-row:hover { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.detail-tab-main .info-row:nth-child(2n) { border-right: none; }
.detail-tab-main .info-row dt {
    font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-faint); padding: 0;
}
.detail-tab-main .info-row dd {
    font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.4; margin: 0;
}
@media (max-width: 560px) {
    .detail-tab-main .info-list { grid-template-columns: 1fr; }
    .detail-tab-main .info-row { border-right: none; }
}

/* Deskripsi (Tujuan / Sasaran) sebagai kartu lembut ---------------------- */
.detail-tab-main .detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .detail-tab-main .detail-two-col { grid-template-columns: 1fr; } }
.detail-tab-main .detail-meta-field {
    background: color-mix(in srgb, var(--accent) 3%, var(--surface));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}
.detail-tab-main .detail-meta-field__label {
    font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: .4rem;
}
.detail-tab-main .detail-meta-field__value { font-size: .875rem; font-weight: 500; color: var(--text); line-height: 1.6; }

/* ── Tab LOKASI ────────────────────────────────────────────────────────── */
.lokasi-summary { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.lokasi-summary__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .75rem; border-radius: var(--radius-full);
    background: var(--accent-light); color: var(--accent);
    border: 1px solid var(--accent-ring);
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.lokasi-summary__chip svg { width: .85rem; height: .85rem; flex-shrink: 0; }

.upt-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--sp-4);
    background: var(--surface);
}
.upt-group:last-child { margin-bottom: 0; }
.upt-group__header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border-bottom: 1px solid var(--border-subtle);
}
.upt-group__icon {
    width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.upt-group__icon svg { width: 1.15rem; height: 1.15rem; }
.upt-group__info { flex: 1; min-width: 0; }
.upt-group__name { font-weight: 700; font-size: .95rem; color: var(--text); line-height: 1.25; }
.upt-group__meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.upt-group__badge {
    flex-shrink: 0; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    padding: .25rem .55rem; border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
}
.kawasan-items { display: flex; flex-direction: column; }
.kawasan-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--t-fast);
}
.kawasan-item:last-child { border-bottom: none; }
.kawasan-item:hover { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.kawasan-item__jenis {
    flex-shrink: 0; min-width: 2.6rem; text-align: center;
    font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    padding: .28rem .35rem; border-radius: var(--radius-sm);
    background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-ring);
}
.kawasan-item__body { flex: 1; min-width: 0; }
.kawasan-item__nama { font-weight: 600; font-size: .875rem; color: var(--text); line-height: 1.3; }
.kawasan-item__prov { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

/* ── Action bar: aksen lembut, tidak datar ─────────────────────────────── */
.detail-actionbar {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    box-shadow: var(--shadow-xs);
}
.detail-actionbar__info i { font-size: 1.05rem; }
.detail-actionbar__info span { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Empty state: ikon DIBATASI ukurannya (perbaiki ikon raksasa) ──────── */
.dokumen-empty__icon {
    width: 3.25rem; height: 3.25rem; margin: 0 auto var(--sp-3);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
}
.dokumen-empty__icon svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.dokumen-empty__title { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .25rem; }
.dokumen-empty__desc { font-size: .82rem; color: var(--text-muted); line-height: 1.55; max-width: 22rem; margin: 0 auto; }

/* ── Polish dokumen-item + timeline (detail tab) ───────────────────────── */
.detail-tab-main .dokumen-item {
    padding-left: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    transition: background var(--t-fast);
}
.detail-tab-main .dokumen-item:hover { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.detail-tab-main .dokumen-item::before { width: 3px; top: .9rem; bottom: .9rem; }
.detail-tab-main .dokumen-item__header { padding: var(--sp-4) var(--sp-2) var(--sp-4) 0; gap: var(--sp-3); }
.detail-tab-main .dokumen-item__icon {
    width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md);
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.detail-tab-main .dokumen-item__icon svg,
.detail-tab-main .dokumen-item__icon i { width: 1.15rem; height: 1.15rem; font-size: 1.15rem; }
.detail-tab-main .dokumen-item--pending .dokumen-item__icon {
    background: color-mix(in srgb, var(--text-faint) 12%, transparent); color: var(--text-faint);
}
.detail-tab-main .dokumen-item__kode {
    font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-faint);
}
.detail-tab-main .dokumen-item__nama { font-weight: 600; font-size: .9rem; color: var(--text); line-height: 1.3; margin-top: .1rem; }
.detail-tab-main .dokumen-item__file { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; font-family: var(--font-mono); }

/* Aksi dokumen RINGKAS - tombol Lihat/Unduh jadi ikon, chip & note kecil agar
   tidak memakan banyak lebar (lihat tab Dokumen). */
.detail-tab-main .dokumen-item__actions { gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.dok-iconbtn { width: 1.9rem; height: 1.9rem; padding: 0; flex-shrink: 0; }
.dok-iconbtn i { font-size: .95rem; }
.dok-chip {
    font-size: .66rem; padding: 1px .5rem; height: 1.4rem; line-height: 1;
    display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
}
.dok-chip i { font-size: .78rem; }
.dok-note { font-size: .72rem; color: var(--text-faint); white-space: nowrap; }
/* Semua badge status di aksi dokumen → compact & seragam (tab Dokumen & Proses) */
.detail-tab-main .dokumen-item__actions > .badge { font-size: var(--text-xs); }
/* Deskripsi dokumen tahapan (saat belum diunggah) */
.detail-tab-main .dokumen-item__desc { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.35; }

/* Dokumen Proses: header kelompok per-tahap (layout sama dgn tab Dokumen) */
.dok-tahap-group { margin-bottom: var(--sp-5); }
.dok-tahap-group:last-child { margin-bottom: 0; }
.dok-tahap-group__head {
    font-family: var(--font-b); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
    padding: var(--sp-2) 0; margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--border);
}

/* Slot upload dokumen tahapan di modal aksi - KARTU (ikon + badge + meta),
   konsisten dgn kartu dokumen persyaratan. */
.amodal-upload {
    margin-top: var(--sp-3); padding: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.amodal-upload__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.amodal-upload__ico {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--radius-sm);
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.amodal-upload__info { min-width: 0; }
.amodal-upload__name { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.amodal-upload__tag {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 1px .4rem; border-radius: var(--radius-sm); vertical-align: middle; margin-left: .25rem;
}
.amodal-upload__tag--wajib    { background: var(--danger-bg); color: var(--danger-text); }
.amodal-upload__tag--opsional { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.amodal-upload__meta { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }
.amodal-upfile { font-size: var(--text-sm); padding: var(--sp-2); }
/* Status upload per-slot (upload-on-select) */
.amodal-upload__state { display: flex; align-items: center; gap: .35rem; font-size: .74rem; margin-top: var(--sp-2); }
.amodal-upload__state i { font-size: .9rem; }
.amodal-upload__state--busy { color: var(--text-muted); }
.amodal-upload__state--busy i { animation: amodal-spin 1s linear infinite; }
@keyframes amodal-spin { to { transform: rotate(360deg); } }
.amodal-upload__state--ok { color: var(--success-text); }
.amodal-upload__state--err { color: var(--danger-text); }

/* ── Verifikasi dokumen persyaratan di dalam modal aksi (tahap Balai/Pusat) ── */
.amodal-verify {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}
.amodal-verify__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: .7rem .9rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}
.amodal-verify__head-ttl {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--text-sm); font-weight: 700; color: var(--text); font-family: var(--font);
}
.amodal-verify__head-ttl .ti { color: var(--accent); font-size: 1.05rem; }
.amodal-verify__count {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: .2rem .55rem; border-radius: var(--radius-full); white-space: nowrap;
    font-family: var(--font-mono);
}
.amodal-verify__count--wait { background: var(--warning-bg); color: var(--warning-text); }
.amodal-verify__count--done { background: var(--teal-bg); color: var(--teal); }

.amodal-verify__list { display: flex; flex-direction: column; }
.amodal-verify__row {
    padding: .6rem .9rem;
    border-top: 1px solid var(--border-subtle);
    transition: background var(--t-fast, .12s) ease;
}
.amodal-verify__row:first-child { border-top: none; }
.amodal-verify__row--pending { background: var(--warning-bg); }
.amodal-verify__row--busy { opacity: .55; pointer-events: none; }
.amodal-verify__row--ok .amodal-verify__ico { color: var(--teal); }
.amodal-verify__row--no .amodal-verify__ico { color: var(--danger-text); }
.amodal-verify__row--pending .amodal-verify__ico { color: var(--warning-text); }
.amodal-verify__row--empty .amodal-verify__ico { color: var(--text-faint); }

.amodal-verify__main { display: flex; align-items: center; gap: .65rem; }
.amodal-verify__ico { flex-shrink: 0; display: inline-flex; font-size: 1.2rem; line-height: 1; }
.amodal-verify__info { flex: 1 1 auto; min-width: 0; }
.amodal-verify__nama {
    font-size: var(--text-sm); font-weight: 600; color: var(--text);
    line-height: 1.3; font-family: var(--font);
}
.amodal-verify__req { color: var(--danger-text); font-weight: 700; }
.amodal-verify__file {
    font-size: .7rem; color: var(--text-faint); font-family: var(--font-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem;
}
.amodal-verify__act { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.amodal-verify__status {
    font-size: .72rem; font-weight: 700; font-family: var(--font);
    color: var(--text-muted); white-space: nowrap;
}
.amodal-verify__row--ok .amodal-verify__status { color: var(--teal); }
.amodal-verify__row--no .amodal-verify__status { color: var(--danger-text); }

/* Tombol-tombol kompak */
.amodal-verify__eye,
.amodal-verify__btn {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--border); border-radius: var(--radius-btn, 8px);
    cursor: pointer; font-family: var(--font); font-weight: 600;
    background: var(--surface-raised); color: var(--text-muted);
    transition: background var(--t-fast, .12s) ease, border-color var(--t-fast, .12s) ease, color var(--t-fast, .12s) ease;
}
.amodal-verify__eye {
    width: 2rem; height: 2rem; justify-content: center; flex-shrink: 0;
    text-decoration: none; font-size: 1rem;
}
.amodal-verify__eye:hover { background: var(--surface-sunken); color: var(--text); }
.amodal-verify__btn { padding: .35rem .6rem; font-size: .74rem; }
.amodal-verify__btn .ti { font-size: .95rem; }
.amodal-verify__btn:disabled { opacity: .5; cursor: default; }
.amodal-verify__btn--ok { color: var(--success-text); border-color: var(--success-border); }
.amodal-verify__btn--ok:hover:not(:disabled) { background: var(--success-bg); }
.amodal-verify__btn--no { color: var(--danger-text); border-color: var(--danger-border); }
.amodal-verify__btn--no:hover:not(:disabled) { background: var(--danger-bg); }
.amodal-verify__btn--send { background: var(--danger-text); color: #fff; border-color: var(--danger-text); }
.amodal-verify__btn--send:hover:not(:disabled) { filter: brightness(1.08); }
.amodal-verify__btn--cancel:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }

/* Baris alasan penolakan - hanya tampil saat menolak */
.amodal-verify__reason { display: flex; gap: .4rem; align-items: center; margin-top: .55rem; padding-left: 1.85rem; }
.amodal-verify__reason[hidden] { display: none; }
.amodal-verify__reason-inp { flex: 1 1 auto; min-width: 0; font-size: .78rem; }

.amodal-verify__note {
    font-size: .7rem; color: var(--text-muted); line-height: 1.45;
    padding: .55rem .9rem; margin: 0;
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
}
.amodal-verify__note .ti { flex-shrink: 0; margin-top: .08rem; }

@media (max-width: 480px) {
    .amodal-verify__act { flex-wrap: wrap; justify-content: flex-end; }
    .amodal-verify__btn span { display: none; }
    .amodal-verify__btn { padding: .4rem; }
    .amodal-verify__reason { flex-wrap: wrap; padding-left: 0; }
    .amodal-verify__reason-inp { flex: 1 1 100%; }
}

/* Timeline: dot berwarna per status terminal + current pulse */
.timeline-v2__dot--current {
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.timeline-v2__status { font-family: var(--font-d); font-size: .95rem; }


/* ════════════════════════════════════════════════════════════════════
   DAFTAR PERMOHONAN & KERJA SAMA - komponen .apl-* (dipindah dari
   permohonan/list.html agar dipakai bersama lintas halaman).
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   DAFTAR PERMOHONAN - ADMIN + MITRA (page-scoped)
   Komponen toolbar/filter/statbar mengikuti gold-standard pengelolaan
   pengguna (.toolbar · .filter-tabs · .adv-filter · .stat-cards).
   Hanya gaya khas halaman ini yang ditulis di sini.
   ════════════════════════════════════════════════════════════════════ */

/* ── KPI statbar - premium stat card + ikon disc ─────────────────── */
.apl-kpi { margin-bottom: var(--sp-5); }
.apl-kpi .stat-card { position: relative; overflow: hidden; }
.apl-kpi .stat-card__ico {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--text-faint) 12%, transparent);
    color: var(--text-muted);
}
.apl-kpi .stat-card--accent  .stat-card__ico { background: var(--accent-light); color: var(--accent); }
.apl-kpi .stat-card--info    .stat-card__ico { background: var(--info-bg);      color: var(--info-text); }
.apl-kpi .stat-card--warning .stat-card__ico { background: var(--warning-bg);   color: var(--warning-text); }
.apl-kpi .stat-card--success .stat-card__ico { background: var(--teal-bg);      color: var(--teal); }
/* .stat-card__ico diposisikan absolut di kanan-atas, jadi SEMUA teks kartu
   harus diberi talangan selebar ikon. Tanpa ini nilai panjang (mis. nominal
   rupiah) merayap ke bawah ikon dan terbaca terpotong. */
.apl-kpi .stat-card__value { font-family: var(--font-mono); padding-right: 3rem; }
.apl-kpi .stat-card__label { padding-right: 2.6rem; }

/* Toolbar search */
.toolbar__search { min-width: 16rem; }

/* Adv-filter punya hingga 5 field → beri ruang lebih (mobile = 1 kolom).
   Base .adv-filter pakai overflow:hidden untuk animasi collapse → dropdown
   select-sigma (mitra/UPT) terpotong tepi panel. Solusi: setelah animasi BUKA
   selesai (delay 0.3s) overflow→visible agar dropdown bisa keluar; saat MENUTUP
   overflow kembali hidden SEKETIKA (delay 0s) supaya konten ter-clip rapi. */
#apl-adv-panel {
    transition:
        max-height .3s cubic-bezier(.4,0,.2,1),
        opacity .22s ease,
        padding .3s cubic-bezier(.4,0,.2,1),
        margin-bottom .3s cubic-bezier(.4,0,.2,1),
        visibility 0s linear .3s,
        overflow 0s linear 0s;
}
#apl-adv-panel.is-open {
    max-height: 52rem;
    overflow: visible;
    transition:
        max-height .3s cubic-bezier(.4,0,.2,1),
        opacity .22s ease .05s,
        padding .3s cubic-bezier(.4,0,.2,1),
        margin-bottom .3s cubic-bezier(.4,0,.2,1),
        visibility 0s linear 0s,
        overflow 0s linear .3s;
}

/* ── Primary filter bar - di atas toolbar ────────────────────────── */
.apl-primary-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.apl-primary-bar__left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.apl-primary-bar__right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Jenis chips di primary bar - KS filter */
.apl-ks-chips { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Info bar meta - di bawah adv-filter ─────────────────────────── */
.apl-bar-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.apl-bar-meta__count {
    font-size: var(--text-sm); color: var(--text-muted);
    display: inline-flex; align-items: center; gap: .4rem;
}
.apl-bar-meta__count strong { color: var(--text); font-weight: 700; }

/* Revisi toggle di dalam adv-filter (sejajar field lain) */
.apl-revisi-field { align-self: end; }
.apl-revisi-field .apl-check {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-sm); color: var(--text); cursor: pointer;
    padding: .5rem 0;
}

/* ── List container ──────────────────────────────────────────────── */
.apl-list { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Card - admin (full-width) ───────────────────────────────────── */
/* overflow visible agar dropdown "Tindak Lanjut" tidak terpotong kartu
   (basis .pmtr-card pakai overflow:hidden). Sudut bawah panel riwayat
   dibulatkan manual karena kartu tak lagi meng-clip. */
.apl-card { width: 100%; overflow: visible; }

/* Head: strip meta (jenis + nomor + tag kiri · revisi + status kanan) */
.apl-card__head {
    display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-3) var(--sp-5) var(--sp-3);
}
.apl-card__head-main {
    display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap; min-width: 0; flex: 1 1 auto;
}
.apl-card__head-right {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap; flex-shrink: 0; margin-left: auto;
}
.apl-card__head-right .pmtr-card__status-badge { margin: 0; }

/* Judul - batasi 2 baris agar judul super panjang tidak mendominasi kartu */
.apl-card__judul {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pemisah pada meta footer (mis. "2 UPT · 4 kawasan") */
.apl-meta__sep { color: var(--text-faint); margin: 0 0.4rem; }

/* Badge jenis kerja sama - DITULIS PENUH (bukan singkatan) */
.apl-jenis-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 1.6rem; padding: 0 .7rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: .01em; white-space: nowrap;
    border: 1px solid transparent;
}
.apl-jenis-badge i { font-size: .9rem; }
.apl-jenis-badge--pf { background: var(--accent-light); color: var(--accent); border-color: var(--accent-ring); }
.apl-jenis-badge--ps { background: var(--danger-bg); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger-text) 30%, transparent); }
.apl-jenis-badge__abbr {
    font-family: var(--font-mono); font-weight: 800;
    font-size: .68rem; opacity: .7;
    padding-left: .4rem; margin-left: .1rem;
    border-left: 1px solid currentColor;
}

.apl-tag {
    display: inline-flex; align-items: center; gap: 3px;
    height: 1.5rem; padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs); font-weight: 600;
    border: 1px solid var(--border);
}
.apl-tag i { font-size: .8rem; }
.apl-tag--pm  { background: var(--surface-sunken); color: var(--text-muted); }
.apl-tag--rev { background: var(--warning-bg); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning-text) 28%, transparent); }

.apl-card__mitra {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap;
}
.apl-card__mitra i { color: var(--text-faint); font-size: .95rem; }
.apl-card__mitra-nama { color: var(--text); font-weight: 600; }
.apl-card__mitra-jenis {
    font-size: var(--text-xs); color: var(--text-muted);
    background: var(--surface-sunken); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full); padding: 1px var(--sp-2);
}
.apl-card__tracker .progress-step__label { max-width: 6.5rem; }

.apl-card__foot { align-items: center; }
.apl-meta {
    display: flex; align-items: center; gap: var(--sp-2) var(--sp-4);
    flex-wrap: wrap; min-width: 0;
}
.apl-meta__item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-sm); color: var(--text-faint);
    white-space: nowrap;
}
.apl-meta__item i { font-size: .95rem; color: var(--text-faint); }
.apl-meta__item time { color: var(--text-muted); }

/* ── Riwayat expand - panel solid, timeline tertata ──────────────── */
.apl-card__riwayat {
    border-top: 1px solid var(--border);
    background: var(--surface-raised);
    box-shadow: inset 0 6px 12px -10px rgba(0,0,0,.45);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.apl-card__riwayat[hidden] { display: none; }
.apl-card__riwayat-inner { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.apl-card__riwayat-title {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-sm); font-weight: 700; color: var(--text);
    margin-bottom: var(--sp-4); letter-spacing: .01em;
}
.apl-card__riwayat-title i { font-size: 1rem; color: var(--accent); }
.apl-card__riwayat-loading {
    padding: var(--sp-5);
    font-size: var(--text-sm); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--sp-2);
}

/* Timeline riwayat - grid: [dot | konten], label sejajar dgn circle */
.apl-rw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.apl-rw__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--sp-1);
    padding-bottom: var(--sp-3);
}
.apl-rw__item:last-child { padding-bottom: 0; }
/* garis vertikal penghubung */
.apl-rw__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: .45rem; top: 1rem; bottom: -0.2rem;
    width: 2px; background: var(--border);
}
.apl-rw__dot {
    grid-row: 1 / span 2;
    width: 1rem; height: 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-sunken);
    border: 2px solid var(--border-strong);
    color: var(--text-faint);
    z-index: 1; margin-top: 1px;
}
.apl-rw__dot svg { width: .6rem; height: .6rem; }
.apl-rw__dot--current {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 3px var(--accent-light);
}
.apl-rw__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-3); min-width: 0;
}
.apl-rw__text {
    font-size: var(--text-sm); color: var(--text);
    line-height: 1.45; min-width: 0; font-weight: 500;
}
.apl-rw__head .pmtr-card__status-badge { margin: 0; flex-shrink: 0; }
.apl-rw__meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .35rem var(--sp-3);
    font-size: var(--text-xs); color: var(--text-faint);
}
.apl-rw__meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.apl-rw__meta-item i { font-size: .85rem; }
.apl-rw__meta-item time { color: var(--text-muted); }

/* ── Modal "Ajukan" - kartu jenis pengajuan ──────────────────────── */
.apl-typegrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
@media (max-width: 640px) { .apl-typegrid { grid-template-columns: 1fr; } }
.apl-typecard {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface-raised);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none; color: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.apl-typecard:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.apl-typecard__icon {
    width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent);
    font-size: 1.25rem; margin-bottom: var(--sp-1);
}
.apl-typecard__title { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.apl-typecard__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
/* Kartu jenis nonaktif (mitra tanpa PKS layak untuk perpanjangan/adendum) */
.apl-typecard--disabled { opacity: .55; cursor: not-allowed; }
.apl-typecard--disabled .apl-typecard__icon { background: var(--surface-sunken); color: var(--text-faint); }
.apl-typecard--disabled:hover { border-color: var(--border); box-shadow: none; transform: none; }

/* ── Panduan modal - daftar status badge legend ──────────────────── */
.apl-legend { display: flex; flex-direction: column; gap: var(--sp-2); }
.apl-legend__row {
    display: grid; grid-template-columns: minmax(8.5rem, max-content) 1fr; align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm); color: var(--text-muted);
}
.apl-legend__row .pmtr-card__status-badge { margin: 0; justify-self: start; }

/* Tone tambahan untuk panduan-flow (danger/teal tak ada di komponen dasar) */
#panduan-permohonan .panduan-flow__step[data-tone="danger"] .panduan-flow__num {
    border-color: var(--danger-text); color: var(--danger-text); background: var(--danger-bg);
}
#panduan-permohonan .panduan-flow__step[data-tone="teal"] .panduan-flow__num {
    border-color: var(--teal); color: var(--teal); background: var(--teal-bg);
}

/* ── Toggle "Perlu Tindakan" ────────────────────────────────── */
.apl-aksi-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: 2.1rem; padding: 0 0.85rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid var(--accent-ring);
    cursor: pointer; white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.apl-aksi-toggle[hidden] { display: none; }
.apl-aksi-toggle i { font-size: 1rem; }
.apl-aksi-toggle:hover { box-shadow: var(--shadow-xs); }
.apl-aksi-toggle.is-active {
    background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent);
}
.apl-aksi-toggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.2rem; padding: 0 0.35rem;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--accent); color: var(--on-accent, #fff);
}
.apl-aksi-toggle.is-active .apl-aksi-toggle__count { background: rgba(255,255,255,0.25); color: #fff; }

.view-toggle__btn { width: auto; padding: 0 0.75rem; }

/* ── Aksi Tindak Lanjut (dropdown per kartu) ─────────────────────── */
.apl-tl__item i { width: 1rem; text-align: center; }
.apl-tl__item--success { color: var(--teal); }
.apl-tl__item--success:hover { background: var(--teal-bg); }
.apl-tl__item--danger  { color: var(--danger-text); }
.apl-tl__item--danger:hover { background: var(--danger-bg); }
.apl-tl__item--warning { color: var(--warning-text); }
.apl-tl__item--warning:hover { background: var(--warning-bg); }
.apl-tl__item--accent  { color: var(--accent); }
.apl-tl__item--accent:hover { background: var(--accent-light); }

/* ── Modal Tindak Lanjut ─────────────────────────────────────────── */
.apl-action-ctx {
    padding: 0.7rem 0.9rem; margin-bottom: 1rem;
    background: var(--surface-sunken); border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.apl-action-ctx strong { color: var(--text); }
.apl-action-ctx .pmtr-card__status-badge { margin: 0; }
.apl-action-rec {
    display: flex; gap: 0.5rem; align-items: flex-start;
    padding: 0.65rem 0.9rem; margin-bottom: 1rem;
    background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info-text) 25%, transparent);
    border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text); line-height: 1.5;
}
.apl-action-rec i { color: var(--info-text); flex-shrink: 0; margin-top: 1px; }
.apl-action-rec[hidden] { display: none; }

/* Responsiveness halus untuk head & foot kartu */
@media (max-width: 560px) {
    .apl-card__head-right { margin-left: 0; }
    .apl-card__foot .pmtr-card__actions { width: 100%; }
}

/* ── Chip filter - shared (jenis-tabs di primary bar) ────────────── */
.apl-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 2rem; padding: 0 .85rem; border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
    background: var(--surface-sunken); border: 1px solid var(--border);
    cursor: pointer; white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.apl-chip i { font-size: .9rem; }
.apl-chip:hover { border-color: var(--accent-ring); color: var(--text); }
.apl-chip.is-active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.apl-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.1rem; padding: 0 .3rem;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--border-strong); color: var(--text-muted);
}
.apl-chip.is-active .apl-chip__count { background: rgba(255,255,255,0.25); color: #fff; }

/* Badge jenis permohonan - warna per jenis */
.apl-tag--pm-baru         { color: var(--info-text);    font-weight: 600; font-size: var(--text-xs); }
.apl-tag--pm-perpanjangan { color: var(--teal);         font-weight: 600; font-size: var(--text-xs); }
.apl-tag--pm-adendum      { color: var(--warning-text); font-weight: 600; font-size: var(--text-xs); }

/* ── Toggle visibility - class beats any CSS display: flex on card list ── */
.apl-view-hidden { display: none !important; }

/* ── Table view - komponen .table-wrap + .table dari sigma-components ── */
/* var(--bg2) = opaque card surface; var(--surface) bisa semi-transparan di
   glass-morphism dark mode sehingga freeze column tembus pandang. */
#apl-permohonan-table {
    --tbl-head-bg: color-mix(in srgb, var(--accent) 10%, var(--bg2));
    --tbl-row-bg:  var(--bg2);
    --tbl-row-hover-bg: color-mix(in srgb, var(--accent) 7%, var(--bg2));
    min-width: 54rem;
}
#apl-permohonan-table thead th {
    position: sticky; top: 0; z-index: 3;
    background-color: var(--tbl-head-bg);   /* background-color = pasti opaque */
    box-shadow: 0 1px 0 var(--border);
    color: var(--text); font-weight: 700;
}
#apl-permohonan-table tbody td {
    background-color: var(--tbl-row-bg);    /* background-color = pasti opaque */
    border-color: var(--border-subtle);
    transition: background-color var(--t-fast);
}
/* Freeze kolom pertama (Nomor) + terakhir (Aksi) ≥ 768px.
   WAJIB background-color (bukan shorthand background) agar di dark mode
   tidak tembus - shorthand bisa inherit gradient dari parent glass wrap. */
@media (min-width: 768px) {
    #apl-permohonan-table th:first-child,
    #apl-permohonan-table td:first-child {
        position: sticky; left: 0; z-index: 2;
        background-color: var(--tbl-row-bg);
        box-shadow: 2px 0 4px -1px rgba(0,0,0,.25);
    }
    #apl-permohonan-table thead th:first-child {
        z-index: 4; background-color: var(--tbl-head-bg);
    }
    #apl-permohonan-table th:last-child,
    #apl-permohonan-table td:last-child {
        position: sticky; right: 0; z-index: 2;
        background-color: var(--tbl-row-bg);
        box-shadow: -2px 0 4px -1px rgba(0,0,0,.25);
    }
    #apl-permohonan-table thead th:last-child {
        z-index: 4; background-color: var(--tbl-head-bg);
    }
    #apl-permohonan-table tbody tr:hover td,
    #apl-permohonan-table tbody tr:hover td:first-child,
    #apl-permohonan-table tbody tr:hover td:last-child {
        background-color: var(--tbl-row-hover-bg);
    }
}
@media (max-width: 767px) {
    #apl-permohonan-table tbody tr:hover td { background-color: var(--tbl-row-hover-bg); }
}
/* ── Table view - baris RAPAT, konten SATU baris agar mudah discan ──── */
/* Padding td lebih ketat + vertical center; nomor & judul tidak wrap. */
#apl-permohonan-table tbody td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); vertical-align: middle; }
#apl-permohonan-table thead th {
    font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase;
}
/* Status pill versi compact khusus tabel (badge kartu terlalu besar di sini). */
#apl-permohonan-table .pmtr-card__status-badge {
    font-size: var(--text-xs); padding: 1px var(--sp-2); height: auto; line-height: 1.55;
    white-space: nowrap;
}

/* Cell content helpers */
.apl-tbl-nomor     { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--text); display: block; white-space: nowrap; }
.apl-tbl-judul     { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; display: block; }
.apl-tbl-mitra     { font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; display: block; }
.apl-tbl-mitra-sub { font-size: var(--text-xs); color: var(--text-faint); display: block; white-space: nowrap; }
.apl-tbl-num       { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.apl-tbl-date      { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Jenis: chip KS (PF/PS) + label jenis permohonan - SATU baris, TIDAK wrap */
.apl-tbl-jenis     { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.apl-tbl-ks {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.3rem; padding: 0 .4rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: .66rem; font-weight: 800; letter-spacing: .04em;
}
.apl-tbl-ks--pf { background: var(--accent-light); color: var(--accent); }
.apl-tbl-ks--ps { background: var(--danger-bg);  color: var(--danger-text); }
.apl-tbl-pm                 { font-size: var(--text-xs); font-weight: 600; }
.apl-tbl-pm--baru           { color: var(--text-muted); }
.apl-tbl-pm--perpanjangan   { color: var(--teal); }
.apl-tbl-pm--adendum        { color: var(--warning-text); }

/* Action buttons di tabel - compact row */
.apl-tbl-actions   { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Grid form modal Input Data PKS */
.pksm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.pksm-grid .pksm-col-2 { grid-column: 1 / -1; }
@media (max-width: 540px) { .pksm-grid { grid-template-columns: 1fr; } }
/* Rincian rekening penampungan (mekanisme REKENING_LAINNYA) — 3 input sejajar. */
.pksm-rekening-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 640px) { .pksm-rekening-grid { grid-template-columns: 1fr; } }

/* Catatan pengantar per-tab pada modal Edit PKS */
.pksm-tab-note {
    margin: 0 0 var(--sp-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Modal Edit PKS - layout split kiri (rail tab) / kanan (form) ──────
   Body modal TANPA padding agar divider rail menyatu penuh atas→bawah.
   Padding dipindah ke rail & ke tiap section. Scroll HANYA di panel kanan
   (section dinamis); rail diam. */
#pksedit-modal .modal__body,
#ipks-modal .modal__body {
    padding: 0;
    overflow: hidden;          /* body tak ikut scroll */
    display: flex;
    min-height: 0;
}
.pksm-split {
    display: flex; gap: 0; align-items: stretch;
    flex: 1 1 auto; min-height: 0; width: 100%;
}
.pksm-railnav {
    flex: 0 0 14rem; max-width: 14rem; min-width: 11rem;
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4);
    border-right: 1px solid var(--border);   /* divider penuh atas→bawah */
    overflow-y: auto;                          /* rail panjang → scroll sendiri */
}
.pksm-railnav__item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-btn);
    border: 1px solid transparent; background: transparent;
    font-family: var(--font); font-size: var(--text-sm); font-weight: 600;
    color: var(--text-muted); text-align: left; cursor: pointer; width: 100%;
    transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pksm-railnav__item i { font-size: 1.05rem; flex-shrink: 0; }
.pksm-railnav__item:hover { background: var(--bg2); color: var(--text); }
.pksm-railnav__item.is-active {
    background: var(--accent-light); color: var(--accent);
    border-color: var(--accent-border, var(--accent-ring));
}
.pksm-railnav__item:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.pksm-railnav__num {
    margin-left: auto; font-size: var(--text-xs); font-family: var(--font-mono);
    color: var(--text-faint);
}
.pksm-panes {
    flex: 1 1 auto; min-width: 0;
    min-height: 30rem;
    overflow-y: auto;          /* HANYA panel kanan yang scroll */
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.pksm-pane { display: none; padding: var(--sp-5) var(--sp-6); }
.pksm-pane.is-active { display: block; }

/* Alert error modal Edit - sticky di puncak panel kanan, full-width */
#pksedit-modal #pksedit-alert {
    position: sticky; top: 0; z-index: 3;
    margin: 0; border-radius: 0;
    border-width: 0 0 1px;
    padding: var(--sp-3) var(--sp-6);
}
#pksedit-modal #pksedit-alert[hidden] { display: none; }

/* Indikator field terkunci (PKS dari permohonan) */
.pksm-locknote {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
    background: var(--info-bg); border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    font-size: var(--text-xs); line-height: 1.5; color: var(--info-text);
}
.pksm-locknote i { font-size: 0.95rem; margin-top: 0.1em; flex-shrink: 0; }
.pksm-locknote[hidden] { display: none; }
.pksm-lockbadge {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4em;
    padding: 0.05rem 0.4rem; border-radius: var(--radius-full);
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border);
}
.pksm-lockbadge i { font-size: 0.7rem; }

/* Grup radio-pill ringkas (jenis KS / jenis permohonan) di modal Edit */
.pksm-radios { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pksm-radio {
    position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-btn);
    border: 1px solid var(--border); background: var(--surface);
    font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); cursor: pointer;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
/* Sembunyikan native radio sepenuhnya (override style radio global, termasuk
   keadaan :disabled yang specificity-nya lebih tinggi). Tanpa ini, lingkaran
   radio bawaan tumpang tindih dengan teks label. */
.pksm-radios .pksm-radio input,
.pksm-radios .pksm-radio input:disabled {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-appearance: none; appearance: none;
}
.pksm-radio i { font-size: 1rem; }
.pksm-radio:hover { border-color: var(--border-strong); color: var(--text); }
.pksm-radio:has(input:checked) {
    border-color: var(--accent); background: var(--accent-light); color: var(--accent);
}
.pksm-radio:has(input:focus-visible) { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.pksm-radios.is-locked .pksm-radio { cursor: not-allowed; opacity: 0.7; }
.pksm-radios.is-locked .pksm-radio:hover { border-color: var(--border); color: var(--text-muted); }
.pksm-radios.is-locked .pksm-radio:has(input:checked) { opacity: 1; }

/* Sub-judul antar-grup dalam satu seksi pane (mis. "Komitmen Pembiayaan") */
.pksm-subhead {
    display: flex; align-items: center; gap: 0.4rem;
    margin: var(--sp-5) 0 var(--sp-3); padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm); font-weight: 700; color: var(--text);
}
.pksm-subhead i { color: var(--accent); }

/* Input nominal dengan prefix mata uang (Rp) + mask ribuan via JS */
.field-money { position: relative; display: flex; align-items: stretch; }
.field-money__cur {
    display: inline-flex; align-items: center; padding: 0 var(--sp-3);
    background: var(--surface-sunken); border: 1px solid var(--border); border-right: none;
    border-radius: var(--radius-input) 0 0 var(--radius-input);
    font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
}
.field-money__input {
    flex: 1 1 auto; min-width: 0;
    border-radius: 0 var(--radius-input) var(--radius-input) 0 !important;
    font-family: var(--font-mono); text-align: right;
}
.field-money:focus-within .field-money__cur { border-color: var(--accent); color: var(--accent); }

/* Input dengan suffix satuan (mis. Batang, Unit) */
.field-unit { display: flex; align-items: stretch; }
.field-unit .field__input { border-radius: var(--radius-input) 0 0 var(--radius-input) !important; }
.field-unit__suf {
    display: inline-flex; align-items: center; padding: 0 var(--sp-3); white-space: nowrap;
    background: var(--surface-sunken); border: 1px solid var(--border); border-left: none;
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
    font-size: var(--text-sm); color: var(--text-muted);
}
.field-unit:focus-within .field-unit__suf { border-color: var(--accent); color: var(--accent); }

/* Kartu info kegiatan di modal Isi Capaian */
.pkscap-info {
    background: var(--surface-sunken); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--sp-3); margin-bottom: var(--sp-4);
}
.pkscap-info__keg { font-weight: 600; color: var(--text); }
.pkscap-info__rl { font-size: var(--text-xs); color: var(--text-faint); margin-top: .15rem; }
.pkscap-info__target { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--sp-2);
    font-size: var(--text-sm); color: var(--text-muted); }
.pkscap-info__target i { color: var(--accent); font-size: .95rem; }

/* Modal Isi Capaian: rencana/realisasi Rp + outcome (disimpan bersama capaian).
   Rupiah menempel di KegiatanInstance (target_rupiah/realisasi_rupiah). */
.pkscap-ang-wrap { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.pkscap-ang-head { display: flex; align-items: center; gap: .4rem; margin-bottom: var(--sp-3);
    font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.pkscap-ang-head i { color: var(--accent); }
.pkscap-rpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 480px) { .pkscap-rpgrid { grid-template-columns: 1fr; } }
.pkscap-rp { display: flex; align-items: center; background: var(--surface-sunken);
    border: 1px solid var(--border); border-radius: var(--radius-input); overflow: hidden;
    transition: border-color var(--t-fast) ease; }
.pkscap-rp:focus-within { border-color: var(--accent); }
.pkscap-rp__pfx { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
    padding: .4rem .5rem; flex-shrink: 0; user-select: none; }
.pkscap-rp .field__input { flex: 1; min-width: 0; border: 0; background: transparent;
    font-family: var(--font-mono); text-align: right; }
.pkscap-rp .field__input:focus { outline: none; box-shadow: none; }

/* Modal Buat Revisi - catatan info */
.pksrev-note {
    display: flex; gap: .55rem; align-items: flex-start;
    background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text);
    border-radius: var(--radius-md); padding: var(--sp-3); margin-bottom: var(--sp-4);
    font-size: var(--text-sm); line-height: 1.5;
}
.pksrev-note > i { flex-shrink: 0; margin-top: .1rem; font-size: 1.05rem; }

/* Modal Riwayat Revisi - daftar versi arsip */
.pksrevh-skel { height: 4rem; border-radius: var(--radius-md); background: var(--surface-sunken); }
.pksrevh-empty { text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--text-muted); }
.pksrevh-empty i { font-size: 1.8rem; color: var(--text-faint); display: block; margin-bottom: var(--sp-2); }
.pksrevh-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3);
    margin-bottom: var(--sp-2); background: var(--surface); }
.pksrevh-item:last-child { margin-bottom: 0; }
.pksrevh-item__top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pksrevh-badge { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs);
    background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-ring);
    border-radius: var(--radius-full); padding: .08rem .5rem; }
.pksrevh-nomor { font-weight: 600; color: var(--text); }
.pksrevh-status { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full); padding: .08rem .45rem; }
.pksrevh-keg { font-size: var(--text-xs); color: var(--text-faint); }
.pksrevh-alasan { font-size: var(--text-sm); color: var(--text-muted); margin-top: .4rem; line-height: 1.5; }
.pksrevh-item__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    flex-wrap: wrap; margin-top: var(--sp-2); }
.pksrevh-meta { font-size: var(--text-xs); color: var(--text-faint); }
.pksrevh-nodoc { font-size: var(--text-xs); color: var(--text-faint); }

/* ══ Modal Picker Kegiatan RKT — dua panel 35:65 ═══════════════════
   Kiri: daftar ruang lingkup, selalu terlihat (tanpa gulir sendiri).
   Kanan: isi dinamis (kegiatan ruang lingkup terpilih / tambah ruang lingkup),
   satu-satunya area yang bergulir supaya konteks kiri tidak pernah hilang. */
.pkspick-modal__body { padding: 0; overflow: hidden; }
.pkspick {
    display: grid; grid-template-columns: 35% 65%;
    min-height: 24rem; max-height: min(60vh, 32rem);
}
.pkspick-skel { height: 8rem; margin: var(--sp-4); border-radius: var(--radius-md); background: var(--surface-sunken); }

/* Panel kiri */
.pkspick__side {
    display: flex; flex-direction: column; min-width: 0;
    border-right: 1px solid var(--border); background: var(--surface-sunken);
}
.pkspick__sidelbl {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-faint); padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.pkspick__rls { flex: 1; min-height: 0; padding: 0 var(--sp-2) var(--sp-2); }
.pkspick-rl {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%;
    padding: .5rem .6rem; margin-bottom: 2px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font-family: var(--font); font-size: var(--text-sm);
    text-align: left; cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.pkspick-rl:hover { background: var(--surface); }
.pkspick-rl:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.pkspick-rl.is-active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.pkspick-rl.is-faded { opacity: .45; }
.pkspick-rl__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pkspick-rl__n {
    flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-xs);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: .05rem .45rem; color: var(--text-muted);
}
.pkspick-rl.is-active .pkspick-rl__n { border-color: var(--accent-ring); color: var(--accent); }
.pkspick__sidefoot { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--border); }
.pkspick__rladd { width: 100%; justify-content: center; }
.pkspick__rladd.is-active { border-color: var(--accent); color: var(--accent); }

/* Panel kanan */
.pkspick__main { display: flex; flex-direction: column; min-width: 0; }
.pkspick__mainhd {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
}
.pkspick__mainttl { min-width: 0; font-weight: 600; font-size: var(--text-sm); }
.pkspick__mainsub { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.pkspick__mainact { display: flex; align-items: center; gap: var(--sp-2); }
.pkspick-search { flex: 1; min-width: 0; padding: .3rem .55rem; font-size: var(--text-sm); }
.pkspick__list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.pkspick__mainfoot {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px solid var(--border);
}

/* Baris kegiatan */
.pkspick-item {
    display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem; border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text);
}
.pkspick-item__pick { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; cursor: pointer; }
.pkspick-item:hover { background: var(--surface-sunken); }
/* Hapus dari katalog: muncul saat baris disentuh/ada fokus, agar tidak berisik. */
.pkspick-item__del {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
    color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.pkspick-item:hover .pkspick-item__del,
.pkspick-item__del:focus-visible { opacity: 1; }
.pkspick-item__del:hover { background: var(--danger-bg); color: var(--danger-text); }
.pkspick-danger { color: var(--danger-text); }
.pkspick-danger:hover { background: var(--danger-bg); }
.pkspick-item input { flex-shrink: 0; accent-color: var(--accent); }
.pkspick-item__kode { flex-shrink: 0; font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); }
.pkspick-item__nm { flex: 1; min-width: 0; }
.pkspick-item__sat { flex-shrink: 0; font-size: var(--text-xs); color: var(--text-faint); }
.pkspick-item__tag {
    flex-shrink: 0; font-size: var(--text-xs); color: var(--text-muted);
    background: var(--surface-sunken); border: 1px solid var(--border);
    border-radius: var(--radius-full); padding: .05rem .45rem;
}
.pkspick-item.is-disabled { cursor: default; color: var(--text-muted); }
.pkspick-item.is-disabled:hover { background: transparent; }

/* Formulir tambah kegiatan + status kosong */
.pkspick-kegform {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    margin: var(--sp-3) var(--sp-3) 0; padding: var(--sp-2);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.pkspick-kegform[hidden] { display: none; }
.pkspick-kegform .field__input { flex: 1; min-width: 6rem; padding: .3rem .5rem; font-size: var(--text-xs); }
.pkspick-empty { text-align: center; padding: var(--sp-5); color: var(--text-muted); font-size: var(--text-sm); }
.pkspick-empty i { font-size: 1.8rem; color: var(--text-faint); display: block; margin-bottom: var(--sp-2); }
.pkspick-loading { font-size: var(--text-xs); color: var(--text-faint); padding: .35rem 0; }
.pkspick-none { font-size: var(--text-sm); color: var(--text-muted); margin: 0; padding: var(--sp-3); }

/* Pilihan Master Komitmen (mode tambah ruang lingkup) */
.pkspick-komit {
    display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    margin-bottom: var(--sp-2); cursor: pointer; transition: border-color var(--t-fast);
}
.pkspick-komit:hover { border-color: var(--border-strong); }
.pkspick-komit input { accent-color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pkspick-komit__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pkspick-komit__nama { font-weight: 600; font-size: var(--text-sm); }
/* Di luar naskah PKS: tetap bisa dipilih, hanya ditandai ikon peringatan */
.pkspick-komit { align-items: center; }
.pkspick-komit__lock { margin-left: auto; flex-shrink: 0; color: var(--warning-text); font-size: 1rem; }

/* Kepala kelompok pada pemilih ruang lingkup (RPP, RKL, kegiatan RKT):
   "Ruang lingkup naskah PKS" dan "Di luar ruang lingkup PKS" (tetap bisa dipilih). */
.rlpick-grup {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-2); font-size: var(--text-xs); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.rlpick-grup:first-child { margin-top: 0; }
.rlpick-grup__jumlah { font-weight: 600; letter-spacing: 0; text-transform: none; }
.rlpick-grup__hint {
    flex-basis: 100%; font-size: var(--text-xs); font-weight: 400;
    letter-spacing: 0; text-transform: none;
}
.rlpick-grup--luar { padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.rlpick-grup--luar:first-child { padding-top: 0; border-top: 0; }
.rlpick-grup--luar .rlpick-grup__label { color: var(--warning-text); }

/* Ringkasan pilihan di kaki jendela */
.pkspick-sum { font-size: var(--text-sm); color: var(--text-muted); }
.pkspick-foot__act { display: flex; align-items: center; gap: var(--sp-2); }

/* Layar sempit: panel kiri jadi baris chip mendatar di atas isi */
@media (max-width: 48rem) {
    .pkspick { grid-template-columns: 1fr; max-height: min(72vh, 40rem); }
    .pkspick__side { border-right: 0; border-bottom: 1px solid var(--border); }
    .pkspick__sidelbl { padding-bottom: 0; }
    .pkspick__rls { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-3); }
    .pkspick-rl { width: auto; flex-shrink: 0; margin-bottom: 0; border: 1px solid var(--border); background: var(--surface); }
    .pkspick-rl__nm { max-width: 10rem; white-space: nowrap; }
    .pkspick__sidefoot { border-top: 0; padding-top: 0; }
    .pkspick__rladd { width: auto; }
}

/* Modal Panduan RKT & Kegiatan (onboarding) */
.pkspan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pkspan-steps > li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pkspan-steps__n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent);
    font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); }
.pkspan-steps > li strong { display: block; color: var(--text); font-size: var(--text-sm); }
.pkspan-steps > li p { margin: .2rem 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.pkspan-steps em { font-style: normal; font-weight: 600; color: var(--text); }
.pkspan-note { display: flex; gap: .55rem; align-items: flex-start; margin-top: var(--sp-4);
    background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text);
    border-radius: var(--radius-md); padding: var(--sp-3); font-size: var(--text-sm); line-height: 1.5; }
.pkspan-note > i { flex-shrink: 0; margin-top: .1rem; color: var(--warning-text); font-size: 1.05rem; }
.pkspan-note em { font-style: normal; font-weight: 600; }

/* Field terkunci (PKS dari permohonan) - read-only, tak bisa diinteraksi */
.pksm-lockable.is-locked { opacity: 0.72; pointer-events: none; }
.pksm-lockable.is-locked .field__hint { opacity: 0.85; }

/* Field yang tetap ditampilkan tapi tak berlaku untuk konteks saat ini, mis.
   Kategori Kerja Sama pada PKS Penguatan Fungsi. Sengaja tidak disembunyikan:
   form yang lenyap terbaca sebagai fitur yang hilang. Kontrolnya tetap fokusabel
   lewat keyboard (disabled diurus elemennya sendiri), hanya diredupkan. */
.field.is-locked .field__label,
.field.is-locked .field__hint { opacity: 0.75; }

/* Layar kecil: rail jadi strip tab horizontal yang bisa di-swipe (1 baris),
   pinned di puncak; panel form scroll vertikal di bawahnya. Memberi ruang
   form maksimal - pola mobile yang familiar. */
@media (max-width: 640px) {
    .pksm-split { flex-direction: column; }
    .pksm-railnav {
        flex: 0 0 auto; max-width: none; min-width: 0;
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
        border-right: none; border-bottom: 1px solid var(--border);
        padding: var(--sp-2) var(--sp-3); gap: var(--sp-1);
        position: sticky; top: 0; z-index: 2; background: var(--surface-raised);
    }
    .pksm-railnav::-webkit-scrollbar { display: none; }
    .pksm-railnav__item { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .pksm-railnav__num { display: none; }
    .pksm-pane { padding: var(--sp-4); }
    #pksedit-modal #pksedit-alert { padding: var(--sp-3) var(--sp-4); }
    #ipks-modal #ipks-alert { padding: var(--sp-3) var(--sp-4); }
}

/* ── Modal "Input Data PKS" (komponen reusable permohonan/_input_pks_modal) ──
   Alert error sticky di puncak panel kanan (sejajar pola modal Edit PKS). */
#ipks-modal #ipks-alert {
    position: sticky; top: 0; z-index: 3;
    margin: 0; border-radius: 0; border-width: 0 0 1px;
    padding: var(--sp-3) var(--sp-6);
}
#ipks-modal #ipks-alert[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════
   Komitmen pembiayaan + snapshot kurs (komponen reusable PembiayaanKurs).
   Dipakai di wizard Tambah PKS & modal Edit PKS.
   ════════════════════════════════════════════════════════════════════ */
.pk-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.pk-row { display: grid; grid-template-columns: 20rem 1fr; gap: var(--sp-3) var(--sp-4); align-items: start; }
@media (max-width: 540px) { .pk-row { grid-template-columns: 1fr; } }

.pk-rupiah {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
    background: var(--success-bg); border: 1px solid var(--success-border);
}
.pk-rupiah__k {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--text-xs); font-weight: 600; color: var(--success-text);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.pk-rupiah__v {
    font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700;
    color: var(--success-text);
}

.pk-kurs {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--radius-md);
    background: var(--surface-sunken); border: 1px solid var(--border);
}
.pk-kurs[hidden] { display: none; }
.pk-kurs__head {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--text-sm); font-weight: 700; color: var(--text);
}
.pk-kurs__head i { color: var(--accent); }
.pk-kurs-input { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); }
.pk-kurs-input .field__input { flex: 1 1 8rem; min-width: 7rem; }
.pk-fetch-src { flex: 0 0 auto; max-width: 13rem; }
.pk-fetch-btn { flex: 0 0 auto; white-space: nowrap; }

.pk-stale {
    display: flex; align-items: center; gap: 0.4rem; margin: 0;
    font-size: var(--text-xs); color: var(--warning-text);
}
.pk-stale[hidden] { display: none; }

.pk-disclaimer {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
    background: var(--warning-bg); border: 1px solid var(--warning-border);
    font-size: var(--text-xs); line-height: 1.5; color: var(--warning-text);
}
.pk-disclaimer i { font-size: 0.95rem; margin-top: 0.1em; flex-shrink: 0; }
.pk-disclaimer a { color: var(--warning-text); font-weight: 600; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   Dropzone (unggah berkas drag & drop) + widget info ringkas (NK modal).
   ════════════════════════════════════════════════════════════════════ */
.dropzone {
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface-sunken); padding: var(--sp-5) var(--sp-4);
    text-align: center; cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-light); outline: none; }
.dropzone.is-dragover { border-color: var(--accent); background: var(--accent-light); }
.dropzone__idle { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
/* `display:flex` mengalahkan `display:none` bawaan atribut [hidden], sehingga
   kedua state dropzone tampil bertumpuk (ikon berkas hantu di dropzone kosong).
   Kembalikan kuasa [hidden] secara eksplisit. */
.dropzone__idle[hidden], .dropzone__file[hidden] { display: none !important; }
.dropzone__icon { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent); font-size: 1.4rem; }
.dropzone__text { font-size: var(--text-sm); color: var(--text); }
.dropzone__browse { color: var(--accent); font-weight: 600; text-decoration: underline; }
.dropzone__hint { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); }
.dropzone__file { display: flex; align-items: center; gap: var(--sp-3); text-align: left; }
.dropzone__file-ico { width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: var(--danger-bg); color: var(--danger-text); font-size: 1.2rem; }
.dropzone__file-info { flex: 1; min-width: 0; }
.dropzone__file-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropzone__file-size { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.dropzone__remove { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dropzone__remove:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

/* Widget info permohonan ringkas (di atas form modal NK) */
.nk-info { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); padding: var(--sp-3) var(--sp-4); }
.nk-info__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: .4rem; }
.nk-info__nomor { font-family: var(--font-mono); font-size: .76rem; color: var(--text-muted); }
.nk-info__judul { font-family: var(--font); font-size: var(--text-md); color: var(--text); margin: 0 0 .35rem; line-height: 1.3; }
.nk-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem var(--sp-4); }
@media (max-width: 480px) { .nk-info__grid { grid-template-columns: 1fr; } }
.nk-info__item { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-muted); }
.nk-info__item .ti { color: var(--text-faint); font-size: .95rem; }
.nk-info__item strong { color: var(--text); font-weight: 600; }

/* ── Modal "Ubah Informasi Penilaian" ─────────────────────────────────
   Dibangun runtime oleh static/js/penilaian/penilaian_aksi.js dan disisipkan
   ke <body>, dipakai halaman daftar maupun halaman hasil. Karena itu gayanya
   tinggal di berkas bersama, bukan di block extra_css_head satu halaman. */
.pen-ident-grid { display: grid; grid-template-columns: 1.4fr .7fr 1fr; gap: var(--sp-4); }
/* Penanggung jawab: pihak UPT dan mitra ditumpuk agar Nama + Jabatan dapat lebar penuh. */
.pen-ident-grid2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }
.pen-ident-fs { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--sp-3); margin: 0; }
.pen-ident-fs legend { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); padding: 0 var(--sp-2); }
/* Editor penanggung jawab (maks. 3 orang tiap pihak), dipakai modal Buat
   dan modal Ubah. Tombol hapus memakai .pen-tim-del yang sudah ada. */
.pen-pj-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pen-pj-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; }
.pen-pj-title { margin-top: var(--sp-4); }
.pen-pj-title__hint { font-weight: 400; color: var(--text-muted); }
@media (max-width: 640px) {
    .pen-ident-grid { grid-template-columns: 1fr; }
    .pen-pj-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pen-pj-row .pen-pj-jabatan { grid-column: 1; grid-row: 2; }
    /* Jarak antarorang lebih lebar dari jarak Nama-Jabatan agar pasangannya terbaca. */
    .pen-pj-list { gap: var(--sp-4); }
}

/* ── Jendela riwayat penilaian satu PKS ───────────────────────────────
   Identitas PKS ditulis sekali di kepala jendela (sama untuk semua baris),
   tabelnya menyisakan yang berbeda antar putaran. Tiap sel dibatasi tiga baris
   supaya jendela tak perlu digulir mendatar maupun memanjang tak terkendali. */
.pen-riwayat-head {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle);
}
.pen-riwayat-head dt {
    font-size: var(--text-xs); font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.pen-riwayat-head dd {
    margin: 0; color: var(--text); font-size: var(--text-sm); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 640px) { .pen-riwayat-head { grid-template-columns: 1fr; } }
.pen-riwayat-tbl { width: 100%; table-layout: fixed; }
.pen-riwayat-tbl td, .pen-riwayat-tbl th { vertical-align: middle; }
.pen-riwayat-tbl td {
    display: table-cell; overflow: hidden; text-overflow: ellipsis;
}
.pen-riwayat-tbl td > *:not(.pen-nilai-cell):not(.badge):not(.btn) {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kolom Nilai: angka di atas, band kategori sebagai sub-teks berwarna. */
.pen-nilai-cell { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pen-nilai-cell .pen-nilai { font-weight: 700; font-variant-numeric: tabular-nums; }
.pen-nilai__kat { font-size: var(--text-xs); font-weight: 600; }

/* ── Repeater tim penilai ─────────────────────────────────────────────
   Satu baris per anggota. Dipakai form buat penilaian (list.html) DAN modal
   "Ubah Informasi Penilaian" yang dibangun runtime, jadi gayanya bersama. */
.pen-tim-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pen-tim-list:empty { display: none; }
.pen-tim-row { display: flex; gap: var(--sp-2); align-items: center; }
.pen-tim-row .field__input { flex: 1; }
.pen-tim-add { align-self: flex-start; }
.pen-tim-del {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 34px; height: 34px; padding: 0;
    border: 0; background: transparent; color: var(--text-muted);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.pen-tim-del:hover { color: var(--danger-text); background: var(--danger-bg); }
.pen-tim-del:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
@media (max-width: 640px) { .pen-tim-del { width: 44px; height: 44px; } }

/* Centang lebar (satu baris penuh) di dalam grid pemilih kolom ekspor:
   dipakai opsi "Detail penilaian per indikator" yang mewakili 19 kolom. */
.pen-exp-check--wide { grid-column: 1 / -1; }
.pen-exp-check--wide em { font-style: normal; color: var(--text-muted); }