html[data-skin=strata] {
    /* ===== TYPOGRAPHY ===== */
    --ins-font-sans-serif: "Roboto", sans-serif;
    --ins-font-family-secondary: "Roboto", sans-serif;
    --ins-body-font-size: 14px;

    /* ===== BACKGROUNDS ===== */
    --ins-body-bg: #f6f9fa;
    --ins-secondary-bg: #ffffff;

    /* ===== CARD / SHADOW ===== */
    --ins-theme-card-border-width: 1px;
    --ins-theme-card-border-color: #e5e7eb;
    --ins-theme-card-box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    --ins-box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    /* ===== RADIUS ===== */
    --ins-border-radius: 6px;

    /* ===== FONT WEIGHTS ===== */
    --ins-font-weight-medium: 400;
    --ins-font-weight-semibold: 500;
    --ins-font-weight-bold: 600;

    /* ===== FONT SIZES ===== */
    --ins-font-size-xxs: 11px;
    --ins-font-size-xs: 12px;
    --ins-font-size-base: 13px;
    --ins-font-size-md: 14px;
    --ins-font-size-lg: 16px;
    --ins-font-size-xl: 18px;
    --ins-font-size-xxl: 20px;

    /* ===== SIDENAV ===== */
    --ins-sidenav-item-icon-size: 1.125rem;
    --ins-sidenav-item-gap: 12px;
    --ins-sidenav-item-padding-x: 12px;
    --ins-sidenav-item-padding-y: 10px;
    --ins-sidenav-item-font-size: 0.875rem;

    /* ===== BRAND COLORS ===== */
    --ins-primary: #2563eb;
    --ins-secondary: #64748b;
    --ins-success: #16a34a;
    --ins-info: #60a5fa;
    --ins-warning: #f59e0b;
    --ins-danger: #dc2626;
    --ins-dark: #1e3a8a;

    /* RGB */
    --ins-primary-rgb: 37, 99, 235;
    --ins-info-rgb: 96, 165, 250;
    --ins-danger-rgb: 220, 38, 38;

    /* ===== CHART COLORS ===== */
    --ins-chart-primary: #2563eb;
    --ins-chart-primary-rgb: 37, 99, 235;
    --ins-chart-secondary: #60a5fa;
    --ins-chart-secondary-rgb: 96, 165, 250;
    --ins-chart-gray: #e5e7eb;
    --ins-chart-gray-rgb: 229, 231, 235;
    --ins-chart-dark: #1e3a8a;
    --ins-chart-dark-rgb: 30, 58, 138;

    --ins-chart-border-color: #e5e7eb;
    --ins-chart-title-color: #6b7280;

    /* ===== SUBTLE STATES ===== */
    --ins-primary-bg-subtle: rgba(37, 99, 235, 0.1);
    --ins-info-bg-subtle: rgba(96, 165, 250, 0.1);
    --ins-danger-bg-subtle: rgba(220, 38, 38, 0.1);

    --ins-primary-border-subtle: rgba(37, 99, 235, 0.3);
    --ins-info-border-subtle: rgba(96, 165, 250, 0.3);
    --ins-danger-border-subtle: rgba(220, 38, 38, 0.3);

    /* ===== TEXT EMPHASIS ===== */
    --ins-primary-text-emphasis: #1e40af;
    --ins-info-text-emphasis: #2563eb;
    --ins-danger-text-emphasis: #991b1b;
}

html[data-skin=strata][data-menu-color=light] {
    --ins-sidenav-bg: #ffffff;
    --ins-sidenav-border-color: #e5e7eb;
    --ins-sidenav-item-color: #6b7280;

    --ins-sidenav-item-hover-color: #2563eb;
    --ins-sidenav-item-hover-bg: #eff6ff;

    --ins-sidenav-item-active-color: #1e40af;
    --ins-sidenav-item-active-bg: #dbeafe;
}

html[data-skin=strata][data-menu-color=gray] {
    --ins-sidenav-bg: #f3f4f6;
    --ins-sidenav-border-color: #e5e7eb;

    --ins-sidenav-item-color: #6b7280;

    --ins-sidenav-item-hover-color: #2563eb;
    --ins-sidenav-item-hover-bg: #e0f2fe;

    --ins-sidenav-item-active-color: #111827;
    --ins-sidenav-item-active-bg: #e5e7eb;
}
html[data-skin=strata][data-menu-color=dark] {
    --ins-sidenav-bg: #0f172a;
    --ins-sidenav-border-color: #1f2937;

    --ins-sidenav-item-color: #94a3b8;

    --ins-sidenav-item-hover-color: #cbd5f5;
    --ins-sidenav-item-hover-bg: #1e293b;

    --ins-sidenav-item-active-color: #e2e8f0;
    --ins-sidenav-item-active-bg: #1e3a8a;
}

html[data-skin=strata][data-menu-color=gradient] {
    --ins-sidenav-bg: linear-gradient(135deg, #1e3a8a, #2563eb);
    --ins-sidenav-item-color: rgba(255,255,255,0.7);

    --ins-sidenav-item-hover-color: #ffffff;
    --ins-sidenav-item-hover-bg: rgba(255,255,255,0.1);

    --ins-sidenav-item-active-color: #ffffff;
    --ins-sidenav-item-active-bg: rgba(255,255,255,0.2);
}
/*ADDED*/
html[data-skin=strata][data-bs-theme=dark][data-menu-color=dark], html[data-skin=strata][data-bs-theme=dark][data-menu-color=light] {
    --ins-sidenav-bg: #0f172a;
    --ins-sidenav-border-color: #1f2937;
    --ins-sidenav-item-color: #94a3b8;
    --ins-sidenav-item-hover-color: #cbd5f5;
    --ins-sidenav-item-hover-bg: #1e293b;
    --ins-sidenav-item-active-color: #e2e8f0;
    --ins-sidenav-item-active-bg: #1e3a8a;
}

html[data-skin=strata][data-topbar-color=light] {
    --ins-topbar-bg: #ffffff;
    --ins-topbar-item-color: #6b7280;

    --ins-topbar-item-hover-color: #2563eb;

    --ins-topbar-search-bg: transparent;
    --ins-topbar-search-border: #e5e7eb;
}

html[data-skin=strata][data-topbar-color=gray] {
    --ins-topbar-bg: #f3f4f6;
    --ins-topbar-item-color: #6b7280;

    --ins-topbar-item-hover-color: #2563eb;

    --ins-topbar-search-bg: #e5e7eb;
    --ins-topbar-search-border: #e5e7eb;
}

html[data-skin=strata][data-topbar-color=dark] {
    --ins-topbar-bg: #1e293b;

    --ins-topbar-item-color: #cbd5f5;
    --ins-topbar-item-hover-color: #93c5fd;

    --ins-topbar-search-bg: #0f172a;
    --ins-topbar-search-border: #1f2937;
}

html[data-skin=strata][data-topbar-color=gradient] {
    --ins-topbar-bg: linear-gradient(135deg, #1e3a8a, #2563eb);

    --ins-topbar-item-color: rgba(255,255,255,0.8);
    --ins-topbar-item-hover-color: #ffffff;

    --ins-topbar-search-bg: rgba(255,255,255,0.1);
    --ins-topbar-search-border: rgba(255,255,255,0.2);
}

/*ADDED 2*/
html[data-skin=strata][data-bs-theme=dark][data-topbar-color=dark], html[data-skin=strata][data-bs-theme=dark][data-topbar-color=light], html[data-skin=strata][data-bs-theme=dark][data-topbar-color=gray] {
    --ins-topbar-bg: #1e293b;

    --ins-topbar-item-color: #cbd5f5;
    --ins-topbar-item-hover-color: #93c5fd;

    --ins-topbar-search-bg: #0f172a;
    --ins-topbar-search-border: #1f2937;
}


[data-bs-theme=dark][data-skin=strata] {
    --ins-body-bg: #0f172a;
    --ins-secondary-bg: #1e293b;
    --ins-box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    --ins-theme-card-border-color: #1f2937;
    --ins-chart-border-color: #1f2937;
    --ins-chart-gray: #374151;
}

/*addtiional from chatGPT*/
/* =========================================
   GLOBAL DARK MODE TOKENS
   ========================================= */

[data-bs-theme="dark"] {
    --ins-body-bg: #0f172a;
    --ins-surface-1: #1e293b;
    --ins-surface-2: #0f172a;

    --ins-border-color: #1f2937;

    --ins-text-primary: #e2e8f0;
    --ins-text-secondary: #94a3b8;
    --ins-text-muted: #64748b;

    --ins-input-bg: #0f172a;
    --ins-input-bg-focus: #020617;
    --ins-input-border: #334155;
}

/* =========================================
   FORM CONTROLS
   ========================================= */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--ins-input-bg);
    border: 1px solid var(--ins-input-border);
    color: var(--ins-text-primary);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ins-text-muted);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ins-input-bg-focus);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] .form-control:disabled {
    background-color: #020617;
    color: #64748b;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ins-input-bg);
    border-color: var(--ins-input-border);
    color: var(--ins-text-secondary);
}

/* =========================================
   DROPDOWNS
   ========================================= */

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--ins-surface-1);
    border: 1px solid var(--ins-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--ins-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: #1e3a8a;
    color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--ins-border-color);
}

/* =========================================
   MODALS
   ========================================= */

[data-bs-theme="dark"] .modal-content {
    background-color: var(--ins-surface-1);
    border: 1px solid var(--ins-border-color);
    color: var(--ins-text-primary);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--ins-border-color);
}

/* =========================================
   TABLES
   ========================================= */

[data-bs-theme="dark"] .table {
    color: var(--ins-text-primary);
}

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

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

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: #1e293b;
}

/* =========================================
   CARDS
   ========================================= */

[data-bs-theme="dark"] .card {
    background-color: var(--ins-surface-1);
    border: 1px solid var(--ins-border-color);
}

/* =========================================
   ALERTS
   ========================================= */

[data-bs-theme="dark"] .alert-primary {
    background-color: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.3);
    color: #93c5fd;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
}

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

[data-bs-theme="dark"] .btn-light {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .btn-light:hover {
    background-color: #334155;
}

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

[data-bs-theme="dark"] .badge.bg-light {
    background-color: #1e293b !important;
    color: #e2e8f0;
}

/* =========================================
   NAVBAR / TOPBAR
   ========================================= */

[data-bs-theme="dark"] .navbar {
    background-color: var(--ins-surface-1);
    border-bottom: 1px solid var(--ins-border-color);
}

/* =========================================
   SIDENAV (SAFE OVERRIDE)
   ========================================= */

[data-bs-theme="dark"] .sidenav,
[data-bs-theme="dark"] .sidebar {
    background-color: #0f172a;
}

/* =========================================
   DATEPICKER / 3RD PARTY (GENERIC FIXES)
   ========================================= */

/* Flatpickr / generic calendar */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: #1e293b;
    border: 1px solid #1f2937;
}

[data-bs-theme="dark"] .flatpickr-day {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .flatpickr-day:hover {
    background: #2563eb;
}

/* React Datepicker / generic */
[data-bs-theme="dark"] .react-datepicker {
    background-color: #1e293b;
    border: 1px solid #1f2937;
}

[data-bs-theme="dark"] .react-datepicker__day {
    color: #e2e8f0;
}

/* =========================================
   SCROLLBARS (OPTIONAL POLISH)
   ========================================= */

[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

/* =========================================
   EDGE CASE FIXES
   ========================================= */

/* Autofill fix */
[data-bs-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #1e293b inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Disabled buttons */
[data-bs-theme="dark"] .btn:disabled {
    opacity: 0.6;
}

/* HR */
[data-bs-theme="dark"] hr {
    border-color: var(--ins-border-color);
}

/*==============================for FRONT END*/

.custom-background {
    background-image: url('public/assets/images/icons/decoration-star.svg'), url('public/assets/images/icons/decoration-star.svg');
    background-position: -20px center, calc(100% + 20px) center; /* Move images */
    background-size: auto, auto; /* Keep sizes */
    background-repeat: no-repeat, no-repeat;
    height: 400px;
    width: 100%;
}


.header .decoration-star {
    top: 80px;
    left: -200px;
    width: 500px;
    opacity: 0.7;
}

.header .decoration-star-2 {
    top: 80px;
    right: -200px;
    width: 500px;
    opacity: 0.7;
}

.services_bg {
    color: white;
    background: linear-gradient(to bottom right, rgba(10, 83, 190, 0.01), rgba(10, 83, 190, 0.65)), url("public/assets/images/frontend/rehab_center.jpg") center center no-repeat;
    background-size: cover;
}