/* --- FONT AWESOME (Icons) --- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- CSS VARIABLES (ORIGINAL DARK THEME) --- */
:root {
    --primary: #6366f1;       /* Indigo Blue */
    --primary-hover: #4f46e5; /* Darker Indigo */
    --accent: #ec4899;        /* Pink */
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border: #334155;
    
    /* Blue to Pink Gradient */
    --gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* --- UTILITIES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* --- BUTTONS (FIXED FOR READABILITY) --- */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
}
.btn-primary {
    background: var(--gradient);
    color: #ffffff; /* Pure White */
    font-weight: 700; /* Bolder Text for visibility */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow behind text to make it pop */
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); /* Blue Glow */
}
.btn-primary:hover {
    transform: translateY(-2px);
    color: #ffffff; /* Stays white */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}
.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--text-main);
}
.btn-outline:hover {
    background: var(--primary);
    color: white;
}

/* --- HEADER & NAV --- */
header {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }

/* Mobile Toggle */
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--text-main); }

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--bg-card);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }
    .nav-links.active { display: flex; }
    .menu-toggle { display: block; }
}

/* --- FOOTER --- */
footer {
    background: #0b1120;
    border-top: 1px solid var(--border);
    padding: 40px 0;
    text-align: center;
    margin-top: auto;
}

/* --- BUTTON FORCE FIX --- */
.btn-primary {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}

/* --- PANEL THEME SKIN (NUCLEAR OPTION) --- */

/* 1. Force Dark Background (Overriding Script's Light Theme) */
body.light, #app, .wrapper {
    background-color: #0f172a !important; /* Direct Dark Color */
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Sidebar (Left Menu) */
.main-sidebar, .sidebar, .aside {
    background-color: #1e293b !important;
    border-right: 1px solid #334155 !important;
}

/* 3. Main Content Area */
.has-sidebar-left {
    background-color: #0f172a !important;
}

/* 4. Cards & Panels (The white boxes) */
.card, .well, .panel, .paper-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 5. Navbar (Top Header) */
.navbar, .sticky {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

/* 6. Inputs & Forms */
.form-control {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}
.form-control:focus {
    background-color: #1e293b !important;
    border-color: #6366f1 !important;
}

/* 7. Tables */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(30, 41, 59, 0.5) !important;
}
.table > tbody > tr > td {
    background-color: transparent !important;
    border-top: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* --- NUCLEAR CARD FIX (TARGETS ALL WHITE CLASSES) --- */
/* Force any element with 'bg-' in its class to be dark */
[class*="bg-"] {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Specific common white card classes */
.light .box, .light .well, .white-card, .card {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Specific targeting for dashboard widgets */
.widget, .card-stat {
    background: #1e293b !important;
}

/* --- PANEL THEME FIXES (SIDEBAR, TABLES, FONTS) --- */

/* 1. SIDEBAR HEADER (Logo Area & User Info) */
.sidebar {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Fix the Logo Area */
.navbar-brand {
    background: transparent !important;
    margin-bottom: 20px;
}
/* Force Logo Image to blend with dark theme */
.tsg-header-logo {
    border-radius: 8px;
    /* If image looks bad, uncomment below line: */
    /* display: none; */
}

/* Fix User Panel (Top Left Box with Name) */
.user-panel {
    background: rgba(30, 41, 59, 0.5) !important;
    color: #f8fafc !important;
    border: none !important;
}
.user-panel h6 {
    color: white !important;
    font-weight: 700;
}
.user-avatar {
    border: 2px solid #6366f1;
}

/* 2. SIDEBAR MENU (The List of Links) */
.sidebar-menu li {
    border-bottom: 1px solid #334155 !important;
}

/* Text Color for Links */
.sidebar-menu a, .sidebar-menu span {
    color: #e2e8f0 !important; /* Light Gray/White */
    font-weight: 500;
    transition: 0.3s;
}
/* Hover & Active State */
.sidebar-menu a:hover, .sidebar-menu a.active {
    color: #6366f1 !important; /* Primary Blue */
    background: rgba(99, 102, 241, 0.1);
}
/* Submenu Text */
.treeview-menu li a {
    color: #94a3b8 !important;
}
.treeview-menu li a:hover {
    color: white !important;
}

/* 3. TABLE TOP ROW (The "White" Part) */
.table thead th {
    background-color: #0f172a !important; /* Dark Blue */
    color: white !important;
    font-weight: 700;
    font-family: 'Inter', sans-serif !important;
    border-bottom: 2px solid #6366f1 !important;
}

/* 4. TABLE CONTENT (Ensure readability) */
.table td, .table th {
    color: #f8fafc !important; /* White Text */
    border-bottom: 1px solid #1e293b !important;
}

/* 5. DROPDOWN LIST (User Settings/Logout) */
.list-group {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.list-group-item {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #334155 !important;
}
.list-group-item:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    color: white !important;
}

/* 6. GENERAL TEXT FIX */
.light, .text-light, .text-muted {
    color: #94a3b8 !important;
}
h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
    font-family: 'Inter', sans-serif !important;
}

/* --- FIX: WHITE CONTENT AREA & PAGES --- */

/* 1. Force Main Content Wrapper to be transparent */
/* Scripts often use .main-content, .content-wrapper, or just divs inside main */
.main-content, .content-wrapper, .p-t-b-50, .p-t-b-100 {
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. Force ANY div inside <main> to be transparent (Nuclear Option) */
main > div, main > section, main > .container {
    background-color: transparent !important;
}

/* 3. Target specific script content classes */
.app-body, .page-content, .panel-content {
    background-color: #0f172a !important; /* Dark Background Fallback */
}

/* 4. Ensure text in content area is readable */
main h1, main h2, main h3, main h4 {
    color: #f8fafc !important;
}
main p, main span {
    color: #94a3b8 !important;
}

/* --- NUCLEAR MAIN CONTENT FIX --- */

/* 1. Target common Main Content Wrappers */
.content-wrapper, .page-content, .page-content-wrapper, .main-content, .app-body {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Target generic rows used in scripts */
.row {
    background-color: transparent !important;
}

/* 3. Force generic boxes/cards inside content to be dark */
.content-wrapper .card, .page-content .card, .app-body .card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 4. Force Text Colors in Content Area */
.content-wrapper h1, .page-content h2, .page-content h3, .app-body h1, .app-body h2 {
    color: #f8fafc !important;
}
.content-wrapper p, .page-content p, .app-body p {
    color: #94a3b8 !important;
}

/* --- ULTIMATE WHITE AREA FIX (Catch-All) --- */

/* 1. Target Direct Children of <main> (Nuclear Option) */
main > div {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Target Common Wrapper Classes */
.content-wrapper, .page-wrapper, .main-wrapper, .content-area, .page-content-area {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 3. Target Generic "Box" or "Panel" classes (Bootstrap/Script) */
.box, .panel, .well, .box-shadow {
    background-color: #1e293b !important;
    background-image: none !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 4. Force Bootstrap Container inside Main to be transparent */
main .container {
    background-color: transparent !important;
    background-image: none !important;
}

/* 5. Target Rows inside Content */
.content-wrapper .row, .page-wrapper .row {
    background-color: transparent !important;
}

/* --- TRIPLE THREAT: KILL ALL WHITE CLASSES & WRAPPERS --- */

/* 1. The "Nuclear" Attribute Selector */
/* This targets ANY element with "white" in its class name (e.g., bg-white, card-white) */
body.light [class*="white"] {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Target Common Wrapper Classes (Specificity Boost) */
.content-wrapper, .page-content, .content-area, .main-body, .dashboard-body {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 3. Target the Main Container inside the page content */
body.light .container {
    background-color: transparent !important;
    background-image: none !important;
}

/* 4. Target Rows inside content (Nested) */
body.light .row {
    background-color: transparent !important;
}

/* 5. Fallback: Force generic generic wrapper */
.wrapper, .panel-wrapper, .box-wrapper {
    background-color: #0f172a !important;
}

/* --- PANEL FIX: TARGET .WHITE AND .CARD CLASSES --- */

/* 1. Force the "white" class to be dark (This is the main culprit) */
.white {
    background-color: #1e293b !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Force Cards & Counter Boxes to be dark */
.counter-box, .card, .card-body {
    background-color: #1e293b !important;
    background-image: none !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 3. Fix Text Colors inside these boxes */
.white h4, .white h5, .card h4, .card h5 {
    color: #f8fafc !important;
}
.white p, .card p {
    color: #94a3b8 !important;
}

/* 4. Fix Icon Colors */
.white .icon, .card .icon {
    color: #6366f1 !important;
}

/* --- ADMIN DASHBOARD FIX --- */

/* 1. Force Admin Wrapper & Content Dark */
.admin-content, .admin-wrapper, .admin-body, .dashboard-admin {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Force Rows and Columns */
.admin-content .row, .admin-wrapper .row {
    background-color: transparent !important;
}

/* 3. Force Generic Admin Boxes/Cards */
.admin-content .box, .admin-content .card, .admin-content .well, .admin-content .panel {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 4. Force Admin Tables */
.admin-content table tbody tr {
    background-color: transparent !important;
    border-top: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
.admin-content table thead th {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: white !important;
    border-bottom: 2px solid #6366f1 !important;
}

/* 5. Force Headings */
.admin-content h1, .admin-content h2, .admin-content h3 {
    color: #f8fafc !important;
}

/* 6. Catch-All for generic admin classes */
[class*="admin"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* --- UNIVERSAL INNER ADMIN PAGES FIX --- */

/* 1. Force Main Content Wrappers Dark (This targets the "White Box" in inner pages) */
.main-content, .content-wrapper, .page-content, .app-body {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. Force Rows inside Content to be transparent */
.main-content .row, .content-wrapper .row {
    background-color: transparent !important;
}

/* 3. Force Generic Cards/Boxes to be Dark */
.main-content .card, .main-content .box, .main-content .well, .main-content .panel {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 4. Force Tables to be readable */
.main-content table tbody tr {
    background-color: transparent !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}

/* 5. Force Headings */
.main-content h1, .main-content h2, .main-content h3, .main-content h4 {
    color: #f8fafc !important;
}

/* 6. Fallback: Target Body Light Wrapper */
body.light .main-body {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* --- UNIVERSAL ADMIN PAGES FIX (Catch-All) --- */

/* 1. TARGET CONTAINER FLUID (Bootstrap Default) */
.container-fluid {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 2. TARGET MAIN CONTENT WRAPPERS (Most Scripts use these) */
.wrapper, .page-content, .main-content, .content-wrapper, .admin-layout {
    background-color: #0f172a !important;
    background-image: none !important;
    color: #f8fafc !important;
}

/* 3. TARGET SPECIFIC WRAPPER ID (Angular/Scripts) */
#app, #main, #wrapper, #app-body, #dashboard-app {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* 4. TARGET BOOTSTRAP CARDS/PANELS */
.card, .panel, .well, .box, .box-shadow {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* 5. TARGET ROWS & COLUMNS (White strips) */
.row, .col, .col-md-3, .col-md-4, .col-md-6, .col-md-12 {
    background-color: transparent !important;
}

/* 6. TARGET GENERIC "LIGHT" or "WHITE" CLASSES */
.bg-light, .bg-white, .bg-white, .bg-secondary {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* 7. TARGET TABLES */
.table thead {
    background-color: rgba(15, 23, 42, 0.5) !important;
    color: white !important;
}
.table tbody tr {
    background-color: transparent !important;
    color: #f8fafc !important;
    border-top: 1px solid #1e293b !important;
}

/* 8. TARGET TEXT */
h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
}

/* --- SIDEBAR SCROLLBAR FIX (NUCLEAR OVERRIDE) --- */

/* 1. Target WebKit Scrollbar - Force every property */
.main-sidebar::-webkit-scrollbar {
    width: 14px !important; /* Width */
    height: auto !important;
}

/* 2. The Track (Background Rail) - Bright Purple for Verification */
.main-sidebar::-webkit-scrollbar-track {
    background-color: #d946ef !important; /* Bright Purple */
    border: 2px solid #4c1ef !important; /* Dark Border */
    border-radius: 10px !important;
}

/* 3. The Thumb (Handle) - Neon Pink */
.main-sidebar::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Neon Pink */
    border: 2px solid #f472b6 !important; /* Thick Border */
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5) !important; /* Glow */
}

/* 4. The Thumb on Hover - Light Pink */
.main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #f472b6 !important;
}

/* --- UNIVERSAL SCROLLBAR FIX (The "Nuclear Option") --- */

/* This targets the scrollbar-thumb directly, skipping all classes (.main-sidebar, .offcanvas, etc) */
* ::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Bright Pink - Highly Visible */
    border-radius: 10px;
    border: 2px solid #be185d;
}

/* OPTIONAL: Change Track Color too if you want the rail behind the thumb */
* ::-webkit-scrollbar-track {
    background: #0f172a !important;
    border: 1px solid #1e293b;
    border-radius: 10px;
}

/* OPTIONAL: Make scrollbar visible if it's hidden by script (Change 'display' to 'block') */
* ::-webkit-scrollbar {
    width: 14px; /* Force width if script hides it */
}

/* --- SCROLLBAR FIX FOR VERTICAL MENU (Targeting .main-sidebar) --- */

/* 1. FORCE SCROLLBAR VISIBILITY (Make sure it's not hidden by script) */
.main-sidebar {
    overflow-y: auto !important;
}

/* 2. THUMB (The Drag Handle) */
.main-sidebar::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Bright Pink Thumb */
    border: 1px solid #6366f1; /* Border around thumb */
    border-radius: 6px; /* Rounded Edges */
    height: 20px; /* Visible Height */
}

/* 3. THUMB HOVER (Interactive) */
.main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #f472b6; /* Lighter Pink on Hover */
    cursor: pointer;
}

/* 4. TRACK (The Background Rail) */
.main-sidebar::-webkit-scrollbar-track {
    background-color: #0f172a; /* Dark Blue Background */
    border-left: 1px solid #334155; /* Border on left side to define the track */
    border-radius: 10px; /* Rounded Track */
}

/* 5. WIDTH (Thickness of scrollbar) */
.main-sidebar::-webkit-scrollbar {
    width: 12px !important;
}

/* --- SCROLLBAR FIX (TARGETING `aside`) --- */

/* 1. ENSURE SCROLLING IS ACTIVE */
aside {
    overflow-y: auto !important;
}

/* 2. THE THUMB (The Part You Hold) - Bright Pink */
aside::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Bright Pink Accent */
    border: 1px solid #be185d;
    border-radius: 8px; /* Rounded Edges */
    height: 20px; /* Height of the Draggable Handle */
    background-clip: padding-box; /* Ensures background color works inside the rounded corners */
}

/* 3. THE TRACK (The Background Rail) - Light Blue to be visible against Dark Theme */
aside::-webkit-scrollbar-track {
    background-color: #1e293b !important; /* Lighter Blue */
    border: 1px solid #334155;
    border-radius: 10px;
    height: 8px; /* Height of the track */
}

/* 4. THE THUMB HOVER - Lighter Pink */
aside::-webkit-scrollbar-thumb:hover {
    background-color: #f472b6 !important;
    cursor: pointer;
}

/* 5. UNIVERSAL FIX (If this class doesn't work, try this fallback) */
/* Targets scrollbar inside any element *inside* aside */
aside *::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important;
    border: 1px solid #be185d;
    border-radius: 8px;
}

/* --- SIDEBAR SCROLLBAR NUCLEAR FIX --- */

/* 1. TARGET SPECIFIC SIDEBAR (The Menu Scrollbar) */
.main-sidebar::-webkit-scrollbar {
    width: 14px; /* Force width for visibility */
}

/* 2. THE RAIL (Background) */
.main-sidebar::-webkit-scrollbar-track {
    background-color: #0f172a !important; /* Dark Blue Background - Make it visible */
    border: 1px solid #334155; /* Thin border to show where it is */
    border-radius: 10px;
}

/* 3. THE THUMB (The Draggable Part) */
.main-sidebar::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Bright Pink Accent - Highly Visible */
    border: 1px solid #be185d;
    border-radius: 10px;
}

/* 4. THE THUMB ON HOVER */
.main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #f472b6; /* Lighter Pink on Hover */
}

/* --- UNIVERSAL SCROLLBAR FIX (Nuclear Option) --- */

/* 1. TARGET WRAPPERS (Main & Aside) */
* {
    /* Target Main Sidebar ID (Often used by scripts) */
    #main-sidebar,
    /* Target Generic Wrapper Classes */
    .main-sidebar,
    aside {
        /* 2. FORCE BACKGROUND COLOR */
        background-color: #1e293b !important;
        background-image: none !important;
        color: #f8fafc !important;
    }

/* 3. FORCE RAIL & THUMB (The visible parts) */
#main-sidebar::-webkit-scrollbar-track {
    /* 4. FORCE TRACK COLOR (The Light Gray Rail - Visible) */
    #main-sidebar::-webkit-scrollbar-track {
        background-color: #e2e8f0 !important; /* Light Gray - High Visibility */
        width: 10px; /* Make it slightly wider than default so you can see it better */
    border-radius: 0 !important;
}

/* 5. FORCE THUMB (The Draggable Handle) */
#main-sidebar::-webkit-scrollbar-thumb {
    background-color: #ec4899 !important; /* Bright Pink - Visible */
    border-radius: 8px; /* Slightly rounded for better touch targets */
    border: 2px solid #ec4899; /* Outline */
    cursor: pointer;
}

/* 6. FORCE HOVER STATE (Interactive Element) */
#main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #ec4899 !important;
    transform: scale(1.1); /* Slight Zoom effect on hover */
}

/* 7. Fallback for generic scripts (Targets every possible Sidebar Wrapper) */
.sidebar, .offcanvas {
    background-color: #1e293b !important; /* Fallback */
    color: #f8fafc !important;
    background-image: none !important;
}