/* ==========================================================================
   OP BOOBLE — COMPONENTS
   --------------------------------------------------------------------------
   Default komponen untuk seluruh aplikasi (Bootstrap 4 + plugin).
   Penyesuaian khusus satu halaman ditulis di assets/css/pages/, bukan di sini.

     1. Tombol
     2. Badge
     3. Select2
     4. Modal
     5. Tabel
     6. Form
     7. Lampiran gambar
     8. Grafik
     9. DataTables (kontrol, tabel, info, pagination) — satu gaya untuk semua halaman
    10. Kerangka halaman: card, judul card, form, tombol (menyamakan halaman
        bergaya Datta Able lama dengan halaman modul yang sudah modern)
    11. Hero halaman (.app-hero) — partial application/views/admin/layout/page_hero.php
    12. Kotak statistik (.app-stat) untuk ringkasan angka
   ========================================================================== */


/* ==========================================================================
   1. TOMBOL
   Datta Able memberi .btn padding 10px 20px + margin-right 10px dan
   icon di dalamnya margin-right 12px; aplikasi ini memakai versi ringkas.
   ========================================================================== */
.btn {
    padding: 5px 10px;
    margin-right: 0;
}

.btn > i {
    margin: 0;
}


/* ==========================================================================
   2. BADGE
   ========================================================================== */
.badge {
    font-size: 85%;
}

/* Badge yang dipakai sebagai catatan panjang: boleh turun baris di layar sempit */
.badge.badge--wrap {
    white-space: normal;
    text-align: left;
    line-height: var(--app-lh-base);
}

/* Warna status tambahan yang tidak ada di Bootstrap 4 */
.badge-purple {
    background-color: var(--app-purple);
    color: var(--app-on-primary);
}


/* ==========================================================================
   3. SELECT2
   Tinggi disamakan dengan input form Datta Able (42px).
   Selector .select2-container .select2-selection setara spesifisitasnya
   dengan select2.min.css (dimuat lebih dulu), sehingga cukup tanpa !important.
   ========================================================================== */
.select2 {
    font-size: var(--app-fs-md);
}

.select2-container .select2-selection {
    padding: 6px 20px;
    height: 42px;
}

.select2-container--default .select2-selection--single {
    background-color: var(--app-bg);
}

.select2-selection__arrow {
    margin-top: 6px;
}

/* Select2 menulis lebar container sebagai inline style (px/%);
   batasi agar tidak melebihi kolom induk di layar sempit. */
.select2-container {
    max-width: 100%;
}


/* ==========================================================================
   4. MODAL
   Backdrop di bawah modal agar modal bertumpuk (modal di atas modal) tetap
   bisa diklik.
   ========================================================================== */
.modal-backdrop {
    z-index: var(--app-z-backdrop);
}

.modal {
    z-index: var(--app-z-modal);
}


/* ==========================================================================
   5. TABEL
   ========================================================================== */

/* Default: isi sel boleh turun baris. Tabel yang memang perlu satu baris
   (tanggal, angka, tabel lebar yang digeser horizontal) mengaturnya di CSS
   halaman atau dengan .text-nowrap. */
td {
    white-space: normal;
}


/* ==========================================================================
   6. FORM
   ========================================================================== */

/* Select/input ringkas di baris filter (pengganti style="padding:3px") */
.form-control.form-control-compact {
    padding: 3px;
}

/* Input tanggal/jam yang lebih lapang di form pengajuan */
.form-control.form-control-roomy {
    padding: .4rem 1rem;
}

/* Select/input di dalam sel tabel DataTables (status, prioritas, PIC).
   Lebar lewat modifier agar kolom tabel tetap stabil.
   !important: menggantikan inline style dan harus menang atas
   select.form-control:not([size]):not([multiple]) Bootstrap serta rule
   tabel ber-id di CSS halaman. */
.app-cell-select {
    height: 35px !important;
    padding: 5px !important;
}

.app-cell-select--sm { width: 80px !important; }
.app-cell-select--md { width: 120px !important; }
.app-cell-select--lg { width: 170px !important; }

/* Input kecil di sel tabel (mis. progres %), tinggi mengikuti isi */
.app-cell-input {
    padding: 5px !important;
}

.app-cell-input--xs { width: 50px !important; }


/* ==========================================================================
   7. LAMPIRAN GAMBAR (bukti complaint / layanan CS)
   ========================================================================== */
.app-attachment-img {
    border: 1px solid #e3e3e3;
    margin-bottom: 10px;
}

.app-attachment-img--inline {
    margin-right: 10px;
}



/* ==========================================================================
   8. GRAFIK
   Wadah chart Morris/Chart.js yang dirender dari controller (Admin, Project).
   ========================================================================== */
.app-chart {
    height: 300px;
}


/* ==========================================================================
   9. DATATABLES
   Satu tampilan untuk semua tabel DataTables di aplikasi. Halaman TIDAK
   menata ulang bagian ini; cukup atur kolom/isi sel khusus di CSS halaman.
   Selector diawali div.dataTables_wrapper agar setara dengan
   dataTables.bootstrap4.css (dimuat lebih dulu) tanpa !important.
   ========================================================================== */

/* ---------- 9.1 Baris kontrol atas (Show entries + Search) & bawah ---------- */
div.dataTables_wrapper > .row {
    align-items: center;
}

div.dataTables_wrapper > .row:first-child {
    margin-bottom: var(--app-space-3);
}

div.dataTables_wrapper > .row:last-child {
    margin-top: var(--app-space-3);
    row-gap: var(--app-space-2);
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-2);
    margin: 0;
    color: var(--app-muted);
    font-size: var(--app-fs-sm);
    font-weight: var(--app-fw-regular);
}

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: var(--app-space-1) var(--app-space-3);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background-color: var(--app-surface);
    color: var(--app-text);
    font-size: var(--app-fs-sm);
    box-shadow: none;
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    padding-right: var(--app-space-6);
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 220px;
    margin-left: 0;
}

div.dataTables_wrapper div.dataTables_length select:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--app-primary);
    box-shadow: var(--app-focus-ring);
    outline: 0;
}

/* ---------- 9.2 Tabel ----------
   Standar semua tabel data di konten (.table Bootstrap & DataTables):
   header 11px uppercase, sel 13px, padding 12px, garis baris lembut. */
table.dataTable,
.main-body .table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

table.dataTable > thead > tr > th,
div.dataTables_scrollHead table > thead > tr > th,
.main-body .table > thead > tr > th {
    height: auto;
    padding: var(--app-space-3);
    border-top: 0;
    border-bottom: 1px solid var(--app-table-head-border);
    background-color: var(--app-table-head-bg);
    color: var(--app-table-head-text);
    font-size: var(--app-fs-xs);
    font-weight: var(--app-fw-bold);
    line-height: 1.3;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
}

table.dataTable > tbody > tr > td,
.main-body .table > tbody > tr > td {
    padding: var(--app-space-3);
    border-top: 1px solid var(--app-table-border);
    color: var(--app-table-text);
    font-size: var(--app-fs-base);
    line-height: var(--app-lh-base);
    vertical-align: middle;
}

.main-body .table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.table-striped > tbody > tr.odd {
    background-color: var(--app-table-row-alt);
}

table.dataTable > tbody > tr:hover,
.main-body .table-hover > tbody > tr:hover {
    background-color: var(--app-table-row-hover);
}

/* .table-bordered di konten mengikuti standar: hanya garis antar baris,
   tanpa garis kolom vertikal (agar sama dengan tabel lain). */
.main-body .table-bordered,
table.dataTable.table-bordered {
    border: 0;
}

.main-body .table-bordered > thead > tr > th,
.main-body .table-bordered > tbody > tr > td,
table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > tbody > tr > td {
    border-left: 0;
    border-right: 0;
}

/* Kolom yang bisa diurutkan: ruang untuk panah di kanan, panah di tengah
   vertikal (bawaan DataTables menaruhnya di dasar sel). */
table.dataTable > thead > tr > th.sorting,
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
    padding-right: 26px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    font-size: var(--app-fs-sm);
}

/* ---------- 9.3 Info & pagination ---------- */
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
    color: var(--app-muted);
    font-size: var(--app-fs-sm);
    white-space: normal;
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    flex-wrap: wrap;
    gap: var(--app-space-1);
    justify-content: flex-end;
    margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 var(--app-space-3);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background-color: var(--app-surface);
    color: var(--app-text-soft);
    font-size: var(--app-fs-sm);
    font-weight: var(--app-fw-semibold);
    line-height: 1;
    box-shadow: none;
    transition: background-color var(--app-transition), border-color var(--app-transition), color var(--app-transition);
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link:hover {
    border-color: var(--app-border-strong);
    background-color: var(--app-surface-hover);
    color: var(--app-primary);
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link:focus {
    box-shadow: var(--app-focus-ring);
}

div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link {
    border-color: var(--app-primary);
    background-color: var(--app-primary);
    color: var(--app-on-primary);
}

div.dataTables_wrapper div.dataTables_paginate .page-item.disabled .page-link {
    border-color: var(--app-border-soft);
    background-color: var(--app-surface-muted);
    color: var(--app-placeholder);
}

/* Elipsis "…" tampil sebagai teks, bukan tombol */
div.dataTables_wrapper div.dataTables_paginate .page-item[id$="_ellipsis"] .page-link {
    min-width: 20px;
    padding: 0 var(--app-space-1);
    border-color: transparent;
    background-color: transparent;
}

/* ---------- 9.4 Indikator "Processing" ---------- */
div.dataTables_wrapper div.dataTables_processing {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: var(--app-text-soft);
    font-size: var(--app-fs-sm);
    box-shadow: var(--app-shadow-md);
}

/* ---------- 9.5 Tablet & HP ---------- */
@media (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left;
    }

    div.dataTables_wrapper div.dataTables_filter {
        margin-top: var(--app-space-2);
    }

    div.dataTables_wrapper div.dataTables_filter label {
        display: flex;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        flex: 1 1 auto;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-start;
        margin-top: var(--app-space-2);
    }
}


/* ==========================================================================
   10. KERANGKA HALAMAN
   Halaman lama memakai markup Datta Able: section.content > .card >
   .card-header > .card-title + .card-body. Aturan di bawah menyamakan
   tampilannya dengan card modul modern (radius, border, shadow, judul).
   Dibatasi .main-body agar modal/komponen lain di luar konten tidak ikut.
   ========================================================================== */

/* ---------- 10.1 Card ---------- */
.main-body .card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    margin-bottom: var(--app-space-4);
}

.main-body .card > .card-header {
    padding: 14px var(--app-space-5);
    border-bottom: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl) var(--app-radius-xl) 0 0;
    background-color: var(--app-surface);
}

.main-body .card > .card-header .card-title,
.app-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--app-heading);
    font-size: var(--app-fs-lg);
    font-weight: var(--app-fw-semibold);
    line-height: var(--app-lh-tight);
}

/* .app-card-title: class yang sama untuk judul card milik modul
   (msp-card-head, ae-card-title, att-card-title, ...).
   Kotak icon di depan judul card (acuan: card Daily Report).
   Judul yang punya <i> sendiri memakai icon itu; yang belum, memakai icon
   daftar standar lewat ::before. */
.main-body .card > .card-header .card-title > i:first-child,
.main-body .card > .card-header .card-title:not(:has(> i))::before,
.app-card-title > i:first-child,
.app-card-title:not(:has(> i))::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: var(--app-radius-md);
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: var(--app-fs-md);
}

.main-body .card > .card-header .card-title:not(:has(> i))::before,
.app-card-title:not(:has(> i))::before {
    content: "\f03a";                      /* fa-list */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.main-body .card > .card-body {
    padding: var(--app-card-padding);
}

/* ---------- 10.2 Form ---------- */
.main-body .form-control,
.modal .form-control {
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background-color: var(--app-surface);
    color: var(--app-text);
    transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

.main-body .form-control:focus,
.modal .form-control:focus {
    border-color: var(--app-primary);
    background-color: var(--app-surface);
    box-shadow: var(--app-focus-ring);
}

.main-body .form-control:disabled,
.main-body .form-control[readonly],
.modal .form-control:disabled,
.modal .form-control[readonly] {
    background-color: var(--app-surface-muted);
    color: var(--app-muted);
}

/* :not(.badge) — sebagian badge ditulis sebagai <label class="badge ...">;
   tanpa pengecualian ini warna teks badge tertimpa abu-abu & sulit dibaca */
.main-body label:not(.badge),
.modal label:not(.badge) {
    color: var(--app-text-soft);
    font-weight: var(--app-fw-semibold);
}

/* Label di depan/belakang input (input-group) — netral, bukan tombol */
.main-body .input-group-text,
.modal .input-group-text {
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-md);
    background-color: var(--app-surface-muted);
    color: var(--app-label);
    font-size: var(--app-fs-sm);
    font-weight: var(--app-fw-semibold);
}

/* ---------- 10.3 Tombol ---------- */
.main-body .btn,
.modal .btn {
    border-radius: var(--app-radius-md);
    font-weight: var(--app-fw-semibold);
}

.main-body .btn-sm,
.modal .btn-sm {
    border-radius: var(--app-radius-sm);
}

.main-body .btn:focus-visible,
.modal .btn:focus-visible {
    box-shadow: var(--app-focus-ring);
}


/* ==========================================================================
   11. HERO HALAMAN (.app-hero)
   Header standar: icon brand + judul + subjudul. Sama dengan hero modul
   (att-hero, db-hero, dr-hero, ...) agar semua halaman terasa satu aplikasi.
   ========================================================================== */
.app-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-5);
    margin-bottom: var(--app-space-4);
    padding: 18px var(--app-space-5);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}

.app-hero__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: var(--app-radius-xl);
    background: var(--app-gradient-brand);
    color: var(--app-on-primary);
    font-size: var(--app-fs-xl);
    box-shadow: var(--app-shadow-brand);
}

.app-hero__text {
    min-width: 0;
}

.app-hero__title {
    margin: 0;
    color: var(--app-heading);
    font-size: var(--app-fs-xl);
    font-weight: var(--app-fw-bold);
    line-height: var(--app-lh-tight);
}

.app-hero__subtitle {
    margin: var(--app-space-1) 0 0;
    color: var(--app-muted);
    font-size: var(--app-fs-sm);
    line-height: var(--app-lh-base);
}

@media (max-width: 767px) {
    .app-hero {
        padding: var(--app-space-3);
        gap: var(--app-space-3);
    }

    .app-hero__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: var(--app-fs-lg);
    }

    .app-hero__title {
        font-size: var(--app-fs-lg);
    }
}