/* Estilo de los grids del sitio de Tickets de Soporte.

   Vive aqui y NO en el <style> de cada pantalla porque son dos grids casi identicos —Mis Tickets y
   la Bandeja de Sistemas— y una copia por pantalla se desincroniza a la primera que alguien toque.
   Es el mismo criterio del CSS del paginador y del foco de los modales, que ya son globales (ver el
   CLAUDE.md de la raiz).

   Lo UNICO que se queda en cada pantalla son las etiquetas de la vista movil
   (.mud-table-cell:nth-child(N)::before), porque dependen del orden de columnas de esa pantalla y
   los dos grids no tienen las mismas.

   Se carga desde App.razor. Al ser un .css de verdad, aqui @media se escribe con una sola arroba:
   la doble es solo dentro de un .razor, donde Razor se come la primera. */

.grid-bordered .mud-table-cell {
    border-right: 1px solid var(--mud-palette-table-lines);
    padding: 3px 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.grid-bordered .mud-table-cell:last-child {
    border-right: none;
}

.grid-bordered th.mud-table-cell {
    border-right: 1px solid var(--mud-palette-table-lines);
    padding: 4px 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.grid-bordered th.mud-table-cell:last-child {
    border-right: none;
}

.grid-bordered thead th.mud-table-cell {
    background: linear-gradient(90deg, var(--brand-grad-start, #1e293b) 0%, var(--brand-grad-end, #0f172a) 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-right-color: rgba(255, 255, 255, 0.15) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.grid-bordered thead th.mud-table-cell:last-child {
    border-right: none !important;
}

.grid-bordered .mud-table-pagination,
.grid-bordered tfoot,
.grid-bordered tfoot tr,
.grid-bordered tfoot td,
.grid-bordered .mud-table-pagination-toolbar {
    background: linear-gradient(90deg, var(--brand-grad-start, #1e293b) 0%, var(--brand-grad-end, #0f172a) 100%) !important;
    color: #ffffff !important;
}

.grid-bordered .mud-table-pagination-caption,
.grid-bordered .mud-table-pagination-select,
.grid-bordered .mud-select,
.grid-bordered .mud-select-input,
.grid-bordered .mud-input-root {
    color: rgba(255, 255, 255, 0.85) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button,
.grid-bordered tfoot .mud-icon-button {
    color: rgba(255, 255, 255, 0.85) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button:hover,
.grid-bordered tfoot .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.grid-bordered .mud-table-pagination .mud-icon-button:disabled,
.grid-bordered tfoot .mud-icon-button:disabled {
    color: rgba(255, 255, 255, 0.35) !important;
}

.grid-bordered .mud-select-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.grid-bordered table {
    table-layout: auto !important;
}

.col-auto {
    width: 1px !important;
    white-space: nowrap !important;
}

/* El titulo es la columna elastica: es texto libre de hasta 150 y es lo unico que se lee de verdad
   en la lista. Las demas quedan pegadas a su contenido. */
.col-titulo {
    white-space: normal !important;
    min-width: 220px;
}

/* ── Vista movil: el grid se vuelve tarjetas apiladas ─────────────────────────────────────
   Aqui va todo menos las etiquetas ::before, que son de cada pantalla. */
@media (max-width: 600px) {
    .grid-bordered table {
        table-layout: fixed !important;
    }

    .grid-bordered thead {
        display: none;
    }

    .grid-bordered tbody tr {
        display: block;
        margin-bottom: 8px;
        border-bottom: 2px solid #1e293b;
    }

    .grid-bordered tbody td.mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right !important;
        border-right: none !important;
        padding: 6px 12px;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    .grid-bordered tbody td.mud-table-cell::before {
        font-weight: 600;
        text-align: left;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .grid-bordered tbody td.mud-table-cell .mud-text,
    .grid-bordered tbody td.mud-table-cell .mud-stack {
        text-align: right;
    }

    .grid-bordered .mud-table-cell,
    .grid-bordered .mud-typography {
        font-size: 16px !important;
    }

    /* Area tactil comoda en telefono (~44x44) para los botones de Acciones. */
    .grid-bordered tbody td.mud-table-cell .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
    }

    .grid-bordered tbody td.mud-table-cell .mud-icon-button .mud-icon-root {
        font-size: 1.6rem !important;
    }
}

/* ── Escritorio: la pagina no hace scroll, lo hace el grid por dentro ─────────────────── */
@media (min-width: 1024px) {
    .page-no-scroll {
        height: calc(100dvh - 64px - 1rem);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .grid-scroll-container {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .grid-scroll-container .mud-table {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .grid-scroll-container .mud-table-container {
        flex: 1;
        overflow-y: auto !important;
        min-height: 0;
    }
}