/*
 * AquipCore interactive application theme layer.
 * Report/PDF/export services do not load this file. Authored content is never
 * recolored or inverted.
 */
@media screen {
    html[data-theme="dark"] {
        --aquip-canvas: #111315;
        --aquip-surface: #17191c;
        --aquip-surface-raised: #202328;
        --aquip-surface-sunken: #0c0e10;
        --aquip-text: #edf0f3;
        --aquip-text-muted: #aab1ba;
        --aquip-border: rgba(237, 240, 243, 0.14);
        --aquip-border-strong: rgba(237, 240, 243, 0.25);
        --aquip-hover: rgba(255, 255, 255, 0.08);
        --aquip-overlay: rgba(0, 0, 0, 0.68);
        --aquip-focus-ring: rgba(69, 150, 255, 0.55);
        --aquip-shadow-color: rgba(0, 0, 0, 0.55);
    }
}

@media screen {
    html[data-theme="dark"],
    html[data-theme="dark"] body.k-body,
    html[data-theme="dark"] #app {
        color: var(--aquip-text);
        background-color: var(--aquip-canvas);
    }

    html[data-theme="dark"] body.k-body,
    html[data-theme="dark"] input,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .page,
    html[data-theme="dark"] main,
    html[data-theme="dark"] article,
    html[data-theme="dark"] .content,
    html[data-theme="dark"] .k-splitter,
    html[data-theme="dark"] .k-pane {
        color: var(--aquip-text);
        background-color: var(--aquip-canvas);
    }

    html[data-theme="dark"] .top-bar,
    html[data-theme="dark"] .top-row,
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .card-body,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .usermenu,
    html[data-theme="dark"] .popover,
    html[data-theme="dark"] .list-group-item,
    html[data-theme="dark"] .offcanvas,
    html[data-theme="dark"] .settings-nav,
    html[data-theme="dark"] .profile-nav {
        color: var(--aquip-text);
        background-color: var(--aquip-surface);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .box-shadow,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .usermenu,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .k-window,
    html[data-theme="dark"] .k-popup {
        box-shadow: 0 12px 32px var(--aquip-shadow-color);
    }

    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .form-select,
    html[data-theme="dark"] .input-group-text,
    html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] select {
        color: var(--aquip-text);
        background-color: var(--aquip-surface-raised);
        border-color: var(--aquip-border-strong);
    }

    html[data-theme="dark"] .form-control::placeholder,
    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--aquip-text-muted);
        opacity: 0.82;
    }

    html[data-theme="dark"] .text-muted,
    html[data-theme="dark"] .form-text,
    html[data-theme="dark"] small.text-muted {
        color: var(--aquip-text-muted) !important;
    }

    html[data-theme="dark"] .border,
    html[data-theme="dark"] .border-top,
    html[data-theme="dark"] .border-right,
    html[data-theme="dark"] .border-bottom,
    html[data-theme="dark"] .border-left,
    html[data-theme="dark"] hr {
        border-color: var(--aquip-border) !important;
    }

    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .bg-light {
        background-color: var(--aquip-surface) !important;
    }

    html[data-theme="dark"] .table {
        --bs-table-color: var(--aquip-text);
        --bs-table-bg: var(--aquip-surface);
        --bs-table-border-color: var(--aquip-border);
        --bs-table-striped-bg: var(--aquip-surface-sunken);
        --bs-table-hover-bg: var(--aquip-hover);
        color: var(--aquip-text);
    }

    /*
     * The legacy application styles predate Telerik's colour tokens and load
     * after the package theme. Keep this compatibility block screen-only and
     * Dark-only so the original Light appearance and all render/export paths
     * remain unchanged.
     */
    html[data-theme="dark"] .k-grid,
    html[data-theme="dark"] .k-treelist,
    html[data-theme="dark"] .k-grid .k-grid-aria-root,
    html[data-theme="dark"] .k-grid .k-grid-content,
    html[data-theme="dark"] .k-grid .k-grid-footer,
    html[data-theme="dark"] .k-grid .k-grid-footer-wrap,
    html[data-theme="dark"] .k-grid .k-table,
    html[data-theme="dark"] .k-grid .k-table-tbody,
    html[data-theme="dark"] .k-grid .k-grid-footer .k-table,
    html[data-theme="dark"] .k-grid .k-grid-footer .k-table-tfoot,
    html[data-theme="dark"] .k-grid .k-grid-footer .k-table-row,
    html[data-theme="dark"] .k-grid .k-grid-footer .k-table-td,
    html[data-theme="dark"] .k-treelist .k-grid-content,
    html[data-theme="dark"] .k-treelist .k-table,
    html[data-theme="dark"] .k-treelist .k-table-tbody {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .k-grid .k-table-tbody .k-table-row,
    html[data-theme="dark"] .k-treelist .k-table-tbody .k-table-row,
    html[data-theme="dark"] .k-grid .k-table-tbody .k-table-row > td,
    html[data-theme="dark"] .k-treelist .k-table-tbody .k-table-row > td {
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .k-grid .k-grid-content-sticky,
    html[data-theme="dark"] .k-treelist .k-grid-content-sticky {
        color: inherit;
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .k-grid .k-table-row.k-alt > td.k-grid-content-sticky,
    html[data-theme="dark"] .k-treelist .k-table-row.k-alt > td.k-grid-content-sticky {
        background-color: var(--kendo-color-primary-subtle, var(--aquip-surface-raised));
    }

    html[data-theme="dark"] .k-grid.k-grid-md .k-table .k-table-tbody .k-master-row.k-table-row:hover > td.k-grid-content-sticky {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background: var(--kendo-color-base-subtle-hover, var(--aquip-surface-raised)) !important;
    }

    html[data-theme="dark"] .k-grid .k-table-th.k-selected,
    html[data-theme="dark"] .k-grid td.k-selected,
    html[data-theme="dark"] .k-grid .k-table-td.k-selected,
    html[data-theme="dark"] .k-grid .k-table-row.k-selected > td,
    html[data-theme="dark"] .k-grid .k-table-row.k-selected > .k-table-td {
        color: var(--kendo-color-primary-on-subtle, var(--aquip-text));
        background-color: var(--kendo-color-primary-subtle, var(--aquip-surface-raised));
    }

    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.tag-row-deleted:not(.k-selected) > td,
    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.pbi-row-sections-inactive:not(.k-selected) > td,
    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.pbi-row-invalid:not(.k-selected) > td,
    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.coverage-row-not-covered:not(.k-selected) > td {
        color: var(--kendo-color-error-on-subtle, var(--aquip-text)) !important;
        background: var(--kendo-color-error-subtle, var(--aquip-surface-raised)) !important;
    }

    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.pbi-row-inactive:not(.k-selected) > td {
        color: var(--kendo-color-warning-on-subtle, var(--aquip-text)) !important;
        background: var(--kendo-color-warning-subtle, var(--aquip-surface-raised)) !important;
    }

    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.role-row-built-in:not(.k-selected) > td {
        color: var(--kendo-color-info-on-subtle, var(--aquip-text)) !important;
        background: var(--kendo-color-info-subtle, var(--aquip-surface-raised)) !important;
    }

    html[data-theme="dark"] .k-grid .k-table .k-table-tbody .k-master-row.k-table-row.role-row-built-in:hover > td {
        color: var(--kendo-color-info-on-subtle, var(--aquip-text)) !important;
        background: var(--kendo-color-info-subtle-hover, var(--aquip-surface-raised)) !important;
    }

    html[data-theme="dark"] .k-pager,
    html[data-theme="dark"] .k-pager-wrap,
    html[data-theme="dark"] .k-grid-pager,
    html[data-theme="dark"] .k-tabstrip-content,
    html[data-theme="dark"] .k-tabstrip > .k-content,
    html[data-theme="dark"] .k-treeview,
    html[data-theme="dark"] .k-window-content,
    html[data-theme="dark"] .k-dialog-content,
    html[data-theme="dark"] .k-popup,
    html[data-theme="dark"] .k-list,
    html[data-theme="dark"] .k-list-content {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    /* The legacy global scrollbar rules in custom-aquipbase.css and custom.css
       hard-code a white track and light-grey thumb. Override only the active
       Dark theme, leaving the established Light pixels untouched. */
    html[data-theme="dark"] * {
        scrollbar-color:
            var(--kendo-color-base-emphasis, #66707b)
            var(--kendo-color-app-surface, var(--aquip-surface));
    }

    html[data-theme="dark"] *::-webkit-scrollbar-track,
    html[data-theme="dark"] *::-webkit-scrollbar-track:horizontal {
        background: var(--kendo-color-app-surface, var(--aquip-surface));
    }

    html[data-theme="dark"] *::-webkit-scrollbar-thumb,
    html[data-theme="dark"] *::-webkit-scrollbar-thumb:horizontal,
    html[data-theme="dark"] .view-scroll-hover:hover::-webkit-scrollbar-thumb {
        background: var(--kendo-color-base-emphasis, #66707b);
    }

    html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
    html[data-theme="dark"] *::-webkit-scrollbar-thumb:horizontal:hover,
    html[data-theme="dark"] .view-scroll-hover:hover::-webkit-scrollbar-thumb:hover {
        background: var(--kendo-color-subtle, var(--aquip-text-muted));
    }

    /* AquipCore.css still gives the inner column-menu actions a light-theme
       foreground. Body-appended menus need their own token-based compatibility
       layer because they do not inherit the grid's dark foreground. */
    html[data-theme="dark"] .k-column-menu,
    html[data-theme="dark"] .k-column-menu .k-columnmenu-item,
    html[data-theme="dark"] .k-column-menu .k-column-list-item,
    html[data-theme="dark"] .k-column-menu .k-menu,
    html[data-theme="dark"] .k-column-menu .k-menu-item,
    html[data-theme="dark"] .k-column-menu .k-menu-link,
    html[data-theme="dark"] .k-column-menu .k-icon,
    html[data-theme="dark"] .k-column-menu .k-svg-icon {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    /* icon.css replaces the Telerik filter SVG with a black Feather asset. */
    html[data-theme="dark"] .k-column-menu .k-svg-i-filter {
        filter: invert(1) brightness(1.15);
    }

    html[data-theme="dark"] .k-column-menu .k-columnmenu-item:hover,
    html[data-theme="dark"] .k-column-menu .k-columnmenu-item:focus,
    html[data-theme="dark"] .k-column-menu .k-column-list-item:hover,
    html[data-theme="dark"] .k-column-menu .k-menu-item:hover > .k-menu-link {
        color: var(--kendo-color-base-on-subtle, var(--aquip-text));
        background-color: var(--kendo-color-base-subtle-hover, var(--aquip-surface-raised));
    }

    html[data-theme="dark"] .k-column-menu .k-columnmenu-item.k-selected,
    html[data-theme="dark"] .k-column-menu .k-column-list-item.k-selected,
    html[data-theme="dark"] .k-column-menu .k-menu-item.k-selected > .k-menu-link {
        color: var(--kendo-color-primary-on-subtle, var(--aquip-text));
        background-color: var(--kendo-color-primary-subtle, var(--aquip-surface-raised));
    }

    /* Context menus and nested groups are appended beneath body and legacy
       light-theme hover rules use !important, so match that cascade here. */
    html[data-theme="dark"] .k-context-menu,
    html[data-theme="dark"] .k-menu-group {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .k-context-menu .k-menu-item:hover > .k-menu-link,
    html[data-theme="dark"] .k-context-menu .k-menu-item:hover > .k-menu-link .k-menu-link-text,
    html[data-theme="dark"] .k-context-menu .k-menu-item:hover > .k-menu-link .k-icon,
    html[data-theme="dark"] .k-menu-group .k-menu-item:hover > .k-menu-link,
    html[data-theme="dark"] .k-menu-group .k-menu-item:hover > .k-menu-link .k-menu-link-text,
    html[data-theme="dark"] .k-menu-group .k-menu-item:hover > .k-menu-link .k-icon {
        color: var(--kendo-color-base-on-subtle, var(--aquip-text)) !important;
        background-color: var(--kendo-color-base-subtle-hover, var(--aquip-surface-raised));
    }

    html[data-theme="dark"] .k-context-menu .k-menu-item > .k-menu-link:is(:active, .k-active, .k-selected),
    html[data-theme="dark"] .k-menu-group .k-menu-item > .k-menu-link:is(:active, .k-active, .k-selected) {
        color: var(--kendo-color-primary-on-subtle, var(--aquip-text)) !important;
        background-color: var(--kendo-color-primary-subtle, var(--aquip-surface-raised)) !important;
    }

    /* Kendo Cards underpin the Practice Management Kanban. */
    html[data-theme="dark"] .pm-kanban .k-card,
    html[data-theme="dark"] .pm-kanban .k-card-header,
    html[data-theme="dark"] .pm-kanban .k-card-body,
    html[data-theme="dark"] .pm-kanban .k-card-footer {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .pm-kanban .pm-column .k-card-header,
    html[data-theme="dark"] .pm-kanban .pm-column .k-card-body {
        background-color: var(--kendo-color-surface-alt, var(--aquip-surface-raised));
    }

    /* Chat chrome and member surfaces previously carried fixed light colours. */
    html[data-theme="dark"] .chat-shell,
    html[data-theme="dark"] .chat-sidebar-header,
    html[data-theme="dark"] .chat-search-wrap,
    html[data-theme="dark"] .chat-thread-pane-header {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .chat-sidebar,
    html[data-theme="dark"] .chat-search-results-heading {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-surface-alt, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .chat-search-box,
    html[data-theme="dark"] .chat-search-box:focus-within,
    html[data-theme="dark"] .chat-search-box.active {
        color: var(--kendo-color-on-base, var(--aquip-text));
        background-color: var(--kendo-color-base, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border-alt, var(--aquip-border-strong));
    }

    html[data-theme="dark"] .chat-search-box input,
    html[data-theme="dark"] .chat-thread-pane-title,
    html[data-theme="dark"] .chat-thread-pane-member-name {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
    }

    html[data-theme="dark"] .chat-thread-pane-subtitle,
    html[data-theme="dark"] .chat-thread-pane-member-email,
    html[data-theme="dark"] .chat-empty-state,
    html[data-theme="dark"] .chat-thread-pane-system-notice,
    html[data-theme="dark"] .chat-thread-pane-ai-progress {
        color: var(--kendo-color-subtle, var(--aquip-text-muted));
    }

    html[data-theme="dark"] .chat-thread-pane-member-tag,
    html[data-theme="dark"] .chat-thread-pane-readonly-banner {
        color: var(--kendo-color-base-on-subtle, var(--aquip-text));
        background-color: var(--kendo-color-base-subtle, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .chat-thread-pane-member-tag-ai,
    html[data-theme="dark"] .chat-thread-pane-ai-badge {
        color: var(--kendo-color-primary-on-subtle, var(--aquip-text));
        background-color: var(--kendo-color-primary-subtle, var(--aquip-surface-raised));
    }

    html[data-theme="dark"] .k-dialog-titlebar,
    html[data-theme="dark"] .k-window-titlebar {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-surface-alt, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    /* The compiled legacy theme pins DockManager pane headers to #fff. Keep
       the override Dark-only so Light remains byte-for-byte on its old path. */
    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-header,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-header {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-surface-alt, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-header .k-pane-title,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-header .k-pane-title,
    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-actions .k-button,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-actions .k-button,
    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-actions .k-icon,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-actions .k-icon,
    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-actions .k-svg-icon,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-actions .k-svg-icon {
        color: var(--kendo-color-on-app-surface, var(--aquip-text)) !important;
    }

    html[data-theme="dark"] .k-dock-manager-splitter .k-pane-actions .k-svg-icon,
    html[data-theme="dark"] .k-dock-manager-unpinned-container .k-pane-actions .k-svg-icon {
        fill: currentColor;
    }

    /* Dashboard appearance colours are authored for the light canvas. Keep
       those preferences in light mode, but let live dark mode use the active
       application surfaces and foregrounds. */
    html[data-theme="dark"] .studio-dashboard {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background: var(--kendo-color-app-surface, var(--aquip-canvas)) !important;
    }

    html[data-theme="dark"] .studio-dashboard .k-tilelayout-item {
        color: var(--kendo-color-on-surface, var(--aquip-text));
        background: var(--kendo-color-surface, var(--aquip-surface)) !important;
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .studio-dashboard .k-tilelayout-item-header {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background: var(--kendo-color-surface-alt, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border-alt, var(--aquip-border));
    }

    html[data-theme="dark"] .studio-dashboard .studio-kpi-value,
    html[data-theme="dark"] .studio-dashboard .studio-progress-row,
    html[data-theme="dark"] .studio-dashboard .studio-narrative {
        color: var(--kendo-color-on-surface, var(--aquip-text));
    }

    /* Telerik renders dialog footers beside the content surface, so the
       generic content rule above does not theme this confirmation action bar. */
    html[data-theme="dark"] .chat-member-confirm-dialog,
    html[data-theme="dark"] .chat-member-confirm-dialog .k-window-content,
    html[data-theme="dark"] .chat-member-confirm-dialog .k-dialog-content,
    html[data-theme="dark"] .chat-member-confirm-dialog .k-dialog-actions {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
        background-color: var(--kendo-color-app-surface, var(--aquip-surface));
        border-color: var(--kendo-color-border, var(--aquip-border));
    }

    html[data-theme="dark"] .chat-member-confirm-dialog .k-button-solid-base {
        color: var(--kendo-color-on-base, var(--aquip-text));
        background-color: var(--kendo-color-base, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border-alt, var(--aquip-border-strong));
    }

    html[data-theme="dark"] .k-input,
    html[data-theme="dark"] .k-input-solid,
    html[data-theme="dark"] .k-picker,
    html[data-theme="dark"] .k-picker-solid,
    html[data-theme="dark"] .k-dropdown-wrap,
    html[data-theme="dark"] .k-multiselect-wrap {
        color: var(--kendo-color-on-base, var(--aquip-text));
        background-color: var(--kendo-color-base, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border-alt, var(--aquip-border-strong));
    }

    html[data-theme="dark"] .k-input-inner,
    html[data-theme="dark"] .k-input-value-text,
    html[data-theme="dark"] .k-input-inner::placeholder {
        color: inherit;
    }

    html[data-theme="dark"] .k-button-solid-base {
        color: var(--kendo-color-on-base, var(--aquip-text));
        background-color: var(--kendo-color-base, var(--aquip-surface-raised));
        border-color: var(--kendo-color-border-alt, var(--aquip-border-strong));
    }

    /* icon.css replaces Telerik's calendar SVG with a fixed black Feather
       asset. Restore the pickers' inline SVG in Dark so DatePicker,
       DateRangePicker, DateTimePicker, and TimePicker toggle glyphs can follow
       the active foreground token. The Dark-only scope keeps Light pixels on
       the existing icon.css path. */
    html[data-theme="dark"] :is(
        .k-datepicker,
        .k-daterange-picker,
        .k-daterangepicker,
        .k-datetimepicker,
        .k-timepicker
    ) .k-input-button,
    html[data-theme="dark"] :is(
        .k-datepicker,
        .k-daterange-picker,
        .k-daterangepicker,
        .k-datetimepicker,
        .k-timepicker
    ) .k-input-button .k-button-icon {
        color: var(--kendo-color-on-base, var(--aquip-text)) !important;
    }

    html[data-theme="dark"] :is(
        .k-datepicker,
        .k-daterange-picker,
        .k-daterangepicker,
        .k-datetimepicker,
        .k-timepicker
    ) .k-input-button .k-svg-icon > svg {
        fill: currentColor;
    }

    html[data-theme="dark"] :is(
        .k-datepicker,
        .k-daterange-picker,
        .k-daterangepicker,
        .k-datetimepicker
    ) .k-input-button .k-svg-i-calendar {
        content: normal;
    }

    /* Tag Group Allocation still uses the legacy bg-grey3/Inverse pairing in
       Light. Limit these overrides to Dark so that Light remains unchanged. */
    html[data-theme="dark"] .tag-group-allocation-toolbar {
        color: var(--aquip-text);
        background: var(--aquip-surface);
        border: 1px solid var(--aquip-border);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist {
        color: var(--aquip-text);
        background: var(--aquip-surface-raised);
        border-color: var(--aquip-border-strong);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist:hover {
        background: color-mix(in srgb, var(--aquip-surface-raised) 92%, var(--aquip-text));
        border-color: var(--aquip-text-muted);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist:focus,
    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist.k-focus {
        background: var(--aquip-surface-raised);
        border-color: var(--kendo-color-primary);
        box-shadow: 0 0 0 2px var(--aquip-focus-ring);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist .k-input-inner,
    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist .k-input-value-text,
    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist .k-input-button,
    html[data-theme="dark"] .tag-group-allocation-toolbar .k-dropdownlist .k-svg-icon {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .tag-group-type-toggle {
        color: var(--aquip-text);
        background: var(--aquip-surface-raised);
        border-color: var(--aquip-border-strong);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .tag-group-type-toggle:hover {
        color: var(--aquip-text);
        background: color-mix(in srgb, var(--aquip-surface-raised) 92%, var(--aquip-text));
        border-color: var(--aquip-text-muted);
    }

    html[data-theme="dark"] .tag-group-allocation-toolbar .tag-group-type-toggle:focus-visible,
    html[data-theme="dark"] .tag-group-allocation-toolbar .tag-group-type-toggle.k-focus {
        color: var(--aquip-text);
        background: var(--aquip-surface-raised);
        border-color: var(--kendo-color-primary);
        box-shadow: 0 0 0 2px var(--aquip-focus-ring);
    }

    html[data-theme="dark"] .k-form-layout,
    html[data-theme="dark"] td.k-table-td.k-detail-cell {
        color: var(--aquip-text);
        background: var(--aquip-surface-raised);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .cs-hierarchy,
    html[data-theme="dark"] .hierarchy-tree-row-content {
        color: var(--kendo-color-on-app-surface, var(--aquip-text));
    }

    html[data-theme="dark"] .custom-data-hierarchy {
        --kendo-color-app-surface: var(--aquip-surface);
        --kendo-color-on-app-surface: var(--aquip-text);
        --kendo-color-surface: var(--aquip-surface-raised);
        --kendo-color-on-surface: var(--aquip-text);
        --kendo-color-border: var(--aquip-border);
        --kendo-color-subtle: var(--aquip-text-muted);
        color: var(--aquip-text);
        background-color: var(--aquip-surface);
    }

    html[data-theme="dark"] .custom-data-hierarchy-toolbar,
    html[data-theme="dark"] .custom-data-hierarchy-state,
    html[data-theme="dark"] .custom-data-hierarchy-tree {
        background-color: var(--aquip-surface);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .custom-data-hierarchy-state {
        color: var(--aquip-text-muted);
    }

    html[data-theme="dark"] .custom-data-hierarchy-state.error {
        color: var(--kendo-color-error-on-surface);
    }

    html[data-theme="dark"] .custom-data-hierarchy-state .k-button {
        color: var(--aquip-text);
        border-color: transparent;
    }

    html[data-theme="dark"] .custom-data-hierarchy-state .k-button:hover,
    html[data-theme="dark"] .custom-data-hierarchy-state .k-button.k-hover {
        color: var(--aquip-text);
        background-color: var(--aquip-hover);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .custom-data-hierarchy-state .k-button:focus-visible,
    html[data-theme="dark"] .custom-data-hierarchy-state .k-button.k-focus {
        color: var(--aquip-text);
        border-color: var(--aquip-border);
        box-shadow: 0 0 0 2px var(--aquip-focus-ring);
    }

    html[data-theme="dark"] .custom-data-hierarchy-tree .k-treelist,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-grid-content,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-tbody,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-td {
        color: var(--aquip-text);
        background-color: var(--aquip-surface);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .custom-data-hierarchy-tree .k-grid-header,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-grid-header-wrap,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-thead,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-th {
        color: var(--aquip-text);
        background-color: var(--aquip-surface-raised);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row:hover > .k-table-td,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row.k-hover > .k-table-td {
        color: var(--aquip-text);
        background-color: var(--aquip-hover);
    }

    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row.k-selected > .k-table-td,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row.k-selected:hover > .k-table-td,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-table-row.k-selected.k-hover > .k-table-td {
        color: var(--aquip-text);
        background-color: var(--aquip-surface-raised);
        box-shadow: inset 3px 0 var(--aquip-text-muted);
    }

    html[data-theme="dark"] .custom-data-hierarchy-tree .k-treelist-toggle,
    html[data-theme="dark"] .custom-data-hierarchy-tree .k-svg-icon,
    html[data-theme="dark"] .custom-data-hierarchy-node-text {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .custom-data-hierarchy-node-kind {
        color: var(--aquip-text-muted);
        background-color: var(--aquip-surface-raised);
    }

    html[data-theme="dark"] .hierarchy-structure-icon,
    html[data-theme="dark"] .hierarchy-context-menu-level-icon,
    html[data-theme="dark"] .hierarchy-filter-button .k-svg-i-filter {
        filter: invert(1) brightness(1.15);
    }

    html[data-theme="dark"] label {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] h5,
    html[data-theme="dark"] h6 {
        color: var(--aquip-text);
    }

    /* Offline Settings retains its original inline Light surfaces. These
       scoped Dark overrides cover the storage, signing-passcode and purge
       states, including the disabled Purging button. */
    html[data-theme="dark"] .offline-settings-panel {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .offline-settings-panel-neutral {
        background: var(--aquip-surface-raised) !important;
        border-color: var(--aquip-border) !important;
    }

    html[data-theme="dark"] .offline-settings-panel-danger {
        color: var(--kendo-color-error-on-subtle, var(--aquip-text));
        background: var(--kendo-color-error-subtle, var(--aquip-surface-raised)) !important;
        border-color: var(--kendo-color-error-emphasis, var(--aquip-border-strong)) !important;
    }

    html[data-theme="dark"] .offline-settings-panel-danger .offline-settings-panel-copy {
        color: var(--kendo-color-error-on-subtle, var(--aquip-text)) !important;
    }

    html[data-theme="dark"] .offline-settings-page .offline-purge-button.k-button-error {
        color: var(--aquip-text) !important;
        background: color-mix(in srgb, var(--kendo-color-error) 58%, var(--aquip-surface-sunken)) !important;
        border-color: color-mix(in srgb, var(--kendo-color-error) 70%, var(--aquip-border-strong)) !important;
    }

    html[data-theme="dark"] .offline-settings-page .offline-purge-button.k-disabled {
        opacity: 0.72;
    }

    html[data-theme="dark"] a:not(.k-button):not(.btn):not(.nav-link) {
        color: var(--kendo-color-primary-on-surface, var(--kendo-color-primary));
    }

    html[data-theme="dark"] :focus-visible {
        outline-color: var(--kendo-color-primary, #4596ff);
    }

    html[data-theme="dark"] .profile-nav a.active {
        color: var(--kendo-color-primary-on-subtle, var(--aquip-text));
        background: var(--kendo-color-primary-subtle, var(--aquip-surface-sunken));
    }

    html[data-theme="dark"] .nav-item,
    html[data-theme="dark"] .nav-item-content,
    html[data-theme="dark"] .nav-item-content a,
    html[data-theme="dark"] .nav-item-content-inner a,
    html[data-theme="dark"] .nav-link,
    html[data-theme="dark"] .nav-show-more:hover,
    html[data-theme="dark"] .nav-show-more:focus {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .nav-item:hover,
    html[data-theme="dark"] .nav-item:hover .nav-item-header,
    html[data-theme="dark"] .nav-link:hover {
        color: var(--kendo-color-primary);
    }

    html[data-theme="dark"] .nav-item-content {
        background: var(--aquip-surface);
        border-color: var(--aquip-border-strong);
    }

    html[data-theme="dark"] .nav-item-content {
        box-shadow: 0 4px 16px var(--aquip-shadow-color);
    }

    html[data-theme="dark"] a.nav-link.active {
        color: var(--kendo-color-primary, #f58220);
        background-color: color-mix(
            in srgb,
            var(--kendo-color-primary, #f58220) 30%,
            var(--aquip-surface-raised)
        );
        box-shadow: none;
    }

    html[data-theme="dark"] a.nav-link.active span {
        color: inherit;
        background: transparent;
    }

    html[data-theme="dark"] .nav-link:hover {
        background-color: var(--aquip-hover);
    }

    html[data-theme="dark"] .nav-category {
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .nav-subcategory,
    html[data-theme="dark"] .nav-show-more {
        color: var(--aquip-text-muted);
    }

    html[data-theme="dark"] .login-container {
        color: var(--aquip-text);
        background-color: color-mix(in srgb, var(--aquip-surface) 88%, transparent);
    }

    html[data-theme="dark"] .login-divider {
        color: var(--aquip-text);
    }

    html[data-theme="dark"] .login-submit {
        color: var(--kendo-color-on-primary);
        background: var(--kendo-color-primary);
        border-color: var(--kendo-color-primary);
    }

    html[data-theme="dark"] .signin-retry-message {
        color: var(--kendo-color-primary-on-subtle);
        background: var(--kendo-color-primary-subtle);
        border-color: var(--kendo-color-primary);
    }

    html[data-theme="dark"] .alert-secondary,
    html[data-theme="dark"] .badge-secondary {
        color: var(--aquip-text);
        background-color: var(--aquip-surface-sunken);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] img[src^="images/feather/"],
    html[data-theme="dark"] img[src*="/images/feather/"] {
        filter: invert(92%) sepia(4%) saturate(183%) hue-rotate(174deg) brightness(103%) contrast(91%);
    }

    html[data-theme="dark"] img.logo,
    html[data-theme="dark"] .document-content img,
    html[data-theme="dark"] .pdf-viewer img,
    html[data-theme="dark"] .k-pdf-viewer img,
    html[data-theme="dark"] .map-container img,
    html[data-theme="dark"] .gm-style img {
        filter: none;
    }

}

@media screen and (max-width: 1200px) {
    html[data-theme="dark"] .nav-container:not(.nav-side) {
        background: var(--aquip-surface);
        border-color: var(--aquip-border);
    }

    html[data-theme="dark"] .nav-container:not(.nav-side) .nav-item-content {
        background: var(--aquip-surface-sunken);
    }
}

/* Dashboard Navigator already switches its own nested splitters to one pane on
   phones. The application hierarchy splitter still emitted its 10px splitbar,
   though, leaving the orange hierarchy rail visible beneath this full-screen
   workspace. Scope the outer collapse to this route by the pane it contains. */
@media screen and (max-width: 768px) {
    .hierarchy-splitter:has(.dashboard-navigator-splitter-host) > .k-splitbar {
        display: none !important;
    }

    .hierarchy-splitter:has(.dashboard-navigator-splitter-host) > .k-pane:has(.dashboard-navigator-splitter-host) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
    }
}

@media print {
    html[data-theme] {
        color-scheme: light !important;
    }
}