/* ---------------------------------------------------------------------------
   SIApps color system — aplikasi (Center, SIKARTIK, SIMTA, auth, galat)
   ---------------------------------------------------------------------------
   Satu sumber kebenaran untuk warna chrome aplikasi. Dimuat SETELAH style.css
   dan components.css di seluruh layout yang memakai template Stisla: baseCenter,
   baseSikartik, baseSimta, auth, external, dan halaman galat 404/500/503.

   Aturan peran:
     - Identitas (biru) dipakai untuk aksi, tautan, keadaan aktif, dan tile
       metrik. Bukan untuk hiasan.
     - Sukses / peringatan / bahaya / info hanya untuk keadaan yang benar-benar
       berarti begitu. Tidak ada merah untuk tombol cetak atau badge "Baru".
     - Bidang netral (canvas, surface, border, teks) tidak boleh lebih dari
       satu peran.

   Satu sumber kebenaran:
     Nilai heksadesimal identitas hanya boleh hidup di blok :root di bawah.
     style.css, components.css, skins/reverse.css, dan blok <style> pada view
     merujuk token ini lewat var(--color-*), tidak menyalin nilainya.
     Pengecualian: landing-page.css punya token sendiri (--primary-color) yang
     nilainya wajib disamakan manual dengan --color-primary.

   Semua pasangan teks/latar di bawah sudah diukur (WCAG 2.1) dan lulus:
     putih di primary 5.04 · success 4.52 · warning 4.52 · danger 4.51 ·
     info 4.52 · secondary 5.54 · primary-hover 6.56
     primary di canvas 4.65 · primary di surface 5.04 · primary di soft 4.53
     text di surface 11.09 · muted di canvas 4.51
     focus di surface 5.61 · focus di canvas 5.18
   Identitas ini menggantikan indigo Stisla (#6777ef) dan biru landing lama
   (#1878d4, hanya 4.49:1 sebagai isian berteks putih dan 4.15:1 sebagai teks di
   kanvas). Nilai OKLCH dicantumkan sebagai koordinat sumber; CSS tetap
   heksadesimal agar konsisten dengan sisa template dan aman di browser lama.
   --------------------------------------------------------------------------- */

:root {
    /* Kanvas & permukaan */
    --color-canvas: #f4f6f9;        /* oklch(0.972 0.005 258) */
    --color-surface: #ffffff;       /* oklch(1.000 0.000 90)  */
    --color-surface-2: #f8fafb;     /* oklch(0.984 0.003 229) */
    --color-border: #e3eaef;        /* oklch(0.933 0.010 239) */

    /* Tinta */
    --color-text: #34395e;          /* oklch(0.358 0.064 277) */
    --color-text-muted: #66737a;    /* oklch(0.547 0.019 231) */

    /* Identitas — biru landing, digelapkan satu langkah agar lolos AA */
    --color-primary: #1670c6;       /* oklch(0.542 0.155 253) */
    --color-primary-hover: #12609f; /* oklch(0.479 0.123 249) */
    --color-primary-soft: #eaf4fd;  /* oklch(0.962 0.016 245) */
    --color-primary-shadow: #a9c9ea; /* oklch(0.815 0.055 243) */
    --color-primary-wash: rgba(22, 112, 198, 0.05);

    /* Fokus & seleksi */
    --color-focus: #1468bd;         /* oklch(0.518 0.153 254) */
    --color-selection: #d7e8fb;     /* oklch(0.924 0.032 251) */

    /* Keadaan */
    --color-success: #0b8936;       /* oklch(0.551 0.157 148) */
    --color-success-hover: #0a7a30; /* oklch(0.507 0.143 148) */
    --color-warning: #a86805;       /* oklch(0.574 0.125 68)  */
    --color-warning-hover: #965d04; /* oklch(0.530 0.115 68)  */
    --color-danger: #de3531;        /* oklch(0.592 0.206 27)  */
    --color-danger-hover: #c62f2c;  /* oklch(0.545 0.188 27)  */
    --color-info: #077fad;          /* oklch(0.562 0.115 233) */
    --color-info-hover: #066e96;    /* oklch(0.507 0.103 233) */

    /* Netral aksi & nonaktif */
    --color-secondary: #5f6a72;         /* oklch(0.518 0.018 239) */
    --color-secondary-hover: #4f5a62;   /* oklch(0.461 0.019 239) */
    --color-disabled-bg: #e9ecef;       /* oklch(0.942 0.005 248) */
    --color-disabled-text: #6c757d;     /* oklch(0.558 0.016 245) */

    /* Bayangan tombol: netral, supaya warna isian yang bicara */
    --shadow-btn: 0 2px 6px rgba(52, 57, 94, 0.16);

    /* Cincin fokus mewarisi token fokus (dipakai blok a11y di style.css) */
    --focus-ring: var(--color-focus);
}

/* --- Kanvas, tautan, tinta ------------------------------------------------- */

body {
    background-color: var(--color-canvas);
}

a {
    color: var(--color-primary);
}
a:hover,
a:focus {
    color: var(--color-primary-hover);
}

.text-primary,
.text-primary-all *,
.text-primary-all *:before,
.text-primary-all *:after {
    color: var(--color-primary) !important;
}
.text-muted {
    color: var(--color-text-muted) !important;
}
.text-danger,
.text-danger-all *,
.text-danger-all *:before,
.text-danger-all *:after {
    color: var(--color-danger) !important;
}
.text-success {
    color: var(--color-success) !important;
}
.text-warning {
    color: var(--color-warning) !important;
}
.text-info {
    color: var(--color-info) !important;
}

::selection {
    background-color: var(--color-selection);
    color: var(--color-text);
}

/* --- Tombol aksi ----------------------------------------------------------- */

.btn-primary,
.btn-primary.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover);
}

.btn-success,
.btn-success.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active {
    background-color: var(--color-success-hover) !important;
    color: #fff !important;
}

.btn-warning,
.btn-warning.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active {
    background-color: var(--color-warning-hover) !important;
    color: #fff !important;
}

.btn-danger,
.btn-danger.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active {
    background-color: var(--color-danger-hover) !important;
}

.btn-info,
.btn-info.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active {
    background-color: var(--color-info-hover) !important;
}

/* Netral. Sebelumnya #cdd3d8 dengan teks putih = 1.6:1, tidak terbaca. */
.btn-secondary,
.btn-secondary.disabled {
    box-shadow: var(--shadow-btn);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active {
    background-color: var(--color-secondary-hover) !important;
}

.btn-outline-primary,
.btn-outline-primary.disabled {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.disabled:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary.disabled:active {
    background-color: var(--color-primary) !important;
}

.btn-outline-success,
.btn-outline-success.disabled {
    border-color: var(--color-success);
    color: var(--color-success);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.disabled:hover,
.btn-outline-success.disabled:focus,
.btn-outline-success.disabled:active {
    background-color: var(--color-success) !important;
}

.btn-outline-warning,
.btn-outline-warning.disabled {
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.disabled:hover,
.btn-outline-warning.disabled:focus,
.btn-outline-warning.disabled:active {
    background-color: var(--color-warning) !important;
}

.btn-outline-danger,
.btn-outline-danger.disabled {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.disabled:hover,
.btn-outline-danger.disabled:focus,
.btn-outline-danger.disabled:active {
    background-color: var(--color-danger) !important;
}

.btn-outline-info,
.btn-outline-info.disabled {
    border-color: var(--color-info);
    color: var(--color-info);
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.disabled:hover,
.btn-outline-info.disabled:focus,
.btn-outline-info.disabled:active {
    background-color: var(--color-info) !important;
}

.btn-outline-secondary,
.btn-outline-secondary.disabled {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.disabled:hover,
.btn-outline-secondary.disabled:focus,
.btn-outline-secondary.disabled:active {
    background-color: var(--color-secondary-hover) !important;
}

.btn-link {
    color: var(--color-primary);
}
.btn-link:hover,
.btn-link:focus {
    color: var(--color-primary-hover);
}

.btn-group .btn.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* --- Utilitas latar & tile metrik ----------------------------------------- */

.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-success {
    background-color: var(--color-success) !important;
}
.bg-warning {
    background-color: var(--color-warning) !important;
}
.bg-danger {
    background-color: var(--color-danger) !important;
}
.bg-info {
    background-color: var(--color-info) !important;
}

/* Varian identitas untuk kartu informasi: ikon identitas di permukaan lembut,
   supaya tidak bersaing dengan tile metrik yang berisi. */
.bg-primary-soft {
    background-color: var(--color-primary-soft) !important;
}
.card.card-statistic-1 .card-icon.bg-primary-soft i,
.card.card-statistic-2 .card-icon.bg-primary-soft i {
    color: var(--color-primary);
}

/* --- Rangka aplikasi: navbar, sidebar, kartu, footer ----------------------- */

.navbar-bg {
    background-color: var(--color-primary);
}

.main-sidebar {
    background-color: var(--color-surface);
}
.main-sidebar .sidebar-menu li a {
    color: var(--color-text-muted);
}
.main-sidebar .sidebar-menu li a:hover {
    background-color: var(--color-surface-2);
}
.main-sidebar .sidebar-menu li.active a,
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active a {
    color: var(--color-primary);
}

.card {
    background-color: var(--color-surface);
}
.card .card-header h4 {
    color: var(--color-primary);
}
.card.card-statistic-1 .card-header h4,
.card.card-statistic-2 .card-header h4 {
    color: var(--color-text-muted);
}
.main-footer {
    color: var(--color-text-muted);
}

/* --- Tabel, paginasi, pil, dropdown, progres ------------------------------- */

.table td,
.table th {
    border-color: var(--color-border);
}

.page-link {
    color: var(--color-primary);
}
.page-link:hover,
.page-link:focus {
    color: var(--color-primary-hover);
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
}
.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary);
}

a.dropdown-item:active,
a.dropdown-item.active {
    background-color: var(--color-primary);
}

.progress-bar {
    background-color: var(--color-primary);
}

/* --- Lencana keadaan ------------------------------------------------------- */

.badge.badge-primary {
    background-color: var(--color-primary);
}
.badge.badge-success {
    background-color: var(--color-success);
}
.badge.badge-warning {
    background-color: var(--color-warning);
}
.badge.badge-danger {
    background-color: var(--color-danger);
}
.badge.badge-info {
    background-color: var(--color-info);
}
.badge.badge-secondary {
    color: var(--color-text);
}

/* --- Formulir -------------------------------------------------------------- */

.form-control:focus,
.input-group-text:focus,
.custom-select:focus,
.custom-file-label:focus {
    border-color: var(--color-focus);
}

.form-control[aria-invalid="true"],
.custom-select[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.form-control:disabled,
.custom-select:disabled,
.form-control[readonly] {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}

/* --- Drop zone unggah berkas ----------------------------------------------- */

/* Border dasar zona; sebelumnya ter-scope ke pembungkus tabel/modal yang tidak
   pernah ada di view, sehingga zona tampil tanpa penanda sampai di-hover. */
.custom-upload-area {
    border: 2px dashed var(--color-border);
    background-color: var(--color-surface-2);
    cursor: pointer;
    transition: all .2s;
}

/* Nilai !important menembus atribut style inline pada elemennya. */
.custom-upload-area:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary-soft) !important;
}

/* Stisla membatasi lebar <p> di dalam .card-body (68ch) demi keterbacaan teks
   panjang. Di zona unggah batas itu membuat label tidak selebar zonanya,
   sehingga teks tidak sepusat dengan ikon di atasnya. Selektor dua kelas
   dipakai agar setara dengan spesifisitas aturan Stisla tersebut. */
.custom-upload-area .upload-preview p,
.custom-upload-area .upload-info p {
    max-width: none;
}

.custom-upload-area.dragover {
    border-color: var(--color-primary) !important;
    background-color: var(--color-selection) !important;
}