/*
 * Tampilan Nyaman ERP MUBA
 *
 * Lapisan di atas tema Metronic untuk pengguna yang sebagian besar berusia
 * lanjut. Dasarnya riset NN/g tentang pengguna 65+ dan panduan sistem desain
 * perusahaan (SAP Fiori, Salesforce Lightning):
 *   - huruf besar dan kontras tinggi, bukan abu-abu tipis
 *   - target klik besar dengan jarak yang cukup
 *   - fokus keyboard yang terlihat jelas
 *   - pengguna bisa memperbesar huruf sendiri
 *
 * Tema memakai satuan rem terhadap font-size <html> (bawaan 13px), jadi
 * menaikkan satu angka itu membesarkan seluruh tampilan secara proporsional.
 * Ukuran "besar" dipilih lewat tombol Aa di header dan disimpan di browser.
 */

:root {
    --nyaman-teks: #1b2336;
    --nyaman-teks-sekunder: #3f4a5f;
    --nyaman-garis: #cfd6e2;
    --nyaman-baris-selang: #f6f8fb;
    --nyaman-baris-sorot: #eaf2ff;
    --nyaman-fokus: #1b84ff;
}

/* ---------------------------------------------------------------- ukuran huruf */

/* Tema mengunci `html, body { font-size: 13px !important }`, jadi di sini juga
   perlu !important dengan selektor yang lebih kuat. body mengikuti html. */
html:root { font-size: 15px !important; }
html:root[data-ukuran-huruf="besar"] { font-size: 18px !important; }
html:root body { font-size: 1rem !important; }

@media (max-width: 991.98px) {
    html:root { font-size: 14px !important; }
    html:root[data-ukuran-huruf="besar"] { font-size: 16px !important; }
}

/* ---------------------------------------------------------------- kontras teks */

body { color: var(--nyaman-teks); }

.text-muted,
.text-gray-500,
.text-gray-600 { color: var(--nyaman-teks-sekunder) !important; }

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { color: var(--nyaman-teks-sekunder); }
.breadcrumb .breadcrumb-item:last-child { color: var(--nyaman-teks); font-weight: 600; }

.form-label,
.col-form-label,
form label { color: var(--nyaman-teks); font-weight: 600; }

.form-control::placeholder,
.form-select::placeholder { color: #6b7589; }

.form-text { color: var(--nyaman-teks-sekunder); font-size: .95rem; }

/* ------------------------------------------------------------ isian dan tombol */

.form-control,
.form-select {
    min-height: 2.9rem;
    border-color: var(--nyaman-garis);
    color: var(--nyaman-teks);
}

.form-control[readonly],
.form-control:disabled { color: var(--nyaman-teks-sekunder); }

.btn { min-height: 2.75rem; font-weight: 600; }
.btn.btn-sm { min-height: 2.4rem; }
.btn.btn-icon { min-width: 2.75rem; }

/* Tanda wajib diisi lebih terlihat. */
.text-danger { color: #d0021b !important; }

/* Fokus keyboard selalu terlihat (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
.menu-link:focus-visible {
    outline: 3px solid var(--nyaman-fokus) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------- tabel */

.table > thead > tr > th {
    color: var(--nyaman-teks);
    font-weight: 700;
    background: #eef2f7;
    border-bottom: 2px solid var(--nyaman-garis) !important;
}

.table > :not(caption) > * > * { padding-top: .85rem; padding-bottom: .85rem; }

.table > tbody > tr:nth-of-type(even) > * { background-color: var(--nyaman-baris-selang); }
.table > tbody > tr:hover > * { background-color: var(--nyaman-baris-sorot); }

.dataTables_info,
.dataTables_length label,
.dataTables_filter label { color: var(--nyaman-teks); font-size: 1rem; }

/* Tombol aksi di tabel: jarak antar tombol supaya tidak salah klik. */
.table td .btn + .btn { margin-left: .35rem; }

/* Tombol aksi bertulisan (Lihat, Ubah, Hapus, ...) dari komponen grid. */
.table td .btn-aksi {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    margin-bottom: .3rem;
    white-space: nowrap;
}
.table td .btn-aksi i { font-size: .95rem; }
/* Tulisan putih di atas kuning sulit dibaca. */
.btn.btn-warning,
.btn.btn-warning i { color: #2e2300 !important; }

/* Pemilih data pada form: tombol "Pilih" bertulisan, tombol kosongkan netral. */
.input-group .btn-pilih { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.input-group .btn-kosongkan { color: var(--nyaman-teks-sekunder); border: 1px solid var(--nyaman-garis); }
.input-group .btn-kosongkan:hover { color: #b3001b; }
/* Kotak pemilih yang dibuka dengan diklik: kursor tangan sebagai petunjuk. */
.input-group input[readonly][onclick]:not([onclick=""]):not(:disabled) { cursor: pointer; }

/* ------------------------------------------------------------ menu samping */

.app-sidebar .menu-title { font-size: 1.05rem; color: var(--nyaman-teks); }
.app-sidebar .menu-sub .menu-title { font-size: 1rem; color: var(--nyaman-teks-sekunder); }
.app-sidebar .menu-link.active .menu-title { color: var(--nyaman-fokus); font-weight: 700; }
.app-sidebar .menu-link { padding-top: .6rem; padding-bottom: .6rem; }

/* Di ukuran besar menu samping dilebarkan supaya nama menu tidak terpotong. */
@media (min-width: 992px) {
    html:root[data-ukuran-huruf="besar"] body:not([data-kt-app-sidebar-minimize="on"]) {
        --bs-app-sidebar-width: 300px;
        --bs-app-sidebar-width-actual: 300px;
    }
}

/* Nama perusahaan di logo tidak dipecah ke dua baris. */
.app-sidebar-logo { display: inline-flex; align-items: center; gap: .5rem; }
.app-sidebar-logo span { white-space: nowrap; }

/* Keterangan tanda wajib di atas form. */
.keterangan-wajib {
    color: var(--nyaman-teks-sekunder);
    font-size: .95rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------ peringatan */

/* Tulisan kuning di atas latar kuning sulit dibaca; teksnya dibuat gelap. */
.alert-warning { color: #4a3800; border-color: #e0b300; }
.alert-warning strong { color: #2e2300; }
.alert-danger { color: #7a0012; }
.alert-success { color: #0b4d2a; }

/* ----------------------------------------------------- pengatur ukuran huruf */

.ukuran-huruf {
    display: inline-flex;
    border: 1px solid var(--nyaman-garis);
    border-radius: .6rem;
    overflow: hidden;
}
.ukuran-huruf button {
    border: 0;
    background: transparent;
    color: var(--nyaman-teks);
    font-weight: 700;
    padding: .35rem .8rem;
    min-height: 2.4rem;
    line-height: 1;
}
.ukuran-huruf button + button { border-left: 1px solid var(--nyaman-garis); }
.ukuran-huruf button[aria-pressed="true"] { background: var(--nyaman-fokus); color: #fff; }
.ukuran-huruf .kecil { font-size: .9rem; }
.ukuran-huruf .besar { font-size: 1.2rem; }

/* ------------------------------------------------------------------ gelap */

[data-bs-theme="dark"] {
    --nyaman-teks: #e6eaf2;
    --nyaman-teks-sekunder: #b8c0d0;
    --nyaman-garis: #3a4256;
    --nyaman-baris-selang: #1c2130;
    --nyaman-baris-sorot: #243049;
}
[data-bs-theme="dark"] .table > thead > tr > th { background: #232838; }

/* ------------------------------------------------------- tombol ekspor tabel */

/* Tombol ekspor DataTables kini bertulisan (Unduh CSV/PDF/Excel). */
.dt-buttons .btn,
.dt-buttons button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--nyaman-teks);
    padding: .5rem .9rem;
}
.dt-buttons .btn i,
.dt-buttons button i { font-size: 1.1rem; }