/* Custom Admin Styles for Unfold Theme */

/* Separator Section Highlighting */
.unfold-sidebar-navigation {
    /* Target separator items in the sidebar navigation */
}

/* Style for separator items - these appear as section headers */
.unfold-sidebar-item[data-separator="true"] .unfold-sidebar-text,
.unfold-sidebar-item.separator .unfold-sidebar-text {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #0369a1 !important; /* Using existing primary-700 color */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 1rem !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    background: linear-gradient(90deg, rgba(3, 105, 161, 0.1) 0%, rgba(3, 105, 161, 0.05) 100%) !important;
    border-left: 3px solid #0284c7 !important; /* primary-600 */
    border-radius: 0 4px 4px 0 !important;
    position: relative !important;
}

/* Enhanced separator with subtle shadow */
.unfold-sidebar-item[data-separator="true"]:after,
.unfold-sidebar-item.separator:after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, #0284c7, transparent) !important;
    opacity: 0.3 !important;
}

/* Hover effect for separators */
.unfold-sidebar-item[data-separator="true"]:hover .unfold-sidebar-text,
.unfold-sidebar-item.separator:hover .unfold-sidebar-text {
    background: linear-gradient(90deg, rgba(3, 105, 161, 0.15) 0%, rgba(3, 105, 161, 0.08) 100%) !important;
    border-left-color: #0ea5e9 !important; /* primary-500 */
}

/* Alternative selector patterns for different Unfold versions */
[class*="sidebar"] [class*="separator"],
.sidebar-separator,
.unfold-nav-separator {
    font-weight: 600 !important;
    color: #0369a1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 1rem !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    background: linear-gradient(90deg, rgba(3, 105, 161, 0.1) 0%, rgba(3, 105, 161, 0.05) 100%) !important;
    border-left: 3px solid #0284c7 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Style for regular menu items to ensure proper contrast */
.unfold-sidebar-item:not([data-separator="true"]) .unfold-sidebar-text {
    transition: all 0.2s ease !important;
}

/* Enhanced styling for collapsible section headers */
.unfold-sidebar-item.collapsible > .unfold-sidebar-text {
    font-weight: 500 !important;
    color: #1f2937 !important; /* gray-800 */
}

/* Ensure proper spacing after separators */
.unfold-sidebar-item[data-separator="true"] + .unfold-sidebar-item,
.unfold-sidebar-item.separator + .unfold-sidebar-item {
    margin-top: 0.25rem !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .unfold-sidebar-item[data-separator="true"] .unfold-sidebar-text,
    .unfold-sidebar-item.separator .unfold-sidebar-text {
        color: #7dd3fc !important; /* primary-300 for dark mode */
        background: linear-gradient(90deg, rgba(125, 211, 252, 0.15) 0%, rgba(125, 211, 252, 0.08) 100%) !important;
        border-left-color: #38bdf8 !important; /* primary-400 */
    }
    
    .unfold-sidebar-item[data-separator="true"]:hover .unfold-sidebar-text,
    .unfold-sidebar-item.separator:hover .unfold-sidebar-text {
        background: linear-gradient(90deg, rgba(125, 211, 252, 0.2) 0%, rgba(125, 211, 252, 0.1) 100%) !important;
        border-left-color: #0ea5e9 !important; /* primary-500 */
    }
}

/* Fallback styling for generic separator classes */
.menu-separator,
.nav-separator {
    font-weight: 600 !important;
    color: #0369a1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.5rem 1rem !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    background: linear-gradient(90deg, rgba(3, 105, 161, 0.1) 0%, rgba(3, 105, 161, 0.05) 100%) !important;
    border-left: 3px solid #0284c7 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* ============================================
   WYSIWYG Editor Overflow Fix
   ============================================ */

/* Fix content overflow in Trix/WYSIWYG editor */
trix-editor {
    overflow-x: auto !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
}

/* Ensure the editor container constrains content */
trix-editor .trix-content,
trix-editor [data-trix-mutable] {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

/* Handle long URLs and inline code */
trix-editor pre,
trix-editor code {
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* Ensure images don't overflow */
trix-editor img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix for any nested divs with inline styles */
trix-editor div,
trix-editor p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}