/* ======================================================
   THEME VARIABLES (All 13 Integrated)
====================================================== */
body.theme-dark {
    --bg-main: #f9fafb;
    --bg-sidebar: #111827;
    --bg-header: #1f2937;
    --bg-footer: #1f2937;
    --text-main: #111827;
    --text-invert: #ffffff;
    --link-color: #e5e7eb;
    --accent-color: #2563eb;
    --hover-bg: rgba(255, 255, 255, 0.08);
}

body.theme-light {
    --bg-main: #ffffff;
    --bg-sidebar: #f3f4f6;
    --bg-header: #e5e7eb;
    --bg-footer: #e5e7eb;
    --text-main: #111827;
    --text-invert: #111827;
    --link-color: #374151;
    --accent-color: #2563eb;
    --hover-bg: rgba(0, 0, 0, 0.05);
}

body.theme-blue {
    --bg-main: #f0f6ff;
    --bg-sidebar: #1e3a8a;
    --bg-header: #1e3a8a;
    --bg-footer: #1e3a8a;
    --text-main: #0f172a;
    --text-invert: #ffffff;
    --link-color: #bfdbfe;
    --accent-color: #2563eb;
    --hover-bg: rgba(255, 255, 255, 0.1);
}

body.theme-green {
    --bg-main: #f0fdf4;
    --bg-sidebar: #064e3b;
    --bg-header: #065f46;
    --bg-footer: #065f46;
    --text-main: #064e3b;
    --text-invert: #ffffff;
    --link-color: #d1fae5;
    --accent-color: #10b981;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-purple {
    --bg-main: #faf5ff;
    --bg-sidebar: #2e1065;
    --bg-header: #4c1d95;
    --bg-footer: #4c1d95;
    --text-main: #2e1065;
    --text-invert: #ffffff;
    --link-color: #e9d5ff;
    --accent-color: #8b5cf6;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-orange {
    --bg-main: #fff7ed;
    --bg-sidebar: #7c2d12;
    --bg-header: #9a3412;
    --bg-footer: #9a3412;
    --text-main: #7c2d12;
    --text-invert: #ffffff;
    --link-color: #fed7aa;
    --accent-color: #f97316;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-red {
    --bg-main: #fef2f2;
    --bg-sidebar: #7f1d1d;
    --bg-header: #991b1b;
    --bg-footer: #991b1b;
    --text-main: #7f1d1d;
    --text-invert: #ffffff;
    --link-color: #fecaca;
    --accent-color: #ef4444;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-teal {
    --bg-main: #f0fdfa;
    --bg-sidebar: #134e4a;
    --bg-header: #115e59;
    --bg-footer: #115e59;
    --text-main: #134e4a;
    --text-invert: #ffffff;
    --link-color: #ccfbf1;
    --accent-color: #14b8a6;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-pink {
    --bg-main: #fdf2f8;
    --bg-sidebar: #831843;
    --bg-header: #9d174d;
    --bg-footer: #9d174d;
    --text-main: #831843;
    --text-invert: #ffffff;
    --link-color: #fbcfe8;
    --accent-color: #ec4899;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-yellow {
    --bg-main: #fefce8;
    --bg-sidebar: #713f12;
    --bg-header: #854d0e;
    --bg-footer: #854d0e;
    --text-main: #713f12;
    --text-invert: #ffffff;
    --link-color: #fef3c7;
    --accent-color: #eab308;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-slate {
    --bg-main: #f8fafc;
    --bg-sidebar: #020617;
    --bg-header: #020617;
    --bg-footer: #020617;
    --text-main: #020617;
    --text-invert: #ffffff;
    --link-color: #cbd5f5;
    --accent-color: #64748b;
    --hover-bg: rgba(255, 255, 255, 0.08);
}

body.theme-cyan {
    --bg-main: #ecfeff;
    --bg-sidebar: #083344;
    --bg-header: #0e7490;
    --bg-footer: #0e7490;
    --text-main: #083344;
    --text-invert: #ffffff;
    --link-color: #cffafe;
    --accent-color: #06b6d4;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

body.theme-brown {
    --bg-main: #fefaf6;
    --bg-sidebar: #3f2d20;
    --bg-header: #4e342e;
    --bg-footer: #4e342e;
    --text-main: #3f2d20;
    --text-invert: #ffffff;
    --link-color: #e7d7c9;
    --accent-color: #a47148;
    --hover-bg: rgba(255, 255, 255, 0.12);
}

/* ======================================================
   CORE STRUCTURE (Fixed Sandwich)
====================================================== */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

body {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
    display: flex !important;
    flex-direction: column !important;
}

.header {
    height: 55px !important;
    background: var(--bg-header) !important;
    color: var(--text-invert) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1000;
    overflow: visible !important;
    /* Dropdowns will be hidden if this is 'hidden' */
    z-index: 1050;
    /* Ensures menu stays above the sidebar */
}

.footer {
    height: 40px !important;
    background: var(--bg-footer) !important;
    color: var(--text-invert) !important;
    flex-shrink: 0 !important;
    z-index: 1000;
}

.app-wrapper {
    display: flex !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.sidebar {
    width: 230px !important;
    background: var(--bg-sidebar) !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
}

.content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    background: var(--bg-main) !important;
}

/* Sidebar Links */
.sidebar a {
    color: var(--link-color) !important;
    text-decoration: none;
    padding: 12px;
    display: block;
}

.sidebar a:hover {
    background: var(--hover-bg) !important;
}

/* Theme Selector Styling */
.theme-select {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ======================================================
   SIDEBAR MENU STYLING (Repair Shop ERP)
====================================================== */
.sidebar-links-wrapper {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin: 4px 12px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--link-color) !important;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Hover and Active states using your theme's accent color */
.sidebar-menu a:hover {
    background: var(--hover-bg) !important;
    color: var(--text-invert) !important;
}

.sidebar-menu a.active {
    background: var(--accent-color) !important;
    color: #fff !important;
    font-weight: 600;
}

.sidebar-menu i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Mobile Close Button styling */
.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* ======================================================
   LOGO: FONT BORDER & THEME SYNC
====================================================== */
.header-logo {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.logo-icon {
    color: var(--text-invert) !important;
    font-size: 1.4rem;
    margin-right: 5px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.1));
}

.logo-text {
    color: transparent !important;
    /* This creates the font border */
    -webkit-text-stroke: 1.2px var(--text-invert);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Hover effect: Logo fills in with color */
.header-logo:hover .logo-text {
    color: var(--text-invert) !important;
    -webkit-text-stroke: 1.2px transparent;
}

/* ======================================================
   ACCOUNT: DROPDOWN & BUTTON THEME
====================================================== */
.account-theme-btn {
    background-color: var(--bg-header) !important;
    color: var(--text-invert) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.2s ease;
}

.account-theme-btn:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--accent-color) !important;
}

.account-icon {
    color: var(--accent-color) !important;
    font-size: 1.1rem;
}

/* The Dropdown Menu List */
.account-theme-menu {
    background-color: var(--bg-header) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 2000 !important;
    /* Ensures it is above everything */
}

.account-theme-menu .dropdown-item {
    color: var(--text-invert) !important;
    padding: 10px 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.account-theme-menu .dropdown-item:hover {
    background-color: var(--hover-bg) !important;
    color: var(--accent-color) !important;
}

/* Red text specifically for logout icon */
.account-theme-menu .text-danger i {
    color: #ef4444 !important;
}

/* ======================================================
   RESPONSIVE SIDEBAR (Mobile View/Hide)
====================================================== */

/* Desktop: Always show and maintain width */
@media (min-width: 768px) {
    .sidebar {
        display: block !important;
        width: 230px !important;
    }

    .sidebar-menu {
        display: block !important;
    }
}

/* style.css */

/* The Overlay: Hidden by default */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    z-index: 1030;
    /* Just below the sidebar */
}

@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        top: 0;
        /* Full height on mobile */
        left: -260px;
        /* Fully hidden */
        height: 100vh;
        width: 260px !important;
        z-index: 1040;
        transition: all 0.3s ease-in-out;
        background: var(--bg-sidebar) !important;
        display: block !important;
    }

    /* When Sidebar is OPEN */
    #sidebar.open {
        left: 0 !important;
    }

    /* When Sidebar is OPEN, show the overlay */
    #sidebar.open~.sidebar-overlay {
        display: block;
    }
}

.nav-link {
    transition: 0.2s;
    padding: 0.8rem 1rem;
    display: block;
    text-decoration: none;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.nav-link.active {
    font-weight: bold;
}