/* ==========================================================
   PREMIUM AQUA THEME
========================================================== */

:root {
    /* ==========================
       Layout
    ========================== */
    --layout-bg: #F8FEFE;
    --content-bg: #FFFFFF;
    /* ==========================
       Sidebar
    ========================== */
    --sidebar-bg: #0D3B40;
    --sidebar-text: #E8FCFB;
    --sidebar-hover: #136A70;
    --sidebar-hover-text: #FFFFFF;
    --sidebar-active-bg: #07BEB8;
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: rgba(255,255,255,.08);
    --sidebar-divider: rgba(255,255,255,.06);
    --sidebar-scrollbar: #3DCCC7;
    /* ==========================
       Header / Navbar
    ========================== */
    --header-bg: #FFFFFF;
    --navbar-bg: #FFFFFF;
    --navbar-text: #153B42;
    --navbar-hover: #07BEB8;
    --navbar-shadow: 0 2px 12px rgba(7,190,184,.08);
    /* ==========================
       Logo
    ========================== */
    --logo-bg: #07BEB8;
    --logo-container-bg: #C4FFF9;
    /* ==========================
       Brand Colors
    ========================== */
    --primary: #07BEB8;
    --primary-light: #2ED8D3;
    --primary-color: #07BEB8;
    --secondary-color: #3DCCC7;
    --accent-color: #68D8D6;
    /* ==========================
       Buttons
    ========================== */
    --btn-primary-bg: #07BEB8;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #06AAA5;
    --btn-secondary-bg: #F4FFFF;
    --btn-secondary-text: #153B42;
    --btn-secondary-hover: #C4FFF9;
    --btn-success: #22C55E;
    --btn-warning: #F59E0B;
    --btn-danger: #EF4444;
    --btn-info: #3DCCC7;
    /* ==========================
       Cards
    ========================== */
    --card-bg: #FFFFFF;
    --card-header-bg: #F6FFFF;
    --card-header-text: #153B42;
    --card-border: #D7F6F5;
    --card-shadow: rgba(7,190,184,.08);
    /* ==========================
       Inputs
    ========================== */
    --input-bg: #FFFFFF;
    --input-border: #BCEFED;
    --input-focus: #07BEB8;
    --placeholder-color: #8AA3A8;
    /* ==========================
       Typography
    ========================== */
    --text-primary: #16363B;
    --text-secondary: #5E7478;
    --heading-color: #153B42;
    --paragraph-color: #61767A;
    /* ==========================
       Links
    ========================== */
    --link-color: #07BEB8;
    --link-hover: #06AAA5;
    /* ==========================
       Tables
    ========================== */
    --table-header-bg: #F4FFFF;
    --table-header-text: #153B42;
    --table-row-bg: #FFFFFF;
    --table-row-alt-bg: #FBFFFF;
    --table-row-hover: #ECFEFD;
    --table-border: #D6F6F5;
    /* ==========================
       Borders
    ========================== */
    --border-color: #D6F6F5;
    --divider-color: #E7FBFA;
    --border-light: #F6FFFF;
    /* ==========================
       Status Colors
    ========================== */
    --success-color: #22C55E;
    --warning-color: #F59E0B;
    --danger-color: #EF4444;
    --info-color: #07BEB8;
    /* ==========================
       Soft Background Colors
    ========================== */
    --primary-soft-bg: rgba(7,190,184,.12);
    --success-soft-bg: rgba(34,197,94,.10);
    --success-soft-bg-strong: rgba(34,197,94,.16);
    --warning-soft-bg: rgba(245,158,11,.12);
    --danger-soft-bg: rgba(239,68,68,.10);
    --info-soft-bg: rgba(61,204,199,.12);
    /* ==========================
       Overlay
    ========================== */
    --overlay-bg: rgba(21,59,66,.25);
    --overlay-bg-light: rgba(255,255,255,.90);
    /* ==========================
       Shadows
    ========================== */
    --shadow-sm: 0 2px 6px rgba(21,59,66,.05);
    --shadow-md: 0 8px 22px rgba(21,59,66,.08);
    --shadow-lg: 0 18px 40px rgba(21,59,66,.12);
    --floating-shadow: 0 10px 30px rgba(21,59,66,.10);
    --offcanvas-shadow: -6px 0 30px rgba(21,59,66,.16);
    --primary-shadow: 0 0 0 .20rem rgba(7,190,184,.18);
    /* ==========================
       Footer
    ========================== */
    --footer-bg: #FFFFFF;
    --footer-text: #6B7C80;
}

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

.badge.green,
.badge.red {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 30px;
}

.badge.green {
    background: color-mix(in srgb, var(--success-color) 12%, var(--content-bg));
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.badge.red {
    background: color-mix(in srgb, var(--danger-color) 12%, var(--content-bg));
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}



/* =========================================
   Custom Buttons
========================================= */

/* btn btn-custom btn-primary-custom */

.btn-primary-custom {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}

    .btn-primary-custom:hover,
    .btn-primary-custom:focus {
        background: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
        color: var(--btn-primary-text);
    }

/* btn btn-custom btn-outline-custom */

.btn-outline-custom {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .btn-outline-custom:hover {
        background: var(--btn-secondary-hover);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

/* table-btn */

.table-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .table-btn:hover {
        background: var(--content-bg);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

/* table-btn table-btn-primary */

.table-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}

    .table-btn-primary:hover {
        background: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
        color: var(--btn-primary-text);
    }

/* Filter Collapse Button */

.filter-collapse-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .filter-collapse-btn:hover {
        background: var(--content-bg);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .filter-collapse-btn .filter-arrow {
        color: var(--text-secondary);
    }



/* ==========================================================
   GLOBAL THEME
========================================================== */
.main-footer,
footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar);
}

::-webkit-scrollbar-track {
    background: transparent;
}
::selection {
    background: var(--primary-color);
    color: var(--content-bg);
}
:focus-visible {
    outline: 2px solid var(--primary-color);
}

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

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

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

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


.text-success {
    color: var(--success-color) !important;
}
html,
body {
    background: var(--layout-bg);
    color: var(--paragraph-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
}

a {
    color: var(--link-color);
}

    a:hover {
        color: var(--link-hover);
    }

/* Smooth Theme Change */

* {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

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

/* Main Sidebar */

.main-sidebar {
    background: var(--sidebar-bg);
}

/* Sidebar Header */

.sidebar-header {
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-divider);
}

/* Sidebar Scroll */

.sidebar-scroll {
    scrollbar-color: var(--sidebar-scrollbar) transparent;
}

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: var(--sidebar-scrollbar);
        border-radius: 10px;
    }

    .sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/* Sidebar Menu */

.sidebar-menu > li > a {
    color: var(--sidebar-text);
}

.sidebar-menu > li:hover > a {
    background: var(--sidebar-hover);
    color: var(--sidebar-hover-text);
}

.sidebar-menu > li.active > a {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

/* Tree Menu */

.sidebar-menu .treeview-menu {
    background: var(--sidebar-bg);
}

    .sidebar-menu .treeview-menu > li > a {
        color: var(--sidebar-text);
    }

        .sidebar-menu .treeview-menu > li > a:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-hover-text);
        }

    .sidebar-menu .treeview-menu > li.active > a {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
    }

.treeview.active > a {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

/* Sidebar Labels */

.sidebar-menu li.header {
    color: var(--text-secondary);
}

/* Sidebar Icons */

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .bi,
.sidebar-menu .bi-record-fill {
    color: inherit;
}

/* Mobile Icon */

.MobileIcon {
    color: var(--sidebar-text);
}

/* Logo Area */

.leftNav_Logo {
    background: var(--logo-bg) !important;
}

.sidebar-mini .main-logo {
    background: var(--logo-container-bg);
}

.sidebar-collapse .main-logosml {
    background: var(--logo-container-bg);
}

/* Sidebar Toggle */

.main-sidebar .sidebar-toggle {
    color: var(--sidebar-text);
}

.sidebar .sidebar-toggle {
    color: var(--sidebar-text);
    background: transparent;
}

    .sidebar .sidebar-toggle:hover {
        color: var(--sidebar-hover-text);
        background: var(--sidebar-hover);
    }

/* Global Toggle */

.sidebar-toggle {
    color: var(--navbar-text);
}

    .sidebar-toggle:hover {
        color: var(--navbar-hover);
    }

    .sidebar-toggle:focus,
    .sidebar-toggle:active {
        color: var(--navbar-text);
    }

/* Tile Toggle */

.tile-toggle {
    background: var(--secondary-color);
    color: var(--content-bg);
}

    .tile-toggle:hover {
        filter: brightness(.95);
    }

/* Sidebar Badge */

.sidebar-menu .badge,
.sidebar-menu .label {
    background: var(--primary-color);
    color: var(--content-bg);
}

/* Sidebar Active Left Border */

.sidebar-menu > li.active > a {
    border-left-color: var(--primary-color);
}

/* Sidebar Submenu Indicator */

.sidebar-menu li > a > .fa-angle-down {
    color: inherit;
}

/* Sidebar Divider */

.sidebar hr {
    border-color: var(--sidebar-divider);
}

/* Sidebar Search (Future Support) */

.sidebar-search input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

    .sidebar-search input:focus {
        border-color: var(--input-focus);
    }

/* ==========================================================
   HEADER / NAVBAR
========================================================== */

/* Fixed Header */

.fixed-top {
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--divider-color);
    box-shadow: 0 2px 8px var(--card-shadow);
}

/* Top Header */

.top-header {
    background: var(--header-bg);
    color: var(--btn-primary-text);
}

/* Navbar */

.navbar {
    background: var(--navbar-bg);
    color: var(--navbar-text);
}

.navbar-brand {
    color: var(--navbar-text);
}

    .navbar-brand:hover {
        color: var(--primary-color);
    }

/* Navbar Links */

.navbar-nav .nav-link {
    color: var(--navbar-text);
}

    .navbar-nav .nav-link:hover {
        color: var(--primary-color);
    }

    .navbar-nav .nav-link.active {
        color: var(--primary-color);
    }

/* Header Icons */

.navbar i,
.navbar .fa,
.navbar .bi {
    color: var(--navbar-text);
}

    .navbar i:hover,
    .navbar .fa:hover,
    .navbar .bi:hover {
        color: var(--primary-color);
    }

/* Search Box */

.navbar .form-control {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

    .navbar .form-control::placeholder {
        color: var(--placeholder-color);
    }

    .navbar .form-control:focus {
        border-color: var(--input-focus);
        box-shadow: none;
    }

/* Header Buttons */

.navbar .btn {
    color: var(--navbar-text);
}

    .navbar .btn:hover {
        color: var(--primary-color);
    }

/* Notification Badge */

.notification-badge,
.badge-notification {
    background: var(--danger-color);
    color: var(--content-bg);
}

/* User Profile */

.user-profile,
.user-info {
    color: var(--navbar-text);
}

    .user-profile:hover,
    .user-info:hover {
        color: var(--primary-color);
    }

/* Dropdown */

.dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 5px 20px var(--card-shadow);
}

.dropdown-item {
    color: var(--text-primary);
}

    .dropdown-item:hover {
        background: var(--content-bg);
        color: var(--primary-color);
    }

.dropdown-divider {
    border-color: var(--divider-color);
}

/* Header Search Icon */

.search-icon {
    color: var(--navbar-text);
}

/* Notification Icon */

.notification-icon {
    color: var(--navbar-text);
}

    .notification-icon:hover {
        color: var(--primary-color);
    }

/* Message Icon */

.message-icon {
    color: var(--navbar-text);
}

    .message-icon:hover {
        color: var(--primary-color);
    }

/* Settings Icon */

.settings-icon {
    color: var(--navbar-text);
}

    .settings-icon:hover {
        color: var(--primary-color);
    }

/* Fullscreen Icon */

.fullscreen-icon {
    color: var(--navbar-text);
}

    .fullscreen-icon:hover {
        color: var(--primary-color);
    }

/* Breadcrumb */

.breadcrumb {
    background: transparent;
}

.breadcrumb-item {
    color: var(--text-secondary);
}

    .breadcrumb-item.active {
        color: var(--text-primary);
    }

    .breadcrumb-item a {
        color: var(--primary-color);
    }

        .breadcrumb-item a:hover {
            color: var(--link-hover);
        }

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

/* Primary Button */

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
        color: var(--btn-primary-text);
    }

/* Secondary Button */

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border-color);
}

    .btn-secondary:hover {
        background: var(--btn-secondary-hover);
        color: var(--btn-secondary-text);
    }

/* Success Button */

.btn-success {
    background: var(--btn-success);
    border-color: var(--btn-success);
    color: var(--content-bg);
}

    .btn-success:hover {
        filter: brightness(.95);
        background: var(--btn-success);
        border-color: var(--btn-success);
    }

/* Danger Button */

.btn-danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--content-bg);
}

    .btn-danger:hover {
        filter: brightness(.95);
    }

/* Warning Button */

.btn-warning {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--content-bg);
}

    .btn-warning:hover {
        filter: brightness(.95);
    }

/* Info Button */

.btn-info {
    background: var(--info-color);
    border-color: var(--info-color);
    color: var(--content-bg);
}

    .btn-info:hover {
        filter: brightness(.95);
    }

/* Your Existing Green Button */

.green_btn {
    background: var(--btn-success);
    color: var(--content-bg);
    border: 1px solid var(--btn-success);
}

    .green_btn:hover {
        background: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
        color: var(--content-bg);
    }

/* var(--content-bg) Button */

.white_btn {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .white_btn:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--content-bg);
    }

/* Gray Button */

.gray_btn {
    background: var(--table-header-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .gray_btn:hover {
        background: var(--btn-secondary-hover);
    }

/* Outline Buttons */

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: transparent;
}

    .btn-outline-primary:hover {
        background: var(--primary-color);
        color: var(--content-bg);
    }

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
    background: transparent;
}

    .btn-outline-success:hover {
        background: var(--success-color);
        color: var(--content-bg);
    }

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: transparent;
}

    .btn-outline-danger:hover {
        background: var(--danger-color);
        color: var(--content-bg);
    }

/* Disabled */

.btn:disabled,
.btn.disabled {
    background: var(--table-header-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Icon Buttons */

.icon-btn,
.btn-icon {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .icon-btn:hover,
    .btn-icon:hover {
        background: var(--primary-color);
        color: var(--content-bg);
    }

/* Floating Action Button */

.fab,
.floating-btn {
    background: var(--primary-color);
    color: var(--content-bg);
    box-shadow: 0 5px 18px var(--card-shadow);
}

    .fab:hover,
    .floating-btn:hover {
        background: var(--btn-primary-hover);
    }

/* Pagination Buttons */

.page-link {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

    .page-link:hover {
        background: var(--primary-color);
        color: var(--content-bg);
    }

.page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--content-bg);
}

/* ==========================================================
   FORMS
========================================================== */

/* Labels */

label,
.form-label {
    color: var(--text-primary);
}

/* Inputs */

.form-control {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

    .form-control:hover {
        border-color: var(--primary-color);
    }

    .form-control:focus {
        background: var(--input-bg);
        color: var(--text-primary);
        border-color: var(--input-focus);
        box-shadow: 0 0 0 .15rem var(--primary-shadow);
    }

    /* Placeholder */

    .form-control::placeholder {
        color: var(--placeholder-color);
    }

    /* Disabled */

    .form-control:disabled,
    .form-control[readonly] {
        background: var(--table-header-bg);
        color: var(--text-secondary);
    }

/* Select */

.form-select {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

    .form-select:focus {
        border-color: var(--input-focus);
        box-shadow: 0 0 0 .15rem var(--primary-shadow);
    }

/* Textarea */

textarea.form-control {
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Input Group */

.input-group-text {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

/* Checkbox */

.form-check-input {
    border-color: var(--input-border);
}

    .form-check-input:checked {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    /* Radio */

    .form-check-input[type="radio"]:checked {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

/* Switch */

.form-switch .form-check-input {
    background-color: var(--table-header-bg);
    border-color: var(--input-border);
}

    .form-switch .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

/* Search Box */

.search-box input,
.search-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

    .search-box input:focus,
    .search-input:focus {
        border-color: var(--input-focus);
    }

/* Validation */

.is-valid {
    border-color: var(--success-color) !important;
}

.is-invalid {
    border-color: var(--danger-color) !important;
}

.valid-feedback {
    color: var(--success-color);
}

.invalid-feedback {
    color: var(--danger-color);
}

/* Dropdown */

.dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 5px 15px var(--card-shadow);
}

.dropdown-item {
    color: var(--text-primary);
}

    .dropdown-item:hover {
        background: var(--content-bg);
        color: var(--primary-color);
    }

.dropdown-divider {
    border-color: var(--divider-color);
}

/* Modal */

.modal-content {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}

.modal-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: 1px solid var(--card-border);
}

.modal-footer {
    border-top: 1px solid var(--card-border);
}

.modal-title {
    color: var(--card-header-text);
}

/* Offcanvas */

.offcanvas {
    background: var(--card-bg);
    color: var(--text-primary);
}

.offcanvas-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-border);
}

.offcanvas-title {
    color: var(--card-header-text);
}

/* Close Button */

.btn-close {
    filter: opacity(.7);
}

    .btn-close:hover {
        filter: opacity(1);
    }

/* Accordion */

.accordion-item {
    background: var(--card-bg);
    border-color: var(--card-border);
}

.accordion-button {
    background: var(--card-bg);
    color: var(--text-primary);
}

    .accordion-button:not(.collapsed) {
        background: var(--content-bg);
        color: var(--primary-color);
    }

/* File Upload */

input[type=file] {
    color: var(--text-primary);
}

/* Range Slider */

.form-range::-webkit-slider-thumb {
    background: var(--primary-color);
}

.form-range::-moz-range-thumb {
    background: var(--primary-color);
}

/* Date Picker */

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

/* ==========================================================
   CARDS & DASHBOARD
========================================================== */

/* =========================================
   Bootstrap Cards
========================================= */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 3px 10px var(--card-shadow);
}

.card-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: 1px solid var(--card-border);
}

    .card-header h1,
    .card-header h2,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        color: var(--card-header-text);
    }

.card-body {
    background: var(--card-bg);
    color: var(--text-primary);
}

.card-footer {
    background: var(--card-header-bg);
    border-top: 1px solid var(--card-border);
}

/* =========================================
   Generic Cards
========================================= */

.box,
.card-custom,
.card-mini,
.generic-card,
.quick-action,
.aggregator-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 3px 10px var(--card-shadow);
}

    .box:hover,
    .card-custom:hover,
    .card-mini:hover,
    .generic-card:hover,
    .quick-action:hover,
    .aggregator-card:hover {
        border-color: var(--primary-color);
    }

/* =========================================
   Detail Card
========================================= */

.detail-item {
    background: var(--content-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

/* =========================================
   Dashboard Statistics
========================================= */

.stat-card,
.dashboard-card,
.dashboard-widget {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .stat-card h2,
    .dashboard-card h2 {
        color: var(--heading-color);
    }

    .stat-card p,
    .dashboard-card p {
        color: var(--text-secondary);
    }

/* =========================================
   Card Icons
========================================= */

.card-icon,
.dashboard-icon {
    color: var(--primary-color);
}

/* =========================================
   Widget Title
========================================= */

.widget-title {
    color: var(--heading-color);
}

.widget-subtitle {
    color: var(--text-secondary);
}

/* =========================================
   Progress Bar
========================================= */

.progress {
    background: var(--table-header-bg);
}

.progress-bar {
    background: var(--primary-color);
}

/* =========================================
   Badges
========================================= */

.badge-primary {
    background: var(--primary-color);
    color: var(--content-bg);
}

.badge-success {
    background: var(--success-color);
    color: var(--content-bg);
}

.badge-warning {
    background: var(--warning-color);
    color: var(--content-bg);
}

.badge-danger {
    background: var(--danger-color);
    color: var(--content-bg);
}

.badge-info {
    background: var(--info-color);
    color: var(--content-bg);
}

/* =========================================
   Timeline
========================================= */

.timeline-item {
    background: var(--card-bg);
    border-left: 4px solid var(--primary-color);
}

    .timeline-item h5 {
        color: var(--heading-color);
    }

    .timeline-item p {
        color: var(--text-secondary);
    }

/* =========================================
   Notification Cards
========================================= */

.notification-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .notification-card:hover {
        border-color: var(--primary-color);
    }

/* =========================================
   Activity Cards
========================================= */

.activity-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .activity-card h5 {
        color: var(--heading-color);
    }

    .activity-card p {
        color: var(--text-secondary);
    }

/* =========================================
   Chart Container
========================================= */

.chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

/* =========================================
   Counter Cards
========================================= */

.counter-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .counter-card .count {
        color: var(--primary-color);
    }

/* =========================================
   KPI Cards
========================================= */

.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .kpi-card .value {
        color: var(--heading-color);
    }

    .kpi-card .label {
        color: var(--text-secondary);
    }

/* =========================================
   Small Cards
========================================= */

.small-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.small-box-footer {
    background: var(--content-bg);
    color: var(--text-primary);
}

/* ==========================================================
   TABLES & DATATABLES
========================================================== */

/* =========================================
   Bootstrap Table
========================================= */

.table {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--table-border);
}

    .table th {
        background: var(--table-header-bg);
        color: var(--table-header-text);
        border-color: var(--table-border);
    }

    .table td {
        color: var(--text-primary);
        border-color: var(--table-border);
    }

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--table-row-alt-bg);
}

.table-hover tbody tr:hover {
    background: var(--table-row-hover);
}

.table-bordered {
    border-color: var(--table-border);
}

    .table-bordered td,
    .table-bordered th {
        border-color: var(--table-border);
    }

/* =========================================
   DataTables
========================================= */

table.dataTable {
    border-color: var(--table-border);
}

    table.dataTable thead th {
        background: var(--table-header-bg);
        color: var(--table-header-text);
        border-color: var(--table-border);
    }

    table.dataTable tbody td {
        color: var(--text-primary);
        border-color: var(--table-border);
    }

    table.dataTable tbody tr {
        background: var(--table-row-bg);
    }

        table.dataTable tbody tr:nth-child(even) {
            background: var(--table-row-alt-bg);
        }

        table.dataTable tbody tr:hover {
            background: var(--table-row-hover);
        }

        table.dataTable tbody tr.selected {
            background: var(--primary-color);
            color: var(--content-bg);
        }

/* =========================================
   DataTable Header/Footer
========================================= */

.dataTables_scrollHead {
    background: var(--table-header-bg);
}

.dataTables_scrollFoot {
    background: var(--card-bg);
}

/* =========================================
   Search Box
========================================= */

.dataTables_filter input {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

    .dataTables_filter input:focus {
        border-color: var(--input-focus);
        box-shadow: none;
    }

/* =========================================
   Length Dropdown
========================================= */

.dataTables_length select {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

/* =========================================
   Info Text
========================================= */

.dataTables_info {
    color: var(--text-secondary);
}

/* =========================================
   Pagination
========================================= */

.dataTables_paginate .paginate_button {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

    .dataTables_paginate .paginate_button:hover {
        background: var(--primary-color) !important;
        color: var(--content-bg) !important;
        border-color: var(--primary-color) !important;
    }

    .dataTables_paginate .paginate_button.current {
        background: var(--primary-color) !important;
        color: var(--content-bg) !important;
        border-color: var(--primary-color) !important;
    }

/* =========================================
   Sorting Icons
========================================= */

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--table-header-text);
}

/* =========================================
   Responsive Table
========================================= */

.table-responsive {
    background: var(--card-bg);
}

/* =========================================
   Export Buttons
========================================= */

.dt-button,
.buttons-copy,
.buttons-csv,
.buttons-excel,
.buttons-pdf,
.buttons-print {
    background: var(--btn-secondary-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

    .dt-button:hover,
    .buttons-copy:hover,
    .buttons-csv:hover,
    .buttons-excel:hover,
    .buttons-pdf:hover,
    .buttons-print:hover {
        background: var(--primary-color) !important;
        color: var(--content-bg) !important;
        border-color: var(--primary-color) !important;
    }

/* =========================================
   Filter Row
========================================= */

.table-filter {
    background: var(--content-bg);
}

    .table-filter input,
    .table-filter select {
        background: var(--input-bg);
        color: var(--text-primary);
        border: 1px solid var(--input-border);
    }

/* =========================================
   Table Footer
========================================= */

tfoot {
    background: var(--card-header-bg);
}

    tfoot td {
        color: var(--text-primary);
    }

/* =========================================
   Empty Table
========================================= */

.dataTables_empty {
    color: var(--text-secondary);
}

/* =========================================
   Processing
========================================= */

.dataTables_processing {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 1px solid var(--card-border);
}

/* =========================================
   Checkbox Column
========================================= */

.table-check {
    accent-color: var(--primary-color);
}

/* ==========================================================
   ALERTS • BADGES • TOAST • LOADER • STATUS
========================================================== */

/* =========================================
   Alerts
========================================= */

.alert {
    border: 1px solid transparent;
    color: var(--text-primary);
}

.alert-primary {
    background: var(--primary-soft-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.alert-success {
    background: var(--success-soft-bg);
    border-color: var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background: var(--warning-soft-bg);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.alert-danger {
    background: var(--danger-soft-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.alert-info {
    background: var(--info-soft-bg);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* =========================================
   Bootstrap Badges
========================================= */

.badge {
    color: var(--content-bg);
}

.badge-primary {
    background: var(--primary-color);
}

.badge-secondary {
    background: var(--secondary-color);
}

.badge-success {
    background: var(--success-color);
}

.badge-warning {
    background: var(--warning-color);
}

.badge-danger {
    background: var(--danger-color);
}

.badge-info {
    background: var(--info-color);
}

/* =========================================
   Status Chips
========================================= */

.status-active {
    background: var(--success-soft-bg-strong);
    color: var(--success-color);
}

.status-inactive {
    background: var(--danger-soft-bg);
    color: var(--danger-color);
}

.status-pending {
    background: var(--warning-soft-bg);
    color: var(--warning-color);
}

.status-info {
    background: var(--info-soft-bg);
    color: var(--info-color);
}

/* =========================================
   Toast
========================================= */

.toast {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    box-shadow: 0 5px 20px var(--card-shadow);
}

.toast-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: 1px solid var(--card-border);
}

.toast-body {
    color: var(--text-primary);
}

/* =========================================
   Progress
========================================= */

.progress {
    background: var(--table-row-alt-bg);
}

.progress-bar {
    background: var(--primary-color);
}

    .progress-bar.bg-success {
        background: var(--success-color) !important;
    }

    .progress-bar.bg-warning {
        background: var(--warning-color) !important;
    }

    .progress-bar.bg-danger {
        background: var(--danger-color) !important;
    }

    .progress-bar.bg-info {
        background: var(--info-color) !important;
    }

/* =========================================
   Loader
========================================= */

.loader,
.spinner-border {
    color: var(--primary-color);
}

.spinner-grow {
    background: var(--primary-color);
}

/* =========================================
   Page Loader
========================================= */

.page-loader {
    background: var(--overlay-bg-light);
}

    .page-loader .spinner {
        border-top-color: var(--primary-color);
    }

/* =========================================
   Tooltip
========================================= */

.tooltip-inner {
    background: var(--text-primary);
    color: var(--content-bg);
}

.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--text-primary);
}

.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--text-primary);
}

.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--text-primary);
}

.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--text-primary);
}

/* =========================================
   Popover
========================================= */

.popover {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.popover-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    border-bottom: 1px solid var(--card-border);
}

.popover-body {
    color: var(--text-primary);
}

/* =========================================
   Avatar
========================================= */

.avatar {
    background: var(--primary-color);
    color: var(--content-bg);
}

.avatar-outline {
    border: 2px solid var(--primary-color);
}

/* =========================================
   Timeline
========================================= */

.timeline::before {
    background: var(--border-color);
}

.timeline-item::before {
    background: var(--primary-color);
}

.timeline-item {
    color: var(--text-primary);
}

/* =========================================
   Notification Counter
========================================= */

.notification-count {
    background: var(--danger-color);
    color: var(--content-bg);
}

/* =========================================
   Online Indicator
========================================= */

.online {
    background: var(--success-color);
}

.offline {
    background: var(--danger-color);
}

.away {
    background: var(--warning-color);
}

/* =========================================
   HR Divider
========================================= */

hr {
    border-color: var(--divider-color);
}

/* ==========================================================
   PAGE COMPONENTS
   Login • Dashboard • Calendar • Charts • Widgets • Tabs
========================================================== */


/* =========================================
   LOGIN PAGE
========================================= */

.login-page {
    background: var(--layout-bg);
}

.login-box,
.login-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 25px var(--card-shadow);
}

.login-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
}

.login-title {
    color: var(--heading-color);
}

.login-subtitle {
    color: var(--text-secondary);
}


/* =========================================
   PROFILE
========================================= */

.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.profile-name {
    color: var(--heading-color);
}

.profile-role {
    color: var(--text-secondary);
}

.profile-info {
    color: var(--text-primary);
}


/* =========================================
   DASHBOARD
========================================= */

.dashboard-header {
    color: var(--heading-color);
}

.dashboard-subtitle {
    color: var(--text-secondary);
}

.dashboard-widget {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}


/* =========================================
   QUICK ACTIONS
========================================= */

.quick-action {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

    .quick-action:hover {
        border-color: var(--primary-color);
    }

    .quick-action i {
        color: var(--primary-color);
    }


/* =========================================
   KPI
========================================= */

.kpi-title {
    color: var(--text-secondary);
}

.kpi-value {
    color: var(--heading-color);
}

.kpi-icon {
    color: var(--primary-color);
}


/* =========================================
   TABS
========================================= */

.nav-tabs {
    border-bottom-color: var(--border-color);
}

    .nav-tabs .nav-link {
        color: var(--text-secondary);
    }

        .nav-tabs .nav-link:hover {
            color: var(--primary-color);
        }

        .nav-tabs .nav-link.active {
            background: var(--card-bg);
            color: var(--primary-color);
            border-color: var(--card-border);
        }


/* =========================================
   PILLS
========================================= */

.nav-pills .nav-link {
    color: var(--text-primary);
}

    .nav-pills .nav-link.active {
        background: var(--primary-color);
        color: var(--content-bg);
    }


/* =========================================
   ACCORDION
========================================= */

.accordion-item {
    background: var(--card-bg);
    border-color: var(--card-border);
}

.accordion-button {
    background: var(--card-bg);
    color: var(--text-primary);
}

    .accordion-button:not(.collapsed) {
        background: var(--content-bg);
        color: var(--primary-color);
    }


/* =========================================
   LIST GROUP
========================================= */

.list-group-item {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
}

    .list-group-item:hover {
        background: var(--content-bg);
    }

    .list-group-item.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }


/* =========================================
   CALENDAR
========================================= */

.calendar {
    background: var(--card-bg);
}

.calendar-day {
    color: var(--text-primary);
}

    .calendar-day.today {
        background: var(--primary-color);
        color: var(--content-bg);
    }

    .calendar-day.selected {
        background: var(--secondary-color);
        color: var(--content-bg);
    }


/* =========================================
   CHARTS
========================================= */

.chart-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.chart-title {
    color: var(--heading-color);
}

.chart-subtitle {
    color: var(--text-secondary);
}


/* =========================================
   SEARCH BOX
========================================= */

.search-box {
    background: var(--card-bg);
    border-color: var(--border-color);
}

    .search-box input {
        color: var(--text-primary);
    }


/* =========================================
   EMPTY STATE
========================================= */

.empty-state {
    color: var(--text-secondary);
}

    .empty-state i {
        color: var(--primary-color);
    }


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

.pagination .page-link {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

    .pagination .page-link:hover {
        background: var(--primary-color);
        color: var(--content-bg);
    }

.pagination .active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
}


/* =========================================
   OFFCANVAS
========================================= */

.offcanvas {
    background: var(--card-bg);
    color: var(--text-primary);
}

.offcanvas-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-border);
}

.offcanvas-title {
    color: var(--card-header-text);
}


/* =========================================
   MODAL
========================================= */

.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.modal-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-border);
}

.modal-title {
    color: var(--card-header-text);
}

.modal-footer {
    border-top: 1px solid var(--card-border);
}


/* =========================================
   CUSTOM ICONS
========================================= */

.action_icon {
    background: var(--content-bg);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
}

    .action_icon:hover {
        background: var(--primary-color);
        color: var(--content-bg);
    }