/* ===========================================================================
   assets/css/ui-kendala.css — [PATCH86] Tombol & form Report Kendala
   ===========================================================================

   Dimuat di <head> lewat gayaHead(). Alasannya sama seperti ui-lampiran.css:
   tombol mengambang yang gayanya baru datang belakangan akan terlihat berkedip
   dari kotak polos menjadi tombol bulat pada setiap pemuatan halaman.
   =========================================================================== */

/* --- Tombol mengambang -------------------------------------------------- */

.kdl-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1035;              /* di bawah modal (1050), di atas isi halaman */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #007bff;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kdl-fab:hover,
.kdl-fab:focus {
    background: #0069d9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    color: #fff;
    outline: none;
}

.kdl-fab:active { transform: translateY(1px); }

/* Fokus papan ketik harus terlihat. Tombol ini bisa dicapai dengan Tab, dan
   garis fokus bawaan peramban hilang karena :focus di atas mematikannya. */
.kdl-fab:focus-visible { box-shadow: 0 0 0 3px rgba(0, 123, 255, .45); }

.kdl-fab i { font-size: 1.05rem; }

/* Di layar sempit tombolnya menyusut jadi lingkaran ikon saja.
   Tombol selebar 150px di layar 360px menutupi isi halaman — dan halaman yang
   tertutup persis yang sedang ingin dilaporkan orangnya. */
@media (max-width: 575.98px) {
    .kdl-fab {
        right: 14px;
        bottom: 14px;
        padding: .8rem;
        border-radius: 50%;
    }
    .kdl-fab-teks { display: none; }
}

/* Saat dicetak, tombol ini tidak punya arti apa pun. */
@media print { .kdl-fab { display: none !important; } }

/* --- Tutorial singkat --------------------------------------------------- */

.kdl-tutorial {
    background: #f1f8ff;
    border: 1px solid #b8daff;
    border-radius: .35rem;
    padding: .6rem .85rem;
}

.kdl-tutorial > summary {
    cursor: pointer;
    font-weight: 600;
    color: #004085;
    list-style: none;
}

.kdl-tutorial > summary::-webkit-details-marker { display: none; }

.kdl-tutorial > summary::after {
    content: '▾';
    float: right;
    transition: transform .15s ease;
}

.kdl-tutorial[open] > summary::after { transform: rotate(180deg); }

.kdl-tutorial ol { font-size: .9rem; }
.kdl-tutorial li { margin-bottom: .35rem; }

/* --- Pilihan urgensi ---------------------------------------------------- */

.kdl-urgensi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
}

.kdl-urg-opsi {
    display: block;
    margin: 0;
    padding: .55rem .7rem;
    border: 2px solid #dee2e6;
    border-radius: .35rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.kdl-urg-opsi:hover { border-color: #adb5bd; }

/* Radio-nya disembunyikan dari mata TAPI tetap ada di pohon aksesibilitas —
   display:none akan membuatnya hilang dari pembaca layar dan tidak bisa
   dicapai dengan Tab, sehingga pilihan urgensi jadi mustahil tanpa tetikus. */
.kdl-urg-opsi input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.kdl-urg-opsi:focus-within { box-shadow: 0 0 0 3px rgba(0, 123, 255, .3); }

.kdl-urg-nama {
    display: block;
    font-weight: 600;
    font-size: .92rem;
}

.kdl-urg-ket {
    display: block;
    font-size: .78rem;
    color: #6c757d;
    line-height: 1.25;
    margin-top: .15rem;
}

/* Warna hanya muncul saat terpilih. Empat kotak berwarna sekaligus membuat
   yang paling merah tampak seperti anjuran, bukan pilihan. */
.kdl-urg-opsi input:checked ~ .kdl-urg-nama { color: #004085; }
.kdl-urg-opsi[data-nilai="rendah"]:has(input:checked) { border-color: #6c757d; background: #f8f9fa; }
.kdl-urg-opsi[data-nilai="sedang"]:has(input:checked) { border-color: #007bff; background: #f1f8ff; }
.kdl-urg-opsi[data-nilai="tinggi"]:has(input:checked) { border-color: #fd7e14; background: #fff6ed; }
.kdl-urg-opsi[data-nilai="kritis"]:has(input:checked) { border-color: #dc3545; background: #fdf1f2; }

/* Cadangan untuk peramban tanpa :has() — tanpa ini, pilihan yang aktif tidak
   terlihat sama sekali di sana, dan itu jauh lebih buruk daripada warna yang
   seragam. */
.kdl-urg-opsi.kdl-urg-aktif { border-color: #007bff; background: #f1f8ff; }

/* --- Hasil kiriman ------------------------------------------------------ */

.kdl-ok {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: #d4edda;
    color: #155724;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.kdl-nomor {
    display: inline-block;
    padding: .5rem 1.1rem;
    border: 2px dashed #007bff;
    border-radius: .35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #004085;
    background: #f1f8ff;
}

/* --- Lencana status & SLA di halaman daftar ----------------------------- */

/* [PATCH89] Delapan status, mengikuti spreadsheet tim.
   Warnanya dipilih supaya sekilas terbaca sebagai tiga kelompok: abu-abu untuk
   yang belum berjalan, biru/ungu untuk yang berjalan, kuning/merah untuk yang
   tertahan, hijau/hitam untuk yang tutup. */
.kdl-badge-baru       { background: #6c757d; }
.kdl-badge-butuh_info { background: #ffc107; color: #212529; }
.kdl-badge-dikerjakan { background: #007bff; }
.kdl-badge-testing    { background: #6f42c1; }
.kdl-badge-ditunda    { background: #fd7e14; }
.kdl-badge-diblokir   { background: #dc3545; }
.kdl-badge-selesai    { background: #28a745; }
.kdl-badge-ditolak    { background: #343a40; }

.kdl-sla-aman   { color: #28a745; }
.kdl-sla-hampir { color: #fd7e14; }
.kdl-sla-lewat  { color: #dc3545; font-weight: 600; }
.kdl-sla-tepat  { color: #28a745; }

.kdl-log {
    /* [PATCH95] 260px -> 420px. Isinya sekarang 50 baris; kotak setinggi
       sepuluh baris membuat sisanya ada tapi tidak terasa ada. */
    max-height: 420px;
    overflow: auto;
    background: #212529;
    color: #e9ecef;
    border-radius: .3rem;
    padding: .6rem .8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Jalan cadangan saat Bootstrap tidak termuat ------------------------- */
/*
   Dipakai hanya kalau jQuery.fn.modal tidak ada. Terdengar seperti kasus yang
   takkan terjadi, sampai diingat bahwa tombol ini justru untuk melaporkan
   halaman yang sedang rusak — dan berkas JavaScript yang gagal dimuat adalah
   salah satu bentuk kerusakan yang paling sering.
*/

.kdl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .5);
}

/*
   Modalnya diberi z-index SENDIRI, tidak menumpang `.modal { z-index: 1050 }`
   milik Bootstrap. Uji peramban menemukan ini: kalau CSS Bootstrap ikut tidak
   termuat, `.modal` tidak punya z-index sama sekali, latar gelap di 1040
   menutupinya, dan tombol Tutup menjadi mustahil diklik — formulir yang bisa
   dibuka tapi tidak bisa ditutup. Bergantung pada gaya yang justru sedang
   diasumsikan gagal adalah cara yang pasti untuk gagal juga.
*/
/* [PATCH95] #kdlDetailModal ikut, bukan hanya #kdlModal.
   Perbaikannya dulu hanya dipasang pada modal formulir lapor, sementara modal
   RINCIAN — yang berisi tombol Hapus, Follow Up, dan panel pengerjaan — tetap
   tertutup latar gelap 1040 begitu CSS Bootstrap tidak termuat. Uji peramban
   Patch 95 menemukannya: tombol hapusnya tergambar, terlihat, dan sama sekali
   tidak bisa diklik. Kelalaian yang sama, satu modal terlewat. */
#kdlModal.show,
#kdlDetailModal.show {
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-y: auto;
    background: transparent;
}

/* Kotak isinya diberi bentuk seadanya untuk keadaan yang sama. Bukan meniru
   Bootstrap — sekadar memastikan formulirnya terbaca dan bisa diisi. */
#kdlModal.show .modal-content,
#kdlDetailModal.show .modal-content {
    background: #fff;
    border-radius: .3rem;
    margin: 2rem auto;
    max-width: 800px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
}

/* ===========================================================================
   [PATCH87] PAPAN KANBAN
   =========================================================================== */

/*
   Papannya menggulir MENDATAR, bukan membungkus ke baris berikutnya.
   Enam kolom yang membungkus di layar 1366px menghasilkan dua baris kolom —
   dan papan Kanban yang kolomnya ada di dua baris berhenti membaca sebagai
   alur kiri-ke-kanan, yaitu satu-satunya hal yang membuatnya berguna.
*/
.kdl-papan {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: flex-start;
}

.kdl-kolom {
    flex: 0 0 260px;
    max-width: 260px;
    background: #f4f6f9;
    border-radius: .35rem;
    display: flex;
    flex-direction: column;
}

.kdl-kolom-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .7rem;
    border-radius: .35rem .35rem 0 0;
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}

/* Kolom "Butuh Info" berlatar kuning; teks putih di atasnya tidak terbaca.
   Ini satu-satunya yang perlu dikecualikan. */
.kdl-kolom-kepala.kdl-badge-butuh_info { color: #212529; }

.kdl-kolom-jml {
    background: rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .78rem;
}

.kdl-kolom-isi {
    padding: .5rem;
    min-height: 90px;      /* kolom kosong tetap bisa menjadi tujuan jatuhan */
    max-height: 62vh;
    overflow-y: auto;
}

.kdl-kolom-siap {
    background: #e3f0ff;
    outline: 2px dashed #007bff;
    outline-offset: -4px;
}

.kdl-kolom-kosong {
    color: #adb5bd;
    font-size: .8rem;
    text-align: center;
    padding: 1rem .5rem;
}

.kdl-kolom-sisa {
    font-size: .75rem;
    color: #6c757d;
    text-align: center;
    padding: .4rem;
    border-top: 1px dashed #ced4da;
    margin-top: .4rem;
}

/* --- Kartu -------------------------------------------------------------- */

.kdl-kartu {
    background: #fff;
    border-radius: .3rem;
    border-left: 4px solid #adb5bd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    padding: .5rem .6rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
}

.kdl-kartu:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.kdl-kartu:focus-visible { outline: 3px solid rgba(0, 123, 255, .5); outline-offset: 1px; }
.kdl-kartu[draggable="true"] { cursor: grab; }
.kdl-kartu-diangkat { opacity: .45; transform: rotate(1.5deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   [PATCH170] SERETAN YANG TERASA LANGSUNG
   ═══════════════════════════════════════════════════════════════════════════
   Dilaporkan Nura: kartunya kembali dulu ke kolom lama, baru melompat ke kolom
   baru sesudah server menjawab. Perbaikan utamanya di kendala.js (kartunya
   dipindah sebelum permintaan dikirim); yang di bawah ini bagian yang membuat
   perpindahan itu terbaca sebagai gerakan, bukan sebagai kedipan.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sepanjang seretan berlangsung. Tanpa ini kursor kembali jadi panah begitu
   pointer meninggalkan kartunya, dan seretan terasa seperti sudah batal. */
body.kdl-sedang-seret,
body.kdl-sedang-seret .kdl-kartu[draggable="true"] { cursor: grabbing; }

/* Teks tidak ikut tersorot saat kartunya diseret melewati kolom lain. Blok
   biru yang muncul di tengah seretan terlihat seperti halaman yang rusak. */
body.kdl-sedang-seret .kdl-papan { user-select: none; }

/* Garis tempat kartunya akan mendarat. Tanpa penanda, satu-satunya cara tahu
   di mana ia akan jatuh adalah melepasnya dan melihat hasilnya. */
.kdl-penanda-jatuh {
    height: 3px;
    margin: .15rem 0 .35rem;
    border-radius: 999px;
    background: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .18);
    animation: kdlPenandaMasuk .14s ease-out;
}

@keyframes kdlPenandaMasuk {
    from { opacity: 0; transform: scaleX(.4); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* Kartu yang BARU SAJA mendarat. Sorotan sebentar yang menjawab pertanyaan
   "tadi yang saya geser yang mana" tanpa perlu mencarinya. */
.kdl-kartu-mendarat {
    animation: kdlMendarat .42s ease-out;
}

@keyframes kdlMendarat {
    0%   { transform: scale(.97); box-shadow: 0 0 0 3px rgba(0, 123, 255, .45); }
    60%  { transform: scale(1.01); box-shadow: 0 0 0 3px rgba(0, 123, 255, .28); }
    100% { transform: scale(1);    box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
}

/* Kartu yang DIKEMBALIKAN karena servernya menolak. Warnanya sengaja berbeda
   dari kartu yang mendarat: keduanya gerakan yang sama persis di layar, dan
   tanpa beda warna, ditolak dan berhasil terlihat serupa. */
.kdl-kartu-balik {
    animation: kdlBalik .9s ease-out;
}

@keyframes kdlBalik {
    0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
    15%, 70% { box-shadow: 0 0 0 3px rgba(220, 53, 69, .45); }
}

/* Orang yang mematikan animasi di sistemnya tidak dipaksa melihatnya. Yang
   dibuang gerakannya saja; sorotan warnanya tetap, karena ia yang membawa
   keterangan (mendarat vs ditolak), bukan sekadar hiasan. */
@media (prefers-reduced-motion: reduce) {
    .kdl-penanda-jatuh { animation: none; }
    .kdl-kartu-mendarat { animation: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, .45); }
    .kdl-kartu-balik    { animation: none; box-shadow: 0 0 0 3px rgba(220, 53, 69, .45); }
    .kdl-kartu { transition: none; }
}

.kdl-urg-garis-rendah { border-left-color: #6c757d; }
.kdl-urg-garis-sedang { border-left-color: #17a2b8; }
.kdl-urg-garis-tinggi { border-left-color: #fd7e14; }
.kdl-urg-garis-kritis { border-left-color: #dc3545; }

.kdl-kartu-kode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    color: #6c757d;
}

.kdl-kartu-judul {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    margin: .15rem 0 .3rem;
    /* Judul panjang dipotong di baris ketiga. Kartu setinggi setengah kolom
       membuat papan berhenti bisa dipindai sekilas. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kdl-kartu-meta { font-size: .72rem; margin-bottom: .3rem; }

.kdl-kartu-progress { height: 5px; margin-bottom: .35rem; }

.kdl-kartu-kaki {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: #495057;
}

.kdl-kartu-kaki > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Utas riwayat ------------------------------------------------------- */

.kdl-utas { border-left: 2px solid #dee2e6; padding-left: .75rem; }

.kdl-utas-baris {
    position: relative;
    padding: .35rem 0 .35rem .1rem;
    font-size: .85rem;
}

.kdl-utas-baris + .kdl-utas-baris { border-top: 1px dashed #e9ecef; }

.kdl-utas-kaki { font-size: .72rem; color: #6c757d; margin-left: 1.4rem; }
.kdl-utas-isi  { }

.kdl-utas-followup   { color: #004085; }
.kdl-utas-verifikasi { color: #155724; }
.kdl-utas-status     { color: #495057; }

/* Papan tidak dicetak — enam kolom bergulir mendatar tidak punya arti di kertas. */
@media print { .kdl-papan { display: none; } }

/* ===========================================================================
   [PATCH90] TAMPILAN DI LAYAR HP
   ===========================================================================

   Halaman ini lahir untuk layar lebar: papan enam kolom, tabel tigabelas kolom,
   modal rincian yang mengapung di tengah. Semuanya masih "berfungsi" di layar
   360px — dan itu justru masalahnya, karena berfungsi tanpa bisa dipakai adalah
   bentuk kerusakan yang tidak pernah dilaporkan siapa pun.
   =========================================================================== */

@media (max-width: 767.98px) {

    /* --- Papan Kanban ---------------------------------------------------- */
    /*
       Satu kolom memenuhi layar, dan gulirannya MENGUNCI di tiap kolom.
       Tanpa scroll-snap, menggeser papan di layar sentuh hampir selalu berhenti
       di antara dua kolom — setengah kartu kiri dan setengah kartu kanan, yang
       tidak bisa dibaca keduanya.
    */
    .kdl-papan {
        scroll-snap-type: x mandatory;
        gap: .5rem;
        /* Ditarik ke tepi layar supaya lebar kolomnya benar-benar terpakai. */
        margin-left: -.75rem;
        margin-right: -.75rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .kdl-kolom {
        flex-basis: 84vw;
        max-width: 84vw;
        scroll-snap-align: start;
    }

    /* 84vw, bukan 100vw. Sisa 16% memperlihatkan tepi kolom berikutnya — satu-
       satunya petunjuk bahwa papan ini masih ada lanjutannya ke kanan. */

    .kdl-kolom-isi { max-height: none; }

    /* Kartu diberi ruang sentuh yang layak. Target setinggi 32px bisa diklik
       tetikus dengan tepat, tapi tidak bisa diketuk jempol dengan tepat. */
    .kdl-kartu { padding: .65rem .7rem; }
    .kdl-kartu-judul { font-size: .9rem; -webkit-line-clamp: 4; }
    .kdl-kartu-kaki  { font-size: .75rem; }

    /* Seret-dan-lepas memang tidak bekerja di layar sentuh. Kursor "grab" yang
       tetap terpasang di sana menjanjikan sesuatu yang tidak ada. */
    .kdl-kartu[draggable="true"] { cursor: pointer; }

    /* --- Rincian tiket --------------------------------------------------- */
    /*
       Modal dibuat memenuhi layar. Modal mengambang di layar 360px menyisakan
       bingkai abu-abu di empat sisi dan memotong isinya menjadi jendela sempit
       yang harus digulir di dalam halaman yang juga bisa digulir.
    */
    #kdlDetailModal .modal-dialog,
    #kdlModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }

    #kdlDetailModal .modal-content,
    #kdlModal .modal-content {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    /* Daftar keterangan dua kolom menjadi satu kolom; label di atas nilainya. */
    #kdlDetailIsi dl.row > dt,
    #kdlDetailIsi dl.row > dd {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #kdlDetailIsi dl.row > dt { margin-bottom: 0; }
    #kdlDetailIsi dl.row > dd { margin-bottom: .5rem; }

    /* Tombol di kaki modal memenuhi lebar dan bisa diketuk tanpa membidik. */
    #kdlModal .modal-footer,
    #kdlDetailModal .modal-footer {
        flex-wrap: wrap;
        gap: .4rem;
    }
    #kdlModal .modal-footer > .btn,
    #kdlDetailModal .modal-footer > .btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* --- Form lapor ------------------------------------------------------ */

    /* Empat pilihan urgensi berjajar di layar sempit menjadi empat kolom
       selebar jempol yang teksnya terpotong. Dua per baris masih terbaca. */
    .kdl-urgensi { grid-template-columns: repeat(2, 1fr); }

    /* font-size 16px, dan angka itu bukan selera: Safari iOS MEMPERBESAR
       seluruh halaman begitu kolom masukan yang difokuskan berukuran di bawah
       16px, lalu tidak mengembalikannya. Halaman yang tiba-tiba melompat saat
       orang mulai mengetik terasa seperti aplikasinya rusak. */
    #kdlModal .form-control,
    #kdlDetailIsi .form-control {
        font-size: 16px;
    }

    .kdl-nomor { font-size: 1.15rem; }

    /* --- Daftar & penyaring ---------------------------------------------- */

    /* Tombol "Lapor Kendala Baru" di kepala kartu memenuhi lebar sendiri,
       supaya tidak berdesakan dengan tombol corong di sebelahnya. */
    .card-tools .btn.btn-sm { white-space: nowrap; }

    /* Kolom tabel yang tersisa tidak boleh menempel satu sama lain. */
    #kdlTabel td, #kdlTabel th { padding: .5rem .4rem; }
}

/* Layar sangat sempit (≤ 400px): papan menjadi satu kolom penuh. Di lebar itu,
   16% yang disisakan untuk mengintip kolom berikutnya justru memakan ruang yang
   dibutuhkan judul kartu. */
@media (max-width: 400px) {
    .kdl-kolom { flex-basis: 90vw; max-width: 90vw; }
    .kdl-urgensi { grid-template-columns: 1fr; }
}

/* ===========================================================================
   [PATCH91] LAMPIRAN DI RINCIAN TIKET
   =========================================================================== */

.kdl-lampiran {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kdl-lampiran-item {
    width: 108px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: .3rem;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    text-align: center;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.kdl-lampiran-item:hover  { border-color: #007bff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.kdl-lampiran-item:focus-visible { outline: 3px solid rgba(0,123,255,.45); outline-offset: 1px; }

/* Tinggi gambar kecil dipatok supaya baris lampiran tetap rata walau ada
   tangkapan layar yang sangat panjang. object-fit: cover memotong bagian
   bawahnya, bukan memipihkannya — gambar yang dipipihkan tidak bisa dikenali. */
.kdl-lampiran-item img {
    display: block;
    width: 100%;
    height: 76px;
    object-fit: cover;
    background: #f1f3f5;
}

.kdl-lampiran-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    font-size: 1.9rem;
    color: #6c757d;
    background: #f1f3f5;
}

.kdl-lampiran-nama {
    display: block;
    padding: .25rem .3rem;
    font-size: .68rem;
    line-height: 1.2;
    color: #495057;
    /* Satu baris saja. Nama berkas dari kamera HP bisa 40 karakter dan akan
       membuat tinggi tiap kotak berbeda-beda. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    /* Tiga per baris di layar HP, mengisi lebar yang ada. */
    .kdl-lampiran-item { width: calc((100% - 1rem) / 3); }
    .kdl-lampiran-item img,
    .kdl-lampiran-ikon { height: 68px; }
}

/* [PATCH92] Penanda lampiran & catatan galat di daftar. Kecil dan tidak
   berwarna: ia keterangan, bukan peringatan — lencana merah di setiap baris
   akan menenggelamkan lencana status yang justru harus dilihat. */
.kdl-penanda {
    font-weight: 400;
    font-size: .68rem;
    vertical-align: middle;
    color: #6c757d;
}


/* ─────────────────────────────────────────────────────────────────────────────
   [PATCH107] Catatan internal di utas tiket
   ─────────────────────────────────────────────────────────────────────────────
   Warnanya sengaja berbeda tajam dari komentar biasa, bukan sekadar ikon
   gembok kecil. Yang menulisnya harus tahu PERSIS bahwa pelapor tidak
   melihatnya — kalau ragu, ia akan menulis setengah-setengah, dan catatan
   setengah tidak menolong siapa pun. */
.kdl-utas-internal {
    background: #fff8e1;
    border-left: 3px solid #f0a500;
}
.kdl-utas-internal .kdl-utas-kaki b { color: #a06a00; }
/* [PATCH132] Blok prefers-color-scheme di sini DIHAPUS.
   Portal ini tidak punya tema gelap: tidak ada saklar, tidak ada kelas
   dark-mode, tidak ada berkas gaya gelap. Satu aturan yang diam-diam mengikuti
   setelan perangkat sementara seluruh kerangka halaman tetap putih bukan
   sebagian dari tema gelap, melainkan satu kotak yang warnanya berbeda tanpa
   sebab yang bisa dilihat pemakainya, dan tanpa cara mematikannya. */

/* --- [PATCH161] Lipatan "rincian tambahan" ------------------------------- */
/* Isian yang jarang diisi tidak dibuang, hanya dilipat. Yang dibuang berarti
   tidak bisa dipakai lagi oleh yang memang membutuhkannya; yang dilipat cuma
   berhenti menuntut perhatian orang yang tidak membutuhkannya. */
.kdl-lanjutan {
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.kdl-lanjutan > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    color: #495057;
    list-style: none;
    /* Ruang untuk panahnya. Tanpa ini, keterangan yang panjang berjalan
       sampai ke bawah panah dan keduanya saling menimpa. */
    padding-right: 1.5rem;
}

.kdl-lanjutan > summary::-webkit-details-marker { display: none; }

.kdl-lanjutan > summary::after {
    content: '\25BE';
    float: right;
    transition: transform .15s ease;
}

.kdl-lanjutan[open] > summary::after { transform: rotate(180deg); }
.kdl-lanjutan[open] > summary { margin-bottom: .75rem; }

/* Keterangan di bawah summary, terbaca saat lipatannya masih tertutup.
   display:block ditulis DI SINI, bukan menumpang kelas .d-block Bootstrap.
   Lipatan ini dipakai juga di modal yang dirakit JavaScript, dan judul yang
   menyatu dengan keterangannya dalam satu baris justru lebih ribet daripada
   sebelum dilipat. Ia tidak boleh bergantung pada berkas yang bisa gagal
   dimuat. */
.kdl-lanjutan-ket {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.4;
}

/* ═════════════════════════════════════════════════════════════════════════
   [PATCH162] Kepala modal detail: strip ringkas dan rincian yang dilipat.
   ═════════════════════════════════════════════════════════════════════════
   Kisi dua kolomnya memakai max-content, bukan kolom sepertiga Bootstrap.
   Label "PIC" tidak membutuhkan sepertiga lebar modal, dan ruang kosong
   sepertiga lebar di sebelah kiri setiap baris itulah yang membuat daftar
   tujuh belas baris terbaca berantakan. */
.kdl-ringkas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin-bottom: .4rem;
}

.kdl-ringkas-ket {
    font-size: .82rem;
    color: #56606a;
    margin-bottom: .75rem;
}

/* Bilah kemajuan. Tingginya sengaja tipis: ia keterangan, bukan tombol. */
.kdl-maju {
    height: .4rem;
    background: #d5dade;
    border-radius: .2rem;
    overflow: hidden;
    margin-bottom: .2rem;
}

.kdl-maju > span { display: block; height: 100%; background: #0069d9; }
.kdl-maju-ket    { margin-bottom: .75rem; }

.kdl-rinci {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .9rem;
    row-gap: .35rem;
    margin: 0;
}

.kdl-rinci dt { margin: 0; font-size: .85rem; font-weight: 600; }
.kdl-rinci dd { margin: 0; font-size: .85rem; }

/* Isian yang memang kosong. Dulu digambar sebagai tanda pisah sendirian,
   yang terbaca seperti nilai dan bukan seperti ketiadaan nilai. */
.kdl-kosong { color: #56606a; font-style: italic; }

.kdl-uraian {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .5rem;
    white-space: pre-wrap;
}

/* [PATCH162] Tanggapan pertama yang tenggangnya sudah lewat. Kelabu, bukan
   merah: ia keterangan bahwa hitungannya berhenti, bukan peringatan. */
.kdl-sla-usai { color: #56606a; }