/* =====================================================================
   Kioskito Admin — Global Mobile Optimizations
   Applied to ALL admin pages via Unfold STYLES

   NOTA: Unfold ya convierte tablas a cards en mobile con data-label.
   Este archivo corrige overflow y mejora touch UX — no duplica lo que
   Unfold ya hace.
   ===================================================================== */

@media (max-width: 768px) {

    /* =================================================================
       1. OVERFLOW PREVENTION — General
       ================================================================= */
    body {
        overflow-x: hidden;
    }

    /* Contenedor principal del changelist */
    #content,
    #content-main,
    .change-list,
    #changelist {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Celdas del changelist: forzar que no desborden.
       Unfold usa flex en cada <td> con before:mr-auto (label) + valor.
       El valor (texto o <a>) debe truncarse si es largo. */
    #result_list td,
    #result_list th {
        max-width: 100%;
        min-width: 0;        /* permite flex-shrink */
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Links dentro de celdas (ej: nombre de producto) */
    #result_list td a,
    #result_list th a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 65vw;
    }

    /* Celdas que son flex (Unfold mobile cards): el contenido
       no debe empujar fuera del contenedor */
    #result_list td > *,
    #result_list th > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Badges inline no deben forzar ancho */
    #result_list td span[style*="border-radius"],
    #result_list td span[style*="inline-flex"] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* La tabla wrapper no debe generar scroll horizontal */
    #result_list {
        max-width: 100%;
        overflow: hidden;
    }

    /* =================================================================
       2. ACTION BAR — Fixed bottom bar overflow fix
       ================================================================= */
    /* Unfold fixed action bar at bottom — stack vertically on mobile */
    .group-has-\[input\.action-select\:checked\]\:flex {
        flex-direction: column !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    #changelist-actions-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Action select & button: full width */
    #changelist-actions-wrapper select,
    .actions select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        font-size: 0.875rem;
        box-sizing: border-box;
    }

    #changelist-actions-wrapper button,
    #changelist-actions-wrapper .button,
    .actions button {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    /* =================================================================
       3. DATE HIERARCHY — Horizontal scroll instead of overflow
       ================================================================= */
    ul.toplinks {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: thin;
        padding-bottom: 0.375rem;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    ul.toplinks li {
        flex-shrink: 0;
        white-space: nowrap;
    }

    ul.toplinks li a {
        min-height: 36px;
        padding: 0.25rem 0.625rem;
        display: inline-flex;
        align-items: center;
        font-size: 0.8125rem;
        border-radius: 0.25rem;
    }

    /* Spacer al final para indicar que hay más */
    ul.toplinks::after {
        content: "";
        flex-shrink: 0;
        width: 1rem;
    }

    /* =================================================================
       4. FILTER SIDEBAR — Prevent overflow with many options
       ================================================================= */
    #changelist-filter {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Filter lists with many items (dates, stores) — scrollable */
    #changelist-filter ul {
        max-height: 200px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    #changelist-filter ul li {
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    #changelist-filter ul li a {
        padding: 0.375rem 0;
        font-size: 0.8125rem;
        word-break: break-word;
    }

    /* =================================================================
       5. TOUCH TARGETS — Minimum 44px for all interactive elements
       ================================================================= */
    .object-tools a,
    .submit-row input,
    .submit-row a,
    a.addlink,
    a.changelink {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    #searchbar {
        min-height: 44px;
        font-size: 1rem;
    }

    /* =================================================================
       6. INPUTS — Prevent overflow on small screens
       ================================================================= */
    /* Unfold sets max-w-2xl (672px) and min-w-52 (208px) on inputs.
       On mobile those can exceed viewport width. */
    input, select, textarea,
    .max-w-2xl, .max-w-4xl,
    [class*="max-w-"] {
        max-width: 100% !important;
    }

    /* Datetime inputs with min-w-52 */
    .min-w-52, [class*="min-w-"] {
        min-width: 0 !important;
    }

    /* Autocomplete select2 widgets */
    .select2-container,
    .related-widget-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* =================================================================
       7. SUBMIT ROW — Fixed bottom buttons
       ================================================================= */
    /* The submit row is position:fixed on lg+, static on mobile.
       Ensure it doesn't overflow. */
    #submit-row,
    #submit-row > div {
        max-width: 100vw;
        overflow-x: hidden;
    }

    #submit-row button,
    #submit-row a {
        min-height: 44px;
        font-size: 0.8125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* =================================================================
       8. FIELDSETS & INLINES — Compact on mobile
       ================================================================= */
    fieldset {
        padding: 0.75rem !important;
        max-width: 100%;
        overflow-x: hidden;
    }

    fieldset .description {
        font-size: 0.8125rem;
    }

    .inline-group .inline-related {
        padding: 0.5rem !important;
    }

    /* Tabular inlines: force stack on mobile */
    .tabular .original {
        display: none;
    }

    .inline-group,
    .inline-related {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Inline tabular tables: horizontal scroll if still too wide */
    .inline-group .tabular {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .inline-group .tabular td,
    .inline-group .tabular th {
        min-width: 0;
        max-width: 45vw;
    }

    .inline-group .tabular input,
    .inline-group .tabular select {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 0.8125rem;
    }

    /* =================================================================
       9. BREADCRUMBS & MISC
       ================================================================= */
    .breadcrumbs {
        flex-wrap: wrap;
        font-size: 0.8125rem;
    }
}

/* =================================================================
   EXTRA SMALL SCREENS (< 400px)
   ================================================================= */
@media (max-width: 400px) {
    .submit-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .submit-row input,
    .submit-row a {
        width: 100%;
        text-align: center;
    }

    /* Truncar más agresivamente en pantallas tiny */
    #result_list td {
        max-width: 60vw;
    }
}