/* ERP MOBILE & TABLET STYLESHEET
   Reusable responsive patterns shared across pages, kept separate from
   erp-design-system.css (which is desktop-first) so mobile/tablet-only
   UI patterns live in one place as they get built out page by page. */

/* Paginación en una sola línea (Anterior / números / Siguiente)
   ---------------------------------------------------------------
   erp-design-system.css fuerza cada botón de .erp-pagination-controls a
   width:100% en móvil, apilando "Anterior", cada número de página y
   "Siguiente" en su propia fila de ancho completo — ocupa demasiado
   espacio vertical y se ve gigante. Esto lo sobreescribe (se carga
   después del sistema de diseño) para que los tres quepan en una sola
   fila compacta, angosta lo suficiente para no desbordar en un teléfono. */
@media (max-width: 768px) {
    .erp-pagination-controls,
    .erp-pagination-controls .erp-btn {
        width: auto;
    }

    .erp-pagination-controls {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .erp-pagination-controls .erp-btn {
        flex: 0 1 auto;
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        min-height: 30px;
    }

    .erp-page-btn {
        min-width: 28px;
        min-height: 28px;
        padding: 0 0.3rem;
        font-size: 0.75rem;
    }
}

/* Tablet / ventana angosta con la barra lateral abierta (ej. 904x780):
   el texto "Showing X to Y of Z results" + el selector de "X por página"
   a la izquierda, y Anterior/números/Siguiente a la derecha, ya no caben
   en una sola fila — se envuelven de forma rara (el texto se cae a una
   segunda línea, Siguiente queda huérfano en una tercera). Quitando ese
   texto (el selector de resultados por página se queda) sobra espacio de
   sobra para que todo quede alineado en una sola fila otra vez. */
@media (min-width: 769px) and (max-width: 1100px) {
    .erp-pagination-info > span {
        display: none;
    }

    .erp-pagination {
        flex-wrap: nowrap;
    }
}

/* Modal minimalista (ver .erp-modal* en erp-design-system.css) en móvil:
   ocupa el ancho disponible en vez de un ancho fijo, y los botones de
   footer (Cancelar/Confirmar) se reparten el espacio por igual en vez de
   quedar pegados a la derecha - más fácil de tocar en pantallas angostas. */
@media (max-width: 768px) {
    .erp-modal {
        width: 100%;
        max-width: 420px;
    }

    .erp-modal-footer {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .erp-modal-footer .erp-btn {
        flex: 1;
    }
}

/* FAB (Floating Action Button) con menú de opciones circulares
   ------------------------------------------------------------
   Botón circular fijo abajo a la derecha (solo <=768px) que, al tocarlo,
   despliega un pequeño menú vertical de opciones circulares justo arriba
   de él (patrón "speed dial"). Cada opción es un <button class="mobile-fab-option">
   con una etiqueta de texto (".mobile-fab-option-label") y un círculo con
   ícono (".mobile-fab-option-circle"), que opcionalmente lleva un contador
   (".mobile-fab-badge", ej. número de filtros activos).

   Markup de referencia (ver Pages/Orders.razor):
   <div class="mobile-fab-container">
       @if (showFabMenu)
       {
           <div class="mobile-fab-backdrop" @onclick="() => showFabMenu = false"></div>
           <button type="button" class="mobile-fab-option" @onclick="...">
               <span class="mobile-fab-option-label">Texto</span>
               <span class="mobile-fab-option-circle">
                   <span class="bi bi-..."></span>
                   <span class="mobile-fab-badge">@count</span> <!-- opcional -->
               </span>
           </button>
           <!-- más opciones aquí -->
       }
       <button type="button" class="mobile-fab-main" @onclick="() => showFabMenu = !showFabMenu">
           <span class='bi @(showFabMenu ? "bi-x-lg" : "bi-three-dots")'></span>
       </button>
   </div> */

.mobile-fab-container { display: none; }

@media (max-width: 768px) {
    .mobile-fab-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        z-index: 900;
    }

    .mobile-fab-backdrop {
        position: fixed;
        inset: 0;
        z-index: -1;
    }

    .mobile-fab-main {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: var(--erp-primary);
        color: white;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }

    .mobile-fab-main:active {
        background: var(--erp-primary-hover);
    }

    .mobile-fab-option {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: none;
        border: none;
        padding: 0;
        margin-bottom: 0.9rem;
        cursor: pointer;
    }

    .mobile-fab-option-label {
        background: var(--erp-surface);
        color: var(--erp-text-primary);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.4rem 0.75rem;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        white-space: nowrap;
    }

    .mobile-fab-option-circle {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--erp-surface);
        color: var(--erp-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    .mobile-fab-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.1rem;
        height: 1.1rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: var(--erp-danger);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
    }
}

/* Menú meatball (⋯) por fila de tabla
   --------------------------------
   Para tablas con la tarjeta-por-fila automática de erp-table en móvil:
   reemplaza una fila de varios botones de ícono (que abarcarían toda la
   tarjeta) por un solo botón "⋯" que despliega un menú vertical con las
   mismas acciones, esta vez con texto. Cada página decide dónde colocar
   ".mobile-meatball-wrapper" dentro de su celda de acciones (normalmente
   junto a ".desktop-actions-row", que la propia página oculta en móvil
   vía su .razor.css) y qué acciones mostrar en el menú.

   Markup de referencia (ver Pages/Orders.razor):
   <div class="mobile-meatball-wrapper">
       <button type="button" class="mobile-meatball-trigger" @onclick="() => ToggleMeatballMenu(row.Id)">
           <span class="bi bi-three-dots"></span>
       </button>
       @if (openMeatballMenuRowId == row.Id)
       {
           <div class="mobile-meatball-backdrop" @onclick="() => openMeatballMenuRowId = null"></div>
           <div class="mobile-meatball-menu">
               <button type="button" class="mobile-meatball-menu-item" @onclick="...">
                   <span class="bi bi-..."></span> Texto
               </button>
               <!-- una acción destructiva (ej. Cancelar) puede llevar
                    la clase adicional "mobile-meatball-menu-item-danger" -->
           </div>
       }
   </div> */

.mobile-meatball-wrapper { display: none; }

@media (max-width: 768px) {
    .mobile-meatball-wrapper {
        display: inline-block;
        position: relative;
    }

    .mobile-meatball-trigger {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: var(--erp-surface-subtle);
        color: var(--erp-text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
    }

    .mobile-meatball-trigger:active {
        background: var(--erp-border);
    }

    .mobile-meatball-backdrop {
        position: fixed;
        inset: 0;
        z-index: 999;
    }

    .mobile-meatball-menu {
        position: absolute;
        top: calc(100% + 0.35rem);
        right: 0;
        z-index: 1000;
        background: var(--erp-surface);
        border: 1px solid var(--erp-border);
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        min-width: 180px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .mobile-meatball-menu-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
        background: none;
        border: none;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--erp-text-primary);
        cursor: pointer;
    }

    .mobile-meatball-menu-item:active {
        background: var(--erp-surface-subtle);
    }

    .mobile-meatball-menu-item-danger {
        color: var(--erp-danger);
    }
}

/* Lista compacta de renglones (>1 item) con menú kebab
   -----------------------------------------------------
   Cuando una lista/tabla tendría muchas tarjetas apiladas en móvil (ej. las
   líneas de una orden con varios artículos), en vez de mostrar cada una
   completa (todos sus campos) se muestra solo su nombre + un botón kebab
   que abre el detalle completo en un modal (usar .erp-modal, ver más abajo
   en este mismo archivo o en erp-design-system.css). Reduce el scroll
   cuando hay muchos renglones.

   Markup de referencia (ver Pages/OrderDetails.razor):
   <div class="mobile-lineitems-compact">
       @foreach (var line in items)
       {
           <div class="mobile-lineitem-row">
               <span class="mobile-lineitem-name">@line.Name</span>
               <button type="button" class="mobile-meatball-trigger" @onclick="() => OpenDetail(line)">
                   <span class="bi bi-three-dots"></span>
               </button>
           </div>
       }
   </div> */
.mobile-lineitems-compact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.mobile-lineitem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--erp-surface-subtle);
    border: 1.5px solid var(--erp-border-strong);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.mobile-lineitem-name {
    font-weight: 600;
    color: var(--erp-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuerpo de un modal de detalle abierto desde la lista compacta de arriba:
   columna vertical de campos, con pares de campos relacionados (ej.
   Cantidad/Descuento) uno junto al otro en vez de cada uno en su propia
   fila completa. */
.mobile-lineitem-detail-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-lineitem-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Botón(es) de acción + menú de documento (PDF/Email) junto al botón de
   Volver, ambos arriba en la misma fila (ver .erp-header-top en
   erp-design-system.css - ya es flex con justify-content:space-between,
   así que "Volver" queda a la izquierda y este grupo a la derecha).

   Markup de referencia (ver Pages/OrderDetails.razor):
   <div class="erp-header-top">
       <button class="erp-btn-back">...Volver...</button>
       <div class="erp-header-top-actions">
           <button class="erp-btn erp-btn-primary">...Guardar...</button>
           <DocumentActions ... />
       </div>
   </div> */
.erp-header-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* document-actions.css fuerza a .document-actions a width:100% en móvil
   (<=640px), pensado para su modo "ShowAsButtons" (una fila de botones
   completos que necesita scroll horizontal). En el modo kebab (el default),
   ese ancho forzado lo saca de su lugar compacto junto al botón de acción
   que lo acompañe en .erp-header-top-actions. */
.erp-header-top-actions .document-actions {
    width: auto;
    overflow-x: visible;
}

/* Modal de filtros para móvil (bottom-sheet), CON botón "Aplicar" explícito
   -----------------------------------------------------------------------
   Excepción deliberada a la regla de "los filtros se aplican solos, sin
   botón": en el .mobile-fab-container (ver arriba), la opción "Filtros"
   abre este modal con TODOS los campos de filtro duplicados en variables
   "draft*" - los cambios solo pasan a los filtros reales (recalculando la
   lista) al tocar "Aplicar"; "Limpiar" resetea both draft y real de una vez.
   Se pidió así explícitamente para que el usuario no tenga duda de si el
   filtro ya se aplicó o no en un modal, a diferencia del panel de filtros
   normal en escritorio (que sigue siendo reactivo, sin botón).

   Markup de referencia (ver Pages/Orders.razor):
   <div class="modal-backdrop" @onclick="CloseMobileFilterModal">
       <div class="mobile-filter-modal" @onclick:stopPropagation="true">
           <div class="mobile-filter-modal-header">
               <h3>Filtros</h3>
               <button class="btn-close-modal" @onclick="CloseMobileFilterModal">&times;</button>
           </div>
           <div class="mobile-filter-modal-body">
               <!-- ...campos de filtro usando draftXxx... -->
               <div class="mobile-filter-date-row"> <!-- Desde/Hasta lado a lado --> </div>
           </div>
           <div class="mobile-filter-modal-footer">
               <button class="erp-btn erp-btn-secondary" @onclick="ClearMobileFilters">Limpiar</button>
               <button class="erp-btn erp-btn-primary" @onclick="ApplyMobileFilters">Aplicar</button>
           </div>
       </div>
   </div> */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (max-width: 768px) {
    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
}

.mobile-filter-modal {
    background: var(--erp-surface);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 768px) {
    .mobile-filter-modal {
        border-radius: 16px 16px 0 0;
    }
}

.mobile-filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--erp-border);
    flex-shrink: 0;
}

.mobile-filter-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-text-primary);
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--erp-text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.btn-close-modal:hover {
    color: var(--erp-text-primary);
}

.mobile-filter-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* .erp-filter-group's shared flex:1 1 160px is meant for a horizontal desktop
   filter bar, where flex-grow spreads extra WIDTH across siblings. Inside this
   modal's column-direction body, flex-grow instead spreads extra HEIGHT across
   each field, stretching them apart with large empty gaps. Pin them to their
   natural height. */
.mobile-filter-modal-body .erp-filter-group {
    flex: 0 0 auto;
}

/* The shared .erp-status-menu is position:absolute, meant to float over a page
   that scrolls on its own (desktop). Inside this modal's scrollable body
   (overflow-y: auto), an absolutely-positioned child gets clipped by that
   scroll container whenever it opens near the bottom (which "Estado", the
   last field, always does) - it renders mostly hidden behind the footer, and
   touch-scrolling on it falls through to the page behind the modal instead of
   scrolling the modal itself. Render it inline in the normal flow instead, so
   it just pushes the footer down and scrolls together with the rest of the
   modal body like any other content.
   position: relative (not static) on purpose: static elements can't use
   z-index at all, so the full-screen .erp-status-overlay backdrop (fixed,
   z-index:10, meant to close the menu on an outside tap) ended up painted
   ON TOP of these checkboxes instead of behind them, swallowing every tap
   before it reached the checkbox - the checkboxes looked "broken". Staying
   relative keeps the checkboxes in normal flow (no clipping) while still
   letting z-index put them above the overlay. */
.mobile-filter-modal-body .erp-status-menu {
    position: relative;
    z-index: 15;
    box-shadow: none;
    border: 1px solid var(--erp-border);
    margin-top: 0.375rem;
}

.mobile-filter-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mobile-filter-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-surface-subtle);
    flex-shrink: 0;
}

.mobile-filter-modal-footer .erp-btn {
    flex: 1;
    justify-content: center;
}

/* Ancho de tarjeta móvil para tablas dentro de una .card (páginas de
   detalle: OrderDetails, InvoiceDetails, etc.)
   ---------------------------------------------------------------------
   Estructura típica: .erp-page (padding 1rem) > .card > .card-body
   (padding 1rem) > .erp-table-shell > tabla. Sangrar solo -1rem cancela
   el padding de .card-body, dejando la tarjeta apenas al borde de .card
   - pero .card sigue adentro del padding de .erp-page, así que se
   desperdicia otro 1rem de cada lado. Sangrando -2rem se cancelan AMBOS
   paddings, dejando la tarjeta de cada línea más ancha (más cerca del
   borde real de la pantalla), con solo 0.5rem de aire en vez de 1rem. */
@media (max-width: 768px) {
    .card-body .erp-table-shell {
        overflow-x: visible;
        margin: 0 -2rem;
        padding: 0 0.5rem;
    }

    .card-body .erp-table {
        min-width: 100%;
    }
}

/* .mobile-only fuerza display:block!important (responsive-polish.css),
   lo que rompe elementos que necesitan flex/inline-flex para centrar su
   ícono + texto (ej. items de un menú kebab) - mismo bug que ya se dio
   con .erp-btn-icon, aquí para .kebab-menu-item usado como extra item
   mobile-only dentro de DocumentActions (ver InvoiceDetails CFDI). */
@media (max-width: 767.98px) {
    .kebab-menu-item.mobile-only {
        display: flex !important;
    }
}