/* ── 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. Background pejal menutup kandungan di bawah,
   bayang halus di tepi kiri sebagai pemisah. (Pada jadual yang muat, tiada kesan.) */
html body table.dataTable > thead > tr > th:last-child,
html body table.dataTable > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -7px 0 9px -8px rgba(15, 23, 42, .22);
}
html body table.dataTable > tbody > tr > td:last-child {
    background: #fff;
}
html body table.dataTable.display tbody tr:hover > td:last-child {
    background: #eef6f7 !important;
}
/* Header sel terakhir kekal warna header semasa lekat. */
html body table.dataTable > thead > tr > th:last-child {
    background: #f8fafc !important;
    z-index: 3;
}

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