/*
    Penyelarasan tampilan mengikuti template Ynex.

    Yang ada di sini hanyalah hal yang tidak dapat dinyatakan lewat MudTheme —
    terutama warna dan keadaan tautan menu di atas sidebar gelap, yang oleh MudBlazor
    diwarnai mengikuti tema terang. Sisanya (warna, sudut, huruf, lebar) ditetapkan
    pada CabinetTheme supaya tetap satu sumber.
*/

/* --- Utilitas yang dulu datang dari Bootstrap --------------------------- */

/*
    MudBlazor membawa utilitas jarak, flexbox, dan tampilannya sendiri, tetapi tidak
    membawa keempat ini. Selama Bootstrap masih terpasang berdampingan, keempatnya
    ikut terbawa tanpa disadari; setelah Bootstrap dicabut, tanpa aturan di bawah ini
    nomor rekening kembali berhuruf biasa dan angka jumlah kehilangan ketebalannya.
*/

.font-monospace {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: .95em;
}

.fw-semibold {
    font-weight: 600;
}

.text-right {
    text-align: right;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

.h-100 {
    height: 100%;
}

/* --- Bilah atas --------------------------------------------------------- */

.cabinet-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cabinet-user {
    border-radius: 8px;
    cursor: pointer;
}

.cabinet-user:hover {
    /* Diturunkan dari warna primer tema, bukan ungu tertanam: warna primer kini
       dapat diganti dari panel (Pengaturan Tampilan), dan noda yang tertanam akan
       tetap ungu sendirian. */
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* --- Sidebar ------------------------------------------------------------ */

/*
    Seluruh warna bilah sisi diturunkan dari peubah tema, tidak satu pun ditanam.
    Warna latarnya disunting dari Pengaturan Tampilan, dan tema sudah memilihkan
    warna tulisan yang cukup kontras terhadapnya (lihat CabinetTheme). Warna yang
    ditanam di sini akan bertahan terang di atas latar terang — yaitu menu yang
    hilang sama sekali, tanpa satu pun galat.
*/
.cabinet-drawer {
    /* Lacinya melayang di atas isi halaman, bukan menggesernya. Tanpa bayangan,
       tepinya lebur dengan isi di baliknya ketika keduanya sama-sama terang. */
    box-shadow: 0 0 28px rgba(0, 0, 0, .18);
}

.cabinet-brand {
    color: var(--mud-palette-drawer-text);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-drawer-text) 18%, transparent);
    min-height: 60px;
}

.cabinet-drawer .mud-navmenu .mud-nav-link,
.cabinet-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
    color: var(--mud-palette-drawer-text);
    font-size: .78rem;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 8px;
    padding: 10px 12px;
    min-height: 42px;
}

/*
    Yang berubah saat disentuh hanya latarnya, bukan warna hurufnya. Noda diturunkan
    dari warna tulisan bilah sisi, jadi ia otomatis menjadi noda terang di atas bilah
    gelap dan noda gelap di atas bilah terang — satu aturan untuk keduanya.
*/
.cabinet-drawer .mud-navmenu .mud-nav-link:hover,
.cabinet-drawer .mud-navmenu .mud-nav-group > .mud-nav-link:hover {
    background: color-mix(in srgb, var(--mud-palette-drawer-text) 14%, transparent);
}

/*
    Halaman yang sedang dibuka diberi warna primer penuh, bukan sekadar tebal.
    Pada sidebar gelap, perbedaan ketebalan huruf hampir tidak terlihat.

    Pemilihnya sengaja panjang. Aturan MudBlazor untuk keadaan yang sama berbunyi
    .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)
    dan karena itu lebih khusus daripada bentuk pendek mana pun yang ditulis di sini —
    akibatnya rancangan ini tidak pernah tampil sama sekali, dan yang terlihat justru
    tulisan biru di atas noda abu enam persen. Gagalnya diam-diam: tidak ada galat,
    tidak ada yang rusak, hanya penanda halaman aktif yang tidak pernah muncul.
    Disamakan panjangnya, bukan dipaksa dengan !important — yang dipaksa akan menang
    juga atas keadaan yang memang seharusnya menimpanya.
*/
.cabinet-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.cabinet-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
    font-size: 1.15rem;
}

/* Anak menu digeser masuk supaya jenjangnya terbaca tanpa garis pemisah. */
.cabinet-drawer .mud-navmenu .mud-collapse-container .mud-nav-link {
    padding-left: 2.5rem;
    font-size: .75rem;
}

.cabinet-drawer .mud-nav-group .mud-nav-link-expand-icon {
    color: color-mix(in srgb, var(--mud-palette-drawer-icon) 70%, transparent);
}

/*
    Tirai laci dibuat setipis mungkin.

    Lacinya bervarian Temporary, dan MudBlazor menutupi seluruh layar dengan tirai
    selama laci terbuka. Bawaannya rgba(33,33,33,.4) — cukup pekat untuk membuat
    seluruh panel tampak buram setiap kali menu dibuka. Tirainya tetap dipertahankan,
    bukan dimatikan lewat Overlay="false": justru tirai itulah yang menutup laci
    ketika latarnya ditekan, dan tanpanya menu hanya bisa ditutup dari tombolnya.
*/
/*
    Kedua kelas disebut, dan pemilihnya sengaja sepanjang ini. MudBlazor menulis
    .mud-overlay .mud-overlay-scrim.mud-overlay-dark — tiga kelas — sehingga aturan
    dua kelas kalah dan tirainya tetap pekat tanpa satu pun tanda bahwa aturannya
    diabaikan. Sudah menggigit sekali; diukur lewat penelusuran styleSheets.
    Yang terang dipakai tampilan gelap, yang gelap dipakai tampilan terang.
*/
.mud-overlay.mud-overlay-drawer .mud-overlay-scrim.mud-overlay-dark,
.mud-overlay.mud-overlay-drawer .mud-overlay-scrim.mud-overlay-light {
    background-color: rgba(17, 28, 67, .10);
}

/* --- Isi halaman -------------------------------------------------------- */

.cabinet-content {
    background: var(--mud-palette-background-gray);
    min-height: 100vh;
}

/*
    Kartu Ynex memakai garis tipis dan sudut 8 piksel, bukan bayangan. Bayangan
    membuat halaman berisi banyak tabel terlihat ramai tanpa menambah kejelasan.
*/
.mud-table.mud-table-outlined,
.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
}

/*
    Label di dalam sel tabel lurus dengan judul kolomnya.

    MudChip membawa margin 4 piksel di keempat sisinya — tepat untuk deretan label yang
    berjajar, salah untuk label yang berdiri di awal sel: teks di kolom lain menempel
    pada tepi selnya persis di bawah judul kolom, sedangkan label bergeser 4 piksel ke
    kanan dan tampak melenceng sendiri. Pemilik menunjuknya pada kolom Kategori halaman
    Jejak Audit, 21 September 2026; bentuk yang sama ada di empat puluhan halaman lain,
    jadi dibetulkan di sini, sekali, bukan dengan kelas pada tiap label.

    Hanya margin KIRI label PERTAMA. Label kedua dan seterusnya tetap berjarak dari yang
    sebelumnya, dan margin atas-bawahnya dibiarkan — itulah yang menjaga tinggi baris.
*/
.mud-table-cell .mud-chip:first-child {
    margin-left: 0;
}

/* --- Kepala halaman ----------------------------------------------------- */

.cabinet-page-header {
    margin-bottom: 1.25rem;
}

/* --- Galat Blazor ------------------------------------------------------- */

#blazor-error-ui {
    background: #E6533C;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    color: #fff;
    display: none;
    left: 0;
    padding: .6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1500;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

/* ------------------------------------------------------------------------- */
/* Tabel yang runtuh menjadi kartu pada layar sempit.                        */
/*                                                                           */
/* Bawaan MudBlazor menaruh label di ujung kiri dan nilainya di ujung kanan  */
/* selebar baris — pada kartu yang lebar, mata harus menyeberangi ruang      */
/* kosong untuk mencocokkan keduanya, dan yang mencocokkan sambil menyeberang */
/* akan tergelincir satu baris. Label dan nilai kini berdampingan seperti    */
/* borang: label selebar tetap di kiri, nilai langsung di sebelahnya.        */
/*                                                                           */
/* WAJIB dibungkus media query yang batasnya SAMA PERSIS dengan milik        */
/* MudBlazor (xs 600, sm 960, md 1280, lg 1920). MudBlazor meruntuhkan       */
/* tabelnya hanya di dalam media query itu; aturan yang berlaku tanpa syarat */
/* lebar akan ikut menimpa tabel penuh pada jendela lebar — label dobel,     */
/* kolom tergencet sampai hurufnya bertumpuk — dan sudah pernah menggigit.   */
/* ------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .mud-table.mud-xs-table td.mud-table-cell[data-label] {
        display: grid !important;
        grid-template-columns: minmax(8rem, 13rem) 1fr;
        column-gap: 1rem;
        align-items: baseline;
        justify-content: start;
        /* Tanpa ini, isi sel meregang selebar kolom — chip keadaan tampak
           seperti bilah panjang, bukan lencana. */
        justify-items: start;
        text-align: left !important;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px dashed rgba(128, 128, 128, 0.18);
    }

    .mud-table.mud-xs-table td.mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        opacity: 0.62;
        text-align: left;
    }

    .mud-table.mud-xs-table td.mud-table-cell[data-label]:last-child {
        border-bottom: none;
    }
    /* Nilai selalu di kolom kedua. Tiap unsur sel adalah butir grid sendiri, jadi sel yang
       isinya dua unsur (dua tombol, chip + teks) menjatuhkan unsur keduanya ke kolom LABEL
       baris berikutnya - Dompet di kanan, Nonaktifkan di kiri bawahnya pada Daftar IB
       (tangkapan layar pemilik 29 September 2026, "ga sejajar ... ratakan"). */
    .mud-table.mud-xs-table td.mud-table-cell[data-label] > * {
        grid-column: 2;
    }

    /* Sel tombol menjadi bilah perkakas rata kanan seperti di tabel penuh: tombol-tombolnya
       berdampingan dan membungkus ke kanan bila sempit; label, bila ada, tetap di kiri. */
    .mud-table.mud-xs-table td.mud-table-cell[data-label]:has(> .mud-button-root) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }

    .mud-table.mud-xs-table td.mud-table-cell[data-label]:has(> .mud-button-root)::before {
        margin-right: auto;
    }
}

@media (max-width: 960px) {
    .mud-table.mud-sm-table td.mud-table-cell[data-label] {
        display: grid !important;
        grid-template-columns: minmax(8rem, 13rem) 1fr;
        column-gap: 1rem;
        align-items: baseline;
        justify-content: start;
        justify-items: start;
        text-align: left !important;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px dashed rgba(128, 128, 128, 0.18);
    }

    .mud-table.mud-sm-table td.mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        opacity: 0.62;
        text-align: left;
    }

    .mud-table.mud-sm-table td.mud-table-cell[data-label]:last-child {
        border-bottom: none;
    }
    /* Nilai selalu di kolom kedua (sebabnya di blok xs). */
    .mud-table.mud-sm-table td.mud-table-cell[data-label] > * {
        grid-column: 2;
    }

    /* Sel tombol = bilah rata kanan (sebabnya di blok xs). */
    .mud-table.mud-sm-table td.mud-table-cell[data-label]:has(> .mud-button-root) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }

    .mud-table.mud-sm-table td.mud-table-cell[data-label]:has(> .mud-button-root)::before {
        margin-right: auto;
    }
}

@media (max-width: 1280px) {
    .mud-table.mud-md-table td.mud-table-cell[data-label] {
        display: grid !important;
        grid-template-columns: minmax(8rem, 13rem) 1fr;
        column-gap: 1rem;
        align-items: baseline;
        justify-content: start;
        justify-items: start;
        text-align: left !important;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px dashed rgba(128, 128, 128, 0.18);
    }

    .mud-table.mud-md-table td.mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        opacity: 0.62;
        text-align: left;
    }

    .mud-table.mud-md-table td.mud-table-cell[data-label]:last-child {
        border-bottom: none;
    }
    /* Nilai selalu di kolom kedua (sebabnya di blok xs). */
    .mud-table.mud-md-table td.mud-table-cell[data-label] > * {
        grid-column: 2;
    }

    /* Sel tombol = bilah rata kanan (sebabnya di blok xs). */
    .mud-table.mud-md-table td.mud-table-cell[data-label]:has(> .mud-button-root) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }

    .mud-table.mud-md-table td.mud-table-cell[data-label]:has(> .mud-button-root)::before {
        margin-right: auto;
    }
}

@media (max-width: 1920px) {
    .mud-table.mud-lg-table td.mud-table-cell[data-label] {
        display: grid !important;
        grid-template-columns: minmax(8rem, 13rem) 1fr;
        column-gap: 1rem;
        align-items: baseline;
        justify-content: start;
        justify-items: start;
        text-align: left !important;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px dashed rgba(128, 128, 128, 0.18);
    }

    .mud-table.mud-lg-table td.mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        opacity: 0.62;
        text-align: left;
    }

    .mud-table.mud-lg-table td.mud-table-cell[data-label]:last-child {
        border-bottom: none;
    }
    /* Nilai selalu di kolom kedua (sebabnya di blok xs). */
    .mud-table.mud-lg-table td.mud-table-cell[data-label] > * {
        grid-column: 2;
    }

    /* Sel tombol = bilah rata kanan (sebabnya di blok xs). */
    .mud-table.mud-lg-table td.mud-table-cell[data-label]:has(> .mud-button-root) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }

    .mud-table.mud-lg-table td.mud-table-cell[data-label]:has(> .mud-button-root)::before {
        margin-right: auto;
    }
}

/* ------------------------------------------------------------------ Pohon IB

   Dua rupa atas data yang sama. Rupa daftar memakai garis penghubung berupa huruf
   (├ └ │) yang dibentuk PohonIbTampilan; rupa grafis memakai kotak dan garis yang
   digambar CSS dari sarang <ul> di SimpulPohonIbKotak.razor.

   Garis penghubung dipilih daripada lekukan saja karena lekukan hanya memberitahu
   SEBERAPA DALAM sebuah IB, bukan SIAPA BERSAUDARA DENGAN SIAPA. Cabang yang melebar
   tiga dan cabang yang menjulur satu-satu ke bawah tampak sama saja bila yang
   membedakan hanya jarak dari tepi kiri. */

.pohon-ib-ranting {
    /* Wajib monospace: lebar batang dan cabang harus sama persis, kalau tidak
       garis tegaknya tidak bersambung antarbaris dan pohonnya tampak patah. */
    font-family: var(--mud-typography-monospace-family, monospace);
    white-space: pre;
    color: var(--mud-palette-text-disabled);
    user-select: none;
    flex: 0 0 auto;
    line-height: 1.4;
}

.pohon-ib-lipat {
    flex: 0 0 auto;
    margin: -6px 0;
}

/* Menjaga kode tetap sejajar pada baris yang tidak punya tombol lipat. Tanpa ini,
   IB tanpa downline bergeser ke kiri dan kolom kodenya bergerigi. */
.pohon-ib-lipat-kosong {
    flex: 0 0 auto;
    width: 30px;
}

/* Remah jalur: "MIB10 › IB12 › SUB121 › SUB1211" */
.pohon-ib-remah {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    margin-top: 2px;
}

.pohon-ib-remah .pisah {
    color: var(--mud-palette-text-disabled);
    padding: 0 2px;
}

.pohon-ib-remah .kini {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ---------------------------------------------------------- rupa grafis */

.pohon-ib-kanvas {
    /* Penggulirnya melekat di sini, bukan pada halaman: pohon berisi enam IB pada
       satu cabang sudah lebih lebar daripada layar mana pun, dan halaman yang
       bergeser ke samping membawa serta menu beserta seluruh isi lainnya. */
    overflow-x: auto;
    padding: 12px 4px 20px;
}

.pohon-ib,
.pohon-ib ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pohon-ib {
    display: flex;
    justify-content: center;
    min-width: max-content;
}

.pohon-ib ul {
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

.pohon-ib li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
}

.pohon-ib ul > li {
    padding-top: 22px;
}

/* Garis turun dari kotak yang punya anak. */
.pohon-ib li.punya-anak > .pohon-ib-simpul::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    width: 2px;
    height: 22px;
    background: var(--mud-palette-lines-inputs);
}

/* Garis mendatar yang mengikat saudara sekandung.

   Tiga aturan, dan ketiganya perlu. Anak di TENGAH memakai lebar penuh sehingga
   garisnya bersambung ke saudara di kiri maupun di kanan; anak pertama hanya separuh
   kanan, anak terakhir hanya separuh kiri, supaya garisnya berhenti tepat di atas
   kotak terluar alih-alih menjulur ke ruang kosong.

   Semula anak pertama diberi separuh kanan dan SELURUH sisanya separuh kiri. Bagi dua
   bersaudara itu kebetulan benar — dan itulah yang membuatnya lolos. Begitu ada anak
   ketiga, yang di tengah kehilangan separuh kanannya dan garisnya patah. */
.pohon-ib ul > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--mud-palette-lines-inputs);
}

.pohon-ib ul > li:first-child::before {
    left: 50%;
    width: 50%;
}

.pohon-ib ul > li:last-child::before {
    left: 0;
    width: 50%;
}


.pohon-ib ul > li:only-child::before {
    display: none;
}

/* Garis naik dari tiap anak menuju garis mendatar di atasnya. */
.pohon-ib ul > li > .pohon-ib-simpul::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -22px;
    width: 2px;
    height: 22px;
    background: var(--mud-palette-lines-inputs);
}

.pohon-ib-kotak {
    position: relative;
    width: 168px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pohon-ib-kotak:hover {
    border-color: var(--mud-palette-primary);
}


.pohon-ib-kotak:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

.pohon-ib-kotak .kode {
    font-size: .78rem;
    font-weight: 600;
}

.pohon-ib-kotak .nama {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.pohon-ib-kotak .angka {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: .66rem;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
}

/* Strip warna menandai pola pembagian, bukan menghias. Selisih dan overriding
   menghasilkan tagihan perusahaan yang sangat berbeda atas volume yang sama, dan
   itulah satu-satunya hal pada kartu yang layak diberi warna. */
.pohon-ib-kotak .strip {
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
}

.pohon-ib-kotak .strip-selisih {
    background: var(--mud-palette-primary);
}

.pohon-ib-kotak .strip-override {
    background: var(--mud-palette-secondary);
}

/* Pembungkus kotak beserta tombol mekarnya. Garis turun dan garis naik digambar dari
   sini, bukan dari kotaknya, supaya tombol yang menumpang di atas garis tidak menggeser
   perhitungan letaknya. */
.pohon-ib-simpul {
    position: relative;
    display: flex;
}

/* Tombol mekar/lipat, menumpang di atas garis turun. Letaknya di situ karena ke sanalah
   mata tertuju ketika bertanya "di bawahnya ada apa". */
.pohon-ib-putar {
    position: absolute;
    left: 50%;
    bottom: -11px;
    transform: translateX(-50%);
    z-index: 1;

    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    cursor: pointer;

    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);

    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pohon-ib-putar:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pohon-ib-putar:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Cabang yang terlipat menyebutkan jumlah yang disembunyikannya. Tanda "+" saja hanya
   mengatakan ada sesuatu di bawah; angkanya mengatakan seberapa banyak — dan itulah yang
   menentukan apakah cabangnya layak dibuka sekarang. */
.pohon-ib-putar.terlipat {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pohon-ib-putar.terlipat:hover {
    filter: brightness(1.08);
}

/* Garis turun disembunyikan ketika cabangnya terlipat: garis yang menjulur ke ruang
   kosong membuat pohon tampak terpotong, bukan terlipat. */
.pohon-ib li:not(.punya-anak) > .pohon-ib-simpul::after {
    display: none;
}

/* ---------------------------------------------------- jenjang dan jalur terpilih

   Dua hal yang sama-sama menjawab "mana yang di atas mana" ketika mitranya sudah
   banyak, dan keduanya perlu sebab menjawab dari sisi yang berbeda:

   Nomor jenjang menjawabnya untuk SATU simpul yang sedang dilihat. Nama jenjang
   ("Master IB", "Sub IB 2") mengikuti penamaan perusahaan dan tidak menyiratkan urutan
   kepada orang yang baru melihat; angka menyiratkannya seketika. Warnanya menguat ke
   arah puncak, sehingga jenjang tertinggi tetap menonjol pada pohon yang penuh.

   Sorotan jalur menjawabnya untuk SATU RANTAI. Pada pohon belasan IB, jalur ke puncak
   masih dapat ditelusuri mata; pada ratusan, tidak — dan sorotan menggantikan
   penelusuran itu dengan sekali lihat. */

.pohon-ib-jenjang,
.pohon-ib-kotak .jenjang {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Tangga warna, bukan pelangi: satu warna yang meredup ke bawah. Warna yang berganti
   rona tiap jenjang menuntut orang menghafal peta warna lebih dulu, sedangkan tangga
   satu warna langsung terbaca sebagai "yang lebih pekat lebih tinggi". */
.pohon-ib-jenjang.j1, .pohon-ib-kotak .jenjang.j1,
.pohon-ib-kotak.j1 .jenjang {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pohon-ib-jenjang.j2, .pohon-ib-kotak.j2 .jenjang {
    background: color-mix(in srgb, var(--mud-palette-primary) 34%, transparent);
    color: var(--mud-palette-primary);
}

.pohon-ib-jenjang.j3, .pohon-ib-kotak.j3 .jenjang {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
}

.pohon-ib-jenjang.j4, .pohon-ib-kotak.j4 .jenjang,
.pohon-ib-jenjang.j5, .pohon-ib-kotak.j5 .jenjang {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pohon-ib-kotak .kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Kotak jenjang satu ditegaskan garisnya. Pada pohon yang penuh, puncak setiap rantai
   itulah yang dicari mata lebih dulu. */
.pohon-ib-kotak.j1 {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-inputs));
}

.pohon-ib-kotak.j1 .kode {
    font-size: .82rem;
}

/* Jalur menuju IB yang dipilih.

   Semula hanya latar 6 persen — secara rancangan beralasan, secara praktik tidak
   terbaca: beda 6 persen terhadap putih hampir tidak terlihat pada layar kantor yang
   terang, dan penanda yang harus dicari-cari sama saja dengan tidak ada penanda.

   Sekarang jalurnya ditandai TIGA cara sekaligus, dan ketiganya perlu. Rel tegak di
   tepi kiri menjadikan jalurnya satu batang menyambung yang terbaca sebagai bentuk,
   bukan sebagai deretan baris yang kebetulan berwarna. Latarnya dipekatkan. Kode dan
   garis rantingnya ikut berwarna dan menebal, sehingga jalurnya tetap terbaca oleh
   yang tidak dapat membedakan warna — penanda yang bertumpu pada warna saja
   meninggalkan sebagian pembacanya. */
.pohon-ib-dijalur {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    border-radius: 8px;

    /* Rel digambar dengan bayangan ke dalam, bukan dengan border: border menambah
       lebar dan menggeser seluruh baris jalur beberapa piksel terhadap baris lain,
       sehingga kolom kodenya tidak lagi lurus. */
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.pohon-ib-dijalur .pohon-ib-ranting {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.pohon-ib-dijalur .font-monospace {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Kotak pada rupa grafis: garis penuh dan latar pekat, sebab di sana tidak ada rel
   tepi kiri yang dapat menyambungkan satu kotak ke kotak berikutnya. */
.pohon-ib-kotak.dijalur {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.pohon-ib-kotak.dijalur .kode {
    color: var(--mud-palette-primary);
}

/* Yang dipilih tetap harus menang atas jalurnya: cincin di luar garis, bukan sekadar
   garis yang lebih tebal. */
.pohon-ib-kotak.terpilih,
.pohon-ib-kotak.dijalur.terpilih {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

/* --- Menu profil -------------------------------------------------------- */

/*
    Memakai <details> bawaan peramban, bukan komponen menu: MudMenu tidak dapat
    dibuka sama sekali pada MudBlazor 9.8, dan keluar justru paling dibutuhkan
    ketika ada yang rusak. Yang di bawah ini hanya rupa; membuka dan menutupnya
    dikerjakan peramban sendiri.
*/
/*
    Flex, bukan block bawaan <details>. Bilah atas MudBlazor berupa flex bersumbu
    mendatar; anak yang block ikut terentang tegak dan pemicunya tidak lagi sebaris
    dengan ikon di sebelahnya. position relative menahan panelnya yang melayang.
*/
.cabinet-profil {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.cabinet-profil-pemicu {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

/* Segitiga bawaan dibuang pada kedua mesin render. */
.cabinet-profil-pemicu::-webkit-details-marker { display: none; }
.cabinet-profil-pemicu::marker { content: ""; }

.cabinet-profil-pemicu:hover,
.cabinet-profil[open] .cabinet-profil-pemicu {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.cabinet-profil-pemicu:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cabinet-profil-nama {
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.cabinet-profil-nama .nm,
.cabinet-profil-kepala .nm {
    font-size: .82rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.cabinet-profil-nama .pr,
.cabinet-profil-kepala .pr {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.cabinet-profil-panah {
    transition: transform .15s ease;
    color: var(--mud-palette-text-secondary);
}

.cabinet-profil[open] .cabinet-profil-panah {
    transform: rotate(180deg);
}

/*
    Panelnya melayang di atas isi halaman. z-index dinaikkan melewati bilah atas
    MudBlazor; tanpa itu ia tertutup oleh halaman di bawahnya pada layar sempit.
*/
.cabinet-profil-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 232px;
    z-index: 1400;
    padding: .35rem;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .28);
}

.cabinet-profil-kepala {
    display: flex;
    flex-direction: column;
    padding: .5rem .65rem .6rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cabinet-profil-butir {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 7px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.cabinet-profil-butir .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

/*
    Diturunkan dari warna primer tema, sama seperti .cabinet-user di atas. Variabel
    hover bawaan MudBlazor tidak dipakai di berkas ini di mana pun, jadi tidak ada
    yang membuktikannya terisi — dan latar yang tidak terisi berarti butir yang
    tidak menanggapi kursor sama sekali.
*/
.cabinet-profil-butir:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.cabinet-profil-butir:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/*
    Keluar diberi warna galat dan garis pemisah: ia satu-satunya butir yang
    mengakhiri sesi, dan tidak boleh tertekan karena dikira butir biasa.
*/
.cabinet-profil-butir.keluar {
    margin-top: .3rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 0 7px 7px;
    color: var(--mud-palette-error);
}

.cabinet-profil-butir.keluar .mud-icon-root {
    color: var(--mud-palette-error);
}

.cabinet-profil-butir.keluar:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* --- Halaman HP: menu sebagai <details> ---------------------------------- */

/*
    Menu halaman "Calon Saya". Laci panel lengkap interaktif dan karena itu tidak dapat
    dipakai pada halaman yang sengaja tanpa sirkuit; yang ini <details> bawaan peramban
    dengan pranala murni, menumpang rupa menu profil di atas. Panelnya berlabuh di KIRI
    (pemicunya di pojok kiri bilah), tidak pernah lebih lebar dari layar, dan menggulir
    sendiri — menu Administrator memuat lebih banyak butir daripada tinggi layar HP.
*/
.saku-menu .saku-menu-panel {
    left: 0;
    right: auto;
    width: min(20rem, calc(100vw - 1rem));
    max-height: min(78vh, 36rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.saku-menu-kelompok > summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.saku-menu-kelompok > summary::-webkit-details-marker { display: none; }
.saku-menu-kelompok > summary::marker { content: ""; }

.saku-menu-kelompok > summary .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.saku-menu-kelompok > summary:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.saku-menu-kelompok > summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.saku-menu-kelompok > summary .saku-menu-panah {
    margin-left: auto;
    transition: transform .15s ease;
}

.saku-menu-kelompok[open] > summary .saku-menu-panah {
    transform: rotate(180deg);
}

/* Butir di dalam kelompok menjorok, supaya induknya terbaca sebagai induk. */
.saku-menu-anak {
    padding-left: 2.1rem;
}

.saku-menu-anak.aktif {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-weight: 500;
}

/*
    Keterangan butir pada menu HP: baris kedua yang lebih kecil dan lebih redup di bawah
    nama butirnya. Layar sentuh tidak punya kursor untuk diarahkan, jadi keterangan yang
    hanya ditaruh pada title tidak pernah terbaca di sana.
*/
.saku-menu-teks {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.saku-menu-keterangan {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.35;
}

/* --- Lencana menu --------------------------------------------------------- */

/*
    Angka yang menunggu tangan pembacanya, di sebelah nama butir menu. Laci meja dan menu
    HP memakai kelas yang sama. Warnanya dari peubah tema — latar warna galat, tulisan
    warna yang dipilihkan tema di atasnya — sehingga terbaca di tampilan terang maupun
    gelap, juga di atas butir yang sedang dibuka (berlatar warna primer).
*/
.cabinet-lencana {
    background: var(--mud-palette-error);
    border-radius: 999px;
    color: var(--mud-palette-error-text);
    display: inline-block;
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    margin-left: .4rem;
    min-width: 1.25rem;
    padding: .2rem .4rem;
    text-align: center;
    vertical-align: middle;
}



/* --- Beranda: antrean kerja ---------------------------------------------- */

/*
    Seluruh warna diturunkan dari peubah tema, tidak satu pun ditanam: warna panel
    disunting dari Pengaturan Tampilan, dan angka merah yang tertanam akan tetap merah
    template ketika pialang menggantinya dengan merah sendiri.
*/

.beranda-eyebrow {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: .68rem;
    font-weight: 600;
    gap: .4rem;
    letter-spacing: .08em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

/* Gambar 3D pita dan ubin Denyut (1.0.62): gambar halaman tujuannya, dari susunan menu. */
.beranda-eyebrow-ikon { flex: none; }

.beranda-ubin { position: relative; }

.beranda-ubin-ikon {
    height: 36px;
    position: absolute;
    right: .8rem;
    top: .7rem;
    width: 36px;
}

.beranda-ubin:has(.beranda-ubin-ikon) .beranda-ubin-judul { padding-right: 2.6rem; }

/* Garis warna di atas ubin (mockup Usulan A): hijau uang masuk dan kabar baik, jingga uang
   keluar yang menunggu, biru yang menunggu tangan pembacanya, ungu yang menunggu orang lain.
   Warna palet tema, jadi tampilan gelap ikut. */
.beranda-ubin.hijau { border-top: 3px solid var(--mud-palette-success); }
.beranda-ubin.jingga { border-top: 3px solid var(--mud-palette-warning); }
.beranda-ubin.biru { border-top: 3px solid var(--mud-palette-primary); }
.beranda-ubin.ungu { border-top: 3px solid var(--mud-palette-secondary); }

.beranda-lencana { align-items: center; display: inline-flex; gap: .3rem; }
.beranda-lencana-ikon { height: 14px; width: 14px; }

.beranda-alarm-ikon { flex: none; height: 28px; width: 28px; }
.beranda-baris-ikon { margin-right: .4rem; vertical-align: -.3rem; }

/* Kepala Beranda: gambar rumah besar, judul, salam dan tanggal. */
.beranda-kepala { align-items: center; display: flex; gap: .9rem; margin-bottom: 1.25rem; }
.beranda-kepala-ikon { flex: none; height: 56px; width: 56px; }

.beranda-ubin {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1rem 1rem .85rem;
}

.beranda-ubin-judul {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
}

.beranda-ubin-angka {
    color: var(--mud-palette-text-primary);
    font-size: 1.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.05;
    text-decoration: none;
    width: fit-content;
}

a.beranda-ubin-angka:hover { color: var(--mud-palette-primary); }

.beranda-ubin-kaki {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

/* Satu-satunya ubin beraksen penuh pada barisnya: hanya ini yang menunggu tangan
   pembacanya. Aksen yang dibagi rata ke seluruh ubin tidak menunjuk apa pun. */
.beranda-ubin.milik-anda {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.beranda-ubin.milik-anda .beranda-ubin-angka { color: var(--mud-palette-primary); }

/* Garis putus-putus: bentuknya sendiri yang mengatakan tidak boleh disentuh. */
.beranda-ubin.terkunci {
    background: transparent;
    border-style: dashed;
}

.beranda-ubin.terkunci .beranda-ubin-angka { color: var(--mud-palette-text-secondary); }

.beranda-lencana {
    border-radius: 20px;
    font-size: .64rem;
    font-weight: 600;
    padding: .1rem .55rem;
    width: fit-content;
}

.beranda-lencana.anda {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.beranda-lencana.kunci {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* Kepingan Denyut (1.0.61): nama, lencana lingkup, dan pemilih periode dalam satu baris;
   pembanding periode sebelumnya di bawah angkanya, netral — baik-buruknya arah bergantung
   angkanya (umur antrean yang naik itu buruk, setoran yang naik itu baik), dan halaman
   tidak menebaknya. */
.beranda-denyut-kepala {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-bottom: .6rem;
}

.beranda-denyut-kepala .beranda-eyebrow { margin-bottom: 0; }
.beranda-denyut-kepala .mud-toggle-group { margin-left: auto; }

.beranda-denyut-banding {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    gap: .35rem;
}

.beranda-denyut-arah { font-weight: 700; }

.beranda-alarm-daftar { display: flex; flex-direction: column; gap: .6rem; }

.beranda-alarm {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-error) 9%, transparent);
    border-left: 3px solid var(--mud-palette-error);
    border-radius: var(--mud-default-borderradius);
    color: inherit;
    display: flex;
    gap: 1rem;
    padding: .8rem 1rem;
    text-decoration: none;
}

.beranda-alarm:hover { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); }

.beranda-alarm-judul { color: var(--mud-palette-error); font-weight: 600; }
.beranda-alarm-rinci { color: var(--mud-palette-text-secondary); font-size: .72rem; }

.beranda-alarm-angka {
    color: var(--mud-palette-error);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-left: auto;
}

.beranda-jam {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
}

.beranda-jam table { border-collapse: collapse; min-width: 420px; width: 100%; }

.beranda-jam th {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .07em;
    padding: .7rem 1rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.beranda-jam td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .75rem 1rem;
    vertical-align: middle;
}

.beranda-jam tbody tr:last-child td { border-bottom: none; }
.beranda-jam th.angka, .beranda-jam td.angka { font-variant-numeric: tabular-nums; text-align: right; }
.beranda-jam a { color: var(--mud-palette-text-primary); font-weight: 500; text-decoration: none; }
.beranda-jam a:hover { color: var(--mud-palette-primary); text-decoration: underline; }

/* Umur, bukan jumlah, yang menentukan warnanya: antrean empat puluh yang seluruhnya
   masuk hari ini lebih sehat daripada antrean satu yang sudah lewat tenggat. */
.beranda-jam td.mendesak { color: var(--mud-palette-error); font-weight: 600; white-space: nowrap; }
.beranda-jam td.perhatian { color: var(--mud-palette-warning); font-weight: 600; white-space: nowrap; }
.beranda-jam td.tenang { color: var(--mud-palette-text-secondary); white-space: nowrap; }

.beranda-catatan { color: var(--mud-palette-text-secondary); font-size: .68rem; }

.beranda-strip {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    overflow: hidden;
}

.beranda-strip-sel {
    align-items: center;
    background: var(--mud-palette-surface);
    display: flex;
    gap: .65rem;
    outline: 1px solid var(--mud-palette-lines-default);
    padding: .8rem 1rem;
}

.beranda-titik { border-radius: 50%; flex: none; height: 8px; width: 8px; }
.beranda-titik.ok { background: var(--mud-palette-success); }
.beranda-titik.crit { background: var(--mud-palette-error); }
/* Yang melonggarkan penjagaan tanpa menghentikan apa pun — verifikasi identitas yang tidak diwajibkan. */
.beranda-titik.warn { background: var(--mud-palette-warning); }

.beranda-strip-nama { color: var(--mud-palette-text-secondary); font-size: .68rem; }

.beranda-strip-nilai {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.beranda-strip-nilai.crit { color: var(--mud-palette-error); }

.beranda-ringkas {
    align-items: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
    padding: .8rem 1rem;
}

.beranda-ringkas a, .beranda-ringkas span {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    text-decoration: none;
}

.beranda-ringkas a:hover { color: var(--mud-palette-primary); }

.beranda-ringkas b {
    color: var(--mud-palette-text-primary);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    margin-right: .2rem;
}

/*
    Sandi bahasa yang sedang berlaku pada bilah atas.

    Berupa pranala murni, bukan tombol: kuki bahasa tidak dapat disetel dari komponen
    yang sudah dirender, dan perbuatan yang menuntut JS hidup lebih dulu akan gagal
    diam-diam persis ketika ia paling dibutuhkan. Ukurannya disamakan dengan tombol
    ikon di sebelahnya supaya barisnya tidak bergoyang.
*/
.cabinet-bahasa {
    align-items: center;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    letter-spacing: .04em;
    min-width: 36px;
    padding: 0 .4rem;
    text-decoration: none;
}

.cabinet-bahasa:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary);
}

/* Penanda versi di kaki halaman.
   Dibuat samar dengan sengaja: yang membacanya hanya orang yang sedang mencari
   sebab, dan pada hari-hari biasa ia tidak boleh ikut meminta perhatian. */
.cabinet-kaki {
    padding: 0 1.5rem 1.25rem;
    text-align: right;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-disabled);
    user-select: text;
}

/*
    Versi di kaki LACI: terbaca begitu menu dibuka, tanpa menggulir isi halaman.
    Didorong ke dasar laci oleh margin-top otomatis — laci MudBlazor kolom flex —
    dan diberi warna sekunder, bukan disabled, sebab di atas latar laci yang gelap
    warna disabled tenggelam (2,3:1 pada palet gelap, lihat catatan tampilan gelap
    di CLAUDE.md).
*/
.cabinet-laci-versi {
    margin-top: auto;
    padding: 1rem 1.5rem 1.25rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    user-select: text;
}

/*
    "Powered by Gaintactics" (komponen PoweredBy): lambang kecil dan teks, huruf sekunder, tidak menonjol.
    Satu warna untuk dua tampilan — text-secondary sudah berpasangan terang/gelap; lambangnya SVG transparan.
    Tidak pernah terpotong di tengah: di layar sempit ia turun utuh ke baris berikutnya.
*/
.cabinet-powered {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

.cabinet-powered img {
    width: auto;
    height: 0.9rem;
    flex: 0 0 auto;
}

/* Di samping versi pada kaki halaman panel. */
.cabinet-powered-baris {
    margin-left: 1rem;
}

/* Di bawah versi pada kaki laci. */
.cabinet-powered-laci {
    display: flex;
    margin-top: 0.5rem;
}

/* Di dasar kartu masuk dan di kaki halaman HP: di tengah, berjarak dari isi di atasnya. */
.cabinet-powered-kartu {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.cabinet-powered-saku {
    margin-top: 0;
    padding: 0.5rem 1rem 1.5rem;
}

/*
    Kaki pada halaman masuk. Berdiri di dasar wadah halaman (.cabinet-halaman-luar,
    yang setinggi layar penuh), sebab halaman masuk sudah setinggi layar penuh: kaki yang
    mengekor di bawah wadahnya jatuh di luar pandangan dan tidak pernah terbaca siapa pun.

    ABSOLUT di dalam wadah, BUKAN fixed di dasar layar. Bentuk pertamanya fixed, dan
    kaki yang melayang di dasar layar menimpa apa pun yang kebetulan lewat di bawahnya:
    begitu kartu masuk lebih tinggi daripada jendela — layar sempit, jendela yang pendek,
    kotak "Saya bukan robot" dan jalan passkey menyala bersamaan — tautan terakhir kartu
    ("Setel kata sandi dengan kode") jatuh tepat di bawah kaki dan terbaca bertumpuk
    dengan versinya (3 Oktober 2026, diukur 35 px dari 35 px tingginya). Di dalam wadah
    kaki tergulir bersama halaman dan berhenti di bawah ruang yang disisihkan untuknya
    (lihat .cabinet-halaman-luar di bawah), jadi tidak pernah ada tulisan di atas
    tulisan, pada lebar dan tinggi jendela mana pun. Selama kartunya muat di layar —
    yaitu hampir selalu pada layar lebar — letaknya sama persis dengan kaki melayang:
    di dasar layar, di tengah.

    DI TENGAH, bukan di kanan seperti kaki panel — dan warnanya satu tingkat lebih
    tegas. Percobaan pertama memakai keduanya sama dengan kaki panel, dan pemilik
    yang memintanya sendiri tidak menemukannya di layar: mata sudah berada di kartu
    masuk yang di tengah, sedangkan tulisannya di pojok kanan dengan warna teks
    yang dimatikan. Penanda yang tidak ditemukan tidak menjawab pertanyaan apa pun,
    dan pertanyaan itulah — versi mana yang sedang berjalan — yang membuatnya ada.

    pointer-events:none supaya ia tidak pernah menghalangi apa pun di bawahnya;
    teksnya sendiri tetap dapat disorot lewat pointer-events:auto.
*/
.cabinet-halaman-luar {
    position: relative;
}

.cabinet-kaki-tetap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.cabinet-kaki-tetap > * {
    pointer-events: auto;
}

/*
    Kabar hasil tindakan (KabarAksi) muncul tepat DI BAWAH bilah atas, bukan menimpanya.
    Letak bawaan MudBlazor 24 piksel dari tepi atas menutupi tombol menu, pencarian, dan
    sakelar tampilan selama kabarnya tampil — dan kabar gagal tampil sampai ditutup.
    Bilah atas panel setinggi 60 piksel (CabinetTheme, AppbarHeight).
*/
#mud-snackbar-container.mud-snackbar-location-top-center {
    top: 68px;
}

/*
    Pil bahasa dan sakelar tampilan di pojok kanan atas halaman sebelum masuk, meniru
    layar masuk aplikasi Nasabah: dua ruas ID | EN dalam satu pil berbingkai, ruas yang
    berlaku berlatar warna merek, dan satu tombol bundar untuk matahari/bulan.

    Latar ruas aktif memakai warna merek dengan tulisan primary-text, bukan warna merek
    sebagai TULISAN — palet gelap memakai warna merek yang sama, dan sebagai latar ia
    tetap terbaca di kedua tampilan. Ruas lain dan tombol bundar bertulisan warna teks
    tema, sehingga tidak ada yang tenggelam di atas hitam.

    Melayang (fixed), bukan ikut aliran halaman: kartu masuk berada di tengah layar penuh,
    dan kepala yang ikut aliran akan mendorongnya turun dari tengah.
*/
.cabinet-sakelar-kepala {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
    Ruang untuk kaki versi (dan di layar sempit untuk pil di pojok), disisihkan DI DALAM
    wadah pemusat setinggi layar (border-box), bukan di atasnya: ruang di atas wadah
    setinggi layar mendorong kartunya turun sejauh itu. Wadah pemusat adalah anak langsung
    .cabinet-halaman-luar pada kelima halaman yang memakai EmptyLayout (masuk, setel kata
    sandi, keluar, passkey, passkey langsung).

    SIMETRIS di atas dan di bawah, sebesar kaki satu baris (2,45rem: 0,75rem × 1,6 + 1,25rem)
    dibulatkan ke 2,75rem. Simetri yang menjaga kartunya TETAP di tengah layar — tempat
    ia berada sebelum kaki ikut tergulir. Kartu yang muat di dalam ruang itu tidak
    bergeser satu piksel pun, dan kartu yang lebih tinggi membuat halaman bergulir dengan
    kaki di bawahnya, tidak di atasnya. Satuannya rem, bukan px: kaki berukuran rem, dan
    pengguna yang memperbesar huruf tidak boleh membuatnya lebih tinggi daripada ruangnya.

    Di layar sempit kartu selebar layar dan hampir setinggi layarnya, sehingga ia menyentuh
    tepi atas — di bawah pil yang melayang — dan tepi bawah. Atasnya 64 px (pil: 16 px dari
    tepi, setinggi 38 px). Bawahnya 4rem: tulisan "bangunan pengembangan" membuat kaki dua
    baris di bawah ±415 px (2 × 1,2rem + 1,25rem = 3,65rem), dan satu baris saja lebih
    rendah. Hanya di layar sempit pil dan kartu bersinggungan: di layar lebar pil berada jauh
    di samping kartu. Batasnya 768 karena kartu 26rem ditambah lebar pil di kedua sisi baru
    muat di atas itu.
*/
.cabinet-halaman-luar > .d-flex {
    box-sizing: border-box;
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}

@media (max-width: 767.98px) {
    .cabinet-halaman-luar > .d-flex {
        padding-top: 64px;
        padding-bottom: 4rem;
    }
}

.cabinet-pil-bahasa {
    display: flex;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    background: var(--mud-palette-surface);
}

.cabinet-pil-bahasa a {
    min-width: 40px;
    padding: 4px 12px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.cabinet-pil-bahasa a:hover {
    color: var(--mud-palette-text-primary);
}

.cabinet-pil-bahasa a.aktif {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

.cabinet-tombol-tampilan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.cabinet-tombol-tampilan:hover {
    background: var(--mud-palette-action-default-hover);
}

.cabinet-pil-bahasa a:focus-visible,
.cabinet-tombol-tampilan:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/*
    Bilah alat tabel dibuat melipat pada layar ponsel.

    MudBlazor menyusunnya satu baris tanpa lipatan: judul, ubin ringkasan, lalu tombol
    unduh. Pada lebar 390 piksel deretan itu lebih panjang daripada layarnya, dan
    akibatnya SELURUH halaman dapat digulir ke samping — bukan hanya bilahnya. Yang
    terlihat pemiliknya: ubin "0 Nasabah · 0,00 lot settle · USD 0,00 rebate" terpotong
    di tepi kanan, dan halaman yang bergeser setiap kali disentuh.

    Ambang 599,98 piksel dipakai persis sama dengan ambang xs MudBlazor. Aturan yang
    tidak dibungkus media query dengan ambang yang sama ikut berlaku di jendela lebar —
    jebakan yang sudah menggigit proyek ini sekali, dan hasilnya bilah alat yang melipat
    pada layar yang sebenarnya cukup lebar.
*/
@media (max-width: 599.98px) {
    .mud-table-toolbar {
        height: auto;
        min-height: 0;
        flex-wrap: wrap;
        row-gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Pengganjal yang mendorong isi ke kanan tidak berguna ketika barisnya melipat. */
    .mud-table-toolbar .mud-spacer {
        display: none;
    }
}

@media (max-width: 599.98px) {
    /*
        Deretan mendatar melipat pada ponsel.

        MudStack baris tidak pernah melipat: tombol, sakelar berlabel panjang, dan tombol
        unduh berdiri berdampingan sampai melewati tepi layar. Pada layar lebar itu benar
        — barisnya memang muat — sehingga cacatnya hanya terlihat oleh yang membukanya
        dari ponsel.
    */
    .mud-main-content .d-flex.flex-row,
    .mud-stack-row {
        flex-wrap: wrap;
    }

    /*
        Bilah tab menggulir di dalam dirinya sendiri, bukan menyeret halamannya. Selisih
        beberapa piksel saja sudah cukup membuat seluruh halaman bergeser saat disentuh,
        dan yang bergeser terasa seperti halaman yang rusak.
    */
    .mud-tabs-toolbar {
        max-width: 100%;
        overflow-x: auto;
    }
}

/*
    Garis atas isian: tombol dan sakelar yang berdiri sebaris dengan isian.

    MudBlazor menengahkan isi tiap petak grid. Selama seluruh petaknya sama tinggi itu
    benar — tetapi isian yang punya keterangan di bawahnya menjadi lebih tinggi daripada
    tetangganya, dan tombol di sebelahnya turun mengikuti tengah petak yang tinggi itu.
    Yang terlihat: tombol menggantung 43 piksel di bawah garis isian, sakelar 8 piksel di
    atasnya, dan barisnya terbaca berantakan meski tidak ada yang rusak.

    Angkanya diukur dari KOTAK ISIAN, bukan dari tepi atas petak, dan bedanya menentukan.
    Tepi atas kotak isian memang berada 32 piksel di bawah tepi atas petak — tetapi 24 dari
    32 itu milik `padding-top` petaknya sendiri (MudBlazor memberi spacing 6 = 24 piksel),
    sedangkan margin tombol dihitung dari dalam padding itu. Yang tersisa untuk tombol
    karena itu hanya 8 piksel: margin atas `.mud-input-control` bermargin rapat. Diisi 32,
    tombolnya justru mendarat di 56 dan turun 24 piksel — lebih jauh daripada sebelum
    aturan ini ada. Diukur di peramban 19 September 2026 terhadap CSS MudBlazor 9.8 yang
    sungguh dimuat panel, bukan dihitung di atas kertas.

    8 piksel juga tidak bergantung pada Spacing petaknya: keduanya sama-sama dihitung dari
    dalam padding, sehingga grid Spacing="2" pun ikut lurus tanpa angka kedua.

    Isian bermargin normal menaruh kotaknya 16 piksel di bawah, bukan 8; untuk itu ada
    kelas cabinet-garis-isian-longgar. Keduanya dijaga oleh sapuan kesejajaran yang
    membandingkan tepi atas kotak tiap kendali pada seluruh halaman panel.

    SAKELAR DAN KOTAK CENTANG BUKAN ANAK LANGSUNG PETAKNYA. MudBlazor membungkus
    keduanya dalam `div.mud-input-control.mud-input-control-boolean-input`, sehingga
    `.mud-grid-item > .mud-switch` tidak pernah cocok dengan apa pun — pemilih yang
    sah, aturan yang tidak pernah berlaku, dan tidak ada galat di mana pun yang
    mengatakannya. Yang digeser karena itu pembungkusnya. Pemilih `.mud-switch` dan
    `.mud-checkbox` ditinggalkan sebagai cadangan bila kelak dipakai tanpa pembungkus.
*/
.cabinet-content .mud-grid > .mud-grid-item.d-flex.align-center > .mud-button-root,
.cabinet-content .mud-grid > .mud-grid-item.d-flex.align-center > .mud-input-control-boolean-input,
.cabinet-content .mud-grid > .mud-grid-item.d-flex.align-center > .mud-switch,
.cabinet-content .mud-grid > .mud-grid-item.d-flex.align-center > .mud-checkbox {
    align-self: flex-start;
    margin-top: 8px;
}

/* Sakelar yang berdiri sendiri di petaknya, bersebelahan dengan isian bermargin rapat. */
.cabinet-content .mud-grid > .mud-grid-item > .mud-input-control-boolean-input,
.cabinet-content .mud-grid > .mud-grid-item > .mud-switch {
    margin-top: 8px;
}

/*
    Kedua kelas penolong di bawah WAJIB ikut menyebut .d-flex.align-center pada
    pemilihnya. Tanpa itu keduanya kalah kekhususan terhadap aturan di atas — empat
    kelas lawan lima — sehingga kelasnya boleh dipasang di markup dan tetap tidak
    mengubah apa pun. Gagalnya diam-diam: tidak ada galat, hanya baris yang tetap
    tidak lurus. Pemilih tanpa .d-flex disimpan sebagai cadangan bagi petak yang
    kelak dipakai tanpa d-flex.
*/
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar.d-flex.align-center > .mud-button-root,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar.d-flex.align-center > .mud-input-control-boolean-input,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar.d-flex.align-center > .mud-switch,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar.d-flex.align-center > .mud-checkbox,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar > .mud-button-root,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-garis-isian-longgar > .mud-input-control-boolean-input {
    margin-top: 16px;
}

/* Petak yang isinya memang bukan isian — dua tombol berdampingan, misalnya — dikecualikan. */
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian.d-flex.align-center > .mud-button-root,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian.d-flex.align-center > .mud-input-control-boolean-input,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian.d-flex.align-center > .mud-switch,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian.d-flex.align-center > .mud-checkbox,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian > .mud-button-root,
.cabinet-content .mud-grid > .mud-grid-item.cabinet-tanpa-garis-isian > .mud-input-control-boolean-input {
    align-self: center;
    margin-top: 0;
}

/*
    Keadaan aktif atau nonaktif pada baris tabel (komponen KeadaanAktif).

    Warnanya dicampur, bukan ditanam. Hijau merek yang dipilih pialang berkontras
    2,34:1 di atas putih — pada lambang sakelar sekecil itu ia terbaca kelabu, sama
    seperti keadaan mati, dan itulah cacat yang dilaporkan pemiliknya. Mengganti
    warna mereknya bukan jawabannya: warna itu pilihan orang, bukan kekeliruan.

    Yang dicampurkan adalah warna TULISAN tema, bukan hitam. Tulisan tema gelap di
    tampilan terang dan putih di tampilan gelap, sehingga campuran yang sama
    menggelapkan hijaunya di atas latar putih dan menerangkannya di atas latar hitam
    — satu aturan, dua tampilan, tanpa warna kedua yang harus dijaga sendiri.
*/
.cabinet-keadaan {
    align-items: center;
    display: inline-flex;
    gap: .25rem;
    white-space: nowrap;
}

.cabinet-keadaan.aktif {
    color: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-text-primary));
}

.cabinet-keadaan.mati {
    color: var(--mud-palette-text-secondary);
}

/*
    Katanya, bukan sekadar warnanya. Inilah bagian yang benar-benar menjawab
    laporan itu: kata "Aktif" dan "Nonaktif" berbeda pada layar apa pun, pada
    pencetakan hitam putih, dan bagi orang yang tidak membedakan hijau dari kelabu.
*/
.cabinet-keadaan-lencana {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .45rem;
}

/* Yang aktif terisi, yang mati hanya bergaris: bedanya terbaca sebelum warnanya dibaca. */
.cabinet-keadaan.aktif .cabinet-keadaan-lencana {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
}

.cabinet-keadaan.mati .cabinet-keadaan-lencana {
    background: transparent;
    border-color: var(--mud-palette-lines-inputs);
}

/*
    Borang yang sedang menyunting sebuah baris.

    Sorotan tipis di tepinya, bukan bingkai tebal: yang dituju hanya memberi tahu
    bahwa halaman ini sedang memegang sesuatu, dan kalimatnya sendiri sudah berdiri
    di dalam borangnya.
*/
.cabinet-borang-menyunting {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

/*
    Tombol ikon yang berdampingan dengan isian di dalam sel tabel.

    Barisnya memakai align-center, dan itu benar sampai isiannya punya keterangan di
    bawahnya: tinggi barisnya lalu ditentukan isian BESERTA keterangannya, sehingga
    tombolnya turun jauh di bawah garis tengah kotak isiannya. Terukur pada Tipe Akun
    19 September 2026: kotak isian berpusat di 576, tombolnya di 588 — dua belas piksel
    di bawahnya, cukup untuk terbaca miring.

    Delapan piksel adalah selisih setengah tinggi keduanya (43 lawan 26), dan angka yang
    sama dipakai aturan garis isian di atas: keduanya menjawab hal yang sama — kendali
    tanpa label dan tanpa keterangan tidak akan pernah sebaris dengan yang punya keduanya
    kecuali diberi jarak itu.
*/
.cabinet-content .d-flex.align-center > .mud-input-control + .mud-icon-button,
.cabinet-content .d-flex.align-center > .mud-input-control + .mud-button-root {
    align-self: flex-start;
    margin-top: 8px;
}

/*
    Pilihan dan pelengkap-otomatis membungkus dirinya satu lapis lebih dalam, sehingga
    kotak isiannya berdiri 4 piksel di bawah tepi pembungkusnya. Jaraknya karena itu 12,
    bukan 8 — diukur pada Tipe Akun: kotak isian berpusat di 444, dan tombol setinggi 26
    piksel berpusat di titik yang sama bila tepinya mulai 12 piksel dari atas.
*/
.cabinet-content .d-flex.align-center > .mud-select + .mud-icon-button,
.cabinet-content .d-flex.align-center > .mud-autocomplete + .mud-icon-button,
.cabinet-content .d-flex.align-center > .mud-select + .mud-button-root,
.cabinet-content .d-flex.align-center > .mud-autocomplete + .mud-button-root {
    align-self: flex-start;
    margin-top: 12px;
}

/*
    Warna merek sebagai TULISAN, di kedua tampilan.

    Palet gelap memakai warna merek yang sama persis dengan palet terang: warna yang
    dipilih pialang supaya enak di atas putih. Sebagai LATAR (tombol dan chip Filled)
    ia benar di kedua tampilan; sebagai warna HURUF di atas hitam ia kehilangan
    kontras. Keping "1,50 lot settle" berwarna primer nyaris tenggelam pada tangkapan
    layar pemilik 22 September 2026: "saat menu dark harus dibuat tetap jelas."

    Aturannya sama dengan .cabinet-keadaan di atas: dicampur dengan warna tulisan tema,
    bukan diberi warna kedua khusus tampilan gelap yang harus dijaga sendiri. Tulisan
    tema gelap di tampilan terang dan putih di tampilan gelap, sehingga campuran yang
    sama menggelapkan merek di atas putih dan menerangkannya di atas hitam.

    Yang dijangkau hanyalah pemakaian sebagai huruf: chip Text dan Outlined, kelas
    utilitas .mud-*-text (MudText, MudIcon, MudLink, MudIconButton berwarna), tombol
    Text dan Outlined, dan MudAlert Text — yang terakhir memakai turunan "darken"
    merek, yang di tampilan gelap justru makin gelap. Bilah sisi dikecualikan: latarnya
    gelap di KEDUA tampilan dan warnanya diatur sendiri di atas. !important mengikuti
    !important pada kelas utilitas MudBlazor; :is() memberi kekhususan yang cukup
    untuk menang atasnya.
*/
:root {
    --cabinet-campur-merek: 62%;
}

:is(.mud-chip-text.mud-chip-color-primary, .mud-chip-outlined.mud-chip-color-primary,
    .mud-primary-text, .mud-button-text.mud-button-text-primary,
    .mud-button-outlined.mud-button-outlined-primary, .mud-alert-text-primary):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-secondary, .mud-chip-outlined.mud-chip-color-secondary,
    .mud-secondary-text, .mud-button-text.mud-button-text-secondary,
    .mud-button-outlined.mud-button-outlined-secondary, .mud-alert-text-secondary):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-secondary) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-info, .mud-chip-outlined.mud-chip-color-info,
    .mud-info-text, .mud-button-text.mud-button-text-info,
    .mud-button-outlined.mud-button-outlined-info, .mud-alert-text-info):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-info) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-success, .mud-chip-outlined.mud-chip-color-success,
    .mud-success-text, .mud-button-text.mud-button-text-success,
    .mud-button-outlined.mud-button-outlined-success, .mud-alert-text-success):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-success) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-warning, .mud-chip-outlined.mud-chip-color-warning,
    .mud-warning-text, .mud-button-text.mud-button-text-warning,
    .mud-button-outlined.mud-button-outlined-warning, .mud-alert-text-warning):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-error, .mud-chip-outlined.mud-chip-color-error,
    .mud-error-text, .mud-button-text.mud-button-text-error,
    .mud-button-outlined.mud-button-outlined-error, .mud-alert-text-error):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

:is(.mud-chip-text.mud-chip-color-dark, .mud-chip-outlined.mud-chip-color-dark,
    .mud-dark-text, .mud-button-text.mud-button-text-dark,
    .mud-button-outlined.mud-button-outlined-dark):not(.mud-drawer *) {
    color: color-mix(in srgb, var(--mud-palette-dark) var(--cabinet-campur-merek), var(--mud-palette-text-primary)) !important;
}

/*
    Tombol Text dan Outlined tampil sebagai tombol PENUH warna, seperti Tugas baru dan Campaign
    baru: latar warna, huruf putih, bayangan tipis. Pemilik, 29 September 2026: atas Daftarkan
    dan Tautkan di Campaign ("kenapa ga pake common button yg berwarna penuh aja"), lalu atas
    "Lihat yang akan ditautkan" di Atribusi yang berbingkai tanpa warna ("masih banyak yg bgni,
    jelek ... buat berwarna aja"). Jangkauannya isi halaman (.cabinet-content), dialog, dan
    halaman saku Sales di HP (.saku-isi: Telepon, WhatsApp, dan Cari pada Lead Anda, 30 September
    2026). Satu aturan per warna palet memakai palet tema, jadi sama di kedua tampilan: warna
    merek sebagai LATAR memang benar di atas putih maupun hitam (catatan campuran merek di atas
    hanya untuk warna sebagai HURUF). Tombol tanpa warna (Default) di isi halaman ikut berwarna
    primer; di dialog ia tetap netral, latar tipis dan huruf tema, supaya Batal dan Tutup tidak
    menyamai Simpan. Tebal hurufnya sama dengan tombol Filled (500), supaya dua tombol
    bersebelahan yang satu Filled dan satu Text tidak tampak berbeda berat.

    Yang tidak disentuh adalah KENDALI, bukan tindakan: tombol ikon bulat, bilah sisi, nomor
    halaman tabel, tombol naik/turun kolom angka (pemilik 30 September 2026: "kalau ini ga perlu
    di ksh warna biru"), pilihan MudToggleGroup dan tombol di dalam MudButtonGroup. Dua yang
    terakhir menandai pilihan yang aktif dengan Filled dan sisanya Outlined: mewarnai yang
    Outlined membuat semua pilihan tampak terpilih (Setoran dan Penarikan: Menunggu, Selesai,
    Semua; Pohon IB: grafis atau daftar). Tombol Filled sudah berwarna dari MudBlazor.

    Kekhususan tiap aturan warna (empat kelas: lingkup, mud-button-root, ragam-warna, dan satu
    :not berisi daftar pengecualian) melampaui aturan campuran merek di atas (tiga kelas), dan
    keduanya !important, jadi hurufnya putih.
*/
:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-primary, .mud-button-outlined-primary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-primary, .mud-button-outlined-primary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-primary-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-secondary, .mud-button-outlined-secondary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-secondary, .mud-button-outlined-secondary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-secondary-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-tertiary, .mud-button-outlined-tertiary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-tertiary, .mud-button-outlined-tertiary):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-tertiary-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-info, .mud-button-outlined-info):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-info);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-info, .mud-button-outlined-info):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-info-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-success, .mud-button-outlined-success):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-success, .mud-button-outlined-success):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-success-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-warning, .mud-button-outlined-warning):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-warning, .mud-button-outlined-warning):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-warning-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-error, .mud-button-outlined-error):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-error, .mud-button-outlined-error):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-error-darken);
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-dark, .mud-button-outlined-dark):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-dark);
    border-color: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(.mud-button-text-dark, .mud-button-outlined-dark):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-dark-darken);
}

:is(.cabinet-content, .saku-isi) .mud-button-root:is(.mud-button-text-default, .mud-button-outlined-default):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text) !important;
    box-shadow: var(--mud-elevation-2);
    font-weight: 500;
}

:is(.cabinet-content, .saku-isi) .mud-button-root:is(.mud-button-text-default, .mud-button-outlined-default):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: var(--mud-palette-primary-darken);
}

.mud-dialog .mud-button-root:is(.mud-button-text-default, .mud-button-outlined-default):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    border-color: transparent;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: none;
    font-weight: 500;
}

.mud-dialog .mud-button-root:is(.mud-button-text-default, .mud-button-outlined-default):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *):hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

/* Nonaktif: MudButton 9.8 hanya memberi atribut disabled, bukan kelas mud-disabled (kelas itu
   hanya dipakai butir breadcrumb), jadi yang dicocokkan :disabled; .mud-disabled ikut dijaga
   untuk komponen yang memakainya. Tanpa ini tombol Atur target bulan lalu tampak hidup padahal
   mati (tinjauan Razor 29 September 2026). Paling akhir supaya menang atas aturan warna di atas. */
:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:is(:disabled, .mud-disabled):is(.mud-button-text, .mud-button-outlined):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    background-color: var(--mud-palette-action-disabled-background);
    border-color: transparent;
    color: var(--mud-palette-action-disabled) !important;
    box-shadow: none;
}

/*
    Tombol tidak pernah menempel. Tanpa latar, dua tombol yang ditumpuk di sel tabel sempit
    tidak tampak bersentuhan; dengan latar penuh tampak satu balok. Sel tabel membungkus tombol
    seperti huruf, tanpa jarak antarbaris: Bukan orang ini dan Dipastikan sama di Penapisan,
    Dompet dan Nonaktifkan di Daftar IB, Ulangi kaki platform dan Kembalikan ke dompet di
    Pemindahan Dompet, Bukukan dan Tolak di Setoran dan Penarikan, dan lainnya. Pemilik,
    30 September 2026: "jangan sampe nempel ga ada batas begini ... cek semua halaman", dan
    "bisa kecilin common buttonnya dikit". Jarak atas dan bawah pada setiap tombol memberi batas
    di wadah apa pun; di sel tabel tombolnya sedikit lebih kecil, dan dua tombol atau lebih
    ditumpuk sama lebar (aturan berikutnya). Diperiksa di seluruh halaman panel pada 1280, 768, dan 375 px dengan pengukuran
    jarak antarpasangan tombol yang terlihat.
*/
:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    margin-block: 3px;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) td .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    font-size: .75rem;
    line-height: 1.5;
    padding: 3px 10px;
}

/* Dua tombol bertetangga di dalam sel tabel yang tidak ditumpuk (baris MudStack Spacing=1 di
   goAML dan Pengkinian, jarak 4 px): 2 px lagi supaya berjarak 6 px. Tumpukan sama lebar di bawah
   menetralkannya lewat margin-inline 0 !important. */
:is(.cabinet-content, .mud-dialog, .saku-isi) td .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) + .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    margin-inline-start: 2px;
}

/*
    Sel tabel yang berisi dua tombol atau lebih menumpuk tombolnya sama lebar dan segaris kedua
    tepinya. Dibiarkan membungkus seperti huruf, tombol kedua turun ke baris berikutnya dengan
    lebar lain dan jarak kirinya ikut turun, jadi tidak ada tepi yang segaris: pemilik,
    30 September 2026, pada Bukan orang ini dan Dipastikan sama di Penapisan ("ga sejajar").
    Ditumpuk, setiap baris tabel tampak sama apa pun panjang labelnya.

    Lebarnya selebar tombol terlebar, bukan selebar kolom: width 1% pada sel membuat kolomnya
    menyusut sampai isinya, dan nowrap menjaga label tetap satu baris sehingga yang menentukan
    lebar adalah label terpanjang. Tanpa itu, Setujui dan bukukan dan Tolak di Setoran dan
    Penarikan terbentang 370 px karena kolomnya lebar. Hanya sel yang anak elemennya tombol, dan
    boleh keterangan kecil (Disiapkan oleh ...) yang turun di bawahnya; sel berisi elemen lain
    dibiarkan, supaya kalimatnya tidak diperas menjadi satu kata per baris. margin-inline 0 !important
    menetralkan kelas jarak ml-1 dan ms-2 yang dipasang untuk tombol sebaris; margin-block 3px 6px
    memberi jarak tumpuk 6 px, sebab margin vertikal dua blok bertetangga saling melebur.
    Keterangannya boleh membungkus: sel lama menanam white-space:nowrap sebaris untuk tombol
    yang dulu berdampingan, dan tanpa ini "Disiapkan oleh ..." memaksa kolom selebar kalimatnya.

    Hanya saat tabel tampil PENUH: tiap blok adalah kebalikan persis media query runtuh MudBlazor
    9.8 (xs 600, sm 960, md 1280, lg 1920, xl 2560 px; xxl runtuh dari 2560 px ke atas). Tabel yang
    runtuh menjadi kartu sudah menata tombolnya sebagai bilah rata kanan (aturan kartu di atas).
*/
@media not all and (max-width: 600px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xs-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xs-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xs-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

@media not all and (max-width: 960px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-sm-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-sm-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-sm-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

@media not all and (max-width: 1280px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-md-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-md-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-md-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

@media not all and (max-width: 1920px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-lg-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-lg-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-lg-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

@media not all and (max-width: 2560px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

@media not all and (min-width: 2560px) {
    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xxl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
        width: 1%;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xxl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
        display: flex;
        width: 100%;
        white-space: nowrap;
        margin-inline: 0 !important;
        margin-block: 3px 6px;
    }

    :is(.cabinet-content, .mud-dialog, .saku-isi) .mud-table.mud-xxl-table td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
        white-space: normal;
    }
}

/* Tabel yang tidak pernah runtuh (Breakpoint.None) dan tabel sederhana. */
:is(.cabinet-content, .mud-dialog, .saku-isi) :is(.mud-table:not(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table), .mud-simple-table) td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) {
    width: 1%;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) :is(.mud-table:not(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table), .mud-simple-table) td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-button-root:not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    display: flex;
    width: 100%;
    white-space: nowrap;
    margin-inline: 0 !important;
    margin-block: 3px 6px;
}

:is(.cabinet-content, .mud-dialog, .saku-isi) :is(.mud-table:not(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table), .mud-simple-table) td:has(> .mud-button-root:not(.mud-icon-button) ~ .mud-button-root:not(.mud-icon-button)):not(:has(> :not(.mud-button-root, .mud-typography))) > .mud-typography {
    white-space: normal;
}

/*
    Tombol tidak boleh diperas lebih sempit daripada isinya. MudBlazor memberi tombol overflow
    hidden dan min-width 64 px; di baris flex tanpa pembungkus (MudStack Row bawaannya nowrap di
    layar lebar) tombol di sebelah kalimat panjang diperas sampai hurufnya terpotong: "SEGARKA"
    pada tombol Segarkan di Broadcast, tangkapan layar pemilik 29 September 2026 ("kepotong juga
    selain ga berwarna"), terukur 64 px untuk isi 75 px pada 600, 800, dan 1100 px. min-width:
    min-content menahan tombol di lebar kata terpanjang beserta ikonnya: label satu kata tidak
    pernah terpotong, label beberapa kata membungkus menjadi dua baris alih-alih terpotong, dan
    tombol tetap boleh menyusut di sebelah kolom isian sehingga baris tidak meluap dari layar.
    Dicoba lebih dulu flex-shrink: 0 dan max-width: 100%. Yang pertama membuat tombol di
    sebelah isian meluap dari layar telepon (Tarik sekarang, Muat tarif), yang kedua memeras
    tombol Dompet di kartu tabel telepon menjadi 64 px karena persen di sel grid; keduanya dibuang.
    Diperiksa pada seluruh halaman panel di lebar 375, 600, 800, 1100, dan 1500 px lewat pengukuran
    tepi huruf terhadap tepi tombol (kontrol positif: tanpa aturan ini Segarkan terpotong 13 px).
    Kendali yang dikecualikan di atas dan tombol selebar penuh tidak disentuh.
*/
:is(.cabinet-content, .mud-dialog, .saku-isi) .mud-button-root:not(.mud-button-full-width):not(.mud-icon-button, .mud-drawer *, .mud-pagination *, .mud-input-numeric-spin *, .mud-toggle-item, .mud-button-group-root *) {
    min-width: min-content;
}

/*
    Ikon di kolom isian bergambar berwarna, seperti menu dan Beranda. Pemilik, 30 September
    2026, menunjuk kalender abu-abu di kolom tanggal Kinerja Sales: "ada yg berwarna kasih yg
    berwarna biar lbh hidup". Gambarnya dari kumpulan Fluent yang sama dengan laci
    (media/ikon): kalender untuk tanggal, stopwatch untuk jam, kaca pembesar untuk pencarian,
    tautan untuk alamat.

    Satu aturan di sini, bukan AdornmentIcon per halaman: ia menjangkau setiap kolom tanggal dan
    jam yang sudah ada (lebih dari enam puluh), setiap kolom pencarian termasuk bilah atas, dan
    yang ditambahkan kemudian, tanpa ada halaman yang lupa. Yang dicocokkan adalah garis ikon
    bawaan MudBlazor, yaitu awalan atribut d pada path-nya. IkonIsianBergambarTests memeriksa
    setiap awalan terhadap Icons.Material.Filled di MudBlazor yang terpasang, jadi pembaruan
    MudBlazor yang mengganti garisnya memerahkan uji, alih-alih diam-diam mengembalikan ikon
    abu-abu.

    Per ikon cukup satu aturan: gambarnya, garis yang disembunyikan, dan rupa saat kolomnya
    nonaktif. Panah pilihan, tombol hapus, dan mata kata sandi tetap garis, karena itu kendali,
    bukan gambar.
*/
/* Event (kolom tanggal) */
.mud-input-adornment svg.mud-icon-root:has(> path[d^="M17 12h-5v5h5v-5zM16 1v2H8V1H6"]) {
    --gambar-isian: url("media/ikon/kalender.png");
    --garis-isian: 0;
    --redup-isian: grayscale(1) opacity(.5);
}

/* AccessTime (kolom jam) */
.mud-input-adornment svg.mud-icon-root:has(> path[d^="M11.99 2C6.47 2 2 6.48 2 12s4.47"]) {
    --gambar-isian: url("media/ikon/stopwatch.png");
    --garis-isian: 0;
    --redup-isian: grayscale(1) opacity(.5);
}

/* Search (kolom pencarian) */
.mud-input-adornment svg.mud-icon-root:has(> path[d^="M15.5 14h-.79l-.28-.27C15.41"]) {
    --gambar-isian: url("media/ikon/kaca_pembesar.png");
    --garis-isian: 0;
    --redup-isian: grayscale(1) opacity(.5);
}

/* Link (kolom alamat) */
.mud-input-adornment svg.mud-icon-root:has(> path[d^="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7"]) {
    --gambar-isian: url("media/ikon/tautan.png");
    --garis-isian: 0;
    --redup-isian: grayscale(1) opacity(.5);
}

.mud-input-adornment svg.mud-icon-root {
    background: var(--gambar-isian, none) center / contain no-repeat;
}

.mud-input-adornment svg.mud-icon-root > path {
    opacity: var(--garis-isian, 1);
}

.mud-disabled .mud-input-adornment svg.mud-icon-root {
    filter: var(--redup-isian, none);
}

/*
    Ikon tombol dan keping bergambar berwarna — mockup "Usulan A" pemilik (30 September 2026):
    gambar 3D yang sama dengan menu dibawa ke tombol Simpan, Hapus, Segarkan, Cari, Setujui,
    Tolak, Cetak, dan kawan-kawannya. Caranya sama persis dengan ikon kolom isian di atas:
    satu aturan per ikon yang mencocokkan awalan garis ikon bawaan MudBlazor, sehingga 471
    tombol yang sudah ada berubah tanpa satu halaman pun disunting, dan yang ditambahkan
    kemudian ikut. Halaman tetap menyebut Icons.Material — kosakata tombolnya tidak berubah —
    dan CSS inilah yang menggambarnya. IkonTombolBergambarTests memeriksa tiap awalan
    terhadap MudBlazor yang terpasang.

    kendali bingkai, bukan perbuatan yang punya gambar.

    Pemilihnya path KETURUNAN (':has(path[d^=…])'), bukan anak langsung: ikon Material yang
    lebih baru (Login, Science, Paid, Download) membungkus garisnya dalam <g>, dan dengan
    '> path' tombol Masuk tetap bergaris walau aturannya ada — terlihat pada potret layar
    masuk, bukan pada uji, sebab uji hanya membandingkan teks CSS dengan teks ikon.
*/
/* Save */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2"]) {
    --gambar-tombol: url("media/ikon/disket.png");
    --garis-tombol: 0;
}

/* Search */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11"]) {
    --gambar-tombol: url("media/ikon/kaca_pembesar.png");
    --garis-tombol: 0;
}

/* Add */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"]) {
    --gambar-tombol: url("media/ikon/tambah.png");
    --garis-tombol: 0;
}

/* PlaylistAdd */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M14,10H3v2h11V10z M14,6H3v2h11V6z M18,14"]) {
    --gambar-tombol: url("media/ikon/tambah.png");
    --garis-tombol: 0;
}

/* PersonAdd */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1"]) {
    --gambar-tombol: url("media/ikon/tambah.png");
    --garis-tombol: 0;
}

/* PersonAddAlt */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12"]) {
    --gambar-tombol: url("media/ikon/tambah.png");
    --garis-tombol: 0;
}

/* PersonAddAltFilled */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M13,8c0-2.21-1.79-4-4-4S5,5.79,5,8s1.79,"]) {
    --gambar-tombol: url("media/ikon/tambah.png");
    --garis-tombol: 0;
}

/* Refresh */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 "]) {
    --gambar-tombol: url("media/ikon/panah_putar.png");
    --garis-tombol: 0;
}

/* Info */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h"]) {
    --gambar-tombol: url("media/ikon/informasi.png");
    --garis-tombol: 0;
}

/* Delete */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6"]) {
    --gambar-tombol: url("media/ikon/tong_sampah.png");
    --garis-tombol: 0;
}

/* Call */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c"]) {
    --gambar-tombol: url("media/ikon/gagang_telepon.png");
    --garis-tombol: 0;
}

/* PhoneCallback */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M20 15.51c-1.24 0-2.45-.2-3.57-.57-.1-.0"]) {
    --gambar-tombol: url("media/ikon/gagang_telepon.png");
    --garis-tombol: 0;
}

/* UploadFile */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1."]) {
    --gambar-tombol: url("media/ikon/map_terbuka.png");
    --garis-tombol: 0;
}

/* Link */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2"]) {
    --gambar-tombol: url("media/ikon/tautan.png");
    --garis-tombol: 0;
}

/* Edit */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3"]) {
    --gambar-tombol: url("media/ikon/pensil.png");
    --garis-tombol: 0;
}

/* Tune */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8"]) {
    --gambar-tombol: url("media/ikon/penggeser.png");
    --garis-tombol: 0;
}

/* ShowChart */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41"]) {
    --gambar-tombol: url("media/ikon/grafik_naik.png");
    --garis-tombol: 0;
}

/* Insights */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,"]) {
    --gambar-tombol: url("media/ikon/grafik_naik.png");
    --garis-tombol: 0;
}

/* TrendingUp */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3."]) {
    --gambar-tombol: url("media/ikon/grafik_naik.png");
    --garis-tombol: 0;
}

/* Send */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M2.01 21L23 12 2.01 3 2 10l15 2-15 2"]) {
    --gambar-tombol: url("media/ikon/amplop.png");
    --garis-tombol: 0;
}

/* Paid */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s1"]) {
    --gambar-tombol: url("media/ikon/koin.png");
    --garis-tombol: 0;
}

/* EventAvailable */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M16.53 11.06L15.47 10l-4.88 4.88-2.12-2."]) {
    --gambar-tombol: url("media/ikon/kalender.png");
    --garis-tombol: 0;
}

/* CheckCircle */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15"]) {
    --gambar-tombol: url("media/ikon/centang.png");
    --garis-tombol: 0;
}

/* Check */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1"]) {
    --gambar-tombol: url("media/ikon/centang.png");
    --garis-tombol: 0;
}

/* Close */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 "]) {
    --gambar-tombol: url("media/ikon/silang.png");
    --garis-tombol: 0;
}

/* Cancel */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 1"]) {
    --gambar-tombol: url("media/ikon/silang.png");
    --garis-tombol: 0;
}

/* Block */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c"]) {
    --gambar-tombol: url("media/ikon/silang.png");
    --garis-tombol: 0;
}

/* Print */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4"]) {
    --gambar-tombol: url("media/ikon/pencetak.png");
    --garis-tombol: 0;
}

/* Download */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L1"]) {
    --gambar-tombol: url("media/ikon/unduh.png");
    --garis-tombol: 0;
}

/* PictureAsPdf */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2"]) {
    --gambar-tombol: url("media/ikon/dokumen.png");
    --garis-tombol: 0;
}

/* ErrorOutline */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6."]) {
    --gambar-tombol: url("media/ikon/peringatan.png");
    --garis-tombol: 0;
}

/* ReportProblem */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h"]) {
    --gambar-tombol: url("media/ikon/peringatan.png");
    --garis-tombol: 0;
}

/* CloudOff */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M24 15c0-2.64-2.05-4.78-4.65-4.96C18.67 "]) {
    --gambar-tombol: url("media/ikon/awan.png");
    --garis-tombol: 0;
}

/* Archive */
/* Undo → panah_ulang: mengembalikan ke dompet, menarik kembali pengajuan. */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l"]) {
    --gambar-tombol: url("media/ikon/panah_ulang.png");
    --garis-tombol: 0;
}
/* Login → pintu: tombol masuk pada layar masuk, setel sandi, dan ganti sandi. */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L"]) {
    --gambar-tombol: url("media/ikon/pintu.png");
    --garis-tombol: 0;
}
/* Home → rumah: kembali ke Beranda dari halaman akses ditolak. */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"]) {
    --gambar-tombol: url("media/ikon/rumah.png");
    --garis-tombol: 0;
}
/* Science → tabung_reaksi: tombol Uji pada kategori produk. */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M19.8,18.4L14,10.67V6.5l1.35-1.69C15.61,"]) {
    --gambar-tombol: url("media/ikon/tabung_reaksi.png");
    --garis-tombol: 0;
}

:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 "]) {
    --gambar-tombol: url("media/ikon/paket.png");
    --garis-tombol: 0;
}

/* Notifications */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2z"]) {
    --gambar-tombol: url("media/ikon/lonceng.png");
    --garis-tombol: 0;
}

/* HourglassEmpty */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22"]) {
    --gambar-tombol: url("media/ikon/jam_pasir.png");
    --garis-tombol: 0;
}

/*
    Dua gambar untuk keping keadaan yang disebar ke seluruh panel (GambarKeadaan, 3 Oktober
    2026): "dijeda" memakai stopwatch lewat ikon kolom jam, "draf" memakai memo lewat ikon catatan
    kotak peringatan — awalan yang sama dengan dua blok lain di berkas ini, jadi uji yang sama
    menjaganya terhadap MudBlazor yang terpasang.
*/
/* AccessTime → stopwatch (dijeda) */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M11.99 2C6.47 2 2 6.48 2 12s4.47"]) {
    --gambar-tombol: url("media/ikon/stopwatch.png");
    --garis-tombol: 0;
}

/* EventNote (garis) → memo (draf). Awalannya satu huruf lebih panjang daripada aturan kotak
   peringatan di bawah, supaya penghitung awalan IkonPeringatanBergambarTests tidak ikut menghitungnya. */
:is(.mud-button-root, .mud-chip) svg.mud-icon-root:has(path[d^="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c"]) {
    --gambar-tombol: url("media/ikon/memo.png");
    --garis-tombol: 0;
}

:is(.mud-button-root, .mud-chip) svg.mud-icon-root {
    background: var(--gambar-tombol, none) center / contain no-repeat;
}

:is(.mud-button-root, .mud-chip) svg.mud-icon-root path {
    opacity: var(--garis-tombol, 1);
}

/* Tombol nonaktif tetap tampak nonaktif: gambarnya ikut kelabu. */
.mud-button-root.mud-disabled svg.mud-icon-root,
.mud-button-root:disabled svg.mud-icon-root {
    filter: grayscale(1) opacity(.5);
}

/*
    Gambar orang (satu_orang, dua_orang — Pipeline, Daftar Nasabah, Nasabah Kelolaan, Pengguna)
    hampir hitam seluruhnya, dan di tampilan gelap ia tenggelam di laci maupun di ubin Beranda
    (sisa Beranda bergambar 1.0.69, "gambar orang tenggelam"). PNG-nya tidak dicat ulang: yang
    diberi adalah cahaya tipis berwarna TULISAN tema di sekeliling bentuknya. Di tampilan gelap
    tulisannya putih, sehingga sosoknya terangkat dari latar; di tampilan terang tulisannya gelap,
    sehingga cahayanya nyaris tak terlihat di sekeliling sosok yang memang gelap. Satu aturan
    untuk kedua tampilan — cara yang sama dengan warna merek yang menjadi huruf di atas — dan
    warna gambarnya sendiri tidak disentuh. Laci memakai warna tulisan lacinya sendiri: lacinya putih
    bertulisan gelap di tampilan terang, berwarna bilah sisi bertulisan terang di tampilan gelap.
*/
svg.mud-icon-root:has(> image[href$="/satu_orang.png"], > image[href$="/dua_orang.png"]) {
    filter: drop-shadow(0 0 1px var(--mud-palette-text-primary))
        drop-shadow(0 0 3px color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent));
}

.cabinet-drawer svg.mud-icon-root:has(> image[href$="/satu_orang.png"], > image[href$="/dua_orang.png"]) {
    filter: drop-shadow(0 0 1px var(--mud-palette-drawer-text))
        drop-shadow(0 0 3px color-mix(in srgb, var(--mud-palette-drawer-text) 45%, transparent));
}

/*
    Ikon peringatan bergambar (Usulan A: "kotak peringatan — gambar kecil di kotak putih
    membulat"). MudAlert memasang ikon bergaris bawaannya menurut jenisnya; di sini hanya ikon
    BAWAAN itu yang diganti gambar 3D, dicocokkan lewat awalan garisnya seperti ikon tombol di
    atas, sehingga 300-an peringatan di seluruh panel berubah tanpa satu halaman pun disunting
    dan peringatan yang sengaja diberi ikon sendiri tidak ikut berubah. Kotaknya berlatar
    permukaan tema, jadi tetap terbaca di atas peringatan berwarna penuh dan di tampilan gelap.
    IkonPeringatanBergambarTests memeriksa tiap awalan terhadap MudBlazor yang terpasang.
*/
/* Info */
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48"]) {
    --gambar-peringatan: url("media/ikon/informasi.png");
}

/* Berhasil */
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0"]) {
    --gambar-peringatan: url("media/ikon/centang.png");
}

/* Peringatan */
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L"]) {
    --gambar-peringatan: url("media/ikon/peringatan.png");
}

/* Galat */
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6."]) {
    --gambar-peringatan: url("media/ikon/silang.png");
}

/* Catatan (tanpa jenis) */
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14"]) {
    --gambar-peringatan: url("media/ikon/memo.png");
}

.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48"]),
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0"]),
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L"]),
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6."]),
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14"]) {
    background: var(--gambar-peringatan) center / 76% no-repeat var(--mud-palette-surface);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48"]) path,
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0"]) path,
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L"]) path,
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6."]) path,
.mud-alert .mud-alert-icon svg.mud-icon-root:has(path[d^="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14"]) path {
    opacity: 0;
}

/* Kepala halaman bergambar (Usulan A): gambar butir menunya di samping judul. */
.cabinet-page-judul { align-items: center; display: flex; gap: .75rem; }
.cabinet-page-ikon { flex: none; height: 40px; width: 40px; }

/* Tabel kosong bergambar (Usulan A): konfeti — tidak ada pekerjaan itu kabar baik. */
.kosong-bergambar { align-items: center; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1rem; text-align: center; }
.kosong-bergambar-ikon { height: 44px; width: 44px; }



/* --- Pipeline: papan per tahap (1.0.47) ---------------------------------- */

/*
    Papan yang dinilai pertama kali oleh staf pemasaran pialang, jadi rupanya tenang:
    kolom berlatar abu tema, kartu berlatar permukaan, satu garis warna tahap di puncak
    kolom, dan tanda kecil yang hanya muncul bila ada sesuatu yang perlu dikerjakan
    (janji lewat, diam, belum ada persetujuan). Seluruh warna dari peubah tema — terang
    dan gelap memakai aturan yang sama — dan warna merek yang menjadi huruf dicampur ke
    arah warna tulisan, seperti chip dan tombol di bawah.
*/

.pipeline-alih {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}

.pipeline-alih button,
.pipeline-cepat button,
.pipeline-tahap-saku button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    gap: .35rem;
    line-height: 1.2;
    padding: .38rem .9rem;
}

.pipeline-alih button:hover,
.pipeline-cepat button:hover,
.pipeline-tahap-saku button:hover {
    color: var(--mud-palette-text-primary);
}

.pipeline-alih button.pipeline-aktif,
.pipeline-cepat button.pipeline-aktif,
.pipeline-tahap-saku button.pipeline-aktif {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-alih .mud-icon-root { font-size: 1.05rem; }

.pipeline-cepat,
.pipeline-tahap-saku {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.pipeline-cepat button,
.pipeline-tahap-saku button {
    border: 1px solid var(--mud-palette-lines-default);
}

.pipeline-cepat button.pipeline-aktif,
.pipeline-tahap-saku button.pipeline-aktif {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
}

.pipeline-hitung {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Bingkai papan menggulir ke samping pada jendela sempit-lebar; halamannya sendiri tidak. */
.pipeline-papan-bingkai {
    overflow-x: auto;
    padding-bottom: .5rem;
}

.pipeline-papan {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-auto-columns: minmax(236px, 1fr);
    grid-auto-flow: column;
}

.pipeline-kolom {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    border-top: 3px solid var(--pipeline-warna-tahap, var(--mud-palette-lines-default));
    display: flex;
    flex-direction: column;
    min-height: 14rem;
    min-width: 0;
}

.pipeline-kolom-baru { --pipeline-warna-tahap: var(--mud-palette-info); }
.pipeline-kolom-dihubungi { --pipeline-warna-tahap: var(--mud-palette-text-secondary); }
.pipeline-kolom-tertarik { --pipeline-warna-tahap: var(--mud-palette-warning); }
.pipeline-kolom-layak { --pipeline-warna-tahap: var(--mud-palette-success); }
.pipeline-kolom-didaftarkan { --pipeline-warna-tahap: var(--mud-palette-primary); }
.pipeline-kolom-ditutup { --pipeline-warna-tahap: var(--mud-palette-lines-default); }

.pipeline-kolom-kepala {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .65rem .8rem .55rem;
}

.pipeline-kolom-judul {
    align-items: center;
    color: var(--mud-palette-text-primary);
    display: flex;
    font-size: .86rem;
    font-weight: 600;
    gap: .5rem;
}

.pipeline-kolom-jumlah {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding: .05rem .5rem;
}

.pipeline-kolom-ringkas {
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    gap: .2rem .7rem;
    margin-top: .3rem;
}

.pipeline-kolom-diam {
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    font-weight: 600;
}

.pipeline-zona {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    min-height: 7rem;
    padding: .55rem;
    transition: background-color .12s;
}

/* Saat menyeret: kolom yang menerima ditandai garis putus-putus, yang tidak ditenangkan. */
.pipeline-zona.pipeline-boleh-jatuh {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: -5px;
}

.pipeline-zona.pipeline-tak-jatuh { opacity: .5; }

.pipeline-kosong-kolom {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    padding: 1.25rem .5rem;
    text-align: center;
}

.pipeline-lainnya {
    border-top: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    display: block;
    font-size: .75rem;
    padding: .55rem;
    text-align: center;
    text-decoration: none;
}

.pipeline-lainnya:hover {
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

/* Kartu */
.pipeline-kartu {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding: .6rem .65rem .45rem;
    transition: border-color .12s, box-shadow .12s;
}

.pipeline-kartu.pipeline-kartu-tetap { cursor: pointer; }

.pipeline-kartu:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
}

.pipeline-kartu-diseret {
    opacity: .6;
}

.pipeline-kartu-atas {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
}

/* Nama kartu adalah tombol (papan ketik dapat membuka kartu), tetapi rupanya tetap judul kartu:
   tanpa latar, bingkai, atau padding bawaan peramban. Cincin fokus hanya bagi papan ketik. */
.pipeline-kartu-nama {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    background: none;
    border: 0;
    border-radius: 2px;
    color: inherit;
    cursor: pointer;
    display: -webkit-box;
    flex: 1;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: 0;
    text-align: left;
}

.pipeline-kartu-nama:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pipeline-skor {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: .08rem .45rem;
}

.pipeline-skor-hangat {
    border-color: color-mix(in srgb, var(--mud-palette-info) 45%, transparent);
    color: color-mix(in srgb, var(--mud-palette-info) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-skor-panas {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 50%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-skor-prioritas {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    border-color: transparent;
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-kartu-nomor {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.pipeline-kartu-meta {
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    gap: .3rem;
}

.pipeline-kartu-pemegang {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.pipeline-kartu-tanda {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.pipeline-pil {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    gap: .2rem;
    line-height: 1.25;
    padding: .12rem .5rem;
    white-space: nowrap;
}

.pipeline-pil .mud-icon-root { font-size: .85rem; }
.pipeline-pil.pipeline-pil-ikon { padding: .12rem .3rem; }

.pipeline-pil-telat {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-pil-diam {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-pil-uang {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-success) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-pil-proses {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-info) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-pil-dibuka {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-kartu-bawah {
    align-items: center;
    display: flex;
    gap: .3rem;
    margin-top: .35rem;
    min-height: 1.75rem;
}

.pipeline-kartu-sela { flex: 1; }

/* Tombol bulat kecil: WhatsApp, Telepon, Ambil, Tutup — pranala murni atau tombol biasa. */
.pipeline-aksi {
    align-items: center;
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    height: 1.75rem;
    justify-content: center;
    min-width: 1.75rem;
    text-decoration: none;
}

.pipeline-aksi:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.pipeline-aksi:disabled { cursor: default; opacity: .5; }
.pipeline-aksi .mud-icon-root { font-size: 1rem; }

.pipeline-aksi-teks {
    font-size: .72rem;
    font-weight: 600;
    padding: 0 .7rem;
}

.pipeline-baris-aksi {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

.pipeline-kontak-tersembunyi {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.pipeline-daftar-saku {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Papan kosong: satu kalimat dan satu tombol, bukan kolom-kolom kosong. */
.pipeline-kosong {
    align-items: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    padding: 3rem 1rem;
    text-align: center;
}

.pipeline-kosong .pipeline-kosong-ikon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
    opacity: .6;
}

/* Rincian lead */
.pipeline-rincian-kontak {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pipeline-pindah-tombol {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pipeline-perkiraan {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: .75rem .85rem;
}

.pipeline-perkiraan-isian {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pipeline-perkiraan-isian > .mud-input-control { flex: 1 1 10rem; margin-top: 0; }
.pipeline-perkiraan-isian > .pipeline-perkiraan-uang { flex: 0 0 7.5rem; }



/* --- Tugas & Follow-up (1.0.48) ------------------------------------------ */

/*
    Rutinitas pagi seorang Sales, jadi rupanya setenang papan Pipeline dan memakai bahasa
    rupanya: keping saringan yang sama, tombol bulat kecil yang sama, merah hanya untuk yang
    terlambat. Seluruh warna dari peubah tema — terang dan gelap satu aturan — dan warna merek
    yang menjadi huruf dicampur ke arah warna tulisan seperti di tempat lain.
*/

/* Angka pada tab: dua bagian lencana menu, di tempat asalnya masing-masing. */
.tugas-tab .tugas-tab-hitung {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    display: inline-block;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    margin-left: .45rem;
    min-width: 1.3rem;
    padding: .22rem .42rem;
    text-align: center;
}

.tugas-kosong {
    align-items: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1rem;
    text-align: center;
}

.tugas-kosong .tugas-kosong-ikon {
    font-size: 2.25rem;
    margin-bottom: .6rem;
    opacity: .6;
}

/* Kotak masuk "Untuk Anda": satu baris per butir, seluruh baris dapat ditekan. */
.tugas-kotak {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tugas-kotak > li + li { border-top: 1px solid var(--mud-palette-lines-default); }

.tugas-kotak-butir {
    align-items: flex-start;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .75rem;
    padding: .75rem 1rem;
    text-align: left;
    width: 100%;
}

.tugas-kotak-butir:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }
.tugas-kotak-butir:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.tugas-kotak-butir:disabled { cursor: default; opacity: .6; }

.tugas-kotak-ikon {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
}

.tugas-kotak-isi {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.tugas-kotak-judul { font-size: .9rem; }

.tugas-kotak-lead,
.tugas-kotak-cuplikan {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.tugas-kotak-lead { display: flex; flex-wrap: wrap; gap: .35rem; }

.tugas-kotak-waktu {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Belum dibaca: judul tebal dan satu garis warna di tepi kiri — tanpa warna latar yang berteriak. */
.tugas-kotak-baru { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.tugas-kotak-baru .tugas-kotak-judul { font-weight: 600; }

.tugas-kotak-baru .tugas-kotak-ikon {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

/* Tab Tugas */
.tugas-saringan {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.tugas-saringan .pipeline-cepat { margin-bottom: 0; }
.tugas-saringan .tugas-pemegang { flex: 0 1 16rem; margin-top: 0; }

.tugas-tim .tugas-tim-baris,
.tugas-tim .tugas-tim-terpilih { cursor: pointer; }

.tugas-tim .tugas-tim-terpilih > td {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.tugas-angka-telat,
.tugas-telat {
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    font-weight: 600;
}

.tugas-jatuh-tempo { font-size: .85rem; font-variant-numeric: tabular-nums; }

.tugas-untuk {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    text-decoration: none;
}

.tugas-untuk:hover { text-decoration: underline; }

.tugas-untuk-nomor {
    color: var(--mud-palette-text-secondary);
    display: block;
    font-size: .72rem;
}

/* Keping "Lead" / "Nasabah" di depan nama sasaran tugas (tahap 5): dua jenis sasaran pada
   satu tabel, dan nama yang sama dapat ada di keduanya. */
.tugas-sasaran-keping {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .02em;
    line-height: 1.4;
    margin-right: .35rem;
    padding: 0 .45rem;
    text-transform: uppercase;
    vertical-align: middle;
}

.tugas-jenis {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
    white-space: nowrap;
}

.tugas-jenis .mud-icon-root { color: var(--mud-palette-text-secondary); font-size: 1rem; }

.tugas-catatan {
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

/* Lead Saya di HP: blok tugas terlambat dan hari ini di atas daftar lead. */
.saku-tugas-baris {
    align-items: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    display: flex;
    gap: .75rem;
    margin-bottom: .4rem;
    padding: .6rem .75rem;
    text-decoration: none;
}

.saku-tugas-waktu {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
}

.saku-tugas-telat {
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    font-weight: 600;
}

.saku-tugas-isi {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.saku-tugas-nama {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saku-tugas-keterangan {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saku-tugas-panah { color: var(--mud-palette-text-secondary); flex: 0 0 auto; }

/* Nasabah Kelolaan */

/*
    Ubin yang sekaligus saringan. Rupanya ubin Beranda (beranda-ubin), tetapi ia tombol:
    ditekan menyaring daftar ke keadaannya, ditekan lagi melepas. Yang sedang menyaring
    diberi bingkai ganda warna merek — bentuk yang sama dengan ubin "milik Anda" di
    Beranda — dan angkanya ikut berwarna merek, dicampur ke warna tulisan tema supaya
    tetap terbaca di tampilan gelap.
*/
.kelolaan-ubin {
    appearance: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

.kelolaan-ubin:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
}

.kelolaan-ubin:disabled { cursor: default; }

.kelolaan-ubin .beranda-ubin-angka { color: var(--mud-palette-text-primary); }

.kelolaan-ubin-tekan {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.kelolaan-ubin-tekan .beranda-ubin-angka {
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

/* Kepala kolom yang mengurutkan di server: tombol polos di dalam sel kepala. */
.kelolaan-urut {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: .2rem;
    padding: 0;
    text-align: inherit;
}

.kelolaan-urut .kelolaan-urut-ikon {
    font-size: 1rem;
    opacity: .45;
}

.kelolaan-urut:hover .kelolaan-urut-ikon,
.kelolaan-urut-aktif .kelolaan-urut-ikon { opacity: 1; }

.kelolaan-urut-aktif {
    color: color-mix(in srgb, var(--mud-palette-primary) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

th.kelolaan-kanan { text-align: right; }

th.kelolaan-kanan .kelolaan-urut {
    justify-content: flex-end;
    width: 100%;
}

.kelolaan-baris { cursor: pointer; }

.kelolaan-nama {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.kelolaan-kode {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* Penanda "Perlu dihubungi": ikon kecil di samping nama, bukan baris merah. */
.kelolaan-perlu {
    align-items: center;
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    display: inline-flex;
    font-size: .78rem;
    gap: .2rem;
    margin-left: .3rem;
    vertical-align: middle;
}

.kelolaan-perlu .mud-icon-root { font-size: .95rem; }

/* Nama Nasabah sebagai tombol (tinjauan tahap 5): baris yang hanya dapat ditekan tetikus tidak
   dapat dibuka dari papan ketik. Tampil seperti nama biasa, bukan tombol peramban berbingkai. */
.kelolaan-nama-tombol {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.kelolaan-nama-tombol:hover { text-decoration: underline; }

.kelolaan-nama-tombol:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Kata yang dibaca pembaca layar tetapi tidak tampil: penanda yang di layar hanya berupa ikon. */
.kelolaan-tersembunyi {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Pemilih urutan layar sempit: di bawah 960 px kepala tabelnya tersembunyi (tabel menjadi kartu).
   Di layar lebar d-md-none yang menyembunyikannya. */
.kelolaan-urut-saku {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.kelolaan-kaki {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    margin-top: .75rem;
}

/* Kejadian 7 hari terakhir: bagian yang tertutup saat halaman dibuka. */
.kelolaan-kejadian {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.kelolaan-kejadian > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: .4rem;
    list-style: none;
    padding: .65rem 1rem;
}

.kelolaan-kejadian > summary::-webkit-details-marker { display: none; }

.kelolaan-kejadian-panah {
    color: var(--mud-palette-text-secondary);
    transition: transform .15s ease;
}

.kelolaan-kejadian[open] .kelolaan-kejadian-panah { transform: rotate(90deg); }

.kelolaan-kejadian-daftar {
    list-style: none;
    margin: 0;
    padding: 0 1rem .5rem;
}

.kelolaan-kejadian-baris {
    align-items: flex-start;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: .75rem;
    padding: .55rem 0;
}

.kelolaan-kejadian-waktu {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    min-width: 8.5rem;
    white-space: nowrap;
}

.kelolaan-kejadian-isi {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.kelolaan-kejadian-nasabah {
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    gap: .2rem .5rem;
}

.kelolaan-kejadian-jenis {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kelolaan-kejadian-jumlah { font-variant-numeric: tabular-nums; }

/* Saran layanan yang tetap per jenis kejadian — abu-abu, bukan perintah. */
.kelolaan-kejadian-saran {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

/* Dialog rincian */
.kelolaan-rincian-kepala {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
}

.kelolaan-blok { margin-bottom: 1rem; }

.kelolaan-kontak {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.kelolaan-kontak-butir {
    align-items: center;
    display: inline-flex;
}

.kelolaan-baris-pengelola {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

.kelolaan-riwayat {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kelolaan-riwayat li {
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: .75rem;
    padding: .45rem 0;
}

.kelolaan-riwayat-waktu {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    min-width: 8.5rem;
    white-space: nowrap;
}

.kelolaan-riwayat-isi {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.kelolaan-riwayat-judul { font-weight: 500; }

.kelolaan-riwayat-teks {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.kelolaan-riwayat-oleh,
.kelolaan-tetap {
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
}

/* Ponsel: waktu di atas isinya, bukan berdesakan di satu baris. */
@media (max-width: 959.98px) {
    .kelolaan-kejadian-baris,
    .kelolaan-riwayat li {
        flex-wrap: wrap;
    }

    .kelolaan-kejadian-waktu,
    .kelolaan-riwayat-waktu {
        min-width: 0;
        width: 100%;
    }

    .kelolaan-kejadian-baris .pipeline-baris-aksi {
        justify-content: flex-start;
        width: 100%;
    }
}

/* ------------------------------------------------------------------------
   Target & Forecast (1.0.50). Warna dari palet tema, satu aturan dua tampilan. */
.forecast-kepala {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
}

/* Ada capaian tetapi belum ada target: kalimatnya di kaki tabel, bersama tombolnya. */
.forecast-catatan {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .25rem 1rem;
    margin: .25rem 0 1rem;
}

.forecast-nmi,
.forecast-isian {
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 1rem;
    width: fit-content;
}

/* Kisaran di kaki tabel pipeline: dua angka, dipisahkan garis dari tabelnya. */
.forecast-total {
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
    gap: .25rem;
    margin-top: .75rem;
    padding-top: .75rem;
}

/* Kisi dialog target: nama petugas, lalu dua ukuran; di ponsel namanya di atas keduanya. */
.forecast-kisi-baris {
    align-items: center;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: grid;
    gap: .5rem 1rem;
    grid-template-columns: minmax(8rem, 1.2fr) 1fr 1fr;
    padding: .6rem 0;
}

.forecast-kisi-baris:first-child { border-top: 0; }

.forecast-kisi-nama { font-weight: 500; }

@media (max-width: 599.98px) {
    .forecast-kisi-baris { grid-template-columns: 1fr 1fr; }

    .forecast-kisi-nama { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------------
   Forecast langsung (8 Oktober 2026). Warna dari palet tema: satu aturan dua tampilan. */
.forecast-langsung {
    align-items: center;
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .8rem;
    gap: .45rem;
    padding: .25rem .75rem;
}

.forecast-langsung:hover { border-color: var(--mud-palette-primary); }

.forecast-titik {
    background: var(--mud-palette-text-secondary);
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.forecast-langsung.aktif .forecast-titik {
    animation: forecast-denyut 1.6s infinite;
    background: var(--mud-palette-success);
}

@keyframes forecast-denyut {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 50%, transparent); }
    100% { box-shadow: 0 0 0 9px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .forecast-langsung.aktif .forecast-titik { animation: none; }
}

.forecast-tag {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
    font-size: .72rem;
    padding: .05rem .5rem;
}

/* Segmen pilihan: Saya / Tim / Perusahaan / Per IB, dan ukuran. Tombol biasa, tidak pernah mati. */
.forecast-seg {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.forecast-seg button {
    background: transparent;
    border: 0;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    padding: .4rem .9rem;
}

.forecast-seg button.aktif {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.forecast-kpi {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 1rem;
}

.forecast-kartu {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: .9rem 1rem;
}

.forecast-kartu small { color: var(--mud-palette-text-secondary); display: block; font-size: .78rem; }

.forecast-kartu b {
    display: block;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    margin: .15rem 0;
}

.forecast-kartu em { color: var(--mud-palette-text-secondary); font-size: .78rem; font-style: normal; }

/* Hijau/merah sebagai huruf: dicampur ke arah warna tulisan supaya terbaca di tampilan gelap juga. */
.forecast-baik { color: color-mix(in srgb, var(--mud-palette-success) 70%, var(--mud-palette-text-primary)) !important; }
.forecast-buruk { color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary)) !important; }

.forecast-metode { display: grid; gap: .5rem; }
.forecast-metode strong { display: block; font-size: .85rem; }
.forecast-metode span { font-size: .9rem; font-variant-numeric: tabular-nums; }

.forecast-bar {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    height: 7px;
    min-width: 90px;
    overflow: hidden;
}

.forecast-bar i {
    background: var(--mud-palette-primary);
    border-radius: 4px;
    display: block;
    height: 100%;
}

.forecast-kanan { text-align: right; }
.forecast-tabel .forecast-baris { cursor: pointer; }
.forecast-tabel .forecast-baris-dipilih td { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }

/* Rincian satu baris: lapis di sisi kanan, penuh lebar di ponsel. */
.forecast-rincian {
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    bottom: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
    max-width: 100%;
    overflow-y: auto;
    padding: 1rem;
    position: fixed;
    right: 0;
    top: 0;
    width: 420px;
    z-index: 1300;
}

.forecast-rincian-kepala { align-items: center; display: flex; gap: .5rem; justify-content: space-between; }
.forecast-rincian-blok { border-top: 1px solid var(--mud-palette-lines-default); margin-top: .75rem; padding-top: .75rem; }
.forecast-rincian-blok dl { display: grid; gap: .2rem .75rem; grid-template-columns: max-content 1fr; margin: .4rem 0 0; }
.forecast-rincian-blok dt { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.forecast-rincian-blok dd { font-size: .85rem; font-variant-numeric: tabular-nums; margin: 0; }
.forecast-rincian-blok ul { font-size: .85rem; margin: .4rem 0 0; padding-left: 1.1rem; }

/* Grafik SVG. */
.forecast-grafik { display: block; height: auto; width: 100%; }
.forecast-grafik .fc-garis-kisi { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.forecast-grafik .fc-teks { fill: var(--mud-palette-text-secondary); font-size: 11px; }
.forecast-grafik .fc-teks-target { fill: var(--mud-palette-error); font-size: 11px; }
.forecast-grafik .fc-target { stroke: var(--mud-palette-error); stroke-dasharray: 5 5; stroke-width: 1.2; }
.forecast-grafik .fc-pita { fill: var(--mud-palette-primary); opacity: .14; }
.forecast-grafik .fc-proyeksi { fill: none; opacity: .8; stroke: var(--mud-palette-primary); stroke-dasharray: 6 5; stroke-width: 2; }
.forecast-grafik .fc-bulan-lalu { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; }
.forecast-grafik .fc-tercapai { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2.6; }
.forecast-grafik .fc-titik { fill: var(--mud-palette-primary); }
.forecast-grafik .fc-kolom { fill: transparent; }
.forecast-grafik .fc-silang { stroke: var(--mud-palette-text-secondary); stroke-dasharray: 3 3; }
.forecast-grafik .fc-silang,
.forecast-grafik .fc-tip { display: none; pointer-events: none; }
.forecast-grafik .fc-hari:hover .fc-silang,
.forecast-grafik .fc-hari:hover .fc-tip { display: inline; }
.forecast-grafik .fc-tip-latar { fill: var(--mud-palette-surface); stroke: var(--mud-palette-lines-default); }
.forecast-grafik .fc-tip-judul { fill: var(--mud-palette-text-primary); font-size: 12px; font-weight: 600; }
.forecast-grafik .fc-tip-teks { fill: var(--mud-palette-text-primary); font-size: 12px; }

.forecast-legenda { color: var(--mud-palette-text-secondary); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .25rem 1rem; margin-top: .5rem; }
.forecast-legenda .fc-leg { border-radius: 2px; display: inline-block; height: 3px; margin-right: .4rem; vertical-align: middle; width: 16px; }
.forecast-legenda .fc-leg-tercapai { background: var(--mud-palette-primary); }
.forecast-legenda .fc-leg-proyeksi { background: var(--mud-palette-primary); opacity: .45; }
.forecast-legenda .fc-leg-lalu { background: var(--mud-palette-text-secondary); }
.forecast-legenda .fc-leg-target { background: var(--mud-palette-error); }

/* Campaign */

/*
    Halaman Campaign (1.0.51). Warna dari palet tema, satu aturan dua tampilan; tidak ada
    heksadesimal di sini. Nama dan kodenya bertumpuk seperti Nasabah Kelolaan; tindakan
    tiap baris berdiri di bawah keduanya, bukan di kolom sendiri, supaya pembaca tanpa
    kewenangan kelola melihat tabel yang sama tanpa kolom kosong.
*/
.kampanye-nama {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.kampanye-judul { font-weight: 500; }

.kampanye-kode {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* Tombol teks kecil berderet; jaraknya rapat supaya tidak melebihi lebar namanya. */
.kampanye-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    margin: .25rem 0 0;
}

.kampanye-aksi-kanan {
    justify-content: flex-end;
    margin: 0;
}

/* Penanda lead yang masuk di luar periode campaign: iklannya belum dimatikan. */
.kampanye-luar {
    color: color-mix(in srgb, var(--mud-palette-warning) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
    font-size: 1rem;
    margin-left: .25rem;
    vertical-align: text-bottom;
}

/* Sel yang datanya belum cukup: strip redup berketerangan, bukan angka nol. */
.kampanye-kosong { color: var(--mud-palette-text-secondary); }

.kampanye-tabel td,
.kampanye-kaki { font-variant-numeric: tabular-nums; }

/* Kotak tautan di dalam dialog campaign: satu baris per halaman tujuan, tombol Salin di ujungnya. */
.kampanye-tautan {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
}

.kampanye-tautan-baris {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
}

.kampanye-tautan-label {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    min-width: 11rem;
}

.kampanye-tautan-alamat {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    flex: 1;
    font-size: .8rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .3rem .5rem;
}

.kampanye-anggaran {
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* Ponsel: label tautan di atas alamatnya, dan tindakan baris boleh turun ke baris berikutnya. */
@media (max-width: 959.98px) {
    .kampanye-tautan-label {
        min-width: 0;
        width: 100%;
    }

    .kampanye-aksi-kanan { justify-content: flex-start; }
}

/* Impor lead dari CSV */

/*
    Komponen ImporLeadKotak (tahap 11), di dialog Pipeline dan di halaman Impor Lead. Warna dari palet
    tema dicampur ke arah warna tulisan, satu aturan dua tampilan. Ubin hitungan berlipat sendiri:
    lima sejajar di layar lebar, dua per baris di ponsel 375 px — tidak pernah menggulir ke samping.
*/
.impor-lead-langkah {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

/* Nama berkas dan daftar kolom dari luar boleh sepanjang apa pun: dipatahkan, bukan meluber. */
.impor-lead-berkas { overflow-wrap: anywhere; }

.impor-lead-hitung {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.impor-lead-ubin {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem;
}

.impor-lead-angka {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.impor-lead-label {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.impor-lead-siap .impor-lead-angka {
    color: color-mix(in srgb, var(--mud-palette-success) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.impor-lead-salah .impor-lead-angka {
    color: color-mix(in srgb, var(--mud-palette-error) var(--cabinet-campur-merek), var(--mud-palette-text-primary));
}

.impor-lead-tabel td { vertical-align: top; }

/*
    Chip berkas terpilih bawaan MudFileUpload, di setiap halaman unggah yang tidak memasang
    SelectedTemplate sendiri. MudBlazor mewarnainya Secondary terisi penuh — di tema panel merah
    menyala — sehingga berkas yang sah terbaca sebagai galat (pemeriksaan peramban 2 Oktober 2026,
    Impor Lead). Rupanya kini chip bergaris biasa: garis dan tulisan dari tema, satu aturan untuk
    tampilan terang dan gelap.
*/
.mud-file-upload-filelist .mud-chip.mud-chip-filled {
    background-color: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

/*
    Centang "Saya bukan robot" (30 September 2026; dikecilkan 1 Oktober 2026). Mula-mula ia
    kotak bergaris berlatar abu-abu selebar borang, meniru kotak yang dikenal orang. Pemilik,
    melihatnya di layar masuk: kegedean, menghalangi, dan merusak rupa halamannya — "kecil aja,
    harusnya ga perlu pake kotak, kaya yang bawahnya cukup", lalu "kotaknya buat sejajar aja".
    Kini ia baris centang biasa tanpa garis tepi, latar, maupun bantalan, dan kotak centangnya
    kotak centang peramban yang sama dengan "Ingat saya" tepat di bawahnya: ukuran, tepi kanan,
    dan warna centangnya disalin dari sana, supaya dua baris itu sejajar dan serupa di setiap
    peramban dan di kedua tampilan. Keadaannya dari atribut data-keadaan yang disetel
    bukan-robot.js: siap (kosong), memeriksa (putaran menggantikan kotaknya), terverifikasi
    (tercentang), gagal (kalimat merah).
*/
.bukan-robot { user-select: none; }

.bukan-robot-baris {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Wadah seukuran kotaknya: putaran "memeriksa" menempati tempat yang sama persis, sehingga
   kalimat di sebelahnya tidak bergeser saat keadaannya berganti. */
.bukan-robot-wadah {
    position: relative;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .6rem;
}

.bukan-robot-kotak {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.bukan-robot-putar {
    position: absolute;
    inset: 0;
    display: none;
    box-sizing: border-box;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: bukan-robot-putar .8s linear infinite;
}

@keyframes bukan-robot-putar {
    to { transform: rotate(360deg); }
}

.bukan-robot[data-keadaan="memeriksa"] .bukan-robot-baris,
.bukan-robot[data-keadaan="memeriksa"] .bukan-robot-kotak { cursor: progress; }
.bukan-robot[data-keadaan="memeriksa"] .bukan-robot-kotak { visibility: hidden; }
.bukan-robot[data-keadaan="memeriksa"] .bukan-robot-putar { display: block; }
.bukan-robot[data-keadaan="terverifikasi"] .bukan-robot-baris,
.bukan-robot[data-keadaan="terverifikasi"] .bukan-robot-kotak { cursor: default; }
.bukan-robot[data-keadaan="gagal"] .bukan-robot-teks { color: var(--mud-palette-error); }
.bukan-robot-teks { color: var(--mud-palette-text-primary); }

/* Ragam Cloudflare Turnstile: widgetnya digambar Cloudflare di dalam wadah ini. Tingginya
   dipesan lebih dulu (65 px, tinggi widget ukuran normal) supaya tombol Masuk di bawahnya
   tidak melompat ketika widgetnya muncul. Kalimat hanya tampil saat memuat, gagal, atau
   kedaluwarsa. */
.bukan-robot-turnstile .bukan-robot-widget { min-height: 65px; }
.bukan-robot-turnstile[data-keadaan="gagal"] .bukan-robot-widget { min-height: 0; }
.bukan-robot-turnstile .bukan-robot-teks { display: block; margin-top: .25rem; }
.bukan-robot-turnstile .bukan-robot-teks:empty { display: none; }
.bukan-robot-turnstile[data-keadaan="memuat"] .bukan-robot-teks { color: var(--mud-palette-text-secondary); }
.bukan-robot-turnstile[data-keadaan="kedaluwarsa"] .bukan-robot-teks { color: var(--mud-palette-warning); }

/* ------------------------------------------------------------------------- */
/* Contoh pertanyaan di Tanya Cabinet dan Tanya Angka (7 Oktober 2026).      */
/* MudChip bawaan nowrap + overflow hidden: kalimat contoh yang lebih panjang */
/* dari lebar layar HP terpotong tanpa titik-titik (316-357 px dalam 285 px), */
/* padahal contoh itulah yang memberi tahu orang apa yang boleh ditanyakan.   */
/* Keping ini boleh membungkus ke baris kedua dan mengikuti tinggi isinya.    */
/* ------------------------------------------------------------------------- */
.mud-chip.contoh-pertanyaan {
    height: auto;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.mud-chip.contoh-pertanyaan .mud-chip-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Lebar ponsel: dua tempat yang tergencet ditemukan sapuan halaman 375 px (8 Oktober 2026).
   Batasnya 599.98px, sama persis dengan xs MudBlazor (lihat jebakan media query di CLAUDE.md). */

/* Baris pohon IB: nama tidak boleh menyempit sampai satu kata per baris; hitungan, jenjang, dan
   sebutannya (kelompok ms-auto) turun ke baris berikutnya bila tidak muat. */
.pohon-ib-baris {
    column-gap: .5rem;
    row-gap: .125rem;
}

.pohon-ib-nama {
    min-width: 8rem;
}

@media (max-width: 599.98px) {
    /* Tab bawaan MudBlazor selebar minimal 160px dan tidak terlipat: di ponsel hanya satu atau dua
       tab yang tampak, judul berikutnya terpotong ("TASI..."), sisanya hanya terjangkau lewat panah.
       Kini tab sesempit isinya dan judulnya boleh terlipat; panah tetap ada bila tabnya memang banyak. */
    .mud-tabs .mud-tab {
        /* !important: MudTabs memasang min-width:160px sebagai gaya sebaris (MinimumTabWidth). */
        min-width: 0 !important;
        padding-inline: .625rem;
        white-space: normal;
        line-height: 1.25;
    }
}

/* Log Sistem: isi log ditampilkan apa adanya, digulir di wadahnya sendiri (13 Oktober 2026). */
.log-sistem-isi {
    max-height: 480px;
    overflow: auto;
    padding: 12px;
    margin: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre;
}

/* Log Sistem, tabel runtuh (Breakpoint.Sm = di bawah 960 px, batas MudBlazor persis). Sel runtuh MudBlazor adalah grid
   dengan kolom label minmax(8rem, 13rem): di 375 px label memakan 200 px dan nilai tinggal 55 px, sehingga
   "Contoh Phone 8" patah tiga baris. Label dibatasi 40 % lebar sel supaya nilainya mengalir. */
@media (max-width: 959.98px) {
    .mud-table.log-sistem-tabel td.mud-table-cell[data-label] {
        grid-template-columns: minmax(6rem, 40%) 1fr;
    }
}