/* ========================================================================== */
/* Entria design foundation                                                   */
/* Canonical visual language for every authenticated product and module.      */
/* ========================================================================== */

:root {
    --entria-ink: #0d1b2a;
    --entria-ink-soft: #213455;
    --entria-muted: #667391;
    --entria-surface: #ffffff;
    --entria-surface-soft: #f8faff;
    --entria-border: #dce5f3;
    --entria-border-soft: #e8eef6;
    --entria-primary: #2563eb;
    --entria-accent: #14b8a6;
    --entria-control-height: 48px;
    --entria-control-radius: 14px;
    --entria-panel-radius: 20px;
    --entria-modal-radius: 24px;
    --entria-icon-button-size: 42px;
    --entria-gap-sm: 8px;
    --entria-gap-md: 14px;
    --entria-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.05);
    --entria-shadow-modal: 0 28px 70px rgba(15, 23, 42, 0.22);
    --entria-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.portal-content { color: var(--entria-ink); }

.portal-content-inner > :where(
    .school-screen, .wellbeing-screen, .assessment-screen, .results-screen,
    .action-plan-screen, .comms-screen, .cases-screen, .gov-screen, .dossier-screen
) { min-width: 0; }

/* Titles and introductory copy */
.portal-content :where(
    .dashboard-header, .school-page-header, .action-plan-header, .assessment-header,
    .results-header, .comms-header, .cases-page-header, .gov-header,
    .dossier-header, .policy-detail-header, .wellbeing-hero
) p {
    color: var(--entria-muted) !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.portal-content :where(
    .school-panel-header h2, .school-section-title, .school-subpanel h3,
    .school-ops-panel h3, .action-plan-lane > header, .comms-lane > header
) {
    color: var(--entria-ink-soft);
    font-weight: 800;
}

/* Panels and cards */
.portal-content :where(
    .dashboard-panel, .panel-card, .panel-subcard, .kpi-card, .school-panel,
    .school-subpanel, .school-table-shell, .action-plan-list-panel,
    .action-plan-calendar article, .wellbeing-card
) {
    border-color: var(--entria-border-soft);
    border-radius: var(--entria-panel-radius);
    background: var(--entria-surface);
    box-shadow: var(--entria-shadow-soft);
}

/* Buttons */
.portal-content :where(
    .school-primary-button, .school-secondary-button, .school-filter-button,
    .school-secondary-link-button, .wellbeing-primary, .wellbeing-secondary
) {
    min-height: var(--entria-control-height);
    padding-inline: 18px;
    border-radius: var(--entria-control-radius);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
}

.portal-content :where(.school-primary-button, .wellbeing-primary) {
    border: 0;
    background: linear-gradient(135deg, var(--entria-primary) 0%, var(--entria-accent) 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.portal-content :where(
    .school-secondary-button, .school-filter-button, .school-secondary-link-button,
    .wellbeing-secondary
) {
    border: 1px solid var(--entria-border);
    background: #fff;
    color: var(--entria-ink-soft);
    box-shadow: none;
}

.portal-content :where(
    .school-primary-button, .school-secondary-button, .school-filter-button,
    .school-secondary-link-button, .wellbeing-primary, .wellbeing-secondary,
    .school-icon-button, .app-modal-close
):focus-visible {
    outline: none;
    box-shadow: var(--entria-focus);
}

.portal-content :where(.school-icon-button, .app-modal-close) {
    display: inline-grid;
    place-items: center;
    width: var(--entria-icon-button-size);
    height: var(--entria-icon-button-size);
    min-width: var(--entria-icon-button-size);
    min-height: var(--entria-icon-button-size);
    padding: 0;
    border: 1px solid var(--entria-border);
    border-radius: 13px;
    background: #fff;
    color: #40506a;
    box-shadow: none;
}

.portal-content :where(.school-icon-button, .app-modal-close):hover {
    border-color: #b9c9df;
    background: #f8faff;
    color: var(--entria-primary);
}

.portal-content :where(
    .school-primary-button, .school-secondary-button, .school-filter-button,
    .school-secondary-link-button, .wellbeing-primary, .wellbeing-secondary,
    .school-icon-button, .app-modal-close
):disabled {
    transform: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.portal-content :where(
    .school-primary-button, .school-secondary-button, .school-filter-button,
    .school-secondary-link-button, .school-icon-button
) svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* Labels and controls */
.portal-content :where(
    .school-labeled-field, .action-plan-filters label, .action-plan-form-grid label,
    .comms-form-grid label
) {
    gap: var(--entria-gap-sm);
    color: #5f6e87;
    font-size: 0.82rem;
    font-weight: 750;
}

.portal-content :where(
    .school-search-field, .school-date-field input, select.school-select-field,
    input.school-input-field, input.school-code-input, .school-check-field,
    .app-form-textarea, .action-plan-form-grid input, .action-plan-form-grid select,
    .action-plan-form-grid textarea, .wellbeing-form-grid input,
    .wellbeing-form-grid select, .wellbeing-form-grid textarea
) {
    width: 100%;
    min-height: var(--entria-control-height);
    border: 1px solid var(--entria-border);
    border-radius: var(--entria-control-radius);
    background-color: #fff;
    color: var(--entria-ink-soft);
    font: inherit;
    font-weight: 650;
    box-shadow: none;
}

.portal-content :where(
    .school-search-field, .school-date-field input, select.school-select-field,
    input.school-input-field, input.school-code-input, .app-form-textarea,
    .action-plan-form-grid input, .action-plan-form-grid select,
    .action-plan-form-grid textarea, .wellbeing-form-grid input,
    .wellbeing-form-grid select, .wellbeing-form-grid textarea
):focus,
.portal-content .school-search-field:focus-within {
    border-color: rgba(37, 99, 235, 0.58);
    outline: none;
    box-shadow: var(--entria-focus);
}

.portal-content :where(
    .school-date-field input, select.school-select-field,
    input.school-input-field, input.school-code-input
) { padding-inline: 14px; }

.portal-content :where(
    .app-form-textarea, .action-plan-form-grid textarea, .wellbeing-form-grid textarea
) {
    min-height: 112px;
    padding: 13px 14px;
    line-height: 1.5;
    resize: vertical;
}

.portal-content .school-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
}

.portal-content .school-search-field > svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
    flex: 0 0 18px;
    color: #72809a;
}

.portal-content .school-search-field input {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-weight: 650;
}

/* Compatibility for screens that wrap a select inside .school-select-field. */
.portal-content div.school-select-field {
    display: flex;
    align-items: center;
    min-height: var(--entria-control-height);
    overflow: hidden;
    border: 1px solid var(--entria-border);
    border-radius: var(--entria-control-radius);
    background: #fff;
}

.portal-content div.school-select-field:focus-within {
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: var(--entria-focus);
}

.portal-content div.school-select-field > select {
    width: 100%;
    min-height: calc(var(--entria-control-height) - 2px);
    padding: 0 38px 0 14px;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: var(--entria-ink-soft);
    font: inherit;
    font-weight: 650;
}

/* Filter command bars: one rhythm across JornadaBot and Entorno laboral. */
.portal-content :where(
    .school-toolbar-grid, .school-filters-row, .action-plan-filters, .comms-filters,
    .comms-ack-filters, .assessment-filters, .results-filters, .cases-filters
) { gap: var(--entria-gap-md); }

.portal-content :where(
    .action-plan-filters, .comms-filters, .comms-ack-filters,
    .assessment-filters, .results-filters, .cases-filters
) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Tables */
.portal-content :where(
    .school-table-shell, .action-plan-list-panel, .wellbeing-centers-table-shell
) {
    border: 1px solid var(--entria-border-soft);
    border-radius: var(--entria-panel-radius);
    background: #fff;
}

.portal-content :where(
    .school-data-table, .action-plan-table, .wellbeing-centers-table
) th {
    padding: 14px 16px;
    background: #f8faff;
    color: #5f6e87;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}

.portal-content :where(
    .school-data-table, .action-plan-table, .wellbeing-centers-table
) td {
    padding: 15px 16px;
    border-top: 1px solid var(--entria-border-soft);
    color: var(--entria-ink-soft);
    vertical-align: middle;
}

.portal-content :where(
    .school-data-table, .action-plan-table, .wellbeing-centers-table
) tbody tr:hover td { background: #fbfcff; }

.portal-content :where(
    .school-status-pill, .school-type-pill, .priority, .action-plan-status
) {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Modals */
.app-modal-backdrop {
    z-index: 2000;
    padding: 24px;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(5px);
}

.app-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, 820px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid var(--entria-border);
    border-radius: var(--entria-modal-radius);
    background: #fff;
    box-shadow: var(--entria-shadow-modal);
}

.app-modal.app-modal-small,
.app-modal.small { width: min(100%, 560px); }

.app-modal.app-modal-wide,
.app-modal.wide { width: min(100%, 1180px); }

.app-modal-header,
.app-modal-footer {
    gap: 14px;
    padding: 20px 24px;
}

.app-modal-header { border-bottom: 1px solid var(--entria-border-soft); }
.app-modal-footer {
    border-top: 1px solid var(--entria-border-soft);
    background: #fff;
}

.app-modal-title { gap: 5px; }
.app-modal-title h3 {
    color: var(--entria-ink);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.app-modal-title p {
    color: var(--entria-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.app-modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 24px;
}

.app-form-grid { gap: 16px; }

@media (max-width: 760px) {
    .app-modal-backdrop {
        align-items: end;
        padding: 10px;
    }

    .app-modal,
    .app-modal.app-modal-small,
    .app-modal.app-modal-wide,
    .app-modal.small,
    .app-modal.wide {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 20px;
    }

    .app-modal-header,
    .app-modal-body,
    .app-modal-footer { padding: 16px; }

    .app-modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .app-modal-footer > :where(button, a) { width: 100%; }

    .portal-content :where(
        .action-plan-filters, .comms-filters, .comms-ack-filters,
        .assessment-filters, .results-filters, .cases-filters
    ) {
        padding: 0;
        border-radius: 0;
    }
}
/* Final compatibility layer for isolated component styles. */
.portal-content .school-primary-button,
.portal-content .school-secondary-button,
.portal-content .school-filter-button,
.portal-content .school-secondary-link-button {
    min-height: var(--entria-control-height);
    padding-inline: 18px;
    border-radius: var(--entria-control-radius);
    font-size: .92rem;
    font-weight: 800;
}

.portal-content .school-primary-button {
    border-color: transparent;
    background: linear-gradient(135deg, var(--entria-primary) 0%, var(--entria-accent) 100%);
    color: #fff;
}

.portal-content .school-secondary-button,
.portal-content .school-filter-button,
.portal-content .school-secondary-link-button {
    border-color: var(--entria-border);
    background: #fff;
    color: var(--entria-ink-soft);
}

.portal-content .school-icon-button {
    width: var(--entria-icon-button-size);
    height: var(--entria-icon-button-size);
    min-width: var(--entria-icon-button-size);
    min-height: var(--entria-icon-button-size);
    border-color: var(--entria-border);
    border-radius: 13px;
    background: #fff;
}

.portal-content .school-labeled-field > :where(
    input.school-code-input,
    input.school-input-field,
    select.school-select-field
),
.portal-content .school-date-field > input {
    min-height: var(--entria-control-height);
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

.portal-content .school-labeled-field > .app-form-textarea {
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

.portal-content .action-plan-filters,
.portal-content .comms-filters.school-toolbar-grid,
.portal-content .comms-ack-filters.school-toolbar-grid,
.portal-content .cases-filters,
.portal-content .cases-guide-toolbar,
.portal-content .assessment-list-filters {
    gap: var(--entria-gap-md);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.portal-content .action-plan-filters :where(select, input),
.portal-content .cases-filters :where(select, input),
.portal-content .cases-guide-toolbar select,
.portal-content .assessment-list-filters select {
    min-height: var(--entria-control-height);
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

.portal-content .action-plan-filters .action-plan-search > div,
.portal-content .comms-filters .school-select-field,
.portal-content .comms-filters .school-search-field,
.portal-content .comms-ack-filters .school-select-field,
.portal-content .comms-ack-filters .school-search-field,
.portal-content .school-toolbar-grid-referrals .school-search-field {
    min-height: var(--entria-control-height);
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

.portal-content .comms-filters .school-select-field select,
.portal-content .comms-filters .school-search-field input {
    height: calc(var(--entria-control-height) - 2px);
}

.portal-content .action-plan-filters .action-plan-clear,
.portal-content .comms-filters .comms-clear,
.portal-content .comms-ack-filters .comms-clear,
.portal-content .cases-clear-filters,
.portal-content .cases-guide-toolbar button {
    min-height: var(--entria-control-height);
}

.portal-content .school-data-table th,
.portal-content .action-plan-table th,
.portal-content .wellbeing-centers-table th {
    padding: 14px 16px;
    background: #f8faff;
    color: #5f6e87;
    font-size: .82rem;
    font-weight: 750;
    text-transform: none;
}

.portal-content .school-data-table td,
.portal-content .action-plan-table td,
.portal-content .wellbeing-centers-table td {
    padding: 15px 16px;
    border-top-color: var(--entria-border-soft);
}

body .app-modal-backdrop > .app-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border-color: var(--entria-border);
    border-radius: var(--entria-modal-radius);
    background: #fff;
    box-shadow: var(--entria-shadow-modal);
}

body .app-modal-backdrop > .app-modal > .app-modal-header,
body .app-modal-backdrop > .app-modal > .app-modal-footer {
    padding: 20px 24px;
}

body .app-modal-backdrop > .app-modal > .app-modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 22px 24px;
}

body .app-modal-backdrop > .app-modal > .app-modal-header .app-modal-close {
    width: var(--entria-icon-button-size);
    height: var(--entria-icon-button-size);
    min-width: var(--entria-icon-button-size);
    min-height: var(--entria-icon-button-size);
    border-color: var(--entria-border);
    border-radius: 13px;
}

@media (max-width: 760px) {
    .portal-content .action-plan-filters,
    .portal-content .comms-filters.school-toolbar-grid,
    .portal-content .comms-ack-filters.school-toolbar-grid,
    .portal-content .cases-filters,
    .portal-content .cases-guide-toolbar,
    .portal-content .assessment-list-filters {
        padding: 0;
        border-radius: 0;
    }

    body .app-modal-backdrop > .app-modal > .app-modal-header,
    body .app-modal-backdrop > .app-modal > .app-modal-body,
    body .app-modal-backdrop > .app-modal > .app-modal-footer {
        padding: 16px;
    }
}
/* Command bars sit on the page; data tables keep their own surface. */
.portal-content .school-panel:has(.school-toolbar-grid),
.portal-content .school-panel:has(.school-filters-row),
.portal-content .school-panel:has(.school-toolbar),
.portal-content .school-panel:has(.school-toolbar-actions-row) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Standard data-list pattern: Employees is the visual reference for every operational table. */
.portal-content .school-table-shell {
    max-height: none;
    scrollbar-gutter: auto;
    box-shadow: none;
}

.portal-content .attendance-table-panel,
.portal-content .evidence-table-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.portal-content .attendance-table-panel > .school-subpanel-header,
.portal-content .evidence-table-panel > .school-subpanel-header {
    margin: 0 0 14px;
    padding: 0;
}

.portal-content .attendance-table-preparing {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    border-color: var(--entria-border-soft);
    background: #ffffff;
}

.portal-content .attendance-table-preparing .attendance-table {
    visibility: hidden;
}

.portal-content .attendance-table-preparing::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    content: "Preparando vista de asistencia...";
    color: var(--entria-muted);
    font-size: 0.94rem;
    font-weight: 700;
    text-align: center;
    background: #ffffff;
}

.portal-content .attendance-table-panel .column-picker {
    z-index: 100;
}

.portal-content .attendance-table-panel .column-picker-menu {
    z-index: 120;
    max-height: min(420px, 70vh);
    overflow-y: auto;
}

.portal-content .evidence-table-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.portal-content .evidence-table {
    min-width: 980px;
}

.portal-content .company-vacation-table-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.portal-content .company-vacation-table {
    min-width: 1320px;
    table-layout: auto;
}

.portal-content .company-vacation-table th {
    white-space: nowrap;
}

.portal-content .company-vacation-table .school-actions-cell {
    position: sticky;
    right: 0;
    z-index: 1;
    min-width: 196px;
    padding-left: 18px;
    background: #ffffff;
    box-shadow: -10px 0 16px rgba(15, 35, 65, 0.035);
}

.portal-content .company-vacation-table thead .school-actions-cell {
    z-index: 2;
    background: #f8faff;
}

.portal-content .school-data-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.portal-content .school-data-table .school-actions-cell {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

.portal-content .company-catalog-table .school-actions-cell {
    display: table-cell;
}

.portal-content .company-coverage-table td:last-child {
    display: table-cell;
}

.portal-content .company-coverage-dot {
    margin-right: 8px;
    vertical-align: middle;
}

.portal-content .company-catalog-table td.school-actions-cell .school-icon-button + .school-icon-button {
    margin-left: 8px;
}

.portal-content .company-catalog-table-shell {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-gutter: auto;
}

.portal-content .company-department-table {
    min-width: 720px;
}

.portal-content .school-table-shell .dashboard-empty-state {
    min-height: 84px;
    padding: 20px;
}

.portal-content .company-catalog-summary-shell {
    margin-top: 18px;
    overflow-x: auto;
    overflow-y: visible;
}

.portal-content .company-catalog-summary-table {
    min-width: 720px;
    table-layout: fixed;
}

.portal-content .company-catalog-summary-table th:first-child {
    width: auto;
}

.portal-content .company-catalog-summary-table .company-catalog-summary-count {
    width: 180px;
}

.portal-content .company-catalog-summary-table .school-actions-cell {
    width: 150px;
}

.portal-content .company-catalog-summary-table .company-catalog-toggle {
    min-width: 108px;
}

.portal-content .company-catalog-expanded-row > td {
    padding: 0;
    background: #f8faff;
}

.portal-content .company-catalog-inline-detail {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid var(--entria-border-soft);
    border-bottom: 1px solid var(--entria-border-soft);
}

.portal-content .company-catalog-inline-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    align-items: end;
    gap: 18px;
}

.portal-content .company-catalog-inline-header h3 {
    margin: 0;
    color: var(--entria-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.portal-content .company-catalog-inline-header p {
    margin: 5px 0 0;
    color: var(--entria-muted);
}

.portal-content .company-catalog-modal-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 0.8fr);
    gap: 12px;
    align-items: end;
}

.portal-content .company-catalog-empty {
    padding: 32px 18px;
    color: var(--entria-muted);
    text-align: center;
}

@media (max-width: 760px) {
    .portal-content .company-catalog-inline-header,
    .portal-content .company-catalog-modal-filters,
    .portal-content .company-catalog-inline-header .company-catalog-modal-filters {
        grid-template-columns: 1fr;
    }
}

.portal-content .checkpoint-table-shell {
    overflow: auto;
    border-radius: var(--entria-panel-radius);
}

.portal-content .checkpoint-table {
    min-width: 980px;
    table-layout: fixed;
}

.portal-content .checkpoint-table th:nth-child(1) { width: 18%; }
.portal-content .checkpoint-table th:nth-child(2) { width: 23%; }
.portal-content .checkpoint-table th:nth-child(3) { width: 11%; }
.portal-content .checkpoint-table th:nth-child(4) { width: 11%; }
.portal-content .checkpoint-table th:nth-child(5) { width: 22%; }
.portal-content .checkpoint-table th:nth-child(6) { width: 10%; }
.portal-content .checkpoint-table th:nth-child(7) { width: 104px; }

.portal-content .checkpoint-table > :is(thead, tbody) > tr > :last-child {
    min-width: 104px;
    padding-left: 16px;
    padding-right: 24px;
    text-align: center;
}

.portal-content .checkpoint-table .checkpoint-action-menu {
    justify-content: center;
    width: 100%;
}

.portal-content .checkpoint-action-popover {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 2200;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    max-height: min(420px, calc(100dvh - 32px));
    margin: 0;
    overflow-y: auto;
    transform: translate(-50%, -50%);
}

@supports (position-area: block-end) {
    .portal-content .checkpoint-action-popover {
        inset: auto;
        position-area: block-end span-inline-start;
        position-try-fallbacks:
            flip-block,
            flip-inline,
            flip-block flip-inline;
        margin: 8px 0 0;
        transform: none;
    }
}

.portal-content .school-table-link {
    color: #2563eb;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.portal-content .school-table-link:hover {
    text-decoration: underline;
}

.portal-content .biometric-device-table th:nth-child(1) { width: 28%; }
.portal-content .biometric-device-table th:nth-child(2) { width: 21%; }
.portal-content .biometric-device-table th:nth-child(3) { width: 19%; }
.portal-content .biometric-device-table th:nth-child(4) { width: 16%; }
.portal-content .biometric-device-table th:nth-child(5) { width: 10%; }
.portal-content .biometric-device-table th:nth-child(6) { width: 64px; }

.portal-content .biometric-event-filter-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: end;
}

.portal-content .biometric-event-filter-grid :where(.school-code-input, .school-select-field) {
    width: 100%;
    min-height: var(--entria-control-height);
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

@media (max-width: 1280px) {
    .portal-content .biometric-event-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.portal-content :where(
    .checkpoint-table,
    .biometric-device-table,
    .biometric-command-table,
    .biometric-events-table
) {
    border-collapse: separate;
    border-spacing: 0;
}

.portal-content :where(
    .checkpoint-table,
    .biometric-device-table,
    .biometric-command-table,
    .biometric-events-table
) > thead > tr:first-child > th:first-child {
    border-top-left-radius: 15px;
}

.portal-content :where(
    .checkpoint-table,
    .biometric-device-table,
    .biometric-command-table,
    .biometric-events-table
) > thead > tr:first-child > th:last-child {
    border-top-right-radius: 15px;
}

.portal-content :where(
    .checkpoint-table,
    .biometric-device-table,
    .biometric-command-table,
    .biometric-events-table
) > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 15px;
}

.portal-content :where(
    .checkpoint-table,
    .biometric-device-table,
    .biometric-command-table,
    .biometric-events-table
) > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 15px;
}

.portal-content .attendance-table-shell {
    max-height: none;
    scrollbar-gutter: auto;
}

.portal-content .shift-assignment-filter-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) minmax(190px, 1.35fr);
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: end;
}

.portal-content .shift-assignment-filter-grid :where(.school-code-input, .school-select-field) {
    min-height: var(--entria-control-height);
    border-color: var(--entria-border);
    border-radius: var(--entria-control-radius);
}

.portal-content .shift-assignment-filter-grid > .shift-assignment-employee-filter {
    grid-column: auto;
}

.portal-content .shift-schedule-form-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    width: 100%;
    max-width: none;
    min-width: 0;
    align-items: end;
}

.portal-content .shift-schedule-form-grid > .shift-employee-picker,
.portal-content .shift-schedule-form-grid > .shift-schedule-reason-field {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.portal-content .shift-schedule-form-grid .shift-employee-code-row,
.portal-content .shift-schedule-form-grid .shift-employee-code-row > .app-form-textarea {
    width: 100%;
    min-width: 0;
}

.portal-content .shift-schedule-form-grid .shift-check-field {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1280px) {
    .portal-content .shift-schedule-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .portal-content .shift-assignment-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .portal-content .biometric-event-filter-grid {
        grid-template-columns: 1fr;
    }

    .portal-content .shift-assignment-filter-grid {
        grid-template-columns: 1fr;
    }

    .portal-content .shift-schedule-form-grid,
    .portal-content .shift-schedule-form-grid .shift-employee-code-row {
        grid-template-columns: 1fr;
    }

    .portal-content .shift-schedule-form-grid .shift-search-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .portal-content .company-department-table,
    .portal-content .company-position-table,
    .portal-content .checkpoint-table,
    .portal-content .biometric-device-table,
    .portal-content .attendance-table {
        min-width: 900px;
    }
}
/* Legacy report tables inherit the same typography and row rhythm. */
.portal-content :where(.results-table, .data-table) {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.portal-content :where(.results-table, .data-table) th {
    padding: 14px 16px;
    background: #f8faff;
    color: #5f6e87;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}

.portal-content :where(.results-table, .data-table) td {
    padding: 15px 16px;
    border-top: 1px solid var(--entria-border-soft);
    color: var(--entria-ink-soft);
    vertical-align: middle;
}

.portal-content :where(.results-table, .data-table) tbody tr:hover td {
    background: #fbfcff;
}

.portal-content .results-table-wrap {
    border-color: var(--entria-border-soft);
    border-radius: var(--entria-panel-radius);
    background: #ffffff;
    box-shadow: none;
}

/* Employees and vacations become readable cards on narrow mobile screens. */
@media (max-width: 760px) {
    .portal-content :where(.employees-screen, .company-vacations-screen) .school-table-top-pagination {
        width: 100%;
        margin-block: 12px 14px;
    }

    .portal-content :where(.employees-screen, .company-vacations-screen) .school-table-top-pagination .school-table-footer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }

    .portal-content :where(.employees-screen, .company-vacations-screen) .school-pagination {
        flex-wrap: nowrap;
    }

    .portal-content :where(.employees-screen, .company-vacations-screen) .school-table-shell {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .portal-content :where(.employees-table, .company-vacation-table) {
        display: block;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        border: 0;
        background: transparent;
    }

    .portal-content :where(.employees-table, .company-vacation-table) thead {
        display: none;
    }

    .portal-content :where(.employees-table, .company-vacation-table) tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    .portal-content :where(.employees-table, .company-vacation-table) tbody tr {
        position: relative;
        display: grid;
        gap: 0;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--entria-border);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
    }

    .portal-content :where(.employees-table, .company-vacation-table) tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 16px;
        border: 0;
        border-top: 1px solid var(--entria-border-soft);
        color: var(--entria-ink-soft);
        text-align: right;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .portal-content :where(.employees-table, .company-vacation-table) tbody td::before {
        flex: 0 0 42%;
        content: attr(data-label);
        color: var(--entria-muted);
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
    }

    .portal-content :where(.employees-table, .company-vacation-table) :where(.employee-mobile-primary, .company-vacation-employee-cell) {
        display: block;
        padding: 16px;
        border-top: 0;
        text-align: left;
    }

    .portal-content :where(.employees-table, .company-vacation-table) :where(.employee-mobile-primary, .company-vacation-employee-cell)::before {
        display: none;
    }

    .portal-content :where(.employees-table, .company-vacation-table) .school-person-cell {
        align-items: flex-start;
        min-width: 0;
    }

    .portal-content :where(.employees-table, .company-vacation-table) .school-person-cell > div:last-child {
        min-width: 0;
    }

    .portal-content :where(.employees-table, .company-vacation-table) :where(.school-person-title, .school-person-subtitle) {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .portal-content .employees-table .employee-mobile-checkbox {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 1;
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .portal-content .employees-table .employee-mobile-checkbox::before {
        display: none;
    }

    .portal-content .employees-table:has(.employee-mobile-checkbox) .employee-mobile-primary {
        padding-right: 54px;
    }

    .portal-content :where(.employees-table, .company-vacation-table) .school-actions-cell {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        padding: 12px 16px;
        background: #fbfcff;
        box-shadow: none;
    }

    .portal-content :where(.employees-table, .company-vacation-table) .school-actions-cell::before {
        margin-right: auto;
        text-align: left;
    }

    .portal-content .company-vacation-table .company-vacation-mobile-secondary {
        display: none;
    }

    .portal-content .company-vacation-table .school-actions-cell .school-secondary-button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 14px;
    }

    .portal-content .company-vacation-table .school-actions-cell {
        flex-wrap: wrap;
    }

    .portal-content .company-vacation-table .school-actions-cell::before {
        flex: 0 0 100%;
    }

    .portal-content :where(.employees-screen, .company-vacations-screen) .school-table-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .portal-content :where(.employees-screen, .company-vacations-screen) .school-table-footer .school-table-footer-actions {
        justify-content: space-between;
        width: 100%;
    }
}

/* Shared mobile treatment for the remaining simple data tables in Entria. */
@media (max-width: 760px) {
    .portal-content :where(
        .school-table-shell,
        .action-plan-list-panel,
        .results-table-wrap
    ).entria-mobile-card-table-shell {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) {
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: auto;
        border: 0;
        border-collapse: separate;
        background: transparent;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody tr {
        position: relative;
        display: grid;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--entria-border);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody td {
        position: static;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px 16px;
        border: 0;
        border-top: 1px solid var(--entria-border-soft);
        background: transparent;
        box-shadow: none;
        color: var(--entria-ink-soft);
        line-height: 1.4;
        text-align: right;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody td:first-child {
        border-top: 0;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody td::before {
        flex: 0 0 42%;
        max-width: 42%;
        content: attr(data-label);
        color: var(--entria-muted);
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1.35;
        text-align: left;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) tbody td[data-label=""]::before {
        display: none;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) :where(
        .school-person-cell,
        .school-person-title,
        .school-person-subtitle
    ) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .school-person-cell {
        justify-content: flex-end;
        text-align: left;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-select-cell {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 1;
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-select-cell::before {
        display: none;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-select-cell + td {
        min-height: 54px;
        padding-right: 54px;
        border-top: 0;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-actions-cell {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 16px;
        background: #fbfcff;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-actions-cell::before {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 2px;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-actions-cell :where(
        button,
        a
    ) {
        max-width: 100%;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-empty-row {
        display: block;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-empty-row td {
        display: block;
        padding: 24px 16px;
        border: 0;
        text-align: center;
    }

    .portal-content .entria-mobile-card-table:not(.employees-table):not(.company-vacation-table) .entria-mobile-empty-row td::before {
        display: none;
    }
}