/* Custom styles for Unfold Admin JSONField */
.unfold-inline-tabular textarea {
    min-height: 120px !important;
    font-family: monospace !important;
    font-size: 13px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    width: 100% !important;
    color: #1e293b !important;
}

/* Make the inline tabular rows more spacious */
.unfold-inline-tabular tr.form-row td {
    padding: 1rem !important;
    vertical-align: top !important;
}

/* Highlight the section type selector */
.unfold-inline-tabular select {
    min-width: 180px !important;
}

/* TARGETED FIX FOR HORIZONTAL SCROLL WITHOUT BREAKING UI */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Only constrain main containers, not search overlays */
#content, .unfold-main, .unfold-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* FIX FOR BORDER OVERLAPPING AND CONTAINER OVERFLOW */
.border-base-200, 
.rounded-default, 
.shadow-xs, 
.w-full {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Ensure containers with these utility classes don't push out */
div.overflow-hidden.rounded-default.w-full {
    overflow-x: auto !important; /* Allow internal scroll if content is too wide, instead of pushing page */
    max-width: 100% !important;
}

/* Specific fix for Unfold's internal flex/grid layout in tabs */
.unfold-tabs-content > div {
    max-width: 100% !important;
    overflow-x: hidden !important;
}


/* Ensure the tab navigation itself wraps if too many tabs */
.unfold-tabs-navigation {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Force wrap long filenames specifically in file fields */
.unfold-field-image a, 
.unfold-field-file a, 
.file-upload a,
.unfold-file-link {
    word-break: break-all !important;
    white-space: normal !important;
    display: inline-block !important;
    max-width: 100% !important;
}

/* CONTROL WIDTH OF ALIGNED FORM ROWS */
.unfold-form-row {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important; /* Allow wrapping on small screens */
    gap: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure individual fields within a row don't exceed container */
.unfold-form-row > div {
    flex: 1 1 300px !important; /* Allow growing and shrinking, with a base of 300px */
    max-width: 100% !important;
    min-width: 0 !important; /* Critical for flexbox shrinking */
}

/* Constrain large inputs like CKEditor and Textareas */
.unfold-form-row textarea, 
.unfold-form-row .ck-editor,
.unfold-form-row input[type="text"],
.unfold-form-row select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIXED HEADER FOR ADMIN CMS */
/* Targeted Unfold CSS selectors for header elements */
nav#header, 
header.unfold-header,
.unfold-navigation,
[role="navigation"] > div:first-child,
.unfold-main header,
.unfold-layout > div > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: rgb(255, 255, 255) !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
    width: 100% !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Dark mode support for fixed header */
.dark nav#header,
.dark header.unfold-header,
.dark .unfold-navigation,
.dark [role="navigation"] > div:first-child,
.dark .unfold-main header,
.dark .unfold-layout > div > header {
    background-color: rgb(15, 23, 42) !important;
    border-bottom: 1px solid rgb(30, 41, 59) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Force override any overflow-hidden on parent containers that break sticky */
body, 
html,
#unfold-main,
.unfold-main,
.unfold-layout,
main {
    overflow: visible !important;
}

/* Specific fix for Unfold's internal scroll container if it exists */
.unfold-scroll-container {
    overflow: visible !important;
}

/* Adjust labels to not push out the row */
.unfold-form-row label {
    flex: 0 0 200px !important; /* Fixed width for labels but allowed to wrap if needed */
    max-width: 100% !important;
    word-break: break-word !important;
}

/* COMPREHENSIVE FIX FOR ADMIN TAB HORIZONTAL SCROLL */
/* Target the main tab navigation container */
.unfold-tabs,
.unfold-tabs-navigation,
.unfold-tabs-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

/* Make individual tabs more flexible */
.unfold-tabs-navigation button,
.unfold-tabs-list button,
.unfold-tab-button {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 200px !important;
}

/* Ensure tab content doesn't overflow */
.unfold-tabs-content,
.unfold-tab-panel,
.unfold-tab-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Fix for fieldset containers within tabs */
.unfold-tabs-content fieldset,
.unfold-tab-panel fieldset {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure inline forms don't cause overflow */
.unfold-inline-tabular,
.unfold-inline-stacked {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* Fix for tables in admin */
.unfold-form-table,
.admin-form table {
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}

/* Ensure all form inputs respect container width */
.unfold-tabs-content input,
.unfold-tabs-content select,
.unfold-tabs-content textarea,
.unfold-tabs-content .ck-editor {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix for action buttons at bottom */
.submit-row,
.form-actions {
    max-width: 100% !important;
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
}

/* Specific fix for Page admin with many sections */
#page_form .unfold-tabs,
#pagesection_form .unfold-tabs {
    overflow-x: hidden !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .unfold-tabs-navigation button,
    .unfold-tabs-list button,
    .unfold-tab-button {
        max-width: 120px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* FORCE VISIBILITY FOR ALL ADMIN INPUTS - FIX FOR USER CREATE/EDIT */
.unfold-form-row input,
.form-row input,
.vTextField,
.vPasswordField,
#id_username,
#id_password,
#id_password1,
#id_password2,
[name="username"],
[name="password"],
[name="password1"],
[name="password2"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    background-color: white !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 50 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Ensure form rows are block and visible */
.unfold-form-row, .form-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 80px !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    clear: both !important;
}

/* Specific fix for password fields wrappers */
.password, .field-password, .field-password1, .field-password2 {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    opacity: 1 !important;
}

/* Fix for Unfold's potential grid/flex that might squeeze inputs */
.unfold-form-row > div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* SPECIFIC OVERRIDE FOR USER ADMIN PAGE */
body.model-user .unfold-form-row input,
body.model-user .form-row input,
body.model-user .vTextField,
body.model-user .vPasswordField {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 44px !important;
    background-color: white !important;
    color: #111827 !important;
}