/*
 * K2S single-surface table contract.
 * Tables keep one outer boundary; filters, rows, and pagination are rails
 * inside that boundary instead of separate floating cards.
 */
body.app-shell {
    --table-surface-bg: #ffffff;
    --table-surface-soft: #f8fbff;
    --table-surface-border: #dbeafe;
    --table-surface-divider: #e2e8f0;
    --table-surface-radius: 12px;
    --table-surface-shadow: none;
}

/* Management tables: one outer card only. */
body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content :is(.table-section, .main-content-container) {
    background: var(--table-surface-bg) !important;
    border: 1px solid var(--table-surface-border) !important;
    border-radius: var(--table-surface-radius) !important;
    box-shadow: var(--table-surface-shadow) !important;
    overflow: hidden;
}

body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content :is(
    .table-header,
    .controls-header,
    .pagination-wrapper,
    .pagination-footer
) {
    background: var(--table-surface-bg) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content :is(.table-header, .controls-header) {
    border: 0 !important;
    border-bottom: 1px solid var(--table-surface-divider) !important;
}

body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content :is(.pagination-wrapper, .pagination-footer) {
    border: 0 !important;
    border-top: 1px solid var(--table-surface-divider) !important;
}

body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content .stat-card {
    box-shadow: none !important;
    transform: none !important;
}

body.app-shell:not(.dark-mode):is(
    .page-users,
    .page-device,
    .page-driver,
    .page-device_model
) .page-content .stat-card:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* Reports: the page itself is the card; filters and table are internal zones. */
body.app-shell:not(.dark-mode).report-surface .page-content .report-page {
    background: var(--table-surface-bg) !important;
    border: 1px solid var(--table-surface-border) !important;
    border-radius: var(--table-surface-radius) !important;
    box-shadow: var(--table-surface-shadow) !important;
    padding: 20px !important;
}

body.app-shell:not(.dark-mode).report-surface .page-content .report-page > :is(
    .report-card,
    .report-card.light,
    .report-table-wrapper,
    .dataTables_wrapper
) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.app-shell:not(.dark-mode).report-surface .page-content .report-page > .report-card {
    padding: 16px 0 18px !important;
}

body.app-shell:not(.dark-mode).report-surface .page-content .report-page > .report-table-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 1px solid var(--table-surface-divider) !important;
}

body.app-shell:not(.dark-mode).report-surface .page-content .dataTables_wrapper {
    box-shadow: none !important;
}

/* POI needs two functional panes, but neither should float above the page. */
body.app-shell:not(.dark-mode).page-poi .page-content :is(.poi-list-pane, .poi-map-pane) {
    box-shadow: none !important;
    border-color: var(--table-surface-border) !important;
}

body.app-shell:not(.dark-mode).page-poi .page-content :is(
    .poi-table-toolbar,
    .poi-filter-row,
    .poi-table-container
) {
    box-shadow: none !important;
}

/* Legacy table cards on remaining pages receive the same flat treatment. */
body.app-shell:not(.dark-mode) .page-content :is(
    .card,
    .content-card,
    .dash-card,
    .panel,
    .line-reports-card,
    .sys-notify-shell
):has(table),
body.app-shell:not(.dark-mode) .page-content :is(
    .table-container,
    .table-wrapper,
    .dataTables_wrapper,
    .line-reports-card,
    .sys-notify-shell
) {
    box-shadow: none !important;
}

body.app-shell:not(.dark-mode) .page-content :is(article, section, div):has(> table),
body.app-shell:not(.dark-mode) .page-content :is(article, section, div):has(> :is(.table-container, .table-wrapper, .dataTables_wrapper)) {
    box-shadow: none !important;
}

body.app-shell:not(.dark-mode) .page-content :is(
    .line-reports-card,
    .sys-notify-shell
) {
    box-shadow: none !important;
}

/* Older management modules still carry the same shadow as an inline style. */
body.app-shell:not(.dark-mode) .page-content [style*="box-shadow: 0 2px 10px"] {
    box-shadow: none !important;
}

body.app-shell:not(.dark-mode) .page-content :is(
    .table-container,
    .table-wrapper
) :is(.table-container, .table-wrapper, .dataTables_wrapper) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    body.app-shell:not(.dark-mode).report-surface .page-content .report-page {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    body.app-shell:not(.dark-mode):is(
        .page-users,
        .page-device,
        .page-driver,
        .page-device_model
    ) .page-content :is(.table-section, .main-content-container) {
        border-radius: 10px !important;
    }
}