/*
 * Tema warna aplikasi -- disesuaikan dengan warna logo "KOST LESTARI"
 * (teal #008291). File ini di-load di semua layout (admin, portal
 * penghuni, halaman publik, halaman login) supaya konsisten satu warna
 * di seluruh aplikasi.
 *
 * Kalau logo diganti lagi nanti, cukup ubah nilai --brand di sini saja,
 * warna turunannya (hover/active/tint) otomatis ikut proporsional.
 */
:root {
    --brand: #008291;        /* warna utama, diambil dari logo */
    --brand-dark: #003a41;   /* dipakai untuk background gelap (sidebar, topbar, footer) */
    --brand-darker: #00272b; /* ujung gradient paling gelap */
    --brand-mid: #00545e;    /* hover/active state */
    --brand-light: #4ca7b2;  /* ujung gradient terang, aksen */
    --brand-tint: #d8ecee;   /* highlight lembut (hover baris tabel, dsb) */
    --brand-pale: #f2f9fa;   /* background halaman */
}

body { background-color: var(--brand-pale); }

/* Tombol utama (Simpan, Login, Test Koneksi, dst.) di seluruh aplikasi
   memakai class Bootstrap btn-dark/btn-primary -- di-reskin ke teal di
   sini supaya tidak perlu ubah satu-satu di tiap file view. */
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-mid);
    --bs-btn-hover-border-color: var(--brand-mid);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-dark {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-mid);
    --bs-btn-active-border-color: var(--brand-mid);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-mid);
    --bs-btn-hover-border-color: var(--brand-mid);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-mid);
    --bs-btn-active-border-color: var(--brand-mid);
}

a { color: var(--brand); }
a:hover { color: var(--brand-mid); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .25rem rgba(0, 130, 145, .25);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.spinner-border.text-brand { color: var(--brand); }

::selection { background: var(--brand-tint); }