:root {
    --table-surface: var(--surface-strong);
    --table-border: var(--border);
    --table-head-start: #0f172a;
    --table-head-end: #111827;
    --table-head-text: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: rgba(37, 99, 235, 0.055);
    --table-row-selected: rgba(29, 78, 216, 0.09);
    --table-row-dirty: rgba(251, 191, 36, 0.15);
    --table-row-new: rgba(219, 234, 254, 0.72);
}

/* Shared page shells for table-heavy screens. */
.list-page,
.units-page,
.voip-page,
.report-shell,
.report-container,
.section-shell {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 6px 12px;
}

.ui-page.ui-page--wide .ui-hero,
.list-page .ui-hero,
.units-page .ui-hero,
.voip-page .ui-hero,
.report-shell .ui-hero,
.report-container .ui-hero {
    margin-bottom: 6px;
}

.table-shell,
.table-container,
.table-card,
.ap-table-card,
.report-table-wrap,
.table-responsive,
.ui-table-shell {
    border: 1px solid var(--table-border);
    border-radius: 12px;
    background: var(--table-surface);
    box-shadow: var(--shadow-md);
}

/* Keep scroll containers usable while the table itself owns the visual shell. */
.table-container,
.table-wrap,
.table-card,
.ui-table-shell,
.report-table-wrap,
.gt-table-shell,
.cs-table-wrap,
.table-responsive,
#table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

/* Unified table shell for list, report, and detail screens. */
.table-container table,
.table-wrap table,
.table-card table,
.ui-table-shell table,
.report-table-wrap table,
.gt-table-shell table,
.cs-table-wrap table,
.table-responsive table,
#table-wrap table,
.data-table,
.gatecore-table,
.sites-table,
.people-table,
.ap-table,
.cs-table,
.cp-table,
.fd-table,
.fr-table,
.wf-table,
.face-devices-table,
.report-table,
.two-up,
.compact,
.table-editable,
.sheet-table,
.detail-table,
#gatecoreTable,
#peopleTable,
#vehiclesTable,
#licensesTable,
#accessLogsTable,
#reportsTable,
#smsLogsTable,
#scheduleTable,
#voip-accounts-table,
table[id$="Table"] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--table-surface);
    color: var(--text);
    border: 1px solid var(--table-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.table-container table thead th,
.table-wrap table thead th,
.table-card table thead th,
.ui-table-shell table thead th,
.report-table-wrap table thead th,
.gt-table-shell table thead th,
.cs-table-wrap table thead th,
.table-responsive table thead th,
#table-wrap table thead th,
.data-table thead th,
.gatecore-table thead th,
.sites-table thead th,
.people-table thead th,
.ap-table thead th,
.cs-table thead th,
.cp-table thead th,
.fd-table thead th,
.fr-table thead th,
.wf-table thead th,
.face-devices-table thead th,
.report-table thead th,
.two-up thead th,
.compact thead th,
.table-editable thead th,
.sheet-table thead th,
.detail-table thead th,
#gatecoreTable thead th,
#peopleTable thead th,
#vehiclesTable thead th,
#licensesTable thead th,
#accessLogsTable thead th,
#reportsTable thead th,
#smsLogsTable thead th,
#scheduleTable thead th,
#voip-accounts-table thead th,
table[id$="Table"] thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(180deg, var(--table-head-start) 0%, var(--table-head-end) 100%);
    color: var(--table-head-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.table-container table thead tr:nth-child(2) th,
.table-wrap table thead tr:nth-child(2) th,
.table-card table thead tr:nth-child(2) th,
.ui-table-shell table thead tr:nth-child(2) th,
.report-table-wrap table thead tr:nth-child(2) th,
.gt-table-shell table thead tr:nth-child(2) th,
.cs-table-wrap table thead tr:nth-child(2) th,
.table-responsive table thead tr:nth-child(2) th,
#table-wrap table thead tr:nth-child(2) th,
.data-table thead tr:nth-child(2) th,
.gatecore-table thead tr:nth-child(2) th,
.sites-table thead tr:nth-child(2) th,
.people-table thead tr:nth-child(2) th,
.ap-table thead tr:nth-child(2) th,
.cs-table thead tr:nth-child(2) th,
.cp-table thead tr:nth-child(2) th,
.fd-table thead tr:nth-child(2) th,
.fr-table thead tr:nth-child(2) th,
.wf-table thead tr:nth-child(2) th,
.face-devices-table thead tr:nth-child(2) th,
.report-table thead tr:nth-child(2) th,
.two-up thead tr:nth-child(2) th,
.compact thead tr:nth-child(2) th,
.table-editable thead tr:nth-child(2) th,
.sheet-table thead tr:nth-child(2) th,
.detail-table thead tr:nth-child(2) th,
#gatecoreTable thead tr:nth-child(2) th,
#peopleTable thead tr:nth-child(2) th,
#vehiclesTable thead tr:nth-child(2) th,
#licensesTable thead tr:nth-child(2) th,
#accessLogsTable thead tr:nth-child(2) th,
#reportsTable thead tr:nth-child(2) th,
#smsLogsTable thead tr:nth-child(2) th,
#scheduleTable thead tr:nth-child(2) th,
#voip-accounts-table thead tr:nth-child(2) th,
table[id$="Table"] thead tr:nth-child(2) th {
    top: 2.7rem;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    color: #334155;
    border-bottom: 1px solid var(--table-border);
    text-transform: none;
    letter-spacing: 0.04em;
}

.table-container table tbody td,
.table-wrap table tbody td,
.table-card table tbody td,
.ui-table-shell table tbody td,
.report-table-wrap table tbody td,
.gt-table-shell table tbody td,
.cs-table-wrap table tbody td,
.table-responsive table tbody td,
#table-wrap table tbody td,
.data-table tbody td,
.gatecore-table tbody td,
.sites-table tbody td,
.people-table tbody td,
.ap-table tbody td,
.cs-table tbody td,
.cp-table tbody td,
.fd-table tbody td,
.fr-table tbody td,
.wf-table tbody td,
.face-devices-table tbody td,
.report-table tbody td,
.two-up tbody td,
.compact tbody td,
.table-editable tbody td,
.sheet-table tbody td,
.detail-table tbody td,
#gatecoreTable tbody td,
#peopleTable tbody td,
#vehiclesTable tbody td,
#licensesTable tbody td,
#accessLogsTable tbody td,
#reportsTable tbody td,
#smsLogsTable tbody td,
#scheduleTable tbody td,
#voip-accounts-table tbody td,
    table[id$="Table"] tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--table-border);
    vertical-align: top;
    line-height: 1.45;
}

.table-container table tbody tr:nth-child(even),
.table-wrap table tbody tr:nth-child(even),
.table-card table tbody tr:nth-child(even),
.ui-table-shell table tbody tr:nth-child(even),
.report-table-wrap table tbody tr:nth-child(even),
.gt-table-shell table tbody tr:nth-child(even),
.cs-table-wrap table tbody tr:nth-child(even),
.table-responsive table tbody tr:nth-child(even),
#table-wrap table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.gatecore-table tbody tr:nth-child(even),
.sites-table tbody tr:nth-child(even),
.people-table tbody tr:nth-child(even),
.ap-table tbody tr:nth-child(even),
.cs-table tbody tr:nth-child(even),
.cp-table tbody tr:nth-child(even),
.fd-table tbody tr:nth-child(even),
.fr-table tbody tr:nth-child(even),
.wf-table tbody tr:nth-child(even),
.face-devices-table tbody tr:nth-child(even),
.report-table tbody tr:nth-child(even),
.two-up tbody tr:nth-child(even),
.compact tbody tr:nth-child(even),
.table-editable tbody tr:nth-child(even),
.sheet-table tbody tr:nth-child(even),
.detail-table tbody tr:nth-child(even),
#gatecoreTable tbody tr:nth-child(even),
#peopleTable tbody tr:nth-child(even),
#vehiclesTable tbody tr:nth-child(even),
#licensesTable tbody tr:nth-child(even),
#accessLogsTable tbody tr:nth-child(even),
#reportsTable tbody tr:nth-child(even),
#smsLogsTable tbody tr:nth-child(even),
#scheduleTable tbody tr:nth-child(even),
#voip-accounts-table tbody tr:nth-child(even),
table[id$="Table"] tbody tr:nth-child(even) {
    background: var(--table-row-even);
}

.table-container table tbody tr:hover,
.table-wrap table tbody tr:hover,
.table-card table tbody tr:hover,
.ui-table-shell table tbody tr:hover,
.report-table-wrap table tbody tr:hover,
.gt-table-shell table tbody tr:hover,
.cs-table-wrap table tbody tr:hover,
.table-responsive table tbody tr:hover,
#table-wrap table tbody tr:hover,
.data-table tbody tr:hover,
.gatecore-table tbody tr:hover,
.sites-table tbody tr:hover,
.people-table tbody tr:hover,
.ap-table tbody tr:hover,
.cs-table tbody tr:hover,
.cp-table tbody tr:hover,
.fd-table tbody tr:hover,
.fr-table tbody tr:hover,
.wf-table tbody tr:hover,
.face-devices-table tbody tr:hover,
.report-table tbody tr:hover,
.two-up tbody tr:hover,
.compact tbody tr:hover,
.table-editable tbody tr:hover,
.sheet-table tbody tr:hover,
.detail-table tbody tr:hover,
#gatecoreTable tbody tr:hover,
#peopleTable tbody tr:hover,
#vehiclesTable tbody tr:hover,
#licensesTable tbody tr:hover,
#accessLogsTable tbody tr:hover,
#reportsTable tbody tr:hover,
#smsLogsTable tbody tr:hover,
#scheduleTable tbody tr:hover,
#voip-accounts-table tbody tr:hover,
table[id$="Table"] tbody tr:hover {
    background: var(--table-row-hover);
}

.table-container table tbody tr.selected,
.table-wrap table tbody tr.selected,
.table-card table tbody tr.selected,
.ui-table-shell table tbody tr.selected,
.report-table-wrap table tbody tr.selected,
.gt-table-shell table tbody tr.selected,
.cs-table-wrap table tbody tr.selected,
.table-responsive table tbody tr.selected,
#table-wrap table tbody tr.selected,
.data-table tbody tr.selected,
.gatecore-table tbody tr.selected,
.sites-table tbody tr.selected,
.people-table tbody tr.selected,
.ap-table tbody tr.selected,
.cs-table tbody tr.selected,
.cp-table tbody tr.selected,
.fd-table tbody tr.selected,
.fr-table tbody tr.selected,
.wf-table tbody tr.selected,
.face-devices-table tbody tr.selected,
.report-table tbody tr.selected,
.two-up tbody tr.selected,
.compact tbody tr.selected,
.table-editable tbody tr.selected,
.sheet-table tbody tr.selected,
.detail-table tbody tr.selected,
#gatecoreTable tbody tr.selected,
#peopleTable tbody tr.selected,
#vehiclesTable tbody tr.selected,
#licensesTable tbody tr.selected,
#accessLogsTable tbody tr.selected,
#reportsTable tbody tr.selected,
#smsLogsTable tbody tr.selected,
#scheduleTable tbody tr.selected,
#voip-accounts-table tbody tr.selected,
table[id$="Table"] tbody tr.selected,
.report-table tbody tr.is-selected,
.people-table tbody tr.person-row.selected,
.table-editable tbody tr.row-dirty,
.sites-table tbody tr.row-dirty,
.table-editable tbody tr.new-row-highlight,
.sites-table tbody tr.new-row-highlight {
    background: var(--table-row-selected);
    box-shadow: inset 3px 0 0 #2563eb;
}

.table-editable tbody tr.row-dirty td,
.sites-table tbody tr.row-dirty td {
    background: var(--table-row-dirty);
}

.table-editable tbody tr.new-row-highlight td,
.sites-table tbody tr.new-row-highlight td {
    background: var(--table-row-new);
}

.table-container table tbody tr:last-child td,
.table-wrap table tbody tr:last-child td,
.table-card table tbody tr:last-child td,
.ui-table-shell table tbody tr:last-child td,
.report-table-wrap table tbody tr:last-child td,
.gt-table-shell table tbody tr:last-child td,
.cs-table-wrap table tbody tr:last-child td,
.table-responsive table tbody tr:last-child td,
#table-wrap table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.gatecore-table tbody tr:last-child td,
.sites-table tbody tr:last-child td,
.people-table tbody tr:last-child td,
.ap-table tbody tr:last-child td,
.cs-table tbody tr:last-child td,
.cp-table tbody tr:last-child td,
.fd-table tbody tr:last-child td,
.fr-table tbody tr:last-child td,
.wf-table tbody tr:last-child td,
.face-devices-table tbody tr:last-child td,
.report-table tbody tr:last-child td,
.two-up tbody tr:last-child td,
.compact tbody tr:last-child td,
.table-editable tbody tr:last-child td,
.sheet-table tbody tr:last-child td,
.detail-table tbody tr:last-child td,
#gatecoreTable tbody tr:last-child td,
#peopleTable tbody tr:last-child td,
#vehiclesTable tbody tr:last-child td,
#licensesTable tbody tr:last-child td,
#accessLogsTable tbody tr:last-child td,
#reportsTable tbody tr:last-child td,
#smsLogsTable tbody tr:last-child td,
#scheduleTable tbody tr:last-child td,
#voip-accounts-table tbody tr:last-child td,
table[id$="Table"] tbody tr:last-child td {
    border-bottom: 0;
}

.table-container table a,
.table-wrap table a,
.table-card table a,
.ui-table-shell table a,
.report-table-wrap table a,
.gt-table-shell table a,
.cs-table-wrap table a,
.table-responsive table a,
#table-wrap table a,
.data-table a,
.gatecore-table a,
.sites-table a,
.people-table a,
.ap-table a,
.cs-table a,
.cp-table a,
.fd-table a,
.fr-table a,
.wf-table a,
.face-devices-table a,
.report-table a,
.two-up a,
.compact a,
.table-editable a,
.sheet-table a,
.detail-table a,
#gatecoreTable a,
#peopleTable a,
#vehiclesTable a,
#licensesTable a,
#accessLogsTable a,
#reportsTable a,
#smsLogsTable a,
#scheduleTable a,
#voip-accounts-table a,
table[id$="Table"] a {
    color: var(--brand-strong);
    font-weight: 700;
    text-decoration: none;
}

.table-container table a:hover,
.table-wrap table a:hover,
.table-card table a:hover,
.ui-table-shell table a:hover,
.report-table-wrap table a:hover,
.gt-table-shell table a:hover,
.cs-table-wrap table a:hover,
.table-responsive table a:hover,
#table-wrap table a:hover,
.data-table a:hover,
.gatecore-table a:hover,
.sites-table a:hover,
.people-table a:hover,
.ap-table a:hover,
.cs-table a:hover,
.cp-table a:hover,
.fd-table a:hover,
.fr-table a:hover,
.wf-table a:hover,
.face-devices-table a:hover,
.report-table a:hover,
.two-up a:hover,
.compact a:hover,
.table-editable a:hover,
.sheet-table a:hover,
.detail-table a:hover,
#gatecoreTable a:hover,
#peopleTable a:hover,
#vehiclesTable a:hover,
#licensesTable a:hover,
#accessLogsTable a:hover,
#reportsTable a:hover,
#smsLogsTable a:hover,
#scheduleTable a:hover,
#voip-accounts-table a:hover,
table[id$="Table"] a:hover {
    text-decoration: underline;
}

.table-empty,
.data-table-empty,
.empty,
.report-empty,
.report-loading,
.gt-empty-cell,
.cs-empty,
.face-devices-empty {
    color: var(--muted);
    text-align: center;
    padding: 1.4rem 1rem;
}

.report-loading {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

@media (max-width: 768px) {
    .table-container table thead th,
    .table-wrap table thead th,
    .table-card table thead th,
    .ui-table-shell table thead th,
    .report-table-wrap table thead th,
    .gt-table-shell table thead th,
    .cs-table-wrap table thead th,
    .table-responsive table thead th,
    #table-wrap table thead th,
    .data-table thead th,
    .gatecore-table thead th,
    .sites-table thead th,
    .people-table thead th,
    .ap-table thead th,
    .cs-table thead th,
    .cp-table thead th,
    .fd-table thead th,
    .fr-table thead th,
    .wf-table thead th,
    .face-devices-table thead th,
    .report-table thead th,
    .two-up thead th,
    .compact thead th,
    .table-editable thead th,
    .sheet-table thead th,
    .detail-table thead th,
    #gatecoreTable thead th,
    #peopleTable thead th,
    #vehiclesTable thead th,
    #licensesTable thead th,
    #accessLogsTable thead th,
    #reportsTable thead th,
    #smsLogsTable thead th,
    #scheduleTable thead th,
    #voip-accounts-table thead th,
    table[id$="Table"] thead th,
    .table-container table tbody td,
    .table-wrap table tbody td,
    .table-card table tbody td,
    .ui-table-shell table tbody td,
    .report-table-wrap table tbody td,
    .gt-table-shell table tbody td,
    .cs-table-wrap table tbody td,
    .table-responsive table tbody td,
    #table-wrap table tbody td,
    .data-table tbody td,
    .gatecore-table tbody td,
    .sites-table tbody td,
    .people-table tbody td,
    .ap-table tbody td,
    .cs-table tbody td,
    .cp-table tbody td,
    .fd-table tbody td,
    .fr-table tbody td,
    .wf-table tbody td,
    .face-devices-table tbody td,
    .report-table tbody td,
    .two-up tbody td,
    .compact tbody td,
    .table-editable tbody td,
    .sheet-table tbody td,
    .detail-table tbody td,
    #gatecoreTable tbody td,
    #peopleTable tbody td,
    #vehiclesTable tbody td,
    #licensesTable tbody td,
    #accessLogsTable tbody td,
    #reportsTable tbody td,
    #smsLogsTable tbody td,
    #scheduleTable tbody td,
    #voip-accounts-table tbody td,
    table[id$="Table"] tbody td {
        padding: 0.54rem 0.64rem;
    }
}