/*
 * Unfold admin — FilteredSelectMultiple (filter_horizontal) height fix.
 *
 * By default the select lists are very short (~6 items visible).
 * This makes them comfortably taller for usability.
 */
.selector-available select,
.selector-chosen select {
    height: 220px !important;
}

/* ──────────────────────────────────────────────────────────────────── */

/*
 * Unfold admin mobile responsiveness fixes.
 *
 * Addresses: changelist cards, change-form fields, CKEditor on small
 * screens, inline tables, autocomplete widgets, and filters panel.
 */

/* ══════════════════════════════════════════════════════════════════
   1. CHANGELIST — keep table layout on mobile with horizontal scroll
   ══════════════════════════════════════════════════════════════════ */

/* Force table display on all screen sizes (override unfold's block→card) */
table#result_list {
    display: table !important;
    min-width: 800px;
}

table#result_list thead {
    display: table-header-group !important;
}

table#result_list tbody {
    display: table-row-group !important;
}

table#result_list tr {
    display: table-row !important;
    border: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

table#result_list th,
table#result_list td {
    display: table-cell !important;
}

/* Hide data-label pseudo-elements (unfold's mobile card labels).
   Unfold applies Tailwind classes directly on td: flex, before:flex,
   before:content-[attr(data-label)], before:mr-auto — override all. */
table#result_list td::before,
table#result_list td.action-checkbox::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Compact action-checkbox column */
table#result_list td.action-checkbox,
table#result_list th.action-checkbox-column {
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    padding: 0.25rem !important;
    text-align: center !important;
}

/* Scrollable container — unfold wraps table in a div with overflow-x-auto,
   but also uses simplebar; ensure the parent form scrolls too */
#changelist-form {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Reduce padding on result cells for more content space */
    table#result_list td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Shrink font in result list for better fit */
    table#result_list {
        font-size: 0.85rem;
    }

    /* Action bar: stack controls vertically */
    .actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .actions select,
    .actions .button {
        width: 100%;
    }

    /* Date hierarchy: horizontal scroll if needed */
    .xfull .date-hierarchy {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════════════
   2. CHANGE FORM — field layout on mobile
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Make fieldsets full-width */
    .change-form .flex-col,
    .change-form fieldset {
        min-width: 0;
    }

    /* Full-width inputs */
    .change-form input[type="text"],
    .change-form input[type="url"],
    .change-form input[type="email"],
    .change-form input[type="number"],
    .change-form input[type="date"],
    .change-form input[type="datetime-local"],
    .change-form textarea,
    .change-form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Related widget wrapper: keep select and buttons in a row */
    .related-widget-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.25rem;
        align-items: center;
    }

    .related-widget-wrapper select,
    .related-widget-wrapper .ts-wrapper {
        flex: 1;
        min-width: 0;
    }

    /* Related widget action buttons (the three-dot menus) — compact */
    .related-widget-wrapper .related-lookup,
    .related-widget-wrapper a[data-popup="yes"],
    .related-widget-wrapper .change-related,
    .related-widget-wrapper .add-related,
    .related-widget-wrapper .delete-related {
        flex-shrink: 0;
        padding: 0.25rem;
    }

    /* Reduce label font size slightly */
    .change-form label {
        font-size: 0.875rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3. TOM SELECT (autocomplete) — mobile optimization
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ts-wrapper {
        max-width: 100% !important;
    }

    .ts-wrapper .ts-control {
        min-height: 2.5rem;
        font-size: 1rem; /* prevent iOS zoom on focus */
    }

    .ts-wrapper .ts-dropdown {
        max-height: 50vh;
    }

    /* Prevent Tom Select from being squeezed by related buttons */
    .related-widget-wrapper .ts-wrapper {
        width: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════
   4. CKEDITOR — mobile-friendly editor
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ck-editor-editable {
        min-height: 200px;
    }

    /* Toolbar: compact buttons ~2x smaller, allow wrapping */
    .ck.ck-toolbar .ck-toolbar-items {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .ck.ck-toolbar .ck-toolbar-separator {
        margin: 0 2px !important;
    }

    .ck.ck-button {
        padding: 2px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .ck.ck-button .ck-icon {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .ck.ck-button .ck-button-label {
        font-size: 11px !important;
    }

    /* Dropdown arrows — smaller */
    .ck.ck-dropdown .ck-dropdown-arrow {
        width: 8px !important;
        margin-left: 2px !important;
    }

    /* Block toolbar (paragraph/heading dropdown) — compact */
    .ck.ck-block-toolbar-button {
        padding: 2px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    /* Source editing textarea */
    .ck-source-editing-area textarea {
        min-height: 200px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   5. INLINE TABLES — horizontal scroll on mobile
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .inline-group .tabular {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inline-group .tabular table {
        min-width: 600px;
    }

    /* Stacked inlines: full width */
    .inline-group .inline-related {
        padding: 0.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   6. FILTERS — collapsible panel on mobile
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Ensure filter panel doesn't overlap content */
    #changelist-filter {
        max-height: 70vh;
        overflow-y: auto;
    }

    #changelist-filter select {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   7. GENERAL — padding, touch targets, and readability
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Minimum touch target size (44px per Apple HIG) */
    .change-form input[type="checkbox"],
    .change-form input[type="radio"] {
        min-width: 1.25rem;
        min-height: 1.25rem;
    }

    /* Submit row: stack buttons */
    .submit-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .submit-row input,
    .submit-row a.button,
    .submit-row .deletelink {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Breadcrumbs: allow wrapping */
    .breadcrumbs {
        flex-wrap: wrap;
        font-size: 0.8rem;
    }

    /* Page title */
    #content h1 {
        font-size: 1.25rem;
        word-break: break-word;
    }

    /* Help text below fields */
    .help,
    .helptext {
        font-size: 0.75rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   8. EXTRA SMALL SCREENS (< 480px)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Tighter padding and smaller font for narrow screens */
    table#result_list td {
        padding: 0.375rem 0.25rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Stack related-widget-wrapper actions below select on very narrow */
    .related-widget-wrapper {
        flex-wrap: wrap;
    }

    .related-widget-wrapper select,
    .related-widget-wrapper .ts-wrapper {
        width: 100%;
        flex-basis: 100%;
    }

    /* Shrink CKEditor toolbar further */
    .ck.ck-button {
        padding: 1px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }

    .ck.ck-button .ck-icon {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .ck.ck-button .ck-button-label {
        font-size: 10px !important;
    }

    /* Inputs: prevent iOS zoom (font-size >= 16px) */
    .change-form input[type="text"],
    .change-form input[type="url"],
    .change-form input[type="email"],
    .change-form input[type="number"],
    .change-form textarea,
    .change-form select,
    .ts-wrapper .ts-control input {
        font-size: 1rem !important;
    }
}