/*
 * Mobile changelist cards — match Unfold ≤0.91 behavior.
 *
 * Expand/collapse uses Alpine x-show: never use display:!important on those rows.
 */

@media (max-width: 1023px) {
    #changelist .result-list-wrapper {
        max-width: 100%;
        min-width: 0;
    }

    #changelist .result-list-wrapper [class*="overflow-x-auto"]:has(> #result_list),
    #changelist .result-list-wrapper [class*="overflow-x-auto"]:has(> table#result_list) {
        overflow-x: visible;
        overflow-y: visible;
    }

    #result_list {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        border-spacing: 0;
        table-layout: fixed;
    }

    #result_list > thead:not(:has(.action-checkbox-column)) {
        display: none;
    }

    #result_list > thead:has(.action-checkbox-column) {
        display: block;
    }

    #result_list > thead:has(.action-checkbox-column) > tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--color-base-200, #e5e7eb);
        border-radius: var(--border-radius, 0.5rem);
        background: var(--color-base-50, #f9fafb);
    }

    .dark #result_list > thead:has(.action-checkbox-column) > tr {
        border-color: var(--color-base-800, #1f2937);
        background: var(--color-base-900, #111827);
    }

    #result_list > thead th:not(.action-checkbox-column) {
        display: none;
    }

    #result_list > thead th.action-checkbox-column {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    #result_list > tbody {
        display: block;
    }

    /* Card: checkbox + expand share the first row; other fields stack below. */
    #result_list > tbody > tr.data-row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
        border: 1px solid var(--color-base-200, #e5e7eb);
        border-radius: var(--border-radius, 0.5rem);
        background: var(--color-white, #fff);
        overflow: visible;
        box-sizing: border-box;
    }

    .dark #result_list > tbody > tr.data-row {
        border-color: var(--color-base-800, #1f2937);
        background: var(--color-base-900, #111827);
    }

    #result_list > tbody > tr.data-row > th,
    #result_list > tbody > tr.data-row > td {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem !important;
        border-top: 1px solid var(--color-base-200, #e5e7eb) !important;
        border-bottom: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        box-sizing: border-box;
        grid-column: 1 / -1;
    }

    .dark #result_list > tbody > tr.data-row > th,
    .dark #result_list > tbody > tr.data-row > td {
        border-top-color: var(--color-base-800, #1f2937) !important;
    }

    #result_list > tbody > tr.data-row > td.action-checkbox {
        grid-column: 1;
        grid-row: 1;
        width: auto !important;
        border-top: 0 !important;
        justify-content: flex-start;
    }

    #result_list > tbody > tr.data-row > td.changelist-expand-cell {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        max-width: none;
        border-top: 0 !important;
        justify-content: flex-end;
        padding-left: 0.25rem !important;
    }

    #result_list > tbody > tr.data-row > td.changelist-expand-cell .changelist-expand-btn:active {
        background-color: var(--color-base-200, #e5e7eb);
    }

    .dark #result_list > tbody > tr.data-row > td.changelist-expand-cell .changelist-expand-btn:active {
        background-color: var(--color-base-700, #374151);
    }

    /* No checkbox: keep expand compact on the right of the first toolbar row. */
    #result_list > tbody > tr.data-row:not(:has(> td.action-checkbox)) > td.changelist-expand-cell {
        grid-column: 1 / -1;
    }

    #result_list > tbody > tr.data-row > th::before,
    #result_list > tbody > tr.data-row > td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        margin-right: auto;
        padding-right: 1rem;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--color-font-important-light, #111827);
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dark #result_list > tbody > tr.data-row > th::before,
    .dark #result_list > tbody > tr.data-row > td::before {
        color: var(--color-font-important-dark, #f9fafb);
    }

    #result_list > tbody > tr.data-row > td.action-checkbox::before,
    #result_list > tbody > tr.data-row > td.changelist-expand-cell::before,
    #result_list > tbody > tr.data-row > th:not([data-label])::before,
    #result_list > tbody > tr.data-row > td:not([data-label])::before,
    #result_list > tbody > tr.data-row > th[data-label=""]::before,
    #result_list > tbody > tr.data-row > td[data-label=""]::before {
        content: none !important;
        display: none !important;
    }

    /*
     * Expandable list_sections panel — Alpine x-show owns visibility.
     * Scrollable so tall section content stays reachable on mobile.
     */
    #result_list > tbody > tr.changelist-section-row {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }

    #result_list > tbody > tr.changelist-section-row > td {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(70dvh, 36rem);
        white-space: normal;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-sizing: border-box;
    }

    #result_list > tbody > tr.changelist-section-row .overflow-x-auto {
        overflow-x: hidden;
        overflow-y: visible;
        max-width: 100%;
        max-height: none;
    }

    #result_list > tbody > tr.changelist-section-row table {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        border-spacing: 0;
        table-layout: fixed;
    }

    #result_list > tbody > tr.changelist-section-row table > thead {
        display: none;
    }

    #result_list > tbody > tr.changelist-section-row table > tbody {
        display: block;
    }

    #result_list > tbody > tr.changelist-section-row table tr.data-row {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
        border: 1px solid var(--color-base-200, #e5e7eb);
        border-radius: var(--border-radius, 0.5rem);
        background: var(--color-white, #fff);
        overflow: visible;
        box-sizing: border-box;
    }

    .dark #result_list > tbody > tr.changelist-section-row table tr.data-row {
        border-color: var(--color-base-800, #1f2937);
        background: var(--color-base-900, #111827);
    }

    #result_list > tbody > tr.changelist-section-row table tr.data-row > th,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > td {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 2.75rem;
        padding: 0.5rem 0.75rem;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        border-bottom: 0;
        white-space: normal;
        overflow: visible;
        box-sizing: border-box;
    }

    .dark #result_list > tbody > tr.changelist-section-row table tr.data-row > th,
    .dark #result_list > tbody > tr.changelist-section-row table tr.data-row > td {
        border-top-color: var(--color-base-800, #1f2937);
    }

    #result_list > tbody > tr.changelist-section-row table tr.data-row > th:first-child,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > td:first-child {
        border-top: 0;
    }

    #result_list > tbody > tr.changelist-section-row table tr.data-row > th::before,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        margin-right: auto;
        padding-right: 1rem;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--color-font-important-light, #111827);
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dark #result_list > tbody > tr.changelist-section-row table tr.data-row > th::before,
    .dark #result_list > tbody > tr.changelist-section-row table tr.data-row > td::before {
        color: var(--color-font-important-dark, #f9fafb);
    }

    #result_list > tbody > tr.changelist-section-row table tr.data-row > th:not([data-label])::before,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > td:not([data-label])::before,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > th[data-label=""]::before,
    #result_list > tbody > tr.changelist-section-row table tr.data-row > td[data-label=""]::before {
        content: none;
        display: none;
    }

    #result_list > tbody > tr.changelist-section-row table tbody > tr:not(.data-row) {
        display: block;
        max-width: 100%;
    }

    #result_list > tbody > tr.changelist-section-row table tbody > tr:not(.data-row) > td {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        white-space: normal;
    }
}

@media (min-width: 1024px) {
    #result_list {
        table-layout: auto;
        width: 100%;
        white-space: normal;
    }

    #result_list > tbody > tr.changelist-section-row {
        display: table-row;
    }

    #result_list > tbody > tr.changelist-section-row > td {
        display: table-cell;
        max-height: none;
        overflow: visible;
    }

    /*
     * Unfold 0.102 forced whitespace-nowrap + w-full/max-w-2xl inputs, which
     * made catalogs wider than a 14" content column. Allow wrap and shrink.
     */
    #result_list th,
    #result_list td {
        white-space: normal;
    }

    #result_list td.field-get_image_tag,
    #result_list th.column-get_image_tag,
    #result_list td.action-checkbox,
    #result_list th.action-checkbox-column,
    #result_list td.changelist-expand-cell,
    #result_list td.field-get_change_button,
    #result_list th.column-get_change_button {
        white-space: nowrap;
        width: 1%;
    }

    #result_list td input:not([type="checkbox"]):not([type="radio"]),
    #result_list td select,
    #result_list td textarea {
        width: auto !important;
        max-width: 7rem !important;
        min-width: 0 !important;
    }

    #result_list td.field-order_priority input,
    #result_list td.field-board_order input,
    #result_list td.field-order input {
        max-width: 5rem !important;
    }

    #result_list td.field-show_full_name,
    #result_list td.field-name {
        word-break: break-word;
    }
}