:root {
    --app-primary: #2f5067;
    --app-primary-hover: #253f52;
    --app-primary-focus: rgba(47, 80, 103, 0.25);
}

/* Bulma/Huro primary actions. */
.button.is-primary,
.button.is-link,
.button.is-info,
.h-button.is-primary,
.h-button.is-link,
.h-button.is-info {
    color: #fff !important;
    border-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-link:hover,
.button.is-link:focus,
.button.is-info:hover,
.button.is-info:focus,
.h-button.is-primary:hover,
.h-button.is-primary:focus,
.h-button.is-link:hover,
.h-button.is-link:focus,
.h-button.is-info:hover,
.h-button.is-info:focus {
    color: #fff !important;
    border-color: var(--app-primary-hover) !important;
    background-color: var(--app-primary-hover) !important;
    box-shadow: 0 0 0 0.125em var(--app-primary-focus) !important;
}

.button.is-primary.is-light,
.button.is-link.is-light,
.button.is-info.is-light {
    color: var(--app-primary) !important;
    border-color: transparent !important;
    background-color: #e9eef1 !important;
}

.button.is-primary.is-light:hover,
.button.is-link.is-light:hover,
.button.is-info.is-light:hover {
    color: #fff !important;
    background-color: var(--app-primary) !important;
}

/* Bootstrap primary actions. */
.btn-primary,
.btn-info {
    color: #fff !important;
    border-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.show > .btn-primary.dropdown-toggle,
.show > .btn-info.dropdown-toggle {
    color: #fff !important;
    border-color: var(--app-primary-hover) !important;
    background-color: var(--app-primary-hover) !important;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #fff !important;
    background-color: var(--app-primary) !important;
}

/* Tailwind-style primary actions used by forms in older views. */
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900,
.bg-\[\#007bff\] {
    background-color: var(--app-primary) !important;
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover,
.hover\:bg-blue-900:hover {
    background-color: var(--app-primary-hover) !important;
}

/* Filter, add, and Excel export actions with project-specific classes. */
.rekap-filter-button.is-apply,
.surat-warga-add-button,
.rekap-export-button.is-excel,
.dt-buttons .btn-export-excel,
.dt-buttons button.btn-export-excel,
.dt-buttons .buttons-excel,
.btn.tambah,
.btn.tambah-gambar,
.btn-tambah,
a.btn-success[href*="export"],
a[href*="export-excel"],
a[href*="export_excel"] {
    color: #fff !important;
    border-color: var(--app-primary) !important;
    background: var(--app-primary) !important;
}

.rekap-filter-button.is-apply:hover,
.surat-warga-add-button:hover,
.rekap-export-button.is-excel:hover,
.dt-buttons .btn-export-excel:hover,
.dt-buttons button.btn-export-excel:hover,
.dt-buttons .buttons-excel:hover,
.btn.tambah:hover,
.btn.tambah-gambar:hover,
.btn-tambah:hover,
a.btn-success[href*="export"]:hover,
a[href*="export-excel"]:hover,
a[href*="export_excel"]:hover {
    color: #fff !important;
    border-color: var(--app-primary-hover) !important;
    background: var(--app-primary-hover) !important;
}

/* Export Excel harus tetap berbeda dari aksi primer/filter. Diletakkan
   setelah aturan tema generik karena href export-excel juga dicakup di atas. */
.rekap-export-button.is-excel,
a.rekap-export-button.is-excel[href*="export-excel"] {
    color: #fff !important;
    border-color: #15803d !important;
    background: #15803d !important;
}

.rekap-export-button.is-excel:hover,
a.rekap-export-button.is-excel[href*="export-excel"]:hover {
    border-color: #166534 !important;
    background: #166534 !important;
}

/* Primary accents on controls. */
.input:focus,
.textarea:focus,
.select select:focus,
.form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 0.125em var(--app-primary-focus) !important;
}

a.has-text-primary,
.has-text-primary,
.text-primary {
    color: var(--app-primary) !important;
}