/* ==========================================================================
   Aurora — Pustaka komponen.
   Ditulis sekali di Sprint 1, dipakai seluruh halaman di sprint berikutnya.
   Lihat docs/UI_V2_DESIGN.md §5.3
   ========================================================================== */

/* --------------------------------------------------- Kartu --------------- */
.a-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--gutter);
}
.a-card--accent-top { border-top: 3px solid var(--accent); }
.a-card--ok-top     { border-top: 3px solid var(--ok); }
.a-card--warn-top   { border-top: 3px solid var(--warn); }
.a-card--danger-top { border-top: 3px solid var(--danger); }

.a-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--pad-card);
    border-bottom: 1px solid var(--border);
}
.a-card__head--plain { border-bottom: 0; padding-bottom: 0; }
.a-card__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.a-card__icon .ico { width: 19px; height: 19px; }
/* Alias eksplisit: sama dengan .a-card__icon polos. Ada supaya template
   yang memilih warna lewat variabel ({$warna}) tetap menulis nama kelas
   yang benar-benar terdefinisi, bukan kelas hantu yang kebetulan jatuh
   ke gaya bawaan. */
.a-card__icon--accent   { background: var(--accent-soft);   color: var(--accent-text); }
.a-card__icon--ok       { background: var(--ok-soft);       color: var(--ok-text); }
.a-card__icon--warn     { background: var(--warn-soft);     color: var(--warn-text); }
.a-card__icon--danger   { background: var(--danger-soft);   color: var(--danger-text); }
.a-card__icon--identity { background: var(--identity-soft); color: var(--identity-text); }
.a-card__icon--info     { background: var(--info-soft);     color: var(--info-text); }

.a-card__titles { flex: 1 1 0%; min-width: 0; }
/* Dasar 0, bukan auto. Dengan auto, lebar dasar judul = panjang teksnya;
   di layar sempit (kepala kartu flex-wrap) subjudul yang panjang membuat
   judul dilempar ke baris di bawah ikon alih-alih membungkus di sampingnya. */
.a-card__title { font-size: 13.5px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.a-card__sub   { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.a-card__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.a-card__body  { padding: var(--pad-card); }
.a-card__foot  {
    padding: 10px var(--pad-card);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* --------------------------------------------- Stat tile / KPI ----------- */
.a-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}
.a-kpi > * { border-right: 1px solid var(--border); }
.a-kpi > *:last-child { border-right: 0; }
/* Tiga tile. Pengganti grid-template-columns SEBARIS yang dulu dipakai di
   beberapa halaman: gaya sebaris mengalahkan media query di bawah, jadi di
   ponsel tile-nya tetap tiga kolom sempit dan angkanya menimpa labelnya
   (dilaporkan di Rekap Komisi, 12 Okt 2026). Kelas ini didefinisikan
   SEBELUM media query, jadi aturan 2 kolom / 1 kolom tetap berlaku. */
.a-kpi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Jumlah tile berubah-ubah (mis. satu tile per kategori Kas Keuangan). */
.a-kpi--auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Tile statistik: ikon di KIRI, label + angka di kanannya.
   Sebelumnya bertingkat tiga (ikon, label, angka) sehingga tiap tile tinggi
   dan ikonnya menghabiskan satu baris penuh hanya untuk jadi penanda warna.
   Tata letaknya diatur grid-area, jadi markup widget tidak perlu berubah. */
.a-stat {
    padding: var(--pad-card);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    column-gap: 11px;
    align-content: center;
}
.a-stat__icon {
    grid-area: icon;
    align-self: center;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-text);
    margin-bottom: 0;
}
.a-stat__icon .ico { width: 17px; height: 17px; }
.a-stat__label {
    grid-area: label;
    align-self: end;
    font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 2px;
}
.a-stat__value {
    grid-area: value;
    align-self: start;
    font-size: 19px; font-weight: 700; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.a-stat__value .cur { font-size: 13px; font-weight: 550; color: var(--text-muted); margin-right: 3px; }
.a-stat__value .ok  { color: var(--ok-text); }
.a-stat__value .bad { color: var(--danger-text); }
.a-stat__value .sep { color: var(--text-faint); font-weight: 400; margin: 0 4px; }

@media (max-width: 767px) {
    .a-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a-kpi > *:nth-child(2n) { border-right: 0; }
    .a-kpi > *:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* Di HP sempit tile 2 kolom memaksa label membungkus dan angka mengecil.
   Lebih terbaca sebagai BARIS: ikon + label di kiri, angka rata kanan —
   sekali pindai semua nilainya terbaca. */
@media (max-width: 479px) {
    .a-kpi { grid-template-columns: minmax(0, 1fr); }
    .a-kpi > * { border-right: 0; border-bottom: 1px solid var(--border); }
    .a-kpi > *:last-child { border-bottom: 0; }

    .a-stat {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon label value";
        align-items: center;
        column-gap: 10px;
        padding: 11px var(--pad-card);
    }
    .a-stat__icon { width: 32px; height: 32px; }
    .a-stat__icon .ico { width: 16px; height: 16px; }
    .a-stat__label { align-self: center; margin-bottom: 0; }
    .a-stat__value { align-self: center; text-align: right; font-size: 17px; }
}

/* Delta naik/turun */
.a-delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; font-weight: 650;
    padding: 2px 8px; border-radius: var(--radius-pill);
}
.a-delta--up   { background: var(--ok-soft);     color: var(--ok-text); }
.a-delta--down { background: var(--danger-soft); color: var(--danger-text); }
.a-delta--flat { background: var(--surface-3);   color: var(--text-muted); }
.a-delta .ico { width: 13px; height: 13px; }

/* ----------------------------------------------------- Badge ------------- */
.a-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 650; letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    white-space: nowrap;
}
.a-badge--ok       { background: var(--ok-soft);       color: var(--ok-text); }
.a-badge--warn     { background: var(--warn-soft);     color: var(--warn-text); }
.a-badge--danger   { background: var(--danger-soft);   color: var(--danger-text); }
.a-badge--accent   { background: var(--accent-soft);   color: var(--accent-text); }
.a-badge--identity { background: var(--identity-soft); color: var(--identity-text); }
.a-badge--info     { background: var(--info-soft);     color: var(--info-text); }
.a-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------- Tombol ------------- */
.a-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: var(--control-h); padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-fg);
    font-family: var(--font);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.a-btn:hover  { background: var(--accent-hover); color: var(--btn-accent-fg); }
.a-btn:disabled, .a-btn.is-disabled { opacity: .55; pointer-events: none; }
.a-btn .ico { width: 16px; height: 16px; }

.a-btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.a-btn--ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

.a-btn--quiet { background: transparent; color: var(--text-muted); }
.a-btn--quiet:hover { background: var(--surface-3); color: var(--text); }

.a-btn--danger { background: var(--btn-danger-bg); color: var(--btn-danger-fg); }
.a-btn--danger:hover { background: color-mix(in srgb, var(--btn-danger-bg) 85%, #000); color: var(--btn-danger-fg); }

.a-btn--ok { background: var(--btn-ok-bg); color: var(--btn-ok-fg); }
.a-btn--ok:hover { background: color-mix(in srgb, var(--btn-ok-bg) 85%, #000); color: var(--btn-ok-fg); }

.a-btn--warn { background: var(--btn-warn-bg); color: var(--btn-warn-fg); }
.a-btn--warn:hover { background: color-mix(in srgb, var(--btn-warn-bg) 85%, #000); color: var(--btn-warn-fg); }

.a-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.a-btn--block { width: 100%; }

.a-btngroup { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tab segmented (referensi: Revenue | Cash In) */
.a-segment {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 3px;
}
.a-segment button {
    border: 0; background: transparent;
    padding: 6px 14px;
    border-radius: var(--radius-xs);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--transition), color var(--transition);
}
.a-segment button[aria-selected="true"] {
    background: var(--surface);
    color: var(--accent-text);
    box-shadow: var(--shadow-sm);
}
.a-segment .ico { width: 15px; height: 15px; }

/* --------------------------------------------------- Field -------------- */
.a-field { margin-bottom: 14px; }
.a-label {
    display: block;
    font-size: 11px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 5px;
}
.a-input, .a-select, .a-textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.a-input::placeholder, .a-textarea::placeholder { color: var(--text-faint); }
.a-input:focus, .a-select:focus, .a-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
.a-textarea { min-height: 96px; resize: vertical; }
.a-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.a-error { font-size: 12px; color: var(--danger-text); margin-top: 4px; }

.a-search-input {
    position: relative;
    display: flex; align-items: center;
}
.a-search-input .ico {
    position: absolute; left: 12px;
    width: 16px; height: 16px;
    color: var(--text-faint); pointer-events: none;
}
.a-search-input .a-input { padding-left: 36px; }

/* ---------------------------------------------- Tabel data --------------- */
.a-table-wrap { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.a-table th {
    text-align: left;
    font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface-2);
}
.a-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table tbody tr:hover { background: var(--surface-2); }
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* nowrap: nominal tidak boleh terbelah jadi "Rp" di satu baris dan angkanya
   di baris berikut. Tabel yang terlalu lebar menggulir di dalam .a-table-wrap. */

/* Di layar sempit, tabel jadi daftar kartu — bukan scroll horizontal.
   Pakai <td data-label="Nama Kolom"> agar labelnya muncul. */
@media (max-width: 719px) {
    .a-table--cards thead { display: none; }
    .a-table--cards, .a-table--cards tbody, .a-table--cards tr, .a-table--cards td { display: block; width: 100%; }
    .a-table--cards tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        padding: 4px 0;
        background: var(--surface);
    }
    /* BLOK dengan label mengambang di kiri, BUKAN flex. Dengan flex, setiap
       anak sel — termasuk potongan teks — menjadi kolom tersendiri, jadi sel
       berisi beberapa bagian (nama wilayah, tanda pisah, nama ketua, lencana,
       alamat) terpecah jadi kolom-kolom sempit yang saling menimpa
       (dilaporkan di Rekap Komisi, 12 Okt 2026). Sebagai blok, isinya mengalir
       wajar rata kanan di samping labelnya, dan baris kecil seperti .a-hint
       turun ke bawahnya. */
    .a-table--cards td {
        display: block;
        border-bottom: 0;
        padding: 7px 13px;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .a-table--cards td::after { content: ""; display: block; clear: both; }
    .a-table--cards td::before {
        content: attr(data-label);
        float: left;
        margin-right: 14px;
        max-width: 45%;
        font-size: 11px; font-weight: 650; letter-spacing: .05em;
        text-transform: uppercase; color: var(--text-muted);
        text-align: left; line-height: 1.9;
    }
    /* Sel tanpa label (kotak centang, baris kosong) tidak menyisakan celah. */
    .a-table--cards td:not([data-label])::before,
    .a-table--cards td[data-label=""]::before { display: none; }
    .a-table--cards td .a-btngroup { justify-content: flex-end; }
    /* Sel yang benar-benar kosong (mis. kotak centang pada baris yang sudah
       lunas) tidak dirender sebagai baris berlabel tanpa isi. */
    .a-table--cards td:empty { display: none; }
}

/* Tabel ANGKA (ringkasan saldo, rekap): di ponsel tetap tabel yang digeser
   ke samping, kolom pertama menempel di kiri. Versi kartu membuat tabel tiga
   baris jadi setinggi satu layar penuh, dan angka antarbaris tidak bisa
   dibandingkan sekilas (keluhan pemilik sistem, 12 Okt 2026). */
.a-table--sticky1 th:first-child,
.a-table--sticky1 td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
}
.a-table--sticky1 th:first-child { background: var(--surface-2); }
.a-table--sticky1 tbody tr:hover td:first-child { background: var(--surface-2); }
@media (max-width: 719px) {
    .a-table--sticky1 td:first-child { min-width: 110px; max-width: 150px; }
    .a-table--sticky1 td:first-child .a-badge { white-space: normal; }
    .a-table--sticky1 th, .a-table--sticky1 td { padding-left: 10px; padding-right: 10px; }
}

/* Tabel BARIS PANJANG (buku transaksi): di ponsel tiap baris jadi item
   ringkas 2-3 baris, bukan kartu delapan baris berlabel.
     .r-judul  baris atas kiri (keterangan)
     .r-nilai  baris atas kanan (nominal)
     .r-meta   baris kedua, kecil, dipisah titik tengah
     .r-aksi   baris ketiga, tombol
     .r-desktop hanya tampil di desktop (mis. lencana Masuk/Keluar, yang di
                ponsel sudah terwakili warna dan tanda nominal)
   Baris diberi .r-masuk / .r-keluar untuk warna dan tanda +/-. */
@media (max-width: 719px) {
    .a-table--ringkas thead { display: none; }
    .a-table--ringkas, .a-table--ringkas tbody { display: block; width: 100%; }
    .a-table--ringkas tr {
        display: flex; flex-wrap: wrap; align-items: baseline;
        column-gap: 6px; row-gap: 3px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--border);
    }
    .a-table--ringkas tbody tr:last-child { border-bottom: 0; }
    .a-table--ringkas td { display: block; padding: 0; border: 0; }
    .a-table--ringkas .r-desktop { display: none; }
    /* Lebar judul + jarak + nilai = 100%, jadi meta selalu turun ke baris 2. */
    .a-table--ringkas .r-judul { order: 1; flex: 1 1 calc(100% - 134px); min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
    .a-table--ringkas .r-nilai { order: 2; flex: 0 0 128px; text-align: right; font-weight: 700; }
    .a-table--ringkas .r-meta { order: 3; font-size: 12px; color: var(--text-muted); }
    .a-table--ringkas .r-meta ~ .r-meta::before { content: "\00b7"; margin-right: 6px; }
    .a-table--ringkas .r-aksi { order: 4; flex: 0 0 100%; margin-top: 7px; }
    .a-table--ringkas .r-aksi .a-btngroup { gap: 6px; }
    .a-table--ringkas tr.r-masuk .r-nilai { color: var(--ok-text); }
    .a-table--ringkas tr.r-masuk .r-nilai::before { content: "+ "; }
    .a-table--ringkas tr.r-keluar .r-nilai { color: var(--danger-text); }
    .a-table--ringkas tr.r-keluar .r-nilai::before { content: "\2212  "; }
}
/* Daftar panjang dibatasi tingginya dan digulir di dalam kartu, dengan
   kepala tabel menempel. */
.a-table-wrap--tinggi { max-height: 75vh; overflow: auto; }
.a-table-wrap--tinggi thead th { position: sticky; top: 0; z-index: 2; }
@media (max-width: 719px) { .a-table-wrap--tinggi { max-height: 70vh; } }

/* ---------------------------------------------- Daftar baris ------------- */
.a-list { list-style: none; margin: 0; padding: 0; }
.a-list > li {
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--pad-card);
    border-bottom: 1px solid var(--border);
}
.a-list > li:last-child { border-bottom: 0; }
.a-list__avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700; font-size: 14px;
}
.a-list__main { flex: 1 1 auto; min-width: 0; }
.a-list__title { font-weight: 600; font-size: 13px; }
.a-list__meta {
    font-size: 12px; color: var(--text-muted);
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.a-list__meta .ico { width: 13px; height: 13px; }
.a-list__meta .dot { color: var(--text-faint); }
.a-list__end { flex: 0 0 auto; text-align: right; }
.a-list > li.is-danger { border-left: 3px solid var(--danger); }
.a-list > li.is-warn   { border-left: 3px solid var(--warn); }

/* ------------------------------------------------ Empty state ------------ */
.a-empty { padding: 44px 20px; text-align: center; }
.a-empty__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    margin: 0 auto 14px;
    border-radius: var(--radius);
    background: var(--ok-soft); color: var(--ok-text);
}
.a-empty__icon .ico { width: 26px; height: 26px; }
.a-empty__icon--neutral { background: var(--surface-3); color: var(--text-muted); }
.a-empty__title { font-size: 15.5px; font-weight: 650; margin-bottom: 3px; }
.a-empty__text  { font-size: 13px; color: var(--text-muted); }

/* -------------------------------------------------- Timeline ------------- */
.a-timeline { list-style: none; margin: 0; padding: 4px 0; }
.a-timeline > li { position: relative; padding: 0 16px 20px 46px; }
.a-timeline > li::before {
    content: ""; position: absolute;
    left: 29px; top: 22px; bottom: 0;
    width: 1px; background: var(--border);
}
.a-timeline > li:last-child { padding-bottom: 6px; }
.a-timeline > li:last-child::before { display: none; }
.a-timeline__dot {
    position: absolute; left: 16px; top: 1px;
    width: 27px; height: 27px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-3);
    color: var(--text-faint);
    border: 2px solid var(--surface);
}
.a-timeline__dot .ico { width: 13px; height: 13px; }
.a-timeline__dot--ok { background: var(--ok-soft); color: var(--ok-text); }
.a-timeline__text { font-size: 13px; line-height: 1.45; }
.a-timeline__time {
    font-size: 11.5px; color: var(--text-faint);
    display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.a-timeline__time .ico { width: 12px; height: 12px; }

/* ------------------------------------------------ Progress --------------- */
.a-meter {
    height: 7px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
    display: flex;
}
.a-meter span { display: block; height: 100%; background: var(--accent); }
.a-meter span.is-ok     { background: var(--ok); }
.a-meter span.is-warn   { background: var(--warn); }
.a-meter span.is-danger { background: var(--danger); }

/* --------------------------------------------------- Toast --------------- */
.a-toasts {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 90;
    display: flex; flex-direction: column; gap: 9px;
    max-width: min(380px, calc(100vw - 28px));
}
.a-toast {
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 12px 13px;
    animation: a-toast-in 220ms cubic-bezier(.2, .9, .3, 1.2);
}
.a-toast.is-leaving { animation: a-toast-out 160ms ease forwards; }
.a-toast--success { border-left-color: var(--ok); }
.a-toast--error   { border-left-color: var(--danger); }
.a-toast--warning { border-left-color: var(--warn); }
.a-toast--info    { border-left-color: var(--info); }
.a-toast__icon { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--accent); }
.a-toast--success .a-toast__icon { color: var(--ok); }
.a-toast--error   .a-toast__icon { color: var(--danger); }
.a-toast--warning .a-toast__icon { color: var(--warn); }
.a-toast--info    .a-toast__icon { color: var(--info); }
.a-toast__body { flex: 1 1 auto; min-width: 0; }
.a-toast__title { font-size: 13.5px; font-weight: 640; line-height: 1.35; overflow-wrap: anywhere; }
.a-toast__text  { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.a-toast__close {
    flex: 0 0 auto;
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-faint); padding: 0; line-height: 1;
    font-size: 17px;
}
.a-toast__close:hover { color: var(--text); }
.a-toast__bar { height: 2px; background: currentColor; opacity: .3; margin-top: 9px; border-radius: 2px; }

@keyframes a-toast-in  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes a-toast-out { to   { opacity: 0; transform: translateX(22px); } }

/* Dialog konfirmasi (pengganti Swal modal) */
.a-dialog-scrim {
    position: fixed; inset: 0;
    background: rgb(15 23 42 / .55);
    z-index: 95;
    display: grid; place-items: center;
    padding: 20px;
}
.a-dialog {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-width: 420px; width: 100%;
    padding: 22px;
    text-align: center;
    animation: a-dialog-in 180ms cubic-bezier(.2, .9, .3, 1.15);
}
.a-dialog__icon {
    width: 50px; height: 50px; margin: 0 auto 14px;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-text);
}
.a-dialog__icon .ico { width: 26px; height: 26px; }
.a-dialog__title { font-size: 17px; font-weight: 680; margin-bottom: 6px; }
.a-dialog__text { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; }
.a-dialog__actions { display: flex; gap: 9px; justify-content: center; }
@keyframes a-dialog-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ------------------------------------------ Command palette -------------- */
.a-palette-scrim {
    position: fixed; inset: 0;
    background: rgb(15 23 42 / .5);
    backdrop-filter: blur(2px);
    z-index: 85;
    display: flex; justify-content: center;
    padding: 12vh 16px 16px;
}
.a-palette {
    width: 100%; max-width: 580px;
    max-height: 62vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: a-dialog-in 160ms cubic-bezier(.2, .9, .3, 1.15);
}
.a-palette__head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.a-palette__head .ico { width: 18px; height: 18px; color: var(--text-faint); flex: 0 0 auto; }
.a-palette__input {
    flex: 1 1 auto;
    border: 0; background: transparent; outline: none;
    font-family: var(--font); font-size: 15px; color: var(--text);
}
.a-palette__input::placeholder { color: var(--text-faint); }
.a-palette__results { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.a-palette__group {
    font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-faint);
    padding: 10px 11px 5px;
}
.a-palette__item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
}
.a-palette__item:hover, .a-palette__item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.a-palette__item .ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-muted); }
.a-palette__item.is-active .ico { color: var(--accent-text); }
.a-palette__item-main { flex: 1 1 auto; min-width: 0; }
.a-palette__item-title { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-palette__item-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-palette__foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 11.5px; color: var(--text-faint);
    display: flex; gap: 14px; flex-wrap: wrap;
    background: var(--surface-2);
}
.a-palette__foot kbd {
    font-family: var(--font); font-size: 10.5px; font-weight: 650;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: 4px; padding: 1px 5px; color: var(--text-muted);
    box-shadow: none;
}

/* ------------------------------------------------ Utilitas --------------- */
.a-grid { display: grid; gap: var(--gutter); }
.a-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 991px) {
    .a-grid--3, .a-grid--4, .a-grid--sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .a-grid--2, .a-grid--3, .a-grid--4, .a-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

.a-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-row--between { justify-content: space-between; }
.a-spacer { flex: 1 1 auto; }
.a-muted { color: var(--text-muted); }
.a-faint { color: var(--text-faint); }
.a-strong { font-weight: 650; }
.a-nowrap { white-space: nowrap; }
.a-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Penyesuaian layar sempit.
   Header kartu (.a-card__head) adalah baris flex: ikon | judul | alat.
   Di layar sempit judulnya membungkus dan bagian "alat" menimpanya —
   terlihat pada kartu sapaan, 19 Sep 2026: jam menindih teks sapaan.
   Karena itu bagian alat turun ke baris sendiri di bawah 640px.
   ========================================================================== */
@media (max-width: 639px) {
    .a-card__head { flex-wrap: wrap; }
    .a-card__tools {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        text-align: left;
        padding-top: 2px;
    }
    .a-card__tools .a-select { width: 100%; }

    /* Baris daftar SENGAJA tetap satu baris di layar sempit. Sempat dibuat
       menumpuk, tapi daftar pelanggan kedaluwarsa jadi memanjang ke bawah
       dan lebih sulit dipindai. Yang dirapatkan cukup jarak dan ukurannya. */
    .a-list > li { padding: 9px 12px; gap: 9px; }
    .a-list__avatar { width: 30px; height: 30px; font-size: 12px; }
    .a-list__meta { font-size: 11.5px; gap: 5px; }

    /* KPI: label & angka tetap terbaca walau kolom sempit */
    .a-stat { padding: 12px; }
    .a-stat__value { font-size: 17px; }
}

/* Blok jam pada kartu sapaan */
.a-greet-time { text-align: right; }
.a-greet-time .jam {
    font-size: 19px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) {
    .a-greet-time { text-align: left; }
    .a-greet-time .jam { font-size: 22px; }
}

/* ==========================================================================
   Ukuran ikon bawaan.
   SVG tanpa atribut width/height memakai ukuran bawaan browser (sering
   300x150 atau seukuran viewBox), jadi SETIAP .ico wajib punya ukuran.
   Sebelumnya ukuran hanya diberikan per-konteks dan konteks yang terlewat
   (.a-list__avatar .ico di kartu Cron & Gerbang Pembayaran) tampak kebesaran.
   Aturan ini jadi jaring pengamannya — konteks lain boleh menimpanya.
   ========================================================================== */
.ico {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.a-list__avatar .ico { width: 17px; height: 17px; }
.a-empty__icon .ico  { width: 24px; height: 24px; }
.a-dialog__icon .ico { width: 24px; height: 24px; }

/* ==========================================================================
   Halaman detail pelanggan.
   Kolom utama sengaja yang LEBAR. Sempat terbalik karena memakai `order`
   inline pada grid: profil menempati kolom 2fr dan tabel riwayat terdesak ke
   kolom 1fr, sehingga tiap barisnya membungkus dan halaman jadi sangat
   panjang. Penempatan kini eksplisit, tidak bergantung urutan DOM.
   ========================================================================== */
.cust-main { grid-column: 1; min-width: 0; }
.cust-side { grid-column: 2; min-width: 0; }

@media (max-width: 639px) {
    .cust-main, .cust-side { grid-column: auto; }
    /* Di layar sempit profil naik ke atas — itu yang paling sering dicari */
    .cust-side { order: -1; }
}

/* Riwayat bisa panjang sekali. Dibatasi tingginya dan digulir di dalam kartu,
   supaya kartu di bawahnya tetap terjangkau tanpa menggulir jauh. */
.a-table-wrap--scroll {
    max-height: 420px;
    overflow: auto;
}
.a-table-wrap--scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
@media (max-width: 719px) {
    /* Di mode kartu tidak ada header tabel yang bisa menempel; batasnya
       dilonggarkan supaya tidak ada gulir di dalam gulir. */
    .a-table-wrap--scroll { max-height: 60vh; }
}

/* -------------------------------------------------- Donat ringkasan ------
   Digambar sebagai SVG di laporan, bukan lewat pustaka grafik: bentuknya
   hanya beberapa busur dan warnanya ikut token tema. */
.a-donut { display: grid; place-items: center; min-height: 140px; }
.a-donut svg { max-width: 100%; height: auto; }
.a-donut-legend {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    justify-content: center;
    margin-top: 12px;
    font-size: 11.5px; color: var(--text-muted);
}
.a-donut-item { display: inline-flex; align-items: center; gap: 5px; }
.a-donut-item b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Chip filter ----
   Tombol kapsul yang membungkus checkbox asli. Nama field tetap tps[],
   plns[], mts[], rts[] sehingga controller tidak berubah — dan filternya
   tetap berfungsi walau JavaScript mati. */
.a-chipset { display: flex; flex-wrap: wrap; gap: 7px; }
.a-chip { display: inline-block; cursor: pointer; position: relative; }
.a-chip input {
    position: absolute; opacity: 0;
    width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.a-chip__body {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12.5px; font-weight: 550;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.a-chip:hover .a-chip__body { border-color: var(--border-strong); color: var(--text); }
.a-chip input:checked + .a-chip__body {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
}
.a-chip input:focus-visible + .a-chip__body { box-shadow: var(--ring); }
.a-chip__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .5;
}
.a-chip input:checked + .a-chip__body .a-chip__dot { opacity: 1; }

/* Bagian filter yang bisa dilipat */
.a-facet {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 9px;
    background: var(--surface-2);
    overflow: hidden;
}
.a-facet > summary {
    list-style: none;
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px;
    cursor: pointer;
    font-size: 11px; font-weight: 650; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-muted);
}
.a-facet > summary::-webkit-details-marker { display: none; }
.a-facet > summary:hover { color: var(--text); }
.a-facet > summary .caret-ico {
    margin-left: auto; width: 15px; height: 15px;
    color: var(--text-faint);
    transition: transform var(--transition);
}
.a-facet[open] > summary .caret-ico { transform: rotate(180deg); }
.a-facet__body {
    padding: 11px 13px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* ==========================================================================
   Rentang tanggal & jam.
   Input date/time native sulit dirapikan, dan makin berantakan kalau
   dipadatkan ke empat kolom sempit di HP. Di sini tiap sisi rentang ("Dari"
   dan "Sampai") jadi SATU kotak berbingkai berisi tanggal + jam yang menyatu,
   sehingga terbaca sebagai satu nilai, bukan empat kotak lepas.
   ========================================================================== */
.a-daterange {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
}
.a-daterange__sep {
    padding-bottom: 10px;
    color: var(--text-faint);
    font-size: 13px;
}
.a-daterange__leg { min-width: 0; }
.a-daterange__box {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.a-daterange__box:focus-within {
    border-color: var(--accent);
    box-shadow: var(--ring);
}
.a-daterange__box input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 8px 10px;
    height: var(--control-h);
}
.a-daterange__box input:focus { outline: none; }
/* Input kedua di dalam kotak = bagian jam. Dicocokkan lewat `input + input`,
   bukan [type="time"], karena sebagian halaman memakai type="text" untuk jam
   (mis. plan/edit yang menyimpan jam sebagai teks bebas). */
.a-daterange__box input[type="time"],
.a-daterange__box input + input {
    flex: 0 0 auto;
    width: 108px;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
}
.a-daterange__box input[readonly] {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Ikon pemilih bawaan browser: ikut tema lewat color-scheme di :root, tapi di
   sebagian versi Chrome masih gelap. Dicerahkan khusus di mode gelap. */
:root[data-theme="dark"] .a-daterange__box input::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .a-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .a-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.6);
    cursor: pointer;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .a-daterange__box input::-webkit-calendar-picker-indicator,
    :root:not([data-theme="light"]) .a-input[type="date"]::-webkit-calendar-picker-indicator,
    :root:not([data-theme="light"]) .a-input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(.6);
        cursor: pointer;
    }
}

@media (max-width: 639px) {
    /* Di HP dua sisi rentang ditumpuk; pemisah "s/d" jadi label baris. */
    .a-daterange { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .a-daterange__sep { display: none; }
    .a-daterange__box input[type="time"] { width: 96px; }
}

/* ==========================================================================
   Lapisan kontrol: hapus tampilan bawaan browser.

   Permintaan pengguna 20 Sep 2026: jangan ada yang terlihat "native", supaya
   desainnya konsisten di seluruh halaman.

   CATATAN PENTING: yang dibuang adalah TAMPILANNYA, bukan elemennya. <select>,
   <input type="date">, dan kawan-kawan tetap elemen asli, karena di HP pemilih
   bawaan OS (roda putar tanggal, daftar pilihan layar penuh) jauh lebih enak
   dipakai daripada widget JavaScript mana pun — dan gratis aksesibilitasnya.
   Mengganti elemennya dengan div+JS akan menurunkan kualitas, bukan menaikkan.
   ========================================================================== */

/* --- Select: chevron sendiri, bukan panah bawaan --- */
.a-select,
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    cursor: pointer;
}
.a-select::-ms-expand, select.form-control::-ms-expand { display: none; }
.a-select[multiple], select.form-control[multiple] {
    background-image: none;
    padding-right: 10px;
    cursor: auto;
}
:root[data-theme="dark"] .a-select,
:root[data-theme="dark"] select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .a-select,
    :root:not([data-theme="light"]) select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}

/* --- Checkbox & radio --- */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background var(--transition), border-color var(--transition);
    vertical-align: text-bottom;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
input[type="radio"]:checked::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none; box-shadow: var(--ring);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    opacity: .5; cursor: not-allowed;
}
/* Chip filter memakai checkbox tersembunyi — jangan ikut digambar */
.a-chip input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 0; background: none; }

/* --- Input berkas --- */
input[type="file"].a-input, input[type="file"].form-control {
    padding: 6px 10px;
    cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    -webkit-appearance: none;
    appearance: none;
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-3); }

/* --- Angka: buang panah naik/turun bawaan --- */
.a-input[type="number"]::-webkit-outer-spin-button,
.a-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.a-input[type="number"] { -moz-appearance: textfield; }

/* --- Pencarian: buang tombol silang bawaan Chrome --- */
.a-input[type="search"]::-webkit-search-decoration,
.a-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Textarea: pegangan ubah ukuran saja, tanpa gaya bawaan --- */
.a-textarea, textarea.form-control { resize: vertical; }

/* Baris yang bisa diklik seluruhnya (lihat aurora.js).
   Hanya isyarat visual — logikanya di JS, dengan pengaman seleksi teks. */
.a-table tbody tr[data-href],
.a-list > li[data-href] { cursor: pointer; }
.a-table tbody tr[data-href]:hover { background: var(--surface-3); }
.a-list > li[data-href]:hover { background: var(--surface-2); }

/* ── Catatan bantuan (.a-note) ─────────────────────────────────────────────
   Blok penjelas di dalam form: latar redup, bukan kotak peringatan. Dipakai
   di Kirim Pesan untuk daftar penanda yang bisa diklik. */
.a-note {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 11px 13px;
}
.a-note__head {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text);
    margin-bottom: 9px;
}
.a-note__head .ico { color: var(--text-muted); }

/* Kapsul yang bisa ditekan (bukan pilihan), mis. sisip penanda ke textarea. */
.a-chipset--sm { gap: 6px; }
.a-chip-btn {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font: inherit; font-size: 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.a-chip-btn code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px;
    color: var(--text);
    background: none; padding: 0;
}
.a-chip-btn:hover, .a-chip-btn:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
}
.a-chip-btn:active { transform: translateY(1px); }
@media (max-width: 480px) {
    /* Di HP keterangannya dibuang — kapsulnya jadi cuma penanda, muat sebaris. */
    .a-chip-btn > span { display: none; }
}

/* ── Panel angka (.a-panel) ────────────────────────────────────────────────
   Kartu kecil di dalam kartu: satu angka besar + tombol aksi. Dipakai di
   Kirim Pengingat. Bedanya dengan .a-stat: ada tombol, jadi tingginya rata. */
.a-panel {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-top: 3px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 13px;
}
.a-panel--ok     { border-top-color: var(--ok); }
.a-panel--warn   { border-top-color: var(--warn); }
.a-panel--danger { border-top-color: var(--danger); }

.a-panel__head {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-muted);
}
.a-panel--ok     .a-panel__head .ico { color: var(--ok-text); }
.a-panel--warn   .a-panel__head .ico { color: var(--warn-text); }
.a-panel--danger .a-panel__head .ico { color: var(--danger-text); }

.a-panel__value {
    font-size: 30px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 8px 0 2px;
}
.a-panel__meta {
    font-size: 12px; color: var(--text-muted);
    line-height: 1.45;
    /* mendorong tombol ke dasar supaya keempat panel rata bawah */
    flex: 1 1 auto;
    margin-bottom: 10px;
}
.a-panel__act { display: grid; gap: 6px; }

@media (max-width: 480px) {
    /* Di HP panel jadi baris: label kiri, angka kanan, tombol di bawah. */
    .a-panel__value { font-size: 24px; margin-top: 6px; }
    .a-panel__meta  { margin-bottom: 8px; }
}

/* ── Laci hasil (.a-drawer) ────────────────────────────────────────────────
   Kartu yang dibuka/tutup jQuery slideToggle(). display:none-nya ditulis
   sebaris di template — slideToggle membaca gaya sebaris, bukan kelas. */
.a-drawer { overflow: hidden; }

/* ── Wadah markup pihak lain (.a-embed) ────────────────────────────────────
   Isi elemen ini ditulis oleh skrip controller sebagai markup Bootstrap 3
   (table/alert/label). Tidak ditata ulang di sini — compat.css yang bekerja.
   Yang diurus cuma gulir mendatar supaya tabel lebar tidak merusak tata letak. */
.a-embed { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.a-embed > div + div { margin-top: 10px; }

/* ── Tirai proses (.a-overlay) ─────────────────────────────────────────────
   Dipasangkan dengan kelas `hidden` yang digerakkan skrip controller;
   `hidden` membawa !important sehingga selalu menang atas display:flex. */
.a-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 55%, rgba(0, 0, 0, .55));
    backdrop-filter: blur(2px);
}
.a-overlay__box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 26px 30px;
    text-align: center;
    max-width: 320px;
}
.a-overlay__title { font-size: 15px; font-weight: 600; color: var(--text); margin: 14px 0 4px; }
.a-overlay__text  { font-size: 12.5px; color: var(--text-muted); margin: 0; }

.a-spinner {
    display: inline-block; width: 30px; height: 30px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: a-spinner-turn .8s linear infinite;
}
@keyframes a-spinner-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .a-spinner { animation-duration: 2.4s; }
}

/* ── Sakelar (.a-switch) ───────────────────────────────────────────────────
   Pengganti checkbox untuk pilihan yang berarti "mode", bukan "centang salah
   satu dari daftar" — mis. mode uji di Kirim Pesan Massal. */
.a-switch {
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer;
    user-select: none;
}
.a-switch input {
    position: absolute; opacity: 0;
    width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.a-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 38px; height: 22px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: background .15s, border-color .15s;
}
.a-switch__knob {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .15s;
}
.a-switch input:checked + .a-switch__track {
    background: var(--btn-ok-bg);
    border-color: var(--btn-ok-bg);
}
.a-switch input:checked + .a-switch__track .a-switch__knob { transform: translateX(16px); }
.a-switch input:focus-visible + .a-switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.a-switch__label { font-size: 12.5px; color: var(--text-muted); }
.a-switch input:checked ~ .a-switch__label { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
    .a-switch__track, .a-switch__knob { transition: none; }
}

/* ── Pesan sebaris (.a-inline-note) ────────────────────────────────────────
   Status yang ditulis skrip ke dalam kartu (kemajuan, hasil, galat). Bukan
   .a-toast: ini menetap dan berada di tempat kejadiannya. */
.a-inline-note {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
}
.a-inline-note--info   { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.a-inline-note--ok     { background: var(--ok-soft);     border-color: transparent; color: var(--ok-text); }
.a-inline-note--warn   { background: var(--warn-soft);   border-color: transparent; color: var(--warn-text); }
.a-inline-note--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger-text); }

/* ── Bilah kemajuan (.a-progress) ──────────────────────────────────────────
   Dipakai siaran pesan; lebarnya digerakkan skrip lewat style="width:NN%". */
.a-progress {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    overflow: hidden;
}
.a-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .a-progress__bar { transition: none; }
}

/* Spinner versi kecil, muat di dalam tombol dan ikon kartu. */
.a-spinner--sm {
    width: 14px; height: 14px; border-width: 2px;
    vertical-align: -2px;
}

/* Teks apa adanya (pesan siaran, jejak galat) — membungkus, tidak melebar. */
.a-pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
}

/* ── Daftar centang yang bisa dicari (.a-picklist) ─────────────────────────
   Dipakai penyaring alamat di Kirim Pesan Massal v2: daftar bisa ratusan
   baris, jadi dibatasi tinggi dan digulir di tempat — sama seperti daftar
   panjang lain di tema ini. */
.a-picklist {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 8px;
}
.a-picklist__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: -8px;
    background: var(--surface-2);
}
.a-picklist__state {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 22px 10px;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* Kotak centang berlabel — satu baris yang seluruhnya bisa diklik. */
.a-check {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px;
    border-radius: var(--radius-xs);
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}
.a-check:hover { background: var(--surface-3); }
.a-check input { margin: 0; flex: 0 0 auto; }

/* ── Area unggah gambar (.a-dropzone) ──────────────────────────────────── */
.a-dropzone {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 140px;
    padding: 18px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.a-dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.a-dropzone.has-image { border-style: solid; padding: 8px; background: var(--surface); }
.a-dropzone__prompt {
    display: grid; gap: 5px; justify-items: center;
    color: var(--text-muted);
    font-size: 12.5px;
}
.a-dropzone__img { max-width: 100%; max-height: 220px; border-radius: var(--radius-xs); }

/* Ikon ukuran besar untuk keadaan kosong / ajakan. */
.ico--lg { width: 30px; height: 30px; }

/* Kolom teks panjang di tabel: dipotong, tidak melebarkan tabel. */
.a-clamp {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .a-clamp { max-width: none; white-space: normal; }
}

/* Tumpukan KPI satu kolom — untuk kolom samping yang sempit. */
.a-kpi--stack { grid-template-columns: 1fr; }

/* Angka KPI yang perlu diberi warna arti (mis. cacah gagal). Ditulis
   sebagai .a-stat__value.is-* — bukan .is-* sendirian — karena .is-danger
   dipakai juga oleh .a-list (garis kiri) dan .a-meter (latar). */
.a-stat__value.is-danger { color: var(--danger-text); }
.a-stat__value.is-ok     { color: var(--ok-text); }

/* ── Keadaan baris tabel ───────────────────────────────────────────────────
   Tema lama menandai baris dengan latar penuh (class="danger"/"warning"
   milik Bootstrap). Latar penuh melawan garis belang dan sorot-hover, dan
   di mode gelap warnanya tidak pernah disesuaikan. Di sini penanda dipindah
   ke garis kiri + rona tipis, jadi hover tetap terbaca. */
.a-table tbody tr.is-off td:first-child,
.a-table tbody tr.is-postpaid td:first-child { position: relative; }
.a-table tbody tr.is-off td:first-child::before,
.a-table tbody tr.is-postpaid td:first-child::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.a-table tbody tr.is-off td:first-child::before      { background: var(--danger); }
.a-table tbody tr.is-postpaid td:first-child::before { background: var(--warn); }
.a-table tbody tr.is-off      { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.a-table tbody tr.is-postpaid { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.a-table tbody tr.is-off:hover,
.a-table tbody tr.is-postpaid:hover { background: var(--surface-3); }

@media (max-width: 768px) {
    /* Dalam mode kartu tiap td jadi baris sendiri, jadi garisnya dipindah
       ke sisi kartu supaya tidak menempel di satu sel saja. */
    .a-table--cards tbody tr.is-off,
    .a-table--cards tbody tr.is-postpaid { border-left: 3px solid var(--border); }
    .a-table--cards tbody tr.is-off      { border-left-color: var(--danger); }
    .a-table--cards tbody tr.is-postpaid { border-left-color: var(--warn); }
    .a-table--cards tbody tr.is-off td:first-child::before,
    .a-table--cards tbody tr.is-postpaid td:first-child::before { display: none; }
}

/* Harga lama yang dicoret di sebelah harga baru. */
.a-strike {
    margin-left: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

/* ── Pemisah berlabel (.a-divider) ─────────────────────────────────────────
   Menggantikan <div class="panel-heading"> yang diselipkan di tengah form
   di tema lama — itu terbaca seperti kepala kartu kedua padahal cuma
   penanda bagian. */
.a-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 12px;
    color: var(--text-muted);
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.a-divider::before, .a-divider::after {
    content: ''; flex: 1 1 auto; height: 1px; background: var(--border);
}
.a-divider::before { flex-grow: 0; width: 0; }

/* ── Tombol preset (.a-preset) ─────────────────────────────────────────── */
.a-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.a-preset:last-child { margin-bottom: 0; }
.a-preset__label {
    font-size: 11.5px; font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 7px;
}

/* Cuplikan nilai apa adanya di dalam sel tabel (mis. rangkaian burst). */
.a-code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 1px 6px;
    white-space: nowrap;
}

/* ── Kolom dengan awalan/akhiran (.a-input-group) ──────────────────────────
   Pengganti .input-group + .input-group-addon Bootstrap: mata uang di kiri
   kolom harga. Ditulis dengan flex supaya tinggi dan radiusnya mengikuti
   token kontrol, bukan angka tetap. */
.a-input-group { display: flex; align-items: stretch; }
.a-input-group__addon {
    display: flex; align-items: center;
    padding: 0 11px;
    height: var(--control-h);
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12.5px;
    white-space: nowrap;
}
.a-input-group .a-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.a-input-group .a-input:focus { position: relative; z-index: 1; }

/* ── Tanda bantuan (.a-help) ───────────────────────────────────────────────
   Pengganti popover Bootstrap yang dipakai belasan kali di form paket.
   Popover butuh bootstrap.js dan tidak pernah tampil di layar sentuh;
   title bawaan browser jalan di mana saja dan tidak menambah kode. */
.a-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 10px; font-weight: 700;
    cursor: help;
    vertical-align: 1px;
}
.a-help:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Kolom teks yang isinya kode/skrip. */
.a-mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ── Nilai yang disembunyikan sampai disorot (.a-mask) ─────────────────────
   Dipakai untuk IP dan username router di daftar. Tema lama memakai
   style="background-color:black;color:black" plus onmouseenter/onmouseleave
   sebaris: hitam di atas hitam, jadi teksnya tetap terbaca lewat pilih-blok,
   dan tidak bisa dibuka lewat papan ketik sama sekali.

   Di sini teksnya benar-benar dikaburkan, terbuka saat disorot ATAU difokus
   (jadi bisa lewat Tab), dan tidak butuh satu baris JS pun. */
.a-mask {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    filter: blur(4px);
    transition: filter .12s;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-xs);
    outline-offset: 2px;
}
.a-mask:hover, .a-mask:focus, .a-mask:focus-visible {
    filter: none;
    user-select: text;
    background: var(--surface-2);
    padding: 0 4px;
}
@media (prefers-reduced-motion: reduce) { .a-mask { transition: none; } }

/* Peta di dalam kartu. Tingginya tetap supaya Leaflet punya ukuran pasti
   sejak awal — ia tidak bisa menghitung ubin di wadah setinggi nol. */
.a-map {
    height: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--surface-2);
}
.a-map .leaflet-container { background: var(--surface-2); }

/* Peta seukuran layar untuk halaman yang memang isinya peta. */
.a-map--tall { height: 70vh; min-height: 380px; }

/* Isi pesan / jejak galat di dalam sel log: dibatasi tinggi, digulir di
   tempat, supaya satu pesan panjang tidak membuat barisnya setinggi layar. */
.a-log-body {
    max-width: 420px;
    max-height: 120px;
    overflow: auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}
.a-log-body--err { color: var(--danger-text); margin-top: 5px; }
@media (max-width: 768px) { .a-log-body { max-width: none; } }

/* Kartu contoh template voucher: bisa diklik, isinya HTML milik pengguna
   jadi tidak ditata ulang — hanya dibatasi supaya tidak melebar keluar. */
.a-voucher { cursor: pointer; }
.a-voucher:hover { border-color: var(--accent); }
.a-voucher__isi { overflow-x: auto; }
.a-voucher__isi * { max-width: 100%; }

/* ── Pratinjau susunan dasbor (.a-struct) ─────────────────────────────────
   Kotak-kotak yang mewakili area widget; lebarnya mengikuti angka kolom
   pada setelan susunan ("12.6,6.4,4,4"). */
.a-struct { display: grid; gap: 5px; }
.a-struct__row { display: flex; gap: 5px; }
.a-struct__cell {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 34px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px; font-weight: 600;
    text-decoration: none;
}
.a-struct__cell:hover {
    border-style: solid; border-color: var(--accent);
    background: var(--accent-soft); color: var(--accent-text);
}

/* Kapsul yang dipakai sebagai tautan (bukan radio) menandai yang aktif
   sendiri, karena tidak ada :checked untuk diikuti. */
.a-chip__body.is-aktif {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
}

/* ── Bagian yang bisa dilipat (.a-section) ─────────────────────────────────
   <details> asli, bukan collapse Bootstrap: tidak butuh bootstrap.js dan
   tetap bisa dibuka walau JS mati. Dipakai Pengelola Plugin dan halaman
   Pengaturan Aplikasi yang punya belasan bagian. */
.a-section { padding: 0; }
.a-section__head {
    display: flex; align-items: center; gap: 9px;
    padding: var(--pad-card);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text);
    user-select: none;
}
.a-section__head::-webkit-details-marker { display: none; }
.a-section__head::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform .15s;
}
.a-section[open] > .a-section__head::after { transform: rotate(-135deg); }
.a-section[open] > .a-section__head { border-bottom: 1px solid var(--border); }
.a-section__head:hover { background: var(--surface-2); }
.a-section__title { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
    .a-section__head::after { transition: none; }
}

/* Keterangan tiga baris lalu dipotong — dipakai kartu plugin, yang
   deskripsinya datang dari repositori jauh dan panjangnya tak menentu. */
.a-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Foto profil besar di halaman administrator. */
.a-avatar-lg {
    width: 150px; height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    background: var(--surface-2);
}

/* ── Daftar keterangan (.a-deflist) ────────────────────────────────────────
   Pasangan label–nilai, label kiri nilai kanan. Menggantikan
   .list-group + .pull-right Bootstrap di halaman detail. */
.a-deflist { list-style: none; margin: 0; padding: 0; }
.a-deflist li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.a-deflist li:last-child { border-bottom: 0; }
.a-deflist span { color: var(--text-muted); flex: 0 0 auto; }
.a-deflist b { text-align: right; word-break: break-word; font-weight: 600; }

/* Bentuk <dl><dt><dd> dari komponen yang sama. Beberapa halaman plugin
   (Kas Keuangan, Mitra RT, Survei, panel Monitor MikroTik) memakainya sejak
   ditulis ulang, tapi aturan di atas hanya mengenal <ul><li><span><b> —
   akibatnya yang tampil gaya bawaan peramban: nilai menjorok 40px di bawah
   labelnya, di desktop maupun ponsel (ketahuan 12 Okt 2026). */
dl.a-deflist {
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    margin: 0; font-size: 13px;
}
dl.a-deflist > dt,
dl.a-deflist > dd { margin: 0; padding: 9px 2px; border-bottom: 1px solid var(--border); }
dl.a-deflist > dt { color: var(--text-muted); padding-right: 14px; }
dl.a-deflist > dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
dl.a-deflist > dt:last-of-type,
dl.a-deflist > dd:last-of-type { border-bottom: 0; }

/* ── Susunan dasbor (.a-dash-row) ──────────────────────────────────────────
   Menggantikan grid Bootstrap (.row + .col-md-N) di dasbor. Angka susunan
   di setelan tetap dibaca sebagai satuan 12 kolom, jadi nilai yang sudah
   ada ("12.7,5") berarti sama persis seperti sebelumnya. */
.a-dash-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.a-dash-row:last-child { margin-bottom: 0; }
.a-dash-col { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 992px) {
    /* Di bawah lebar tablet tiap widget dapat satu baris penuh: kolom 4/12
       di layar telepon terlalu sempit untuk grafik maupun tabel. */
    .a-dash-col { grid-column: 1 / -1; }
}

/* ── Struk faktur (.a-struk) ───────────────────────────────────────────────
   Teks faktur apa adanya, lebar tetap, dengan cap LUNAS sebagai latar —
   sama seperti tema lama, hanya warnanya kini dari token. */
.a-struk {
    margin: 0;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* Cap LUNAS dipasang dari template lewat style sebaris memakai
       $app_url: jalur relatif dari berkas CSS ini ke system/uploads/
       gampang salah dan tidak ikut kalau tema dipindah. */
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Tampil hanya di layar sempit / hanya di layar lebar. */
.a-hp-only { display: none; }
@media (max-width: 768px) {
    .a-hp-only { display: inline-flex; }
    .a-hp-none { display: none; }
}

/* Peringatan kecil di samping label (mis. "IP sudah dipakai oleh ..."). */
/* Wizard alamat email (customer/wizard-email.tpl).
   Hanya tiga aturan: sapaan, daftar alasan, dan baris bantuan di bawah
   kartu. Sisanya memakai .a-card/.a-field/.a-btn yang sudah ada. */
.a-wizard__sapaan { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.a-wizard__alasan { list-style: none; margin: 0 0 18px; padding: 0; }
.a-wizard__alasan li {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--text-muted);
}
.a-wizard__alasan li + li { border-top: 1px solid var(--border-soft, var(--border)); }
.a-wizard__alasan .ico { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ok, #16a34a); }
.a-wizard__bantu {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Kabar menetap di dalam halaman — BUKAN toast.
   Dipakai untuk syarat yang harus dipenuhi dulu, misalnya alamat email
   kosong yang menghalangi tautan pembayaran online. Toast hilang sendiri
   setelah beberapa detik; keterangan seperti ini harus tetap terbaca
   selama syaratnya belum dipenuhi. */
.a-kabar {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: var(--radius-sm, 8px);
    background: var(--warn-soft);
    color: var(--warn-text);
    font-size: 13.5px;
    line-height: 1.5;
}
.a-kabar .ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.a-kabar__judul { font-weight: 650; display: block; margin-bottom: 2px; }
.a-kabar a { color: inherit; text-decoration: underline; }

.a-warn-inline {
    margin-left: 7px;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--danger-text);
}

/* Rincian di dalam dialog (mis. pembayaran sebelumnya pada peringatan
   isi ulang ganda). Dialog memusatkan teksnya; rincian lebih terbaca
   rata kiri. */
.a-dialog__detail { text-align: left; font-size: 13px; }
.a-dialog__detail p { margin: 0 0 8px; }
.a-dialog__detail ul { margin: 0 0 8px; padding-left: 20px; }
.a-dialog__detail li { margin-bottom: 3px; color: var(--text-muted); }

/* Baris total pada .a-deflist: dipertegas karena itu angka yang dipakai
   mengambil keputusan. */
.a-deflist__total { border-top: 2px solid var(--border); padding-top: 11px; }
.a-deflist__total b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* Kolom centang bulan di Lembar Penagih: sempit, rata tengah, dan
   angkanya tidak ikut mengecil saat tabel digulir. */
.a-bulan { width: 38px; text-align: center; white-space: nowrap; }

/* ── Cangkang portal pelanggan ─────────────────────────────────────────────
   Beberapa bagian yang hanya ada di sisi pelanggan; sisanya memakai kelas
   cangkang yang sama dengan admin (aurora-sidebar, aurora-topbar, dst.). */
.aurora-topbar__title {
    font-weight: 600; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aurora-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.aurora-sidebar__foot {
    margin-top: auto;
    padding: 10px 0 4px;
    border-top: 1px solid var(--border);
    display: grid; gap: 2px;
}
.aurora-nav__link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-xs);
    color: var(--text-muted); text-decoration: none; font-size: 13px;
}
.aurora-nav__link:hover { background: var(--surface-2); color: var(--text); }

/* Lencana pesan belum dibaca di menu samping. */
.aurora-unread { margin-left: auto; }

/* Pemilih bahasa: <details> asli, tidak butuh JS. */
.aurora-lang { position: relative; }
.aurora-lang > summary { list-style: none; cursor: pointer; }
.aurora-lang > summary::-webkit-details-marker { display: none; }
.aurora-lang__list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 170px; max-height: 320px; overflow: auto;
    margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.aurora-lang__list li { list-style: none; }
.aurora-lang__list a {
    display: block; padding: 7px 10px; border-radius: var(--radius-xs);
    color: var(--text); text-decoration: none; font-size: 13px;
}
.aurora-lang__list a:hover { background: var(--surface-2); }

/* Tombol yang tampil seperti tautan (Privasi / S&K di kaki halaman). */
.a-linkish {
    background: none; border: 0; padding: 0;
    color: var(--accent-text); font: inherit; font-size: 12.5px;
    cursor: pointer; text-decoration: none;
}
.a-linkish:hover { text-decoration: underline; }

/* ── Halaman publik portal (login, daftar, lupa sandi) ─────────────────────
   Satu kolom di tengah, tanpa menu samping. */
.a-publik {
    min-height: 100vh; margin: 0; padding: 24px 16px;
    display: flex; align-items: flex-start; justify-content: center;
    background: var(--bg); color: var(--text);
}
.a-publik__wrap { width: 100%; max-width: 440px; }
/* Untuk halaman dokumen (bukti pembayaran) yang dibuka lewat tautan publik:
   440px adalah lebar kartu masuk, dan sebuah faktur terbaca seperti tampilan
   ponsel kalau dipaksa masuk ke situ. */
.a-publik__wrap--lebar { max-width: 880px; }
.a-publik__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 18px;
}
.a-publik__brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--text); text-decoration: none;
    font-weight: 700; font-size: 17px;
}
.a-publik__brand .ico { color: var(--accent); }
/* Logo unggahan di kepala cangkang publik. Dibatasi tingginya, bukan
   lebarnya — logo merek biasanya spanduk memanjang. */
.a-publik__logo {
    max-width: 180px; max-height: 34px;
    width: auto; height: auto;
    object-fit: contain;
}
.a-publik__foot {
    margin-top: 18px; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
@media (min-width: 720px) { .a-publik { align-items: center; } }

/* Isi pesan di kotak masuk: markup milik sistem, jadi hanya dibatasi
   supaya gambar/tabel lebar tidak melebar keluar kartu. */
.a-pesan { line-height: 1.6; word-break: break-word; }
.a-pesan img, .a-pesan table { max-width: 100%; height: auto; }
.a-pesan table { border-collapse: collapse; }

/* Baris pesan yang belum dibaca. */
.a-list > li.is-baru { border-left: 3px solid var(--warn); }
.a-list > li.is-baru .a-list__title { font-weight: 700; }

/* Prosa: isi HTML sembarang yang datang dari luar tema — berkas di folder
   pages/, pengumuman, syarat & ketentuan. Tidak ada kelas Aurora di dalamnya,
   jadi elemen telanjangnya yang diberi bentuk. Dibatasi ke .a-prosa supaya
   tidak bocor ke halaman lain yang masih memakai Bootstrap sampai Sprint 7. */
.a-prosa { line-height: 1.7; word-break: break-word; }
.a-prosa > :first-child { margin-top: 0; }
.a-prosa > :last-child { margin-bottom: 0; }
.a-prosa h1, .a-prosa h2, .a-prosa h3, .a-prosa h4 {
    margin: 1.4em 0 .5em; line-height: 1.3; font-weight: 700; color: var(--text);
}
.a-prosa h1 { font-size: 1.5rem; }
.a-prosa h2 { font-size: 1.25rem; }
.a-prosa h3 { font-size: 1.1rem; }
.a-prosa h4 { font-size: 1rem; }
.a-prosa p, .a-prosa ul, .a-prosa ol, .a-prosa blockquote { margin: 0 0 1em; }
.a-prosa ul, .a-prosa ol { padding-left: 1.4em; }
.a-prosa li { margin-bottom: .35em; }
.a-prosa a { color: var(--accent-text); text-decoration: underline; }
.a-prosa a:hover { text-decoration: none; }
.a-prosa img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.a-prosa hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.a-prosa blockquote {
    padding: .1px 0 .1px 14px; border-left: 3px solid var(--border-strong);
    color: var(--text-muted);
}
.a-prosa code, .a-prosa pre {
    font-family: var(--font-mono); font-size: .92em;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}
.a-prosa code { padding: .1em .35em; }
.a-prosa pre { padding: 12px 14px; overflow: auto; }
.a-prosa pre code { background: none; border: 0; padding: 0; }
.a-prosa table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.a-prosa th, .a-prosa td {
    padding: 8px 10px; border: 1px solid var(--border); text-align: left;
}
.a-prosa th { background: var(--surface-2); font-weight: 600; }

/* Angka besar pada halaman 404. Sengaja dibuat redup: yang perlu dibaca
   lebih dulu adalah kalimat penjelas dan tombolnya, bukan angkanya. */
.a-404 {
    font-size: 54px; font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--text-faint);
    margin-bottom: 10px;
}

/* ------------------------------------------------ Kartu paket ------------ */
/* Satu pilihan yang bisa dibeli: paket saldo, paket internet, voucher.
   Dipakai di dalam .a-grid, jadi lebarnya diatur gridnya, bukan di sini.
   Isinya menempel ke atas dan tombolnya selalu rapat ke dasar kartu supaya
   deretan kartu dengan tinggi teks berbeda tetap rata tombolnya. */
.a-paket {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.a-paket > :last-child { margin-top: auto; }
.a-paket__nama { font-weight: 650; font-size: 14px; }
.a-paket__harga {
    font-size: 18px; font-weight: 750; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.a-paket__rincian { font-size: 12.5px; color: var(--text-muted); }
.a-paket__rincian dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.a-paket__rincian dt { color: var(--text-muted); }
.a-paket__rincian dd { margin: 0; text-align: right; color: var(--text); }
.a-paket--sorot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Harga sebelum diskon. <s> saja tidak cukup jelas di ukuran kecil, jadi
   warnanya ikut diredupkan. */
.a-coret {
    margin-left: 6px;
    font-size: 12.5px; font-weight: 500;
    color: var(--text-faint); text-decoration: line-through;
}

/* Angka total di baris terakhir sebuah rincian harga. Tema lama memakai
   font-family monospace sebaris; di sini cukup tabular-nums, supaya
   angkanya tetap sejajar tanpa berganti muka huruf. */
.a-total {
    font-size: 16px; font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Baris foto profil + kolom unggah di sebelahnya (halaman profil pelanggan).
   Di layar sempit foto naik ke atas dan kolomnya melebar penuh. */
.a-avatar-baris {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.a-avatar-baris__isi { flex: 1; min-width: 0; }
.a-avatar-baris__isi .a-field:last-child { margin-bottom: 8px; }
.a-avatar {
    width: 120px; height: 120px; flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    background: var(--surface-2);
}
@media (max-width: 560px) {
    .a-avatar-baris { flex-direction: column; align-items: center; }
    .a-avatar-baris__isi { width: 100%; }
}

/* Pratinjau logo di Pengaturan Aplikasi. Dua kotak, terang dan gelap,
   supaya transparansi ketahuan tanpa harus membuka berkasnya. */
.a-logo-pratinjau {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 10px;
}
.a-logo-pratinjau__kotak {
    flex: 0 0 auto;
    display: grid; place-items: center;
    min-width: 140px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.a-logo-pratinjau__kotak img { max-width: 180px; max-height: 44px; width: auto; height: auto; }
.a-logo-pratinjau__kotak--terang { background: #fff; }
.a-logo-pratinjau__kotak--gelap  { background: #111a2e; }
.a-logo-pratinjau .a-hint { flex: 1 1 200px; }

/* ── Dialog, tab, dan latar gelap ──────────────────────────────────────────
   Tata letaknya dulu datang dari bootstrap.min.css. Karena berkas itu akan
   dilepas di Sprint 7, aturannya dipindah ke sini — DENGAN NAMA KELAS YANG
   SAMA, supaya markup di tema maupun di sembilan template plugin tidak perlu
   disentuh. Penggeraknya aurora.js, bukan bootstrap.min.js.

   Kontraknya sederhana: aurora.js mengatur display dan menambah/menghapus
   kelas .in; sisanya urusan CSS ini. */
.modal {
    position: fixed; inset: 0; z-index: 1050;
    display: none;
    overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
    outline: 0;
}
.modal.fade { opacity: 0; transition: opacity .15s linear; }
.modal.fade.in { opacity: 1; }
.modal:not(.fade) { opacity: 1; }
.modal-dialog {
    position: relative;
    width: 100%; max-width: 600px;
    margin: 0 auto;
    transform: translateY(-14px);
    transition: transform .2s ease-out;
}
.modal.in .modal-dialog { transform: none; }
.modal-lg .modal-dialog, .modal-dialog.modal-lg { max-width: 880px; }
.modal-sm .modal-dialog, .modal-dialog.modal-sm { max-width: 400px; }
.modal-content {
    position: relative;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: #000;
    opacity: 0; transition: opacity .15s linear;
}
.modal-backdrop.in { opacity: .55; }
body.modal-open { overflow: hidden; }

/* Tombol tutup bawaan Bootstrap (<button class="close">&times;</button>).
   Markupnya tersebar di template plugin, jadi kelasnya dipertahankan. */
.modal-content .close {
    float: right;
    border: 0; background: none;
    font-size: 22px; line-height: 1;
    color: inherit; opacity: .6;
    cursor: pointer; padding: 0 2px;
}
.modal-content .close:hover { opacity: 1; }

/* Tab: aurora.js memindahkan kelas .active, CSS ini yang menyembunyikan
   panel yang tidak aktif. */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ── Baris tindakan kartu paket (Pengelola Plugin) ─────────────────────────
   Tiga tingkat dalam satu baris: tombol utama berisi, tautan rujukan sebagai
   teks, dan tindakan merusak sebagai ikon yang didorong ke ujung kanan.
   Tujuannya satu: di halaman berisi puluhan kartu, "Hapus" tidak boleh
   tampil sama menonjolnya dengan "Pasang". */
.a-paket-aksi {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px 12px;
}
.a-paket-aksi__tautan { display: flex; align-items: center; gap: 12px; }
.a-paket-aksi__tautan .a-linkish { display: inline-flex; align-items: center; gap: 4px; }
.a-paket-aksi .a-ikonbtn { margin-left: auto; }
.a-btn.is-mati { opacity: .45; pointer-events: none; }

/* Tombol ikon saja. Diredupkan sampai disentuh; warnanya baru muncul saat
   kursor atau fokus papan ketik sampai ke sana. */
.a-ikonbtn {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.a-ikonbtn .ico { width: 16px; height: 16px; }
.a-ikonbtn:hover { background: var(--surface-3); color: var(--text); }
.a-ikonbtn:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
.a-ikonbtn--danger:hover {
    background: var(--danger-soft); color: var(--danger-text);
    border-color: var(--danger-soft);
}
.a-ikonbtn--danger:focus-visible { color: var(--danger-text); }

.ico--xs { width: 12px; height: 12px; }

/* Pembungkus paginasi. Menggantikan <center> di pagination.tpl, yang dipakai
   23 template. Aturan BENTUK .pagination sendiri ada di compat.css BAGIAN 0 —
   ia kelas Bootstrap yang masih dipakai markup lama. */
.a-pagination-wrap { display: flex; justify-content: center; padding: 4px 0; }

/* ── Ajakan pasang aplikasi (PWA) ──────────────────────────────────────────
   Menempel di dasar layar, di atas isi halaman. Ditaruh di bawah, bukan di
   atas: ajakan yang menutupi kepala halaman menghalangi hal yang justru
   dicari pelanggan saat membuka portal. */
.a-pasang {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
    animation: a-pasang-naik .22s ease-out;
}
@keyframes a-pasang-naik { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .a-pasang { animation: none; } }

.a-pasang__ikon {
    flex: 0 0 auto; width: 40px; height: 40px;
    border-radius: var(--radius-sm); object-fit: contain;
    background: var(--surface-2); padding: 4px;
}
.a-pasang__teks { flex: 1 1 auto; min-width: 0; }
.a-pasang__judul { font-weight: 650; font-size: 14px; }
.a-pasang__sub {
    font-size: 12.5px; color: var(--text-muted); margin-top: 1px;
    /* Petunjuk iOS lebih panjang daripada kalimat bawaannya; dipotong dua
       baris supaya tinggi kotaknya tidak melompat antar perangkat. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.a-pasang__aksi { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* Di layar lebar ia jadi kartu mengambang di pojok, bukan bilah selebar
   layar — bilah selebar monitor untuk satu ajakan terasa berlebihan. */
@media (min-width: 720px) {
    .a-pasang {
        left: auto; right: 18px; bottom: 18px;
        max-width: 420px;
        border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
    }
}

/* ── Grid 12 kolom (.a-cols / .a-col-N) ───────────────────────────────────
   Pengganti .row + .col-sm-N untuk template plugin yang susunannya memang
   berkolom bebas. Di bawah 720px semua kolom jadi selebar penuh, KECUALI
   yang diberi .a-col-xs-N (padanan col-xs-N: tetap berbagi lebar di ponsel).
   Urutan aturan di bawah disengaja: dasar, lalu xs, lalu media query. */
.a-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.a-cols > * { grid-column: span 12; min-width: 0; }
.a-col-xs-1 { grid-column: span 1; }
.a-col-xs-2 { grid-column: span 2; }
.a-col-xs-3 { grid-column: span 3; }
.a-col-xs-4 { grid-column: span 4; }
.a-col-xs-5 { grid-column: span 5; }
.a-col-xs-6 { grid-column: span 6; }
.a-col-xs-7 { grid-column: span 7; }
.a-col-xs-8 { grid-column: span 8; }
.a-col-xs-9 { grid-column: span 9; }
.a-col-xs-10 { grid-column: span 10; }
.a-col-xs-11 { grid-column: span 11; }
.a-col-xs-12 { grid-column: span 12; }
@media (min-width: 720px) {
    .a-col-1 { grid-column: span 1; }
    .a-col-2 { grid-column: span 2; }
    .a-col-3 { grid-column: span 3; }
    .a-col-4 { grid-column: span 4; }
    .a-col-5 { grid-column: span 5; }
    .a-col-6 { grid-column: span 6; }
    .a-col-7 { grid-column: span 7; }
    .a-col-8 { grid-column: span 8; }
    .a-col-9 { grid-column: span 9; }
    .a-col-10 { grid-column: span 10; }
    .a-col-11 { grid-column: span 11; }
    .a-col-12 { grid-column: span 12; }
}
.a-text-danger { color: var(--danger-text); }

/* ── Dipindah dari compat.css, 11 Okt 2026 ────────────────────────────────
   compat.css dihapus setelah 0 template tema dan 0 dari 30 template plugin
   masih memakai kelas Bootstrap. Yang di bawah ini ternyata BUKAN sisa
   Bootstrap melainkan bagian tema yang kebetulan tinggal di sana — tanpa
   dipindah, setiap dialog kehilangan jarak dalamnya, paginasi di 20+ halaman
   kembali jadi daftar berpoin polos, dan lencana menu plugin di sidebar
   kehilangan bentuknya. Didapat dengan memetakan SETIAP kelas yang
   didefinisikan compat.css terhadap seluruh template, PHP, dan JS tema. */

/* Bagian dalam dialog (struktur luarnya ada di blok "Dialog" di atas). */
.modal-header { padding: 16px; border-bottom: 1px solid var(--border); }
.modal-title { margin: 0; font-size: 16px; font-weight: 650; }
.modal-body { padding: 16px; }
/* Flex supaya tombol bisa didorong ke kiri dengan margin-right:auto
   (mis. "Kembali" di wizard WAN GenieACS), pengganti .pull-left. */
.modal-footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
    padding: 14px 16px; border-top: 1px solid var(--border);
}
.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }

.hidden { display: none !important; }

.loading { pointer-events: none; opacity: .7; }
.loading::after { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: middle; margin-left: 9px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: a-spinner-turn .8s infinite linear; }

/* Paginasi (pagination.tpl). Dicakup ke .a-pagination-wrap supaya tidak
   bertabrakan dengan kelas .pagination milik pustaka apa pun. */
.a-pagination-wrap .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.a-pagination-wrap .pagination > li { display: block; }
.a-pagination-wrap .pagination > li > a,
.a-pagination-wrap .pagination > li > span {
    display: block; padding: 5px 11px; font-size: 13px; text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    background: var(--surface); color: var(--text);
}
.a-pagination-wrap .pagination > li > a:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.a-pagination-wrap .pagination > .active > a,
.a-pagination-wrap .pagination > .active > span { background: var(--accent); border-color: var(--accent); color: #fff; }
.a-pagination-wrap .pagination > .disabled > a,
.a-pagination-wrap .pagination > .disabled > span { pointer-events: none; background: var(--surface-2); border-color: var(--border); color: var(--text-faint); }

/* Butir menu plugin di sidebar, dirakit di boot.php dari register_menu(). */
.aurora-nav .pull-right-container { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; }
.aurora-nav .pull-right-container .a-badge { font-size: 10px; padding: .2em .55em; }
.aurora-nav a > .text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Pustaka pihak ketiga: Select2 dan DataTables
   --------------------------------------------------------------------------
   Kelas di sini DIBUAT OLEH PUSTAKANYA saat berjalan (select2-*,
   dataTables_*), tidak pernah tertulis di template. Karena itu pemeriksaan
   "kelas yang masih dipakai" waktu compat.css dihapus (11 Okt 2026)
   menganggapnya mati, dan gayanya ikut terbuang: kotak pilih pelanggan,
   router dan paket di Isi Ulang Akun jadi putih di mode gelap (dilaporkan
   13 Okt 2026). JANGAN dihapus selama select2/DataTables masih dimuat.

   Diawali `html` karena select2.min.css dimuat SESUDAH berkas ini dan
   selektornya sama kuat. Tidak terikat tema select2 (--default/--bootstrap):
   pencarian pelanggan di plan.php memakai theme "bootstrap" yang lembar
   gayanya tidak dimuat sama sekali.
   ========================================================================== */
html .select2-container .select2-selection--single,
html .select2-container .select2-selection--multiple {
    min-height: var(--control-h);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
html .select2-container .select2-selection--single {
    height: auto;
    display: flex; align-items: center;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}
html .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--text); line-height: 1.4; padding: 7px 0 7px 12px;
}
html .select2-container .select2-selection__placeholder { color: var(--text-faint); }
/* Panah bawaan pustaka diganti chevron yang sama dengan .a-select. */
html .select2-container .select2-selection--single .select2-selection__arrow { display: none; }
html .select2-container .select2-selection__clear { color: var(--text-muted); margin-right: 4px; }
html .select2-container.select2-container--focus .select2-selection,
html .select2-container.select2-container--open .select2-selection {
    outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
html .select2-container.select2-container--disabled .select2-selection { background-color: var(--surface-2); opacity: .7; }
html .select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    overflow: hidden;
}
html .select2-search--dropdown { padding: 8px; }
html .select2-search--dropdown .select2-search__field,
html .select2-container .select2-search--inline .select2-search__field {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-xs); padding: 6px 9px; font-size: 13px; outline: none;
}
html .select2-container .select2-search--inline .select2-search__field { background: transparent; border: 0; padding: 4px 6px; }
html .select2-results__option { color: var(--text); padding: 8px 12px; font-size: 13px; }
html .select2-results__option[aria-selected="true"],
html .select2-results__option--selected { background: var(--surface-2); color: var(--text); }
html .select2-results__option--highlighted[aria-selected],
html .select2-results__option--highlighted { background: var(--accent); color: #fff; }
html .select2-results__message, html .select2-results__option--load-more { color: var(--text-muted); }
html .select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--accent-soft); border: 0; color: var(--accent-text);
    border-radius: var(--radius-xs); padding: 2px 8px; margin-top: 5px;
}
html .select2-container .select2-selection--multiple .select2-selection__choice__remove { color: var(--accent-text); margin-right: 4px; }
:root[data-theme="dark"] .select2-container .select2-selection--single { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .select2-container .select2-selection--single { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 5px 9px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text) !important;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td,
table.dataTable.no-footer { border-bottom-color: var(--border); }