:root {
        --theme-deafult: #374756;
        --theme-secondary: #f73164;
        --light-background: rgba(242, 243, 247, 0.7);
        --body-font-color: #2F2F3B;
        --chart-border: #ECF3FA;
        --recent-chart-bg: #FCFCFD;
        --light-bg: #EEF1F6;
        --white: #fff;
        --light2: #F5F6F9;
        --sidebar-border: rgba(0, 0, 0, 0.1);
        --chart-text-color: rgba(82, 82, 108, 0.8);
        --recent-dashed-border: rgba(82, 82, 108, 0.3);
        --chart-dashed-border: rgba(82, 82, 108, 0.2);
        --chart-progress-light: rgba(82, 82, 108, 0.1);
        --recent-box-bg: #F2F4F7;
        --recent-border: rgba(97, 101, 122, 0.25);
        --course-light-btn: #F2F3F7;
        --course-bg: #F7F7F7;
        --balance-profie-bg: #E0DFEF;
        --view-grid-bg: #ECF3FA80;
        --view-border-marker: #cfcdfc;
        --light-slate: #F5F6F9;
        --text-gray: rgba(82, 82, 108, 0.8);
        --product-shadow: 0px 1px 0px rgba(82, 82, 108, 0.15);
        --light-shade-primary: rgba(245, 244, 255);
        --dark-primary: rgba(115, 102, 255);
        --fc-button-bg-color: var(--theme-deafult);
        --fc-button-active-bg-color: var(--theme-deafult);
        --fc-button-active-border-color: var(--theme-deafult);
        --fc-button-border-color: var(--theme-deafult);
        --fc-button-hover-bg-color: var(--theme-deafult);
        --fc-button-hover-border-color: var(--theme-deafult);
        --normal: #ECEAF3;
        --normal-shadow: #D9D8E3;
        --normal-mouth: #9795A4;
        --normal-eye: #595861;
        --active: #F8DA69;
        --active-shadow: #F4B555;
        --active-mouth: #F05136;
        --active-eye: #313036;
        --active-tear: #76b5e7;
        --active-shadow-angry: #e94f1d;
        /* Do not show the "remove tag" (x) button when only a single tag remains */
    }

    :root .customLook {
        --tag-bg: var(--theme-deafult);
        --tag-hover: var(--theme-secondary);
        --tag-text-color: var(--white);
        --tags-border-color: silver;
        --tag-border-radius: 25px;
        --tag-text-color--edit: #111;
        --tag-remove-bg: var(--tag-hover);
        --tag-pad: .6em 1em;
        --tag-inset-shadow-size: 1.35em;
        --tag-remove-btn-bg--hover: #000;
        --tagify-dd-color-primary: var(var(--theme-deafult));
        --tagify-dd-bg-color: var(--course-light-btn);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .btn-light{
        color: black !important;
    }
.list-group-item{
    color: black !important;
}
select{
    width: auto !important;
}
    /* Light Mode (Default) - WhatsApp Colors */
    body:not(.dark-only) {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #FFFFFF !important;
        background-image: radial-gradient(circle at top left,
                rgba(255, 255, 255, 1) 0%,
                rgba(200, 230, 255, 0.6) 15%,
                rgba(200, 230, 255, 0.3) 30%,
                rgba(200, 230, 255, 0.1) 45%,
                rgba(255, 255, 255, 0.8) 60%,
                rgba(255, 255, 255, 1) 100%) !important;
        background-size: 100% 100% !important;
        background-position: top left !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        color: #2F2F3B !important;
        overflow-y: auto;
        transition: background 0.3s ease, color 0.3s ease;
    }

    body:not(.dark-only) h1,
    body:not(.dark-only) h2,
    body:not(.dark-only) h3,
    body:not(.dark-only) h4,
    body:not(.dark-only) h5,
    body:not(.dark-only) h6,
    body:not(.dark-only) p {
        color: #2F2F3B !important;
    }


    /* Dark Mode */
    body.dark-only {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #000000 0%, #001a0d 25%, #012011ff 50%, #001a0d 75%, #000000 100%);
        color: white !important;
        overflow-y: auto;
        transition: background 0.3s ease, color 0.3s ease;
    }

    body.dark-only h1,
    body.dark-only h2,
    body.dark-only h3,
    body.dark-only h4,
    body.dark-only h5,
    body.dark-only h6,
    body.dark-only p {
        color: white !important;
    }

    body.dark-only .card {
        background-color: transparent !important;
    }

    /* Header Section - Light Mode */
    body:not(.dark-only) .main-header {
        background: transparent;
        /* backdrop-filter removed for performance */
        padding: 15px 30px;
        box-shadow: none;
        position: sticky;
        top: 0;
        z-index:99 !important;
        border: none;
    }

    /* Header Section - Dark Mode */
    body.dark-only .main-header {
        background: rgba(168, 229, 255, 0.06);
        /* backdrop-filter removed for performance */
        padding: 15px 30px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        position: sticky;
        top: 0;
        z-index: 99;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }

    .logo-section {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* Logo - Light Mode */
    body:not(.dark-only) .navbar-brand-logo {
        max-height: 45px;
        filter: none;
    }

    /* Logo - Dark Mode */
    body.dark-only .navbar-brand-logo {
        max-height: 45px;
        filter: brightness(0) invert(1);
    }

    /* Company Select - Light Mode */
    body:not(.dark-only) .company-select-wrapper {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(225, 231, 255, 0.8);
        border-radius: 8px;
        padding: 8px 15px;
        min-width: 200px;
    }

    body:not(.dark-only) .company-select-wrapper select {
        background: transparent;
        border: none;
        color: #2F2F3B;
        width: 100%;
        font-weight: 500;
        outline: none;
        cursor: pointer;
    }

    body:not(.dark-only) .company-select-wrapper select option {
        background: #ffffff;
        color: #2F2F3B;
    }

    /* Company Select - Dark Mode */
    body.dark-only .company-select-wrapper {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 8px 15px;
        min-width: 200px;
    }

    body.dark-only .company-select-wrapper select {
        background: transparent;
        border: none;
        color: white;
        width: 100%;
        font-weight: 500;
        outline: none;
        cursor: pointer;
    }

    body.dark-only .company-select-wrapper select option {
        background: #2a2a2a;
        color: white;
    }

    /* Header Right Actions */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .user-menu {
        position: relative;
    }

    /* User Trigger - Light Mode */
    body:not(.dark-only) .user-trigger {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        padding: 8px 15px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
        border: 1px solid rgba(225, 231, 255, 0.8);
    }

    body:not(.dark-only) .user-trigger:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(225, 231, 255, 1);
    }

    /* User Trigger - Dark Mode */
    body.dark-only .user-trigger {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        padding: 8px 15px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    body.dark-only .user-trigger:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        object-fit: cover;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* User Info - Light Mode */
    body:not(.dark-only) .user-name {
        font-weight: 600;
        font-size: 14px;
        color: #2F2F3B;
    }

    body:not(.dark-only) .user-email {
        font-size: 12px;
        color: rgba(47, 47, 59, 0.6);
    }

    /* User Info - Dark Mode */
    body.dark-only .user-name {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    body.dark-only .user-email {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }

    /* Dropdown Icon - Light Mode */
    body:not(.dark-only) .dropdown-icon {
        color: rgba(47, 47, 59, 0.7);
        transition: transform 0.3s ease;
    }

    /* Dropdown Icon - Dark Mode */
    body.dark-only .dropdown-icon {
        color: rgba(255, 255, 255, 0.7);
        transition: transform 0.3s ease;
    }

    .user-menu.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Dropdown Menu - Light Mode */
    body:not(.dark-only) .user-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        background: rgba(255, 255, 255, 0.98);
        /* backdrop-filter removed for performance */
        border: 1px solid rgba(225, 231, 255, 0.8);
        border-radius: 12px;
        min-width: 250px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        z-index: 1001;
    }

    /* Dropdown Menu - Dark Mode */
    body.dark-only .user-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        background: rgba(0, 0, 0, 0.95);
        /* backdrop-filter removed for performance */
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        min-width: 250px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }

    /* Dropdown Header - Light Mode */
    body:not(.dark-only) .dropdown-header {
        padding: 20px;
        border-bottom: 1px solid rgba(225, 231, 255, 0.5);
    }

    /* Dropdown Header - Dark Mode */
    body.dark-only .dropdown-header {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-user-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .dropdown-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    /* Dropdown User Details - Light Mode */
    body:not(.dark-only) .dropdown-user-details h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #2F2F3B;
    }

    body:not(.dark-only) .dropdown-user-details p {
        margin: 5px 0 0;
        font-size: 13px;
        color: rgba(47, 47, 59, 0.6);
    }

    /* Dropdown User Details - Dark Mode */
    body.dark-only .dropdown-user-details h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: white;
    }

    body.dark-only .dropdown-user-details p {
        margin: 5px 0 0;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
    }

    .dropdown-menu-items {
        padding: 10px 0;
    }

    /* Dropdown Item - Light Mode */
    body:not(.dark-only) .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        color: #2F2F3B;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    body:not(.dark-only) .dropdown-item:hover {
        background: rgba(225, 231, 255, 0.5);
        padding-left: 25px;
        color: #2F2F3B;
    }

    /* Dropdown Item - Dark Mode */
    body.dark-only .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    body.dark-only .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1);
        padding-left: 25px;
        color: white;
    }

    .dropdown-item i {
        font-size: 18px;
        width: 20px;
    }

    /* Logout Item - Light Mode */
    body:not(.dark-only) .dropdown-item.logout {
        color: #ff4757;
        border-top: 1px solid rgba(225, 231, 255, 0.5);
        margin-top: 5px;
    }

    body:not(.dark-only) .dropdown-item.logout:hover {
        background: rgba(255, 71, 87, 0.1);
        color: #ff4757;
    }

    /* Logout Item - Dark Mode */
    body.dark-only .dropdown-item.logout {
        color: #ff4757;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 5px;
    }

    body.dark-only .dropdown-item.logout:hover {
        background: rgba(255, 71, 87, 0.1);
        color: #ff4757;
    }

    /* Mobile Menu Toggle */
    .mobile-menu-toggle {
        display: none;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        padding: 10px;
        border-radius: 8px;
        cursor: pointer;
        color: white;
    }

    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
        fill: white;
    }

    /* Theme Toggle Button */
    .theme-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 20px;
        margin-left: 10px;
        position: relative;
    }

    /* Light Mode Toggle Button */
    body:not(.dark-only) .theme-toggle-btn {
        background: rgba(255, 255, 255, 0.9);
        color: #2F2F3B;
        border: 1px solid rgba(225, 231, 255, 0.8);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    body:not(.dark-only) .theme-toggle-btn:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.05);
    }

    /* Dark Mode Toggle Button */
    body.dark-only .theme-toggle-btn {
        background: rgba(255, 193, 7, 0.2);
        color: #FFC107;
        border: 1px solid rgba(255, 193, 7, 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 193, 7, 0.2);
    }

    body.dark-only .theme-toggle-btn:hover {
        background: rgba(255, 193, 7, 0.3);
        color: #FFD54F;
        border-color: rgba(255, 193, 7, 0.6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 193, 7, 0.4);
        transform: scale(1.05);
    }

    .theme-toggle-btn i {
        transition: transform 0.3s ease;
    }

    .theme-toggle-btn:hover i {
        transform: rotate(15deg);
    }

    /* Brightness icon in dark mode - make it more visible */
    body.dark-only .theme-toggle-btn i.tio-brightness-1 {
        color: #FFC107;
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.6), 0 0 20px rgba(255, 193, 7, 0.4);
    }

    body.dark-only .theme-toggle-btn:hover i.tio-brightness-1 {
        color: #FFD54F;
        text-shadow: 0 0 15px rgba(255, 213, 79, 0.8), 0 0 30px rgba(255, 193, 7, 0.6);
    }

    /* Responsive */
    @media (max-width: 992px) {
        .header-content {
            flex-wrap: wrap;
            gap: 15px;
        }

        .company-select-wrapper {
            min-width: 150px;
        }

        .user-info {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .main-header {
            padding: 15px 20px;
        }

        .logo-section {
            gap: 15px;
        }

        .navbar-brand-logo {
            max-height: 35px;
        }

        .mobile-menu-toggle {
            display: block;
        }

        .company-select-wrapper {
            order: 3;
            width: 100%;
            flex-basis: 100%;
        }
    }

    /* ===============================================
   Custom Bootstrap Theme - Dark Cyan/Info Transparent
   =============================================== */

    /* ===== SELECT OPTIONS ===== */
    /* Light Mode */
    body:not(.dark-only) select option {
        background: #ffffff !important;
        color: #2F2F3B !important;
    }

    body:not(.dark-only) select {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #2F2F3B !important;
        border: 1px solid rgba(225, 231, 255, 0.8) !important;
    }

    /* Dark Mode */
    body.dark-only select option {
        background: #000000 !important;
        color: white !important;
    }

    body.dark-only select {
        background: rgba(255, 255, 255, 0.05) !important;
        color: white !important;
    }

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

    /* Primary Button - Light Mode - Dark Teal Blue for Add Button */
    body:not(.dark-only) .btn-primary {
        background: #2C7B8E !important;
        border-color: #2C7B8E !important;
        color: #FFFFFF !important;
        /* backdrop-filter removed for performance */
        transition: all 0.3s ease;
        border-radius: 8px;
        font-weight: 500;
    }

    body:not(.dark-only) .btn-primary:hover {
        background: #256A7A !important;
        border-color: #256A7A !important;
        box-shadow: 0 5px 20px rgba(44, 123, 142, 0.4);
        transform: translateY(-2px);
    }

    /* Primary Button - Dark Mode */
    body.dark-only .btn-primary {
        background: rgba(23, 162, 184, 0.3) !important;
        border-color: rgba(23, 162, 184, 0.6) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
        transition: all 0.3s ease;
    }

    body.dark-only .btn-primary:hover {
        background: rgba(23, 162, 184, 0.5) !important;
        border-color: rgba(23, 162, 184, 0.8) !important;
        box-shadow: 0 5px 20px rgba(23, 162, 184, 0.4);
        transform: translateY(-2px);
    }

    .btn-primary:active,
    .btn-primary:focus {
        background: rgba(23, 162, 184, 0.6) !important;
        border-color: rgba(23, 162, 184, 0.9) !important;
        box-shadow: 0 3px 15px rgba(23, 162, 184, 0.5);
    }

    /* Secondary Button - Light Mode - White with Red Border for Cancel */
    body:not(.dark-only) .btn-secondary {
        background: #FFFFFF !important;
        border: 1px solid #FF0000 !important;
        color: #FF0000 !important;
        /* backdrop-filter removed for performance */
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    body:not(.dark-only) .btn-secondary:hover {
        background: #FFFFFF !important;
        border-color: #CC0000 !important;
        color: #CC0000 !important;
        box-shadow: 0 5px 20px rgba(255, 0, 0, 0.2);
        transform: translateY(-2px);
    }

    /* Secondary Button - Dark Mode */
    body.dark-only .btn-secondary {
        background: rgba(108, 117, 125, 0.3) !important;
        border-color: rgba(108, 117, 125, 0.6) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    body.dark-only .btn-secondary:hover {
        background: rgba(108, 117, 125, 0.5) !important;
        border-color: rgba(108, 117, 125, 0.8) !important;
        box-shadow: 0 5px 20px rgba(108, 117, 125, 0.4);
        transform: translateY(-2px);
    }

    /* Success Button */
    .btn-success {
        background: rgba(40, 167, 69, 0.3) !important;
        border-color: rgba(40, 167, 69, 0.6) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .btn-success:hover {
        background: rgba(40, 167, 69, 0.5) !important;
        border-color: rgba(40, 167, 69, 0.8) !important;
        box-shadow: 0 5px 20px rgba(40, 167, 69, 0.4);
        transform: translateY(-2px);
    }

    /* Danger Button */
    .btn-danger {
        background: rgba(220, 53, 69, 0.69) !important;
        border-color: rgba(220, 53, 69, 0.6) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .btn-danger:hover {
        background: rgba(220, 53, 69, 0.5) !important;
        border-color: rgba(220, 53, 69, 0.8) !important;
        box-shadow: 0 5px 20px rgba(220, 53, 69, 0.4);
        transform: translateY(-2px);
    }

    /* Warning Button */
    .btn-warning {
        background: rgba(255, 193, 7, 0.3) !important;
        border-color: rgba(255, 193, 7, 0.6) !important;
        color: rgba(0, 0, 0, 0.8) !important;
        /* backdrop-filter removed for performance */
    }

    .btn-warning:hover {
        background: rgba(255, 193, 7, 0.5) !important;
        border-color: rgba(255, 193, 7, 0.8) !important;
        box-shadow: 0 5px 20px rgba(255, 193, 7, 0.4);
        transform: translateY(-2px);
    }

    /* Info Button */
    .btn-info {
        background: rgba(23, 162, 184, 0.3) !important;
        border-color: rgba(23, 162, 184, 0.6) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .btn-info:hover {
        background: rgba(23, 162, 184, 0.5) !important;
        border-color: rgba(23, 162, 184, 0.8) !important;
        box-shadow: 0 5px 20px rgba(23, 162, 184, 0.4);
        transform: translateY(-2px);
    }

    /* Light Button */
    .btn-light {
        background: rgba(248, 249, 250, 0.2) !important;
        border-color: rgba(248, 249, 250, 0.4) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .btn-light:hover {
        background: rgba(248, 249, 250, 0.3) !important;
        border-color: rgba(248, 249, 250, 0.6) !important;
        box-shadow: 0 5px 20px rgba(248, 249, 250, 0.2);
        transform: translateY(-2px);
    }

    /* Dark Button */
    .btn-dark {
        background: rgba(52, 58, 64, 0.5) !important;
        border-color: rgba(52, 58, 64, 0.8) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .btn-dark:hover {
        background: rgba(52, 58, 64, 0.7) !important;
        border-color: rgba(52, 58, 64, 1) !important;
        box-shadow: 0 5px 20px rgba(52, 58, 64, 0.4);
        transform: translateY(-2px);
    }

    /* Outline Buttons */
    .btn-outline-primary {
        background: transparent !important;
        border-color: rgba(23, 162, 184, 0.6) !important;
        color: rgba(23, 162, 184, 1) !important;
    }

    .btn-outline-primary:hover {
        background: rgba(23, 162, 184, 0.2) !important;
        border-color: rgba(23, 162, 184, 0.8) !important;
        color: white !important;
    }

    .btn-outline-danger {
        background: transparent !important;
        border-color: rgba(220, 53, 69, 0.6) !important;
        color: rgba(220, 53, 69, 1) !important;
    }

    .btn-outline-danger:hover {
        background: rgba(220, 53, 69, 0.2) !important;
        border-color: rgba(220, 53, 69, 0.8) !important;
        color: white !important;
    }

    /* ===== CARDS ===== */
    /* Light Mode */
    body:not(.dark-only) .card {
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(225, 231, 255, 0.8) !important;
        /* backdrop-filter removed for performance */
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    body:not(.dark-only) .card:hover {
        border-color: rgba(225, 231, 255, 1) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-3px);
    }

    /* Dark Mode */
    body.dark-only .card {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px solid rgba(23, 162, 184, 0.2) !important;
        /* backdrop-filter removed for performance */
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    body.dark-only .card:hover {
        border-color: rgba(23, 162, 184, 0.4) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
        transform: translateY(-3px);
    }

    /* Card Header - Light Mode */
    body:not(.dark-only) .card-header {
        background: rgba(225, 231, 255, 0.5) !important;
        border-bottom: 1px solid rgba(225, 231, 255, 0.8) !important;
        color: #2F2F3B !important;
        /* backdrop-filter removed for performance */
        font-weight: 600;
    }

    body:not(.dark-only) .card-body {
        color: #2F2F3B;
    }

    body:not(.dark-only) .card-footer {
        background: rgba(255, 255, 255, 0.7) !important;
        border-top: 1px solid rgba(225, 231, 255, 0.8) !important;
        color: #2F2F3B;
    }

    body:not(.dark-only) .card-title {
        color: #2F2F3B;
        font-weight: 600;
    }

    /* Card Header - Dark Mode */
    body.dark-only .card-header {
        background: rgba(23, 162, 184, 0.15) !important;
        border-bottom: 2px solid rgba(23, 162, 184, 0.3) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
        font-weight: 600;
    }

    body.dark-only .card-body {
        color: rgba(255, 255, 255, 0.9);
    }

    body.dark-only .card-footer {
        background: rgba(0, 0, 0, 0.3) !important;
        border-top: 2px solid rgba(23, 162, 184, 0.2) !important;
        color: rgba(255, 255, 255, 0.8);
    }

    body.dark-only .card-title {
        color: rgba(23, 162, 184, 1);
        font-weight: 600;
    }

    /* ===== TABLES ===== */
    /* Light Mode */
    body:not(.dark-only) .table {
        background: rgba(255, 255, 255, 1) !important;
        color: #2F2F3B !important;
        overflow: hidden;
        /* backdrop-filter removed for performance */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        direction: rtl;
    }

    body:not(.dark-only) .table thead th {
        background: linear-gradient(180deg, rgba(173, 216, 230, 0.95) 0%, rgba(135, 206, 250, 0.85) 100%) !important;
        border-bottom: 1px solid rgba(173, 216, 230, 0.6) !important;
        color: white !important;
        font-weight: 600;
        padding: 15px;
        border: none;
        font-size: 0.95rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    body:not(.dark-only) .table tbody tr {
        background: white !important;
        border-bottom: 3px solid rgba(185, 222, 234, 1) !important;
        transition: all 0.3s ease;
    }

    body:not(.dark-only) .table tbody tr:hover {
        background: rgba(185, 222, 234, 1) !important;
    }

    body:not(.dark-only) .table tbody td {
        color: #2F2F3B;
        padding: 15px;
        border: none;
        vertical-align: middle;
        background: white;
    }

    /* Dark Mode */
    body.dark-only .table {
        background: rgba(255, 255, 255, 0.03) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 12px;
        overflow: hidden;
        /* backdrop-filter removed for performance */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        direction: rtl;
    }

    body.dark-only .table thead th {
        background: linear-gradient(180deg, rgba(100, 181, 246, 0.7) 0%, rgba(100, 181, 246, 0.5) 100%) !important;
        border-bottom: 1px solid rgba(100, 181, 246, 0.4) !important;
        color: white !important;
        font-weight: 600;
        padding: 15px;
        border: none;
        text-align: center;
        font-size: 0.95rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    body.dark-only .table tbody tr {
        background: rgba(255, 255, 255, 0.02) !important;
        border-bottom: 3px solid rgba(185, 222, 234, 1) !important;
        transition: all 0.3s ease;
    }

    body.dark-only .table tbody tr:hover {
        background: rgba(100, 181, 246, 0.1) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    body.dark-only .table tbody td {
        color: rgba(255, 255, 255, 0.85);
        padding: 15px;
        border: none;
        vertical-align: middle;
        text-align: right;
        background: rgba(255, 255, 255, 0.02);
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background: rgba(255, 255, 255, 0.02) !important;
    }

    .table-bordered {
        border: 2px solid rgba(23, 162, 184, 0.2) !important;
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid rgba(23, 162, 184, 0.15) !important;
    }

    .table-hover tbody tr:hover {
        background: rgba(23, 162, 184, 0.15) !important;
    }

    /* Table Dark */
    .table-dark {
        background: rgba(0, 0, 0, 0.5) !important;
        color: white !important;
    }

    .table-dark thead th {
        background: rgba(23, 162, 184, 0.5) !important;
        border-color: rgba(23, 162, 184, 0.7) !important;
    }

    /* ===== MODALS ===== */
    /* Light Mode */
    body:not(.dark-only) .modal-content {
        background: #fff !important;
        /* background: rgba(188, 238, 255, 0.18) !important; */
        border: 1px solid rgba(211, 211, 211, 0.3) !important;
        backdrop-filter: blur(10px) saturate(180%);
        border-radius: 15px;
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15);
    }

    body:not(.dark-only) .modal-header {
        background: transparent !important;
        border-bottom: none !important;
        color: #2F2F3B !important;
        padding: 20px 25px 10px 25px;
    }

    body:not(.dark-only) .modal-title {
        color: #2F2F3B;
        font-weight: 600;
    }

    body:not(.dark-only) .modal-body {
        color: #2F2F3B;
        padding: 25px;
    }

    /* Dark Mode */
    body.dark-only .modal-content {
        background: rgba(0, 0, 0, 0.9) !important;
        border: 2px solid rgba(23, 162, 184, 0.4) !important;
        /* backdrop-filter removed for performance */
        border-radius: 15px;
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    }

    body.dark-only .modal-header {
        background: rgba(23, 162, 184, 0.2) !important;
        border-bottom: 2px solid rgba(23, 162, 184, 0.4) !important;
        color: white !important;
    }

    body.dark-only .modal-title {
        color: rgba(23, 162, 184, 1);
        font-weight: 600;
    }

    body.dark-only .modal-body {
        color: rgba(255, 255, 255, 0.9);
        padding: 25px;
    }

    /* Ensure modals are always on top */
    .modal {
        z-index: 9999 !important;
    }

    .modal-dialog {
        z-index: 10000 !important;
    }

    .modal-content {
        z-index: 10001 !important;
    }

    .modal-backdrop {
        z-index: 9998 !important;
        background-color: transparent !important;
        display: none !important;
    }

    .modal-footer {
        background: transparent !important;
        border-top: none !important;
        padding: 20px 25px !important;
    }

    /* Close Button with Circle Background - Teal Blue */
    .close,
    .btn-close {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        background: #3498DB !important;
        border: none !important;
        color: white !important;
        opacity: 1 !important;
        text-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(10px) !important;
        font-size: 20px !important;
        font-weight: bold !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .close:hover,
    .btn-close:hover {
        background: #2980B9 !important;
        transform: rotate(90deg) scale(1.1) !important;
        box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4) !important;
    }

    .close:focus,
    .btn-close:focus {
        outline: none !important;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.3) !important;
    }

    /* ===== FORMS ===== */
    /* Light Mode */
    body:not(.dark-only) .form-control {
        background: #FFFFFF !important;
        border: 1px solid #D3D3D3 !important;
        color: #2F2F3B !important;
        /* backdrop-filter removed for performance */
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    body:not(.dark-only) .form-control:focus {
        background: #FFFFFF !important;
        border-color: #87CEEB !important;
        box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        color: #2F2F3B !important;
        outline: none !important;
    }

    body:not(.dark-only) .form-group .input-label {
        color: #2F2F3B !important;
    }

    body:not(.dark-only) .form-control::placeholder {
        color: #B0B0B0 !important;
    }

    /* Dark Mode */
    body.dark-only .form-control {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px solid rgba(23, 162, 184, 0.3) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
        border-radius: 8px;
    }

    body.dark-only .form-control:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(23, 162, 184, 0.6) !important;
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.3);
        color: white !important;
    }

    body.dark-only .form-group .input-label {
        color: white !important;
    }

    body.dark-only .form-control::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .form-select {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px solid rgba(23, 162, 184, 0.3) !important;
        color: white !important;
        /* backdrop-filter removed for performance */
    }

    .form-select:focus {
        border-color: rgba(23, 162, 184, 0.6) !important;
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.3);
    }

    .form-select option {
        background: #000000 !important;
        color: white !important;
    }

    .form-label {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    /* ===== ALERTS ===== */
    .alert {
        /* backdrop-filter removed for performance */
        border-radius: 10px;
        border-width: 2px;
    }

    .alert-success {
        background: rgba(40, 167, 69, 0.2) !important;
        border-color: rgba(40, 167, 69, 0.5) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .alert-danger {
        background: rgba(220, 53, 69, 0.2) !important;
        border-color: rgba(220, 53, 69, 0.5) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .alert-warning {
        background: rgba(255, 193, 7, 0.2) !important;
        border-color: rgba(255, 193, 7, 0.5) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .alert-info {
        background: rgba(23, 162, 184, 0.2) !important;
        border-color: rgba(23, 162, 184, 0.5) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    /* ===== BADGES ===== */
    .badge {
        /* backdrop-filter removed for performance */
        font-weight: 500;
        padding: 6px 12px;
    }

    .badge-primary {
        background: rgba(23, 162, 184, 0.5) !important;
        color: white !important;
    }

    .badge-success {
        background: rgba(40, 167, 69, 0.5) !important;
        color: white !important;
    }

    .badge-danger {
        background: rgba(220, 53, 69, 0.5) !important;
        color: white !important;
    }

    .badge-warning {
        background: rgba(255, 193, 7, 0.5) !important;
        color: rgba(0, 0, 0, 0.8) !important;
    }

    .badge-info {
        background: rgba(23, 162, 184, 0.5) !important;
        color: white !important;
    }

    /* ===== PAGINATION ===== */
    .pagination .page-link {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px solid rgba(23, 162, 184, 0.3) !important;
        color: rgba(23, 162, 184, 1) !important;
        /* backdrop-filter removed for performance */
        margin: 0 3px;
        border-radius: 8px;
    }

    .pagination .page-link:hover {
        background: rgba(23, 162, 184, 0.2) !important;
        border-color: rgba(23, 162, 184, 0.5) !important;
        color: white !important;
    }

    .pagination .page-item.active .page-link {
        background: rgba(23, 162, 184, 0.4) !important;
        border-color: rgba(23, 162, 184, 0.6) !important;
        color: white !important;
    }

    /* ===== NAVS & TABS ===== */
    .nav-tabs {
        border-bottom: 2px solid rgba(23, 162, 184, 0.3);
    }

    .nav-tabs .nav-link {
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid transparent;
        color: rgba(255, 255, 255, 0.7);
        margin-right: 5px;
    }

    .nav-tabs .nav-link:hover {
        border-color: rgba(23, 162, 184, 0.3);
        color: rgba(23, 162, 184, 1);
    }

    .nav-tabs .nav-link.active {
        background: rgba(23, 162, 184, 0.2);
        border-color: rgba(23, 162, 184, 0.5);
        color: white;
    }

    /* ===== DROPDOWNS ===== */
    .dropdown-menu {
        background: rgba(0, 0, 0, 0.9) !important;
        border: 2px solid rgba(23, 162, 184, 0.4) !important;
        /* backdrop-filter removed for performance */
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    }

    .dropdown-divider {
        border-top: 1px solid rgba(23, 162, 184, 0.3);
    }

    /* ===== PROGRESS BARS ===== */
    .progress {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(23, 162, 184, 0.2);
        /* backdrop-filter removed for performance */
        border-radius: 10px;
    }

    .progress-bar {
        background: linear-gradient(90deg, rgba(23, 162, 184, 0.5), rgba(23, 162, 184, 0.8)) !important;
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.5);
    }

    /* ===== LIST GROUPS ===== */
    .list-group-item {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(23, 162, 184, 0.2) !important;
        color: rgba(255, 255, 255, 0.9);
        /* backdrop-filter removed for performance */
    }

    .list-group-item:hover {
        background: rgba(23, 162, 184, 0.1) !important;
    }

    .list-group-item.active {
        background: rgba(23, 162, 184, 0.3) !important;
        border-color: rgba(23, 162, 184, 0.5) !important;
    }

    /* ===== BREADCRUMB ===== */
    .breadcrumb {
        background: rgba(255, 255, 255, 0.05) !important;
        /* backdrop-filter removed for performance */
        border-radius: 10px;
        padding: 12px 20px;
    }

    .breadcrumb-item a {
        color: rgba(23, 162, 184, 1);
    }

    .breadcrumb-item.active {
        color: rgba(255, 255, 255, 0.7);
    }

    /* ===== TOOLTIPS ===== */
    .tooltip-inner {
        background: rgba(0, 0, 0, 0.95) !important;
        border: 1px solid rgba(23, 162, 184, 0.5);
        /* backdrop-filter removed for performance */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* ===== TEXT COLORS ===== */
    .text-primary {
        color: rgba(23, 162, 184, 1) !important;
    }

    .text-success {
        color: rgba(40, 167, 69, 1) !important;
    }

    .text-danger {
        color: rgba(220, 53, 69, 1) !important;
    }

    .text-warning {
        color: rgba(255, 193, 7, 1) !important;
    }

    .text-info {
        color: rgba(23, 162, 184, 1) !important;
    }

    /* ===== BACKGROUND COLORS ===== */
    .bg-primary {
        background: rgba(23, 162, 184, 0.3) !important;
    }

    .bg-success {
        background: rgba(40, 167, 69, 0.3) !important;
    }

    .bg-danger {
        background: rgba(220, 53, 69, 0.3) !important;
    }

    .bg-warning {
        background: rgba(255, 193, 7, 0.3) !important;
    }

    .bg-info {
        background: rgba(23, 162, 184, 0.3) !important;
    }



    /* Search Box - Light Mode */
    body:not(.dark-only) .search-container {
        padding: 25px 30px;
        /* background: rgba(255, 255, 255, 0.5); */
        /* backdrop-filter removed for performance */
    }

    body:not(.dark-only) .search-box {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: block;
        padding: 15px 25px;
        background: rgba(168, 229, 255, 0.08);
        border: 1px solid rgba(225, 231, 255, 0.8);
        border-radius: 50px;
        font-size: 15px;
        color: #2F2F3B;
        transition: all 0.3s ease;
    }

    body:not(.dark-only) .search-box::placeholder {
        color: rgba(47, 47, 59, 0.5);
    }

    body:not(.dark-only) .search-box:focus {
        outline: none;
        border-color: rgba(225, 231, 255, 1);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 20px rgba(225, 231, 255, 0.5);
    }

    /* Search Box - Dark Mode */
    body.dark-only .search-container {
        padding: 25px 30px;
        background: rgba(0, 0, 0, 0.4);
        /* backdrop-filter removed for performance */
    }

    body.dark-only .search-box {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: block;
        padding: 15px 25px;
        background: rgba(168, 229, 255, 0.08);
        border: 2px solid rgba(23, 162, 184, 0.3);
        border-radius: 50px;
        font-size: 15px;
        color: white;
        transition: all 0.3s ease;
    }

    body.dark-only .search-box::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    body.dark-only .search-box:focus {
        outline: none;
        border-color: rgba(23, 162, 184, 0.3);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 20px rgba(23, 162, 184, 0.3);
    }

    /* Favorites Filter Container - Separate and Sticky */
    .favorites-filter-container {
        position: sticky;
        top: 76px;
        z-index: 98;
        padding: 15px 30px;
        background: transparent;
        /* backdrop-filter removed for performance */
    }

    /* Favorites Button - Light Mode */
    body:not(.dark-only) .favorites-filter-container {
        /* background: rgba(255, 255, 255, 0.5); */
        /* backdrop-filter removed for performance */
        border-bottom: 1px solid rgba(225, 231, 255, 0.5);
    }

    body:not(.dark-only) .favorites-btn {
        padding: 12px 30px;
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid rgba(255, 193, 7, 0.4);
        border-radius: 25px;
        color: #2F2F3B;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

    body:not(.dark-only) .favorites-btn:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(255, 193, 7, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 193, 7, 0.3);
    }

    body:not(.dark-only) .favorites-btn.active {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%);
        color: #fff;
        border-color: rgba(26, 95, 125, 0.8);
        box-shadow: 0 5px 20px rgba(26, 95, 125, 0.4);
    }

    /* Favorites Button - Dark Mode */
    body.dark-only .favorites-filter-container {
        background: rgba(0, 0, 0, 0.4);
        /* backdrop-filter removed for performance */
        border-bottom: 1px solid rgba(255, 193, 7, 0.2);
    }

    body.dark-only .favorites-btn {
        padding: 12px 30px;
        background: rgba(255, 193, 7, 0.15);
        border: 2px solid rgba(255, 193, 7, 0.4);
        border-radius: 25px;
        color: #FFC107;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        box-shadow: 0 2px 10px rgba(255, 193, 7, 0.2);
    }

    body.dark-only .favorites-btn:hover {
        background: rgba(255, 193, 7, 0.25);
        border-color: rgba(255, 193, 7, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 5px 25px rgba(255, 193, 7, 0.4);
        color: #FFD54F;
    }

    body.dark-only .favorites-btn.active {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%);
        color: #fff;
        border-color: rgba(26, 95, 125, 0.8);
        box-shadow: 0 5px 20px rgba(26, 95, 125, 0.4);
    }

    /* Sections Navbar - Light Mode */

    body:not(.dark-only) .sections-nav {
        display: flex;
        gap: 10px;
        padding: 20px 30px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: thick;
        scrollbar-color: rgba(225, 231, 255, 0.9) rgba(225, 231, 255, 0.3);
    }

    body:not(.dark-only) .sections-nav::-webkit-scrollbar {
        height: 10px;
    }

    body:not(.dark-only) .sections-nav::-webkit-scrollbar-track {
        background: rgba(225, 231, 255, 0.3);
        border-radius: 10px;
    }

    body:not(.dark-only) .sections-nav::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, rgba(225, 231, 255, 0.9) 0%, rgba(200, 220, 255, 0.9) 100%);
        border-radius: 10px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    body:not(.dark-only) .sections-nav::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, rgba(225, 231, 255, 1) 0%, rgba(200, 220, 255, 1) 100%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: scaleY(1.1);
    }

    body:not(.dark-only) .section-btn {
        flex-shrink: 0;
        padding: 8px 24px;
        background: #f0f0f0;
        border: none;
        border-radius: 9999px;
        color: #6c757d;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        text-align: center;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
    }

    body:not(.dark-only) .section-btn:hover {
        background: #ebebeb;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
    }

    body:not(.dark-only) .section-btn.active {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%);
        color: #fff;
        border: none;
        box-shadow: 0 5px 20px rgba(26, 95, 125, 0.4);
    }

    /* Sections Navbar - Dark Mode */
    body.dark-only .sections-navbar {
        background: rgba(0, 0, 0, 0.5);
        /* backdrop-filter removed for performance */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(23, 162, 184, 0.3);
    }

    body.dark-only .sections-nav {
        display: flex;
        gap: 10px;
        padding: 20px 30px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: thick;
        scrollbar-color: rgba(23, 162, 184, 0.5) rgba(255, 255, 255, 0.05);
    }

    body.dark-only .sections-nav::-webkit-scrollbar {
        height: 10px;
    }

    body.dark-only .sections-nav::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    body.dark-only .sections-nav::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.5) 0%, rgba(26, 95, 125, 0.6) 100%);
        border-radius: 10px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
    }

    body.dark-only .sections-nav::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.7) 0%, rgba(26, 95, 125, 0.8) 100%);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.5);
        transform: scaleY(1.1);
    }

    body.dark-only .section-btn {
        flex-shrink: 0;
        padding: 8px 24px;
        background: rgba(240, 240, 240, 0.15);
        border: none;
        border-radius: 9999px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        text-align: center;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
    }

    body.dark-only .section-btn:hover {
        background: rgba(240, 240, 240, 0.2);
        color: rgba(255, 255, 255, 0.85);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    }

    body.dark-only .section-btn.active {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%);
        color: #fff;
        border: none;
        box-shadow: 0 5px 20px rgba(26, 95, 125, 0.4);
    }

    /* Main Content Wrapper */
    .content-wrapper {
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Modules Container - Light Mode */
    body:not(.dark-only) .modules-container {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 40px 30px;
        scroll-behavior: smooth;
        scrollbar-width: thick;
        scrollbar-color: rgba(225, 231, 255, 0.9) rgba(225, 231, 255, 0.3);
    }

    body:not(.dark-only) .modules-container::-webkit-scrollbar {
        width: 14px;
    }

    body:not(.dark-only) .modules-container::-webkit-scrollbar-track {
        background: rgba(225, 231, 255, 0.3);
        border-radius: 10px;
        margin: 5px 0;
    }

    body:not(.dark-only) .modules-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(225, 231, 255, 0.9) 0%, rgba(200, 220, 255, 0.9) 100%);
        border-radius: 10px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        min-height: 50px;
    }

    body:not(.dark-only) .modules-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(225, 231, 255, 1) 0%, rgba(200, 220, 255, 1) 100%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
        transform: scaleX(1.1);
    }

    /* Modules Container - Dark Mode */
    body.dark-only .modules-container {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 40px 30px;
        scroll-behavior: smooth;
        scrollbar-width: thick;
        scrollbar-color: rgba(23, 162, 184, 0.5) rgba(255, 255, 255, 0.05);
    }

    body.dark-only .modules-container::-webkit-scrollbar {
        width: 14px;
    }

    body.dark-only .modules-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        margin: 5px 0;
    }

    body.dark-only .modules-container::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(23, 162, 184, 0.5) 0%, rgba(26, 95, 125, 0.6) 100%);
        border-radius: 10px;
        border: 3px solid rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
        min-height: 50px;
    }

    body.dark-only .modules-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(23, 162, 184, 0.7) 0%, rgba(26, 95, 125, 0.8) 100%);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.5);
        border-color: rgba(23, 162, 184, 0.4);
        transform: scaleX(1.1);
    }

    .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 140px);
        gap: 30px;
        justify-content: center;
    }

    /* Module Card - Smaller with name outside */
    .module-card {
        text-decoration: none;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        transition: all 0.4s ease;
        width: 140px;
    }

    /* Module Icon Wrapper - Light Mode */
    body:not(.dark-only) .module-icon-wrapper {
        background: rgba(255, 255, 255, 0.9);
        /* backdrop-filter removed for performance */
        border-radius: 20px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.4s ease;
        box-shadow: 8px 10px 30px 5px rgba(173, 216, 230, 0.7);
        border: 1px solid rgba(225, 231, 255, 0.8);
        position: relative;
        overflow: hidden;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:not(.dark-only) .module-icon-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(225, 231, 255, 0.5) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    body:not(.dark-only) .module-card:hover .module-icon-wrapper::before {
        opacity: 1;
    }

    body:not(.dark-only) .module-card:hover .module-icon-wrapper {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 10px 12px 35px 8px rgba(173, 216, 230, 0.8);
        border-color: rgba(225, 231, 255, 1);
        background: rgba(255, 255, 255, 1);
    }

    /* Module Icon Wrapper - Dark Mode */
    body.dark-only .module-icon-wrapper {
        background: rgba(255, 255, 255, 0.05);
        /* backdrop-filter removed for performance */
        border-radius: 20px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.4s ease;
        box-shadow: 8px 10px 30px 5px rgba(100, 181, 246, 0.5);
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.dark-only .module-icon-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    body.dark-only .module-card:hover .module-icon-wrapper::before {
        opacity: 1;
    }

    body.dark-only .module-card:hover .module-icon-wrapper {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 10px 12px 35px 8px rgba(100, 181, 246, 0.6);
        border-color: rgba(23, 162, 184, 0.3);
        background: rgba(255, 255, 255, 0.1);
    }

    .module-icon {
        font-size: 40px;
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
        display: inline-block;
        line-height: 1;
    }

    .module-card:hover .module-icon {
        transform: scale(1.15) rotate(5deg);
    }

    /* Colorful Icons - Different colors for variety */
    .module-card:nth-child(6n+1) .module-icon {
        color: #4CAF50;
        /* Green */
        text-shadow: 0 0 20px rgba(23, 162, 184, 0.3);
    }

    .module-card:nth-child(6n+2) .module-icon {
        color: #2196F3;
        /* Blue */
        text-shadow: 0 0 20px rgba(33, 150, 243, 0.6);
    }

    .module-card:nth-child(6n+3) .module-icon {
        color: #FF9800;
        /* Orange */
        text-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
    }

    .module-card:nth-child(6n+4) .module-icon {
        color: #E91E63;
        /* Pink */
        text-shadow: 0 0 20px rgba(233, 30, 99, 0.6);
    }

    .module-card:nth-child(6n+5) .module-icon {
        color: #9C27B0;
        /* Purple */
        text-shadow: 0 0 20px rgba(156, 39, 176, 0.6);
    }

    .module-card:nth-child(6n+6) .module-icon {
        color: #00BCD4;
        /* Cyan */
        text-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
    }

    /* Module Name - Light Mode */
    body:not(.dark-only) .module-name {
        font-size: 16px;
        font-weight: 600;
        color: rgba(30, 111, 146, 1);
        line-height: 1.4;
        text-align: center;
        transition: all 0.3s ease;
        max-width: 100%;
        word-wrap: break-word;
        margin-top: 8px;
    }


    /* Module Name - Dark Mode */
    body.dark-only .module-name {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.4;
        text-align: center;
        transition: all 0.3s ease;
        max-width: 100%;
        word-wrap: break-word;
        margin-top: 7px;
    }

    body.dark-only .module-card:hover .module-name {
        color: #4CAF50;
        transform: translateY(-2px);
    }

    .module-card.active .module-icon-wrapper {
        border-color: rgba(23, 162, 184, 0.3);
        background: rgba(76, 175, 80, 0.15);
    }

    /* Empty State - Light Mode */
    body:not(.dark-only) .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: rgba(47, 47, 59, 0.5);
    }

    body:not(.dark-only) .empty-state i {
        font-size: 80px;
        margin-bottom: 20px;
        opacity: 0.3;
        color: rgba(47, 47, 59, 0.5);
    }

    body:not(.dark-only) .empty-state h3 {
        font-size: 24px;
        margin-bottom: 10px;
        color: rgba(47, 47, 59, 0.7);
    }

    /* Empty State - Dark Mode */
    body.dark-only .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: rgba(255, 255, 255, 0.5);
    }

    body.dark-only .empty-state i {
        font-size: 80px;
        margin-bottom: 20px;
        opacity: 0.3;
        color: #4CAF50;
    }

    body.dark-only .empty-state h3 {
        font-size: 24px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Fade transition */
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    /**==========================**/
    .login-card {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        background: url("../login_bg.jpg");
        background-position: center;
    }

    .login-card .logo {
        display: block;
        margin-bottom: 30px;
        text-align: center;
    }

    .login-card .btn-showcase .btn {
        line-height: 1;
        padding: 10px 15px;
        margin: 0;
    }

    .login-card .btn-showcase .btn+.btn {
        margin-left: 5px;
    }

    .login-card .btn-showcase .btn svg {
        height: 16px;
        vertical-align: bottom;
    }

    .login-card .login-main {
        direction: rtl;
        width: 450px;
        padding: 40px;
        border-radius: 10px;
        backdrop-filter: blur(15px) !important;
        box-shadow: rgba(0, 0, 0, 0.55) 0px 10px 40px !important;
        margin: 0 auto;
        border-width: 1px !important;
        border-style: solid !important;
        border-color: rgba(255, 255, 255, 0.09) !important;
        border-image: initial !important;
        border-radius: 16px !important;

    }

    .login-card .login-main .theme-form h4 {
        margin-bottom: 5px;
    }

    .login-card .login-main .theme-form label {
        font-size: 15px;
        letter-spacing: 0.4px;
    }

    .login-card .login-main .theme-form .checkbox label::before {
        background-color: #f9f9fa;
        border: 1px solid #dfdfdf;
    }

    .login-card .login-main .theme-form .or {
        position: relative;
    }

    .login-card .login-main .theme-form .or:before {
        content: "";
        position: absolute;
        width: 65%;
        height: 2px;
        background-color: #f3f3ff;
        top: 9px;
        z-index: 0;
        right: 0;
    }

    .login-card .login-main .theme-form input {
        background-color: #f3f3ff;
        transition: all 0.3s ease;
    }

    .login-card .login-main .theme-form input::-webkit-input-placeholder {
        color: #999999;
    }

    .login-card .login-main .theme-form input:hover,
    .login-card .login-main .theme-form input:focus {
        border: 1px solid #b9c1cc;
        box-shadow: none !important;
        transition: all 0.3s ease;
    }

    .login-card .login-main .theme-form p {
        margin-bottom: 25px;
        font-size: 14px;
        color: #898989;
    }

    .login-card .login-main .theme-form .form-group {
        margin-bottom: 10px;
        position: relative;
    }

    .login-card .login-main .theme-form .link {
        position: absolute;
        top: 10px;
        right: 0;
    }

    .show-hide {
        position: absolute;
        top: 52px;
        right: 20px;
        transform: translateY(-50%);
    }

    .show-hide span {
        cursor: pointer;
        font-size: 13px;
        color: var(--theme-deafult);
    }

    .show-hide span.show:before {
        content: "show";
    }

    .show-hide span:before {
        content: "hide";
    }

    .needs-validation .invalid-feedback {
        color: #898989;
    }

    .needs-validation .show-hide {
        right: 30px;
    }

    .needs-validation .invalid-tooltip {
        top: 10px;
        right: 10px;
    }

    /**=====================
3.29 Login CSS Ends


  2.21 Loader CSS Start
==========================**/
    .loader-wrapper {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        background: #ffffff;
        z-index: 999999999999;
        top: 0;
        /*Color Loader*/
        /*Color Loader*/
    }

    body.dark-only .loader-wrapper {
        background: rgba(0, 0, 0, 0.87);
    }

    .loader-wrapper .loader-index {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        filter: url("#goo");
    }

    .loader-wrapper .loader-index:after {
        content: "";
        width: 4em;
        height: 4em;
        background: var(--theme-deafult);
        border-radius: 50%;
        position: absolute;
        transform: scale(0.5);
        animation: grow 2s cubic-bezier(0.14, 0.05, 0.55, 0.5) infinite alternate;
    }

    .loader-wrapper .loader-index span {
        width: 2em;
        height: 2em;
        background: var(--theme-secondary);
        border-radius: 50%;
        margin-right: 2em;
        position: relative;
        transform: translateX(7em);
        animation: move 4s ease-in-out infinite;
    }

    .loader-wrapper .loader-index span:before {
        content: "";
        width: 2em;
        height: 2em;
        background: var(--theme-deafult);
        border-radius: 50%;
        position: absolute;
        left: 3em;
        transform: translateX(0em);
        animation: shrink 2s ease-in-out infinite;
    }

    .loader-wrapper .loader-index span:after {
        content: "";
        width: 2em;
        height: 2em;
        background: #16C7F9;
        border-radius: 50%;
        position: absolute;
        right: 3em;
        transform: translateX(0em);
        animation: shrink 2s ease-in-out infinite;
    }

    @keyframes grow {
        0% {
            transform: scale(0.5);
            background: #16C7F9;
        }

        50% {
            transform: scale(1);
            background: var(--theme-secondary);
        }
    }

    @keyframes move {
        0% {
            transform: translateX(7em);
        }

        50% {
            transform: translateX(-5em);
        }
    }

    @keyframes shrink {
        0% {
            transform: translateX(0em);
        }

        50% {
            transform: translateX(-1em);
        }
    }

    .loader-wrapper svg {
        width: 0;
        height: 0;
    }

    .loader-wrapper h1 {
        color: #fff;
        text-align: center;
        margin-bottom: 2em;
        letter-spacing: 3px;
        position: relative;
        z-index: 2;
    }

    .loader-wrapper h1:before {
        position: absolute;
        content: "";
        height: 1px;
        background: rgba(255, 255, 255, 0.9);
        color: #fff;
        top: 2.75em;
        left: 0.75em;
        width: 2.5em;
        font-weight: 400;
        font-variant: small-caps;
        font-size: 0.5em;
    }

    /**=====================
2.21 Loader CSS Ends

    /* Responsive */
    @media (max-width: 992px) {
        .modules-grid {
            grid-template-columns: repeat(auto-fill, 130px);
            gap: 25px;
        }

        .module-card {
            width: 130px;
        }

        .module-icon-wrapper {
            width: 110px;
            height: 110px;
        }
    }

    @media (max-width: 768px) {
        .content-wrapper {
            top: 66px;
        }

        .favorites-filter-container {
            top: 66px;
            padding: 12px 20px;
        }

        .favorites-btn {
            padding: 10px 25px;
            font-size: 14px;
        }

        .sections-nav {
            padding: 15px 20px;
        }

        .modules-container {
            padding: 25px 15px;
        }

        .modules-grid {
            grid-template-columns: repeat(auto-fill, 120px);
            gap: 20px;
        }

        .module-card {
            width: 120px;
        }

        .module-icon-wrapper {
            width: 100px;
            height: 100px;
            padding: 18px;
        }

        .module-icon {
            font-size: 36px;
        }

        .module-name {
            font-size: 13px;
        }

        .search-box {
            padding: 12px 20px;
        }
    }

    @media (max-width: 480px) {
        /* .modules-grid {
            grid-template-columns: repeat(auto-fill, 100px);
            gap: 15px;
        } */

        .module-card {
            width: 100px;
        }

        .module-icon-wrapper {
            width: 85px;
            height: 85px;
            padding: 15px;
        }

        .module-icon {
            font-size: 32px;
        }

        .section-btn {
            padding: 10px 20px;
            font-size: 13px;
        }
    }

    /* Services Section Styling - Match Image Design */
    .services-section {
        direction: rtl;
    }

    .services-section-title {
        font-weight: bold;
        color: #2F2F3B;
        margin: 0;
        padding: 0;
        margin-bottom: 15px;
        text-align: right;
        font-size: 1.1rem;
    }

    /* Category Tabs */
    .category-tabs-wrapper {
        gap: 8px;
        flex-wrap: wrap;
        margin-left: 20px;
        margin-bottom: 15px;
    }

    .category-tab {
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 0.9rem;
        font-weight: 500;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .category-tab-active {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%) !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(26, 95, 125, 0.4) !important;
    }

    .category-tab-inactive {
        background-color: #f3f4f6 !important;
        color: #4b5563 !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    .category-tab-inactive:hover {
        background-color: #e5e7eb !important;
    }

    /* Payment Tab - Warning Color */
    .category-tab-payment.category-tab-active {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 193, 7, 1) 50%, rgba(255, 193, 7, 0.9) 100%) !important;
        color: rgba(0, 0, 0, 0.9) !important;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4) !important;
    }

    .category-tab-payment.category-tab-inactive {
        background-color: rgba(255, 193, 7, 0.2) !important;
        color: rgba(0, 0, 0, 0.7) !important;
        border: 1px solid rgba(255, 193, 7, 0.4) !important;
    }

    .category-tab-payment.category-tab-inactive:hover {
        background-color: rgba(255, 193, 7, 0.3) !important;
    }

    /* Search and Filter Section */
    .search-filter-wrapper {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
    }

    .category-filter-label {
        text-align: right;
        color: #4b5563;
        font-size: 0.85rem;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-icon {
        position: absolute;
        right: 12px;
        color: #9ca3af;
        font-size: 0.9rem;
        z-index: 2;
    }

    .filter-icon {
        position: absolute;
        left: 12px;
        color: #9ca3af;
        font-size: 0.85rem;
        z-index: 2;
    }

    .search-input {
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        padding: 8px 40px 8px 40px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .search-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
    }

    /* Search and Category Filters Container */
    .search-category-filters {
        gap: 12px;
    }

    .search-field-wrapper {
        width: 50%;
        flex: 0 0 50%;
    }

    /* Category Dropdown Styles */
    .category-dropdown-wrapper {
        width: 50%;
        flex: 0 0 50%;
    }

    .category-select-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .category-select-icon {
        position: absolute;
        right: 12px;
        color: #9ca3af;
        font-size: 0.9rem;
        z-index: 2;
        pointer-events: none;
    }

    .category-select-arrow {
        position: absolute;
        left: 12px;
        color: #9ca3af;
        font-size: 0.85rem;
        z-index: 2;
        pointer-events: none;
    }

    .category-select {
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        padding: 8px 40px 8px 40px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        width: 100%;
    }

    .category-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
    }

    .category-select:hover {
        border-color: #d1d5db;
    }

    /* Dark mode support for category select */
    body.dark-only .category-select {
        background-color: #1f2937;
        border-color: #374151;
        color: #f9fafb;
    }

    body.dark-only .category-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    body.dark-only .category-select:hover {
        border-color: #4b5563;
    }

    body.dark-only .category-select-icon,
    body.dark-only .category-select-arrow {
        color: #9ca3af;
    }

    /* Responsive styles for search and category filters */
    @media (max-width: 768px) {
        .search-category-filters {
            flex-direction: column;
            gap: 0;
        }

        .search-field-wrapper {
            width: 100%;
            flex: 0 0 100%;
            margin-left: 0;
            margin-bottom: 12px;
        }

        .category-dropdown-wrapper {
            width: 100%;
            flex: 0 0 100%;
        }
    }

    /* Service Items Grid */
    .service-card-item {
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 60px;
    }

    .service-item-selected {
        background-color: #bfdbfe !important;
        border: 2px solid #3b82f6 !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }

    .service-item-unselected {
        /* background-color: #ffffff !important; */
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .service-item-unselected:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .service-item-price {
        font-weight: bold;
        font-size: 1.1rem;
        color: rgba(59, 170, 207, 1);
        flex-shrink: 0;
    }

    .service-item-name {
        font-weight: 500;
        font-size: 1rem;
        color: #4b5563;
        padding: 0 10px;
    }

    .service-item-checkbox {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        flex-shrink: 0;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .checkbox-item-selected {
        background-color: #3b82f6;
        border: 2px solid #3b82f6;
    }

    .checkbox-item-selected i {
        color: white;
        font-size: 12px;
    }

    .checkbox-item-unselected {
        background-color: transparent;
        border: 2px solid #d1d5db;
    }

    /* Pagination Controls */
    .pagination-btn-circle {
        width: 40px;
        height: 40px;
        border-radius: 50% !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        transition: all 0.3s ease;
        min-width: 40px;
        min-height: 40px;
    }

    .pagination-btn-active {
        background-color: rgba(26, 95, 125, 1) !important;
        color: white !important;
        box-shadow: 0 2px 6px rgba(26, 95, 125, 0.3);
    }

    .pagination-btn-active:hover:not(:disabled) {
        background-color: rgba(26, 95, 125, 0.9) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(26, 95, 125, 0.4);
    }

    .pagination-btn-inactive {
        background-color: transparent !important;
        border: 2px solid #93c5fd !important;
        color: #93c5fd !important;
    }

    .pagination-btn-inactive:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Styled input fields for Total Services and adjacent fields */
    .styled-input-field {
        border-radius: 25px !important;
        background-color: #F7F7F7 !important;
        color: #555555 !important;
        border: none !important;
        box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1) !important;
        padding: 10px 20px !important;
        text-align: right !important;
        font-weight: 500;
    }

    .styled-input-field:focus {
        outline: none !important;
        box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.15) !important;
        background-color: #F0F0F0 !important;
    }

    .styled-input-field:disabled {
        background-color: #F7F7F7 !important;
        color: #555555 !important;
        cursor: default;
    }

    /* Special styles for select elements to fix text display */
    select.styled-input-field {
        padding-right: 20px !important;
        padding-left: 40px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        line-height: 1.5 !important;
        height: 48px !important;
        vertical-align: middle !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666666' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 15px center !important;
        background-size: 14px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        font-size: inherit !important;
    }

    select.styled-input-field option {
        padding: 10px 15px !important;
        background-color: #fff !important;
        color: #555555 !important;
        text-align: right !important;
        direction: rtl !important;
        line-height: 1.5 !important;
    }

    select.styled-input-field:focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666666' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
    }

    /* Add dropdown arrow to all select fields with form-control-sm */
    select.form-control-sm:not([style*="width: min-content"]) {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666666' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 12px center !important;
        background-size: 14px !important;
        padding-left: 35px !important;
        cursor: pointer !important;
    }

    select.form-control-sm:not([style*="width: min-content"]):focus {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666666' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
    }

    /* ===== TABLE ACTION BUTTONS ===== */
    /* Modern Table Action Button - Light Mode - Same as btn-new-order */
    body:not(.dark-only) .table-action-btn {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%) !important;
        border: none !important;
        border-radius: 25px !important;
        color: white !important;
        font-weight: 700 !important;
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        box-shadow: 0 4px 15px rgba(26, 95, 125, 0.4) !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    body:not(.dark-only) .table-action-btn:hover {
        background: linear-gradient(135deg, rgba(26, 95, 125, 0.95) 0%, rgba(33, 125, 165, 0.95) 50%, rgba(38, 141, 186, 0.95) 100%) !important;
        box-shadow: 0 6px 20px rgba(26, 95, 125, 0.5) !important;
        transform: translateY(-2px) !important;
    }

    body:not(.dark-only) .table-action-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 4px 15px rgba(26, 95, 125, 0.4) !important;
    }

    /* Modern Table Action Button - Dark Mode - Same as btn-new-order */
    body.dark-only .table-action-btn {
        background: linear-gradient(135deg, rgba(26, 95, 125, 1) 0%, rgba(33, 125, 165, 1) 50%, rgba(38, 141, 186, 1) 100%) !important;
        border: none !important;
        border-radius: 25px !important;
        color: white !important;
        font-weight: 700 !important;
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        box-shadow: 0 4px 15px rgba(26, 95, 125, 0.4) !important;
        transition: all 0.3s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    body.dark-only .table-action-btn:hover {
        background: linear-gradient(135deg, rgba(26, 95, 125, 0.95) 0%, rgba(33, 125, 165, 0.95) 50%, rgba(38, 141, 186, 0.95) 100%) !important;
        box-shadow: 0 6px 20px rgba(26, 95, 125, 0.5) !important;
        transform: translateY(-2px) !important;
    }

    body.dark-only .table-action-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 4px 15px rgba(26, 95, 125, 0.4) !important;
    }

    /* Table Header Container */
    .table-header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        direction: rtl;
    }

    .table-title {
        font-weight: 600;
        color: #2F2F3B;
        font-size: 1.2rem;
        margin: 0;
        text-align: right;
    }

    body.dark-only .table-title {
        color: rgba(255, 255, 255, 0.9);
    }

    /* Toggle Switch Styles - Match Image Design */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #d3d3d3;
        transition: 0.3s;
        border-radius: 26px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked+.toggle-slider {
        background-color: #4CAF50 !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    input:checked+.toggle-slider:before {
        transform: translateX(24px);
        background-color: white;
    }

    input:focus+.toggle-slider {
        box-shadow: 0 0 1px #4CAF50;
    }

    /* Dark mode toggle switch - Match Image Design */
    body.dark-only .toggle-slider {
        background-color: #4A5568;
    }

    body.dark-only .toggle-slider:before {
        background-color: #A0AEC0;
    }

    body.dark-only input:checked+.toggle-slider {
        background-color: #4CAF50 !important;
    }

    body.dark-only input:checked+.toggle-slider:before {
        background-color: white;
    }





    /* Table - Dark Mode (Match Image) */
    body.dark-only .table-card-container .table {
        background: rgba(89, 214, 255, 0.1) !important;
        color: white !important;
        /* border-radius: 12px; */
        overflow: hidden;
        border: none;
        box-shadow: none;
    }

    /* Table Header - Dark Mode */
    body.dark-only .table-card-container .table thead {
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    body.dark-only .table-card-container .table thead th {
        background: rgba(89, 214, 255, 0.1) !important;
        color: white !important;
        border-bottom: 1px solid rgba(74, 85, 104, 0.5) !important;
        padding: 15px;
        font-weight: 600;
        text-align: right;
        border-top: none;
    }

    body.dark-only .table-card-container .table thead th:first-child {
        border-top-right-radius: 12px;
    }

    body.dark-only .table-card-container .table thead th:last-child {
        border-top-left-radius: 12px;
    }

    /* Table Body Rows - Dark Mode */
    body.dark-only .table-card-container .table tbody tr {
        background: rgba(188, 238, 255, 0.01) !important;
        border-bottom: 1px solid rgba(74, 85, 104, 0.5) !important;
        transition: all 0.3s ease;
    }

    body.dark-only .table-card-container .table tbody tr:last-child {
        border-bottom: none !important;
    }

    body.dark-only .table-card-container .table tbody tr:hover {
        background: rgba(45, 55, 72, 0.8) !important;
    }

    /* Table Body Cells - Dark Mode */
    body.dark-only .table-card-container .table tbody td {
        background: rgba(188, 238, 255, 0.01) !important;
        color: white !important;
        padding: 15px;
        border: none;
        vertical-align: middle;
        text-align: right;
    }

    /* Table Title - Dark Mode */
    body.dark-only .table-card-container .table-title {
        color: white !important;
    }

    /* Table Wrapper */
    .table-wrapper {
        overflow-x: auto;
        border-radius: 8px;
    }

    /* Table Row Styling Improvements */
    body:not(.dark-only) .table tbody tr:last-child {
        border-bottom: none !important;
    }

    body.dark-only .table tbody tr:last-child {
        border-bottom: none !important;
    }

    /* Empty Table State */
    .table-empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }

    body.dark-only .table-empty-state {
        color: rgba(255, 255, 255, 0.5);
    }

    /* Table Cell Alignment for RTL */
    .table th,
    .table td {
        text-align: right;
    }

    .table th:first-child,
    .table td:first-child {
        text-align: center;
    }

    /* Table Action Buttons in Cells */
    .table tbody td .btn {
        margin: 0 2px;
    }

    /* Responsive Table */
    @media (max-width: 768px) {
        .table-header-container {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        .table-action-btn {
            width: 100%;
            justify-content: center;
        }

        .table-card-container {
            padding: 15px;
        }

        .table-wrapper {
            overflow-x: scroll;
        }
    }

    .modal-open .modal {
        background: #000000c9 !important;
        z-index: 1050 !important;
    }

    #vueApp {
        max-height: 88vh !important;
    }
    #content {
        max-height: 88vh !important;
        overflow: auto !important;
    }

    /* ===== Buttons Section ===== */
    .buttons-section {
        padding: 10px 0;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-fit-content {
        flex: fit-content;
    }

    .btn-print {
        background: linear-gradient(135deg, #f39c12, #e67e22);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-print:hover {
        background: linear-gradient(135deg, #e67e22, #d35400);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
    }

    .btn-save {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-save:hover {
        background: linear-gradient(135deg, #2980b9, #1f6dad);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    }

    .btn-receivable {
        background: linear-gradient(135deg, #1abc9c, #16a085);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-receivable:hover,
    .btn-receivable.active {
        background: linear-gradient(135deg, #16a085, #138d75);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(26, 188, 156, 0.4);
    }

    .btn-staff-requests {
        background: linear-gradient(135deg, #9b59b6, #8e44ad);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-staff-requests:hover,
    .btn-staff-requests.active {
        background: linear-gradient(135deg, #8e44ad, #7d3c98);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    }

    .btn-expense {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-expense:hover,
    .btn-expense.active {
        background: linear-gradient(135deg, #c0392b, #a93226);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

    .btn-financial {
        background: linear-gradient(135deg, #34495e, #2c3e50);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-financial:hover,
    .btn-financial.active {
        background: linear-gradient(135deg, #2c3e50, #1a252f);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 73, 94, 0.4);
    }

    .btn-transferred {
        background: linear-gradient(135deg, #27ae60, #229954);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-transferred:hover,
    .btn-transferred.active {
        background: linear-gradient(135deg, #229954, #1e8449);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
    }

    .btn-reservations {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-reservations:hover,
    .btn-reservations.active {
        background: linear-gradient(135deg, #2980b9, #1f6dad);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    }

    .btn-new-order {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-new-order:hover,
    .btn-new-order.active {
        background: linear-gradient(135deg, #c0392b, #a93226);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

    .btn-add-customer {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-add-customer:hover {
        background: linear-gradient(135deg, #2980b9, #1f6dad);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    }

    /* ===== Styled Input Fields ===== */
    .styled-input-field {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.3s ease;
        background-color: #fafafa;
    }

    .styled-input-field:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
        background-color: #fff;
    }

    .styled-input-field:disabled {
        background-color: #f5f5f5;
        color: #666;
    }

    /* ===== Services Section ===== */
    .services-section {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-radius: 12px;
        padding: 20px;
    }

    .services-section-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3498db;
    }

    /* ===== Category Tabs ===== */
    .category-tabs-wrapper {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }

    .category-tab {
        border-radius: 20px;
        padding: 8px 20px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .category-tab-active {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: #fff;
        border-color: #2980b9;
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .category-tab-inactive {
        background: #fff;
        color: #555;
        border-color: #ddd;
    }

    .category-tab-inactive:hover {
        background: #f0f0f0;
        border-color: #bbb;
    }

    .category-tab-payment {
        background: linear-gradient(135deg, #27ae60, #229954) !important;
        color: #fff !important;
        border-color: #229954 !important;
    }

    .category-tab-payment.category-tab-active {
        box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    }

    /* ===== Search & Filter ===== */
    .search-filter-wrapper {
        margin-bottom: 15px;
    }

    .search-category-filters {
        gap: 15px;
        flex-wrap: wrap;
    }

    .category-dropdown-wrapper {
        min-width: 200px;
    }

    .category-select-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .category-select-icon {
        position: absolute;
        right: 12px;
        color: #888;
        z-index: 1;
    }

    .category-select {
        padding-right: 35px !important;
        padding-left: 30px !important;
        border-radius: 8px;
        border: 1px solid #ddd;
        background: #fff;
    }

    .category-select-arrow {
        position: absolute;
        left: 12px;
        color: #888;
        font-size: 12px;
    }

    .search-field-wrapper {
        flex: 1;
        min-width: 250px;
    }

    .search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-icon {
        position: absolute;
        right: 12px;
        color: #888;
    }

    .search-input {
        padding-right: 35px !important;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .search-bar-input {
        border-radius: 8px;
    }

    /* ===== Service Cards ===== */
    .service-card-item {
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 70px;
    }

    .service-item-selected {
        background: linear-gradient(135deg, #d4edda, #c3e6cb);
        border: 2px solid #28a745;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
    }

    .service-item-unselected {
        background: #fff;
        border: 2px solid #e0e0e0;
    }

    .service-item-unselected:hover {
        border-color: #3498db;
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
    }

    .service-item-price {
        font-weight: 700;
        color: #27ae60;
        font-size: 1rem;
        min-width: 70px;
    }

    .service-item-name {
        font-weight: 600;
        color: #2c3e50;
        font-size: 0.95rem;
    }

    .service-item-checkbox {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .checkbox-item-selected {
        background: #28a745;
        color: #fff;
    }

    .checkbox-item-unselected {
        background: #e0e0e0;
        border: 2px solid #ccc;
    }

    /* ===== Pagination ===== */
    .pagination-btn-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .pagination-btn-active {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: #fff;
        border: none;
    }

    .pagination-btn-active:hover {
        background: linear-gradient(135deg, #2980b9, #1f6dad);
        transform: scale(1.1);
    }

    .pagination-btn-inactive {
        background: #e0e0e0;
        color: #999;
        border: none;
        cursor: not-allowed;
    }

    /* ===== Selected Services Table ===== */
    .selected-services-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e74c3c;
    }

    .selected-services-table {
        font-size: 0.9rem;
    }

    .selected-services-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #555;
        border-bottom: 2px solid #dee2e6;
    }

    .selected-services-table td {
        vertical-align: middle;
    }

    /* ===== Package List ===== */
    .package-list {
        list-style: none;
        padding: 5px 0 0 15px;
        margin: 0;
        font-size: 0.85rem;
        color: #666;
    }

    .package-list-item {
        padding: 2px 0;
    }

    .package-list-item::before {
        content: "• ";
        color: #3498db;
    }

    /* ===== Utility Classes ===== */
    .gap-2 {
        gap: 8px;
    }

    .input-width-80 {
        width: 80px;
    }

    .delete-btn {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    .delete-btn:hover {
        background: linear-gradient(135deg, #c0392b, #a93226);
        transform: scale(1.05);
    }

    .label-bold {
        font-weight: 600;
        color: #333;
    }

    .text-small {
        font-size: 0.8rem;
        color: #888;
    }

    /* ===== Modal Utilities ===== */
    .modal-max-content {
        max-width: max-content;
    }

    .modal-width-80vw {
        max-width: 80vw;
    }

    .modal-content-fullscreen {
        min-height: 100vh;
    }

    /* ===== Scrollable Areas ===== */
    .scrollable-max-height-40vh {
        max-height: 40vh;
        overflow-y: auto;
    }

    .scrollable-max-height-50vh {
        max-height: 50vh;
        overflow-y: auto;
    }

    .scrollable-max-height-20vh {
        max-height: 20vh;
        overflow-y: auto;
    }

    /* ===== Dark Mode Support ===== */
    body.dark-only .styled-input-field {
        background-color: #101010;
        border-color: #333;
        color: #eee;
    }

    body.dark-only .styled-input-field:focus {
        border-color: #3498db;
        background-color: #16213e;
    }

    body.dark-only .services-section {
        background: transparent;
    }

    body.dark-only .services-section-title {
        color: #eee;
    }

    body.dark-only .category-tab-inactive {
        background: #101010;
        color: #ccc;
        border-color: #444;
    }

    body.dark-only .service-item-unselected {
        background: #101010;
        border-color: #444;
    }

    body.dark-only .service-item-name {
        color: #7c7b7b;
    }

    body.dark-only .selected-services-table th {
        background: #16213e;
        color: #ccc;
    }

    body.dark-only .label-bold {
        color: #7c7b7b;
    }
    
    .toast{
        z-index: 99999999 !important;
    }
@keyframes flash {
    0% { background-color: transparent; box-shadow: 0 0 0 0 rgba(255, 242, 0, 0); outline-color: transparent; }
    50% { background-color: rgb(255, 242, 0) !important; box-shadow: 0 0 0 4px rgba(255, 242, 0, 0.6); outline-color: rgb(255, 242, 0); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(255, 242, 0, 0); outline-color: transparent; }
  }
  
  /* apply the animation to the element */
  .flash {
        background: transparent !important;
        background-color: transparent !important;
        animation: flash 1s infinite !important; /* set the duration of the animation */
        animation-fill-mode: both !important;
        outline-style: solid !important;
        outline-width: 2px !important;
        outline-offset: -2px !important;
    }

    .form-control.flash,
    .styled-input-field.flash,
    body:not(.dark-only) .form-control.flash,
    body.dark-only .form-control.flash {
        background: transparent !important;
        background-color: transparent !important;
  }
  .flash-5 {
    animation-name: flash;
    animation-duration: 1s; /* set the duration of the animation */
    animation-iteration-count: 5; /* set the number of times to repeat the animation */
  }
  .flash-3 {
    animation-name: flash;
    animation-duration: 1s; /* set the duration of the animation */
    animation-iteration-count: 3; /* set the number of times to repeat the animation */
  }
  
  .flash-2 {
    animation-name: flash;
    animation-duration: 1s; /* set the duration of the animation */
    animation-iteration-count: 2; /* set the number of times to repeat the animation */
  }
  
  .flash-1 {
    animation-name: flash;
    animation-duration: 1s; /* set the duration of the animation */
    animation-iteration-count: 1; /* set the number of times to repeat the animation */
  }