/* Admin records only: no login, header, dashboard, or shared theme ownership. */
#appView .section table[data-record-table] {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

#appView .section table[data-record-table] :is(th, td) {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    white-space: normal;
}

#appView .section table[data-record-table] th {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

#appView .section table[data-record-table] td {
    line-height: 1.5;
    border-bottom: 1px solid var(--border-color);
}

#appView .section table[data-record-table] :is(.acciones-tabla, .festivos-actions) {
    flex-wrap: wrap;
    gap: 6px;
}

#appView .section table[data-record-table] button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-block: 2px;
}

#appView .section table[data-record-table] :is(button, input, tr[tabindex]):focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

/* Undo legacy fixed log widths and ellipses, not their action colors or display states.
   The old log sheet uses !important sizing; only those non-visibility properties need it here. */
#appView #tabla-logs[data-record-table] {
    min-width: 0 !important;
    width: 100% !important;
}

#appView #tabla-logs[data-record-table] :is(th, td) {
    width: auto !important;
    padding: 10px 12px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible;
    white-space: normal;
}

#appView #tabla-logs[data-record-table] :is(span, strong, small) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}

#appView .section table[data-record-table] code {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    #appView .section table[data-record-table]:not([hidden]) {
        display: block;
        margin-top: 0;
    }

    /* Visually clipped, not display:none: header associations and AX column names remain. */
    #appView .section table[data-record-table] thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #appView .section table[data-record-table] tbody:not([hidden]) {
        display: block;
    }

    #appView .section table[data-record-table] tbody tr:not([hidden]) {
        display: block;
        margin: 8px 0;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    /* No !important display: logs' inline display:none and hidden ancestors always win. */
    #appView .section table[data-record-table] tbody td:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
        gap: 4px 10px;
        width: auto;
        min-width: 0;
        padding: 8px 10px;
        text-align: left;
    }

    #appView .section table[data-record-table] td[data-record-label]::before {
        content: attr(data-record-label) / '';
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        grid-column: 1;
    }

    #appView .section table[data-record-table] td > * {
        min-width: 0;
        max-width: 100%;
        grid-column: 2;
    }

    #appView .section table[data-record-table] td[data-record-context]::after {
        content: attr(data-record-context) / '';
        grid-column: 2;
    }

    #appView .section table[data-record-table] td[colspan] {
        grid-template-columns: minmax(0, 1fr);
    }

    #appView .section table[data-record-table] td[colspan] > * {
        grid-column: 1;
    }
}