:root {
    /* --- COLORS --- */
    --primary-light: #a7f3d0;
    --primary-main: #059669;
    --primary-dark: #064e3b;
    --primary-subtle: #ecfdf5;
    --primary-medium: #10b981;
    --primary-border: #6ee7b7;
    --primary-muted: #d1fae5;

    --error-light: #fee2e2;
    --error-main: #ef4444;
    --error-dark: #dc2626;
    --error-subtle: #fef2f2;
    --error-border: #fecaca;

    --warning-light: #ffedd5;
    --warning-main: #d97706;
    --warning-dark: #ca8a04;

    --info-light: #e0f2fe;
    --info-main: #0369a1;

    --bg-app: #f4f6f8;
    --surface: #ffffff;
    --surface-alt: #f9fafb;

    --border-light: #f3f4f6;
    --border-medium: #e5e7eb;

    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    --text-link: #059669;

    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-base: 12px;
    --fs-md: 13px;
    --fs-lg: 14px;
    --fs-xl: 15px;
    --fs-xxl: 16px;
    --fs-xxxl: 17px;
    --fs-h4: 18px;
    --fs-h3: 20px;
    --fs-h2: 24px;
    --fs-h1: 26px;
    --fs-display: 28px;
    --fs-hero: 30px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* --- SPACING --- */
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 10px;
    --space-xl: 12px;
    --space-xxl: 14px;
    --space-xxxl: 16px;
    --space-section: 20px;
    --space-card: 24px;
    --space-page: 28px;
    --space-loose: 32px;

    /* --- RADIUS --- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-card: 20px;
    --radius-card-lg: 24px;
    --radius-modal: 30px;
    --radius-hero: 35px;
    --radius-full: 9999px;

    /* --- SHADOWS --- */
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 8px 16px rgba(2, 44, 34, 0.08);
    --shadow-primary: 0 4px 8px rgba(5, 150, 105, 0.25);
    --shadow-error: 0 4px 8px rgba(239, 68, 68, 0.3);
}

body {
    font-family: "Lato", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
.app-brand-text,
.display-font {
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* --- UTILITY CLASSES --- */

/* Backgrounds */
.bg-primary {
    background-color: var(--primary-main) !important;
    color: var(--text-inverse);
}
.bg-subtle {
    background-color: var(--primary-subtle) !important;
}
.bg-surface {
    background-color: var(--surface) !important;
}

/* Text Colors */
.text-main {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
.text-success {
    color: var(--primary-main) !important;
}

/* Typography */
.font-bold {
    font-weight: var(--fw-bold);
}
.font-semibold {
    font-weight: var(--fw-semibold);
}
.h1-style {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

/* Cards & Containers */
.card-style {
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: var(--space-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-medium);
}

/* Sidebar Specific Overrides */
.bg-menu-theme {
    background-color: #ffffff !important; /* Pure white surface */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02) !important;
}

/* Brand Section Styling */
.app-brand {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.app-brand-text {
    color: var(--primary-main) !important; /* #059669 */
    font-size: 1.25rem !important;
    letter-spacing: -0.5px;
    text-transform: none !important;
}

/* Menu Item Hover & Active States */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: var(--primary-subtle) !important; /* #ECFDF5 */
    color: var(--primary-main) !important;
    font-weight: var(--fw-semibold);
}

/* Active Indicator (The line on the left) */
.menu-vertical .menu-item.active:before {
    background: var(--primary-main) !important;
    width: 4px !important;
}

/* Icon Colors */
.menu-vertical .menu-item .menu-icon {
    color: var(--text-secondary); /* #6B7280 */
}

.menu-item.active .menu-icon {
    color: var(--primary-main) !important;
}

/* Menu Header (Components) */
.menu-header {
    margin-top: 1.5rem !important;
}

.menu-header-text {
    color: var(--text-muted) !important; /* #9CA3AF */
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0.5px;
}

/* Hover Effect */
.menu-item .menu-link:hover {
    background-color: var(--surface-alt) !important; /* #F9FAFB */
}

/* Navbar Specific Styling */
#layout-navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-medium) !important;
    margin-top: 15px;
}

/* Search Bar Enhancement */
.navbar-nav .nav-item .form-control {
    background-color: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding-left: 10px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-item .form-control:focus {
    background-color: #fff;
    border: 1px solid var(--primary-main);
    box-shadow: 0 0 0 0.25rem rgba(5, 150, 105, 0.1);
}

.bx-search {
    color: var(--text-muted);
}

/* Notification & User Dropdowns */
.navbar-dropdown .dropdown-menu {
    border: none;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 0.5rem;
    margin-top: 1rem !important;
}

/* Notification Badge */
.badge-notifications {
    background-color: var(--error-main) !important;
    border: 2px solid #fff;
}

/* Avatar Border */
.avatar.avatar-online:after {
    background-color: var(--primary-main) !important;
    box-shadow: 0 0 0 2px #fff;
}

/* Professional Logout Button */
.logout-btn {
    background-color: var(--error-subtle);
    color: var(--error-dark);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background-color: var(--error-main);
    color: #fff;
}

/* SweetAlert Custom Theme */

.swal2-popup {
    border-radius: var(--radius-modal);
    padding: var(--space-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    font-family: "Inter", sans-serif;
}

.swal2-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.swal2-html-container {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
}

/* Confirm button (green) */
.swal2-confirm {
    background: var(--primary-main) !important;
    color: var(--text-inverse) !important;
    border-radius: var(--radius-lg) !important;
    padding: 8px 18px !important;
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-primary);
}

.swal2-confirm:hover {
    background: var(--primary-dark) !important;
}

/* Cancel button */
.swal2-cancel {
    background: var(--surface-alt) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-lg) !important;
    padding: 8px 18px !important;
    border: 1px solid var(--border-medium);
}

/* Danger buttons */
.swal2-deny {
    background: var(--error-main) !important;
    color: var(--text-inverse) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-error);
}

/* Icons color adjustments */
.swal2-icon.swal2-warning {
    border-color: var(--warning-main);
    color: var(--warning-main);
}

.swal2-icon.swal2-success {
    border-color: var(--primary-main);
    color: var(--primary-main);
}

.swal2-icon.swal2-error {
    border-color: var(--error-main);
    color: var(--error-main);
}

/* SweetAlert Toast Timer Progress */

.swal2-timer-progress-bar {
    background: var(--primary-main) !important;
}

/* optional subtle gradient version */
.swal2-timer-progress-bar {
    background: linear-gradient(
        90deg,
        var(--primary-medium),
        var(--primary-main)
    ) !important;
}

.swal2-container {
    z-index: 99999 !important;
}