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

:root {
    /* Typography */
    --font-family-sans-serif: "Red Hat Display", sans-serif;

    /* Gold Color Palette */
    --gold-primary: #b8860b; /* Dark Gold */
    --gold-secondary: #d4af37; /* Dark Metallic Gold */
    --gold-dark: #8B6914; /* Darker Brown-Gold for better visibility */
    --gold-light: #fffacd; /* Light Goldenrod Yellow */
    --gold-accent: #daa520; /* Goldenrod */
    --gold-border: #6B4E00; /* Very Dark Amber for field borders - color blind friendly */

    /* 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(184, 134, 11, 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             */
/* ============================= */

html,
body {
    font-family: "Red Hat Display", sans-serif !important;
}

body {
    background-color: var(--white-light) !important;
    color: var(--black-primary) !important;
}

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

#page-topbar {
    background: var(--gradient-gold) !important;
    border: none !important;
    box-shadow: var(--shadow-gold) !important;
}

.navbar-brand-box {
    background: var(--gradient-black) !important;
    border: none !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               */
/* ============================= */

/* Unified light sidebar (admin + user) – no black background */
.vertical-menu {
    background: #FAFAFA !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !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: none !important;
}

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

/* User dashboard sidebar: #D5A01D strictly for active/hover/focus - override theme gradients */
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.active > a,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.mm-active > a,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.active > a:hover,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.active > a:focus,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.active > a:active,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.mm-active > a:hover,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.mm-active > a:focus,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.mm-active > a:active {
    background: transparent !important;
    background-image: none !important;
    color: var(--black-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Icon color: gold for inactive; user-dashboard-sidebar active uses white (see user-dashboard-theme.css) */
.vertical-menu .metismenu li a i {
    color: var(--gold-primary) !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.mm-active > a i,
body.user-dashboard .vertical-menu.user-dashboard-sidebar .metismenu li.active > a i {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !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: none !important;
    padding-bottom: 8px !important;
}

/* Active Menu Item – do not apply to user-dashboard-sidebar (handled in user-dashboard-theme.css with white text on gold) */
.vertical-menu:not(.user-dashboard-sidebar) .metismenu li.active > a,
.vertical-menu:not(.user-dashboard-sidebar) .metismenu li.mm-active > a {
    background: transparent !important;
    color: var(--black-primary) !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Submenu Styling */
.vertical-menu .metismenu li ul.sub-menu {
    background-color: rgba(184, 134, 11, 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         */
/* ============================= */

/* Global Button Styles - No Borders, Consistent Styling */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
button:not(.close):not(.navbar-toggler),
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn {
    border: none !important;
    outline: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.btn:hover,
.btn:focus,
.btn:active,
button:hover:not(.close):not(.navbar-toggler),
button:focus:not(.close):not(.navbar-toggler),
button:active:not(.close):not(.navbar-toggler),
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
    border: none !important;
    outline: none !important;
}

/* Button Sizes - Consistent Styling */
.btn-sm,
.btn-sm.btn-primary,
.btn-sm.btn-secondary,
.btn-sm.btn-success,
.btn-sm.btn-danger,
.btn-sm.btn-warning,
.btn-sm.btn-info {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    border: none !important;
}

.btn-lg,
.btn-lg.btn-primary,
.btn-lg.btn-secondary,
.btn-lg.btn-success,
.btn-lg.btn-danger,
.btn-lg.btn-warning,
.btn-lg.btn-info {
    padding: 12px 24px !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border: none !important;
}

.btn-primary {
    background: var(--gradient-gold) !important;
    border: none !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: none !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}

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

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

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

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    border: none !important;
}

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

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    border: none !important;
}

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

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    border: none !important;
}

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

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    border: none !important;
}

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

.form-control {
    border: none !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 {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: 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;
    flex: 1 !important;
}

.input-group-append .btn,
.input-group-prepend .btn {
    border: none !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,
.input-group-append .btn:focus,
.input-group-prepend .btn:focus {
    background-color: var(--gold-light) !important;
    color: var(--black-primary) !important;
    border: none !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: none !important;
    border-radius: 8px !important;
    background-color: var(--white-soft) !important;
}

input[type="file"].form-control:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !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(184, 134, 11, 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-primary) !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-primary) !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-primary) !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 - No Borders */
.uniform-btn.btn-outline-primary {
    background: transparent !important;
    color: var(--gold-primary) !important;
    border: none !important;
    box-shadow: 0 0 0 2px var(--gold-primary) inset !important;
}

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

.uniform-btn.btn-outline-secondary {
    background: transparent !important;
    color: var(--black-primary) !important;
    border: none !important;
    box-shadow: 0 0 0 2px var(--black-primary) inset !important;
}

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

.uniform-btn.btn-outline-success {
    background: transparent !important;
    color: #28a745 !important;
    border: none !important;
    box-shadow: 0 0 0 2px #28a745 inset !important;
}

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

.uniform-btn.btn-outline-danger {
    background: transparent !important;
    color: #dc3545 !important;
    border: none !important;
    box-shadow: 0 0 0 2px #dc3545 inset !important;
}

.uniform-btn.btn-outline-danger:hover {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: var(--white-primary) !important;
    border: none !important;
    box-shadow: none !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(184, 134, 11, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(184, 134, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(184, 134, 11, 0);
    }
}

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

/* Hamburger Toggle Button - Visible on all screen sizes */
#vertical-menu-btn {
    z-index: 1001 !important;
    color: var(--black-primary) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#vertical-menu-btn:hover {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

#vertical-menu-btn i {
    color: var(--black-primary) !important;
    font-size: 20px !important;
}

/* Ensure button is visible on all screen sizes */
@media (min-width: 992px) {
    #vertical-menu-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 991px) {
    #vertical-menu-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop Sidebar - Restore original layout */
@media (min-width: 992px) {
    /* Sidebar positioning - fixed on left */
    .vertical-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 250px !important;
        height: calc(100vh - 70px) !important;
        bottom: 0 !important;
        margin-top: 0 !important;
        z-index: 1001 !important;
        overflow-y: auto !important;
        background: #FAFAFA !important;
        border-right: 1px solid #e5e7eb !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
        transition: width 0.3s ease !important; /* Smooth width transition */
    }

    /* User dashboard sidebar: 288px on desktop when open */
    .vertical-menu.user-dashboard-sidebar {
        width: 288px !important;
    }

    /* Main content margin when user dashboard sidebar is open */
    body.user-dashboard .main-content {
        margin-left: 288px !important;
    }

    body.user-dashboard .navbar-brand-box {
        width: 288px !important;
    }

    /* Admin sidebar open: exact dimensions */
    .vertical-menu:not(.user-dashboard-sidebar) {
        width: 288px !important;
        height: 1022px !important;
        top: 2px !important;
        opacity: 1;
    }

    /* Main content margin when admin sidebar is open */
    body:not(.user-dashboard) .main-content {
        margin-left: 288px !important;
    }

    body:not(.user-dashboard) .navbar-brand-box {
        width: 288px !important;
    }

    /* Sidebar collapsed state */
    body.vertical-collpsed .vertical-menu {
        width: 70px !important; /* Collapse sidebar to 70px */
    }

    body.vertical-collpsed .vertical-menu:not(.user-dashboard-sidebar) {
        width: 70px !important;
        height: calc(100vh - 70px) !important;
        top: 70px !important;
    }

    /* Main content margin to account for sidebar */
    .main-content {
        margin-left: 250px !important;
        overflow: hidden !important;
        transition: margin-left 0.3s ease !important; /* Smooth transition */
    }

    /* When sidebar is collapsed, expand main content */
    body.vertical-collpsed .main-content {
        margin-left: 70px !important; /* Expand content when sidebar collapsed */
    }

    /* Header spans full width */
    #page-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1002 !important;
    }

    /* Navbar brand box is part of header, 250px wide when expanded */
    .navbar-brand-box {
        width: 250px !important;
        position: relative !important;
        float: left !important;
        transition: width 0.3s ease !important; /* Smooth transition */
    }

    /* Navbar brand box shrinks when sidebar is collapsed */
    body.vertical-collpsed .navbar-brand-box {
        width: 70px !important; /* Match collapsed sidebar width */
    }

    /* Header content area */
    .navbar-header {
        width: 100% !important;
    }

    /* Hide close button on desktop */
    .vertical-menu .close-sidebar,
    .vertical-menu #close-sidebar-btn,
    .close-sidebar,
    #close-sidebar-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Mobile Sidebar Styles */
@media (max-width: 991px) {
    .vertical-menu {
        position: fixed !important;
        top: 0 !important;
        left: -260px !important;
        height: 100vh !important;
        width: 260px !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    }

    body.sidebar-enable .vertical-menu {
        left: 0 !important;
    }

    /* Overlay when sidebar is open */
    body.sidebar-enable::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
    }

    /* Adjust main content on mobile */
    .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* Header adjustments */
    #page-topbar {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Close button in sidebar - MOBILE ONLY */
    .vertical-menu .close-sidebar,
    .vertical-menu #close-sidebar-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        color: var(--white-primary) !important;
        font-size: 24px !important;
        z-index: 1001 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px !important;
    }
}