/* ============================= */
/* WHITE, BLACK & GOLD THEME     */
/* ============================= */

:root {
    /* Gold Color Palette */
    --gold-primary: #ffd700; /* Pure Gold */
    --gold-secondary: #ffc300; /* Bright Gold */
    --gold-dark: #b8860b; /* Dark Goldenrod */
    --gold-light: #fffacd; /* Light Goldenrod Yellow */
    --gold-accent: #daa520; /* Goldenrod */

    /* Black & White */
    --black-primary: #000000; /* Pure Black */
    --black-soft: #1a1a1a; /* Soft Black */
    --black-light: #333333; /* Light Black */
    --white-primary: #ffffff; /* Pure White */
    --white-soft: #fafafa; /* Soft White */
    --white-light: #f8f9fa; /* Light Gray-White */

    /* Status Colors with Gold Accent */
    --success-color: #28a745;
    --warning-color: var(--gold-primary);
    --danger-color: #dc3545;
    --info-color: var(--gold-dark);

    /* Shadows & Effects */
    --shadow-gold: 0 4px 15px rgba(255, 215, 0, 0.2);
    --shadow-black: 0 4px 15px rgba(0, 0, 0, 0.1);
    --gradient-gold: linear-gradient(
        135deg,
        var(--gold-primary),
        var(--gold-accent)
    );
    --gradient-black: linear-gradient(
        135deg,
        var(--black-primary),
        var(--black-light)
    );
}

/* ============================= */
/* GLOBAL OVERRIDES             */
/* ============================= */

body {
    background-color: var(--white-light) !important;
    color: var(--black-primary) !important;
    font-family: "Poppins", sans-serif !important;
}

/* ============================= */
/* HEADER & NAVIGATION           */
/* ============================= */

#page-topbar {
    background: var(--gradient-gold) !important;
    border-bottom: 2px solid var(--gold-dark) !important;
    box-shadow: var(--shadow-gold) !important;
}

.navbar-brand-box {
    background: var(--gradient-black) !important;
    border-right: 2px solid var(--gold-primary) !important;
}

.header-item {
    color: var(--black-primary) !important;
    transition: all 0.3s ease !important;
}

.header-item:hover {
    color: var(--white-primary) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}

/* ============================= */
/* SIDEBAR STYLING               */
/* ============================= */

.vertical-menu {
    background: var(--gradient-black) !important;
    border-right: 3px solid var(--gold-primary) !important;
    box-shadow: var(--shadow-black) !important;
}

.metismenu > li > a,
.vertical-menu .metismenu li a {
    color: var(--white-primary) !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
}

.metismenu > li > a:hover,
.vertical-menu .metismenu li a:hover {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border-left: 3px solid var(--gold-dark) !important;
    transform: translateX(5px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.vertical-menu .metismenu li a i {
    color: var(--gold-primary) !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}

.vertical-menu .metismenu li a:hover i {
    color: var(--black-primary) !important;
    transform: scale(1.1) !important;
}

.menu-title {
    color: var(--gold-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 20px 0 10px 0 !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--gold-dark) !important;
    padding-bottom: 8px !important;
}

/* Active Menu Item */
.vertical-menu .metismenu li.active > a,
.vertical-menu .metismenu li.mm-active > a {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border-left: 3px solid var(--gold-dark) !important;
    font-weight: 600 !important;
}

/* Submenu Styling */
.vertical-menu .metismenu li ul.sub-menu {
    background-color: rgba(255, 215, 0, 0.05) !important;
    border-radius: 8px !important;
    margin: 5px 15px !important;
}

.vertical-menu .metismenu li ul.sub-menu li a {
    color: var(--white-soft) !important;
    padding-left: 40px !important;
}

.vertical-menu .metismenu li ul.sub-menu li a:hover {
    background-color: var(--gold-primary) !important;
    color: var(--black-primary) !important;
    border-radius: 6px !important;
}

/* ============================= */
/* CARDS & CONTAINERS            */
/* ============================= */

.card {
    background: var(--white-primary) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.card-header {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border-bottom: 2px solid var(--gold-dark) !important;
    font-weight: 600 !important;
    border-radius: 12px 12px 0 0 !important;
}

.card-body {
    padding: 24px !important;
}

/* Mini Stats Cards */
.mini-stats-wid {
    background: var(--white-primary) !important;
    border-left: 4px solid var(--gold-primary) !important;
    transition: all 0.3s ease !important;
}

.mini-stats-wid:hover {
    background: var(--gold-light) !important;
    border-left-color: var(--gold-dark) !important;
    transform: translateY(-3px) !important;
}

/* ============================= */
/* BUTTONS & INTERACTIVE         */
/* ============================= */

.btn-primary {
    background: var(--gradient-gold) !important;
    border: 2px solid var(--gold-dark) !important;
    color: var(--black-primary) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--gradient-black) !important;
    color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.btn-secondary {
    background: var(--black-light) !important;
    border: 2px solid var(--black-primary) !important;
    color: var(--white-primary) !important;
}

.btn-secondary:hover {
    background: var(--gold-primary) !important;
    color: var(--black-primary) !important;
    border-color: var(--gold-dark) !important;
}

.btn-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    border-color: #1e7e34 !important;
}

.btn-warning {
    background: var(--gradient-gold) !important;
    border-color: var(--gold-dark) !important;
    color: var(--black-primary) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border-color: #bd2130 !important;
}

/* ============================= */
/* FORMS & INPUTS               */
/* ============================= */

.form-control {
    border: none !important;
    border-bottom: 2px solid var(--gold-light) !important;
    border-radius: 0 !important;
    padding: 12px 8px !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    min-height: 44px !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.form-control:focus {
    border-bottom-color: var(--gold-primary) !important;
    box-shadow: 0 2px 0 0 var(--gold-primary) !important;
    background-color: transparent !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--black-light) !important;
    opacity: 0.7 !important;
}

.form-label {
    color: var(--black-primary) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 0.875rem !important;
}

/* Select inputs specific styling */
select.form-control {
    min-height: 44px !important;
    padding: 12px 8px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23B8860B' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 12px !important;
    padding-right: 30px !important;
}

/* Input groups */
.input-group .form-control {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid var(--gold-light) !important;
    flex: 1 !important;
}

.input-group-append .btn,
.input-group-prepend .btn {
    border: none !important;
    border-bottom: 2px solid var(--gold-light) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--gold-dark) !important;
    padding: 12px 12px !important;
    min-height: 44px !important;
}

.input-group-append .btn:hover,
.input-group-prepend .btn:hover {
    background-color: var(--gold-light) !important;
    color: var(--black-primary) !important;
}

.input-group-append .btn.uniform-btn,
.input-group-prepend .btn.uniform-btn {
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    min-height: 44px !important;
}

/* Remove borders from form elements */
.form-group {
    border: none !important;
}

.card {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.card-body {
    border: none !important;
}

/* File input styling */
input[type="file"].form-control {
    padding: 8px !important;
    border: 1px dashed var(--gold-light) !important;
    border-radius: 8px !important;
    background-color: var(--white-soft) !important;
}

input[type="file"].form-control:focus {
    border-color: var(--gold-primary) !important;
    border-style: dashed !important;
}

/* ============================= */
/* BADGES & STATUS               */
/* ============================= */

.badge-primary {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    font-weight: 600 !important;
}

.badge-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: var(--white-primary) !important;
}

.badge-warning {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: var(--white-primary) !important;
}

.badge-secondary {
    background: var(--gradient-black) !important;
    color: var(--gold-primary) !important;
}

/* ============================= */
/* TABLES                        */
/* ============================= */

.table {
    background-color: var(--white-primary) !important;
}

.table thead th {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border-bottom: 2px solid var(--gold-dark) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.table tbody tr {
    transition: all 0.3s ease !important;
}

.table tbody tr:hover {
    background-color: var(--gold-light) !important;
}

.table-borderless td,
.table-borderless th {
    border: none !important;
}

/* ============================= */
/* PROGRESS & LOADING            */
/* ============================= */

.progress {
    background-color: var(--white-light) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.progress-bar {
    background: var(--gradient-gold) !important;
    transition: all 0.3s ease !important;
}

/* ============================= */
/* ALERTS & NOTIFICATIONS        */
/* ============================= */

.alert-success {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
    border-left: 4px solid var(--success-color) !important;
}

.alert-warning {
    background-color: rgba(255, 215, 0, 0.1) !important;
    border-color: var(--gold-primary) !important;
    color: var(--gold-dark) !important;
    border-left: 4px solid var(--gold-primary) !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    border-left: 4px solid var(--danger-color) !important;
}

.alert-info {
    background-color: rgba(184, 134, 11, 0.1) !important;
    border-color: var(--gold-dark) !important;
    color: var(--gold-dark) !important;
    border-left: 4px solid var(--gold-dark) !important;
}

/* ============================= */
/* TEXT COLORS                   */
/* ============================= */

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

.text-secondary {
    color: var(--black-light) !important;
}

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

.text-warning {
    color: var(--gold-dark) !important;
}

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

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

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

/* ============================= */
/* BACKGROUND COLORS             */
/* ============================= */

.bg-primary {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
}

.bg-secondary {
    background: var(--gradient-black) !important;
    color: var(--white-primary) !important;
}

.bg-gold {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
}

.bg-black {
    background: var(--gradient-black) !important;
    color: var(--white-primary) !important;
}

/* ============================= */
/* CUSTOM COMPONENTS             */
/* ============================= */

/* Gold Accent Line */
.gold-accent-line {
    height: 3px !important;
    background: var(--gradient-gold) !important;
    border-radius: 2px !important;
    margin: 20px 0 !important;
}

/* Feature Cards */
.feature-card {
    background: var(--white-primary) !important;
    border: 2px solid var(--gold-light) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover {
    border-color: var(--gold-primary) !important;
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-gold) !important;
}

.feature-card .icon {
    font-size: 3rem !important;
    color: var(--gold-primary) !important;
    margin-bottom: 20px !important;
}

/* Stats Cards */
.stats-card {
    background: var(--white-primary) !important;
    border-left: 5px solid var(--gold-primary) !important;
    border-radius: 10px !important;
    padding: 25px !important;
    transition: all 0.3s ease !important;
}

.stats-card:hover {
    background: var(--gold-light) !important;
    transform: translateY(-5px) !important;
}

/* ============================= */
/* AVATAR & PROFILE              */
/* ============================= */

.avatar {
    border: 3px solid var(--gold-primary) !important;
    border-radius: 50% !important;
}

.header-profile-user {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border: 2px solid var(--gold-dark) !important;
}

/* ============================= */
/* DROPDOWNS                     */
/* ============================= */

.dropdown-menu {
    background: var(--white-primary) !important;
    border: 2px solid var(--gold-light) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-gold) !important;
}

.dropdown-item {
    color: var(--black-primary) !important;
    transition: all 0.3s ease !important;
}

.dropdown-item:hover {
    background: var(--gold-light) !important;
    color: var(--black-primary) !important;
}

/* ============================= */
/* PAGINATION                    */
/* ============================= */

.page-link {
    color: var(--gold-dark) !important;
    border-color: var(--gold-light) !important;
}

.page-link:hover {
    color: var(--black-primary) !important;
    background-color: var(--gold-light) !important;
    border-color: var(--gold-primary) !important;
}

.page-item.active .page-link {
    background: var(--gradient-gold) !important;
    border-color: var(--gold-primary) !important;
    color: var(--black-primary) !important;
}

/* ============================= */
/* RESPONSIVE ADJUSTMENTS        */
/* ============================= */

@media (max-width: 768px) {
    .navbar-brand-box {
        width: auto !important;
    }

    .vertical-menu {
        transform: translateX(-100%) !important;
    }

    .card {
        margin-bottom: 20px !important;
    }

    .mini-stats-wid {
        margin-bottom: 15px !important;
    }
}

/* ============================= */
/* UNIFORM BUTTONS               */
/* ============================= */

.uniform-btn {
    position: relative !important;
    overflow: hidden !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
}

.uniform-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
    text-decoration: none !important;
}

.uniform-btn:active {
    transform: translateY(0) !important;
}

.uniform-btn.disabled,
.uniform-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Uniform Button Sizes */
.uniform-btn.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
}

.uniform-btn.btn-lg {
    padding: 12px 24px !important;
    font-size: 1rem !important;
    min-height: 48px !important;
}

/* Override any conflicting Bootstrap button sizing */
.btn.uniform-btn {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
}

/* Handle btn-block classes */
.uniform-btn.btn-block {
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
}

/* Bootstrap 5 equivalent for full width buttons */
.uniform-btn.w-100 {
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
}

/* Uniform Button Variants */
.uniform-btn.btn-primary {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border: none !important;
}

.uniform-btn.btn-primary:hover {
    background: var(--gradient-black) !important;
    color: var(--gold-primary) !important;
    border: none !important;
}

.uniform-btn.btn-secondary {
    background: var(--gradient-black) !important;
    color: var(--white-primary) !important;
    border: none !important;
}

.uniform-btn.btn-secondary:hover {
    background: var(--gold-light) !important;
    color: var(--black-primary) !important;
    border: none !important;
}

.uniform-btn.btn-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: var(--white-primary) !important;
    border: none !important;
}

.uniform-btn.btn-success:hover {
    background: linear-gradient(135deg, #20c997, #28a745) !important;
    border: none !important;
}

.uniform-btn.btn-warning {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
    border: none !important;
}

.uniform-btn.btn-warning:hover {
    background: linear-gradient(
        135deg,
        var(--gold-accent),
        var(--gold-primary)
    ) !important;
    border: none !important;
}

.uniform-btn.btn-danger {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: var(--white-primary) !important;
    border: none !important;
}

.uniform-btn.btn-danger:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a) !important;
    border: none !important;
}

.uniform-btn.btn-info {
    background: linear-gradient(
        135deg,
        var(--gold-dark),
        var(--gold-accent)
    ) !important;
    color: var(--white-primary) !important;
    border: none !important;
}

.uniform-btn.btn-info:hover {
    background: linear-gradient(
        135deg,
        var(--gold-accent),
        var(--gold-primary)
    ) !important;
    border: none !important;
}

/* Outline Button Variants */
.uniform-btn.btn-outline-primary {
    background: transparent !important;
    color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}

.uniform-btn.btn-outline-primary:hover {
    background: var(--gradient-gold) !important;
    color: var(--black-primary) !important;
}

.uniform-btn.btn-outline-secondary {
    background: transparent !important;
    color: var(--black-primary) !important;
    border-color: var(--black-primary) !important;
}

.uniform-btn.btn-outline-secondary:hover {
    background: var(--gradient-black) !important;
    color: var(--white-primary) !important;
}

.uniform-btn.btn-outline-success {
    background: transparent !important;
    color: #28a745 !important;
    border-color: #28a745 !important;
}

.uniform-btn.btn-outline-success:hover {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: var(--white-primary) !important;
}

.uniform-btn.btn-outline-danger {
    background: transparent !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.uniform-btn.btn-outline-danger:hover {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: var(--white-primary) !important;
}

/* Icon Spacing in Uniform Buttons */
.uniform-btn i {
    transition: all 0.3s ease !important;
}

.uniform-btn:hover i {
    transform: scale(1.1) !important;
}

/* Loading State */
.uniform-btn .spinner-border {
    width: 1rem !important;
    height: 1rem !important;
}

/* Button Groups */
.btn-group .uniform-btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -2px !important;
}

.btn-group .uniform-btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ============================= */
/* ANIMATION CLASSES             */
/* ============================= */

.fade-in {
    animation: fadeIn 0.5s ease-in !important;
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out !important;
}

.pulse-gold {
    animation: pulseGold 2s infinite !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* ============================= */
/* RESPONSIVE FIXES              */
/* ============================= */

/* Hide hamburger menu on desktop (992px and up - Bootstrap lg breakpoint) */
@media (min-width: 992px) {
    .navbar-toggler,
    button.navbar-toggler,
    .btn.navbar-toggler {
        display: none !important;
        visibility: hidden !important;
    }
}