/*
 * MACC visual system normalization.
 *
 * Loaded after page-specific styles so legacy Bootstrap, Halfmoon,
 * Semantic/MDB classes, and page-local CSS resolve back to one visible
 * product language. Support pages are intentionally excluded from the
 * heavier normalization pass because their visual direction was left as-is.
 */

:root {
    --macc-surface-frame-bg: var(--macc-card-bg);
    --macc-surface-frame-border: var(--macc-card-border);
    --macc-surface-frame-shadow: var(--macc-card-shadow);
    --macc-surface-nested-bg: var(--macc-surface-2);
    --macc-surface-nested-border: var(--macc-border-subtle);
    --macc-status-neutral-bg: var(--macc-badge-soft-bg);
    --macc-status-neutral-border: var(--macc-badge-soft-border);
    --macc-status-neutral-text: var(--macc-badge-soft-text);
    --macc-status-info-bg: var(--macc-token-info-bg);
    --macc-status-info-border: var(--macc-token-info-border);
    --macc-status-info-text: var(--macc-token-info-text);
    --macc-status-success-bg: var(--macc-token-success-bg);
    --macc-status-success-border: var(--macc-token-success-border);
    --macc-status-success-text: var(--macc-token-success-text);
    --macc-status-warning-bg: var(--macc-token-warning-bg);
    --macc-status-warning-border: var(--macc-token-warning-border);
    --macc-status-warning-text: var(--macc-token-warning-text);
    --macc-status-danger-bg: var(--macc-token-danger-bg);
    --macc-status-danger-border: var(--macc-token-danger-border);
    --macc-status-danger-text: var(--macc-token-danger-text);
    --macc-table-wrapper-bg: var(--macc-surface-frame-bg);
    --macc-table-wrapper-border: var(--macc-surface-frame-border);
    --macc-table-wrapper-shadow: var(--macc-elevation-card);
    --macc-data-table-scroll-max-block-size: min(var(--macc-scrollable-list-max-height, 65vh), 42rem);
    --macc-data-table-scroll-compact-max-block-size: min(var(--macc-scrollable-list-compact-max-height), 32rem);
    --macc-data-table-scroll-modal-max-block-size: min(var(--macc-scrollable-list-modal-max-height), 30rem);
    --macc-data-panel-bg: var(--macc-card-bg);
    --macc-data-panel-border: var(--macc-card-border);
    --macc-data-panel-shadow: var(--macc-elevation-card);
    --macc-data-toolbar-bg: var(--macc-surface);
    --macc-data-head-bg: rgba(255, 255, 255, 0.035);
    --macc-data-row-bg: rgba(255, 255, 255, 0.012);
    --macc-data-row-alt: rgba(255, 255, 255, 0.035);
    --macc-data-row-hover: rgba(255, 255, 255, 0.06);
    --macc-data-row-selected: rgba(var(--macc-accent-rgb), 0.16);
    --macc-data-border: var(--macc-grid-row-border);
    --macc-data-head-text: var(--macc-grid-header-text);
    --macc-data-body-text: var(--macc-table-body-text);
    --macc-data-cell-pad-x: 1rem;
    --macc-data-cell-pad-y: 0.72rem;
    --macc-data-cell-pad-y-compact: 0.64rem;
    --macc-toolbar-control-height: calc(var(--macc-control-height-sm) - 0.12rem);
    --macc-toolbar-control-pad-x: 0.65rem;
    --macc-status-height: 1.2rem;
    --macc-status-pad-y: 0.18rem;
    --macc-status-pad-x: 0.5rem;
    --macc-status-radius: var(--macc-radius-control);
    --macc-notification-size: 1.25rem;
    --macc-document-surface-bg: #ffffff;
    --macc-document-surface-text: #1f2937;
    --macc-document-media-bg: #000000;
    --macc-alert-banner-bg: var(--macc-surface);
    --macc-alert-banner-border: var(--macc-border-subtle);
    --macc-alert-banner-text: var(--macc-text-primary);
    --macc-progress-bg: var(--macc-surface-2);
    --macc-progress-fill: var(--macc-accent);
}

html[data-bs-theme="light"] {
    --macc-data-panel-bg: #fbfdfe;
    --macc-data-panel-border: rgba(0, 65, 83, 0.14);
    --macc-data-panel-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) inset, 0 8px 18px rgba(15, 23, 42, 0.07);
    --macc-data-toolbar-bg: #fbfdfe;
    --macc-data-head-bg: #eef5f7;
    --macc-data-row-bg: #fbfdfe;
    --macc-data-row-alt: #f3f8fa;
    --macc-data-row-hover: #eaf3f5;
    --macc-data-row-selected: rgba(0, 65, 83, 0.09);
    --macc-data-border: rgba(0, 65, 83, 0.12);
    --macc-data-head-text: rgba(0, 37, 49, 0.78);
    --macc-data-body-text: rgba(0, 37, 49, 0.82);
    --macc-alert-banner-bg: #fbfdfe;
    --macc-alert-banner-border: rgba(0, 65, 83, 0.14);
    --macc-alert-banner-text: rgba(0, 37, 49, 0.9);
    --macc-progress-bg: rgba(0, 65, 83, 0.1);
    --macc-document-surface-bg: #ffffff;
    --macc-document-surface-text: #1f2937;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell {
    color: var(--macc-page-text);
}

/* Surfaces: one panel/card language across Bootstrap, Halfmoon, custom pages. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card,
    .panel,
    .segment,
    .ui.segment,
    .macc-card,
    .macc-panel,
    .macc-page .panel,
    .settings-card,
    .integration-card,
    .integration-panel,
    .camera-card,
    .camera-hub-card,
    .camera-settings-card,
    .camera-alerting-card,
    .mask-card,
    .mask-panel,
    .logs-card,
    .logs-panel,
    .alerts-card,
    .alert-card,
    .dashboard-card,
    .customer-dashboard-card,
    .customer-dashboard-alert-card,
    .reports-card,
    .reports-panel,
    .metric-card,
    .summary-card,
    .info-card,
    .kdp-card,
    .client-card,
    .admin-card,
    .macc-library-card,
    .macc-library-panel,
    .macc-resource-list,
    .macc-alert-editor-summary-card,
    .macc-alert-modal-section,
    .macc-integration-card,
    .macc-appliance-shell,
    .macc-appliance-list,
    .macc-location-card
) {
    background: var(--macc-surface-frame-bg) !important;
    border: 1px solid var(--macc-surface-frame-border) !important;
    border-radius: var(--macc-radius-panel) !important;
    box-shadow: var(--macc-surface-frame-shadow) !important;
    color: var(--macc-page-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card .card,
    .panel .panel,
    .macc-card .macc-card,
    .macc-panel,
    .card-body .macc-panel,
    .settings-card .settings-card,
    .camera-card .camera-card,
    .reports-card .reports-card,
    .macc-library-panel .macc-library-panel,
    .macc-alert-modal-section .macc-alert-modal-section
) {
    background: var(--macc-surface-nested-bg) !important;
    border-color: var(--macc-surface-nested-border) !important;
    box-shadow: var(--macc-elevation-flat) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card-header,
    .card-footer,
    .panel-header,
    .panel-footer,
    .modal-header,
    .modal-footer,
    .reports-card-header,
    .camera-card-header,
    .logs-card-header
) {
    background: transparent !important;
    border-color: var(--macc-border-subtle) !important;
}

/*
 * Shared .panel layout. Pages used to each redefine .panel-header padding,
 * flex layout, and .panel-title typography (access-workstation, ipscan,
 * camera-masking, manage-common, etc.), which produced subtle drift between
 * pages — 14px 16px here, 1rem there, no flex on Alerts, etc. Centralize the
 * defaults here so every .panel inside .macc-shell reads the same regardless
 * of the per-page wrapper class.
 */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .panel-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--macc-border-subtle);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .panel-body {
    padding: 1rem;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .panel-title {
    color: var(--macc-text-primary);
    font-family: var(--macc-font-sans);
    font-size: var(--macc-font-size-ui);
    font-weight: var(--macc-font-weight-strong, 700);
    line-height: var(--macc-line-height-tight, 1.2);
    margin: 0;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .panel-hint {
    color: var(--macc-text-tertiary, var(--macc-text-muted));
    font-size: var(--macc-font-size-label);
    line-height: var(--macc-line-height-ui);
    margin-top: 0.18rem;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .modal-content,
    .macc-modal,
    .dropdown-menu,
    .swal2-popup
) {
    background: var(--macc-modal-bg) !important;
    border: 1px solid var(--macc-modal-border) !important;
    border-radius: var(--macc-radius-modal) !important;
    box-shadow: var(--macc-elevation-modal) !important;
    color: var(--macc-page-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-modal-header,
    .macc-modal-footer
) {
    background: transparent !important;
    border-color: var(--macc-border-subtle) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-modal-body
) {
    color: var(--macc-page-text) !important;
    font-size: var(--macc-font-size-ui) !important;
    line-height: var(--macc-line-height-body) !important;
}

/* Buttons: one hierarchy and one shape across Bootstrap, Semantic UI, custom controls. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn,
    .ui.button,
    button[type="button"]:not(.btn-close):not(.nav-link):not(.macc-sidebar-toggle):not(.macc-switch):not(.camera-table-switch-button):not(.macc-users-sort),
    button[type="submit"],
    button[type="reset"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    min-height: var(--macc-btn-height) !important;
    border-radius: var(--macc-radius-control) !important;
    box-shadow: var(--macc-btn-shadow) !important;
    font-family: var(--macc-font-sans) !important;
    font-size: var(--macc-font-size-ui) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    line-height: var(--macc-line-height-ui) !important;
    letter-spacing: var(--macc-letter-spacing-normal) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-primary,
    .btn-outline-primary,
    .ui.blue.button,
    .ui.olive.button,
    button[type="submit"]:not(.btn-danger):not(.btn-outline-danger)
) {
    background: var(--macc-btn-primary-bg) !important;
    border-color: var(--macc-btn-primary-border) !important;
    color: var(--macc-btn-primary-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-primary,
    .btn-outline-primary,
    .ui.blue.button,
    .ui.olive.button,
    button[type="submit"]:not(.btn-danger):not(.btn-outline-danger)
):hover {
    background: var(--macc-btn-primary-bg-hover) !important;
    border-color: var(--macc-btn-primary-border-hover) !important;
    color: var(--macc-btn-primary-text-hover) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-secondary,
    .btn-outline-secondary,
    .btn-default,
    .ui.button.default,
    a.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning),
    button[type="button"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-close):not(.nav-link):not(.macc-sidebar-toggle):not(.macc-switch):not(.camera-table-switch-button):not(.macc-users-sort)
) {
    background: var(--macc-btn-secondary-bg) !important;
    border-color: var(--macc-btn-secondary-border) !important;
    color: var(--macc-btn-secondary-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-danger,
    .btn-outline-danger,
    .ui.red.button,
    .btn-del,
    [data-shape-action="delete"],
    button[id*="delete" i],
    button[name*="delete" i],
    button[formaction*="delete" i]
) {
    background: var(--macc-btn-danger-bg) !important;
    border-color: var(--macc-btn-danger-border) !important;
    color: var(--macc-btn-danger-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-success,
    .btn-outline-success,
    .ui.green.button,
    .macc-button-save,
    .macc-button-add
) {
    background: var(--macc-btn-success-bg) !important;
    border-color: var(--macc-btn-success-border) !important;
    color: var(--macc-btn-success-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-sm,
    .btn.btn-sm,
    .ui.mini.button,
    .ui.tiny.button,
    .macc-library-filter,
    .macc-location-filter,
    .reports-preset,
    .reported-toggle-btn,
    .alerts-advanced-toggle,
    .macc-schedule-hours-pill,
    .day-chip
) {
    min-height: var(--macc-toolbar-control-height) !important;
    padding: 0.3rem var(--macc-toolbar-control-pad-x) !important;
    font-size: var(--macc-font-size-label) !important;
    line-height: 1 !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-library-filter,
    .macc-location-filter,
    .reports-preset,
    .reported-toggle-btn,
    .alerts-advanced-toggle,
    .macc-schedule-hours-pill,
    .day-chip
) {
    align-items: center !important;
    background: var(--macc-btn-secondary-bg) !important;
    border: 1px solid var(--macc-btn-secondary-border) !important;
    border-radius: var(--macc-radius-control) !important;
    box-shadow: var(--macc-btn-shadow) !important;
    color: var(--macc-btn-secondary-text) !important;
    display: inline-flex !important;
    font-family: var(--macc-font-sans) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    gap: 0.35rem !important;
    justify-content: center !important;
    white-space: nowrap;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-library-filter.is-active,
    .macc-location-filter.is-active,
    .reports-preset.is-active,
    .reports-preset[aria-pressed="true"],
    .reported-toggle-btn.is-active,
    .alerts-advanced-toggle.is-open,
    .macc-schedule-hours-pill.is-active,
    .day-chip.is-active,
    .day-chip[aria-pressed="true"]
) {
    background: var(--macc-btn-primary-bg) !important;
    border-color: var(--macc-btn-primary-border) !important;
    color: var(--macc-btn-primary-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-alert-editor-page .days-grid .day-chip.active,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-alert-editor-page .days-grid .day-chip[aria-pressed="true"] {
    background: var(--macc-accent, #004153) !important;
    border-color: var(--macc-accent, #004153) !important;
    color: var(--macc-btn-primary-text, #fff) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-alert-editor-page .days-grid .day-chip.active::after,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-alert-editor-page .days-grid .day-chip[aria-pressed="true"]::after {
    display: none !important;
}

/* Tables and data grids: one wrapper, header, row, and responsive behavior. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .table-responsive,
    .macc-table-wrapper,
    .macc-table-shell,
    .alerts-table-wrap,
    .macc-alert-camera-table-wrap,
    .macc-appliance-table-wrap,
    .macc-client-table-wrap,
    .macc-mask-table-wrap,
    .ipscan-table-wrap,
    .system-health-table-wrap,
    .logs-contact-table-wrap,
    .client-kdp-table-wrap,
    .camera-table-wrap,
    .camera-table-wrapper,
    .camera-table-shell,
    .diagnostic-table-wrap,
    .camera-import-preview-table-wrap,
    .camera-appliance-table-wrap,
    .manual-table-wrap,
    .alerts-table-wrapper,
    .logs-table-wrapper,
    .reports-table-wrapper,
    .client-table-wrapper,
    .admin-table-wrapper,
    .scrollit,
    .macc-scroll-65vh,
    .tabulator
) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    overflow: auto;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card,
    .panel,
    .segment,
    .ui.segment,
    .macc-card,
    .macc-panel,
    .settings-card,
    .integration-card,
    .camera-card,
    .camera-hub-card,
    .camera-settings-card,
    .camera-alerting-card,
    .mask-card,
    .logs-card,
    .alerts-card,
    .alert-card,
    .dashboard-card,
    .customer-dashboard-card,
    .reports-card,
    .reports-panel,
    .admin-card
) :where(
    .table-responsive,
    .macc-table-wrapper,
    .macc-table-shell,
    .camera-table-wrapper,
    .camera-table-shell,
    .diagnostic-table-wrap,
    .camera-import-preview-table-wrap,
    .camera-appliance-table-wrap,
    .manual-table-wrap,
    .alerts-table-wrapper,
    .logs-table-wrapper,
    .reports-table-wrapper,
    .client-table-wrapper,
    .admin-table-wrapper,
    .scrollit,
    .macc-scroll-65vh
) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) {
    --bs-table-bg: var(--macc-data-row-bg);
    --bs-table-color: var(--macc-data-body-text);
    --bs-table-border-color: var(--macc-data-border);
    --bs-table-hover-bg: var(--macc-data-row-hover);
    --bs-table-hover-color: var(--macc-table-row-hover-text);
    background: var(--macc-data-row-bg) !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    color: var(--macc-data-body-text) !important;
    font-size: var(--macc-font-size-table) !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* ===========================================================================
   Responsive data tables — `.macc-table--stack`
   Below tablet width, dense Manage grids collapse from a horizontally
   scrolling table into one labelled card per row. macc-table-responsive.js
   stamps each cell's `data-label` from its column header so the card rows
   read "Label: value". The header is kept in the DOM (visually hidden) for
   assistive tech.
   =========================================================================== */
@media (max-width: 1024px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td {
        display: block;
        width: 100%;
        /* Cancel any min-width the desktop table set to force horizontal scroll. */
        min-width: 0;
    }

    /* Keep the header for screen readers but out of the visual flow. */
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr {
        margin: 0 0 0.75rem;
        padding: 0.2rem 0.9rem;
        border: 1px solid var(--macc-data-border, rgba(125, 125, 140, 0.22));
        border-radius: var(--macc-radius-panel, 8px);
        background: var(--macc-data-row-bg, transparent);
        overflow: hidden;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr:last-child {
        margin-bottom: 0;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 2.5rem;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--macc-data-border, rgba(125, 125, 140, 0.16));
        /* Undo the fixed-layout cell clamping (e.g. .camera-table cells) so the
           value can wrap and show in full inside the card. */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: right;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-inline-end: 1rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: var(--macc-font-size-label, 0.72rem);
        font-weight: 600;
        color: var(--macc-data-head-text, var(--macc-text-secondary, rgba(125, 125, 140, 0.85)));
    }

    /* Empty-state / "no results" rows span the whole card with no label. */
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td[data-fullspan] {
        justify-content: center;
        text-align: center;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell table.macc-table--stack > tbody > tr > td[data-fullspan]::before {
        content: none;
    }
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr) {
    --bs-table-bg: var(--macc-data-row-bg);
    --bs-table-color: var(--macc-data-body-text);
    background-color: var(--macc-data-row-bg);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr:nth-child(even)) {
    --bs-table-bg: var(--macc-data-row-alt);
    background-color: var(--macc-data-row-alt);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr:hover) {
    --bs-table-bg: var(--macc-data-row-hover);
    --bs-table-color: var(--macc-table-row-hover-text);
    background-color: var(--macc-data-row-hover);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr.is-selected, tbody tr.is-selected-camera, tbody tr.tabulator-selected) {
    --bs-table-bg: var(--macc-data-row-selected);
    --bs-table-color: var(--macc-table-row-hover-text);
    background-color: var(--macc-data-row-selected);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr.is-new-alert, tbody tr.is-new-camera, tbody tr.is-active, tbody tr.has-mask-pending) {
    --bs-table-bg: var(--macc-grid-row-new);
    --bs-table-color: var(--macc-table-row-hover-text);
    background-color: var(--macc-grid-row-new);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(tbody tr.is-new-alert:hover, tbody tr.is-new-camera:hover, tbody tr.is-active:hover, tbody tr.has-mask-pending:hover) {
    --bs-table-bg: var(--macc-grid-row-new-hover);
    background-color: var(--macc-grid-row-new-hover);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(th) {
    background: var(--macc-data-head-bg) !important;
    border-color: var(--macc-data-border) !important;
    color: var(--macc-data-head-text) !important;
    font-size: var(--macc-font-size-label) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    letter-spacing: var(--macc-letter-spacing-eyebrow) !important;
    padding: var(--macc-data-cell-pad-y) var(--macc-data-cell-pad-x) !important;
    text-transform: uppercase;
    vertical-align: middle !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table,
    table.camera-table,
    table.alerts-table,
    table.logs-table,
    table.reports-table,
    table.client-table,
    table.admin-table
) :where(td) {
    background-color: var(--bs-table-bg);
    border-color: var(--macc-data-border) !important;
    color: var(--bs-table-color) !important;
    padding: var(--macc-data-cell-pad-y) var(--macc-data-cell-pad-x) !important;
    vertical-align: middle !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table--compact,
    table.camera-table,
    table.alerts-table,
    table.logs-table
) :where(th, td) {
    padding-top: var(--macc-data-cell-pad-y-compact) !important;
    padding-bottom: var(--macc-data-cell-pad-y-compact) !important;
}

/*
 * Shared empty-state row. Each page had its own class (macc-table__empty,
 * macc-users-empty, alerts-table-empty, logs-empty, ip-scan-empty) so the
 * universal td padding rule above was flattening the empty row into a
 * normal-height row on some pages and leaving extra space on others. Pin all
 * of them to the same airy padding + muted typography so an empty list reads
 * as an empty state, not a regular row.
 */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    tr.macc-table__empty > td,
    tr.macc-users-empty > td,
    tr.is-empty > td,
    td.macc-table__empty,
    td.macc-users-empty,
    td.alerts-table-empty,
    td.logs-empty,
    td.ip-scan-empty,
    td.macc-empty-row
) {
    color: var(--macc-text-tertiary, var(--macc-text-muted)) !important;
    font-size: var(--macc-font-size-small) !important;
    padding: 2rem 1rem !important;
    text-align: center !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(table.macc-table),
    .panel:has(table.macc-table),
    .macc-users-panel
) {
    background: var(--macc-data-panel-bg) !important;
    border-color: var(--macc-data-panel-border) !important;
    box-shadow: var(--macc-data-panel-shadow) !important;
    overflow: hidden !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(table.macc-table) > .card-body,
    .panel:has(table.macc-table) > .panel-body
) {
    padding: 0 !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(table.macc-table) > .card-body:first-child:not(.p-0),
    .panel:has(table.macc-table) > .panel-header,
    .macc-users-panel-header
) {
    background: var(--macc-data-toolbar-bg) !important;
    border-bottom: 1px solid var(--macc-data-border) !important;
    padding: 0.85rem 1rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-location-table-card > .card-body:first-child,
    .macc-users-panel-header,
    .panel:has(table.macc-table) > .panel-header
) :where(.form-control, input[type="search"], input[type="text"]) {
    background: var(--macc-input-bg) !important;
    border-color: var(--macc-input-border) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-users-list {
    background: var(--macc-data-row-bg) !important;
    overflow: auto;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-users-row {
    background: var(--macc-data-row-bg) !important;
    border-bottom: 1px solid var(--macc-data-border) !important;
    color: var(--macc-data-body-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-users-row:nth-child(even) {
    background: var(--macc-data-row-alt) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-users-row:hover {
    background: var(--macc-data-row-hover) !important;
    color: var(--macc-table-row-hover-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-users-cell,
    .macc-users-head-cell
) {
    padding: var(--macc-data-cell-pad-y-compact) var(--macc-data-cell-pad-x) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-users-sort {
    all: unset !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer !important;
    display: inline-flex !important;
    gap: 0.35rem !important;
    min-height: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table td .btn,
    .macc-users-actions .btn,
    .alerts-table-actions .btn,
    .logs-actions-cell .btn,
    .macc-location-icon-btn
) {
    box-shadow: var(--macc-shadow-none, none) !important;
    font-size: var(--macc-font-size-label) !important;
    min-height: var(--macc-control-height-sm) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table td .btn,
    table.macc-table td button.btn,
    table.macc-table td a.btn,
    .alerts-table-actions .btn,
    .logs-actions-cell .btn,
    .macc-users-actions .btn,
    .macc-location-icon-btn
) {
    align-items: center !important;
    display: inline-flex !important;
    gap: 0.35rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0.35rem 0.65rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table th button:not(.btn),
    table.macc-table th a:not(.btn),
    table.macc-table th [role="button"],
    table.macc-table .macc-client-sortable,
    table.macc-table .macc-kdp-sortable
) {
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--macc-radius-control) !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-transform: inherit !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    table.macc-table th button:not(.btn):hover,
    table.macc-table th button:not(.btn):focus-visible,
    table.macc-table th a:not(.btn):hover,
    table.macc-table th a:not(.btn):focus-visible
) {
    color: var(--macc-table-row-hover-text) !important;
    outline: 2px solid var(--macc-focus-ring, rgba(255, 220, 95, 0.18)) !important;
    outline-offset: 2px;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .appliance-page #applianceTable .col-actions {
    width: 19rem !important;
    padding-left: var(--macc-data-cell-pad-x) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .appliance-page .appliance-action-btns {
    gap: 0.3rem !important;
    justify-content: flex-start !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .appliance-page .appliance-action-btn {
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    min-width: 0 !important;
    padding: 0 0.5rem !important;
}

/* Forms: one input, label, and helper text treatment. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-control,
    .form-select,
    .ui.input input,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    background: var(--macc-input-bg) !important;
    border-color: var(--macc-input-border) !important;
    border-radius: var(--macc-radius-control) !important;
    color: var(--macc-input-text) !important;
    font-size: var(--macc-font-size-ui) !important;
    line-height: var(--macc-line-height-ui) !important;
    min-height: var(--macc-control-height);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .input-group-sm > .input-group-text,
    .input-group-sm > .btn
) {
    min-height: var(--macc-toolbar-control-height) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-control:focus,
    .form-select:focus,
    .ui.input input:focus,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
    select:focus,
    textarea:focus
) {
    border-color: var(--macc-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--macc-input-focus-ring) !important;
    outline: none;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .input-group,
    .ui.input
) {
    align-items: stretch;
    border-radius: var(--macc-radius-control) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .input-group-text,
    .input-group .btn
) {
    align-items: center !important;
    background: var(--macc-input-bg) !important;
    border-color: var(--macc-input-border) !important;
    color: var(--macc-text-muted) !important;
    display: inline-flex !important;
    min-height: var(--macc-control-height) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .btn-icon,
    .icon-btn,
    .macc-icon-btn,
    .macc-location-icon-btn,
    .macc-topbar-icon-button
) {
    min-height: var(--macc-toolbar-control-height) !important;
    min-width: var(--macc-toolbar-control-height) !important;
    padding: 0 !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .input-group:focus-within .input-group-text,
    .input-group:focus-within .btn
) {
    border-color: var(--macc-input-focus-border) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    label,
    .form-label,
    .field > label,
    .ui.form .field > label,
    .reports-field label,
    .macc-alerts-field-label
) {
    color: var(--macc-text-secondary) !important;
    font-size: var(--macc-font-size-label) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    letter-spacing: var(--macc-letter-spacing-normal) !important;
    line-height: var(--macc-line-height-tight) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-text,
    .help-text,
    .field-hint,
    .macc-alerts-field-hint,
    .reports-help,
    .text-muted,
    .text-body-secondary
) {
    color: var(--macc-text-tertiary) !important;
    font-size: var(--macc-font-size-small) !important;
    line-height: var(--macc-line-height-ui) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-check,
    .form-switch,
    .macc-setting-toggle,
    .customer-support-permission-switch
) {
    color: var(--macc-text-secondary) !important;
    font-size: var(--macc-font-size-ui) !important;
    line-height: var(--macc-line-height-ui) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-check-input
) {
    background-color: var(--macc-input-bg) !important;
    border-color: var(--macc-input-border) !important;
    box-shadow: var(--macc-shadow-none, none) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-check-input:checked
) {
    background-color: var(--macc-btn-primary-bg) !important;
    border-color: var(--macc-btn-primary-border) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-check-input:focus
) {
    border-color: var(--macc-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--macc-input-focus-ring) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .form-switch .form-check-input
) {
    min-height: 1.25rem !important;
    width: 2.25rem !important;
}

/* Header controls are compact toolbar widgets, not full form fields. Keep them
   insulated from the global form treatment above so the appliance picker and
   nav search remain usable in the top bar. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form {
    align-items: center !important;
    background: var(--macc-input-bg, var(--macc-surface-2)) !important;
    border: 1px solid var(--macc-input-border, var(--macc-border-soft)) !important;
    border-radius: var(--macc-radius-panel, 8px) !important;
    display: inline-flex !important;
    flex: 1 1 18rem !important;
    gap: 0.45rem !important;
    height: 2.25rem !important;
    margin: 0 !important;
    max-width: 27rem !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 0.45rem 0 0.75rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form.is-locked {
    background: color-mix(in srgb, var(--macc-surface-2, #f8fafc) 82%, var(--macc-border-soft, #cbd5e1)) !important;
    border-color: color-mix(in srgb, var(--macc-border-soft, #cbd5e1) 80%, transparent) !important;
    opacity: 0.88;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-label {
    align-items: center !important;
    color: var(--macc-text-muted, #64748b) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: var(--macc-font-size-micro, 0.75rem) !important;
    font-weight: 700 !important;
    gap: 0.35rem !important;
    letter-spacing: var(--macc-letter-spacing-eyebrow, 0.06em) !important;
    line-height: 1 !important;
    min-width: 0 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-label-icon {
    color: var(--macc-text-muted, #64748b) !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-account {
    display: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-kicker {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-select {
    appearance: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    color: var(--macc-input-text, var(--macc-text)) !important;
    cursor: pointer;
    flex: 1 1 auto !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    height: 100% !important;
    line-height: 1.2 !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 0.25rem 0 0 !important;
    text-overflow: ellipsis !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form.is-locked .macc-topbar-appliance-label,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form.is-locked .macc-topbar-appliance-label-icon,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form.is-locked .macc-topbar-appliance-select {
    color: var(--macc-text-muted, #64748b) !important;
    cursor: default !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form.is-locked .macc-topbar-appliance-select {
    appearance: none !important;
    opacity: 1 !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-lock {
    align-items: center;
    color: var(--macc-text-muted, #64748b);
    display: inline-flex;
    font-size: 0.9rem;
    line-height: 1;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-select:focus {
    border: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    outline: 2px solid var(--macc-focus-ring, rgba(20, 124, 139, 0.35)) !important;
    outline-offset: 2px;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-submit,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-default-button,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-icon-button {
    height: 2.25rem !important;
    min-height: 0 !important;
    min-width: 2.25rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search {
    align-items: center !important;
    background: var(--macc-input-bg, var(--macc-surface-2)) !important;
    border: 1px solid var(--macc-input-border, var(--macc-border-soft)) !important;
    border-radius: var(--macc-radius-panel, 8px) !important;
    color: var(--macc-text-muted, #4b5563) !important;
    display: inline-flex !important;
    flex: 0 1 280px !important;
    gap: 0.5rem !important;
    height: 2.25rem !important;
    max-width: 320px !important;
    min-height: 0 !important;
    min-width: 220px !important;
    padding: 0 0.75rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    color: var(--macc-input-text, var(--macc-text)) !important;
    height: 100% !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search:focus-within {
    border-color: var(--macc-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--macc-input-focus-ring) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search input:focus {
    border: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    outline: none !important;
}

@media (max-width: 1320px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form {
        flex-basis: 14rem !important;
        max-width: 22rem !important;
        min-width: 0 !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search {
        min-width: 180px !important;
        flex-basis: 220px !important;
    }
}

@media (max-width: 1120px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form {
        max-width: 17rem !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search {
        flex: 0 0 2.25rem !important;
        justify-content: center !important;
        max-width: 2.25rem !important;
        min-width: 2.25rem !important;
        padding: 0 !important;
        width: 2.25rem !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search input {
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 1px !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search:focus-within,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.is-focused,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.has-value {
        justify-content: flex-start !important;
        max-width: min(22rem, calc(100vw - var(--macc-sidebar-width, 264px) - 2rem)) !important;
        padding: 0 0.75rem !important;
        position: absolute !important;
        right: 1.25rem !important;
        top: calc(100% + 0.4rem) !important;
        transform: none !important;
        width: min(22rem, calc(100vw - var(--macc-sidebar-width, 264px) - 2rem)) !important;
        z-index: 2600 !important;
    }

    html.macc-sidebar-collapsed body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search:focus-within,
    html.macc-sidebar-collapsed body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.is-focused,
    html.macc-sidebar-collapsed body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.has-value {
        max-width: min(22rem, calc(100vw - var(--macc-sidebar-collapsed-width, 72px) - 2rem)) !important;
        width: min(22rem, calc(100vw - var(--macc-sidebar-collapsed-width, 72px) - 2rem)) !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search:focus-within input,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.is-focused input,
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-search.has-value input {
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        width: 100% !important;
    }
}

@media (max-width: 1320px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-kicker {
        display: none !important;
    }
}

@media (max-width: 1040px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form {
        max-width: 20rem !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-label {
        display: inline-flex !important;
        max-width: none !important;
    }

}

/* Intermediate 960px band — keep in lockstep with the matching block in
   macc-layout.css. These high-specificity overrides exist because the 1040px
   rule above pins the appliance form to 20rem with !important; without an
   equivalent !important cap here the toolbar would still crowd in the
   901–960px "narrow laptop / split-screen" zone. Additive only. */
@media (max-width: 960px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar {
        flex-wrap: wrap !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-actions {
        flex-wrap: wrap !important;
        row-gap: 0.45rem !important;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-topbar .macc-topbar-appliance-form {
        flex: 1 1 11rem !important;
        min-width: 9rem !important;
        max-width: 14rem !important;
    }
}

/* Badges, statuses, chips, and pills: one compact status family. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .badge,
    .label,
    .ui.label,
    .chip,
    .pill,
    .status-badge,
    .status-pill,
    .macc-status-pill,
    .module-pill,
    .camera-chip,
    .camera-status,
    .camera-card-status,
    .camera-appliance-pill,
    .reports-chip,
    .reports-pill,
    .health-chip,
    .macc-location-chip,
    .alerts-applied-pill,
    .masking-pill,
    .sensitivity-tier-pill,
    .customer-dashboard-chip,
    .customer-dashboard-alert-status,
    .badge-soft,
    .filter-pill,
    .macc-risk-card-badge,
    .macc-alert-day-count-badge,
    .mark-all-viewed-count,
    .unreviewed-toggle-count,
    .macc-integration-status,
    .macc-badge,
    .macc-pill
) {
    align-items: center;
    background: var(--macc-status-neutral-bg) !important;
    border: 1px solid var(--macc-status-neutral-border) !important;
    border-radius: var(--macc-status-radius) !important;
    color: var(--macc-status-neutral-text) !important;
    display: inline-flex;
    font-size: var(--macc-font-size-caption) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    gap: 0.35rem;
    line-height: 1 !important;
    min-height: var(--macc-status-height) !important;
    padding: var(--macc-status-pad-y) var(--macc-status-pad-x) !important;
    text-transform: none !important;
    white-space: nowrap;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-alert-count-badge,
    .macc-nav-alert-badge,
    .macc-mobile-alert-hot-badge,
    .unreviewed-indicator
) {
    align-items: center !important;
    background: var(--macc-btn-danger-bg) !important;
    border: 1px solid var(--macc-btn-danger-border) !important;
    border-radius: var(--macc-radius-pill) !important;
    color: var(--macc-btn-danger-text) !important;
    display: inline-flex !important;
    font-size: var(--macc-font-size-micro) !important;
    font-weight: 800 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: var(--macc-notification-size) !important;
    min-width: var(--macc-notification-size) !important;
    padding: 0 0.34rem !important;
    white-space: nowrap;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .badge.bg-success,
    .badge.text-bg-success,
    .badge-success,
    .status-success,
    .status-active,
    .macc-status-pill--success,
    .macc-integration-status.is-enabled,
    .camera-appliance-pill.is-good,
    .camera-card-status.is-ready,
    .health-chip.is-good,
    .macc-location-chip.is-ready,
    .reports-pill.is-good,
    .alerts-applied-pill.is-applied
) {
    background: var(--macc-status-success-bg) !important;
    border-color: var(--macc-status-success-border) !important;
    color: var(--macc-status-success-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .badge.bg-warning,
    .badge.text-bg-warning,
    .badge-warning,
    .status-warning,
    .macc-status-pill--warning,
    .camera-card-status.is-warning,
    .reports-pill.is-warning,
    .health-chip.is-watch,
    .alerts-applied-pill.is-pending,
    .masking-pill-warning
) {
    background: var(--macc-status-warning-bg) !important;
    border-color: var(--macc-status-warning-border) !important;
    color: var(--macc-status-warning-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .badge.bg-danger,
    .badge.text-bg-danger,
    .badge-danger,
    .status-danger,
    .macc-status-pill--danger,
    .camera-card-status.is-danger,
    .reports-pill.is-danger,
    .health-chip.is-danger
) {
    background: var(--macc-status-danger-bg) !important;
    border-color: var(--macc-status-danger-border) !important;
    color: var(--macc-status-danger-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .badge.bg-info,
    .badge.text-bg-info,
    .badge-info,
    .status-info,
    .macc-status-pill--info,
    .camera-appliance-pill.is-info
) {
    background: var(--macc-status-info-bg) !important;
    border-color: var(--macc-status-info-border) !important;
    color: var(--macc-status-info-text) !important;
}

/* Alerts, validation banners, loaders, and pagination should share the same
   quiet operational styling instead of inheriting Bootstrap's saturated blocks. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert,
    .error-top,
    .validation-summary-errors,
    .macc-status-alert,
    .macc-alerts-top-error,
    .macc-alert-modal-error,
    .macc-footage-note
) {
    background: var(--macc-alert-banner-bg) !important;
    border: 1px solid var(--macc-alert-banner-border) !important;
    border-left-width: 4px !important;
    border-radius: var(--macc-radius-panel) !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    color: var(--macc-alert-banner-text) !important;
    font-size: var(--macc-font-size-ui) !important;
    line-height: var(--macc-line-height-ui) !important;
    padding: 0.82rem 0.95rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert-success,
    .macc-status-alert-success
) {
    border-color: var(--macc-status-success-border) !important;
    border-left-color: var(--macc-status-success-text) !important;
    color: var(--macc-status-success-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert-warning,
    .macc-status-alert-warning
) {
    border-color: var(--macc-status-warning-border) !important;
    border-left-color: var(--macc-status-warning-text) !important;
    color: var(--macc-status-warning-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert-danger,
    .macc-status-alert-danger,
    .error-top,
    .validation-summary-errors,
    .macc-alerts-top-error,
    .macc-alert-modal-error
) {
    border-color: var(--macc-status-danger-border) !important;
    border-left-color: var(--macc-status-danger-text) !important;
    color: var(--macc-status-danger-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert-info,
    .macc-status-alert-info,
    .macc-footage-note
) {
    border-color: var(--macc-status-info-border) !important;
    border-left-color: var(--macc-status-info-text) !important;
    color: var(--macc-status-info-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .progress,
    .reports-mini-bar,
    .reports-risk-meter,
    .alerts-top-progress,
    .health-score-ring
) {
    background: var(--macc-progress-bg) !important;
    border-radius: var(--macc-radius-pill) !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    overflow: hidden;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .progress-bar,
    .reports-mini-bar > span,
    .reports-risk-meter > span,
    .alerts-top-progress__bar
) {
    background: var(--macc-progress-fill) !important;
    border-radius: inherit;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .spinner-border
) {
    border-width: 0.16rem !important;
    color: var(--macc-accent-foreground) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .pagination,
    .alerts-table-pagination .pagination
) {
    gap: 0.35rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .page-link,
    .pagination .page-link
) {
    align-items: center !important;
    background: var(--macc-btn-secondary-bg) !important;
    border: 1px solid var(--macc-btn-secondary-border) !important;
    border-radius: var(--macc-radius-control) !important;
    color: var(--macc-btn-secondary-text) !important;
    display: inline-flex !important;
    font-size: var(--macc-font-size-label) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    justify-content: center !important;
    min-height: var(--macc-toolbar-control-height) !important;
    min-width: var(--macc-toolbar-control-height) !important;
    padding: 0.32rem 0.62rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .page-item.active .page-link,
    .pagination .page-item.active .page-link
) {
    background: var(--macc-btn-primary-bg) !important;
    border-color: var(--macc-btn-primary-border) !important;
    color: var(--macc-btn-primary-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .page-item.disabled .page-link,
    .pagination .page-item.disabled .page-link
) {
    opacity: 0.52 !important;
}

/* Data toolbar cards: search and filter strips should read as part of the
   table system even when legacy pages keep them in a separate Bootstrap card. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(.input-group .bi-search),
    .card:has(input[type="search"]),
    .card:has(input[id*="search" i]),
    .card:has(input[id="prompt"]),
    .panel:has(.input-group .bi-search),
    .panel:has(input[type="search"]),
    .panel:has(input[id*="search" i])
) {
    background: var(--macc-data-panel-bg) !important;
    border-color: var(--macc-data-panel-border) !important;
    box-shadow: var(--macc-data-panel-shadow) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(.input-group .bi-search) > .card-body,
    .card:has(input[type="search"]) > .card-body,
    .card:has(input[id*="search" i]) > .card-body,
    .card:has(input[id="prompt"]) > .card-body,
    .panel:has(.input-group .bi-search) > .panel-body,
    .panel:has(input[type="search"]) > .panel-body,
    .panel:has(input[id*="search" i]) > .panel-body
) {
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.85rem 1rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card:has(.input-group .bi-search) .fw-semibold,
    .card:has(input[type="search"]) .fw-semibold,
    .card:has(input[id*="search" i]) .fw-semibold,
    .card:has(input[id="prompt"]) .fw-semibold
) {
    color: var(--macc-text-primary) !important;
    font-size: var(--macc-font-size-ui) !important;
    line-height: var(--macc-line-height-tight) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-client-search-field,
    .macc-kdp-search-field,
    .macc-library-search,
    .macc-alert-camera-search,
    .global-search-wrap,
    .alert-date-input-wrap
) {
    align-items: center !important;
    background: var(--macc-input-bg) !important;
    border: 1px solid var(--macc-input-border) !important;
    border-radius: var(--macc-radius-control) !important;
    color: var(--macc-input-text) !important;
    display: flex !important;
    min-height: var(--macc-control-height) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-client-search-field:focus-within,
    .macc-kdp-search-field:focus-within,
    .macc-library-search:focus-within,
    .macc-alert-camera-search:focus-within,
    .global-search-wrap:focus-within,
    .alert-date-input-wrap:focus-within
) {
    border-color: var(--macc-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--macc-input-focus-ring) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-client-search-field input,
    .macc-kdp-search-field input,
    .macc-library-search input,
    .macc-alert-camera-search input,
    .global-search-wrap input,
    .alert-date-input-wrap input
) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: var(--macc-shadow-none, none) !important;
    min-height: 0 !important;
}

/* File/document preview surfaces keep readable document contrast while still
   matching shell spacing, radii, and border language across library routes. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-library-viewer-stage iframe,
    .macc-library-viewer-stage object,
    .macc-library-viewer-text,
    .macc-file-preview-frame iframe,
    .macc-file-preview-frame object,
    .macc-file-preview-text
) {
    background: var(--macc-document-surface-bg) !important;
    color: var(--macc-document-surface-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-library-viewer-stage video,
    .macc-file-preview-frame video
) {
    background: var(--macc-document-media-bg) !important;
}

/* Tabulator grids share the same data-table rhythm as semantic tables. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator) {
    background: transparent !important;
    border: 0 !important;
    color: var(--macc-data-body-text) !important;
    font-size: var(--macc-font-size-table) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-header) {
    background: var(--macc-data-head-bg) !important;
    border-color: var(--macc-data-border) !important;
    color: var(--macc-data-head-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .tabulator .tabulator-header .tabulator-col,
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content
) {
    background: transparent !important;
    border-color: var(--macc-data-border) !important;
    color: var(--macc-data-head-text) !important;
    font-size: var(--macc-font-size-label) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    letter-spacing: var(--macc-letter-spacing-eyebrow) !important;
    text-transform: uppercase !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .tabulator .tabulator-tableholder,
    .tabulator .tabulator-table
) {
    background: var(--macc-data-row-bg) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-row) {
    background: var(--macc-data-row-bg) !important;
    border-color: var(--macc-data-border) !important;
    color: var(--macc-data-body-text) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-row.tabulator-row-even) {
    background: var(--macc-data-row-alt) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-row:hover) {
    background: var(--macc-data-row-hover) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-row.tabulator-selected) {
    background: var(--macc-data-row-selected) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.tabulator .tabulator-cell) {
    background: transparent !important;
    border-color: var(--macc-data-border) !important;
    color: var(--macc-data-body-text) !important;
    padding: var(--macc-data-cell-pad-y-compact) var(--macc-data-cell-pad-x) !important;
}

/* Active accent glyphs often sit on bright module colors; use dark ink there
   so cyan, yellow, green, violet, and orange states remain WCAG AA readable. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .macc-risk-card[data-active="true"] .macc-risk-card-check,
    .macc-schedule-mode.is-active .macc-schedule-mode-icon
) {
    color: var(--macc-brand-midnight) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .customer-dashboard-action-item:not(.is-urgent):not(.is-warning) .customer-dashboard-action-icon,
    .customer-dashboard-health-icon,
    .customer-dashboard-attention-item-icon,
    .reports-gap-icon,
    .reports-insight-icon,
    .reports-preset i,
    .reports-live-summary i,
    .reports-time-field .reports-time-format:hover,
    .reports-time-field .reports-time-format[aria-pressed="true"],
    .alerts-log-page .alerts-review-stat-icon,
    .macc-alert-editor-summary-icon,
    .macc-alert-section-icon,
    .macc-schedule-summary-icon,
    .macc-location-stat-icon,
    .macc-location-pin,
    .macc-location-preview-pin,
    .macc-integration-status.is-configured
) {
    color: var(--macc-token-info-text) !important;
}

/* Typography and density: consistent scale inside compact app surfaces. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .card-title,
    .panel-title,
    .modal-title,
    .reports-title,
    .camera-title,
    .logs-title,
    .section-title
) {
    color: var(--macc-text-primary) !important;
    font-family: var(--macc-font-sans) !important;
    letter-spacing: var(--macc-letter-spacing-normal) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card-title,
    .panel-title,
    .modal-title,
    .reports-title,
    .camera-title,
    .logs-title,
    .section-title
) {
    font-size: var(--macc-text-h4) !important;
    font-weight: var(--macc-font-weight-strong) !important;
    line-height: var(--macc-line-height-heading) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .card-body,
    .panel-body,
    .modal-body,
    .reports-card,
    .camera-card,
    .logs-card,
    .settings-card
) {
    font-size: var(--macc-font-size-ui);
    line-height: var(--macc-line-height-body);
}

/* Legacy framework quarantine: keep old class names visually on-system. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .ui.form .field,
    .field,
    .md-form,
    .md-outline
) {
    color: var(--macc-page-text);
    font-family: var(--macc-font-sans);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-day-time-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--macc-gutter-sm);
    align-items: flex-end;
}

/* Motion and glow: keep status indicators calm unless explicitly active. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .status-dot,
    .status-light,
    .led,
    .macc-led,
    .appliance-status-dot
) {
    border-radius: var(--macc-radius-pill) !important;
    box-shadow: var(--macc-shadow-xs) !important;
}

/*
 * Bootstrap alert variants normalized onto the macc-status-alert visual
 * language. Around 43 Razor views still use vanilla `.alert.alert-{success
 * |warning|danger|info}` — pinning the variant treatment here means every
 * existing view picks up the shared look without per-page markup edits.
 * Pages that want the structured `.macc-status-alert` (with icon + close)
 * keep that opt-in; the rules below are the floor for the plain markup.
 */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert) {
    align-items: flex-start;
    background: var(--macc-surface) !important;
    border: 1px solid var(--macc-border-subtle) !important;
    border-left-width: 4px !important;
    border-left-color: var(--macc-border-strong) !important;
    border-radius: var(--macc-radius-panel) !important;
    color: var(--macc-text-primary) !important;
    font-family: var(--macc-font-sans);
    font-size: var(--macc-font-size-ui);
    line-height: var(--macc-line-height-ui);
    padding: 0.75rem 0.95rem !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert.alert-success) {
    background: color-mix(in srgb, var(--macc-success) 10%, var(--macc-surface)) !important;
    border-color: color-mix(in srgb, var(--macc-success) 28%, transparent) !important;
    border-left-color: var(--macc-success) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert.alert-warning) {
    background: color-mix(in srgb, var(--macc-warning) 10%, var(--macc-surface)) !important;
    border-color: color-mix(in srgb, var(--macc-warning) 28%, transparent) !important;
    border-left-color: var(--macc-warning) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert.alert-danger) {
    background: color-mix(in srgb, var(--macc-danger) 10%, var(--macc-surface)) !important;
    border-color: color-mix(in srgb, var(--macc-danger) 28%, transparent) !important;
    border-left-color: var(--macc-danger) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert.alert-info) {
    background: color-mix(in srgb, var(--macc-token-info-text) 10%, var(--macc-surface)) !important;
    border-color: var(--macc-token-info-border) !important;
    border-left-color: var(--macc-token-info-text) !important;
}

/* Inline links inside alerts pick up the alert tint rather than the global
   link color, so a "reset your authenticator keys" link inside a warning
   tile remains readable in both themes. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.alert) a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Bootstrap's .alert-dismissible close button and the legacy `.close`
   span both need to sit flush right and share the control radius. */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
    .alert .btn-close,
    .alert .close
) {
    margin-left: auto;
    border-radius: var(--macc-radius-control) !important;
}

/*
 * Shared .macc-status-alert primitive. Previously defined only inside
 * identity-manage.css; promoting it here so _StatusMessage.cshtml and any
 * view can compose it the same way regardless of route.
 */
body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.macc-status-alert) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    margin: 0.9rem 0 1.25rem;
    padding: 0.85rem 0.9rem !important;
    border: 1px solid var(--macc-border-subtle) !important;
    border-left: 4px solid var(--macc-success) !important;
    border-radius: var(--macc-radius-panel) !important;
    background: color-mix(in srgb, var(--macc-success) 10%, var(--macc-surface)) !important;
    color: var(--macc-text-primary) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.macc-status-alert-danger) {
    border-left-color: var(--macc-danger) !important;
    background: color-mix(in srgb, var(--macc-danger) 10%, var(--macc-surface)) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: var(--macc-radius-pill);
    background: var(--macc-token-success-bg);
    color: var(--macc-token-success-text);
    font-size: 0.95rem;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-danger .macc-status-alert-icon {
    background: var(--macc-token-danger-bg);
    color: var(--macc-token-danger-text);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-text {
    min-width: 0;
    padding-top: 0.05rem;
    font-weight: var(--macc-font-weight-strong);
    line-height: var(--macc-line-height-ui);
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: var(--macc-radius-control) !important;
    background: transparent !important;
    color: var(--macc-text-secondary) !important;
    box-shadow: var(--macc-shadow-none, none) !important;
}

body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-close:hover,
body:not([data-macc-path*="CustomerSupport"]) .macc-shell .macc-status-alert-close:focus-visible {
    background: var(--macc-hover) !important;
    color: var(--macc-text-primary) !important;
}

@media (max-width: 767.98px) {
    body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(
        .table-responsive,
        .macc-table-wrapper,
        .camera-table-wrapper,
        .diagnostic-table-wrap,
        .camera-import-preview-table-wrap,
        .camera-appliance-table-wrap,
        .manual-table-wrap,
        .alerts-table-wrapper,
        .logs-table-wrapper,
        .reports-table-wrapper
    ) {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: var(--macc-shadow-none, none) !important;
        max-width: 100%;
    }

    body:not([data-macc-path*="CustomerSupport"]) .macc-shell :where(.btn, .ui.button) {
        white-space: normal;
    }
}