/* ===========================================================================
   Urban Reflexology — tema coklat & emas
   ---------------------------------------------------------------------------
   Palet diambil langsung dari aplikasi referensi (sampling piksel screenshot):
       coklat tua  #504030   (sidebar, topbar)
       coklat gelap #403020  (keadaan aktif)
       emas        #f0b000   (aksen: tombol, sorotan, garis)
       krem        #f7f7ef   (latar konten)
       putih       #fefefe   (kartu)

   Semua warna memakai variabel CSS di :root supaya perubahan merek cukup
   di SATU tempat. Berkas ini dimuat SETELAH adminlte.min.css, sehingga
   selector dengan spesifisitas sama akan menang tanpa perlu !important.
   =========================================================================== */

:root {
    --brand-brown: #504030;
    --brand-brown-dark: #403020;
    --brand-brown-darker: #2f2418;
    --brand-brown-soft: #6b5843;
    --brand-gold: #f0b000;
    --brand-gold-dark: #cf9700;
    --brand-gold-soft: #ffe6a8;
    --brand-cream: #f7f7ef;
    --brand-ink: #3a2c1e;
    --brand-line: #e5e0d4;
}

/* ---------------------------------------------------------------------------
   Dasar
   --------------------------------------------------------------------------- */
body,
.content-wrapper {
    background-color: var(--brand-cream);
    color: #3d3d3d;
}

h1, h2, h3, h4, h5, h6,
.content-header h1 {
    color: var(--brand-ink);
}

a {
    color: #9a6b00; /* emas digelapkan agar tetap terbaca di atas putih */
}

a:hover,
a:focus {
    color: var(--brand-brown);
}

/* ---------------------------------------------------------------------------
   Topbar / navbar
   --------------------------------------------------------------------------- */
.main-header.navbar,
.navbar-white.main-header {
    background-color: var(--brand-brown) !important;
    border-bottom: 3px solid var(--brand-gold);
}

.main-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus {
    color: var(--brand-gold);
}

.main-header .dropdown-menu {
    border-top: 3px solid var(--brand-gold);
}

/* ---------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------- */
.main-sidebar.sidebar-dark-primary {
    background-color: var(--brand-brown);
}

.main-sidebar .brand-link {
    background-color: var(--brand-brown-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.main-sidebar .brand-link .brand-text b {
    color: var(--brand-gold);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.82);
    border-radius: 0;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--brand-gold);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--brand-brown-dark);
    color: var(--brand-gold);
    font-weight: 600;
    box-shadow: inset 4px 0 0 var(--brand-gold);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: var(--brand-gold);
}

/* ---------------------------------------------------------------------------
   Kartu
   --------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--brand-line);
    box-shadow: 0 1px 2px rgba(64, 48, 32, 0.06);
}

.card-header {
    background-color: #fffdf7;
    border-bottom: 1px solid var(--brand-line);
}

.card-title {
    color: var(--brand-ink);
    font-weight: 600;
}

.card-primary.card-outline,
.card-success.card-outline,
.card-secondary.card-outline {
    border-top: 3px solid var(--brand-gold);
}

.card-primary:not(.card-outline) > .card-header {
    background-color: var(--brand-brown);
    color: #fff;
}

.card-primary:not(.card-outline) > .card-header .card-title {
    color: #fff;
}

.card-footer {
    background-color: #fffdf7;
    border-top: 1px solid var(--brand-line);
}

/* ---------------------------------------------------------------------------
   Tombol
   --------------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold-dark);
    color: var(--brand-ink); /* emas butuh teks gelap agar kontras & terbaca */
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
    color: var(--brand-ink);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(240, 176, 0, 0.4);
}

.btn-secondary {
    background-color: var(--brand-brown);
    border-color: var(--brand-brown-dark);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--brand-brown-dark);
    border-color: var(--brand-brown-darker);
}

.btn-outline-primary {
    color: #9a6b00;
    border-color: var(--brand-gold-dark);
}

.btn-outline-primary:hover {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold-dark);
    color: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
   Tabel data
   --------------------------------------------------------------------------- */
.table thead th {
    border-bottom: 2px solid var(--brand-gold);
    color: var(--brand-ink);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.table-hover tbody tr:hover {
    background-color: #fdf8ec;
}

/* ---------------------------------------------------------------------------
   Lencana / badge
   --------------------------------------------------------------------------- */
.badge-info,
.badge-primary {
    background-color: var(--brand-brown-soft);
}

.badge-success {
    background-color: #4f7a3f;
}

.badge-warning {
    background-color: var(--brand-gold);
    color: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
   Alert
   --------------------------------------------------------------------------- */
.alert-success {
    background-color: #eef7e8;
    border-color: #cfe6bf;
    color: #2f5623;
}

.alert-warning {
    background-color: #fff8e1;
    border-color: var(--brand-gold-soft);
    color: #6b5200;
}

/* ---------------------------------------------------------------------------
   Halaman autentikasi (login, register, lupa kata sandi)
   --------------------------------------------------------------------------- */
.login-page,
.register-page {
    background: linear-gradient(160deg, var(--brand-brown) 0%, var(--brand-brown-darker) 100%);
    min-height: 100vh;
}

.login-logo a,
.register-logo a {
    color: #ffffff;
}

.login-logo a b,
.register-logo a b {
    color: var(--brand-gold);
}

.login-card-body,
.register-card-body {
    border-top: 4px solid var(--brand-gold);
}

.login-box-msg,
.register-box-msg {
    color: var(--brand-ink);
    font-weight: 600;
}

.login-page .card,
.register-page .card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Checkbox "Ingat saya" mengikuti warna emas */
.icheck-primary > input:checked + label::before {
    background-color: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.main-footer {
    background-color: #fffdf7;
    border-top: 1px solid var(--brand-line);
    color: #6b6357;
}
