/* ==========================================================================
   AppList responsive (CORE-001)
   --------------------------------------------------------------------------
   Hoja OPT-IN. Todas las reglas cuelgan de clases que AppList solo emite
   cuando $responsive_mode != 'off':

       .panel-applist        -> <section class="panel panel-applist">
       .apl-rwrap--scroll    -> contenedor de la tabla
       .apl-rwrap--cards     -> idem, con card mode (Fase 4)
       .apl-table            -> <table>

   REGLA DE ORO: no reutilizar ni modificar selectores heredados.
   En particular NO se toca `table.no-more-table` (card mode de
   themes/*/css/table-responsive.css). Ese archivo queda congelado, de modo
   que applist.v4 y los 285 custom templates no se ven afectados por esta
   hoja. Ver docs/tickets/in-dev/CORE-001-applist-responsive-tables.ticket.md

   Breakpoints: docs/frontend-standards.mdc §7
   ========================================================================== */

:root {
    /* breakpoint as reference only: css doesn't support vars on media query yet */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* --------------------------------------------------------------------------
   1. Panel contenedor
   Bootstrap 3 define `.panel{overflow:hidden}`. Un ancestro con overflow
   distinto de visible se convierte en el contenedor de desplazamiento de los
   elementos sticky descendientes, lo que impide que `position:sticky`
   funcione (Fase 3). Se neutraliza solo en las listas activadas.
   -------------------------------------------------------------------------- */
.panel-applist {
    overflow: visible;
}

/* El panel usa border-radius; al quitar overflow:hidden las esquinas dejan de
   recortar a los hijos. En la practica no se nota porque .panel-body aporta su
   propio padding y ningun hijo directo pinta fondo hasta el borde. Verificar
   visualmente al activar cada pantalla. */
.panel-applist > .panel-body {
    overflow: visible;
}

/* --------------------------------------------------------------------------
   2. Contenedor de la tabla
   min-width:0 es imprescindible: sin él, un item flex/grid usa min-width:auto
   y se niega a encogerse por debajo del ancho de su contenido, desbordando al
   padre en lugar de activar el scroll.
   -------------------------------------------------------------------------- */
.apl-rwrap {
    width: 100%;
    min-width: 0;
}

.apl-rwrap.apl-hidden {
    display: none;
}

.apl-rwrap--scroll,
.apl-rwrap--cards {
    overflow-x: auto;
    /* Nota: con overflow-x:auto el navegador computa overflow-y:visible como
       auto. Sin max-height el contenedor crece con su contenido, asi que no
       aparece scrollbar vertical. La altura se acota solo en el rango sticky. */
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   3. Ancho de la tabla
   Un contenedor con overflow-x:auto NUNCA desplaza a un hijo con width:100%:
   la tabla se comprime hasta caber y las columnas se apelmazan (bug original
   reportado a 425px). Bajo opt-in AppList omite el `style="width:100%"`
   inline y aquí se define el comportamiento:

     - width:auto      -> la tabla toma el ancho natural de su contenido
     - min-width:100%  -> pero nunca menos que el contenedor (evita tablas
                          angostas y sueltas en listas de pocas columnas)

   Es adaptativo: no fija un min-width arbitrario que sería inadecuado tanto
   para listas de 3 columnas como para las de 15+.
   -------------------------------------------------------------------------- */
.apl-rwrap--scroll .apl-table,
.apl-rwrap--cards .apl-table {
    width: auto;
    min-width: 100%;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Comportamiento por breakpoint
   Desktop-first, alineado con frontend-standards §7.
   -------------------------------------------------------------------------- */

/* < lg : el contenido de las celdas deja de partirse en varias líneas para
   que el scroll horizontal sea la estrategia de lectura, no el apelmazado. */
@media only screen and (max-width: 1023px) {
    .apl-rwrap--scroll .apl-table > thead > tr > th,
    .apl-rwrap--scroll .apl-table > tbody > tr > td {
        white-space: nowrap;
    }

    /* Las celdas de acciones y checkbox no deben crecer. */
    .apl-rwrap--scroll .apl-table .apl-cell-actions,
    .apl-rwrap--scroll .apl-table .apl-cell-check {
        white-space: nowrap;
        width: 1%;
    }
}

/* < md : el panel de Bootstrap aporta padding lateral que reduce el ancho
   útil en móvil. Se recorta para ganar espacio de tabla. */
@media only screen and (max-width: 767px) {
    .panel-applist > .panel-body {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Scrollbar más discreta en móvil sin perder el affordance. */
    .apl-rwrap--scroll::-webkit-scrollbar {
        height: 6px;
    }

    .apl-rwrap--scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 3px;
    }
}

/* --------------------------------------------------------------------------
   4b. Sticky (Fase 3)
   Requiere que ningun ancestro tenga overflow != visible salvo el propio
   contenedor de scroll: por eso .panel-applist neutraliza el overflow:hidden
   de Bootstrap (bloque 1).

   El sticky se limita al rango md (768-1023px), que es donde el scroll
   horizontal es la estrategia de lectura. Por debajo de md el ancho util es
   tan corto que congelar una columna deja demasiado poco espacio visible.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* El contenedor necesita altura acotada para que el thead sticky tenga
       recorrido vertical sobre el cual fijarse. Se descuentan 60px del header
       fijo para ocupar exactamente el alto visible restante. */
    .apl-rwrap--scroll {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .apl-rwrap--scroll .apl-table > thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
        /* Fondo opaco obligatorio: sin el, las filas se transparentan por debajo.
           Coincide con .table thead tr de style.css (#344A65). */
        background-color: #344A65;
        color: #fff;
    }

    /* Primera columna congelada. Se usa :first-child en lugar de una clase
       porque el orden de columnas lo decide cada template. */
    .apl-rwrap--scroll .apl-table > tbody > tr > td:first-child,
    .apl-rwrap--scroll .apl-table > thead > tr > th:first-child {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
    }

    /* La celda de cruce (thead + primera columna) debe quedar por encima de
       ambas franjas sticky. */
    .apl-rwrap--scroll .apl-table > thead > tr > th:first-child {
        z-index: 4;
        background-color: #344A65;
    }

    /* El fondo opaco de la columna congelada tapa el zebra-striping. Se replica
       solo cuando la tabla realmente es striped, para no pintar filas alternas
       en listas que no lo son. Bootstrap 3 usa :nth-of-type(odd). */
    .apl-rwrap--scroll .apl-table.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
        background-color: #f9f9f9;
    }

    /* Separador visual del limite de la columna congelada. */
    .apl-rwrap--scroll .apl-table > tbody > tr > td:first-child,
    .apl-rwrap--scroll .apl-table > thead > tr > th:first-child {
        box-shadow: 1px 0 0 0 #ddd;
    }
}

/* --------------------------------------------------------------------------
   4c. Card mode (Fase 4) — opt-in de segundo nivel
   Se activa con $F->list_responsive_mode = 'cards' y SOLO debe usarse en
   listas cuyas celdas emitan data-title (el renderer comun lo hace; de los
   285 custom templates solo 66 lo traen).

   Namespace propio a proposito: NO se reutiliza `table.no-more-table` de
   themes/*/css/table-responsive.css. Aquel selector alcanza a applist.v4 y a
   cualquier template que lleve la clase, y arrastra el bug de padding en las
   celdas de acciones. Aqui el alcance esta acotado a .apl-rwrap--cards.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    /* Sin scroll horizontal: en card mode cada fila se apila. */
    .apl-rwrap--cards {
        overflow-x: visible;
    }

    .apl-rwrap--cards .apl-table,
    .apl-rwrap--cards .apl-table > tbody,
    .apl-rwrap--cards .apl-table > tbody > tr,
    .apl-rwrap--cards .apl-table > tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
    }

    /* Encabezado fuera de pantalla, no display:none, por accesibilidad. */
    .apl-rwrap--cards .apl-table > thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .apl-rwrap--cards .apl-table > tbody > tr {
        border: 1px solid #ddd;
        border-radius: 3px;
        margin-bottom: 10px;
        padding: 4px 0;
    }

    .apl-rwrap--cards .apl-table > tbody > tr > td {
        border: none;
        border-bottom: 1px solid #f2f2f2;
        position: relative;
        padding-left: 45%;
        white-space: normal;
        text-align: left;
        min-height: 30px;
    }

    .apl-rwrap--cards .apl-table > tbody > tr > td:last-child {
        border-bottom: none;
    }

    /* La etiqueta de cada celda proviene de data-title. */
    .apl-rwrap--cards .apl-table > tbody > tr > td:before {
        content: attr(data-title);
        position: absolute;
        left: 10px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #666;
    }

    /* Acciones y checkbox no llevan etiqueta: aplicarles padding-left:45%
       empuja los botones fuera del area visible (bug original a 425px).
       Ocupan el ancho completo de la tarjeta. */
    .apl-rwrap--cards .apl-table > tbody > tr > td.apl-cell-actions,
    .apl-rwrap--cards .apl-table > tbody > tr > td.apl-cell-check {
        padding-left: 10px;
        text-align: left;
    }

    .apl-rwrap--cards .apl-table > tbody > tr > td.apl-cell-actions:before,
    .apl-rwrap--cards .apl-table > tbody > tr > td.apl-cell-check:before {
        content: none;
    }

    /* Celdas sin data-title (custom templates parcialmente etiquetados):
       degradan a ancho completo en vez de dejar un hueco vacio del 45%. */
    .apl-rwrap--cards .apl-table > tbody > tr > td:not([data-title]) {
        padding-left: 10px;
    }
}

/* --------------------------------------------------------------------------
   5. Barra de filtros y pagger
   Ambos se renderizan FUERA de .apl-rwrap (van en .panel-body, antes de la
   tabla), por lo que su único ancestro común con la tabla es .panel-applist.
   Se corrigen solo por CSS: el markup no se toca, así las listas en modo
   'off' quedan intactas.
   -------------------------------------------------------------------------- */

/* applist.v2 emite `<div class="input-group m-bot15 col-md-12">`. Combinar
   .input-group (display:table) con una clase de grid (que aporta padding
   horizontal + float) desborda el contenedor en Bootstrap 3. Se neutraliza
   el aporte del grid conservando el input-group. */
.panel-applist .tbl-filter .input-group.col-md-12 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.panel-applist .tbl-filter .input-append {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    /* FilterViews (col-md-3) y búsqueda (col-md-9) se apilan a ancho completo. */
    .panel-applist .tbl-filter,
    .panel-applist .tbl-filter + .tbl-filter {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* El pagger es un .btn-group: con muchas páginas no cabe en una línea.
       Se permite que fluya en varias en lugar de desbordar. */
    .panel-applist .pagger.btn-group {
        display: block;
        white-space: normal;
    }

    .panel-applist .pagger.btn-group > .btn,
    .panel-applist .pagger.btn-group > a.btn {
        float: none;
        display: inline-block;
        margin-bottom: 4px;
    }
}