/* =========================================================================
   SiAK — Global component theme
   Menyeragamkan warna form, card, button, tabel, pagination, dsb. dengan
   tema sidebar (css/sidebar.css). Layer ini di-load PALING AKHIR pada
   AppAsset/LoginAsset sehingga menimpa AdminLTE 3, Bootstrap 4, dan site.css.

   Prinsip:
   - Keluarga "brand/primary" (simpan, tambah, submit, header card, fokus form,
     link, pagination, tab aktif) → gradasi biru sidebar + aksen mint.
   - Warna semantik dipertahankan: danger (merah = hapus), warning (kuning =
     edit), serta badge status bg-success/bg-warning/bg-danger.
   Semua tweak warna brand terpusat di file ini + css/sidebar.css.
   ========================================================================= */

:root {
    /* Selaras dengan .main-sidebar (css/sidebar.css) & halaman login */
    --brand: #0a86bd;
    --brand-strong: #065a80;
    --brand-darker: #054b6b;
    --brand-light: #51adcf;
    --brand-mint: #a5ecd7;
    --brand-tint: rgba(10, 134, 189, 0.08);
    --brand-ring: rgba(10, 134, 189, 0.25);
    --brand-grad: linear-gradient(180deg, #0a86bd 0%, #065a80 100%);
    --brand-grad-hover: linear-gradient(180deg, #097aad 0%, #054f70 100%);
    --brand-grad-active: linear-gradient(180deg, #065a80 0%, #054b6b 100%);
}

/* =========================================================================
   1. Buttons
   ========================================================================= */

/* Primary action family — Simpan / Tambah / Submit / primary */
.btn-primary,
.btn-success,
.primary-btn,
.btn.primary-btn,
.btn-primary.disabled,
.btn-success.disabled {
    background: var(--brand-grad) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(6, 90, 128, 0.20);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.btn-primary:hover,
.btn-success:hover,
.primary-btn:hover {
    background: var(--brand-grad-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(6, 90, 128, 0.30);
}

.btn-primary:active,
.btn-success:active,
.primary-btn:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--brand-grad-active) !important;
    transform: translateY(1px);
}

.btn-primary:focus,
.btn-success:focus,
.primary-btn:focus,
.btn-primary.focus,
.btn-success.focus {
    box-shadow: 0 0 0 0.2rem var(--brand-ring) !important;
}

/* Secondary blue — "Lihat"/view (btn-info) sits below the primary in hierarchy */
.btn-info {
    background: var(--brand-light) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.btn-info:hover {
    background: #3f9cc0 !important;
    color: #fff !important;
}

.btn-info:focus,
.btn-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(81, 173, 207, 0.40) !important;
}

/* Outline variants → brand */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
    color: var(--brand) !important;
    border-color: var(--brand-light) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* Neutral — Kembali / Batal (btn-default & btn-secondary) */
.btn-default {
    background: #f1f4f6 !important;
    border: 1px solid #d7dee3 !important;
    color: #37474f !important;
}

.btn-default:hover {
    background: #e6ecef !important;
    border-color: #c6d0d6 !important;
    color: #1f2d33 !important;
}

/* Text/link buttons */
.btn-link {
    color: var(--brand) !important;
}

.btn-link:hover {
    color: var(--brand-strong) !important;
}

/* Semantic buttons (danger = hapus, warning = edit) dibiarkan; hanya rapikan fokus */
.btn-warning:focus,
.btn-warning.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.35) !important;
}

.btn-danger:focus,
.btn-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.35) !important;
}

/* Rounded, consistent with sidebar nav pills */
.btn {
    border-radius: 8px;
}

.btn-sm {
    border-radius: 7px;
}

/* =========================================================================
   2. Cards
   ========================================================================= */

.card {
    border: 1px solid #e4eaef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(6, 90, 128, 0.06);
}

.card > .card-header {
    border-bottom: 1px solid #eef2f5;
    border-radius: 12px 12px 0 0;
}

.card > .card-footer {
    background: #f8fafb;
    border-top: 1px solid #eef2f5;
    border-radius: 0 0 12px 12px;
}

/* Solid brand headers — card-primary / card-info / card-success + typo helpers
   .primary-bg / .brimary-bg yang dipakai di banyak view tapi belum terdefinisi. */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-header.primary-bg,
.card-header.brimary-bg {
    background: var(--brand-grad) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.card-primary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header .card-title,
.card-success:not(.card-outline) > .card-header .card-title,
.card-header.primary-bg .card-title,
.card-header.brimary-bg .card-title,
.card-primary:not(.card-outline) > .card-header a,
.card-info:not(.card-outline) > .card-header a {
    color: #fff !important;
}

/* Standalone helper classes (dipakai juga pada tombol/blok non-card) */
.primary-bg,
.brimary-bg {
    background: var(--brand-grad) !important;
    color: #fff !important;
}

/* Outline cards → garis atas brand */
.card-primary.card-outline,
.card-info.card-outline,
.card-success.card-outline {
    border-top: 3px solid var(--brand);
}

/* =========================================================================
   3. Forms
   ========================================================================= */

.form-control,
.custom-select {
    border-radius: 8px;
    border-color: #d9e1e7;
}

.form-control:focus,
.custom-select:focus,
textarea.form-control:focus,
select.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(10, 134, 189, 0.15) !important;
}

/* Native checkbox & radio (accent) + AdminLTE custom controls */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(10, 134, 189, 0.18) !important;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--brand-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(10, 134, 189, 0.15) !important;
}

.custom-file-label::after {
    background: var(--brand) !important;
    color: #fff !important;
}

/* Select2 (jika dipakai) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand) !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 8px;
    border-color: #d9e1e7;
}

/* =========================================================================
   4. Tables (GridView, dsb.)
   ========================================================================= */

.card .table thead th,
.table thead th {
    border-bottom: 2px solid var(--brand-ring);
    color: #2b4a57;
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: var(--brand-tint);
}

/* =========================================================================
   5. Nav tabs, pagination, breadcrumb
   ========================================================================= */

.nav-tabs {
    border-bottom-color: #e4eaef;
}

.nav-tabs .nav-link {
    color: #5c6b73;
    border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--brand-light);
    color: var(--brand-strong);
}

.nav-tabs .nav-link.active {
    color: var(--brand-strong);
    border-color: #e4eaef #e4eaef #fff;
    border-bottom: 2px solid var(--brand);
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background: var(--brand-grad) !important;
    color: #fff !important;
}

.pagination .page-link {
    color: var(--brand);
    border-color: #e4eaef;
    margin: 0 2px;
    border-radius: 8px;
}

.pagination .page-link:hover {
    background-color: var(--brand-tint);
    color: var(--brand-strong);
    border-color: var(--brand-light);
}

.pagination .page-item.active .page-link {
    background: var(--brand-grad);
    border-color: var(--brand-strong);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb a {
    color: var(--brand);
}

.breadcrumb a:hover {
    color: var(--brand-strong);
}

.breadcrumb .active,
.breadcrumb-item.active {
    color: #7b8a93;
}

/* =========================================================================
   6. Utilities & typography routed to brand
   (Semantik success/warning/danger sengaja TIDAK diubah.)
   ========================================================================= */

.bg-primary,
.badge-primary,
.label-primary {
    background: var(--brand) !important;
    color: #fff !important;
}

.bg-info,
.badge-info {
    background: var(--brand-light) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--brand) !important;
}

.text-info {
    color: var(--brand-light) !important;
}

/* Content page title & links (dibatasi ke area konten agar sidebar/header aman) */
.content-header h1 {
    color: var(--brand-strong);
    font-weight: 600;
    font-size: 1.5rem;
}

.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.brand-link):not(.badge) {
    color: var(--brand-strong);
}

.content-wrapper a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.brand-link):not(.badge):hover {
    color: var(--brand);
}

/* Login "Masuk" & link register mengikuti brand */
.login-box-center .btn-primary {
    background: var(--brand-grad) !important;
    border: 0 !important;
}

.login-box-center .text-primary {
    color: var(--brand) !important;
}