/////////////////////////////////////////////////////////
/////// Themechanger css working
////////////////////////////////////////////////////////


/* --- 1. CORE ENGINE & GLOBAL VARIABLES --- */
:root {
    --user-custom-color: #f15b19; 
    --bs-body-font-size: 14px;
}

/* Reset legacy control panel styles */
#control_panel {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
}
/* --- THEME TOGGLE BUTTON FIX --- */
#control_label {
    position: fixed !important;
    top: 10px !important;    /* Absolute distance from the top */
    left: 10px !important;   /* Absolute distance from the left */
    width: 35px !important;  /* Slightly larger for better centering */
    height: 35px !important;
    padding: 0 !important;   /* Critical for centering the icon */
    z-index: 100000 !important; /* One level higher than standard headers */
    background-color: #212529 !important; /* BS dark */
    color: #fff !important;
}

#control_label i {
    font-size: 16px !important; /* Adjusted to fit perfectly in a 35px button */
    display: block !important;
}
/* --- 2. SWATCH SIZING & THEME BOXES (The 1-16 Boxes) --- */

/* General Theme Swatches (Except the Color Picker) */
.theme-swatch:not(.colorPicker) {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.2s, border-color 0.2s;
    background-color: #444; /* Fallback grey */
}

.theme-swatch:not(.colorPicker):hover {
    transform: translateY(-2px);
    border-color: #fff !important;
}



/* --- 3. THE COLOR PICKER SWATCH (The Orange Box) --- */

/* The Anchor (The wrapper you added in HTML) */
.swatch-clipper {
    width: 50px !important;
    height: 50px !important;
    position: relative !important;
    margin-left: 15px !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* The Actual Visual Swatch */
.colorPicker.theme-swatch {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--user-custom-color, #f15b19) !important;
    background-image: none !important; /* Prevents theme gradients from hiding the color */
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
    pointer-events: none; /* Let click pass to clipper */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.colorPicker.theme-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--user-custom-color);
}

/* Cleanup: Hide any elements the library tries to inject into the swatch */
.swatch-clipper div:not(.colorPicker) {
    display: none !important;
}

/* --- 4. THE COLORPICKER POPUP WINDOW (The Map) --- */
.colorpicker {
    width: 356px !important;
    height: 176px !important;
    z-index: 99999 !important; /* Above everything */
    position: absolute !important;
    margin-top: 10px !important;
    margin-left: -20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    border: 1px solid #555 !important;
}

/* Force hidden when display:none is present */
.colorpicker[style*="display: none"] {
    display: none !important;
}

/* --- 5. THEME GRADIENTS (Mapping to nb-1 to nb-16) --- */
body .theme-swatch.nb-1  { background: linear-gradient(180deg, #444, #222) !important; }
body .theme-swatch.nb-2  { background: linear-gradient(180deg, #007bff, #0056b3) !important; }
body .theme-swatch.nb-3  { background: linear-gradient(180deg, #d0e4f7, #73b1e7) !important; }
body .theme-swatch.nb-4  { background: linear-gradient(180deg, #b4e391, #61c419) !important; }
body .theme-swatch.nb-5  { background: linear-gradient(180deg, #f6e6b4, #ed9017) !important; }
body .theme-swatch.nb-6  { background: linear-gradient(180deg, #dc3545, #8a1622) !important; }
body .theme-swatch.nb-7  { background: linear-gradient(180deg, #17a2b8, #117a8b) !important; }
body .theme-swatch.nb-8  { background: linear-gradient(180deg, #2c2c2c, #000) !important; }
body .theme-swatch.nb-9  { background: linear-gradient(180deg, #6f42c1, #4e298a) !important; }
body .theme-swatch.nb-10 { background: linear-gradient(180deg, #f3e2c7, #b68d4c) !important; }
body .theme-swatch.nb-11 { background: linear-gradient(180deg, #b4ddb4, #005700) !important; }
body .theme-swatch.nb-12 { background: linear-gradient(180deg, #b7deed, #21b4e2) !important; }
body .theme-swatch.nb-13 { background: linear-gradient(180deg, #ffc0cb, #e67e91) !important; }
body .theme-swatch.nb-14 { background: linear-gradient(180deg, #191970, #000033) !important; }
body .theme-swatch.nb-15 { background: linear-gradient(180deg, #708090, #2f4f4f) !important; }
body .theme-swatch.nb-16 { background: linear-gradient(180deg, #ffffff, #e6e6e6) !important; border-color: #ddd !important; }


/* --- 5a. NAVBAR APPLICATION --- */
body.nb-1 .navbar  { background: linear-gradient(180deg, #444, #222) !important; }
body.nb-2 .navbar  { background: linear-gradient(180deg, #007bff, #0056b3) !important; }
body.nb-3 .navbar  { background: linear-gradient(180deg, #d0e4f7, #73b1e7) !important; }
body.nb-4 .navbar  { background: linear-gradient(180deg, #b4e391, #61c419) !important; }
body.nb-5 .navbar   { background: linear-gradient(180deg, #f6e6b4, #ed9017) !important; }
body.nb-6 .navbar   { background: linear-gradient(180deg, #dc3545, #8a1622) !important; }
body.nb-7 .navbar   { background: linear-gradient(180deg, #17a2b8, #117a8b) !important; }
body.nb-8 .navbar   { background: linear-gradient(180deg, #2c2c2c, #000) !important; }
body.nb-9 .navbar   { background: linear-gradient(180deg, #6f42c1, #4e298a) !important; }
body.nb-10 .navbar  { background: linear-gradient(180deg, #f3e2c7, #b68d4c) !important; }
body.nb-11 .navbar  { background: linear-gradient(180deg, #b4ddb4, #005700) !important; }
body.nb-12 .navbar  { background: linear-gradient(180deg, #b7deed, #21b4e2) !important; }
body.nb-13 .navbar  { background: linear-gradient(180deg, #ffc0cb, #e67e91) !important; }
body.nb-14 .navbar  { background: linear-gradient(180deg, #191970, #000033) !important; }
body.nb-15 .navbar  { background: linear-gradient(180deg, #708090, #2f4f4f) !important; }
body.nb-16 .navbar  { background: linear-gradient(180deg, #ffffff, #e6e6e6) !important; border-color: #ddd !important; }


/* --- 5b BACKGROUND SWATCH PREVIEWS --- */
/* This makes the little boxes in the panel show their colors */
/* --- MATCHED SWATCH PREVIEWS --- */
.theme-swatch.background-1  { background-color: rgba(39, 42, 47, 0.8) !important; color: rgba(234, 234, 234, 1); }/* Match your $body-bg variable exactly for the default */
.theme-swatch.background-2  { background-color: #e9ecef !important; }
.theme-swatch.background-3  { background-color: #ffffff !important; border: 1px solid #ddd !important; }
.theme-swatch.background-4  { background-color: #333333 !important; }
.theme-swatch.background-5  { background-color: #0056b3 !important; }
.theme-swatch.background-6  { background-color: #73b1e7 !important; }
.theme-swatch.background-7  { background-color: #61c419 !important; }
.theme-swatch.background-8  { background-color: #ed9017 !important; }
.theme-swatch.background-9  { background-color: #8a1622 !important; }
.theme-swatch.background-10 { background-color: #117a8b !important; }
.theme-swatch.background-11 { background-color: #1a1a1a !important; }
.theme-swatch.background-12 { background-color: #4e298a !important; }
.theme-swatch.background-13 { background-color: #b68d4c !important; }
.theme-swatch.background-14 { background-color: #003366 !important; }
.theme-swatch.background-15 { background-color: #2f4f4f !important; }
.theme-swatch.background-16 { background-color: #f0f0f0 !important; border: 1px solid #ddd !important; }


/* --- 5b BACKGROUND SWATCH PREVIEWS --- */
/* --- MATCHED SOLID BODY BACKGROUNDS --- */
body.background-1  { background-color: rgba(39, 42, 47, 0.8) !important; color: rgba(234, 234, 234, 1); }/* Match your $body-bg variable exactly for the default */

body.background-2  { background-color: #e9ecef !important; color: #212529; } /* Cool Gray */
body.background-3  { background-color: #ffffff !important; color: #212529; } /* Pure White */
body.background-4  { background-color: #333333 !important; color: #ffffff; } /* Matches NB-1 (Dark Grey) */
body.background-5  { background-color: #0056b3 !important; color: #ffffff; } /* Matches NB-2 (Blue) */
body.background-6  { background-color: #73b1e7 !important; color: #212529; } /* Matches NB-3 (Silver/Blue) */
body.background-7  { background-color: #61c419 !important; color: #ffffff; } /* Matches NB-4 (Green) */
body.background-8  { background-color: #ed9017 !important; color: #ffffff; } /* Matches NB-5 (Orange) */
body.background-9  { background-color: #8a1622 !important; color: #ffffff; } /* Matches NB-6 (Red) */
body.background-10 { background-color: #117a8b !important; color: #ffffff; } /* Matches NB-7 (Teal) */
body.background-11 { background-color: #1a1a1a !important; color: #ffffff; } /* Matches NB-8 (Deep Black) */
body.background-12 { background-color: #4e298a !important; color: #ffffff; } /* Matches NB-9 (Purple) */
body.background-13 { background-color: #b68d4c !important; color: #ffffff; } /* Matches NB-10 (Sand) */
body.background-14 { background-color: #003366 !important; color: #ffffff; } /* Matches NB-14 (Midnight) */
body.background-15 { background-color: #2f4f4f !important; color: #ffffff; } /* Matches NB-15 (Slate) */
body.background-16 { background-color: #f0f0f0 !important; color: #333333; } /* Matches NB-16 (Off White) */

/* Global Fix: Ensure all backgrounds cover the full screen height */
body[class*="background-"] {
    min-height: 100vh;
}





/* --- 5c Cards: RGBA System (With Dark Protection) --- */

/* Card 1: Subtle Glass - Only if NOT explicitly bg-dark */
body.card-1 .card:not(.bg-dark) { 
    background-color: rgba(255, 255, 255, 0.1) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card 2: Frosted Glass - Only if NOT explicitly bg-dark */
body.card-2 .card:not(.bg-dark) { 
    background-color: rgba(255, 255, 255, 0.5) !important; 
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card 3: Smoked Glass - Only if NOT explicitly bg-dark */
body.card-3 .card:not(.bg-dark) { 
    background-color: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card 4: Dark Obsidian - Only if NOT explicitly bg-dark */
body.card-4 .card:not(.bg-dark) { 
    background-color: rgba(0, 0, 0, 0.85) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* --- Global Protection for .bg-dark utility --- */
/* This ensures your Site Statistics keep their custom dark look */
.card.bg-dark {
    color: #fff !important;
}
.card.bg-dark .card-header {
    border-color: rgba(255,255,255,0.1) !important;
}

/* --- Swatch Appearance in Menu (Remains Untouched) --- */
.theme-swatch.card-1 { 
    background: rgba(255, 255, 255, 0.3) !important; 
    border: 2px solid rgba(255, 255, 255, 0.5) !important; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.theme-swatch.card-2 { 
    background: rgba(255, 255, 255, 0.8) !important; 
    border: 2px solid #fff !important; 
}
.theme-swatch.card-3 { 
    background: rgba(100, 100, 100, 1) !important; 
    border: 2px solid #666 !important; 
}
.theme-swatch.card-4 { 
    background: rgba(30, 30, 30, 1) !important; 
    border: 2px solid #000 !important; 
}

/* ---5d TABLE BODY (Container) --- */
/* Swatch Colors */
.theme-swatch.th-1 { background: rgba(255, 255, 255, 0.2) !important; border: 1px solid #fff; }
.theme-swatch.th-2 { background: #0d6efd !important; border: 1px solid #fff; }
.theme-swatch.th-3 { background: #198754 !important; border: 1px solid #fff; }
.theme-swatch.th-4 { background: #dc3545 !important; border: 1px solid #fff; }

/* Page Results */
body.th-1 .table thead th { background-color: rgba(255, 255, 255, 0.1) !important; color: #eee !important; }
body.th-2 .table thead th { background-color: rgba(13, 110, 253, 0.6) !important; color: #fff !important; }
body.th-3 .table thead th { background-color: rgba(25, 135, 84, 0.6) !important; color: #fff !important; }
body.th-4 .table thead th { background-color: rgba(220, 53, 69, 0.6) !important; color: #fff !important; }

/* --- Expanded Row (TR) Styles --- */
/* Swatch Colors */
.theme-swatch.tr-1 { background: rgba(0, 0, 0, 0.6) !important; border: 1px solid #222; }
.theme-swatch.tr-2 { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid #888; }
.theme-swatch.tr-3 { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid #444; }
.theme-swatch.tr-4 { background: rgba(255, 255, 255, 0.05) !important; border: 1px dashed #777; }

/* Page Results */
body.tr-1 .table tbody td { background-color: rgba(0, 0, 0, 0.5) !important; }
body.tr-2 .table tbody td { background-color: rgba(255, 255, 255, 0.1) !important; }
body.tr-3 .table tbody td { background-color: rgba(0, 0, 0, 0.2) !important; }
body.tr-4 .table tbody td { background-color: rgba(255, 255, 255, 0.02) !important; }

/* ---5e Footer Solid Color System --- */

/* Base Footer Styling */
footer { transition: background 0.3s ease; border-top: 1px solid rgba(255,255,255,0.1); }

/* 16 Colors */
body.footer-1 footer { background-color: #212529 !important; } /* Dark */
body.footer-2 footer { background-color: #0d6efd !important; } /* Blue */
body.footer-3 footer { background-color: #6610f2 !important; } /* Indigo */
body.footer-4 footer { background-color: #6f42c1 !important; } /* Purple */
body.footer-5 footer { background-color: #d63384 !important; } /* Pink */
body.footer-6 footer { background-color: #dc3545 !important; } /* Red */
body.footer-7 footer { background-color: #fd7e14 !important; } /* Orange */
body.footer-8 footer { background-color: #ffc107 !important; } /* Yellow */
body.footer-9 footer { background-color: #198754 !important; } /* Green */
body.footer-10 footer { background-color: #20c997 !important; } /* Teal */
body.footer-11 footer { background-color: #0dcaf0 !important; } /* Cyan */
body.footer-12 footer { background-color: #adb5bd !important; } /* Gray */
body.footer-13 footer { background-color: #495057 !important; } /* Mid-Dark */
body.footer-14 footer { background-color: #000000 !important; } /* Pitch Black */
body.footer-15 footer { background-color: #2c3e50 !important; } /* Midnight Blue */
body.footer-16 footer { background-color: #27ae60 !important; } /* Emerald */

/* Swatch Preview Styling */
.theme-swatch.footer-1 { background-color: #212529; }
.theme-swatch.footer-2 { background-color: #0d6efd; }
.theme-swatch.footer-3 { background-color: #6610f2; }
.theme-swatch.footer-4 { background-color: #6f42c1; }
.theme-swatch.footer-5 { background-color: #d63384; }
.theme-swatch.footer-6 { background-color: #dc3545; }
.theme-swatch.footer-7 { background-color: #fd7e14; }
.theme-swatch.footer-8 { background-color: #ffc107; }
.theme-swatch.footer-9 { background-color: #198754; }
.theme-swatch.footer-10 { background-color: #20c997; }
.theme-swatch.footer-11 { background-color: #0dcaf0; }
.theme-swatch.footer-12 { background-color: #adb5bd; }
.theme-swatch.footer-13 { background-color: #495057; }
.theme-swatch.footer-14 { background-color: #000000; }
.theme-swatch.footer-15 { background-color: #2c3e50; }
.theme-swatch.footer-16 { background-color: #27ae60; }


/* --- 6. SKIN & BANNER MAPPING --- */
.site-banner {
    display: block !important;
    min-height: 250px; 
    width: 100%;
    background: url("../images/banner1.png") center/cover no-repeat !important; 
}

#skin-switcher .theme-swatch.skin-1 { background: url("../images/banner1.png") center/cover no-repeat !important; }
#skin-switcher .theme-swatch.skin-2 { background: url("../images/banner2.png") center/cover no-repeat !important; }
#skin-switcher .theme-swatch.skin-3 { background: url("../images/banner3.png") center/cover no-repeat !important; }
#skin-switcher .theme-swatch.skin-4 { background: url("../images/banner4.png") center/cover no-repeat !important; }
body.skin-1 .site-banner { background: url("../images/banner1.png") center/cover no-repeat !important; }
body.skin-2 .site-banner { background: url("../images/banner2.png") center/cover no-repeat !important; }
body.skin-3 .site-banner { background: url("../images/banner3.png") center/cover no-repeat !important; }
body.skin-4 .site-banner { background: url("../images/banner4.png") center/cover no-repeat !important; }

#nav-switcher, #skin-switcher {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 1rem;
}

/* --- 7. BOOTSTRAP OVERRIDES --- */
#color-picker-container {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 !important;
    border-top: 1px solid #444;
    margin-top: 20px !important;
    position: relative !important;
}

.offcanvas { z-index: 1045 !important; }
.offcanvas-backdrop { z-index: 1040 !important; }

/* Critical: Allow picker to escape the side panel */
.offcanvas, .offcanvas-body {
    overflow: visible !important;
}

/* --- 8. TYPOGRAPHY THEMES & COMPONENT GUARDS --- */

/* 8a. Font Definitions */
body.text-1 { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body.text-2 { font-family: 'Tahoma', 'Geneva', sans-serif; }
body.text-3 { font-family: 'Verdana', sans-serif; }
body.text-4 { font-family: 'Calibri', 'Candara', sans-serif; }

/* 8b. The "Anti-Distortion" Guard */
/* This prevents font changes from making your Accent Swatch huge or tiny */
.swatch-clipper, 
.swatch-clipper > div, 
.colorPicker.theme-swatch {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    box-sizing: border-box !important;
}

/* 8c. Standardize form sizes so the dropdown doesn't shift the layout */
#text-switcher {
    font-family: sans-serif !important; /* Keep the UI control clean */
    font-size: 13px !important;
}

/* --- OFFCANVAS SCROLL FIX --- */
.offcanvas-body {
    overflow-y: auto !important; /* Enable vertical scrolling */
    max-height: 100vh;           /* Limit height to screen height */
    scrollbar-width: thin;       /* Modern scrollbar for Firefox */
    scrollbar-color: #444 #212529;
}

/* Custom Scrollbar for Chrome/Edge/Safari */
.offcanvas-body::-webkit-scrollbar {
    width: 6px;
}
.offcanvas-body::-webkit-scrollbar-track {
    background: #212529;
}
.offcanvas-body::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

/* Ensure the Reset button container has some breathing room at the bottom */
.offcanvas-body .mt-4 {
    padding-bottom: 30px; 
}