/* ===================== Tajawal ===================== */
@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/assets/fonts/tajawal/Tajawal-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===================== Poppins ===================== */


@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}


/* @font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

 */
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/


.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgb(119 170 92) !important;
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgb(206 159 64) !important;
}

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: rgb(170, 44, 22) !important;
}

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.menu-tab {
    position:absolute; right: 0px;
}

.menu-tab-bar {
    position: relative; top:-20px; left:-60px
}

.menu-tab-box {
    box-shadow: 0 1px 20px 1px #222;
}
.menu-vertical .menu-item .menu-link
 {
    font-size: 0.8375rem;
}


 /* Dark mode body background */
        [data-bs-theme="dark"] body {
            background-color: #1e1f2c;
            /* Dark shade for whole page */
            color: #e4e6eb;
            /* Default text color */
        }

        [data-bs-theme=dark] {
    --bs-body-bg: #1e1f2c;
    --bs-body-color: #bdc1c5;
    --bs-card-bg: #1e1f2c;
    --bs-sidebar-bg: #1e1f2c;
    --bs-modal-bg: #1e1f2c;
    --bs-dropdown-bg: #1e1f2c;
    --bs-secondary-bg: #252539;
}

[data-bs-theme="dark"] .input-group {
    --bs-input-group-addon-border-color:
 color-mix(in sRGB, #3d3d5c 100%, #3d3d5c 100%);
}



        /* General dropdown menus */
        [data-bs-theme="dark"] .dropdown-menu {
            background-color: #2a2a3b;
            /* Dark background */
            color: #e4e6eb;
            /* Text color */
            border: 1px solid #444;
            /* Border */
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
        }

        /* Dropdown links */
        [data-bs-theme="dark"] .dropdown-menu .dropdown-item {
            color: #e4e6eb;
        }

        /* Dropdown links hover/focus */
        [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
        [data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
            background-color: #383856;
            color: #fff;
        }

        /* Dropdown headers (optional) */
        [data-bs-theme="dark"] .dropdown-menu .dropdown-header {
            color: #b6bec8;
        }

        /* Divider */
        [data-bs-theme="dark"] .dropdown-menu .dropdown-divider {
            border-top: 1px solid #444;
        }


        [data-bs-theme="dark"] .layout-menu {
            background-color: #252539 !important;
            color: #e4e6eb;
        }

        [data-bs-theme="dark"] .layout-menu .menu-link {
            color: #e4e6eb;
        }

        [data-bs-theme="dark"] .layout-menu .menu-item.active>.menu-link {
            background-color: #383856 !important;
            color: #fff !important;
        }

        [data-bs-theme="dark"] .layout-menu .menu-sub .menu-link {
            color: #cfd4de;
        }

        [data-bs-theme="dark"] .card {
            background-color: #2a2a3b !important;
            color: #e4e6eb;
            border-color: #444 !important;
             border-radius: var(--bs-border-radius) !important; /* ensure same as light mode */
    background-color: var(--bs-dark-bg-subtle); /* or your desired dark card color */
    box-shadow: var(--bs-box-shadow); /* optional */
        }

        [data-bs-theme="dark"] .card-header {
            /* background-color: #2c2c42 !important; */
            color: #fff;
        }

        [data-bs-theme="dark"] .card-body {
            background-color: #2a2a3b;
            border-radius: var(--bs-border-radius) !important; /* ensure same as light mode */
            color: #e4e6eb;
        }

        [data-bs-theme="dark"] table {
            color: #e4e6eb;
        }

        [data-bs-theme="dark"] table thead th {
            background-color: #2c2c42;
            color: #fff;
        }

        [data-bs-theme="dark"] table tbody tr {
            background-color: #2a2a3b;
        }

        [data-bs-theme="dark"] table tbody tr:nth-child(even) {
            background-color: #272739;
        }


        [data-bs-theme="dark"] .btn-outline-secondary {
            border-color: #666;
            color: #eee;
        }

        [data-bs-theme="dark"] .btn-outline-secondary:hover {
            background-color: #444;
        }

        [data-bs-theme="dark"] .form-control,
        [data-bs-theme="dark"] .form-select {
            background-color: #2f2f43;
            color: #eee;
            border-color: #3d3d5c;
        }



        /* Navbar background */
        [data-bs-theme="dark"] .layout-navbar {
            background-color: #252539 !important;
            color: #e4e6eb;

        }

        /* Navbar links */
        [data-bs-theme="dark"] .layout-navbar .navbar-nav .nav-link,
        [data-bs-theme="dark"] .layout-navbar .navbar-nav .nav-item {
            color: #e4e6eb;
        }

        /* Navbar hover effect */
        [data-bs-theme="dark"] .layout-navbar .navbar-nav .nav-link:hover {
            color: #fff;
        }

        /* Navbar dropdown */
        [data-bs-theme="dark"] .layout-navbar .dropdown-menu {
            background-color: #2a2a3b;
            color: #e4e6eb;
            border-color: #444;
        }

        /* Navbar search input */
        [data-bs-theme="dark"] .layout-navbar .form-control {
            background-color: #2f2f43;
            color: #e4e6eb;
            border-color: #3d3d5c;
        }

        /* Navbar icons */
        [data-bs-theme="dark"] .layout-navbar .bx {
            color: #e4e6eb;
        }

        .layout-navbar,
        .layout-navbar .dropdown-menu,
        .layout-navbar .nav-link {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Dark mode select */
        [data-bs-theme="dark"] .form-select {
            background-color: #2a2a3b;
            color: #e4e6eb;
            border: 1px solid #444;
        }

        /* Placeholder text */
        [data-bs-theme="dark"] .form-select option:disabled {
            color: #999;
        }

        /* Focus/active state */
        [data-bs-theme="dark"] .form-select:focus {
            background-color: #2a2a3b;
            color: #e4e6eb;
            border-color: #696cff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
        }

        /* For multiple select or option highlight */
        [data-bs-theme="dark"] .form-select option {
            background-color: #2a2a3b;
            color: #e4e6eb;
        }

        /* Disabled select */
        [data-bs-theme="dark"] .form-select:disabled {
            background-color: #252539;
            color: #777;
        }
        /* ----------------- Light Mode Buttons ----------------- */
[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .btn-outline-primary {
    color: #696cff;
    background-color: #fff;
    border-color: #696cff;
}

[data-bs-theme="light"] .btn-primary {
    background-color: #696cff;
    color: #fff;
}

[data-bs-theme="light"] .btn-secondary,
[data-bs-theme="light"] .btn-outline-secondary {
    color: #8592a3;
    background-color: #fff;
    border-color: #8592a3;
}

[data-bs-theme="light"] .btn-secondary {
    background-color: #8592a3;
    color: #fff;
}

[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .btn-outline-success {
    color: #71dd37;
    border-color: #71dd37;
}

[data-bs-theme="light"] .btn-success {
    background-color: #71dd37;
    color: #fff;
}

[data-bs-theme="light"] .btn-info,
[data-bs-theme="light"] .btn-outline-info {
    color: #03c3ec;
    border-color: #03c3ec;
}

[data-bs-theme="light"] .btn-info {
    background-color: #03c3ec;
    color: #fff;
}

[data-bs-theme="light"] .btn-warning,
[data-bs-theme="light"] .btn-outline-warning {
    color: #ffab00;
    border-color: #ffab00;
}

[data-bs-theme="light"] .btn-warning {
    background-color: #ffab00;
    color: #fff;
}

/* Lighter danger for contrast */
[data-bs-theme="light"] .btn-danger,
[data-bs-theme="light"] .btn-outline-danger {
    color: #ff6b50;
    border-color: #ff6b50;
}

[data-bs-theme="light"] .btn-danger {
    background-color: #ff6b50;
    color: #fff;
}

/* ----------------- Dark Mode Buttons ----------------- */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-primary {
    color: #696cff;
    border-color: #696cff;
    background-color: transparent;
}

[data-bs-theme="dark"] .btn-primary {
    background-color: #696cff;
    color: #fff;
}

[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #b6bec8;
    border-color: #505862;
    background-color: transparent;
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: #505862;
    color: #fff;
}

[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-outline-success {
    color: #71dd37;
    border-color: #5cb830;
}

[data-bs-theme="dark"] .btn-success {
    background-color: #5cb830;
    color: #fff;
}

[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .btn-outline-info {
    color: #68dbf4;
    border-color: #03b2d5;
}

[data-bs-theme="dark"] .btn-info {
    background-color: #03b2d5;
    color: #fff;
}

[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-outline-warning {
    color: #ffcd66;
    border-color: #ffb84d;
}

[data-bs-theme="dark"] .btn-warning {
    background-color: #ffb84d;
    color: #1e1f2c;
}

/* Lighter danger in dark mode */
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-outline-danger {
    color: #ff7f66;
    border-color: #ff7f66;
}

[data-bs-theme="dark"] .btn-danger {
    background-color: #ff7f66;
    color: #1e1f2c;
}

/* ----------------- Hover & Focus ----------------- */
.btn:hover,
.btn:focus,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    opacity: 0.85;
    transition: all 0.2s ease;
}


/* Dark mode adjustments for outline buttons */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #bdc1c5;            /* light text for visibility */
    border-color: #bdc1c5;     /* visible border */
    background-color: transparent;
}

[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus {
    color: #fff;                /* brighten text on hover */
    background-color: rgba(255, 255, 255, 0.1); /* subtle highlight */
    border-color: #fff;
}

/* ----------------- Light Mode Danger Text ----------------- */
[data-bs-theme="light"] .text-danger {
    color: #ff6b50 !important; /* softer, lighter red */
}

/* ----------------- Dark Mode Danger Text ----------------- */
[data-bs-theme="dark"] .text-danger {
    color: #ff8566 !important; /* lighter, readable on dark background */
}

/* Optional: hover/focus for links or interactive text */
[data-bs-theme="dark"] a.text-danger:hover,
[data-bs-theme="light"] a.text-danger:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ----------------- Accordion Light Mode ----------------- */
[data-bs-theme="light"] .accordion {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="light"] .accordion .accordion-item {
    background-color: var(--bs-white);
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="light"] .accordion-button {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-white);
    border: none;
}

[data-bs-theme="light"] .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="light"] .accordion-body {
    color: var(--bs-body-color);
    background-color: var(--bs-white);
}



/* Dark mode overrides */
[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: #1e1f2c;
    --bs-accordion-btn-bg: #1e1f2c;
    --bs-accordion-btn-color: #040709;
    --bs-accordion-border-color: #020408;
    --bs-accordion-btn-active-color: #222;
    --bs-accordion-btn-active-bg: #4e5965;
    --bs-accordion-btn-focus-box-shadow: none;
}



/* ----------------- Accordion Dark Mode ----------------- */
[data-bs-theme="dark"] .accordion {
    background-color: var(--bs-body-bg);
     --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-paper-bg);
    --bs-accordion-transition: all 0.2s
ease-in-out, border-radius 0.15s
ease;
    --bs-accordion-border-color: #444;
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 0.375rem;
    --bs-accordion-inner-border-radius: 0.375rem;
    --bs-accordion-btn-padding-x: 1.4375rem;
    --bs-accordion-btn-padding-y: 0.7305rem;
    --bs-accordion-btn-color: #384551;
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='bx-chevron-down'%3e%3cpath id='Vector' d='M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z' fill='%23384551' fill-opacity='0.9'/%3e%3c/g%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s
ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='bx-chevron-down'%3e%3cpath id='Vector' d='M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z' fill='%23384551' fill-opacity='0.9'/%3e%3c/g%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 1.1875rem;
    --bs-accordion-body-padding-y: 1.1875rem;
    --bs-accordion-active-color: #384551;
    --bs-accordion-active-bg: var(--bs-paper-bg);
}

[data-bs-theme="dark"] .accordion .accordion-item {
    background-color: #1e1f2c; /* card-like bg for dark mode */
    border-bottom: 1px solid #505862;
}

[data-bs-theme="dark"] .accordion-button {
    color: #bdc1c5;
    background-color: #1e1f2c;
    border: none;
}

[data-bs-theme="dark"] .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(105,108,255,0.25); /* subtle highlight */
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #252539; /* slightly lighter when open */
    color: #fff;
}

[data-bs-theme="dark"] .accordion-body {
    color: #bdc1c5;
    background-color: #1e1f2c;
}

[data-bs-theme="dark"] .bg-label-primary {
    background-color: #1d1d36 !important; /* lighter than #151633 */
    color: #b3b5ff !important;
}

[data-bs-theme="dark"] .bg-label-secondary {
    background-color: #26282e !important;
    color: #c0c5cc !important;
}

[data-bs-theme="dark"] .bg-label-success {
    background-color: #20330f !important; /* lighter green */
    color: #c8f0a2 !important;
}

[data-bs-theme="dark"] .bg-label-info {
    background-color: #01353d !important; /* softer cyan */
    color: #7ee3f8 !important;
}

[data-bs-theme="dark"] .bg-label-warning {
    background-color: #3a2a00 !important; /* softer yellow/brown */
    color: #ffd77a !important;
}

[data-bs-theme="dark"] .bg-label-danger {
    background-color: #3d120a !important; /* softer red */
    color: #ff9f92 !important;
}
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-body-bg) !important; /* same as dark body/cards */
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {

    color: var(--bs-body-color);
}

/* Dark mode modal */
[data-bs-theme=dark] .modal-content {
    background-color: var(--bs-card-bg); /* match sidebar/cards */
    border-radius: var(--bs-border-radius); /* full modal radius */
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow-lg);
}

/* Header rounded top corners */
[data-bs-theme=dark] .modal-header {

    padding: 1rem;
}

/* Footer rounded bottom corners */
[data-bs-theme=dark] .modal-footer {

    padding: 1rem;
}


[data-bs-theme="dark"] .modal-title {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-bs-theme="dark"] .modal-backdrop {
    background-color: rgba(0,0,0,0.6);
}


[data-bs-theme="dark"] {
  --bs-progress-bg: #c9d1d9 !important; /* match sidebar/card bg */
  --bs-progress-bar-bg: #696cff !important; /* primary bar */
  --bs-progress-bar-success-bg: #aaeb87 !important;
  --bs-progress-bar-info-bg: #68dbf4 !important;
  --bs-progress-bar-warning-bg: #ffcd66 !important;
  --bs-progress-bar-danger-bg: #ff8b77 !important;
  --bs-progress-border-radius: 0.375rem !important;
  --bs-progress-bar-shadow-color: rgba(0, 0, 0, 0.4) !important;
}

/* Common styling */
[data-bs-theme="dark"] .progress,
[data-bs-theme="dark"] .progress-stacked {

  background-color: var(--bs-progress-bg) !important;
  border-radius: var(--bs-progress-border-radius) !important;
  box-shadow: inset 0 1px 2px var(--bs-progress-bar-shadow-color) !important;
  overflow: hidden !important;
}

[data-bs-theme="dark"] .progress-bar {
  background-color: var(--bs-progress-bar-bg) !important;
  box-shadow: inset 0 -1px 0 var(--bs-progress-bar-shadow-color) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-success {
  background-color: var(--bs-progress-bar-success-bg) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-info {
  background-color: var(--bs-progress-bar-info-bg) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-warning {
  background-color: var(--bs-progress-bar-warning-bg) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-danger {
  background-color: var(--bs-progress-bar-danger-bg) !important;
}

/* Stacked progress bars inside one progress container */
[data-bs-theme="dark"] .progress-stacked .progress-bar {
  float: left !important;
  transition: width 0.6s ease !important;
}

[data-bs-theme="dark"] .text-dark {
  --bs-text-opacity: 1;
  /* Use light gray tone for better contrast */
  color: rgba(255, 255, 255, 0.85) !important;
}


[data-bs-theme="dark"] .table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
    --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.12);

    width: 100%;
    margin-bottom: 1rem;
    vertical-align: middle;
    border-color: var(--bs-table-border-color);
    color: var(--bs-table-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

[data-bs-theme="dark"] .table thead th {
    color: #cfd8dc;
    font-weight: 600;
    border-bottom: 2px solid var(--bs-table-border-color);
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .table tbody tr {
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped-bg);
}

[data-bs-theme="dark"] .table-bordered {
    border: 1px solid var(--bs-table-border-color);
}

[data-bs-theme="dark"] .table-dark td,
[data-bs-theme="dark"] .table-dark th {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle, [data-bs-theme="dark"] .bg-menu-theme .menu-item.active > .menu-link {
    color: #fff;
}

[data-bs-theme] #--fc-neutral-bg-color {
    background-color: #1d1d36 !important;
}

[data-bs-theme="dark"] #fluid-loader {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode support using Bootstrap 5.3 data-bs-theme */
html[data-bs-theme="dark"] .bg-label-primary {
    background-color: #375a7f !important; /* Darker soft primary */
    color: #ffffff !important;
}

/* Dark mode support using Bootstrap 5.3 data-bs-theme */
html[data-bs-theme="dark"] .bg-label-danger {
    background-color: #e63757 !important; /* Darker soft primary */
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .bg-label-info {
    background-color: #1c7ed6 !important; /* Darker soft info */
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .bg-label-success {
    background-color: #2f9e44 !important; /* Darker soft success */
    color: #ffffff !important;
}

/* Optional: cards with bg-label-* in dark mode */
html[data-bs-theme="dark"] .card.bg-label-primary,
html[data-bs-theme="dark"] .card.bg-label-info,
html[data-bs-theme="dark"] .card.bg-label-success {
    color: #ffffff;
}


.avatar img {
    border: solid 3px #eee;
}