/* ---------------------------
   GLOBAL COLOR PALETTE
--------------------------- */
:root {
    --maroon: #7a001f;
    --maroon-dark: #4d0013;
    --maroon-light: #a30029;
    --golden-orange: #ffa426;
    --golden-dark: #cc7f1c;
    --danger-dark: #8a0000;
    --success-green: #1faa59;
    --text-light: #f8f9fa;
}

/* ---------------------------
   BODY & GLOBAL BACKGROUND
--------------------------- */
body {
    background: #0f0f10 !important;
    color: var(--text-light);
}

/* ---------------------------
   NAVBAR
--------------------------- */
.navbar, .topnav {
    background: var(--maroon) !important;
    border-bottom: 3px solid var(--golden-orange);
}
.navbar-brand, .nav-link {
    color: #fff !important;
}
.nav-link:hover {
    color: var(--golden-orange) !important;
}

/* ---------------------------
   SIDEBAR
--------------------------- */
.vertical-menu {
    background: var(--maroon-dark) !important;
}
.mm-active > a {
    background: var(--maroon) !important;
    color: #fff !important;
}
#sidebar-menu ul li a:hover {
    color: var(--golden-orange);
}

/* ---------------------------
   BUTTONS
--------------------------- */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {
    border-radius: 8px !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 16px;
}

/* Primary → MAROON */
.btn-primary {
    background: var(--maroon);
}
.btn-primary:hover {
    background: var(--maroon-light);
}

/* Success → Hijau elegan */
.btn-success {
    background: var(--success-green);
}
.btn-success:hover {
    background: #169b4c;
}

/* Warning → Golden Orange */
.btn-warning {
    background: var(--golden-orange);
    color: #000 !important;
}
.btn-warning:hover {
    background: var(--golden-dark);
}

/* Danger → Dark Red */
.btn-danger {
    background: var(--danger-dark);
}
.btn-danger:hover {
    background: #660000;
}

/* ---------------------------
   CARDS
--------------------------- */
.card {
    background: #1b1b1c !important;
    border-radius: 12px;
    border: 1px solid #2e2e2f;
    color: var(--text-light);
}

/* Card Border Color by Category */
.card.border-primary {
    border-color: var(--maroon) !important;
}
.card.border-success {
    border-color: var(--success-green) !important;
}
.card.border-warning {
    border-color: var(--golden-orange) !important;
}
.card.border-danger {
    border-color: var(--danger-dark) !important;
}

/* ---------------------------
   BADGES
--------------------------- */
.badge-primary {
    background: var(--maroon) !important;
}
.badge-success {
    background: var(--success-green) !important;
}
.badge-warning {
    background: var(--golden-orange) !important;
    color: #000 !important;
}
.badge-danger {
    background: var(--danger-dark) !important;
}

/* ---------------------------
   TABLES
--------------------------- */
table.table {
    color: var(--text-light) !important;
}
.table thead {
    background: var(--maroon) !important;
    color: #fff !important;
}
.table tbody tr:hover {
    background: rgba(255, 164, 38, 0.08) !important;
}

/* ---------------------------
   DATATABLES
--------------------------- */
.dataTables_wrapper .dataTables_filter input {
    background: #1f1f20;
    color: #fff;
    border: 1px solid var(--maroon);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--maroon) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--maroon-light) !important;
    color: #fff !important;
}

/* ---------------------------
   FORM ELEMENTS
--------------------------- */
.form-control {
    background: #181819;
    color: #fff;
    border: 1px solid #303033;
}
.form-control:focus {
    border-color: var(--golden-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 164, 38, 0.35);
}

/* ---------------------------
   PAGINATION
--------------------------- */
.page-item.active .page-link {
    background: var(--maroon);
    border-color: var(--maroon);
}
.page-link:hover {
    background: var(--maroon-light);
    color: #fff;
}

/* ---------------------------
   DROPDOWNS
--------------------------- */
.dropdown-menu {
    background: #1a1a1b;
    border: 1px solid var(--maroon);
}
.dropdown-item:hover {
    background: var(--maroon);
    color: #fff;
}