/* ============================================================
   Overrides de layout MyPOS
   ============================================================ */

/* El template fuerza .page-content a un min-height fijo de 1800px,
   lo que deja un gran espacio vacío antes del pie de página.
   Lo reemplazamos por un layout flexible: el contenido llena la
   pantalla y el footer queda pegado abajo cuando la página es corta. */
.page-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--ct-topbar-height, 85px));
}

.page-content > .page-container {
    /* Crece para empujar el footer hacia abajo (junto con .footer { margin-top:auto }) */
    flex: 1 1 auto;
}

/* ============================================================
   Pantallas bajas (≤ 800px de alto, p.ej. 720p).
   Se compactan la barra superior, el menú lateral, los modales y
   el aviso de licencia para aprovechar la poca altura disponible.
   Como todo usa variables del tema (--ct-*), los cambios se
   propagan solos; en monitores normales (1080p) no afecta.
   ============================================================ */

@media (max-height: 800px) {
    :root {
        --ct-topbar-height: 68px;
        --ct-menu-item-font-size: 0.85rem;
        --ct-menu-item-icon-size: 1.15rem;
        --ct-menu-item-padding-y: 6px;
    }

    /* Barra superior más compacta */
    .app-topbar {
        padding: 0 1rem;
    }

    .app-topbar .page-title {
        font-size: 1.15rem;
    }

    /* Modales: que entren completos en pantallas bajas y hagan
       scroll interno si el contenido supera la altura visible.
       (No interfiere con modal-dialog-scrollable, que Bootstrap
       ya controla con su propio max-height.) */
    .modal-dialog {
        max-height: calc(100vh - .5rem);
    }

    .modal-dialog .modal-content {
        max-height: inherit;
        overflow-y: auto;
    }

    /* Aviso de licencia más delgado */
    .licencia-aviso {
        height: 32px;
        margin-bottom: 4px;
        font-size: 12px;
    }
}

/* ============================================================
   Tablas de listado: cabecera fija (sticky) + altura acotada.
   Toma como base el patrón del View de Productos (.tabla-sticky)
   pero usando variables del tema (--ct-*) para que el encabezado
   se adapte automáticamente al esquema claro/oscuro seleccionado,
   en lugar de los grises fijos #f8f9fa/#dee2e6.
   Se aplica a las tablas dentro de contenedores .table-responsive*
   (listados/datos). Las tablas de impresión (facturas), tablas no
   envueltas en .table-responsive y las DataTables no se ven afectadas.
   ============================================================ */

.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl,
.table-responsive-xxl,
.tabla-sticky {
    /* Altura máxima como en Productos: la tabla hace scroll propio
       y la cabecera permanece visible mientras se navega las filas.
       Se calcula contra la altura real de la ventana (menos la barra
       superior, filtros, encabezado y paginación de la tarjeta) para
       que quepa sin doble scroll también en pantallas bajas (720p).
       max(320px, ...) garantiza un mínimo usable. La línea anterior
       queda como fallback para navegadores sin soporte de max(). */
    max-height: 65vh;
    max-height: max(320px, calc(100vh - var(--ct-topbar-height, 85px) - 230px));
    overflow-y: auto;
}

/* Cabecera fija con colores adaptables al tema.
   background-color opaco (--ct-card-bg) para que las filas pasen
   por debajo sin verse, y borde inferior usando --ct-border-color. */
.table-responsive thead th,
.table-responsive-sm thead th,
.table-responsive-md thead th,
.table-responsive-lg thead th,
.table-responsive-xl thead th,
.table-responsive-xxl thead th,
.tabla-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--ct-card-bg, #fff);
    color: var(--ct-body-color, #313a46);
    border-bottom: 2px solid var(--ct-border-color, #e7e9eb);
    box-shadow: inset 0 1px 0 var(--ct-border-color, #e7e9eb),
                inset 0 -1px 0 var(--ct-border-color, #e7e9eb);
}

/* Las tablas manejadas por DataTables ya gestionan sus propias
   barras (búsqueda/paginación) y scroll; no las forzamos a un
   alto fijo para no ocultar esos controles. */
.table-responsive:has(> table.dataTable),
.table-responsive-sm:has(> table.dataTable),
.table-responsive-md:has(> table.dataTable),
.table-responsive-lg:has(> table.dataTable),
.table-responsive-xl:has(> table.dataTable),
.table-responsive-xxl:has(> table.dataTable) {
    max-height: none;
    overflow-y: visible;
}

/* ============================================================
   Miniatura de foto de producto (.producto-thumb) y su
   reemplazo cuando el producto no tiene foto
   (.producto-thumb-placeholder).
   La imagen NO pinta fondo: si el archivo es PNG con
   transparencia se ve tal cual (sin fondo). Solo el placeholder
   usa --ct-card-bg (se adapta claro/oscuro) para verse como una
   casilla vacía.
   ============================================================ */
.producto-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: .4rem;
    cursor: zoom-in;
    transition: transform .12s ease, box-shadow .12s ease;
}

.producto-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(24, 138, 226, .25);
}

.producto-thumb-placeholder {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    background-color: var(--ct-card-bg, #fff);
    color: var(--ct-gray-400, #adb5bd);
    font-size: 20px;
}

/* ============================================================
   Textbox de búsqueda estándar de todo el proyecto
   (.product-search-*). Antes cada vista repetía su propio <style>
   con fondo --ct-gray-100, que NO cambia en el modo oscuro.
   Aquí se usan las mismas variables que el template usa para los
   inputs (.form-control): fondo --ct-secondary-bg (se adapta
   claro/oscuro), texto --ct-body-color y borde --ct-border-color.
   Todas las vistas de listado deben usar estas clases para que
   la búsqueda luzca y se adapte igual en todas partes.
   ============================================================ */
.product-search-form {
    position: relative;
    min-width: 280px;
}

.product-search-input {
    width: 340px;
    max-width: 100%;
    padding: .5rem .77rem;
    border-radius: 50rem;
    border-color: var(--ct-border-color, #e7e9eb);
    background-color: var(--ct-secondary-bg, #fff);
    color: var(--ct-body-color, #313a46);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

/* Cuando el input lleva lupa interior o botón limpiar, se le da
   espacio para que el texto no quede debajo de los iconos. */
.product-search-icon + .product-search-input {
    padding-left: 40px;
}

.product-search-input:has(+ .product-search-clear) {
    padding-right: 38px;
}

.product-search-input::placeholder {
    color: var(--ct-gray-500, #a1a9b1);
}

.product-search-input:focus {
    background-color: var(--ct-secondary-bg, #fff);
    border-color: var(--ct-primary, #188ae2);
    box-shadow: 0 0 0 0.15rem rgba(24, 138, 226, .15);
}

.product-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-gray-500, #a1a9b1);
    font-size: 1.05rem;
    pointer-events: none;
}

.product-search-clear {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-gray-500, #a1a9b1);
    line-height: 0;
}

.product-search-clear:hover {
    color: var(--ct-primary, #188ae2);
}

/* ============================================================
   Color de la Barra Superior.
   El template fija --ct-topbar-* en blanco para el estado sin
   scroll (barra flotante transparente), por lo que la opción
   "Color de la Barra Superior" de Configuración de Tema solo
   tenía efecto al hacer scroll o en móvil. Aquí se anulan esos
   valores fijos (con la misma especificidad que el template) para
   que hereden el color elegido (:root[data-topbar-color=...]) y se
   pinta la barra con ese color también en el estado normal.
   ============================================================ */

@media (min-width: 768px) {
    html:not([data-layout="topnav"]) .app-topbar:not(.topbar-active),
    html[data-bs-theme="dark"]:not([data-layout="topnav"]) .app-topbar:not(.topbar-active) {
        --ct-topbar-bg: inherit;
        --ct-topbar-item-color: inherit;
        --ct-topbar-item-hover-color: inherit;
        --ct-topbar-search-bg: inherit;
        --ct-topbar-user-bg: inherit;
        --ct-topbar-user-border: inherit;
    }
}

.app-topbar:not(.topbar-active) {
    background-color: var(--ct-topbar-bg, #ffffff);
}