/* CRITICAL TailAdmin CSS - Inline to bypass compilation issues */

/* NUCLEAR OPTION: Force all layout fixes with maximum specificity */

/* 1. SIDEBAR WIDTH FIXES - Target TailAdmin classes */
html body .mc-main .sidebar.xl\:w-\[90px\],
html body .mc-main aside.sidebar.xl\:w-\[90px\],
html body .mc-main .sidebar.collapsed,
html body .mc-main aside.sidebar.collapsed {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    flex-basis: 90px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

html body .mc-main .sidebar.w-\[290px\],
html body .mc-main aside.sidebar.w-\[290px\],
html body .mc-main .sidebar:not(.collapsed):not(.xl\:w-\[90px\]),
html body .mc-main aside.sidebar:not(.collapsed):not(.xl\:w-\[90px\]) {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex-basis: 256px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* 2. MOBILE MARGIN FIXES - ULTRA AGGRESSIVE */
@media (max-width: 1279px) {
    html body div.mc-main div.main-content,
    html body div.mc-main div.main-content.collapsed,
    html body div.mc-main .main-content,
    html body div.mc-main .main-content.collapsed,
    html body .mc-main div.main-content,
    html body .mc-main div.main-content.collapsed,
    html body .mc-main .main-content,
    html body .mc-main .main-content.collapsed,
    .mc-main .main-content,
    .mc-main .main-content.collapsed,
    .main-content,
    .main-content.collapsed {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .sidebar {
        position: fixed !important;
        transform: translateX(-100%) !important;
        z-index: 9999 !important;
    }

    .sidebar.translate-x-0 {
        transform: translateX(0) !important;
    }
}

/* 3. DESKTOP LAYOUT FIXES - NO MARGINS, USE FLEX */
@media (min-width: 1280px) {
    /* Remove all margins - let flex layout handle positioning */
    html body .mc-main .main-content,
    html body .mc-main .main-content.collapsed,
    html body .mc-main .main-content:not(.collapsed) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sidebar {
        position: static !important;
        transform: translateX(0) !important;
    }

    /* Ensure proper flex layout */
    .flex.h-screen.overflow-hidden {
        gap: 0 !important;
    }

    /* Remove sidebar padding that creates gaps */
    .sidebar {
        padding-left: 1.25rem !important;
        padding-right: 0 !important;
    }

    /* Ensure main content is flush with sidebar */
    .main-content {
        border-left: none !important;
        margin-left: 0 !important;
    }

    /* Remove any box shadows or borders that create visual gaps */
    .sidebar {
        box-shadow: none !important;
    }

    .main-content {
        box-shadow: none !important;
    }
}

/* 4. OVERLAY FIXES - MOBILE ONLY */
.fixed.z-50.h-screen.w-full.bg-gray-900\/50 {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* CRITICAL: Ensure overlay is NEVER shown on desktop */
@media (min-width: 1280px) {
    .fixed.z-50.h-screen.w-full.bg-gray-900\/50 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Mobile overlay behavior */
@media (max-width: 1279px) {
    .fixed.z-50.h-screen.w-full.bg-gray-900\/50.block {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* 5. COLLAPSED STATE TEXT HIDING - Target TailAdmin classes */
.sidebar.collapsed .menu-item-text,
.sidebar.collapsed .menu-group-title,
.sidebar.collapsed .logo,
.sidebar.xl\:w-\[90px\] .menu-item-text,
.sidebar.xl\:w-\[90px\] .menu-group-title,
.sidebar.xl\:w-\[90px\] .logo {
    display: none !important;
}

.sidebar.collapsed .logo-icon,
.sidebar.xl\:w-\[90px\] .logo-icon {
    display: block !important;
}

/* 6. FORCE PROPER BOX SIZING */
.sidebar,
.sidebar *,
.main-content,
.main-content * {
    box-sizing: border-box !important;
}

/* 7. REMOVE OLD ADMIN CONFLICTS */
.mc-admin.mc-admin {
    position: static !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    background: transparent !important;
}

.mc-admin > .mc-header {
    display: none !important;
}

/* 7.1. PAGE WRAPPER FIXES */
.flex.h-screen.overflow-hidden {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100vh !important;
}

/* 7.2. BODY AND HTML FIXES */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* 12. MODERN HEADER INTEGRATION WITH TAILADMIN */
.mc-top-header {
    background: #fff !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    /* CRITICAL: No margin/padding that separates from sidebar */
    margin: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure modern header toggle button works with our Alpine.js */
.mc-sidebar-toggle {
    cursor: pointer !important;
}

.mc-sidebar-toggle:hover {
    background: rgba(234, 115, 81, 0.1) !important;
    color: #ea7351 !important;
}

/* Modern header responsive behavior */
@media (max-width: 1279px) {
    .mc-top-header .mc-header-content {
        padding: 0 16px !important;
    }
}

@media (min-width: 1280px) {
    .mc-top-header .mc-header-content {
        padding: 0 24px !important;
    }
}

/* 8. CONTENT AREA DISPLAY FIXES */
.mc-area-conversations,
.mc-area-users,
.mc-area-chatbot,
.mc-area-articles,
.mc-area-reports,
.mc-area-settings {
    display: none !important;
}

.mc-area-conversations.mc-active,
.mc-area-users.mc-active,
.mc-area-chatbot.mc-active,
.mc-area-articles.mc-active,
.mc-area-reports.mc-active,
.mc-area-settings.mc-active {
    display: block !important;
}

/* 9. NAVIGATION ACTIVE STATE STYLING - CRITICAL FIX */
.sidebar .menu-item.mc-active,
.mc-admin-nav a.mc-active {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(234, 115, 81, 0.3) !important;
    /* Remove any transition that might cause blue flash */
    transition: none !important;
}

/* Account dropdown active state styling */
.sidebar .menu-item-dropdown:has(.submenu .menu-item.mc-active) > a,
.sidebar .menu-item-dropdown:has(.submenu .menu-item.menu-item-active) > a {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(234, 115, 81, 0.3) !important;
    transition: none !important;
}

.sidebar .menu-item-dropdown:has(.submenu .menu-item.mc-active) > a .menu-item-icon,
.sidebar .menu-item-dropdown:has(.submenu .menu-item.menu-item-active) > a .menu-item-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.sidebar .menu-item-dropdown:has(.submenu .menu-item.mc-active) > a .menu-item-text,
.sidebar .menu-item-dropdown:has(.submenu .menu-item.menu-item-active) > a .menu-item-text {
    color: #ffffff !important;
}

/* Fallback for browsers that don't support :has() pseudo-class */
.sidebar .menu-item-dropdown.mc-account-dropdown-active > a {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(234, 115, 81, 0.3) !important;
    transition: none !important;
}

.sidebar .menu-item-dropdown.mc-account-dropdown-active > a .menu-item-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.sidebar .menu-item-dropdown.mc-account-dropdown-active > a .menu-item-text {
    color: #ffffff !important;
}

.sidebar .menu-item.mc-active::before,
.mc-admin-nav a.mc-active::before {
    content: '' !important;
    position: absolute !important;
    left: -1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 60% !important;
    background: #E03274 !important;
    border-radius: 0 4px 4px 0 !important;
}

.sidebar .menu-item.mc-active .menu-item-icon,
.mc-admin-nav a.mc-active .menu-item-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.sidebar .menu-item.mc-active .menu-item-text,
.mc-admin-nav a.mc-active .menu-item-text {
    color: #ffffff !important;
}

/* Ensure inactive items have proper styling - NO BLUE */
.sidebar .menu-item:not(.mc-active),
.mc-admin-nav a:not(.mc-active) {
    background-color: transparent !important;
    color: #6b7280 !important;
    /* Remove any transition that might cause blue flash */
    transition: none !important;
}

.sidebar .menu-item:not(.mc-active):hover,
.mc-admin-nav a:not(.mc-active):hover {
    background-color: rgba(234, 115, 81, 0.1) !important;
    color: #ea7351 !important;
    transform: translateX(4px) !important;
}

.dark .sidebar .menu-item:not(.mc-active):hover,
.dark .mc-admin-nav a:not(.mc-active):hover {
    background-color: rgba(234, 115, 81, 0.15) !important;
    color: #ea7351 !important;
}

.dark .sidebar .menu-item.mc-active,
.dark .mc-admin-nav a.mc-active {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
}

.dark .sidebar .menu-item:not(.mc-active),
.dark .mc-admin-nav a:not(.mc-active) {
    color: #9ca3af !important;
}

/* Remove any potential blue background references */
.sidebar .menu-item,
.mc-admin-nav a {
    /* Ensure no blue backgrounds can appear */
    background-color: transparent !important;
}

/* Prevent any transition conflicts during state changes */
.sidebar .menu-item,
.sidebar .menu-item *,
.mc-admin-nav a,
.mc-admin-nav a * {
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* 10. HEADER POSITIONING FIXES - CRITICAL */
@media (min-width: 1280px) {
    /* Remove header border on desktop when sidebar is present */
    .main-content header {
        border-left: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
        top: 0 !important;
    }

    /* Ensure header content aligns properly */
    .main-content header > div {
        padding-left: 0 !important;
    }

    /* Remove any gaps in the flex layout */
    .main-content {
        gap: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure header sticks to top without gap */
    .main-content header.sticky {
        position: sticky !important;
        top: 0 !important;
        margin-top: 0 !important;
        z-index: 99999 !important;
    }
}

/* 11. MOBILE HEADER ADJUSTMENTS - FIX OVERLAP */
@media (max-width: 1279px) {
    .main-content header {
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        top: 0 !important;
        height: auto !important;
    }

    .main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure proper sticky behavior on mobile */
    .main-content header.sticky {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
    }

    /* CRITICAL: Add top padding to content to prevent header overlap */
    .main-content > div:not(.fixed):not(header) {
        padding-top: 80px !important;
    }

    /* Alternative: Add margin to first content element after header */
    .main-content header + * {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    /* Ensure content areas have proper spacing */
    .mc-area-conversations,
    .mc-area-users,
    .mc-area-chatbot,
    .mc-area-articles,
    .mc-area-reports,
    .mc-area-settings {
        padding-top: 20px !important;
        margin-top: 0 !important;
    }
}

/* NUCLEAR OPTION: MAKE ALL INPUT BORDERS NORMAL COLORS */
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="number"],
html body input[type="url"],
html body textarea,
html body select,
html body .mc-setting input,
html body .mc-setting textarea,
html body .mc-setting select,
html body .mc-search-input,
html body .mc-area-settings .mc-search-btn > input,
html body .mc-top-header .mc-header-search .mc-search-input {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: white !important;
    transition: none !important;
}

html body input[type="text"]:focus,
html body input[type="password"]:focus,
html body input[type="email"]:focus,
html body input[type="number"]:focus,
html body input[type="url"]:focus,
html body textarea:focus,
html body select:focus,
html body .mc-setting input:focus,
html body .mc-setting textarea:focus,
html body .mc-setting select:focus,
html body .mc-search-input:focus,
html body .mc-area-settings .mc-search-btn > input:focus,
html body .mc-top-header .mc-header-search .mc-search-input:focus {
    outline: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    background: white !important;
}

html body input[type="text"]:hover,
html body input[type="password"]:hover,
html body input[type="email"]:hover,
html body input[type="number"]:hover,
html body input[type="url"]:hover,
html body textarea:hover,
html body select:hover,
html body .mc-setting input:hover,
html body .mc-setting textarea:hover,
html body .mc-setting select:hover,
html body .mc-search-input:hover,
html body .mc-area-settings .mc-search-btn > input:hover,
html body .mc-top-header .mc-header-search .mc-search-input:hover {
    border: 1px solid #9ca3af !important;
    box-shadow: none !important;
    background: white !important;
}

/* 9. NAVIGATION ACTIVE STATE STYLING - CRITICAL FIX */
.sidebar .menu-item.mc-active,
.mc-admin-nav a.mc-active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
}

.sidebar .menu-item.mc-active .menu-item-icon,
.mc-admin-nav a.mc-active .menu-item-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.sidebar .menu-item.mc-active .menu-item-text,
.mc-admin-nav a.mc-active .menu-item-text {
    color: #ffffff !important;
}

/* Ensure inactive items have proper styling */
.sidebar .menu-item:not(.mc-active),
.mc-admin-nav a:not(.mc-active) {
    background-color: transparent !important;
    color: #6b7280 !important;
}

/* Standard hover styling for all menu items - orange accent */
.sidebar .menu-item:not(.mc-active):hover,
.mc-admin-nav a:not(.mc-active):hover {
    background-color: rgba(234, 115, 81, 0.1) !important;
    color: #ea7351 !important;
    transform: translateX(4px) !important;
}

.dark .sidebar .menu-item:not(.mc-active):hover,
.dark .mc-admin-nav a:not(.mc-active):hover {
    background-color: rgba(234, 115, 81, 0.15) !important;
    color: #ea7351 !important;
    transform: translateX(4px) !important;
}

/* Ensure icon and text colors on hover match standard */
.sidebar .menu-item:hover .menu-item-icon,
.sidebar .menu-item:hover .menu-item-text {
    color: #ea7351 !important;
    fill: #ea7351 !important;
}

.dark .sidebar .menu-item:hover .menu-item-icon,
.dark .sidebar .menu-item:hover .menu-item-text {
    color: #ea7351 !important;
    fill: #ea7351 !important;
}

/* CRITICAL FIX: Active menu item hover styling - ensure text and icons stay white */
.sidebar .menu-item.mc-active:hover,
.mc-admin-nav a.mc-active:hover {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
}

.sidebar .menu-item.mc-active:hover .menu-item-icon,
.sidebar .menu-item.mc-active:hover .menu-item-text,
.mc-admin-nav a.mc-active:hover .menu-item-icon,
.mc-admin-nav a.mc-active:hover .menu-item-text {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Dark mode active menu item hover styling */
.dark .sidebar .menu-item.mc-active:hover,
.dark .mc-admin-nav a.mc-active:hover {
    background: linear-gradient(135deg, #ea7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
}

.dark .sidebar .menu-item.mc-active:hover .menu-item-icon,
.dark .sidebar .menu-item.mc-active:hover .menu-item-text,
.dark .mc-admin-nav a.mc-active:hover .menu-item-icon,
.dark .mc-admin-nav a.mc-active:hover .menu-item-text {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Submenu active item hover styling */
.sidebar .menu-item.mc-active .submenu .menu-item:hover,
.sidebar .menu-item.mc-active .submenu .menu-item:hover .menu-item-icon,
.sidebar .menu-item.mc-active .submenu .menu-item:hover .menu-item-text {
    background-color: rgba(234, 115, 81, 0.2) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* Remove debug borders - layout is now working */

/* CRITICAL FIX: Navigation Icon Display Issues */
.menu-item svg {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
}

.menu-item-icon {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
}

/* Ensure no text content leaks from SVG paths */
.menu-item svg path {
    pointer-events: none !important;
}

/* Fix any font-family conflicts that might render SVG as text */
.menu-item svg {
    font-family: inherit !important;
}

/* AGGRESSIVE FIX: Force clean icon display */
.menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.menu-item-icon {
    display: block !important;
    flex-shrink: 0 !important;
}

.menu-item-text {
    display: block !important;
    flex-grow: 1 !important;
}

/* Hide any pseudo-elements that might be adding content */
.menu-item::before,
.menu-item::after,
.menu-item-icon::before,
.menu-item-icon::after {
    display: none !important;
    content: none !important;
}

/* CRITICAL FIX: Content Area Display Issues */
/* Ensure content areas are hidden by default */
.mc-area-conversations,
.mc-area-users,
.mc-area-chatbot,
.mc-area-articles,
.mc-area-reports,
.mc-area-settings {
    display: none !important;
}

/* Show active content areas */
.mc-area-conversations.mc-active,
.mc-area-users.mc-active,
.mc-area-chatbot.mc-active,
.mc-area-articles.mc-active,
.mc-area-reports.mc-active,
.mc-area-settings.mc-active {
    display: block !important;
}

/* CSS Overrides for TailAdmin Layout - CRITICAL FIXES */
.mc-admin.mc-admin {
    position: static !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: auto !important;
    background: transparent !important;
}

/* Disable old header completely */
.mc-admin > .mc-header {
    display: none !important;
}

/* Override responsive mobile styles that break TailAdmin */
.mc-admin > main {
    padding-top: 0 !important;
}

/* Ensure page wrapper works correctly */
.flex.h-screen.overflow-hidden {
    display: flex !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Force sidebar to work correctly - Override responsive-admin.css */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 290px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background-color: white !important;
    border-right: 1px solid rgb(229 231 235) !important;
    padding: 0 1.25rem !important;
    /* REMOVE TRANSITIONS - they interfere with width changes */
    transition: transform 0.3s ease !important;
    transform: translateX(-100%) !important;
}

/* Desktop sidebar behavior - Fix responsive breakpoint mismatch */
@media (min-width: 1280px) {
    .sidebar {
        position: static !important;
        transform: translateX(0) !important;
    }

    /* Fix main content margin to match sidebar breakpoint */
    .main-content {
        margin-left: 290px !important;
    }

    .main-content.collapsed {
        margin-left: 90px !important;
    }
}

/* Mobile sidebar behavior - CRITICAL FIX */
@media (max-width: 1279px) {
    .sidebar {
        position: fixed !important;
        transform: translateX(-100%) !important;
        z-index: 9999 !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
    }

    .sidebar.translate-x-0 {
        transform: translateX(0) !important;
    }

    /* CRITICAL FIX: Remove margin on mobile/tablet with NUCLEAR specificity */
    html body .mc-main .main-content,
    html body .mc-main .main-content.collapsed,
    html body .mc-main div.main-content,
    html body .mc-main div.main-content.collapsed,
    html body div.mc-main .main-content,
    html body div.mc-main .main-content.collapsed,
    .mc-main .main-content,
    .mc-main .main-content.collapsed,
    .main-content,
    .main-content.collapsed {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure sidebar doesn't disappear, just moves off-screen */
    .sidebar {
        display: flex !important;
        visibility: visible !important;
    }

    /* MOBILE SIDEBAR PUSH FIX */
    .main-content {
        transition: transform 0.3s ease-in-out !important;
    }
    .main-content.sidebar-open-mobile {
        transform: translateX(90px) !important;
    }
}

/* Content area fixes */
.relative.flex.flex-1.flex-col.overflow-y-auto.overflow-x-hidden {
    position: relative !important;
    display: flex !important;
    flex: 1 1 0% !important;
    flex-direction: column !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

/* Fix box-sizing for TailAdmin elements */
.sidebar,
.sidebar *,
header,
header *,
.flex,
.flex * {
    box-sizing: border-box !important;
}

/* TailAdmin Utility Classes */
.flex { display: flex; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.fixed { position: fixed; }
.z-50 { z-index: 50; }
.z-99999 { z-index: 99999; }
.z-9999 { z-index: 9999; }
.bg-gray-900\/50 { background-color: rgba(17, 24, 39, 0.5); }
.hidden { display: none; }
.block { display: block; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.w-full { width: 100%; }
.border-gray-200 { border-color: rgb(229 231 235); }
.bg-white { background-color: white; }
.border-b { border-bottom-width: 1px; }
.grow { flex-grow: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.gap-4 { gap: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.border-b-0 { border-bottom-width: 0; }
.h-10 { height: 2.5rem; }
.w-10 { width: 2.5rem; }
.h-11 { height: 2.75rem; }
.w-11 { width: 2.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.text-gray-500 { color: rgb(107 114 128); }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-screen-2xl { max-width: 1536px; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\:gap-4 { gap: 1rem; }
}

@media (min-width: 768px) {
    .md\:p-6 { padding: 1.5rem; }
}

@media (min-width: 1024px) {
    .lg\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
}

@media (min-width: 1280px) {
    .xl\:flex-row { flex-direction: row; }
    .xl\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .xl\:justify-normal { justify-content: normal; }
    .xl\:border-b-0 { border-bottom-width: 0; }
    .xl\:px-0 { padding-left: 0; padding-right: 0; }
    .xl\:h-11 { height: 2.75rem; }
    .xl\:w-11 { width: 2.75rem; }
    .xl\:border { border-width: 1px; }
    .xl\:block { display: block; }
    .xl\:hidden { display: none; }
    .xl\:static { position: static; }
    .xl\:translate-x-0 { transform: translateX(0); }

    /* Sidebar collapsed width - CRITICAL FIX */
    .sidebar.collapsed {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    /* Sidebar expanded state on desktop */
    .sidebar {
        position: static !important;
        transform: translateX(0) !important;
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;
    }
}

/* Mobile sidebar behavior */
@media (max-width: 1279px) {
    .sidebar { position: fixed !important; transform: translateX(-100%) !important; }
    .sidebar.translate-x-0 { transform: translateX(0) !important; }
}

/* Fix Alpine.js responsive classes */
.sidebar .xl\:hidden { display: none; }

@media (min-width: 1280px) {
    .sidebar.xl\:w-\[90px\] .xl\:hidden { display: none !important; }
    .sidebar.xl\:w-\[90px\] .xl\:block { display: block !important; }
}

/* Collapsed state text hiding - CRITICAL FIX */
.sidebar.collapsed .menu-item-text,
.sidebar.collapsed .menu-group-title,
.sidebar.collapsed .logo {
    display: none !important;
}

.sidebar.collapsed .logo-icon {
    display: block !important;
}

/* AGGRESSIVE SIDEBAR WIDTH FIX - Maximum Specificity */
.mc-main .sidebar.sidebar.collapsed {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    flex-basis: 90px !important;
}

.mc-main .sidebar.sidebar:not(.collapsed) {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex-basis: 256px !important;
}

/* Override any conflicting TailAdmin or modern-header CSS */
.sidebar[class*="collapsed"] {
    width: 90px !important;
}

.sidebar:not([class*="collapsed"]) {
    width: 290px !important;
}

/* NUCLEAR OPTION: Force sidebar width with highest possible specificity */
html body .mc-main .sidebar.collapsed,
html body .mc-main aside.sidebar.collapsed {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    flex-basis: 90px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

html body .mc-main .sidebar:not(.collapsed),
html body .mc-main aside.sidebar:not(.collapsed) {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex-basis: 256px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Ensure inner tab panels have individual scroll */
.mc-area-articles.mc-active > .mc-tab.mc-inner-tab,
.mc-area-conversations.mc-active > .mc-tab.mc-inner-tab,
.mc-area-users.mc-active > .mc-tab.mc-inner-tab,
.mc-area-chatbot.mc-active > .mc-tab.mc-inner-tab,
.mc-area-reports.mc-active > .mc-tab.mc-inner-tab,
.mc-area-settings.mc-active > .mc-tab.mc-inner-tab {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}

/* Specific for articles inner tab */
body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main > div > div.mc-area-articles.mc-active > div.mc-tab.mc-inner-tab {
    overflow-y: auto !important;
    height: calc(100vh - 120px) !important; /* Adjust based on header heights */
}

/* Specific for settings tab - ensure individual scroll without page movement */
body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main > div > div.mc-area-settings.mc-active > div.mc-tab {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    position: relative !important;
}

/* General rule for all panels to have individual scroll - covers .mc-tab without .mc-inner-tab */
.mc-area-conversations.mc-active > div.mc-tab,
.mc-area-users.mc-active > div.mc-tab,
.mc-area-chatbot.mc-active > div.mc-tab,
.mc-area-articles.mc-active > div.mc-tab,
.mc-area-reports.mc-active > div.mc-tab,
.mc-area-settings.mc-active > div.mc-tab {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    position: relative !important;
}

/* Reinforce no page scroll - ensure parent containers do not overflow */
body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden {
    overflow: hidden !important;
    height: 100vh !important;
}

body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main > div {
    overflow: hidden !important;
    height: calc(100vh - 80px) !important; /* Adjust for header */
    display: flex !important;
    flex-direction: column !important;
}

body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main > div > div.mc-area-settings.mc-active {
    flex: 1 !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important; /* Tiny gaps between area header, nav, and content panels */
}

/* White backgrounds for the 3 sections: area header, nav, and content panels */
.mc-area-settings.mc-active > header,
.mc-area-settings.mc-active > nav,
.mc-area-settings.mc-active > .mc-tab {
    background: white !important;
    border-radius: 0.25rem !important;
}

/* Dark mode for the 3 sections */
.dark .mc-area-settings.mc-active > header,
.dark .mc-area-settings.mc-active > nav,
.dark .mc-area-settings.mc-active > .mc-tab {
    background: #1f2937 !important;
}

/* Add tiny gaps between area header, nav, and content panels in settings */
.mc-area-settings.mc-active {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

/* White backgrounds for the 3 sections: area header, nav, and content panels */
.mc-area-settings.mc-active > header,
.mc-area-settings.mc-active > nav,
.mc-area-settings.mc-active > .mc-tab {
    background: white !important;
    border-radius: 0.25rem !important;
}

/* Dark mode for the 3 sections */
.dark .mc-area-settings.mc-active > header,
.dark .mc-area-settings.mc-active > nav,
.dark .mc-area-settings.mc-active > .mc-tab {
    background: #1f2937 !important;
}

/* Removed conflicting 2-column grid styles - now handled in tailadmin-settings-adapter.css */

/* SETTINGS ADAPTER BOTTOM MARGINS AND PADDING OVERRIDES - CRITICAL HEIGHT FIXES */
/* Override settings adapter bottom margins and padding that prevent proper height filling */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active > div.mc-tab > div.mc-content.mc-scroll-area {
    padding: 0.125rem !important;
    margin-bottom: 0 !important;
}

html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active > div.mc-tab > div.mc-content.mc-scroll-area > div.mc-active > .mc-setting {
    margin-bottom: 0 !important;
}

html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active > div.mc-tab > div.mc-content.mc-scroll-area .repeater-item {
    margin-bottom: 0 !important;
}

/* Override the conflicting max-height rule in settings adapter */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active > div.mc-tab > div.mc-content.mc-scroll-area {
    max-height: none !important;
}

/* MAIN CONTENT AREA HEIGHT FIX - Proper viewport containment */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main {
    height: calc(100vh - 65px) !important; /* Account for header */
    max-height: calc(100vh - 65px) !important; /* Prevent overflow */
    overflow: hidden !important;
    display: block !important;
    flex: none !important;
    /* CRITICAL: Remove all spacing that causes gaps */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* CRITICAL: Container for absolute children */
    position: relative !important;
    /* CRITICAL: Respect viewport boundaries */
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* CRITICAL: Even tinier gap from sidebar */
    margin-left: 0.125rem !important;
}

/* FIX THE PARENT DIV CONTAINER - Proper containment */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div {
    height: calc(100vh - 65px) !important; /* Match main element */
    max-height: calc(100vh - 65px) !important; /* Prevent overflow */
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* CRITICAL: No left padding (direct connection to orange) */
    padding-left: 0 !important;
    /* CRITICAL: Even tinier bottom padding */
    padding-bottom: 0.125rem !important;
}

/* TARGETED FIX: Active area must fit within main container */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active {
    height: calc(100% - 4px) !important; /* Fill parent main element with tiny buffer */
    max-height: calc(100% - 4px) !important; /* Prevent overflow */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* CRITICAL: No spacing that creates gaps */
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    /* CRITICAL: Fit within container */
    position: absolute !important;
    top: 2px !important;
    bottom: 2px !important;
    left: 2px !important;
    right: 2px !important;
}

/* MC-TAB CONTENT FIX - Proper scrolling within constrained space */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active > div.mc-tab {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100% - 2px) !important; /* Account for border */
    max-height: calc(100% - 2px) !important; /* Prevent overflow */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    /* CRITICAL: Even tinier bottom padding */
    padding-bottom: 0.125rem !important;
    margin-bottom: 0 !important;
}

/* CRITICAL FIX: Ensure scroll areas don't extend beyond viewport */
/* Exclude dropdown menus and filter buttons from height constraint */
html body > div.mc-main.mc-admin.mc-cloud .mc-scroll-area:not(.mc-select ul):not(.mc-menu):not(div ul.mc-menu):not(.mc-popup):not(.mc-menu-mobile > ul):not(.mc-menu-mobile .mc-mobile):not(.mc-area-users .mc-filter-btn > div):not(.mc-area-conversations .mc-filter-btn > div):not(.mc-menu li ul) {
    max-height: calc(100vh - 130px) !important; /* Account for header + padding */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CRITICAL: Ensure bottom content is accessible */
    margin-bottom: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

/* PRESERVE USERS AREA PADDING - Critical for layout */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users > div.mc-tab {
    padding: 0.25rem !important;
}

/* USERS AREA - Nuclear option for margins that create gaps */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users .mc-top-bar {
    margin: 0 !important;
}

html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users .mc-scroll-area {
    margin: 0 !important;
}

/* Ensure proper flex layout for users area children */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
}

/* Preserve internal padding for content while removing external margins */
html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users .mc-top-bar {
    padding: 0.25rem !important;
}

html body > div.mc-main.mc-admin.mc-cloud > div.flex.h-screen.overflow-hidden > div > main div[class*="mc-area"].mc-active.mc-area-users .mc-scroll-area {
    padding: 0.25rem !important;
    flex: 1 !important;
    overflow: hidden !important;
}
/* MODAL OVERLAY Z-INDEX FIXES - ENSURE MODALS APPEAR ABOVE HEADER */

/* Standard modal overlays - higher z-index to appear above header (99999) */
.fixed.inset-0.bg-gray-600.bg-opacity-50 {
    z-index: 999999 !important; /* Above header (99998) and header dropdowns (99999) */
}

/* Ensure modal content appears above overlay */
.fixed.inset-0.bg-gray-600.bg-opacity-50 > div {
    z-index: 100001 !important;
}

/* Nested modal overlays - highest z-index */
.fixed.inset-0.z-60.bg-gray-600.bg-opacity-50 {
    z-index: 100002 !important; /* For nested modals */
}

/* Ensure modal overlays cover entire viewport */
.fixed.inset-0.bg-gray-600.bg-opacity-50 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Mobile modal overlay adjustments */
@media (max-width: 1279px) {
    .fixed.inset-0.bg-gray-600.bg-opacity-50 {
        z-index: 999999 !important;
    }
}

/* Desktop modal overlay adjustments */
@media (min-width: 1280px) {
    .fixed.inset-0.bg-gray-600.bg-opacity-50 {
        z-index: 999999 !important;
    }
}

/* FIX: Conversation filter dropdown height */
/* Target only the ACTIVE dropdown to prevent it from staying open */
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-filter-btn.mc-active > div {
    height: auto !important;
    max-height: 65vh !important;
    /* Ensure it uses flex layout as intended */
    display: flex !important;
    flex-direction: column !important;
    z-index: 100 !important;
}

/* Fix the inner list scrolling */
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-filter-btn .mc-scroll-area,
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-filter-btn ul {
    max-height: 60vh !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 50px !important; /* Ensure at least some height */
    margin-bottom: 0 !important;
    padding-bottom: 0.5rem !important;
}

/* CRITICAL: Allow dropdown to breach containers */
/* These containers must allow overflow for the dropdown to be fully visible */
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-board,
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-admin-list,
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-admin-list .mc-top {
    overflow: visible !important;
}

/* Ensure z-index stacking is correct so list appears above other content */
html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-admin-list {
    z-index: 20 !important;
}

html body > div.mc-main.mc-admin.mc-cloud .mc-area-conversations .mc-admin-list .mc-top {
    z-index: 30 !important;
    position: relative !important;
}