/* 
 * style.css - Minimalist UI for Stock Cmsta
 */

:root {
    --cms-bg: #f3f4f6;
    --cms-primary: #0d6efd;
    --cms-secondary: #6c757d;
    --cms-success: #198754;
    --cms-warning: #ffc107;
    --cms-dark: #212529;
    --cms-text: #334155;
    --cms-border: #868e96;
    --cms-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --bs-border-color: #868e96;
}

body {
    background-color: var(--cms-bg) !important;
    color: var(--cms-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Navbar Tuning */
.navbar {
    border-bottom: 1px solid var(--cms-border);
    background-color: #ffffff !important;
}

.navbar-brand img {
    filter: grayscale(0.2);
    transition: filter 0.3s;
}

.navbar-brand:hover img {
    filter: grayscale(0);
}

/* Layout Container */
.container {
    max-width: 1140px;
}

/* Cards Modernization */
.card {
    border: 1px solid var(--cms-border);
    border-radius: 12px;
    box-shadow: var(--cms-card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #ffffff;
    overflow: hidden;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cms-border);
    padding: 1.25rem;
    font-weight: 600;
}

/* Typography & Labels */
h1, h2, h3, h4, h5, h6 {
    color: var(--cms-dark);
    font-weight: 600;
}

/* Buttons */
.btn {
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--cms-primary);
    border-color: var(--cms-primary);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

/* Tables Styling */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: #fcfcfd;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    padding: 1rem;
    border-top: none;
    border-bottom: 1px solid var(--cms-border);
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--cms-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(248, 249, 250, 0.5);
}

/*
 * Convierte una tabla en una lista de tarjetas por debajo de 576px (celulares).
 * Cada <tr> pasa a ser una tarjeta y cada <td> muestra su columna vía
 * data-label (mismo markup para desktop/mobile, sin duplicar HTML).
 * Uso: agregar la clase `table-stack-mobile` a la tabla y `data-label="..."`
 * a cada <td> generado.
 */
@media (max-width: 575.98px) {
    .table-stack-mobile thead {
        display: none;
    }

    .table-stack-mobile,
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td {
        display: block;
        /* !important: si la tabla es de DataTables con autoWidth (default),
         * fija un style="width: Xpx" inline al iniciar que le gana a un
         * width:100% normal — mejor no depender de acordarse de poner
         * autoWidth:false en cada tabla que use esta clase. */
        width: 100% !important;
    }

    .table-stack-mobile tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--cms-border);
        border-radius: 8px;
    }

    /*
     * Label arriba, valor abajo (en vez de lado a lado): con label+valor en
     * la misma línea, un valor un poco largo (fecha con segundos, código,
     * el grupo Detalle/Rechazar) no tiene dónde crecer y termina recortado.
     * Apilando adentro de la celda el valor siempre tiene el 100% del ancho
     * disponible para acomodarse (wrap, full-width en inputs/botones, etc).
     */
    .table-stack-mobile td {
        padding: 0.6rem 0.9rem;
        border-bottom: 1px dashed var(--cms-border);
    }

    .table-stack-mobile td:last-child {
        border-bottom: 0;
    }

    .table-stack-mobile td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.25rem;
        text-align: left !important; /* aunque la celda tenga .text-end u otro util de alineación */
    }
}

/*
 * Oculta columnas secundarias de una tabla en el rango "tablet" (576px a
 * 991.98px): ahí .table-stack-mobile todavía no aplica (arranca recién
 * debajo de 576px) y la tabla completa no entra sin scroll horizontal.
 * En vez de forzar el formato de tarjetas también en ese rango, se ocultan
 * puntualmente las columnas menos importantes (datos que de todas formas
 * se pueden ver en el detalle/modal de la fila) para que el resto —
 * incluyendo la columna de Acción — entre en pantalla.
 * Uso: agregar la clase `col-hide-tablet` al <th> (HTML) y pasarla como
 * `className` en la definición de columna de DataTables (JS) para que se
 * aplique también al <td> generado.
 */
@media (min-width: 576px) and (max-width: 991.98px) {
    .col-hide-tablet {
        display: none !important;
    }

    /*
     * Modal "Detalle del Pedido a Compras": es justamente la vista de
     * detalle, así que acá no tiene sentido ocultar columnas (RAFAM, Item,
     * Denominación, Cant., Nota) como en las tablas de listado. Bootstrap
     * fija el modal en 500px (--bs-modal-width) para cualquier ancho entre
     * 576px y 991.98px sin aprovechar el espacio disponible, generando un
     * scroll horizontal chico pero constante. Se ensancha solo este modal
     * en ese rango para que la tabla entre completa.
     */
    #modalDetallePC .modal-dialog {
        --bs-modal-width: 650px;
    }

    /*
     * Mismo caso que #modalDetallePC: el modal de Detalle del Pedido
     * (Pedidos Recibidos e Historial de Pedidos comparten el mismo id
     * #modalDetallePedido, uno con columna Capa y ambos con la columna
     * Pacientes agregada por la nominalización) es la vista de detalle en
     * sí, así que no tiene sentido ocultar columnas ahí.
     */
    #modalDetallePedido .modal-dialog {
        --bs-modal-width: 650px;
    }

    /*
     * Detalle del Movimiento (Historial de Movimientos): 6 columnas con la
     * columna Pacientes agregada por la nominalización, un poco más ancho
     * que #modalDetallePedido para que entren sin apretarse.
     */
    #modalDetalleMovimiento .modal-dialog {
        --bs-modal-width: 700px;
    }
}

/*
 * Modales cuyo contenido (columnas de formulario lado a lado, inputs de
 * búsqueda, etc.) queda apretado en anchos intermedios. Bootstrap solo fija
 * el ancho de .modal-lg/.modal-xl a partir de sus breakpoints (992px y
 * 1200px respectivamente); por debajo caen al ancho base (500px), chico.
 *
 * En vez de un @media con un valor de ancho fijo (que generaba un "salto":
 * angosto -> más ancho que el valor final de Bootstrap -> se achica de
 * golpe al cruzar el breakpoint -> vuelve a crecer en el siguiente), se usa
 * `min()`: el ancho crece con el viewport (96vw) hasta alcanzar el tope
 * que Bootstrap ya usa en desktop, y se queda ahí sin escalones ni saltos,
 * sin depender de dónde caiga cada breakpoint.
 * Uso: agregar al .modal-dialog `modal-ancho-tablet` (modales modal-lg,
 * tope final 800px) o `modal-ancho-tablet-xl` (modales modal-xl, tope
 * final 1140px).
 */
.modal-ancho-tablet,
.modal-ancho-tablet-xl {
    margin: 1rem auto;
}

.modal-ancho-tablet {
    --bs-modal-width: min(96vw, 800px);
}

.modal-ancho-tablet-xl {
    --bs-modal-width: min(96vw, 1140px);
}

/*
 * Navbar (layout/auth.php): "Departamento" y el nombre de usuario tenían
 * flex-shrink-0 dentro de un <ul> flex-nowrap, junto a los íconos de
 * Alertas/Notificaciones — nada podía achicarse ni bajar de línea, así que
 * en mobile el conjunto desbordaba el ancho de pantalla (el botón de
 * usuario quedaba cortado en el borde derecho). Se les sacó flex-shrink-0
 * en el HTML para que puedan achicarse; acá se limita cuánto y se trunca
 * con "..." en vez de desbordar.
 */
@media (max-width: 575.98px) {
    .navbar-depto-nombre {
        max-width: 90px;
    }

    .navbar-username-texto {
        max-width: 70px;
    }
}

/*
 * DataTables (dentro de un .card-body.p-0): el layout por defecto del adapter
 * bootstrap5 envuelve length/filter arriba y info/paginate abajo en un `.row`
 * propio (ver dataTables.bootstrap5.js), separado del `.row.dt-row` que
 * contiene la tabla. Como el card-body no tiene padding (para que la tabla
 * quede a ras del borde), esas filas de controles quedaban pegadas al borde
 * de la card. Acá les devolvemos el padding sin afectar la tabla en sí.
 * Aplica a las tablas que NO fijan `dom` (historial de movimientos, historial
 * de pedidos, stock crítico, departamentos, proveedores).
 */
.card-body.p-0 .dataTables_wrapper > .row:not(.dt-row) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.card-body.p-0 .dataTables_wrapper > .row:first-child {
    padding-top: 1.25rem;
}

.card-body.p-0 .dataTables_wrapper > .row:last-child {
    padding-bottom: 1.25rem;
}

/*
 * Mismo problema, pero para las tablas que sí fijan `dom: "tip"`/`"rtip"`
 * (Mi Stock, Stock Global, formulario de Movimientos + su modal de ítems,
 * Lotes, Pedidos de compra, Pedidos recibidos): sin "l"/"f" en el dom, el
 * adapter bootstrap5 no genera ningún `.row` — info y paginación quedan como
 * <div class="dataTables_info"> y <div class="dataTables_paginate">, ambos
 * bloques de ancho completo, como hijos directos de .dataTables_wrapper
 * (verificado en el DOM real).
 */
.card-body.p-0 .dataTables_wrapper > .dataTables_info,
.card-body.p-0 .dataTables_wrapper > .dataTables_paginate {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.card-body.p-0 .dataTables_wrapper > .dataTables_paginate {
    padding-bottom: 1.25rem;
}

/* Form Controls */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--cms-border);
    padding: 0.6rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Select2 (combos con buscador, ej. proveedores) alineado al look de .form-select */
.select2-container--default .select2-selection--single {
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--cms-border);
    padding: 0.6rem 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Select2 multiple (ej. filtros de Historial de Movimientos) alineado al look de .form-select.
   45.1875px = mismo alto que .form-control/.form-select con su padding actual
   (0.6rem*2 + line-height 24px + 2px borde), medido en el navegador. */
.select2-container--default .select2-selection--multiple {
    min-height: 45.1875px;
    border-radius: 8px;
    border: 1px solid var(--cms-border);
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 auto;
    min-width: 60px;
}

/* select2 usa un <textarea rows="2"> para la búsqueda inline; sin este ajuste
   reserva 2 líneas (48px) y agranda el campo entero aunque esté vacío. */
.select2-container--default .select2-selection--multiple .select2-search__field {
    height: 1.5em;
    min-height: 0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Home Grid Menu */
.menu-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.menu-item:hover .card {
    transform: translateY(-5px);
    border-color: var(--cms-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--cms-primary);
}

/* Botón outline-warning con texto oscuro (borde amarillo, letra negra) */
.btn-outline-warning-dark.btn-outline-warning,
.btn-outline-warning-dark.btn-outline-warning:hover,
.btn-outline-warning-dark.btn-outline-warning:focus {
    color: #212529;
}