/* ── DBP Sahbahasa admin theme overrides ────────────────────────── */

/* Feather icons inside buttons — keep proportional to button text */
.btn svg.feather,
.btn svg[class^="feather-"],
.btn i[data-feather] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    stroke-width: 2;
}
.btn-sm svg.feather,
.btn-sm svg[class^="feather-"],
.btn-sm i[data-feather] {
    width: 14px;
    height: 14px;
}
.btn-lg svg.feather,
.btn-lg svg[class^="feather-"],
.btn-lg i[data-feather] {
    width: 20px;
    height: 20px;
}

/* Action-div icons in DataTable rows — small consistent size */
.action-div svg.feather,
.action-div svg[class^="feather-"],
.action-div i[data-feather] {
    width: 16px;
    height: 16px;
}

/* ── DataTables — minimal sane defaults, no global overrides ───── */
/* Allow horizontal scroll on responsive wrapper when content exceeds container (Bootstrap default). */
html body .table-responsive {
    overflow-x: auto;
}

/* Lebar lajur IKUT KANDUNGAN (auto-layout lalai). Floor tema `min-width:150px`
   pada setiap header sudah dibuang (_update.scss) — jadi # ikut "1" (kecil) &
   setiap lajur sebesar kandungannya. Jadual yang melebihi bekas → scroll mendatar
   (wrapper .table-responsive). TIADA lebar dipaksa. */
html body table.dataTable > thead > tr > th,
html body table.dataTable > tbody > tr > td {
    white-space: nowrap;
    vertical-align: middle;
}

/* First column (#) — center sahaja (lebar ikut kandungan "1"). */
html body table.dataTable > thead > tr > th:first-child,
html body table.dataTable > tbody > tr > td:first-child {
    text-align: center;
}

/* Action column icons — tight inline layout. */
html body table.dataTable > tbody > tr > td .action-div {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

/* Badge — kekal satu baris. */
html body table.dataTable > tbody > tr > td .badge { white-space: nowrap; }

/* Lajur Tindakan (terakhir) — LEKAT di kanan supaya sentiasa kelihatan semasa
   scroll mendatar pada jadual lebar. (Pada jadual yang muat, tiada kesan.)

   PEMBETULAN H6 (UAT) — "jadual banyak lajur bertindan".
   PUNCA: peraturan "buang corak papan chess" di bawah menetapkan
   `background-color: transparent !important` pada SETIAP <td> table.dataTable.display.
   Latar `background: #fff` yang dahulunya ditetapkan di sini TIDAK mempunyai
   !important, jadi ia kalah — sel Tindakan yang lekat menjadi LUT SINAR dan
   lajur yang discroll di bawahnya menembus keluar. Itulah rupa "bertindan".
   PEMBETULAN: latar pejal !important pada SEMUA keadaan baris (biasa / ganjil /
   genap / lajur diisih / hover) + garis kiri eksplisit sebagai pemisah, kerana
   `border-collapse: collapse` menyembunyikan sempadan sel lekat. */
/* Lajur "Tindakan" lekat (sticky) DIBUANG atas arahan pemilik (29 Sep 2026).
   Jadual kini menatal mendatar secara biasa — lajur Tindakan menatal bersama
   lajur lain. Ini menghapuskan terus kelas pepijat yang menghasilkan rupa
   "lajur bertindan" (sel lekat yang lut sinar), dan bukan sekadar menampalnya
   dengan latar pejal. Pembalut .table-responsive kekal menyediakan skrol. */

/* Header sel terakhir kekal warna header semasa lekat. */
html body table.dataTable > thead > tr > th:last-child {
    background-color: #f8fafc !important;
    z-index: 3;
}

/* Teks panjang (tajuk permohonan, keterangan, alamat) dibenarkan membalut supaya
   ia tidak memanjangkan jadual sehingga lajur lain terhimpit. Sel pendek kekal
   nowrap seperti di atas. Guna kelas ini pada <td>/<div> dalam sel yang panjang. */
html body table.dataTable > tbody > tr > td .cell-wrap,
html body table.dataTable > tbody > tr > td.cell-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Bootstrap Offcanvas restore ────────────────────────────────
 * Riho theme's style.css overrides .offcanvas with `position: unset; visibility: visible`
 * which breaks Bootstrap 5 offcanvas component. Restore proper defaults below.
 * Keep selectors tight to avoid breaking the theme's own .offcanvas-bookmark usage. */
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-top,
.offcanvas.offcanvas-bottom {
    position: fixed !important;
    bottom: 0;
    z-index: 1045 !important;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden !important;
    background-color: #fff !important;
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s ease-in-out;
}

.offcanvas.offcanvas-start { top: 0; left: 0; width: 400px; border-right: 1px solid rgba(0,0,0,.2); transform: translateX(-100%); }
.offcanvas.offcanvas-end   { top: 0; right: 0; width: 400px; border-left: 1px solid rgba(0,0,0,.2); transform: translateX(100%); }
.offcanvas.offcanvas-top   { top: 0; right: 0; left: 0; height: 30vh; max-height: 100%; border-bottom: 1px solid rgba(0,0,0,.2); transform: translateY(-100%); }
.offcanvas.offcanvas-bottom{ right: 0; left: 0; height: 30vh; max-height: 100%; border-top: 1px solid rgba(0,0,0,.2); transform: translateY(100%); }

.offcanvas.show:not(.hiding),
.offcanvas.showing {
    transform: none !important;
    visibility: visible !important;
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}
.offcanvas-backdrop.fade { opacity: 0; }
.offcanvas-backdrop.show { opacity: 0.5; }

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.offcanvas-body {
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto;
}


/* ===================================================================
   Badge "Express" — lencana jenis permohonan ekspres.
   Diletak global di sini supaya SEMUA halaman management (Yajra
   DataTable: Agihan / Semakan / Pengesahan / Bayaran Balik dll.)
   memaparkan label Express dengan gaya yang konsisten — bukan lagi
   ditakrif inline per-view (punca label Express "hilang" pada halaman
   yang tiada definisi inline).
   =================================================================== */
.badge-express {
    background: linear-gradient(135deg, #7366ff, #a855f7);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   Management DataTables — tema halus (selaras estetik portal pemohon).
   Hanya menyentuh wrapper Yajra/DataTables (.dataTables_*) — tiada kesan
   pada jadual tersuai portal pemohon (yang tidak guna DataTables).
   ═══════════════════════════════════════════════════════════════════ */

/* — Baris kawalan atas (Papar N rekod + Carian) — */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 18px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 12.5px; color: #64748b; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
}
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 7px 30px 7px 12px; font-size: 12.5px; color: #475569;
    background-color: #fff; cursor: pointer; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 9px 14px; font-size: 13px; color: #1e293b;
    min-width: 250px; margin-left: 10px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0e7490; box-shadow: 0 0 0 3px rgba(14, 116, 144, .12);
}

/* — Jadual — */
/* collapse (bukan separate) elak lebihan 1px yang mencetuskan scrollbar mendatar. */
table.dataTable.display { border-collapse: collapse !important; }
table.dataTable.display thead th,
table.dataTable thead th {
    background: #f8fafc !important; color: #64748b !important;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 13px 16px !important;
    border-bottom: 1.5px solid #e2e8f0 !important; border-top: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    vertical-align: middle;
}
table.dataTable.display tbody td,
table.dataTable tbody td {
    padding: 13px 16px !important; font-size: 13px; color: #1e293b;
    vertical-align: middle; border-top: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
table.dataTable.display tbody tr { transition: background .15s; }
table.dataTable.display tbody tr:last-child td { border-bottom: 0 !important; }

/* Buang corak "papan chess": DataTables `order-column` melorek lajur isih &
   `stripe` melorek baris ganjil/genap. Paksa semua sel telus — garis baris
   mendatar sahaja, hover seluruh baris (bukan per-lajur). */
html body table.dataTable.display tbody td,
html body table.dataTable.display tbody td.sorting_1,
html body table.dataTable.display tbody td.sorting_2,
html body table.dataTable.display tbody td.sorting_3,
html body table.dataTable.display tbody tr.odd td,
html body table.dataTable.display tbody tr.even td,
html body table.dataTable.display tbody tr.odd > .sorting_1,
html body table.dataTable.display tbody tr.even > .sorting_1 {
    background-color: transparent !important;
}
html body table.dataTable.display tbody tr:hover > td { background-color: #eef6f7 !important; }

/* Anak panah isih lembut */
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after { opacity: .28; }

/* — Maklumat + Pagination — */
.dataTables_wrapper .dataTables_info {
    font-size: 12.5px; color: #94a3b8; padding-top: 18px; font-weight: 500;
}
/* Buang sebarang "kotak luar" pada kawasan pagination (border/bg/bayang). */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 14px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #e5e7eb !important; border-radius: 8px !important;
    padding: 6px 12px !important; margin-left: 5px !important;
    font-size: 12.5px !important; color: #475569 !important;
    background: #fff !important; box-shadow: none !important; transition: all .15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: #0e7490 !important; color: #0e7490 !important;
    background: #fff !important; box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #0e7490, #0891b2) !important;
    border: 1px solid #0e7490 !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(14, 116, 144, .3);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .4; box-shadow: none;
    border-color: #e5e7eb !important; color: #94a3b8 !important;
}

/* — Ikon tindakan dalam jadual (selaras butang act-btn pemohon) — */
table.dataTable .action-div { display: inline-flex; align-items: center; gap: 8px; }
table.dataTable .action-div .edit-icon,
table.dataTable .action-div .delete-svg,
table.dataTable .action-div a.edit-icon,
table.dataTable .action-div button.edit-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1.5px solid #e5e7eb; color: #64748b;
    transition: all .15s; background: #fff;
}
table.dataTable .action-div .edit-icon:hover,
table.dataTable .action-div button.edit-icon:hover {
    border-color: #0e7490; color: #0e7490; background: rgba(14, 116, 144, .06);
}
table.dataTable .action-div .delete-svg:hover {
    border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, .06);
}
table.dataTable .action-div i { width: 15px; height: 15px; }

/* Butang toggle Aktif/Nyahaktif menggunakan utiliti Bootstrap
   `border-0 bg-transparent p-0` (corak standard butang submit dalam action-div)
   yang membuang kotak — menyebabkan ia kelihatan berbeza dari ikon Sunting/Padam.
   Paksa kembali kotak (menang atas utiliti !important Bootstrap) supaya selaras. */
table.dataTable .action-div button.edit-icon {
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    padding: 0 !important;
}
table.dataTable .action-div button.edit-icon:hover {
    border-color: #0e7490 !important;
    background: rgba(14, 116, 144, .06) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Kepala kad senarai (HANYA kad yang mengandungi DataTable) — jalur biru
   bergradien selaras portal pemohon. Guna :has() supaya kad penapis &
   kad statistik (tiada DataTable) TIDAK terjejas.
   ═══════════════════════════════════════════════════════════════════ */
.card:has(table.display) > .card-header {
    /* Sama tona dengan sidebar (#0e7490) — gradien halus dalam keluarga warna sama. */
    background: linear-gradient(135deg, #0e7490 0%, #0c6178 100%) !important;
    border-top-left-radius: 15px; border-top-right-radius: 15px;
    border-bottom: 0 !important;
    padding: 16px 22px !important;
}
.card:has(table.display) > .card-header h3,
.card:has(table.display) > .card-header h4,
.card:has(table.display) > .card-header h5,
.card:has(table.display) > .card-header p,
.card:has(table.display) > .card-header span:not(.badge):not([class*="badge-"]) {
    color: #fff !important;
}
.card:has(table.display) > .card-header h4 { font-size: 16px; font-weight: 700; margin: 0; }

/* Butang dalam header gradien → varian putih lutsinar (cth. "Tambah", "Kapasiti") */
.card:has(table.display) > .card-header .btn {
    background: rgba(255, 255, 255, .15) !important;
    border: 1.5px solid rgba(255, 255, 255, .4) !important;
    color: #fff !important; border-radius: 8px; font-weight: 600;
    box-shadow: none !important;
}
.card:has(table.display) > .card-header .btn:hover {
    background: rgba(255, 255, 255, .28) !important;
}
.card:has(table.display) > .card-header .btn i,
.card:has(table.display) > .card-header .btn svg {
    color: #fff !important; stroke: #fff !important;
}

/* Kepala kad kumpulan akses (Edit Peranan) — guna jalur biru standard yang
   sama seperti kepala kad DataTable di atas, supaya konsisten satu portal. */
.perm-group-card > .card-header {
    background: linear-gradient(135deg, #0e7490 0%, #0c6178 100%) !important;
    border-bottom: 0 !important;
}
.perm-group-card > .card-header .form-check-label {
    color: #fff !important;
}

/* ── Badge status dalam jadual — kontras lebih baik & boleh dibaca ──
   (badge-light-* tema Riho terlalu pucat untuk lajur Status). ── */
html body table.dataTable .badge.badge-light-warning   { background: #fef3c7 !important; color: #b45309 !important; }
html body table.dataTable .badge.badge-light-info      { background: #dbeafe !important; color: #1e40af !important; }
html body table.dataTable .badge.badge-light-success   { background: #dcfce7 !important; color: #15803d !important; }
html body table.dataTable .badge.badge-light-primary   { background: #e0e7ff !important; color: #3730a3 !important; }
html body table.dataTable .badge.badge-light-secondary { background: #eef2f6 !important; color: #475569 !important; }
html body table.dataTable .badge.badge-light-danger    { background: #fee2e2 !important; color: #b91c1c !important; }
html body table.dataTable .badge.rounded-pill          { padding: 5px 12px; font-weight: 600; font-size: 11.5px; }

/* ── Badge bg-* solid: tema hanya set background (tiada warna teks), jadi teks
   ikut warna inherit gelap → tak nampak atas latar gelap. Tetapkan kontras
   ikut konvensyen Bootstrap: latar gelap → teks putih, warning (cerah) → gelap. */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-danger   { color: #fff !important; }
.badge.bg-warning  { color: #1f2937 !important; }

/* ── Menu sisi: tajuk panjang dipapar PENUH (bukan dipotong "...") ──────
   Tema Riho memaksa item paras-atas satu baris (white-space:nowrap +
   text-overflow:ellipsis), jadi label panjang spt "Agihan Permohonan
   Dokumen" / "Pengesahan Permohonan" terpotong. Kita benarkan teks
   membalut ke baris seterusnya, ikon kekal selari di atas. */
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link {
    display: flex !important;
    align-items: flex-start;
    white-space: normal !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link svg {
    flex: 0 0 auto;
    margin-top: 1px;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link span {
    flex: 1 1 auto;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.3;
}
/* Submenu (anak menu) — benarkan balut juga */
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   Select2 — padankan dengan Bootstrap 5 (form-control / form-select).
   Tema DEFAULT Select2 (tinggi 28px, jajaran terpesong, anak panah & ×
   tak ngam) tidak sepadan BS5. Override global ini membetulkan SEMUA
   select2 (single + multiple + dropdown) sekaligus.
   ═══════════════════════════════════════════════════════════════════ */
html body .select2-container { width: 100% !important; max-width: 100%; }

/* — Single — (px tetap + !important supaya menang atas tema/vendor) */
html body .select2-container--default .select2-selection--single {
    height: 38px !important;
    min-height: 38px;
    padding: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff;
    display: flex !important;
    align-items: center;
    position: relative;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 36px;
    line-height: 36px !important;
    padding-left: 0.75rem !important;
    padding-right: 2.5rem;
    color: #212529;
    font-size: 0.9rem;
    flex: 1 1 auto;
}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6c757d; }
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    top: 0 !important;
    right: 0.5rem;
}
html body .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: #94a3b8;
    font-weight: 700;
    line-height: 1;
}

/* — Multiple — */
html body .select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff;
    padding: 0.15rem 0.4rem;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e0e7ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: 0.3rem;
    padding: 2px 8px;
    margin: 2px 0;
    font-size: 0.825rem;
    display: inline-flex;
    align-items: center;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #4338ca;
    margin-right: 5px;
    border: 0;
    background: transparent;
    font-weight: 700;
}
html body .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 5px;
    line-height: 1.4;
}

/* — Fokus / buka (selaras tona teal portal) — */
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #0e7490;
    box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.15);
    outline: 0;
}

/* — Dropdown — */
html body .select2-dropdown {
    border-color: #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted {
    background-color: #0e7490;
    color: #fff;
}
html body .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e2e8f0;
    color: #1e293b;
}
html body .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
    padding: 0.35rem 0.5rem;
    outline: none;
}
html body .select2-search--dropdown .select2-search__field:focus { border-color: #0e7490; }
/* Siku tree-branch (::after) & titik bulat (::before) anak menu — PIN pada
   baris pertama. Tanpa ini, bila label membalut 2 baris, tema letak titik di
   `top:50%` (tengah teks) sedangkan siku kekal di atas → titik terapung tak
   ngam dengan hujung branch. Kita kunci kedua-duanya pada baris pertama:
   titik (tengah) = siku.top(4px) + siku.height(15px) = 19px. */
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a::after {
    top: 4px !important;
}
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a::before {
    top: 19px !important;
}

/* Blok "sticky-action" DIBUANG atas arahan pemilik (29 Sep 2026).
   Kelas .sticky-action pada jadual kini tidak memberi kesan; ia boleh
   ditinggalkan dalam markup tanpa mudarat. */

/* ==========================================================================
   Komponen <x-management.penyemakan-bahasa-card> — gaya global supaya komponen
   ini terurus sendiri di MANA-MANA halaman pengurusan (reviewer/approval/show,
   document-distribution/show, dll.) tanpa perlu menyalin <style> setiap kali.
   (Halaman lama masih ada salinan inline — tidak mengapa, nilai serupa.)
   ========================================================================== */
.peny-card {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
.peny-card-header {
    background: #1a78c2;
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.peny-card-body { padding: 0; }
.peny-table { width: 100%; border-collapse: collapse; }
.peny-table tr { border-bottom: 1px solid #e2e8f0; }
.peny-table tr:last-child { border-bottom: none; }
.peny-table th {
    background: #f8fafc;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    width: 18%;
    vertical-align: top;
    border-right: 1px solid #e2e8f0;
}
.peny-table td {
    padding: 9px 16px;
    font-size: 13px;
    color: #1e293b;
    width: 32%;
    vertical-align: middle;
    border-right: 1px solid #e2e8f0;
}
.peny-table td:last-child { border-right: none; }
.info-gambar-thumb {
    width: 130px; height: 82px; object-fit: cover;
    border-radius: 8px; border: 2px solid #e2e8f0;
    cursor: pointer; display: block;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.info-gambar-thumb:hover {
    border-color: #2563a8;
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(37, 99, 168, .25);
}
.info-gambar-placeholder {
    width: 130px; height: 82px;
    border-radius: 8px; border: 2px dashed #e2e8f0;
    background: #f8fafc; display: flex;
    align-items: center; justify-content: center;
    color: #94a3b8; font-size: 11px; text-align: center; line-height: 1.4;
}
.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 99px;
    font-size: 12px; font-weight: 600;
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* ── Cetakan Laporan (Pelaporan §11) ──────────────────────────────────────
   Setiap laporan sudah ada butang "Cetak" (window.print()). Tema asal
   menyembunyikan sidebar & page-header pada cetakan; peraturan di bawah
   membersihkan lagi keluaran cetak supaya HANYA kandungan laporan tercetak:
   - Sembunyikan butang tindakan (Cetak / Jana / Muat Turun / Set Semula) &
     widget customizer — tiada makna di atas kertas.
   - Kekalkan warna latar (banner statistik berwarna) semasa cetak.
   - Elak kad/jadual hasil terpotong di tengah halaman.
   Guna kelas `.d-print-none` (Bootstrap 5) pada mana-mana elemen lain yang
   tidak sepatutnya tercetak. */
@media print {
    .btn,
    .customizer-links,
    .customizer-contain,
    .d-print-none {
        display: none !important;
    }

    .card,
    table,
    tr {
        break-inside: avoid;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Border penuh untuk .table-bordered ───────────────────────────────────
   Tema Riho (style.css) hanya menetapkan border-COLOR untuk .table-bordered,
   bukan lebar/gaya, dan tiada peraturan child-selector Bootstrap 5 untuk
   border baris. Akibatnya baris kehilangan border ATAS/BAWAH (cth jadual
   Laporan Khidmat Pengesahan Bahasa — baris IBU PEJABAT tiada border bawah).
   Paksa border penuh pada setiap sel. Kecualikan Yajra DataTables (guna gaya
   sendiri tanpa .table-bordered). */
.table-bordered:not(.dataTable) > thead > tr > th,
.table-bordered:not(.dataTable) > thead > tr > td,
.table-bordered:not(.dataTable) > tbody > tr > th,
.table-bordered:not(.dataTable) > tbody > tr > td,
.table-bordered:not(.dataTable) > tfoot > tr > th,
.table-bordered:not(.dataTable) > tfoot > tr > td {
    border: 1px solid rgba(153, 153, 153, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   Sidebar collapse — kandungan terpotong di bawah rel
   (UAT Wildan Bil. 2: "Sidebar collapse — layout content rosak")

   PUNCA: tema Riho memberi `.sidebar-wrapper.close_icon { width: auto }`
   tetapi memberi `.page-body`/footer `margin-left: 90px` yang TETAP. Jadi
   90px itu hanya betul selagi lebar intrinsik rel kekal <= 90px.

   Dua perkara memecahkan andaian itu di sini:
     1. Logo. `.logo-icon-wrapper img` guna width:auto — logo DBP tersuai
        (180x76) melebar melebihi 90px, jadi `width:auto` terpaku pada logo.
     2. Label menu. Kita sendiri memaksa `white-space:normal` +
        `overflow:visible` pada span (supaya label panjang membalut semasa
        sidebar terbuka); span yang tersembunyi masih menyumbang lebar
        intrinsik apabila runtuh.

   Hasilnya rel melebar ~140px sementara kandungan hanya beranjak 90px —
   tajuk & teks tersembunyi di bawah sidebar.

   PEMBETULAN: kunci lebar runtuh kepada 90px supaya ia SEPADAN dengan
   margin yang tema beri kepada kandungan, dan halang logo/label daripada
   menolak lebar itu. Kembang-bila-hover (265px) dikekalkan.
   ═══════════════════════════════════════════════════════════════════ */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
    width: 90px;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover {
    width: 265px;
}

/* Logo tidak boleh menjadi lantai lebar rel. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper {
    display: none;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper img {
    max-width: 44px;
    height: auto;
    object-fit: contain;
}

/* Batalkan pembalutan label kita SENDIRI semasa runtuh — span tersembunyi
   tidak boleh menyumbang lebar. Dipulihkan semasa hover. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .sidebar-main .sidebar-links li a.sidebar-link span {
    display: none !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .sidebar-main .sidebar-links li a.sidebar-link span {
    display: block !important;
}

/* Kandungan & footer mesti mengikut lebar rel yang sama, tanpa ruang kosong. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ footer {
    margin-left: 90px;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body {
    width: auto;
    max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Ikon dalam .alert bertindih teks (UAT Wildan Bil. 24 — sambungan)

   PUNCA KEDUA, terlepas pada pusingan pertama: selain vertical-align,
   tema Riho memberi `.card-body .alert svg { position:absolute; top:18px }`
   dan mengimbanginya dengan `.card-body .alert svg ~ p { padding-left:20px }`.
   Imbangan itu HANYA terpakai apabila isi amaran ialah <p>. Amaran kita
   menggunakan <div> di dalam `.alert.d-flex`, jadi tiada padding diberi —
   ikon mutlak itu keluar dari aliran flex dan dilukis DI ATAS teks.

   PEMBETULAN: pulangkan ikon ke aliran normal khusus untuk amaran flex.
   Amaran gaya-tema (ikon + <p>) tidak disentuh, jadi tiada inden berganda.
   ═══════════════════════════════════════════════════════════════════ */
.alert.d-flex svg.feather,
.card-body .alert.d-flex svg.feather {
    position: static;
    top: auto;
    flex-shrink: 0;
}