/*
 * Maestro Calendar dark-mode compatibility layer.
 * Component CSS should keep using design-system tokens; this file covers
 * third-party controls and legacy selectors that still have fixed light colors.
 * Screen only — print always stays light (see print.css).
 */

@media screen {
:root[data-theme="dark"],
:root[data-mw-theme="dark"] {
    --fc-page-bg-color: var(--bg-surface);
    --fc-neutral-bg-color: var(--bg-surface-alt);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-border-color: var(--border-color-light);
    --fc-list-event-hover-bg-color: var(--bg-hover);
    --fc-today-bg-color: rgba(var(--color-primary-rgb), .12);
}

:root[data-theme="dark"] body,
:root[data-mw-theme="dark"] body {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Tenant primary colours are frequently tuned for a white canvas. Keep the
   brand colour on filled buttons, but use a lighter interaction accent for
   links, selected navigation and segmented controls on dark surfaces. */
:root[data-theme="dark"],
:root[data-mw-theme="dark"] {
    --dark-interactive: #8bc5ff;
    --dark-interactive-strong: #b9dcff;
}
:root[data-theme="dark"] a:not(.btn):not(.nav-item):not(.fc-event),
:root[data-mw-theme="dark"] a:not(.btn):not(.nav-item):not(.fc-event) { color: var(--dark-interactive); }
:root[data-theme="dark"] a:not(.btn):not(.nav-item):not(.fc-event):hover,
:root[data-mw-theme="dark"] a:not(.btn):not(.nav-item):not(.fc-event):hover { color: var(--dark-interactive-strong); }

/* FullCalendar renders dates as anchors; they must retain calendar hierarchy,
   while the explicit "more" affordance remains interactive. */
:root[data-theme="dark"] .fc a:not(.fc-event):not(.fc-more-link),
:root[data-mw-theme="dark"] .fc a:not(.fc-event):not(.fc-more-link) {
    color: var(--text-primary);
}
:root[data-theme="dark"] .fc .fc-more-link,
:root[data-mw-theme="dark"] .fc .fc-more-link {
    color: var(--dark-interactive);
}
:root[data-theme="dark"] .nav-item.active,
:root[data-mw-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .nav-item.active i,
:root[data-mw-theme="dark"] .nav-item.active i,
:root[data-theme="dark"] .workflow-view-switch button.is-active,
:root[data-theme="dark"] .workflow-view-switch a.is-active,
:root[data-theme="dark"] .workflow-view-switch span.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch button.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch a.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch span.is-active,
:root[data-theme="dark"] .scale-group button.is-active,
:root[data-mw-theme="dark"] .scale-group button.is-active,
:root[data-theme="dark"] .ts-sort.is-active,
:root[data-theme="dark"] .ts-sort.is-active i,
:root[data-mw-theme="dark"] .ts-sort.is-active,
:root[data-mw-theme="dark"] .ts-sort.is-active i,
:root[data-theme="dark"] #btnGanttToggleEdit.is-active,
:root[data-mw-theme="dark"] #btnGanttToggleEdit.is-active {
    color: var(--dark-interactive);
}
:root[data-theme="dark"] #btnGanttToggleEdit.is-active,
:root[data-mw-theme="dark"] #btnGanttToggleEdit.is-active {
    border-color: color-mix(in srgb, var(--dark-interactive) 55%, transparent);
    background: color-mix(in srgb, var(--dark-interactive) 12%, transparent);
}

:root[data-theme="dark"] .tpl-view-toggle button.is-active,
:root[data-mw-theme="dark"] .tpl-view-toggle button.is-active,
:root[data-theme="dark"] .wiz-steps li.is-active,
:root[data-mw-theme="dark"] .wiz-steps li.is-active {
    color: var(--dark-interactive);
}
:root[data-theme="dark"] .tpl-view-toggle button.is-active,
:root[data-mw-theme="dark"] .tpl-view-toggle button.is-active {
    background: color-mix(in srgb, var(--dark-interactive) 12%, transparent);
}
:root[data-theme="dark"] :is(.wiz-card, .hier-pick-item, .wiz-type).is-selected,
:root[data-mw-theme="dark"] :is(.wiz-card, .hier-pick-item, .wiz-type).is-selected {
    border-color: var(--dark-interactive);
    box-shadow: 0 0 0 1px var(--dark-interactive);
}
:root[data-theme="dark"] .workflow-view-switch button.is-active,
:root[data-theme="dark"] .workflow-view-switch a.is-active,
:root[data-theme="dark"] .workflow-view-switch span.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch button.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch a.is-active,
:root[data-mw-theme="dark"] .workflow-view-switch span.is-active,
:root[data-theme="dark"] .scale-group button.is-active,
:root[data-mw-theme="dark"] .scale-group button.is-active {
    background: var(--bg-active);
    box-shadow: inset 0 0 0 1px var(--border-color-strong);
}

:root[data-theme="dark"] .section,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .dropdown-menu,
:root[data-mw-theme="dark"] .section,
:root[data-mw-theme="dark"] .card,
:root[data-mw-theme="dark"] .panel,
:root[data-mw-theme="dark"] .modal,
:root[data-mw-theme="dark"] .modal-content,
:root[data-mw-theme="dark"] .drawer,
:root[data-mw-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

:root[data-theme="dark"] .drawer-header,
:root[data-mw-theme="dark"] .drawer-header {
    background: linear-gradient(180deg, var(--bg-surface-alt), var(--bg-surface));
}

:root[data-theme="dark"] .ed-meta,
:root[data-mw-theme="dark"] .ed-meta {
    background: linear-gradient(180deg, var(--bg-surface-alt), var(--bg-surface));
    border-color: var(--border-color-light);
}

:root[data-theme="dark"] .drawer-footer,
:root[data-mw-theme="dark"] .drawer-footer,
:root[data-theme="dark"] .modal-footer,
:root[data-mw-theme="dark"] .modal-footer {
    background: var(--bg-surface-alt);
}

:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-mw-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
:root[data-mw-theme="dark"] select,
:root[data-mw-theme="dark"] textarea {
    background-color: var(--bg-surface-inset);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-mw-theme="dark"] input::placeholder,
:root[data-mw-theme="dark"] textarea::placeholder { color: var(--text-placeholder); }

:root[data-theme="dark"] .activities-toolbar .search input:focus,
:root[data-mw-theme="dark"] .activities-toolbar .search input:focus,
:root[data-theme="dark"] .title-text,
:root[data-mw-theme="dark"] .title-text,
:root[data-theme="dark"] .title-text:focus,
:root[data-mw-theme="dark"] .title-text:focus,
:root[data-theme="dark"] .due-input,
:root[data-mw-theme="dark"] .due-input,
:root[data-theme="dark"] .quickadd-input,
:root[data-mw-theme="dark"] .quickadd-input,
:root[data-theme="dark"] .mc-up-dialog,
:root[data-mw-theme="dark"] .mc-up-dialog,
:root[data-theme="dark"] .mc-up-search,
:root[data-mw-theme="dark"] .mc-up-search,
:root[data-theme="dark"] .mc-up-list,
:root[data-mw-theme="dark"] .mc-up-list {
    background: var(--bg-surface-inset);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .mc-up-dropdown,
:root[data-mw-theme="dark"] .mc-up-dropdown {
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

:root[data-theme="dark"] .mc-up-result,
:root[data-mw-theme="dark"] .mc-up-result {
    color: var(--text-primary);
    border-color: transparent;
}

:root[data-theme="dark"] .mc-up-result:hover,
:root[data-theme="dark"] .mc-up-result.is-active,
:root[data-mw-theme="dark"] .mc-up-result:hover,
:root[data-mw-theme="dark"] .mc-up-result.is-active {
    background: var(--primary-subtle);
}

:root[data-theme="dark"] .mc-up-chip,
:root[data-mw-theme="dark"] .mc-up-chip {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

:root[data-theme="dark"] .mc-up-input,
:root[data-mw-theme="dark"] .mc-up-input,
:root[data-theme="dark"] .mc-user-picker,
:root[data-mw-theme="dark"] .mc-user-picker {
    background: var(--bg-surface-inset);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .act-popover,
:root[data-mw-theme="dark"] .act-popover,
:root[data-theme="dark"] .mc-assignee-modal .modal-dialog,
:root[data-mw-theme="dark"] .mc-assignee-modal .modal-dialog {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .fc .fc-col-header-cell,
:root[data-mw-theme="dark"] .fc .fc-col-header-cell,
:root[data-theme="dark"] .fc-list-day-cushion,
:root[data-mw-theme="dark"] .fc-list-day-cushion {
    background: var(--bg-surface-alt) !important;
}

:root[data-theme="dark"] .fc .fc-button,
:root[data-mw-theme="dark"] .fc .fc-button {
    background: var(--bg-surface-alt) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .fc .fc-button:hover,
:root[data-mw-theme="dark"] .fc .fc-button:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
:root[data-theme="dark"] .fc-theme-standard td,
:root[data-theme="dark"] .fc-theme-standard th,
:root[data-mw-theme="dark"] .fc-theme-standard .fc-scrollgrid,
:root[data-mw-theme="dark"] .fc-theme-standard td,
:root[data-mw-theme="dark"] .fc-theme-standard th { border-color: var(--border-color-light); }

:root[data-theme="dark"] .gantt-container,
:root[data-mw-theme="dark"] .gantt-container,
:root[data-theme="dark"] .gantt .grid-background,
:root[data-mw-theme="dark"] .gantt .grid-background { fill: var(--bg-surface); background: var(--bg-surface); }

:root[data-theme="dark"] .gantt .grid-header,
:root[data-mw-theme="dark"] .gantt .grid-header { fill: var(--bg-surface-alt); stroke: var(--border-color-light); }

:root[data-theme="dark"] .gantt .grid-row,
:root[data-mw-theme="dark"] .gantt .grid-row { fill: var(--bg-surface); }

:root[data-theme="dark"] .gantt .grid-row:nth-child(even),
:root[data-mw-theme="dark"] .gantt .grid-row:nth-child(even) { fill: var(--bg-surface-alt); }

:root[data-theme="dark"] .gantt .row-line,
:root[data-theme="dark"] .gantt .tick,
:root[data-mw-theme="dark"] .gantt .row-line,
:root[data-mw-theme="dark"] .gantt .tick { stroke: var(--border-color-light); }

:root[data-theme="dark"] .gantt text,
:root[data-mw-theme="dark"] .gantt text { fill: var(--text-secondary); }

:root[data-theme="dark"] .gantt .bar-label,
:root[data-mw-theme="dark"] .gantt .bar-label { fill: #f8fafc; }

:root[data-theme="dark"] .gantt-container .bar-wrapper.bar-undated .bar-label,
:root[data-mw-theme="dark"] .gantt-container .bar-wrapper.bar-undated .bar-label { fill: #e2e8f0; }

:root[data-theme="dark"] .workflow-view-frame,
:root[data-mw-theme="dark"] .workflow-view-frame,
:root[data-theme="dark"] iframe,
:root[data-mw-theme="dark"] iframe { color-scheme: dark; }

:root[data-theme="dark"] .hubit-app-menu,
:root[data-theme="dark"] .hubit-app-menu__panel,
:root[data-mw-theme="dark"] .hubit-app-menu,
:root[data-mw-theme="dark"] .hubit-app-menu__panel {
    color-scheme: dark;
    --bg-surface: #111827;
    --bg-hover: #1e293b;
    --border-color: #273449;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
}

/* HubitIdentity's shared profile stylesheet predates the theme tokens and
   still declares fixed light colors. The host owns only the theme mapping;
   markup and profile behavior remain in HubitIdentity. */
:root[data-theme="dark"] .hubit-profile-page,
:root[data-mw-theme="dark"] .hubit-profile-page {
    color: var(--text-primary);
}

:root[data-theme="dark"] .hubit-profile-page__header p,
:root[data-theme="dark"] .hubit-profile-card__header p,
:root[data-mw-theme="dark"] .hubit-profile-page__header p,
:root[data-mw-theme="dark"] .hubit-profile-card__header p {
    color: var(--text-tertiary);
}

:root[data-theme="dark"] .hubit-profile-card,
:root[data-mw-theme="dark"] .hubit-profile-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

:root[data-theme="dark"] .hubit-profile-card__header,
:root[data-mw-theme="dark"] .hubit-profile-card__header {
    border-bottom-color: var(--border-color-light);
}

:root[data-theme="dark"] .hubit-profile-card__icon,
:root[data-mw-theme="dark"] .hubit-profile-card__icon {
    background: var(--primary-subtle);
    color: var(--primary);
}

:root[data-theme="dark"] .hubit-profile-page .form-label,
:root[data-theme="dark"] .hubit-profile-page .form-floating label,
:root[data-mw-theme="dark"] .hubit-profile-page .form-label,
:root[data-mw-theme="dark"] .hubit-profile-page .form-floating label {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .hubit-profile-page .form-control,
:root[data-theme="dark"] .hubit-profile-page .form-select,
:root[data-theme="dark"] .hubit-profile-page .form-control[readonly],
:root[data-mw-theme="dark"] .hubit-profile-page .form-control,
:root[data-mw-theme="dark"] .hubit-profile-page .form-select,
:root[data-mw-theme="dark"] .hubit-profile-page .form-control[readonly] {
    background: var(--bg-surface-inset);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .hubit-profile-page .btn-outline-secondary,
:root[data-mw-theme="dark"] .hubit-profile-page .btn-outline-secondary {
    background: var(--bg-surface-alt);
    border-color: var(--border-color-strong);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .hubit-profile-page .btn-outline-secondary:hover,
:root[data-mw-theme="dark"] .hubit-profile-page .btn-outline-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Status/priority chips keep their semantic color without becoming bright
   islands on a dark activity table. */
:root[data-theme="dark"] .act-pill.s-Open,
:root[data-theme="dark"] .act-pill.p-Normal,
:root[data-mw-theme="dark"] .act-pill.s-Open,
:root[data-mw-theme="dark"] .act-pill.p-Normal {
    color: #cbd5e1; background: rgba(148, 163, 184, .15); border-color: rgba(148, 163, 184, .32);
}
:root[data-theme="dark"] .act-pill.s-InProgress,
:root[data-mw-theme="dark"] .act-pill.s-InProgress {
    color: #67e8f9; background: rgba(6, 182, 212, .16); border-color: rgba(34, 211, 238, .34);
}
:root[data-theme="dark"] .act-pill.s-Blocked,
:root[data-theme="dark"] .act-pill.p-High,
:root[data-mw-theme="dark"] .act-pill.s-Blocked,
:root[data-mw-theme="dark"] .act-pill.p-High {
    color: #fdba74; background: rgba(249, 115, 22, .16); border-color: rgba(251, 146, 60, .34);
}
:root[data-theme="dark"] .act-pill.s-Done,
:root[data-mw-theme="dark"] .act-pill.s-Done {
    color: #86efac; background: rgba(34, 197, 94, .16); border-color: rgba(74, 222, 128, .34);
}
:root[data-theme="dark"] .act-pill.s-Cancelled,
:root[data-theme="dark"] .act-pill.p-Urgent,
:root[data-mw-theme="dark"] .act-pill.s-Cancelled,
:root[data-mw-theme="dark"] .act-pill.p-Urgent {
    color: #fda4af; background: rgba(244, 63, 94, .16); border-color: rgba(251, 113, 133, .34);
}
:root[data-theme="dark"] .act-pill.s-Deferred,
:root[data-mw-theme="dark"] .act-pill.s-Deferred {
    color: #d8b4fe; background: rgba(168, 85, 247, .16); border-color: rgba(192, 132, 252, .34);
}
:root[data-theme="dark"] .act-pill.p-Low,
:root[data-mw-theme="dark"] .act-pill.p-Low {
    color: #7dd3fc; background: rgba(14, 165, 233, .16); border-color: rgba(56, 189, 248, .34);
}

:root[data-theme="dark"] .act-popover-item,
:root[data-mw-theme="dark"] .act-popover-item { color: var(--text-secondary); }
:root[data-theme="dark"] .act-popover-item.s-InProgress,
:root[data-mw-theme="dark"] .act-popover-item.s-InProgress { color: #67e8f9; }
:root[data-theme="dark"] .act-popover-item.s-Blocked,
:root[data-theme="dark"] .act-popover-item.p-High,
:root[data-mw-theme="dark"] .act-popover-item.s-Blocked,
:root[data-mw-theme="dark"] .act-popover-item.p-High { color: #fdba74; }
:root[data-theme="dark"] .act-popover-item.s-Done,
:root[data-mw-theme="dark"] .act-popover-item.s-Done { color: #86efac; }
:root[data-theme="dark"] .act-popover-item.s-Cancelled,
:root[data-theme="dark"] .act-popover-item.p-Urgent,
:root[data-mw-theme="dark"] .act-popover-item.s-Cancelled,
:root[data-mw-theme="dark"] .act-popover-item.p-Urgent { color: #fda4af; }
:root[data-theme="dark"] .act-popover-item.s-Deferred,
:root[data-mw-theme="dark"] .act-popover-item.s-Deferred { color: #d8b4fe; }
:root[data-theme="dark"] .act-popover-item.p-Low,
:root[data-mw-theme="dark"] .act-popover-item.p-Low { color: #7dd3fc; }

/* Time tracker is mounted dynamically after the page loads and therefore is
   not covered by the static card/panel selectors. */
:root[data-theme="dark"] .tt-header,
:root[data-mw-theme="dark"] .tt-header {
    background: linear-gradient(180deg, var(--bg-surface-elevated), var(--bg-surface-alt));
    border-color: var(--border-color);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .tt-header:hover,
:root[data-theme="dark"] .tt-header.is-open,
:root[data-mw-theme="dark"] .tt-header:hover,
:root[data-mw-theme="dark"] .tt-header.is-open {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-md);
}
:root[data-theme="dark"] .tt-header-iconwrap,
:root[data-mw-theme="dark"] .tt-header-iconwrap { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .tt-header.running .tt-header-sub,
:root[data-mw-theme="dark"] .tt-header.running .tt-header-sub { color: #86efac; }
:root[data-theme="dark"] .tt-header-btn:hover,
:root[data-mw-theme="dark"] .tt-header-btn:hover { background: rgba(255, 255, 255, .08); }

:root[data-theme="dark"] .tt-panel,
:root[data-mw-theme="dark"] .tt-panel {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-2xl);
}
:root[data-theme="dark"] .tt-panel-btn,
:root[data-mw-theme="dark"] .tt-panel-btn {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
    color: var(--text-primary);
}
:root[data-theme="dark"] .tt-panel-ghost,
:root[data-mw-theme="dark"] .tt-panel-ghost { background: transparent; }
:root[data-theme="dark"] .tt-panel-ghost:hover,
:root[data-theme="dark"] .tt-panel-x:hover,
:root[data-theme="dark"] .tt-panel-tasklink:hover,
:root[data-mw-theme="dark"] .tt-panel-ghost:hover,
:root[data-mw-theme="dark"] .tt-panel-x:hover,
:root[data-mw-theme="dark"] .tt-panel-tasklink:hover { background: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .tt-pn-project,
:root[data-mw-theme="dark"] .tt-pn-project {
    background: color-mix(in srgb, var(--pcol, #2d9cdb) 16%, var(--bg-surface));
    color: color-mix(in srgb, var(--pcol, #2d9cdb) 48%, #ffffff);
}
:root[data-theme="dark"] .tt-panel-clock,
:root[data-mw-theme="dark"] .tt-panel-clock { color: #86efac; }

/* Overlays appended to <body> inherit tokens, but leftover hex fallbacks
   and third-party popovers still need an explicit surface remap. */
:root[data-theme="dark"] .mc-dp-pop,
:root[data-mw-theme="dark"] .mc-dp-pop,
:root[data-theme="dark"] .toast,
:root[data-mw-theme="dark"] .toast,
:root[data-theme="dark"] .ctx-menu-host,
:root[data-mw-theme="dark"] .ctx-menu-host,
:root[data-theme="dark"] .export-menu,
:root[data-mw-theme="dark"] .export-menu,
:root[data-theme="dark"] .mc-modal .modal-dialog,
:root[data-mw-theme="dark"] .mc-modal .modal-dialog,
:root[data-theme="dark"] .fa-icon-picker,
:root[data-mw-theme="dark"] .fa-icon-picker,
:root[data-theme="dark"] .color-picker,
:root[data-mw-theme="dark"] .color-picker,
:root[data-theme="dark"] .tk-parent-results,
:root[data-theme="dark"] .tk-dep-results,
:root[data-mw-theme="dark"] .tk-parent-results,
:root[data-mw-theme="dark"] .tk-dep-results,
:root[data-theme="dark"] .fc-popover,
:root[data-theme="dark"] .fc-more-popover,
:root[data-mw-theme="dark"] .fc-popover,
:root[data-mw-theme="dark"] .fc-more-popover,
:root[data-theme="dark"] .kc-popover,
:root[data-mw-theme="dark"] .kc-popover,
:root[data-theme="dark"] .pc-dropdown,
:root[data-mw-theme="dark"] .pc-dropdown,
:root[data-theme="dark"] .kanban-bulk,
:root[data-mw-theme="dark"] .kanban-bulk,
:root[data-theme="dark"] .gantt-container .popup-wrapper,
:root[data-mw-theme="dark"] .gantt-container .popup-wrapper,
:root[data-theme="dark"] .gantt-drag-tip,
:root[data-mw-theme="dark"] .gantt-drag-tip,
:root[data-theme="dark"] .tt-panel,
:root[data-mw-theme="dark"] .tt-panel {
    color-scheme: dark;
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-2xl);
}

:root[data-theme="dark"] .mc-dp-pop input,
:root[data-mw-theme="dark"] .mc-dp-pop input,
:root[data-theme="dark"] .mc-dp-preset,
:root[data-mw-theme="dark"] .mc-dp-preset,
:root[data-theme="dark"] .mc-dp-now,
:root[data-mw-theme="dark"] .mc-dp-now {
    background: var(--bg-surface-inset);
    color: var(--text-primary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .mc-dp-btn--ghost,
:root[data-mw-theme="dark"] .mc-dp-btn--ghost { color: var(--text-secondary); }

:root[data-theme="dark"] .pc-status-active,
:root[data-mw-theme="dark"] .pc-status-active {
    background: rgba(var(--color-success-rgb), .18); color: #86efac;
}
:root[data-theme="dark"] .pc-status-planning,
:root[data-mw-theme="dark"] .pc-status-planning {
    background: rgba(99, 102, 241, .18); color: #c7d2fe;
}
:root[data-theme="dark"] .pc-status-onhold,
:root[data-mw-theme="dark"] .pc-status-onhold {
    background: rgba(var(--color-warning-rgb), .18); color: #fde68a;
}
:root[data-theme="dark"] .pc-status-completed,
:root[data-mw-theme="dark"] .pc-status-completed {
    background: rgba(59, 130, 246, .18); color: #93c5fd;
}
:root[data-theme="dark"] .pc-status-cancelled,
:root[data-mw-theme="dark"] .pc-status-cancelled {
    background: rgba(var(--color-danger-rgb), .18); color: #fda4af;
}
:root[data-theme="dark"] .pc-status-archived,
:root[data-mw-theme="dark"] .pc-status-archived {
    background: rgba(148, 163, 184, .18); color: var(--text-secondary);
}

:root[data-theme="dark"] .dash-report,
:root[data-mw-theme="dark"] .dash-report {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .dash-report th,
:root[data-mw-theme="dark"] .dash-report th { color: var(--text-secondary); border-color: var(--border-color-light); }
:root[data-theme="dark"] .dash-report td,
:root[data-mw-theme="dark"] .dash-report td { border-color: var(--border-color-light); }

:root[data-theme="dark"] .page-toolbar,
:root[data-mw-theme="dark"] .page-toolbar,
:root[data-theme="dark"] .tpl-block,
:root[data-mw-theme="dark"] .tpl-block,
:root[data-theme="dark"] .shared-filter-bar,
:root[data-mw-theme="dark"] .shared-filter-bar {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

@media (prefers-reduced-motion: no-preference) {
    body, .sidebar, .main-header, .section, .card, .panel, .dropdown-menu, .drawer {
        transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    }
}
}