/*
 * Operations views
 *
 * Final, theme-aware composition for management, accounting, billing,
 * reconciliation, settlement, dashboard tables and request details. Domain
 * behavior remains in the existing renderers; this file only normalizes the
 * visual shell and responsive disclosure through the shared --ui-* contract.
 */

/* ---------- Operational shells ---------- */

body.app-shell :is(
    #managementToolList-view,
    #accountManagement-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) {
    min-width: 0;
    color: var(--ui-text);
}

body.app-shell :is(
    #managementToolList-view,
    #accountManagement-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-white, .dark\:bg-gray-800) {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

body.app-shell :is(
    #managementToolList-view,
    #accountManagement-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-gray-50, .bg-gray-100, .dark\:bg-gray-700) {
    background-color: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

body.app-shell :is(
    #managementToolList-view,
    #accountManagement-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.border, .border-b, .border-t, .border-l, .border-r, .divide-y) {
    border-color: var(--ui-border) !important;
}

body.app-shell :is(
    #managementToolList-view,
    #accountManagement-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-b) {
    background-color: var(--ui-surface-muted) !important;
    background-image: none !important;
}

/* Direct page sections remain legible panels; nested data regions stay flat. */
body.app-shell :is(
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view
) > .bg-white {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell :is(
    #accountManagement-view,
    #accountingManagement-view,
    #accountingSettlementManagement-view
) > :where(.grid, .space-y-6) > :where(.bg-white, section.bg-white) {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell #accountingSettlementManagement-view > .space-y-6 > .grid > section.bg-white {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-panel) !important;
}

body.app-shell #accountingManagement-view [class~="lg:col-span-2"] > .space-y-4 > .bg-white {
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell #accountingManagement-view [class~="lg:col-span-2"] > .space-y-4 > .bg-white:last-child {
    border-bottom: 0 !important;
}

body.app-shell :is(#accountManagement-view, #managementToolList-view) article {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}

body.app-shell :is(#accountManagement-view, #managementToolList-view) article:hover {
    border-color: color-mix(in srgb, var(--ui-action) 50%, var(--ui-border)) !important;
    background: color-mix(in srgb, var(--ui-surface) 96%, var(--ui-action) 4%) !important;
    box-shadow: none !important;
}

/* ---------- Legacy utility colors, remapped to semantic roles ---------- */

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-400, .text-indigo-600, .text-indigo-700, .text-indigo-900, .text-purple-600, .text-purple-700, .text-violet-600, .text-violet-700, .text-violet-900, .text-cyan-600, .text-cyan-700, .text-sky-600, .text-sky-700) {
    color: var(--ui-action) !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-indigo-50, .bg-indigo-100, .bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-violet-100) {
    background: color-mix(in srgb, var(--ui-action) 11%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-action) 38%, var(--ui-border)) !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-blue-50, .bg-blue-100, .bg-cyan-50, .bg-cyan-100, .bg-sky-50, .bg-sky-100) {
    background: var(--ui-info-soft) !important;
    border-color: color-mix(in srgb, var(--ui-info) 38%, var(--ui-border)) !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.bg-pink-50, .bg-pink-100) {
    background: var(--ui-danger-soft) !important;
    border-color: color-mix(in srgb, var(--ui-danger) 38%, var(--ui-border)) !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.text-purple-600, .text-violet-600, .text-pink-600):not(button) {
    color: var(--ui-action) !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(
    button.bg-purple-600,
    button.bg-violet-600,
    button.bg-pink-600,
    button.bg-cyan-600,
    button.bg-sky-600,
    button.bg-orange-600
) {
    border: 1px solid transparent !important;
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
    box-shadow: none !important;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #managementToolList-view,
    #accountManagement-view,
    [id$="Management-view"]:not(#deliveryManagement-view),
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(
    button[data-action="open-tool-list"]
) {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

/* ---------- Toolbars and filters ---------- */

body.app-shell :is(
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view
) > :first-child :where(.flex.space-x-2, .flex.space-x-3, .flex.space-x-4, .flex.flex-wrap) {
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

body.app-shell :is(
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    #detailView-view
) > :first-child :where(.space-x-2, .space-x-3, .space-x-4) > :not([hidden]) ~ :not([hidden]) {
    margin-inline-start: 0 !important;
}

body.app-shell :where(#billing-batch-operation-buttons, #batch-operation-buttons) {
    align-items: center;
    gap: var(--ui-space-2) !important;
}

body.app-shell :where(#billing-batch-operation-buttons, #batch-operation-buttons) button,
body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > :first-child button {
    min-height: var(--ui-control-height);
    white-space: nowrap;
}

body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > .bg-white.shadow-md > .sticky,
body.app-shell :is(#invoiceManagement-view, #productManagement-view) > .bg-white.shadow-md > .sticky {
    border-color: var(--ui-border-soft) !important;
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
}

body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > .bg-white.shadow-md,
body.app-shell :is(#invoiceManagement-view, #productManagement-view) > .bg-white.shadow-md {
    max-height: calc(100dvh - 12rem) !important;
    overflow: hidden;
}

body.app-shell :where(.column-filter-popover, #dashboard-hover-popover) {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
}

body.app-shell .column-filter-popover :where([data-column-filter-option]:hover, button:hover) {
    background: var(--ui-surface-muted) !important;
}

body.app-shell .column-filter-trigger[aria-pressed="true"] {
    color: var(--ui-action) !important;
}

/* ---------- Dense operational tables ---------- */

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) :where(.overflow-x-auto, .table-scroll-container) {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ui-text);
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #accountingManagement-view,
    #productManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) table :where(th, td) {
    vertical-align: top;
}

body.app-shell :is(
    #dashboard-view,
    #detailView-view,
    #accountingManagement-view,
    #userManagement-view,
    #personnelTransferManagement-view,
    #classroomManagement-view,
    #departmentManagement-view,
    #invoiceManagement-view,
    #headerManagement-view,
    #announcementManagement-view,
    #vendorManagement-view,
    #vendorReconciliationManagement-view,
    #billingRequestManagement-view,
    #accountingSettlementManagement-view,
    #printManagement-view,
    [id^="reconciliationDetail-"][id$="-view"],
    [id^="billingRequestDetail-"][id$="-view"]
) table button {
    border-radius: var(--ui-radius-sm);
    padding: var(--ui-space-1) var(--ui-space-2);
}

/* The dashboard header already budgets each column in percentages. Keep its
   compact legacy controls from consuming the label width or wrapping CJK text. */
body.app-shell #dashboard-view :is(th, [role="columnheader"]) {
    white-space: nowrap;
}

body.app-shell #dashboard-view #dashboard-table-header-wrapper button {
    padding: 0;
}

body.app-shell #dashboard-view #dashboard-table-header-wrapper [data-action="toggle-column-settings"] {
    padding: var(--ui-space-1);
}

body.app-shell :is(#detailView-view, [id^="reconciliationDetail-"][id$="-view"], [id^="billingRequestDetail-"][id$="-view"]) table img {
    border: 1px solid var(--ui-border-soft);
    background: var(--ui-surface-muted);
}

body.app-shell #detailView-view [style*="drop-shadow"] {
    filter: none !important;
}

body.app-shell #detailView-view .request-detail-total-row {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

body.app-shell #detailView-view .request-detail-total-row td {
    border-block-start: 2px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

@supports selector(div:has(> table)) {
    body.app-shell :is(
        [id^="reconciliationDetail-"][id$="-view"],
        [id^="billingRequestDetail-"][id$="-view"]
    ) div.overflow-hidden:has(> table) {
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
    }
}

/* ---------- Management and accounting modal workspaces ---------- */

body.app-shell :where(#management-tools-modal, #account-management-modal) {
    background: var(--ui-overlay) !important;
    backdrop-filter: none !important;
}

body.app-shell :where(#management-tools-modal, #account-management-modal) .management-modal-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-float) !important;
}

body.app-shell :where(#management-tools-modal, #account-management-modal) .management-modal-drag-handle,
body.app-shell :where(#management-tools-modal, #account-management-modal) .bg-gradient-to-r {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    background-image: none !important;
}

body.app-shell :where(#management-modal-scroll-region, #account-modal-scroll-region) {
    background: var(--ui-canvas) !important;
    color: var(--ui-text) !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

body.app-shell :where(#management-tools-modal, #account-management-modal) nav > div {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

body.app-shell :where(#management-tools-modal, #account-management-modal) nav > div:has(> button.text-white) {
    border-color: var(--ui-action) !important;
    background: var(--ui-action) !important;
    color: var(--ui-on-action) !important;
}

/* ---------- Tablet: disclose every column through one coordinated scroller ---------- */

@media (max-width: 64rem) {
    body.app-shell #dashboard-main-card {
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }

    body.app-shell #dashboard-main-card > .overflow-x-auto {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible !important;
    }

    body.app-shell #dashboard-view table {
        width: 72rem !important;
        min-width: 72rem !important;
    }

    body.app-shell #dashboard-view :where(th, td):nth-child(n + 10) {
        display: table-cell !important;
    }

    body.app-shell #detailView-view table {
        min-width: 92rem;
    }

    body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) table {
        min-width: 68rem;
    }

    body.app-shell :is(
        #productManagement-view,
        #userManagement-view,
        #personnelTransferManagement-view,
        #classroomManagement-view,
        #departmentManagement-view,
        #invoiceManagement-view,
        #headerManagement-view,
        #announcementManagement-view,
        #vendorManagement-view,
        #accountingManagement-view,
        #printManagement-view
    ) table {
        min-width: 52rem;
    }

    body.app-shell #accountingSettlementManagement-view table {
        min-width: 46rem;
    }

    body.app-shell :is(
        [id^="reconciliationDetail-"][id$="-view"],
        [id^="billingRequestDetail-"][id$="-view"]
    ) table {
        min-width: 74rem;
    }
}

/* ---------- Phone and touch ergonomics ---------- */

@media (max-width: 48rem) {
    body.app-shell :is(
        #accountingManagement-view,
        #productManagement-view,
        #userManagement-view,
        #personnelTransferManagement-view,
        #classroomManagement-view,
        #departmentManagement-view,
        #invoiceManagement-view,
        #headerManagement-view,
        #announcementManagement-view,
        #vendorManagement-view,
        #vendorReconciliationManagement-view,
        #billingRequestManagement-view,
        #accountingSettlementManagement-view,
        #printManagement-view,
        #detailView-view
    ) > :first-child {
        position: static !important;
    }

    body.app-shell :is(
        #accountingManagement-view,
        #productManagement-view,
        #userManagement-view,
        #personnelTransferManagement-view,
        #classroomManagement-view,
        #departmentManagement-view,
        #invoiceManagement-view,
        #headerManagement-view,
        #announcementManagement-view,
        #vendorManagement-view,
        #vendorReconciliationManagement-view,
        #billingRequestManagement-view,
        #accountingSettlementManagement-view,
        #printManagement-view,
        #detailView-view
    ) > :first-child :where(.flex.justify-between, .flex.items-center) {
        align-items: stretch;
    }

    body.app-shell :is(
        #accountingManagement-view,
        #productManagement-view,
        #userManagement-view,
        #personnelTransferManagement-view,
        #classroomManagement-view,
        #departmentManagement-view,
        #invoiceManagement-view,
        #headerManagement-view,
        #announcementManagement-view,
        #vendorManagement-view,
        #vendorReconciliationManagement-view,
        #billingRequestManagement-view,
        #accountingSettlementManagement-view,
        #printManagement-view,
        #detailView-view
    ) > :first-child h1 {
        min-width: 0;
        font-size: var(--ui-text-lg) !important;
        overflow-wrap: anywhere;
    }

    body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > .bg-white.shadow-md,
    body.app-shell :is(#invoiceManagement-view, #productManagement-view) > .bg-white.shadow-md {
        max-height: none !important;
    }

    body.app-shell :where(#billing-batch-operation-buttons, #batch-operation-buttons) {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-shell :where(#billing-batch-operation-buttons, #batch-operation-buttons) button {
        width: 100%;
        min-height: 2.75rem;
        white-space: normal;
    }

    body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > :first-child .shrink-0 {
        width: 100%;
    }

    body.app-shell :is(#billingRequestManagement-view, #vendorReconciliationManagement-view) > :first-child .shrink-0 > button {
        flex: 1 1 calc(50% - var(--ui-space-2));
        min-height: 2.75rem;
    }

    body.app-shell :is(
        #accountingManagement-view,
        #productManagement-view,
        #userManagement-view,
        #personnelTransferManagement-view,
        #classroomManagement-view,
        #departmentManagement-view,
        #invoiceManagement-view,
        #headerManagement-view,
        #announcementManagement-view,
        #vendorManagement-view,
        #accountingSettlementManagement-view,
        #printManagement-view,
        #detailView-view
    ) > :first-child button {
        min-height: 2.75rem;
    }

    body.app-shell #accountingManagement-view > .grid > .bg-white,
    body.app-shell #accountingSettlementManagement-view section,
    body.app-shell #detailView-view > .bg-white.shadow-md {
        padding: var(--ui-space-4) !important;
    }

    body.app-shell :where(#management-tools-modal, #account-management-modal):not(.pointer-events-none) {
        padding: var(--ui-space-2) !important;
    }

    body.app-shell :where(#management-tools-modal, #account-management-modal):not(.pointer-events-none) .management-modal-card {
        width: calc(100vw - (2 * var(--ui-space-2))) !important;
        max-width: none !important;
        max-height: calc(100dvh - (2 * var(--ui-space-2))) !important;
        border-radius: var(--ui-radius-md) !important;
    }

    body.app-shell :where(#management-tools-modal, #account-management-modal) .management-modal-drag-handle,
    body.app-shell :where(#management-tools-modal, #account-management-modal) > .management-modal-card > .border-t {
        padding: var(--ui-space-3) var(--ui-space-4) !important;
    }

    body.app-shell :where(#management-modal-scroll-region, #account-modal-scroll-region) {
        padding: var(--ui-space-3) !important;
    }

    body.app-shell :is(
        #dashboard-view,
        #billingRequestManagement-view,
        #vendorReconciliationManagement-view
    ) table :where(th, td):first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 3.5rem;
        min-width: 3.5rem;
        background: var(--ui-surface);
    }

    body.app-shell :is(
        #dashboard-view,
        #billingRequestManagement-view,
        #vendorReconciliationManagement-view
    ) table th:first-child {
        z-index: 4;
        background: var(--ui-surface-muted) !important;
    }

    body.app-shell :is(
        #dashboard-view,
        #billingRequestManagement-view,
        #vendorReconciliationManagement-view
    ) table :where(th, td):nth-child(2) {
        position: sticky;
        left: 3.5rem;
        z-index: 2;
        background: var(--ui-surface);
        box-shadow: 1px 0 0 var(--ui-border-soft);
    }

    body.app-shell :is(
        #dashboard-view,
        #billingRequestManagement-view,
        #vendorReconciliationManagement-view
    ) table th:nth-child(2) {
        z-index: 4;
        background: var(--ui-surface-muted) !important;
    }

    body.app-shell .column-filter-popover {
        width: calc(100vw - (2 * var(--ui-space-3))) !important;
        max-width: none !important;
        padding: var(--ui-space-3) !important;
    }

    body.app-shell .column-filter-popover button,
    body.app-shell :is(
        #dashboard-view,
        #detailView-view,
        [id$="Management-view"]:not(#deliveryManagement-view),
        [id^="reconciliationDetail-"][id$="-view"],
        [id^="billingRequestDetail-"][id$="-view"]
    ) table button {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

@media (max-width: 25rem) {
    body.app-shell :where(#billing-batch-operation-buttons, #batch-operation-buttons) {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
    body.app-shell :is(
        #managementToolList-view,
        #accountManagement-view,
        [id$="Management-view"]:not(#deliveryManagement-view),
        #detailView-view,
        [id^="reconciliationDetail-"][id$="-view"],
        [id^="billingRequestDetail-"][id$="-view"]
    ) :where(button, [role="button"], select) {
        min-height: 2.75rem;
    }

    body.app-shell :is(
        #dashboard-view,
        #managementToolList-view,
        #accountManagement-view,
        [id$="Management-view"]:not(#deliveryManagement-view),
        #detailView-view,
        [id^="reconciliationDetail-"][id$="-view"],
        [id^="billingRequestDetail-"][id$="-view"]
    ) input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
}