/*
    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.
*/
.cabinet-drawer .mud-navmenu .mud-nav-link.active {
    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);
}

/* --- 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;
    }
}

@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;
    }
}

@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;
    }
}

@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;
    }
}

/* ------------------------------------------------------------------ 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);
}



/* --- 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 {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.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);
}

.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); }

.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);
}