body {
    font-family: var(--app-font-body, "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif);
    transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Control ad placement */
.google-auto-placed { margin: 0 !important; padding: 0 !important; height: auto !important; }
.google-auto-placed:first-child, body > .google-auto-placed, .main-content > div > .google-auto-placed:first-child, .container > .google-auto-placed:first-child { display: none !important; }
.ad-container { clear: both; text-align: center; margin: 10px 0; }
[style*="margin: 20px auto 10px"] { margin: 0 !important; }
.main-content > .container > div:first-child .google-auto-placed, .main-content > .container > .google-auto-placed:first-child { display: none !important; }

/* SCROLLING TEXT */
.scrolling-text-container { width: 100%; overflow: hidden; position: relative; }
.scrolling-text { display: inline-block; animation: scroll-text 6s linear infinite; animation-delay: 2s; }
.scrolling-text:hover { animation-play-state: paused; }
@keyframes scroll-text {
    0% { transform: translateX(0); }
    25% { transform: translateX(0); }
    75% { transform: translateX(calc(-100% + 200px)); }
    100% { transform: translateX(calc(-100% + 200px)); }
}

/* SIDEBAR STYLES */
:root {
    --sidebar-width: 16rem;
    --sidebar-collapsed-width: 5rem;
}

#sidebar {
    width: var(--sidebar-width);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 35%, #ffffff 100%);
    border-right: 1px solid #e2e8f0;
    box-shadow: 8px 0 30px rgba(15, 23, 42, 0.04);
}

#sidebar .nav-item {
    margin: 0.1rem 0.55rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    border-right-width: 0 !important;
    padding: 0.68rem 0.9rem !important;
    transition: all 0.2s ease;
}

#sidebar .nav-item:hover {
    transform: translateX(2px);
    background: #ffffff !important;
    border-color: #e2e8f0;
}

#sidebar .nav-item.border-blue-600 {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 1px 0 rgba(59, 130, 246, 0.08);
}

#sidebar .nav-item.border-red-600 {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

#sidebar .nav-section-title {
    margin: 0.7rem 0.95rem 0.25rem;
    padding: 0;
    color: #94a3b8 !important;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 700;
}

#sidebar .nav-icon {
    color: inherit;
}

#sidebar .nav-item .nav-label {
    text-overflow: ellipsis;
}

/* Collapsed State */
body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed #sidebar .nav-label,
body.sidebar-collapsed #sidebar .nav-section-title,
body.sidebar-collapsed #sidebar .sidebar-logo-text {
    display: none;
    opacity: 0;
    width: 0;
}

body.sidebar-collapsed #sidebar .nav-item {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

body.sidebar-collapsed #sidebar .nav-icon {
    margin-right: 0;
    width: 1.5rem; /* 6 */
    height: 1.5rem; /* 6 */
}

/* Hover Expansion (Overlay) */
body.sidebar-collapsed #sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

body.sidebar-collapsed #sidebar:hover .nav-label,
body.sidebar-collapsed #sidebar:hover .nav-section-title,
body.sidebar-collapsed #sidebar:hover .sidebar-logo-text {
    display: block;
    opacity: 1;
    width: auto;
    animation: fadeIn 0.2s ease-in;
}

body.sidebar-collapsed #sidebar:hover .nav-item {
    justify-content: flex-start;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
}

body.sidebar-collapsed #sidebar:hover .nav-icon {
    margin-right: 0.75rem; /* mr-3 equivalent */
}

/* Hide tooltips when expanded via hover */
body.sidebar-collapsed #sidebar:hover .nav-tooltip {
    display: none !important;
    visibility: hidden !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Main Content Transition */
.main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Tooltips */
.nav-tooltip {
    position: absolute;
    left: 100%; /* Position right of the icon */
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background-color: #1f2937; /* gray-800 */
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    visibility: hidden;
}

.nav-tooltip::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: transparent #1f2937 transparent transparent;
}

/* Only show tooltips when collapsed AND not hovered (hover expands sidebar) */
body.sidebar-collapsed #sidebar:not(:hover) .nav-item:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(6px); /* Slide in slightly */
}

/* Only show tooltips when collapsed */
body:not(.sidebar-collapsed) .nav-tooltip {
    display: none !important;
}

/* Mobile specific styles */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        width: var(--sidebar-width) !important; /* Always full width on mobile when open */
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    #sidebar .nav-item {
        margin-left: 0.65rem;
        margin-right: 0.65rem;
    }

/* Enforce full sidebar content on mobile regardless of desktop collapsed state */
    #sidebar .nav-section-title, 
    #sidebar .nav-label,
    body.sidebar-collapsed #sidebar .nav-section-title,
    body.sidebar-collapsed #sidebar .nav-label,
    #sidebar .sidebar-logo-text,
    body.sidebar-collapsed #sidebar .sidebar-logo-text {
        display: block !important; /* Force show text on mobile */
        opacity: 1 !important;
        width: auto !important;
    }

/* Force left alignment and standard padding on mobile */
    body.sidebar-collapsed #sidebar .nav-item {
        justify-content: flex-start !important;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    body.sidebar-collapsed #sidebar .nav-icon {
        margin-right: 0.75rem !important;
    }

    body.mobile-sidebar-open #sidebar {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    #mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 40;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    body.mobile-sidebar-open #mobile-overlay {
        display: block; /* Fallback */
    }
    
    body.mobile-sidebar-open #mobile-overlay {
        opacity: 1;
    }
}