/* Custom Admin Styles for Unfold Theme */

/* ── Brand success accent: retint Tailwind green → design teal (#00bb7d). ──
   Unfold defines --color-green-* in @layer theme; this unlayered :root wins regardless of load order. */
:root {
    --color-green-50: #e6faf3;
    --color-green-100: #c2f2df;
    --color-green-200: #86e6c1;
    --color-green-300: #47d6a0;
    --color-green-400: #14c487;
    --color-green-500: #00bb7d;
    --color-green-600: #00a16b;
    --color-green-700: #008056;
    --color-green-800: #006545;
    --color-green-900: #00543a;
    --color-green-950: #002f20;
}

/* 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;
}

/* ============================================
   CMS Menu admin — full-width change form
   Body gets .app-cms .model-menu .change-form automatically
   ============================================ */
.model-menu.change-form #content,
.model-menu.change-form #content.container {
    max-width: 100% !important;
}

/* Widen inline tab rows so Menu Items / Banners columns have room */
.model-menu.change-form .tabular td,
.model-menu.change-form .tabular th {
    white-space: nowrap;
}

/* Calendar month/year select dropdowns — styled to match Unfold design system */
.calendar-month-select,
.calendar-year-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-white, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--border-radius, 6px);
    padding: 6px 26px 6px 10px;
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--text-sm--line-height, 1.25rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-base-700, #374151);
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 150ms ease;
}

.calendar-month-select:hover,
.calendar-year-select:hover {
    border-color: var(--color-base-300, #d1d5db);
    color: var(--color-base-900, #111827);
}

.calendar-month-select:focus,
.calendar-year-select:focus {
    outline: 2px solid var(--color-primary-600, #0284c7);
    outline-offset: -2px;
    border-color: var(--color-primary-600, #0284c7);
}

/* Dark mode */
@media not print {
    :is(.calendar-month-select, .calendar-year-select):where(.dark, .dark *) {
        background-color: var(--color-base-900, #111827);
        border-color: var(--color-base-700, #374151);
        color: var(--color-base-200, #e5e7eb);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }

    :is(.calendar-month-select, .calendar-year-select):where(.dark, .dark *):hover {
        border-color: var(--color-base-600, #4b5563);
        color: var(--color-base-100, #f3f4f6);
    }
}

/* ── Sidebar must stack above the sticky header (z-998): its outer wrapper (relative z-50) sits at
   #page level and otherwise loses to the header, clipping the expanded sidebar + wide logo. ── */
#page > div:has(#nav-sidebar) {
    z-index: 1000;
}

/* ── Collapsible mini sidebar (desktop only): narrow icon rail that keeps the full-menu layout ──
   The collapsed rail is the SAME layout as the expanded menu — every row (group headers, submenu
   items, separators, search) keeps its box and height; only the text is faded out (opacity:0) and
   clipped by the 72px width. Hovering just widens the bar to 288px and reveals the text in place,
   so nothing reflows vertically and no icon ever shifts out from under the cursor.
   Scoped to xl+ so mobile keeps Unfold's native full-width overlay (touch has no hover). */
@media (min-width: 1280px) {
.sidebar-mini {
    width: 72px !important;
    min-width: 72px !important;
}

.sidebar-mini #nav-sidebar {
    width: 72px;
    overflow: hidden;
    transition: width 0.18s ease;
}

.sidebar-mini #nav-sidebar:hover {
    width: 288px;
    overflow: visible;
    box-shadow: 6px 0 28px rgba(15, 23, 42, 0.14);
}

/* Text elements fade in/out; their boxes always stay so heights match between both states. */
.sidebar-mini #nav-sidebar .sidebar-group-title,
.sidebar-mini #nav-sidebar .sidebar-group-chevron,
.sidebar-mini #nav-sidebar .sidebar-group-items a > span:not(.material-symbols-outlined),
.sidebar-mini #nav-sidebar [class*="navigation_header"] .flex-col,
.sidebar-mini #nav-sidebar #nav-sidebar-inner div:has(> div > input[type="search"]),
.sidebar-mini #nav-sidebar #nav-sidebar-inner div:has(> div[x-data*="searchDropdown"]) {
    transition: opacity 0.15s ease;
}

.sidebar-mini #nav-sidebar:not(:hover) .sidebar-group-title,
.sidebar-mini #nav-sidebar:not(:hover) .sidebar-group-chevron,
.sidebar-mini #nav-sidebar:not(:hover) .sidebar-group-items a > span:not(.material-symbols-outlined),
.sidebar-mini #nav-sidebar:not(:hover) [class*="navigation_header"] .flex-col,
.sidebar-mini #nav-sidebar:not(:hover) #nav-sidebar-inner div:has(> div > input[type="search"]),
.sidebar-mini #nav-sidebar:not(:hover) #nav-sidebar-inner div:has(> div[x-data*="searchDropdown"]) {
    opacity: 0 !important;
    pointer-events: none;
}

/* Keep the group title on one line so its box never wraps and grows the header's height. */
.sidebar-mini #nav-sidebar .sidebar-group-title {
    white-space: nowrap;
}
}
/* ── end mini sidebar (desktop only) ── */

/* ── Mobile header: hide informational widgets (env badge, health, celery) so it fits ── */
@media (max-width: 767px) {
    .header-info-widgets {
        display: none !important;
    }
}

/* ── Header currency-rates pill: subtle neutral container, slightly larger ── */
.header-currency-rates {
    background-color: #f1f5f9;
    color: #334155;
    font-size: 12.5px !important;
    height: 28px !important;
    line-height: 28px !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
}

.header-currency-rates:hover {
    background-color: #e2e8f0;
}

:where(.dark) .header-currency-rates {
    background-color: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

/* ── Change-form tabs: wrap onto multiple rows instead of overflowing horizontally ── */
@media (min-width: 768px) {
    .tab-items-nav {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
        align-content: flex-start !important;
        padding: 0.5rem !important;
        margin-right: 1.25rem !important;
    }

    .tab-items-nav > a {
        white-space: nowrap;
        border: 1px solid transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .tab-items-nav > a:hover {
        border-color: rgba(2, 132, 199, 0.25);
    }

    .tab-items-nav > a.active {
        border-color: rgba(2, 132, 199, 0.35);
    }
}