/* Global dark mode overrides for shared layout surfaces and common controls. */
/* Cleanup role: shared theme stylesheet. Keep this visual-token and shared-control only; route behavior and workflow state belong in browser modules and typed APIs. */

@layer theme {

.theme-toggle-btn {
    min-width: 5.5rem;
    border-width: 1px;
}

.theme-variant-btn {
    min-width: 5.75rem;
    border-width: 1px;
}

:root {
    --wo-metro-accent: #1a6f63;
    --wo-metro-accent-strong: #14584f;
    --wo-metro-accent-soft: #edf5f2;
    --wo-metro-accent-ghost: rgba(26, 111, 99, 0.12);
    --wo-metro-border: #bfd0cb;
    --wo-metro-border-strong: #97b4ad;
    --wo-metro-shadow: rgba(20, 58, 55, 0.14);
    --wo-metro-nav-start: #183138;
    --wo-metro-nav-mid: #225159;
    --wo-metro-nav-end: #2d6966;
    --wo-metro-nav-hover: rgba(192, 231, 223, 0.18);
    --wo-metro-panel: #f6fbfa;
    --wo-metro-panel-alt: #eef5f3;
    --wo-metro-text: #17313a;
    --wo-metro-muted: #56676d;
    --wo-metro-status-primary-bg: #d7e6f4;
    --wo-metro-status-primary-text: #214a67;
    --wo-metro-status-primary-border: #9db6cd;
    --wo-metro-status-primary-accent: #537ea2;
    --wo-metro-status-info-bg: #d6edf0;
    --wo-metro-status-info-text: #1e5961;
    --wo-metro-status-info-border: #9cc8ce;
    --wo-metro-status-info-accent: #3b8896;
    --wo-metro-status-success-bg: #d8efe3;
    --wo-metro-status-success-text: #1e6144;
    --wo-metro-status-success-border: #97c8af;
    --wo-metro-status-success-accent: #2e7c5a;
    --wo-metro-status-warning-bg: #f8e6ce;
    --wo-metro-status-warning-text: #7a4b08;
    --wo-metro-status-warning-border: #dfbe8f;
    --wo-metro-status-warning-accent: #b0711f;
    --wo-metro-status-secondary-bg: #e3e8ef;
    --wo-metro-status-secondary-text: #3b526b;
    --wo-metro-status-secondary-border: #b6c2d2;
    --wo-metro-status-secondary-accent: #647c97;
    --wo-metro-status-dark-bg: #d8dde6;
    --wo-metro-status-dark-text: #2f3a4a;
    --wo-metro-status-dark-border: #a8b2c2;
    --wo-metro-status-dark-accent: #4a5d78;
    --wo-metro-status-peach-bg: #f7dfce;
    --wo-metro-status-peach-text: #72441d;
    --wo-metro-status-peach-border: #debb9f;
    --wo-metro-status-peach-accent: #b47444;
    --wo-metro-number-chip-bg: #eaf2f1;
    --wo-metro-number-chip-border: #9bb8b2;
    --wo-metro-number-chip-text: #14323a;
}

html[data-theme-variant="metro"] {
    --wo-btn-radius: 0.18rem;
    --wo-btn-font-weight: 700;
}

html[data-theme="dark"][data-theme-variant="metro"] {
    --wo-metro-accent: #5aaea0;
    --wo-metro-accent-strong: #46887d;
    --wo-metro-accent-soft: #18282f;
    --wo-metro-accent-ghost: rgba(90, 174, 160, 0.16);
    --wo-metro-border: #365058;
    --wo-metro-border-strong: #50756f;
    --wo-metro-shadow: rgba(5, 19, 23, 0.42);
    --wo-metro-nav-start: #0d1b20;
    --wo-metro-nav-mid: #143239;
    --wo-metro-nav-end: #1c4d4e;
    --wo-metro-nav-hover: rgba(103, 189, 173, 0.16);
    --wo-metro-panel: #152128;
    --wo-metro-panel-alt: #1a2b33;
    --wo-metro-text: #e3f1ee;
    --wo-metro-muted: #afc5c0;
    --wo-metro-status-primary-bg: #2d4960;
    --wo-metro-status-primary-text: #d8e6f3;
    --wo-metro-status-primary-border: #4e718d;
    --wo-metro-status-primary-accent: #7ba8d0;
    --wo-metro-status-info-bg: #254f59;
    --wo-metro-status-info-text: #d2edf1;
    --wo-metro-status-info-border: #447884;
    --wo-metro-status-info-accent: #7cbfcc;
    --wo-metro-status-success-bg: #25523f;
    --wo-metro-status-success-text: #d7f0e2;
    --wo-metro-status-success-border: #3f7a61;
    --wo-metro-status-success-accent: #72c59e;
    --wo-metro-status-warning-bg: #5d4521;
    --wo-metro-status-warning-text: #f5e2c2;
    --wo-metro-status-warning-border: #8f6d34;
    --wo-metro-status-warning-accent: #d7a85e;
    --wo-metro-status-secondary-bg: #394758;
    --wo-metro-status-secondary-text: #dae4f3;
    --wo-metro-status-secondary-border: #5e738c;
    --wo-metro-status-secondary-accent: #94aac7;
    --wo-metro-status-dark-bg: #2a323d;
    --wo-metro-status-dark-text: #d3d9e5;
    --wo-metro-status-dark-border: #4a586a;
    --wo-metro-status-dark-accent: #8998af;
    --wo-metro-status-peach-bg: #5d3f29;
    --wo-metro-status-peach-text: #f2dec8;
    --wo-metro-status-peach-border: #8e6242;
    --wo-metro-status-peach-accent: #d39a62;
    --wo-metro-number-chip-bg: #21343b;
    --wo-metro-number-chip-border: #3f6068;
    --wo-metro-number-chip-text: #e4f3f0;
}

.btn:not(.btn-link) {
    border-radius: var(--wo-btn-radius);
    font-weight: var(--wo-btn-font-weight);
    letter-spacing: 0.01em;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.btn:not(.btn-link):focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

html[data-theme-variant="metro"] .btn:not(.btn-link):focus-visible {
    box-shadow: 0 0 0 0.2rem var(--wo-metro-accent-ghost);
}

html[data-theme-variant="metro"] .btn-primary,
html[data-theme-variant="metro"] .btn-outline-primary:hover,
html[data-theme-variant="metro"] .btn-outline-primary:focus,
html[data-theme-variant="metro"] .btn-check:checked + .btn-outline-primary {
    background-color: var(--wo-metro-accent);
    border-color: var(--wo-metro-accent);
    color: #ffffff;
}

html[data-theme-variant="metro"] .btn-primary:hover,
html[data-theme-variant="metro"] .btn-primary:focus,
html[data-theme-variant="metro"] .btn-primary:active {
    background-color: var(--wo-metro-accent-strong);
    border-color: var(--wo-metro-accent-strong);
}

html[data-theme-variant="metro"] .btn-outline-primary {
    color: var(--wo-metro-accent-strong);
    border-color: var(--wo-metro-border-strong);
}

.btn.btn-default {
    color: #0f172a;
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.btn.btn-default:hover,
.btn.btn-default:focus {
    color: #0f172a;
    background-color: #e2e8f0;
    border-color: #b7c4d6;
}

.btn.btn-default:active {
    color: #0f172a;
    background-color: #d7e0ec;
    border-color: #aab8cc;
}

.navbar.navbar-dark.bg-dark {
    border-bottom: 1px solid #304a62;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.35);
}

html[data-theme-variant="metro"] .navbar.navbar-dark.bg-dark {
    border-bottom-width: 3px;
    box-shadow: none;
}

html[data-theme="light"] .navbar.navbar-dark.bg-dark {
    background: linear-gradient(90deg, #0f2942 0%, #174166 55%, #255782 100%) !important;
}

html[data-theme="light"][data-theme-variant="metro"] .navbar.navbar-dark.bg-dark {
    background: linear-gradient(90deg, var(--wo-metro-nav-start) 0%, var(--wo-metro-nav-mid) 52%, var(--wo-metro-nav-end) 100%) !important;
}

html[data-theme="light"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-menu {
    background: linear-gradient(180deg, #23444c 0%, #19363d 100%);
    border-color: rgba(219, 238, 233, 0.16);
}

html[data-theme="light"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item {
    color: #eaf6f3;
}

html[data-theme="light"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item:hover,
html[data-theme="light"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item:focus {
    background: var(--wo-metro-nav-hover);
}

html[data-theme-variant="metro"] .navbar.navbar-dark .theme-variant-btn,
html[data-theme-variant="metro"] .navbar.navbar-dark .theme-toggle-btn {
    border-color: rgba(232, 246, 243, 0.34);
    background-color: rgba(255, 255, 255, 0.06);
    color: #eff8f6;
}

html[data-theme="light"] .navbar.navbar-dark .navbar-brand,
html[data-theme="light"] .navbar.navbar-dark .nav-link {
    color: #ebf5ff;
}

html[data-theme="light"] .navbar.navbar-dark .nav-link:hover,
html[data-theme="light"] .navbar.navbar-dark .nav-link:focus {
    color: #ffffff;
}

html[data-theme="light"] .navbar.navbar-dark .dropdown-menu {
    background: linear-gradient(180deg, #1b3551 0%, #132a44 100%);
    border-color: #2f4d6d;
}

html[data-theme="light"] .navbar.navbar-dark .dropdown-item {
    color: #deebfb;
}

html[data-theme="light"] .navbar.navbar-dark .dropdown-item:hover,
html[data-theme="light"] .navbar.navbar-dark .dropdown-item:focus {
    color: #ffffff;
    background: rgba(147, 197, 253, 0.18);
}

html[data-theme-variant="metro"] .navbar.navbar-dark .dropdown-menu {
    border-radius: 0.2rem;
}

.navbar.navbar-dark .nav-link,
.navbar.navbar-dark .dropdown-item {
    transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.navbar.navbar-dark .dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid #2e4860;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.navbar.navbar-dark .dropdown-menu.show {
    animation: woDropdownIn 0.14s ease-out;
    transform-origin: top center;
}

.navbar.navbar-dark .dropdown-item:hover,
.navbar.navbar-dark .dropdown-item:focus {
    transform: translateX(2px);
}

@keyframes woDropdownIn {
    from {
        opacity: 0;
        transform: translateY(0.35rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wo-alert-strip {
    margin: 0;
    padding: 0 0.75rem 0.5rem;
}

.wo-top-alert.alert {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    padding: 0.55rem 0.8rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}

.wo-top-alert-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.9rem;
}

.wo-top-alert-body {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    line-height: 1.2;
}

.wo-top-alert-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    opacity: 0.9;
}

.wo-top-alert.wo-top-alert-warning {
    color: #543f05;
    background: linear-gradient(180deg, #fff7dc 0%, #fef0bf 100%);
    border-color: #f4d27a;
}

.wo-top-alert.wo-top-alert-warning .wo-top-alert-icon {
    color: #4a3500;
    background-color: rgba(244, 194, 63, 0.26);
}

.wo-top-alert.wo-top-alert-danger {
    color: #5f1d1f;
    background: linear-gradient(180deg, #ffe6e7 0%, #ffd6d9 100%);
    border-color: #f2a6ab;
}

.wo-top-alert.wo-top-alert-danger .wo-top-alert-icon {
    color: #5f1113;
    background-color: rgba(226, 70, 77, 0.2);
}

.wo-top-alert.wo-top-alert-critical {
    color: #0e3f63;
    background: linear-gradient(180deg, #dff1ff 0%, #cde8ff 100%);
    border-color: #8ec5f2;
}

.wo-top-alert.wo-top-alert-critical .wo-top-alert-icon {
    color: #0b3452;
    background-color: rgba(48, 139, 210, 0.22);
}

.client-tenure-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.client-tenure-badge.client-tenure-new {
    color: #115e59;
    background-color: #d1fae5;
    border-color: #95e7c4;
}

.client-tenure-badge.client-tenure-established {
    color: #1e3a8a;
    background-color: #dbeafe;
    border-color: #a5c5fc;
}

.client-tenure-badge.client-tenure-longterm {
    color: #7c2d12;
    background-color: #ffedd5;
    border-color: #f2c99c;
}

.client-tenure-badge.client-tenure-legacy {
    color: #581c87;
    background-color: #f3e8ff;
    border-color: #d8b4fe;
}

.client-tenure-badge.client-tenure-unknown {
    color: #374151;
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

/* Legacy inline-style replacement utilities (WO-CSS-005/006 incremental). */
.wo-pt-0 {
    padding-top: 0;
}

.wo-pt-10 {
    padding-top: 10px;
}

.wo-pt-20 {
    padding-top: 20px;
}

.wo-pt-30 {
    padding-top: 30px;
}

.wo-p-20 {
    padding: 20px;
}

.wo-pl-50 {
    padding-left: 50px;
}

.wo-w-150 {
    width: 150px;
}

.wo-w-190 {
    width: 190px;
}

.wo-bg-surface {
    background-color: #ffffff;
}

.dashboard-chart {
    display: block;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    border: 1px solid #d5deeb;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.dashboard-chart-lg {
    height: 260px;
}

.dashboard-chart-row {
    row-gap: 12px;
    margin-bottom: 8px;
}

.dashboard-chart-row-first {
    margin-top: 4px;
}

.dashboard-chart-row:last-child {
    margin-bottom: 0;
}

.dashboard-chart-col {
    padding-left: 6px;
    padding-right: 6px;
}

.dashboard-chart-col .dashboard-chart {
    margin-bottom: 0;
}

.dashboard-summary-row {
    row-gap: 12px;
    margin-bottom: 0.95rem;
}

.dashboard-summary-col {
    padding-left: 6px;
    padding-right: 6px;
}

.dashboard-summary-card {
    height: 100%;
    border: 1px solid #d5deeb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.dashboard-summary-card-body {
    padding: 1rem 1.15rem;
}

.wo-live-tile-hover-host {
    position: relative;
}

.wo-live-tile-chart-host {
    position: relative;
}

#wo-live-tile-popup-host {
    position: fixed;
    inset: 0;
    z-index: 1300;
    pointer-events: none;
}

.wo-live-tile-popup {
    display: none;
}

.wo-live-tile-popup.wo-live-tile-popup-hosted {
    --wo-live-tile-preferred-width: 22rem;
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: min(var(--wo-live-tile-preferred-width), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.72rem 0.78rem;
    border: 1px solid #d5deeb;
    border-left: 3px solid #6f8eb2;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(249, 252, 255, 0.98) 0%, rgba(240, 246, 253, 0.99) 100%);
    color: #1f3148;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.985);
    transform-origin: top left;
    transition: opacity 160ms ease, transform 190ms ease, box-shadow 160ms ease;
    pointer-events: none;
}

.wo-live-tile-popup.wo-live-tile-popup-hosted.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wo-live-tile-popup.wo-live-tile-popup-hosted.is-positioned-above {
    transform-origin: bottom left;
}

.wo-live-tile-popup.wo-live-tile-popup-hosted.is-pinned {
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.24);
}

.wo-live-tile-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.wo-live-tile-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.wo-live-tile-meta {
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.88;
}

.wo-live-tile-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.05;
}

.wo-live-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
}

.wo-live-tile-cell {
    min-width: 0;
}

.wo-live-tile-cell-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.74;
}

.wo-live-tile-cell-value {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
}

.wo-live-tile-popup .wo-live-tile-kicker {
    letter-spacing: 0.07em;
    opacity: 0.76;
}

.wo-live-tile-popup .wo-live-tile-title {
    font-size: 0.95rem;
    line-height: 1.28;
}

.wo-live-tile-popup .wo-live-tile-meta {
    margin-top: 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.wo-live-tile-popup .wo-live-tile-grid {
    margin-top: 0;
    gap: 0.38rem 0.6rem;
}

.wo-live-tile-popup .wo-live-tile-cell-label {
    font-size: 0.62rem;
}

.wo-live-tile-popup .wo-live-tile-cell-value {
    font-size: 0.8rem;
    line-height: 1.28;
}

.triage-live-tile-popup {
    --wo-live-tile-preferred-width: 24rem;
}

.projects-agile-live-tile-popup,
.project-agile-task-live-tile-popup {
    --wo-live-tile-preferred-width: 22rem;
}

.projects-agile-live-tile-popup .wo-live-tile-grid,
.project-agile-task-live-tile-popup .wo-live-tile-grid {
    display: grid;
    margin-top: 0;
    gap: 0.42rem 0.62rem;
}

.projects-agile-live-tile-popup .wo-live-tile-title,
.project-agile-task-live-tile-popup .wo-live-tile-title {
    font-size: 0.92rem;
    line-height: 1.24;
}

.projects-agile-live-tile-popup .wo-live-tile-meta,
.project-agile-task-live-tile-popup .wo-live-tile-meta {
    margin-top: 0;
    font-size: 0.76rem;
    line-height: 1.42;
    display: block;
    overflow: visible;
}

.dashboard-summary-tile-front,
.dashboard-summary-tile-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.dashboard-summary-tile-back {
    display: none;
}

.dashboard-summary-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.dashboard-summary-metric-col {
    flex: 1 1 0;
    min-width: 0;
}

.dashboard-summary-value,
.dashboard-summary-value-sm {
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1;
}

.dashboard-summary-value {
    font-size: 2rem;
}

.dashboard-summary-value-sm {
    font-size: 1.4rem;
}

.dashboard-summary-tile-kicker,
.dashboard-summary-mini-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.dashboard-summary-tile-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

.dashboard-summary-mini-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-summary-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.dashboard-summary-mini-cell {
    min-width: 0;
}

.dashboard-summary-tile-back .dashboard-summary-mini-label {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
}

.dashboard-summary-tile-back .dashboard-summary-mini-value {
    font-size: 0.94rem;
    line-height: 1.15;
}

.dashboard-summary-tile-meta {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.82;
}

.dashboard-summary-card-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    font-weight: 700;
    color: #334155;
}

.dashboard-summary-actions-row {
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
    row-gap: 0.6rem;
}

.dashboard-summary-action-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(100, 116, 139, 0.28);
    border-left: 4px solid rgba(59, 130, 246, 0.78);
    border-radius: 0.28rem;
    text-decoration: none;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    color: #0f172a;
    transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

.dashboard-summary-action-card:hover,
.dashboard-summary-action-card:focus-visible {
    color: #0f172a;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.13);
    border-color: rgba(59, 130, 246, 0.52);
}

.dashboard-summary-action-escalation {
    border-left-color: rgba(22, 163, 74, 0.82);
}

.dashboard-summary-action-sla {
    border-left-color: rgba(217, 119, 6, 0.84);
}

.dashboard-summary-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.3rem;
    background: rgba(15, 23, 42, 0.08);
    font-size: 1rem;
}

.dashboard-summary-action-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.dashboard-summary-action-title {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-summary-action-meta {
    font-size: 0.74rem;
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-summary-action-value {
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 700;
}

html[data-theme-variant="metro"] .card,
html[data-theme-variant="metro"] .modal-content,
html[data-theme-variant="metro"] .dropdown-menu,
html[data-theme-variant="metro"] .list-group-item,
html[data-theme-variant="metro"] .accordion-item,
html[data-theme-variant="metro"] .report-tracker-summary-card {
    border-radius: 0.2rem;
    border-color: var(--wo-metro-border);
}

html[data-theme-variant="metro"] .btn:not(.btn-link) {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

html[data-theme-variant="metro"] .wo-live-tile-hover-host,
html[data-theme-variant="metro"] .wo-live-tile-chart-host {
    position: relative;
}

html[data-theme-variant="metro"] .dashboard-chart-live-band {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    right: 0.8rem;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.55rem 0.75rem 0.6rem;
    border: 1px solid var(--wo-metro-border);
    border-left: 3px solid var(--wo-metro-accent);
    border-radius: 0.18rem;
    background: linear-gradient(180deg, rgba(246, 251, 250, 0.96) 0%, rgba(238, 245, 243, 0.97) 100%);
    color: var(--wo-metro-text);
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
    opacity: 0;
    transform: translateY(-10%);
    transition: opacity 180ms ease, transform 220ms ease;
    pointer-events: none;
}

html[data-theme-variant="metro"] .dashboard-chart-live-band.is-active {
    opacity: 1;
    transform: translateY(0);
}

html[data-theme-variant="metro"] .dashboard-chart-live-band .wo-live-tile-title {
    margin-top: 0.12rem;
}

html[data-theme-variant="metro"] .dashboard-chart-live-band .wo-live-tile-meta {
    margin-top: 0.18rem;
}

html[data-theme-variant="metro"] .dashboard-chart-live-band .wo-live-tile-value {
    font-size: 1.15rem;
    white-space: nowrap;
}

html[data-theme-variant="metro"] .wo-live-tile-popup.wo-live-tile-popup-hosted {
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--wo-metro-border);
    border-left: 3px solid var(--wo-metro-accent);
    border-radius: 0.3rem;
    background: linear-gradient(180deg, rgba(246, 251, 250, 0.98) 0%, rgba(238, 245, 243, 0.99) 100%);
    color: var(--wo-metro-text);
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .dashboard-chart-live-tile {
    min-width: 11.5rem;
    max-width: 15.5rem;
}

html[data-theme-variant="metro"] .dashboard-chart-live-tile.is-popout-active {
    opacity: 1;
    transform: translateY(0);
}

html[data-theme-variant="metro"] .dashboard-summary-card,
html[data-theme-variant="metro"] .dashboard-scaffold-card,
html[data-theme-variant="metro"] .dashboard-chart {
    border-radius: 0.2rem;
    border-color: var(--wo-metro-border);
    border-top: 3px solid var(--wo-metro-accent);
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .wo-live-tile-chart-host.is-inline-active .dashboard-chart {
    border-color: var(--wo-metro-border-strong);
    box-shadow: 9px 9px 0 var(--wo-metro-shadow);
    transform: translateY(0.15rem) scale(1.012);
    filter: saturate(1.08);
}

html[data-theme-variant="metro"] .dashboard-summary-card-footer {
    border-top: 0;
    background: var(--wo-metro-panel-alt);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--wo-metro-text);
}

html[data-theme-variant="metro"] .dashboard-summary-action-card {
    border-radius: 0.16rem;
    border-color: var(--wo-metro-border);
    border-left-width: 4px;
    background: linear-gradient(180deg, #f5fbfa 0%, #edf4f2 100%);
    color: var(--wo-metro-text);
    box-shadow: 4px 4px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .dashboard-summary-action-card:hover,
html[data-theme-variant="metro"] .dashboard-summary-action-card:focus-visible {
    color: var(--wo-metro-text);
    border-color: var(--wo-metro-border-strong);
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .dashboard-summary-action-icon {
    border-radius: 0.12rem;
    background: rgba(16, 36, 38, 0.12);
}

html[data-theme-variant="metro"] .dashboard-summary-action-title {
    letter-spacing: 0.06em;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-card-body {
    position: relative;
    min-height: 8.75rem;
    padding: 0;
    overflow: hidden;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-card-body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-front,
html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-back {
    position: absolute;
    inset: 0;
    padding: 1rem 1.05rem;
    transition: opacity 180ms ease, transform 220ms ease;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-front {
    z-index: 1;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-back {
    display: flex;
    z-index: 2;
    opacity: 0;
    transform: translateY(18%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live:hover .dashboard-summary-tile-front {
    opacity: 0.16;
    transform: translateY(-10%);
}

html[data-theme-variant="metro"] .dashboard-summary-card-live:hover .dashboard-summary-tile-back {
    opacity: 1;
    transform: translateY(0);
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-value {
    font-size: 2.35rem;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-value-sm {
    font-size: 1.85rem;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-mini-value {
    font-size: 1.2rem;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-back .dashboard-summary-mini-value {
    font-size: 0.9rem;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tile-back .dashboard-summary-mini-label {
    font-size: 0.58rem;
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tone-total {
    background: linear-gradient(135deg, #1c4348 0%, #2b666d 100%);
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tone-period {
    background: linear-gradient(135deg, #4f5a43 0%, #6f7d5a 100%);
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tone-personal {
    background: linear-gradient(135deg, #1e4d42 0%, #2e6c5d 100%);
}

html[data-theme-variant="metro"] .dashboard-summary-card-live .dashboard-summary-tone-focus {
    background: linear-gradient(135deg, #21464c 0%, #33727a 100%);
}

html[data-theme-variant="metro"] .wo-top-alert.alert {
    border-radius: 0.2rem;
    border-width: 1px 1px 1px 4px;
    box-shadow: 4px 4px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .wo-top-alert-title {
    letter-spacing: 0.08em;
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-warning {
    color: #5d4a1f;
    background: linear-gradient(180deg, #fbf5e7 0%, #f3e7c8 100%);
    border-color: #c9af6d;
    border-left-color: #9a7a2d;
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-warning .wo-top-alert-icon {
    color: #7b5d17;
    background-color: rgba(154, 122, 45, 0.16);
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-danger {
    color: #6a352e;
    background: linear-gradient(180deg, #f7ece8 0%, #efdcd5 100%);
    border-color: #c79688;
    border-left-color: #a65c4d;
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-danger .wo-top-alert-icon {
    color: #8b4035;
    background-color: rgba(166, 92, 77, 0.15);
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-critical {
    color: #543e68;
    background: linear-gradient(180deg, #f3edf8 0%, #e7dcf2 100%);
    border-color: #b39aca;
    border-left-color: #7c5a97;
}

html[data-theme-variant="metro"] .wo-top-alert.wo-top-alert-critical .wo-top-alert-icon {
    color: #6a4b86;
    background-color: rgba(124, 90, 151, 0.16);
}

html[data-theme-variant="metro"] .client-tenure-badge {
    border-radius: 0.18rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

html[data-theme-variant="metro"] .client-tenure-badge.client-tenure-new {
    color: #22584f;
    background-color: #e7f1ee;
    border-color: #9dbfb8;
}

html[data-theme-variant="metro"] .client-tenure-badge.client-tenure-established {
    color: #284e63;
    background-color: #e8eef1;
    border-color: #a8bcc6;
}

html[data-theme-variant="metro"] .client-tenure-badge.client-tenure-longterm {
    color: #6d4e23;
    background-color: #f4ead9;
    border-color: #d1b58a;
}

html[data-theme-variant="metro"] .client-tenure-badge.client-tenure-legacy {
    color: #5e4675;
    background-color: #eee7f5;
    border-color: #b7a2ca;
}

html[data-theme-variant="metro"] .client-tenure-badge.client-tenure-unknown {
    color: #52646b;
    background-color: #edf1f2;
    border-color: #c7d0d3;
}

html[data-theme-variant="metro"] .wo-autotask-panel {
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--wo-metro-border);
    border-top: 3px solid var(--wo-metro-accent);
    border-radius: 0.2rem;
    background: linear-gradient(180deg, var(--wo-metro-panel) 0%, var(--wo-metro-panel-alt) 100%);
}

html[data-theme-variant="metro"] .wo-autotask-link {
    color: var(--wo-metro-accent-strong);
    text-decoration: none;
}

html[data-theme-variant="metro"] .wo-autotask-link:hover,
html[data-theme-variant="metro"] .wo-autotask-link:focus {
    color: var(--wo-metro-accent);
}

html[data-theme-variant="metro"] .wo-autotask-panel .form-control {
    border-color: var(--wo-metro-border);
    border-radius: 0.18rem;
    background-color: rgba(255, 255, 255, 0.72);
    color: var(--wo-metro-text);
}

html[data-theme-variant="metro"] .wo-autotask-panel .form-control:focus {
    border-color: var(--wo-metro-border-strong);
    box-shadow: 0 0 0 0.16rem var(--wo-metro-accent-ghost);
}

html[data-theme-variant="metro"] .wo-at-clear-btn {
    color: var(--wo-metro-muted);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme-variant="metro"] .wo-at-clear-btn:hover,
html[data-theme-variant="metro"] .wo-at-clear-btn:focus {
    color: var(--wo-metro-text);
    background-color: var(--wo-metro-accent-soft);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme-variant="metro"] .wo-at-status {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .wo-status-badge,
html[data-theme-variant="metro"] .wo-ticket-number-badge,
html[data-theme-variant="metro"] .wo-project-number-badge {
    border-radius: 0.22rem;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: none;
}

html[data-theme-variant="metro"] .wo-status-badge.bg-primary,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-primary {
    color: var(--wo-metro-status-primary-text);
    background-color: var(--wo-metro-status-primary-bg);
    border-color: var(--wo-metro-status-primary-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-info,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-info {
    color: var(--wo-metro-status-info-text);
    background-color: var(--wo-metro-status-info-bg);
    border-color: var(--wo-metro-status-info-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-success,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-success {
    color: var(--wo-metro-status-success-text);
    background-color: var(--wo-metro-status-success-bg);
    border-color: var(--wo-metro-status-success-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-warning,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-warning {
    color: var(--wo-metro-status-warning-text);
    background-color: var(--wo-metro-status-warning-bg);
    border-color: var(--wo-metro-status-warning-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-secondary,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-secondary {
    color: var(--wo-metro-status-secondary-text);
    background-color: var(--wo-metro-status-secondary-bg);
    border-color: var(--wo-metro-status-secondary-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-dark,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-dark {
    color: var(--wo-metro-status-dark-text);
    background-color: var(--wo-metro-status-dark-bg);
    border-color: var(--wo-metro-status-dark-border);
}

html[data-theme-variant="metro"] .wo-status-badge.bg-peach,
html[data-theme-variant="metro"] .wo-status-badge.wo-status-tone-peach {
    color: var(--wo-metro-status-peach-text);
    background-color: var(--wo-metro-status-peach-bg);
    border-color: var(--wo-metro-status-peach-border);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge,
html[data-theme-variant="metro"] .wo-project-number-badge,
html[data-theme-variant="metro"] .projects-agile-card-number {
    color: var(--wo-metro-number-chip-text);
    background: linear-gradient(180deg, var(--wo-metro-number-chip-bg) 0%, var(--wo-metro-panel-alt) 100%);
    border-color: var(--wo-metro-number-chip-border);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge,
html[data-theme-variant="metro"] .wo-project-number-badge {
    border-left-width: 0.26rem;
}

html[data-theme-variant="metro"] .projects-agile-card-number {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.46rem;
    border: 1px solid var(--wo-metro-number-chip-border);
    border-left: 0.26rem solid var(--wo-metro-status-secondary-accent);
    border-radius: 0.22rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.71rem;
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-primary,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-primary,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-primary,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-primary {
    border-left-color: var(--wo-metro-status-primary-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-info,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-info,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-info,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-info {
    border-left-color: var(--wo-metro-status-info-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-success,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-success,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-success,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-success {
    border-left-color: var(--wo-metro-status-success-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-warning,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-warning,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-warning,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-warning {
    border-left-color: var(--wo-metro-status-warning-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-secondary,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-secondary,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-secondary,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-secondary {
    border-left-color: var(--wo-metro-status-secondary-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-dark,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-dark,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-dark,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-dark {
    border-left-color: var(--wo-metro-status-dark-accent);
}

html[data-theme-variant="metro"] .wo-ticket-number-badge.bg-peach,
html[data-theme-variant="metro"] .wo-project-number-badge.bg-peach,
html[data-theme-variant="metro"] .wo-ticket-number-badge.wo-status-tone-peach,
html[data-theme-variant="metro"] .wo-project-number-badge.wo-status-tone-peach {
    border-left-color: var(--wo-metro-status-peach-accent);
}

html[data-theme-variant="metro"] .project-item-detail-card,
html[data-theme-variant="metro"] .project-item-notes-head {
    border-radius: 0.2rem;
    border-color: var(--wo-metro-border);
    background: linear-gradient(180deg, var(--wo-metro-panel) 0%, var(--wo-metro-panel-alt) 100%);
}

html[data-theme-variant="metro"] .project-item-detail-label {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .project-item-detail-title,
html[data-theme-variant="metro"] .project-item-notes-title {
    color: var(--wo-metro-text);
}

html[data-theme-variant="metro"] .project-item-detail-description,
html[data-theme-variant="metro"] .project-item-notes-meta {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .dashboard-scaffold-title,
html[data-theme-variant="metro"] .dashboard-scaffold-filter,
html[data-theme-variant="metro"] .dashboard-scaffold-open {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

html[data-theme-variant="metro"] .dashboard-scaffold-title i,
html[data-theme-variant="metro"] .dashboard-scaffold-pill-contract,
html[data-theme-variant="metro"] .dashboard-scaffold-tag,
html[data-theme-variant="metro"] .projects-view-help-highlight,
html[data-theme-variant="metro"] .project-agile-log-status {
    color: var(--wo-metro-accent-strong);
}

html[data-theme-variant="metro"] .dashboard-scaffold-pill-contract,
html[data-theme-variant="metro"] .dashboard-scaffold-tag,
html[data-theme-variant="metro"] .wo-task-phase-label,
html[data-theme-variant="metro"] .wo-task-chip-phase {
    background: var(--wo-metro-accent-soft);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme-variant="metro"] .dashboard-test-banner {
    border-color: var(--wo-metro-border-strong);
    border-left-color: var(--wo-metro-accent);
    background: linear-gradient(90deg, var(--wo-metro-panel-alt) 0%, var(--wo-metro-panel) 100%);
    color: var(--wo-metro-text);
}

html[data-theme-variant="metro"] .dashboard-test-banner-note {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .report-tracker-item-even {
    background-color: var(--wo-metro-panel);
}

html[data-theme-variant="metro"] .report-tracker-item-odd {
    background-color: var(--wo-metro-panel-alt);
}

html[data-theme-variant="metro"] .report-tracker-item-highlight {
    border-color: var(--wo-metro-accent);
    box-shadow: inset 0 0 0 1px var(--wo-metro-accent-ghost);
}

html[data-theme-variant="metro"] .report-tracker-link:focus {
    outline: 2px solid var(--wo-metro-accent-ghost);
}

html[data-theme-variant="metro"] .with-nav-tabs,
html[data-theme-variant="metro"] .panel.with-nav-tabs,
html[data-theme-variant="metro"] .card.with-nav-tabs,
html[data-theme-variant="metro"] .projects-view-help,
html[data-theme-variant="metro"] .projects-agile-lane,
html[data-theme-variant="metro"] .project-agile-task-lane,
html[data-theme-variant="metro"] .project-agile-modal,
html[data-theme-variant="metro"] .projects-agile-card,
html[data-theme-variant="metro"] .project-agile-task-card {
    border-color: var(--wo-metro-border);
}

html[data-theme-variant="metro"] .projects-view-help,
html[data-theme-variant="metro"] .projects-agile-lane,
html[data-theme-variant="metro"] .project-agile-task-lane {
    background: linear-gradient(180deg, var(--wo-metro-panel) 0%, var(--wo-metro-panel-alt) 100%);
}

html[data-theme-variant="metro"] .projects-view-help {
    border-left: 4px solid var(--wo-metro-accent);
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .with-nav-tabs > .card-header,
html[data-theme-variant="metro"] .with-nav-tabs > .panel-heading,
html[data-theme-variant="metro"] .projects-agile-lane-header,
html[data-theme-variant="metro"] .project-agile-task-lane-header {
    border-color: var(--wo-metro-border);
}

html[data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link:hover,
html[data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link:focus {
    color: var(--wo-metro-text);
    background-color: var(--wo-metro-accent-soft);
    border-color: var(--wo-metro-border) var(--wo-metro-border) transparent;
}

html[data-theme-variant="metro"] .projects-view-help,
html[data-theme-variant="metro"] .projects-agile-empty,
html[data-theme-variant="metro"] .project-agile-task-empty {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .projects-view-help-head h5,
html[data-theme-variant="metro"] .projects-agile-lane-header h5,
html[data-theme-variant="metro"] .project-agile-task-lane-header h6,
html[data-theme-variant="metro"] .projects-agile-card-title,
html[data-theme-variant="metro"] .project-agile-task-title {
    color: var(--wo-metro-text);
}

html[data-theme-variant="metro"] .projects-view-help p,
html[data-theme-variant="metro"] .projects-agile-card-client,
html[data-theme-variant="metro"] .projects-agile-card-manager,
html[data-theme-variant="metro"] .projects-agile-card-dates,
html[data-theme-variant="metro"] .projects-agile-card-desc,
html[data-theme-variant="metro"] .project-agile-task-meta,
html[data-theme-variant="metro"] .project-agile-task-desc,
html[data-theme-variant="metro"] .project-agile-modal-meta {
    color: var(--wo-metro-muted);
}

html[data-theme-variant="metro"] .projects-agile-card:hover,
html[data-theme-variant="metro"] .projects-agile-card:focus-visible,
html[data-theme-variant="metro"] .project-agile-task-card:hover,
html[data-theme-variant="metro"] .project-agile-task-card:focus-visible {
    border-color: var(--wo-metro-border-strong);
    box-shadow: 0 8px 18px var(--wo-metro-shadow);
}

html[data-theme-variant="metro"] .projects-agile-live-tile-popup.wo-live-tile-popup-hosted,
html[data-theme-variant="metro"] .project-agile-task-live-tile-popup.wo-live-tile-popup-hosted {
    padding: 0.56rem 0.62rem;
    border-left-width: 3px;
}

html[data-theme-variant="metro"] .projects-agile-lane-body.is-drop-target,
html[data-theme-variant="metro"] .project-agile-task-lane-body.is-drop-target {
    background: var(--wo-metro-accent-ghost);
}

.dashboard-sales-split {
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.45);
}

.dashboard-mode-row {
    margin-bottom: 0.65rem;
    row-gap: 0.45rem;
}

.dashboard-mode-toggle-group .dashboard-mode-btn {
    min-width: 110px;
    font-weight: 600;
}

.dashboard-mode-meta {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 600;
}

.dashboard-mode-sep {
    margin: 0 0.45rem;
    color: #94a3b8;
}

.dashboard-test-banner {
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #0ea5e9;
    border-radius: 8px;
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
    color: #0f172a;
    font-weight: 600;
}

.dashboard-test-banner-note {
    display: block;
    margin-top: 0.2rem;
    font-weight: 500;
    color: #1e3a8a;
}

.dashboard-scaffold-header h5 {
    font-weight: 700;
    color: #1f2937;
}

.dashboard-scaffold-header small {
    color: #64748b;
}

.dashboard-scaffold-row {
    row-gap: 0.9rem;
}

.queue-tech-filter {
    min-width: 14rem;
}

.queue-open-btn {
    font-size: 0.75rem;
    padding: 1px 6px;
}

.lifecycle-col-label {
    width: 28%;
}

.lifecycle-col-min,
.lifecycle-col-max {
    width: 16%;
}

.lifecycle-col-tone,
.lifecycle-col-action {
    width: 20%;
}

@media (max-width: 767.98px) {
    .dashboard-sales-split {
        padding-right: 0;
        border-right: 0;
        margin-bottom: 0.35rem;
    }
}

.dashboard-scaffold-card {
    height: 100%;
    border: 1px dashed #c7d2e3;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    padding: 0.9rem 1rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.dashboard-scaffold-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.dashboard-scaffold-title i {
    color: #2f6db5;
}

.dashboard-scaffold-copy {
    margin-bottom: 0.65rem;
    color: #475569;
    line-height: 1.35;
}

.dashboard-scaffold-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.dashboard-scaffold-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1f2937;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
}

.dashboard-scaffold-pill-contract {
    font-family: Consolas, "Courier New", monospace;
    color: #0f3f84;
    background-color: #dbeafe;
    border-color: #a5c5fc;
}

.dashboard-scaffold-filter {
    margin-bottom: 0.6rem;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
}

.dashboard-scaffold-open {
    font-weight: 600;
}

.dashboard-scaffold-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e3a8a;
    background-color: #dbeafe;
    border: 1px solid #a5c5fc;
}

.with-nav-tabs,
.panel.with-nav-tabs,
.card.with-nav-tabs {
    border: 1px solid #d5deeb;
    border-radius: 8px;
    overflow: hidden;
}

.with-nav-tabs > .card-header,
.with-nav-tabs > .panel-heading {
    border-bottom: 1px solid #d5deeb;
    padding-bottom: 0;
}

.with-nav-tabs .nav-tabs {
    border-bottom: 0;
    gap: 4px;
    margin-bottom: 0;
}

.with-nav-tabs .nav-tabs .nav-link {
    color: #506079;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    padding: 0.45rem 0.8rem;
}

.with-nav-tabs .nav-tabs .nav-link:hover,
.with-nav-tabs .nav-tabs .nav-link:focus {
    color: #16233a;
    background-color: #eef4ff;
    border-color: #c8d6ec #c8d6ec transparent;
}

.with-nav-tabs .nav-tabs .nav-item.show .nav-link,
.with-nav-tabs .nav-tabs .nav-link.active {
    color: #0f172a;
    background-color: #ffffff;
    border-color: #d5deeb #d5deeb #ffffff;
}

.with-nav-tabs .tab-content {
    border-top: 1px solid #d5deeb;
    background-color: #ffffff;
    padding: 10px;
}

.project-detail-shell,
.project-item-notes-shell {
    background-color: #ffffff;
}

.project-tab-content-shell {
    padding: 10px;
}

.projects-view-host-hidden {
    display: none;
}

.projects-view-help {
    margin-bottom: 0.6rem;
    border: 1px solid var(--wo-border-primary, #8cb4ea);
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        var(--wo-surface-subtle, #f8fafc) 0%,
        color-mix(in srgb, var(--wo-primary-bg, #e3efff) 24%, var(--wo-surface, #ffffff) 76%) 100%
    );
    padding: 0.5rem 0.72rem;
}

.projects-view-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.projects-view-help-head h5 {
    color: var(--wo-text-base, #111827);
    font-weight: 700;
    font-size: 0.92rem;
    margin: 0;
}

.projects-view-help p {
    color: var(--wo-text-muted, #6b7280);
    font-size: 0.78rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.projects-view-help-highlight {
    font-weight: 600;
    color: var(--wo-primary-text, #12416f);
    font-size: 0.76rem;
}

.projects-filter-shell {
    row-gap: 0.15rem;
}

.projects-filter-controls {
    row-gap: 0.25rem;
}

.projects-filter-shell .form-floating.mb-3 {
    margin-bottom: 0.65rem !important;
}

.projects-filter-shell .form-floating > .form-select {
    min-height: calc(2.48rem + 2px);
    padding-top: 1rem;
    padding-bottom: 0.3rem;
    font-size: 0.86rem;
}

.projects-filter-shell .form-floating > label {
    font-size: 0.7rem;
    padding-top: 0.24rem;
    letter-spacing: 0.02em;
}

.projects-filter-shell #projectFocusLink {
    font-size: 0.76rem;
    padding: 0.24rem 0.48rem;
}

.projects-filter-shell.is-agile-compact .form-floating.mb-3 {
    margin-bottom: 0.42rem !important;
}

.projects-filter-shell.is-agile-compact .form-floating > .form-select {
    min-height: calc(2.28rem + 2px);
    padding-top: 0.9rem;
    padding-bottom: 0.22rem;
    font-size: 0.82rem;
}

.projects-filter-shell.is-agile-compact .form-floating > label {
    font-size: 0.66rem;
    padding-top: 0.2rem;
}

.projects-filter-shell.is-agile-compact .btn-group .btn,
.projects-filter-shell.is-agile-compact #projectFocusLink {
    font-size: 0.72rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.projects-filter-shell.is-agile-compact .projects-view-help {
    margin-bottom: 0.45rem;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
}

.projects-filter-shell.is-agile-compact .projects-view-help p {
    margin-bottom: 0.18rem;
}

.projects-agile-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.projects-agile-lane {
    border: 1px solid #d5deeb;
    border-radius: 10px;
    background-color: #f8fbff;
    min-height: 14rem;
    display: flex;
    flex-direction: column;
}

.projects-agile-lane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #d5deeb;
}

.projects-agile-lane-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #10233d;
}

.projects-agile-lane-body {
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.projects-agile-empty {
    border: 1px dashed #b8c9df;
    border-radius: 8px;
    background-color: #ffffff;
    color: #60708a;
    text-align: center;
    padding: 0.75rem 0.5rem;
    font-size: 0.82rem;
}

.projects-agile-card {
    border: 1px solid #cfdced;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
    min-height: 13.25rem;
    padding: 0.68rem 0.72rem 0.64rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.projects-agile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.projects-agile-card-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.projects-agile-card-number {
    font-weight: 700;
    color: #1f3049;
    font-size: 0.82rem;
}

.projects-agile-card-title {
    font-weight: 700;
    color: #10233d;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.2;
}

.projects-agile-card-client,
.projects-agile-card-manager,
.projects-agile-card-dates {
    color: #4b5b74;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.projects-agile-card-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.projects-agile-card-progress .wo-progress {
    margin: 0.35rem 0 0.25rem;
}

.projects-agile-card-desc {
    color: #50617a;
    font-size: 0.8rem;
    line-height: 1.25;
    margin-top: 0.3rem;
    max-height: 3.15rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.projects-agile-open {
    font-size: 0.68rem;
    padding: 0.08rem 0.48rem;
    border-radius: 999px;
    line-height: 1.2;
}

.projects-agile-preview,
.project-agile-task-preview {
    font-size: 0.68rem;
    padding: 0.08rem 0.48rem;
    border-radius: 999px;
    line-height: 1.2;
}

.projects-agile-drag-handle {
    font-size: 0.68rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    line-height: 1.2;
    cursor: grab;
}

.projects-agile-drag-handle:active {
    cursor: grabbing;
}

.projects-agile-card.is-dragging {
    opacity: 0.5;
    transform: scale(0.99);
}

.projects-agile-lane-body.is-drop-target {
    background: rgba(37, 99, 235, 0.1);
    border-radius: 10px;
}

.projects-agile-card:hover,
.projects-agile-card:focus-visible {
    border-color: #7ca7df;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.16);
    transform: translateY(-1px);
}

.projects-agile-card.is-live-tile-open,
.project-agile-task-card.is-live-tile-open {
    z-index: 12;
}

.projects-agile-card.is-live-tile-open,
.project-agile-task-card.is-live-tile-open {
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.2);
}

.projects-agile-live-tile-popup.wo-live-tile-popup-hosted,
.project-agile-task-live-tile-popup.wo-live-tile-popup-hosted {
    padding: 0.6rem 0.68rem;
    border-left-width: 3px;
}

.project-agile-live-tile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.project-agile-live-tile-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c8d7ea;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.94);
    color: #1f3a5c;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.16rem 0.48rem;
}

.project-agile-live-tile-badge.is-muted {
    color: #52657f;
}

.project-agile-live-tile-description {
    color: #334155;
    display: block;
    overflow: visible;
}

.project-agile-live-tile-note {
    font-size: 0.72rem;
    line-height: 1.38;
    color: #52657f;
    border-top: 1px dashed rgba(111, 142, 178, 0.42);
    padding-top: 0.34rem;
}

.project-agile-live-tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.project-agile-live-tile-action {
    border: 1px solid #c4d2e5;
    background: rgba(241, 245, 249, 0.94);
    color: #1f3a5c;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.18rem 0.54rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.project-agile-live-tile-action:hover,
.project-agile-live-tile-action:focus-visible {
    background: rgba(219, 234, 254, 0.96);
    border-color: #8db2dd;
    color: #153457;
}

.project-agile-live-tile-hint {
    font-size: 0.68rem;
    line-height: 1.34;
    color: #64748b;
}

.project-agile-focus-flash {
    animation: projectAgileFocusFlash 1.2s ease-out;
}

@keyframes projectAgileFocusFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.38);
    }

    100% {
        box-shadow: 0 0 0 0.9rem rgba(37, 99, 235, 0);
    }
}

.project-agile-modal {
    border: 1px solid #d5deeb;
    border-radius: 12px;
}

.project-agile-modal-meta {
    font-size: 0.82rem;
    color: #52657f;
}

.project-agile-task-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.65rem;
}

.project-agile-task-lane {
    border: 1px solid #d5deeb;
    border-radius: 10px;
    background: #f8fbff;
    min-height: 14rem;
    display: flex;
    flex-direction: column;
}

.project-agile-task-lane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    border-bottom: 1px solid #d5deeb;
    padding: 0.45rem 0.55rem;
}

.project-agile-task-lane-header h6 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: #10233d;
}

.project-agile-task-lane-body {
    display: grid;
    gap: 0.45rem;
    padding: 0.5rem;
    min-height: 10rem;
    align-content: start;
}

.project-agile-task-lane-body.is-drop-target {
    background: rgba(59, 130, 246, 0.08);
}

.project-agile-task-empty {
    border: 1px dashed #b8c9df;
    border-radius: 8px;
    padding: 0.6rem;
    color: #60708a;
    text-align: center;
    font-size: 0.78rem;
    background: #ffffff;
}

.project-agile-task-card {
    border: 1px solid #cfdced;
    border-radius: 8px;
    background: #ffffff;
    min-height: 8.8rem;
    padding: 0.52rem 0.56rem 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: grab;
}

.project-agile-task-card.is-dragging {
    opacity: 0.45;
}

.project-agile-task-card.is-pending-update {
    opacity: 0.66;
    filter: saturate(0.6);
    border-style: dashed;
    border-color: #94a3b8;
}

.project-agile-task-card.is-selection-only {
    border-color: #64748b;
}

.project-agile-task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.project-agile-task-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.project-agile-task-order {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d3553;
}

.project-agile-task-title {
    margin-top: 0.25rem;
    color: #10233d;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
}

.project-agile-task-meta {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    font-size: 0.72rem;
    color: #4b5b74;
}

.project-agile-task-desc {
    margin-top: 0.28rem;
    font-size: 0.76rem;
    color: #4b5b74;
    max-height: 4.1rem;
    overflow-y: auto;
    line-height: 1.25;
}

.project-agile-task-pending {
    margin-top: 0.28rem;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 0.2rem 0.34rem;
    color: #334155;
    background: #f1f5f9;
    font-size: 0.69rem;
    font-weight: 700;
}

.project-agile-quick-panel,
.project-agile-log-panel {
    border: 1px solid #d5deeb;
    border-radius: 10px;
    background: #f8fbff;
    padding: 0.65rem 0.7rem;
}

.project-agile-quick-panel.is-awaiting-apply {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.22);
}

.project-agile-quick-panel .form-check-input {
    cursor: pointer;
}

.project-agile-quick-panel .form-check-label {
    font-size: 0.78rem;
    color: #1f3250;
}

.project-agile-task-context {
    font-size: 0.78rem;
    color: #52657f;
}

.project-agile-session-log {
    max-height: 13.5rem;
    overflow-y: auto;
    display: grid;
    gap: 0.4rem;
}

.project-agile-log-item {
    border: 1px solid #d5deeb;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.45rem 0.52rem;
}

.project-agile-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.project-agile-log-task {
    color: #10233d;
    font-weight: 700;
    font-size: 0.77rem;
}

.project-agile-log-time {
    color: #60708a;
    font-size: 0.68rem;
}

.project-agile-log-status {
    margin-top: 0.2rem;
    color: #1d4f89;
    font-size: 0.74rem;
    font-weight: 700;
}

.project-agile-log-details {
    margin-top: 0.2rem;
    color: #50617a;
    font-size: 0.72rem;
}

.project-agile-log-empty,
.project-agile-task-loading,
.project-agile-task-error {
    border: 1px dashed #b8c9df;
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.78rem;
    text-align: center;
    color: #60708a;
    background: #ffffff;
}

.project-agile-task-error {
    color: #9f1239;
    border-color: #fda4af;
    background: #fff1f2;
}

.project-tabs-panel2 {
    padding-top: 10px;
}

.project-task-description-column {
    min-width: 24rem;
    max-width: 44rem;
}

.project-task-progress-column {
    min-width: 12rem;
}

.project-task-name-column {
    min-width: 15rem;
    max-width: 24rem;
}

.project-task-summary-column {
    min-width: 44rem;
}

.project-task-order-column {
    width: 5rem;
    min-width: 4.5rem;
    max-width: 5.5rem;
    text-align: center;
    white-space: nowrap;
}

.project-task-status-column {
    width: 8.5rem;
    min-width: 7.5rem;
    max-width: 9.5rem;
    text-align: center;
    white-space: nowrap;
}

.project-task-phase-column {
    min-width: 11rem;
    max-width: 16rem;
}

.wo-task-phase-label {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.wo-task-chip-phase {
    border-color: #9bb3d8;
    background-color: #e9f2ff;
    color: #1e3a8a;
}

.wo-task-phase-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.wo-phase-group-row td {
    background: #f8fbff;
    border-top: 1px solid #d5deeb;
    border-bottom: 1px solid #d5deeb;
    padding: 0.42rem 0.6rem;
}

.wo-phase-group-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #c9d8f2;
    background: #edf4ff;
    color: #274c80;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.18rem 0.58rem;
}

.project-project-name {
    min-width: 12rem;
    max-width: 16rem;
}

.project-project-description {
    min-width: 16rem;
    max-width: 24rem;
}

.project-project-status-column {
    width: 8rem;
    min-width: 7rem;
    max-width: 9rem;
    text-align: center;
    white-space: nowrap;
}

.wo-autotask-panel {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #d5deeb;
}

.wo-autotask-link {
    font-weight: 600;
    text-decoration: none;
}

.wo-autotask-link:hover,
.wo-autotask-link:focus {
    text-decoration: underline;
}

.wo-truncate-cell {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.project-project-name-text {
    font-weight: 600;
}

.project-project-desc-text,
.project-task-name-text {
    font-weight: 500;
}

#itemsTable td,
#itemsTable th {
    vertical-align: top;
}

#itemsTable td.notes-details,
#itemsTable tr.shown td.notes-details {
    background: none;
    width: auto;
    height: auto;
    overflow: visible;
    cursor: pointer;
    white-space: nowrap;
    min-width: 6.25rem;
}

.wo-date-auto {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-weight: 600;
}

.project-task-description-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.project-item-detail-card {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) 1fr;
    gap: 0.9rem;
    padding: 0.85rem;
    margin-bottom: 0.8rem;
    border: 1px solid #d5deeb;
    border-radius: 10px;
    background: #f8fbff;
}

.project-item-detail-meta {
    display: grid;
    gap: 0.3rem;
}

.project-item-detail-meta-row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.project-item-detail-label {
    font-weight: 700;
    color: #334155;
}

.project-item-detail-content {
    min-width: 0;
}

.project-item-detail-title {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    line-height: 1.3;
    font-weight: 700;
}

.project-item-detail-description {
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.project-item-notes-head {
    margin-bottom: 0.7rem;
    border: 1px solid #d5deeb;
    border-radius: 10px;
    background: #f8fbff;
    padding: 0.7rem 0.8rem;
}

.project-item-notes-title {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1f3049;
}

.project-item-notes-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: #475569;
    font-size: 0.8rem;
}

@media (max-width: 991.98px) {
    .project-item-detail-card {
        grid-template-columns: 1fr;
    }

    .project-item-detail-meta-row {
        grid-template-columns: 6.2rem 1fr;
    }
}

.wo-progress {
    height: 0.95rem;
    border: 1px solid #c7d2e3;
    background-color: #e8eef8;
    border-radius: 999px;
    overflow: hidden;
}

.wo-progress .progress-bar {
    font-size: 0.68rem;
    line-height: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.wo-progress-meta,
.wo-task-progress-meta {
    font-size: 0.72rem;
    color: #475569;
    margin-top: 0.2rem;
    line-height: 1.25;
}

.wo-task-progress-cell {
    min-width: 11.5rem;
}

.wo-task-split {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.5rem;
}

.wo-task-split-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wo-task-split-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}

.wo-task-status-badge {
    min-width: 6.1rem;
    text-align: center;
}

.wo-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #d5deeb;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.76rem;
    color: #334155;
    background-color: #f8fbff;
    white-space: nowrap;
}

.wo-task-chip-dependency-ready {
    border-color: #9fd6ae;
    background-color: #eefbf1;
    color: #1f6b37;
}

.wo-task-chip-dependency-blocked {
    border-color: #efb9b9;
    background-color: #fff1f1;
    color: #922f2f;
}

.wo-task-split-progress {
    min-width: 15rem;
    max-width: 18rem;
    width: 100%;
}

.wo-task-split-bottom {
    border-top: 1px dashed #d5deeb;
    padding-top: 0.45rem;
}

.wo-task-split-name {
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.3;
    color: #0f172a;
    margin-bottom: 0.2rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wo-task-split-description {
    font-size: 0.84rem;
    line-height: 1.35;
    color: #334155;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .project-task-summary-column {
        min-width: 30rem;
    }
}

@media (max-width: 991.98px) {
    .wo-task-split-top {
        flex-direction: column;
    }

    .wo-task-split-progress {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

#tabsPanel .dtHeader,
#tabsPanel2 .dtHeader,
#tabsPanel .dtData,
#tabsPanel2 .dtData,
#tabsPanel .dtData2,
#tabsPanel2 .dtData2 {
    line-height: 1.45;
}

/* Normalize DataTables control text/control contrast across modules. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: inherit;
}

.dataTables_wrapper .dataTables_length select.form-select,
.dataTables_wrapper .dataTables_filter input.form-control,
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    min-height: 2rem;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Design token overrides — cascade automatically to all consumers */
    --wo-surface:          #1b2330;
    --wo-surface-subtle:   #171d26;
    --wo-surface-raised:   #242d3d;
    --wo-surface-input:    #18202b;
    --wo-border:           #2b3647;
    --wo-text-base:        #e6edf7;
    --wo-text-muted:       #9ab0c8;
    --wo-warning-text:     #ffd885;
    --wo-warning-bg:       #3f2d09;
    --wo-warning-bg-end:   #2f2208;
    --wo-warning-border:   #a97914;
    --wo-warning-icon-bg:  rgba(255, 207, 96, 0.18);
    --wo-label-color:       var(--wo-nav-link-color);
    --wo-section-border:    0.5px solid var(--wo-border);
    --wo-nav-link-color:    #c5d2e8;
    --wo-placeholder-color: #8fa1bd;
    --wo-active-bg:         #223753;
    --wo-active-border:     #355173;
    --wo-highlight-bg:      #355b95;
    --wo-hover-border:      #44648b;
    --wo-border-subtle:     #2f4058;
    --wo-surface-deep:      #111b2c;
    --wo-surface-stripe:    #1a2331;
    --wo-surface-hover:     #243041;

    /* State palette dark overrides */
    --wo-danger-text:       #ffa3a8;
    --wo-danger-bg:         #3f1618;
    --wo-danger-bg-end:     #2f1012;
    --wo-danger-border:     #8f3035;
    --wo-danger-icon-bg:    rgba(255, 120, 130, 0.18);
    --wo-info-text:         #8ec8f5;
    --wo-info-bg:           #0f2a42;
    --wo-info-bg-end:       #0c2138;
    --wo-info-border:       #2d5f8a;
    --wo-success-text:      #7de09a;
    --wo-success-bg:        #1a3520;
    --wo-success-border:    #2d6b3c;
    --wo-primary-text:      #9bc6ff;
    --wo-primary-bg:        #102841;
    --wo-primary-bg-end:    #0c2134;
    --wo-primary-border:    #31648b;
    --wo-secondary-text:    #d5dde8;
    --wo-secondary-bg:      #252d39;
    --wo-secondary-bg-end:  #1d2430;
    --wo-secondary-border:  #4a596d;
    --wo-neutral-text:      var(--wo-text-base);
    --wo-neutral-bg:        #202834;
    --wo-neutral-bg-end:    #1a2230;
    --wo-neutral-border:    #314052;
    --wo-dark-text:         #f5f7fb;
    --wo-dark-bg:           #101725;
    --wo-dark-bg-end:       #0b1220;
    --wo-dark-border:       #314359;
}

.report-tracker-modal .modal-body {
    padding-top: 0.9rem;
}

.report-tracker-search {
    min-width: 16rem;
    max-width: 24rem;
}

.report-tracker-sort {
    min-width: 8.5rem;
    max-width: 10rem;
}

.report-tracker-agent-filter {
    min-width: 11rem;
    max-width: 14rem;
}

.report-tracker-module-filter {
    min-width: 12rem;
    max-width: 16rem;
}

.report-tracker-list {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid #d5deeb;
    border-radius: 0.5rem;
}

.report-tracker-item {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.report-tracker-item-unsynced {
    border-left: 4px solid #f0ad00;
}

.report-tracker-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem 0.9rem;
}

.report-tracker-item-main {
    min-width: 0;
}

.report-tracker-item-main .fw-semibold {
    line-height: 1.25;
    word-break: break-word;
}

.report-tracker-item-even {
    background-color: #f8fbff;
}

.report-tracker-item-odd {
    background-color: #eef4fc;
}

.report-tracker-item-highlight {
    border-color: #2d7fff;
    box-shadow: inset 0 0 0 1px rgba(45, 127, 255, 0.35);
}

.report-tracker-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 24rem;
    justify-content: flex-end;
    align-content: flex-start;
    align-self: start;
}

.report-tracker-link {
    cursor: pointer;
    line-height: 1.2;
}

.report-tracker-link:focus {
    outline: 2px solid rgba(45, 127, 255, 0.6);
    outline-offset: 1px;
}

.report-tracker-ai-session-btn {
    cursor: pointer;
    line-height: 1.2;
}

.report-tracker-sync-btn {
    cursor: pointer;
    line-height: 1.2;
    background: rgba(240, 173, 0, 0.12);
    color: #8a5a00;
    border-color: rgba(240, 173, 0, 0.5);
}

.report-tracker-archive-btn,
.report-tracker-restore-btn {
    cursor: pointer;
    line-height: 1.2;
}

.report-tracker-archive-btn {
    background: rgba(56, 189, 248, 0.12);
    color: #0b5f87;
    border-color: rgba(56, 189, 248, 0.5);
}

.report-tracker-restore-btn {
    background: rgba(34, 197, 94, 0.12);
    color: #0f6b36;
    border-color: rgba(34, 197, 94, 0.5);
}

.report-tracker-unsynced-badge {
    background: rgba(240, 173, 0, 0.14);
    color: #8a5a00;
    border: 1px solid rgba(240, 173, 0, 0.45);
}

.report-tracker-id-note {
    font-size: 0.85em;
    color: #8a5a00;
}

.report-tracker-empty {
    text-align: center;
    color: #64748b;
}

.report-tracker-item-patch {
    border-left: 4px solid rgba(56, 189, 248, 0.45);
}

.report-tracker-patch-summary {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

html[data-theme="dark"] .report-tracker-list {
    border-color: var(--wo-border);
}

html[data-theme="dark"] .report-tracker-item-even {
    background-color: #161f2e;
}

html[data-theme="dark"] .report-tracker-item-odd {
    background-color: #1b2536;
}

html[data-theme="dark"] .report-tracker-summary-card {
    border-color: var(--wo-border);
    background-color: #171f2c;
}

html[data-theme="dark"] .report-tracker-item-highlight {
    border-color: #4b89ff;
    box-shadow: inset 0 0 0 1px rgba(75, 137, 255, 0.4);
}

html[data-theme="dark"] .report-tracker-item-unsynced {
    border-left-color: #f2c14e;
}

html[data-theme="dark"] .report-tracker-sync-btn,
html[data-theme="dark"] .report-tracker-unsynced-badge {
    background: rgba(242, 193, 78, 0.16);
    color: #ffd87a;
    border-color: rgba(242, 193, 78, 0.42);
}

html[data-theme="dark"] .report-tracker-archive-btn {
    background: rgba(56, 189, 248, 0.2);
    color: #86d9ff;
    border-color: rgba(56, 189, 248, 0.45);
}

html[data-theme="dark"] .report-tracker-restore-btn {
    background: rgba(34, 197, 94, 0.2);
    color: #8df2b3;
    border-color: rgba(34, 197, 94, 0.45);
}

html[data-theme="dark"] .report-tracker-id-note {
    color: #ffd87a;
}

@media (max-width: 900px) {
    .report-tracker-item-row {
        grid-template-columns: 1fr;
    }

    .report-tracker-item-badges {
        justify-content: flex-start;
        max-width: none;
    }
}

html[data-theme="dark"] .report-tracker-empty {
    color: #9fb0c9;
}

html[data-theme="dark"] .report-tracker-item-patch {
    border-left-color: rgba(56, 189, 248, 0.6);
}

html[data-theme="dark"] .report-tracker-patch-summary {
    color: #c4d2e8;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .container-fluid {
    background-color: #1c2330;
    color: var(--wo-text-base);
}

html[data-theme="dark"] .footer {
    background-color: #1c2330;
    color: #9aa6bb;
}

html[data-theme="dark"] .navbar.navbar-dark.bg-dark {
    background: linear-gradient(90deg, #020617 0%, #081224 55%, #0e1c32 100%) !important;
    border-bottom-color: #1f3249;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.85);
}

html[data-theme="dark"] .navbar.navbar-dark .nav-link,
html[data-theme="dark"] .navbar.navbar-dark .navbar-brand {
    color: #d5e4f8;
}

html[data-theme="dark"] .navbar.navbar-dark .nav-link:hover,
html[data-theme="dark"] .navbar.navbar-dark .nav-link:focus {
    color: #ffffff;
}

html[data-theme="dark"] .navbar.navbar-dark .dropdown-menu {
    background: linear-gradient(180deg, #0f1b2c 0%, #0c1727 100%);
    border-color: #2d435f;
}

html[data-theme="dark"] .navbar.navbar-dark .dropdown-item {
    color: var(--wo-text-base);
}

html[data-theme="dark"] .navbar.navbar-dark .dropdown-item:hover,
html[data-theme="dark"] .navbar.navbar-dark .dropdown-item:focus {
    color: #ffffff;
    background: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-warning {
    color: #ffd885;
    background: linear-gradient(180deg, #3f2d09 0%, #2f2208 100%);
    border-color: #a97914;
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-warning .wo-top-alert-icon {
    color: #ffd576;
    background-color: rgba(255, 207, 96, 0.18);
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-danger {
    color: #ffd0d3;
    background: linear-gradient(180deg, #4a1518 0%, #331114 100%);
    border-color: #8f2f35;
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-danger .wo-top-alert-icon {
    color: #ffc4c8;
    background-color: rgba(255, 163, 170, 0.18);
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-critical {
    color: #b8dfff;
    background: linear-gradient(180deg, #10283e 0%, #0d2132 100%);
    border-color: #31648b;
}

html[data-theme="dark"] .wo-top-alert.wo-top-alert-critical .wo-top-alert-icon {
    color: #acd7ff;
    background-color: rgba(138, 199, 255, 0.2);
}

html[data-theme="dark"] .client-tenure-badge.client-tenure-new {
    color: #7de0c9;
    background-color: #173730;
    border-color: #23574c;
}

html[data-theme="dark"] .client-tenure-badge.client-tenure-established {
    color: #9fc4ff;
    background-color: #182844;
    border-color: #314f7f;
}

html[data-theme="dark"] .client-tenure-badge.client-tenure-longterm {
    color: #ffcaa4;
    background-color: #3b261a;
    border-color: #6a4028;
}

html[data-theme="dark"] .client-tenure-badge.client-tenure-legacy {
    color: #d7b4ff;
    background-color: #352046;
    border-color: #634086;
}

html[data-theme="dark"] .client-tenure-badge.client-tenure-unknown {
    color: #d0d7e3;
    background-color: #293447;
    border-color: #3b4a63;
}

html[data-theme="dark"] a {
    color: #8ab6ff;
}

html[data-theme="dark"][data-theme-variant="metro"] a {
    color: var(--wo-metro-accent);
}

/* .text-dark dark override: wo-layout.css @layer vendor (WO-CSS-016) */
/* .text-muted dark override: wo-layout.css @layer vendor (WO-CSS-016) */

html[data-theme="dark"][data-theme-variant="metro"] .navbar.navbar-dark.bg-dark {
    background: linear-gradient(90deg, var(--wo-metro-nav-start) 0%, var(--wo-metro-nav-mid) 52%, var(--wo-metro-nav-end) 100%) !important;
}

html[data-theme="dark"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-menu {
    background: linear-gradient(180deg, #163138 0%, #11252b 100%);
    border-color: rgba(131, 182, 173, 0.18);
}

html[data-theme="dark"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item {
    color: #d8efea;
}

html[data-theme="dark"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item:hover,
html[data-theme="dark"][data-theme-variant="metro"] .navbar.navbar-dark .dropdown-item:focus {
    background: var(--wo-metro-nav-hover);
}

/* .bg-white: surface areas now use wo-surface-white (wo-modules.css).
 * .bg-light: handled in @layer vendor block (wo-layout.css).
 * Remaining selectors work without !important in @layer theme. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item {
    background-color: var(--wo-surface-raised);
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

/* card-header/footer border inherits Bootstrap's rgba(0,0,0,.125) which vanishes on dark surfaces */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    border-color: var(--wo-border);
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .accordion-button {
    background-color: #1e2a3a;
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #1a3354;
    color: var(--wo-nav-link-color);
    box-shadow: inset 0 -1px 0 var(--wo-border);
}

html[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .accordion-body {
    background-color: var(--wo-surface-raised);
    color: var(--wo-text-base);
}

html[data-theme="dark"] .dashboard-chart {
    background: linear-gradient(180deg, #182433 0%, #122032 100%);
    border-color: #334155;
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.36);
}

html[data-theme="dark"] .dashboard-summary-card {
    border-color: #334155;
    background-color: #1f2937;
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.36);
}

html[data-theme="dark"] .dashboard-summary-card-footer {
    border-top-color: rgba(100, 116, 139, 0.3);
    background: linear-gradient(180deg, #1f2937 0%, #182433 100%);
    color: #dbe8fb;
}

html[data-theme="dark"] .dashboard-summary-action-card {
    border-color: rgba(148, 163, 184, 0.32);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(20, 33, 55, 0.9) 100%);
    color: #e2e8f0;
}

html[data-theme="dark"] .dashboard-summary-action-card:hover,
html[data-theme="dark"] .dashboard-summary-action-card:focus-visible {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.52);
}

html[data-theme="dark"] .dashboard-summary-action-icon {
    background: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-summary-card,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-card,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-chart {
    box-shadow: 6px 6px 0 var(--wo-metro-shadow);
    border-color: var(--wo-metro-border);
    border-top-color: var(--wo-metro-accent);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-summary-card-footer {
    background: var(--wo-metro-panel-alt);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-summary-action-card {
    background: linear-gradient(180deg, #13262c 0%, #0f1f25 100%);
    border-color: rgba(101, 138, 146, 0.52);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-summary-action-card:hover,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-summary-action-card:focus-visible {
    border-color: var(--wo-metro-border-strong);
    color: var(--wo-metro-text);
}

html[data-theme="dark"] .dashboard-mode-meta {
    color: #b8c6dd;
}

html[data-theme="dark"] .dashboard-mode-sep {
    color: #4a5e77;
}

html[data-theme="dark"] .dashboard-test-banner {
    border-color: #1d4f78;
    border-left-color: #22d3ee;
    background: linear-gradient(90deg, #0f172a 0%, #13253c 100%);
    color: #dbeafe;
}

html[data-theme="dark"] .dashboard-test-banner-note {
    color: #a5d8ff;
}

html[data-theme="dark"] .dashboard-scaffold-header h5 {
    color: var(--wo-text-base);
}

html[data-theme="dark"] .dashboard-scaffold-header small {
    color: var(--wo-placeholder-color);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-test-banner {
    border-color: var(--wo-metro-border-strong);
    border-left-color: var(--wo-metro-accent);
    background: linear-gradient(90deg, #132027 0%, #182b32 100%);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-test-banner-note {
    color: var(--wo-metro-muted);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.alert {
    box-shadow: 4px 4px 0 rgba(5, 19, 23, 0.34);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-warning {
    color: #ecd39a;
    background: linear-gradient(180deg, #342b16 0%, #2a2212 100%);
    border-color: #7b6941;
    border-left-color: #b18c35;
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-warning .wo-top-alert-icon {
    color: #f1d48b;
    background-color: rgba(177, 140, 53, 0.16);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-danger {
    color: #efc2b8;
    background: linear-gradient(180deg, #38201d 0%, #2d1b18 100%);
    border-color: #7c564f;
    border-left-color: #b56958;
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-danger .wo-top-alert-icon {
    color: #f0b8ad;
    background-color: rgba(181, 105, 88, 0.16);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-critical {
    color: #dccbeb;
    background: linear-gradient(180deg, #291f35 0%, #21192c 100%);
    border-color: #665579;
    border-left-color: #8d69ae;
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-top-alert.wo-top-alert-critical .wo-top-alert-icon {
    color: #d8c1ed;
    background-color: rgba(141, 105, 174, 0.18);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-live-tile-popup.wo-live-tile-popup-hosted {
    background: linear-gradient(180deg, rgba(21, 33, 40, 0.98) 0%, rgba(26, 43, 51, 0.99) 100%);
    color: var(--wo-metro-text);
}

html[data-theme="dark"]:not([data-theme-variant="metro"]) .wo-live-tile-popup.wo-live-tile-popup-hosted {
    border-color: #37506f;
    border-left-color: #6f90b6;
    background: linear-gradient(180deg, rgba(23, 36, 54, 0.98) 0%, rgba(16, 27, 42, 0.99) 100%);
    color: #d5e5f9;
    box-shadow: 0 10px 20px rgba(2, 9, 18, 0.55);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-chart-live-band {
    background: linear-gradient(180deg, rgba(21, 33, 40, 0.96) 0%, rgba(26, 43, 51, 0.98) 100%);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .client-tenure-badge.client-tenure-new {
    color: #bfe3da;
    background-color: #1a322f;
    border-color: #40655d;
}

html[data-theme="dark"][data-theme-variant="metro"] .client-tenure-badge.client-tenure-established {
    color: #c9dde5;
    background-color: #1d2f36;
    border-color: #49626b;
}

html[data-theme="dark"][data-theme-variant="metro"] .client-tenure-badge.client-tenure-longterm {
    color: #ecd3ab;
    background-color: #342a1f;
    border-color: #7c6542;
}

html[data-theme="dark"][data-theme-variant="metro"] .client-tenure-badge.client-tenure-legacy {
    color: #dbccea;
    background-color: #2f2539;
    border-color: #6d5a82;
}

html[data-theme="dark"][data-theme-variant="metro"] .client-tenure-badge.client-tenure-unknown {
    color: #cad4d7;
    background-color: #253038;
    border-color: #52656c;
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-autotask-panel {
    border-color: var(--wo-metro-border);
    border-top-color: var(--wo-metro-accent);
    background: linear-gradient(180deg, #17262d 0%, #1a2d35 100%);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-autotask-panel .form-control {
    border-color: var(--wo-metro-border);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-autotask-panel .form-control::placeholder {
    color: rgba(175, 197, 192, 0.72);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-autotask-link {
    color: #8fd1c6;
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-at-clear-btn {
    color: var(--wo-metro-muted);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme="dark"][data-theme-variant="metro"] .wo-at-clear-btn:hover,
html[data-theme="dark"][data-theme-variant="metro"] .wo-at-clear-btn:focus {
    color: var(--wo-metro-text);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-item-detail-card,
html[data-theme="dark"][data-theme-variant="metro"] .project-item-notes-head {
    border-color: var(--wo-metro-border);
    background: linear-gradient(180deg, #17262d 0%, #1a2d35 100%);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-item-detail-label,
html[data-theme="dark"][data-theme-variant="metro"] .project-item-notes-meta {
    color: var(--wo-metro-muted);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-item-detail-title,
html[data-theme="dark"][data-theme-variant="metro"] .project-item-detail-description,
html[data-theme="dark"][data-theme-variant="metro"] .project-item-notes-title {
    color: var(--wo-metro-text);
}

html[data-theme="dark"] .dashboard-scaffold-header h5 {
    color: var(--wo-text-base);
}

html[data-theme="dark"] .dashboard-scaffold-header small {
    color: #9fb0c9;
}

html[data-theme="dark"] .dashboard-scaffold-card {
    border-color: #3b4a63;
    background: linear-gradient(180deg, #182433 0%, #122032 100%);
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .dashboard-scaffold-title {
    color: #dbe8fb;
}

html[data-theme="dark"] .dashboard-scaffold-title i {
    color: #93c5fd;
}

html[data-theme="dark"] .dashboard-scaffold-copy {
    color: #b8c6dd;
}

html[data-theme="dark"] .dashboard-scaffold-meta {
    color: #dbe8fb;
}

html[data-theme="dark"] .dashboard-scaffold-pill {
    color: #dbe8fb;
    background-color: #24354d;
    border-color: #395071;
}

html[data-theme="dark"] .dashboard-scaffold-pill-contract {
    color: #bfdbfe;
    background-color: #1f3658;
    border-color: #355e95;
}

html[data-theme="dark"] .dashboard-scaffold-filter {
    color: #c5d4eb;
}

html[data-theme="dark"] .dashboard-scaffold-tag {
    color: #bfdbfe;
    background-color: #1f3658;
    border-color: #355e95;
}

html[data-theme="dark"] .with-nav-tabs,
html[data-theme="dark"] .panel.with-nav-tabs,
html[data-theme="dark"] .card.with-nav-tabs {
    border-color: #334155;
    background-color: #1f2937;
}

html[data-theme="dark"] .with-nav-tabs > .card-header,
html[data-theme="dark"] .with-nav-tabs > .panel-heading {
    border-bottom-color: #334155;
}

html[data-theme="dark"] .with-nav-tabs .nav-tabs .nav-link {
    color: #c9d8f1;
}

html[data-theme="dark"] .with-nav-tabs .nav-tabs .nav-link:hover,
html[data-theme="dark"] .with-nav-tabs .nav-tabs .nav-link:focus {
    color: #ffffff;
    background-color: #25344a;
    border-color: #3b4d66 #3b4d66 transparent;
}

html[data-theme="dark"] .with-nav-tabs .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .with-nav-tabs .nav-tabs .nav-link.active {
    color: #f8fbff;
    background-color: #0f172a;
    border-color: #3b4d66 #3b4d66 #0f172a;
}

html[data-theme="dark"] .with-nav-tabs .tab-content {
    border-top-color: #334155;
    background-color: var(--wo-surface-deep);
    color: var(--wo-text-base);
}

html[data-theme="dark"] .project-detail-shell,
html[data-theme="dark"] .project-item-notes-shell,
html[data-theme="dark"] .project-tab-content-shell {
    background-color: var(--wo-surface-deep);
    color: var(--wo-text-base);
}

html[data-theme="dark"] .projects-view-help {
    background: linear-gradient(
        180deg,
        var(--wo-surface-deep, #172336) 0%,
        color-mix(in srgb, var(--wo-primary-bg, #e3efff) 12%, var(--wo-surface-deep, #172336) 88%) 100%
    );
    border-color: var(--wo-border-strong, #40506b);
}

html[data-theme="dark"] .projects-view-help-head h5 {
    color: var(--wo-text-base, #e6eefb);
}

html[data-theme="dark"] .projects-view-help p {
    color: var(--wo-text-muted, #c7d5ea);
}

html[data-theme="dark"] .projects-view-help-highlight {
    color: var(--wo-primary-border, #9ec2ff);
}

html[data-theme="dark"] .projects-agile-lane {
    background-color: #131f31;
    border-color: #2b3b54;
}

html[data-theme="dark"] .projects-agile-lane-header {
    border-color: #2b3b54;
}

html[data-theme="dark"] .projects-agile-lane-header h5 {
    color: #dbe8fb;
}

html[data-theme="dark"] .projects-agile-empty {
    background-color: var(--wo-surface-deep);
    border-color: #2d3e56;
    color: #9cb2d0;
}

html[data-theme="dark"] .projects-agile-card {
    background-color: #162335;
    border-color: #2e4058;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .projects-agile-card-number,
html[data-theme="dark"] .projects-agile-card-title {
    color: #e6eefb;
}

html[data-theme="dark"] .projects-agile-card-client,
html[data-theme="dark"] .projects-agile-card-manager,
html[data-theme="dark"] .projects-agile-card-dates,
html[data-theme="dark"] .projects-agile-card-desc {
    color: #c3d3ea;
}

html[data-theme="dark"] .projects-agile-open {
    border-color: #375278;
    color: #d4e5fb;
}

html[data-theme="dark"] .projects-agile-preview,
html[data-theme="dark"] .project-agile-task-preview {
    border-color: #375278;
    color: #d4e5fb;
}

html[data-theme="dark"] .projects-agile-drag-handle {
    border-color: #375278;
    color: #d4e5fb;
}

html[data-theme="dark"] .projects-agile-card:hover,
html[data-theme="dark"] .projects-agile-card:focus-visible {
    border-color: #5f83ba;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .projects-agile-card.is-live-tile-open,
html[data-theme="dark"] .project-agile-task-card.is-live-tile-open {
    box-shadow: 0 16px 30px rgba(2, 9, 18, 0.5);
}

html[data-theme="dark"] .projects-agile-lane-body.is-drop-target {
    background: rgba(59, 130, 246, 0.22);
}

html[data-theme="dark"] .project-agile-modal {
    border-color: #2d3e56;
    background: #121f31;
}

html[data-theme="dark"] .project-agile-modal-meta {
    color: #b7c9e1;
}

html[data-theme="dark"] .project-agile-task-lane,
html[data-theme="dark"] .project-agile-quick-panel,
html[data-theme="dark"] .project-agile-log-panel {
    background: #172538;
    border-color: #2d3e56;
}

html[data-theme="dark"] .project-agile-task-lane-header,
html[data-theme="dark"] .project-agile-task-lane-header h6 {
    border-color: #2d3e56;
    color: #e6eef9;
}

html[data-theme="dark"] .project-agile-task-lane-body.is-drop-target {
    background: rgba(59, 130, 246, 0.22);
}

html[data-theme="dark"] .project-agile-task-empty,
html[data-theme="dark"] .project-agile-task-loading,
html[data-theme="dark"] .project-agile-log-empty {
    background: #0f1b2c;
    border-color: #31465f;
    color: #9fb0c9;
}

html[data-theme="dark"] .project-agile-task-error {
    background: #3b1320;
    border-color: #7f1d3a;
    color: #fecdd3;
}

html[data-theme="dark"] .project-agile-task-card,
html[data-theme="dark"] .project-agile-log-item {
    background: #0f1b2c;
    border-color: #31465f;
    color: var(--wo-text-base);
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.48);
}

html[data-theme="dark"] .project-agile-task-card.is-pending-update {
    border-color: #64748b;
    background: #122138;
    opacity: 0.78;
}

html[data-theme="dark"] .project-agile-task-pending {
    border-color: #64748b;
    background: #1f2d44;
    color: #d2deee;
}

html[data-theme="dark"] .project-agile-task-order,
html[data-theme="dark"] .project-agile-task-title,
html[data-theme="dark"] .project-agile-log-task {
    color: #e6eef9;
}

html[data-theme="dark"] .project-agile-task-meta,
html[data-theme="dark"] .project-agile-task-desc,
html[data-theme="dark"] .project-agile-task-context,
html[data-theme="dark"] .project-agile-log-time,
html[data-theme="dark"] .project-agile-log-details {
    color: #b7c9e1;
}

html[data-theme="dark"] .project-agile-live-tile-badge {
    border-color: #385274;
    background: rgba(17, 31, 48, 0.92);
    color: #d7e5f7;
}

html[data-theme="dark"] .project-agile-live-tile-badge.is-muted {
    color: #a7bdd9;
}

html[data-theme="dark"] .project-agile-live-tile-description {
    color: #d8e4f5;
}

html[data-theme="dark"] .project-agile-live-tile-note {
    color: #aec4df;
    border-top-color: rgba(111, 144, 182, 0.4);
}

html[data-theme="dark"] .project-agile-live-tile-action {
    border-color: #3b587d;
    background: rgba(17, 31, 48, 0.92);
    color: #d7e5f7;
}

html[data-theme="dark"] .project-agile-live-tile-action:hover,
html[data-theme="dark"] .project-agile-live-tile-action:focus-visible {
    background: rgba(27, 51, 78, 0.96);
    border-color: #6f90b6;
    color: #f5f9ff;
}

html[data-theme="dark"] .project-agile-live-tile-hint {
    color: #9fb0c9;
}

html[data-theme="dark"] .project-agile-log-status {
    color: #9ec2ff;
}

html[data-theme="dark"] .project-agile-quick-panel.is-awaiting-apply {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.28);
}

html[data-theme="dark"] .project-agile-quick-panel .form-check-label {
    color: #c9d8ee;
}

html[data-theme="dark"] .wo-progress {
    border-color: #3b4a63;
    background-color: #1e2b3e;
}

html[data-theme="dark"] .wo-progress-meta,
html[data-theme="dark"] .wo-task-progress-meta {
    color: #b8c6dd;
}

html[data-theme="dark"] .wo-task-chip {
    border-color: #31465f;
    color: var(--wo-text-base);
    background-color: #111f33;
}

html[data-theme="dark"] .wo-task-chip-phase {
    border-color: #355680;
    color: #d3e4ff;
    background-color: #183153;
}

html[data-theme="dark"] .wo-task-phase-label {
    border-color: #355680;
    color: #d3e4ff;
    background: #183153;
}

html[data-theme="dark"] .wo-phase-group-row td {
    background: #132237;
    border-top-color: #2d435f;
    border-bottom-color: #2d435f;
}

html[data-theme="dark"] .wo-phase-group-pill {
    border-color: #355680;
    background: #183153;
    color: #d3e4ff;
}

html[data-theme="dark"] .wo-task-chip-dependency-ready {
    border-color: #2d6f46;
    color: #cfeeda;
    background-color: #163326;
}

html[data-theme="dark"] .wo-task-chip-dependency-blocked {
    border-color: #7d3030;
    color: #ffd4d4;
    background-color: #3f1d1d;
}

html[data-theme="dark"] .wo-task-split-bottom {
    border-top-color: #31465f;
}

html[data-theme="dark"] .wo-task-split-name {
    color: #e6eef9;
}

html[data-theme="dark"] .wo-task-split-description {
    color: #c8d4e5;
}

html[data-theme="dark"] .wo-autotask-panel {
    border-top-color: #31465f;
}

html[data-theme="dark"] .project-item-detail-card {
    border-color: #2d435f;
    background: #1a2638;
}

html[data-theme="dark"] .project-item-detail-label {
    color: #b6c6dd;
}

html[data-theme="dark"] .project-item-detail-title,
html[data-theme="dark"] .project-item-detail-description {
    color: #dfe9f8;
}

html[data-theme="dark"] .project-item-notes-head {
    border-color: #2d435f;
    background: #1a2638;
}

html[data-theme="dark"] .project-item-notes-title {
    color: #e6eef9;
}

html[data-theme="dark"] .project-item-notes-meta {
    color: #c3d3ea;
}

html[data-theme="dark"] .wo-date-auto {
    color: #dbe8fb;
}

/* Legacy views still render many inline white backgrounds; normalize those in dark mode. */
/* Normalize legacy inline white backgrounds in dark mode.
 * border-color intentionally omitted — semantic border colors (status, badges)
 * must not be overridden by a generic attribute selector. */
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--wo-surface-deep) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] tr[style*="background-color:white"] > th,
html[data-theme="dark"] tr[style*="background-color:white"] > td,
html[data-theme="dark"] tr[style*="background-color: white"] > th,
html[data-theme="dark"] tr[style*="background-color: white"] > td,
html[data-theme="dark"] tr[style*="background-color:#fff"] > th,
html[data-theme="dark"] tr[style*="background-color:#fff"] > td,
html[data-theme="dark"] tr[style*="background-color:#ffffff"] > th,
html[data-theme="dark"] tr[style*="background-color:#ffffff"] > td {
    background-color: var(--wo-surface-deep) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .wo-bg-surface {
    background-color: var(--wo-surface-deep);
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

/* Keep signature capture pads light for pen contrast/readability. */
html[data-theme="dark"] #signatureparent[style*="background-color:#fff"],
html[data-theme="dark"] #signatureparent[style*="background-color: #fff"],
html[data-theme="dark"] #signatureparent[style*="background-color:#ffffff"],
html[data-theme="dark"] #signatureparent[style*="background-color: #ffffff"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #d1d9e6 !important;
}

html[data-theme="dark"] #tabsPanel tr[style*="background-color:white"],
html[data-theme="dark"] #tabsPanel2 tr[style*="background-color:white"] {
    background-color: #0f172a !important;
}

html[data-theme="dark"] #tabsPanel tr[style*="background-color:white"] > th,
html[data-theme="dark"] #tabsPanel2 tr[style*="background-color:white"] > th {
    color: #dbe8fb;
}

html[data-theme="dark"] #tabsPanel .dtHeader,
html[data-theme="dark"] #tabsPanel2 .dtHeader {
    color: #dbe8fb;
}

html[data-theme="dark"] #tabsPanel .dtData,
html[data-theme="dark"] #tabsPanel2 .dtData,
html[data-theme="dark"] #tabsPanel .dtData2,
html[data-theme="dark"] #tabsPanel2 .dtData2 {
    color: #f5f9ff;
}

html[data-theme="dark"] #tabsPanel a,
html[data-theme="dark"] #tabsPanel2 a,
html[data-theme="dark"] .ui-widget-content a {
    color: #9bc4ff;
}

html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border,
html[data-theme="dark"] hr {
    border-color: var(--wo-border);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--wo-nav-link-color);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--wo-surface-hover);
    color: #ffffff;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--wo-surface-input);
    border-color: var(--wo-border);
    color: var(--wo-text-base);
}

html[data-theme="dark"] option {
    background-color: var(--wo-surface-input);
    color: var(--wo-text-base);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--wo-placeholder-color);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--wo-surface-input);
    color: var(--wo-text-base);
    border-color: #4f7abf;
    box-shadow: 0 0 0 0.2rem rgba(79, 122, 191, 0.25);
}

/* !important required: select2-bootstrap.css is loaded unlayered in some views,
 * which beats @layer theme without !important per CSS cascade spec. */
html[data-theme="dark"] .select2-container--bootstrap .select2-selection,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--wo-surface-input) !important;
    border-color: var(--wo-border) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--wo-surface-input) !important;
    border-color: var(--wo-border) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--wo-text-base);
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
    color: var(--wo-text-base);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
    color: var(--wo-placeholder-color);
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--wo-placeholder-color);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #c7d7ee;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d7ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--wo-surface-input);
    border-color: var(--wo-border);
    color: var(--wo-text-base);
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--wo-surface-deep) !important;
    border-color: var(--wo-border) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    background-color: var(--wo-surface-deep) !important;
    border-color: var(--wo-border) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-results__option {
    background-color: var(--wo-surface-input) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--wo-active-bg) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wo-highlight-bg) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    background-color: var(--wo-surface-input) !important;
    color: var(--wo-text-base) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--wo-highlight-bg) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
    background-color: var(--wo-active-bg) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--wo-surface-deep);
    border-color: var(--wo-border);
    color: var(--wo-text-base);
}

/* Keep the ticket-create Select2 controls readable and visibly focused in dark mode. */
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-ClientID ~ .select2-container--bootstrap-5.select2-container--focus .select2-selection,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-ClientID ~ .select2-container--bootstrap-5.select2-container--open .select2-selection,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5.select2-container--focus .select2-selection,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #4f7abf !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 122, 191, 0.25) !important;
}

html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-ClientID ~ .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__placeholder,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field::placeholder {
    color: var(--wo-placeholder-color) !important;
    opacity: 1;
}

html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:hover,
html[data-theme="dark"] #DTE_Field_ClientsWorkorders_tbl-Tags ~ .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:focus-within {
    border-color: #4f7abf !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7d7ee'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.75rem auto no-repeat;
}

html[data-theme="dark"] .table {
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--wo-surface-subtle);
    color: var(--wo-text-base);
    border-bottom-color: var(--wo-border);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--wo-surface);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--wo-surface-hover);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_info {
    color: #d3deef;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select.form-select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input.form-control,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_length select,
html[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input {
    background-color: var(--wo-surface-input);
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--wo-placeholder-color);
}

html[data-theme="dark"] .dataTables_wrapper .page-item.disabled .page-link {
    color: var(--wo-placeholder-color);
    background-color: #141c28;
    border-color: var(--wo-border);
}

html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-pills,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .pagination {
    border-color: var(--wo-border);
}

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

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link:focus {
    color: #ffffff;
}

html[data-theme="dark"] .page-link {
    background-color: var(--wo-surface-subtle);
    color: var(--wo-nav-link-color);
    border-color: var(--wo-border);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--wo-highlight-bg);
    border-color: var(--wo-highlight-bg);
    color: #ffffff;
}

html[data-theme="dark"] .btn-outline-dark {
    color: #d8e3f8;
    border-color: #4d5f79;
}

html[data-theme="dark"] .btn-outline-dark:hover {
    color: #ffffff;
    background-color: #4d5f79;
    border-color: #4d5f79;
}

html[data-theme="dark"] .btn.btn-default {
    color: var(--wo-text-base);
    background-color: #1b2a3e;
    border-color: var(--wo-active-border);
}

html[data-theme="dark"] .btn.btn-default:hover,
html[data-theme="dark"] .btn.btn-default:focus {
    color: #ffffff;
    background-color: var(--wo-active-bg);
    border-color: var(--wo-hover-border);
}

html[data-theme="dark"] .btn.btn-default:active {
    color: #ffffff;
    background-color: #1a3354;
    border-color: #2d4a6a;
}

/* WO-FE-002: Selected row highlight — visible in both light and dark themes */
.table tbody tr.row-selected > td,
table.dataTable tbody tr.row-selected > td {
    background-color: #d0e6ff;
    color: #0f172a;
}

html[data-theme="dark"] .table tbody tr.row-selected > td,
html[data-theme="dark"] table.dataTable tbody tr.row-selected > td {
    background-color: #1e3a5f;
    color: var(--wo-text-base);
}

.table tbody tr.wo-system-note-row > td,
table.dataTable tbody tr.wo-system-note-row > td {
    background-color: rgba(148, 163, 184, 0.09);
    color: #4f5b6e;
}

.table tbody tr.wo-internal-note-row > td,
table.dataTable tbody tr.wo-internal-note-row > td {
    background-color: rgba(220, 38, 38, 0.08);
    color: #7f1d1d;
}

.wo-system-note-badge {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #b6beca;
    background-color: rgba(148, 163, 184, 0.18);
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wo-system-note-text {
    color: inherit;
    font-style: italic;
}

.wo-internal-note-badge {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #fca5a5;
    background-color: rgba(254, 202, 202, 0.45);
    color: #991b1b;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wo-internal-note-text {
    color: inherit;
    font-style: italic;
}

html[data-theme="dark"] .table tbody tr.wo-system-note-row > td,
html[data-theme="dark"] table.dataTable tbody tr.wo-system-note-row > td {
    background-color: rgba(77, 98, 130, 0.22);
    color: #9eb0ca;
}

html[data-theme="dark"] .table tbody tr.wo-internal-note-row > td,
html[data-theme="dark"] table.dataTable tbody tr.wo-internal-note-row > td {
    background-color: rgba(153, 27, 27, 0.32);
    color: #fecaca;
}

html[data-theme="dark"] .wo-system-note-badge {
    border-color: #4d6587;
    background-color: rgba(77, 101, 135, 0.32);
    color: #c5d1e3;
}

html[data-theme="dark"] .wo-internal-note-badge {
    border-color: #7f1d1d;
    background-color: rgba(185, 28, 28, 0.35);
    color: #fecaca;
}

/* Final Metro palette overrides to keep later dark-theme rules from reintroducing blue accents. */
html[data-theme-variant="metro"] .report-tracker-item-highlight {
    border-color: var(--wo-metro-accent);
    box-shadow: inset 0 0 0 1px var(--wo-metro-accent-ghost);
}

html[data-theme-variant="metro"] .report-tracker-link:focus {
    outline: 2px solid var(--wo-metro-accent-ghost);
}

html[data-theme="dark"][data-theme-variant="metro"] .report-tracker-summary-card,
html[data-theme="dark"][data-theme-variant="metro"] .report-tracker-item-even,
html[data-theme="dark"][data-theme-variant="metro"] .report-tracker-item-odd,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-card,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs,
html[data-theme="dark"][data-theme-variant="metro"] .panel.with-nav-tabs,
html[data-theme="dark"][data-theme-variant="metro"] .card.with-nav-tabs,
html[data-theme="dark"][data-theme-variant="metro"] .project-detail-shell,
html[data-theme="dark"][data-theme-variant="metro"] .project-item-notes-shell,
html[data-theme="dark"][data-theme-variant="metro"] .project-tab-content-shell,
html[data-theme="dark"][data-theme-variant="metro"] .projects-view-help,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-lane,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-lane,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-modal,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-quick-panel,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-panel {
    border-color: var(--wo-metro-border);
    background: linear-gradient(180deg, var(--wo-metro-panel) 0%, var(--wo-metro-panel-alt) 100%);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-card {
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-title,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-meta,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link.active,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"][data-theme-variant="metro"] .projects-view-help-head h5,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-lane-header h5,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-lane-header h6,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-number,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-title,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-order,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-title,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-task {
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-title i,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-pill-contract,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-tag,
html[data-theme="dark"][data-theme-variant="metro"] .projects-view-help-highlight,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-status {
    color: var(--wo-metro-accent);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-copy,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-filter,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link,
html[data-theme="dark"][data-theme-variant="metro"] .projects-view-help p,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-empty,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-client,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-manager,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-dates,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card-desc,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-modal-meta,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-empty,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-loading,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-empty,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-meta,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-desc,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-context,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-time,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-details,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-quick-panel .form-check-label,
html[data-theme="dark"][data-theme-variant="metro"] .wo-progress-meta,
html[data-theme="dark"][data-theme-variant="metro"] .wo-task-progress-meta {
    color: var(--wo-metro-muted);
}

html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-pill,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-pill-contract,
html[data-theme="dark"][data-theme-variant="metro"] .dashboard-scaffold-tag,
html[data-theme="dark"][data-theme-variant="metro"] .wo-task-chip-phase,
html[data-theme="dark"][data-theme-variant="metro"] .wo-task-phase-label,
html[data-theme="dark"][data-theme-variant="metro"] .wo-phase-group-pill {
    color: var(--wo-metro-text);
    background-color: var(--wo-metro-accent-soft);
    border-color: var(--wo-metro-border-strong);
}

html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs > .card-header,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs > .panel-heading,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .tab-content,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-lane-header,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-lane-header,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-card,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-item,
html[data-theme="dark"][data-theme-variant="metro"] .wo-progress,
html[data-theme="dark"][data-theme-variant="metro"] .wo-task-chip,
html[data-theme="dark"][data-theme-variant="metro"] .wo-phase-group-row td,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-open,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-drag-handle {
    border-color: var(--wo-metro-border);
}

html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link:hover,
html[data-theme="dark"][data-theme-variant="metro"] .with-nav-tabs .nav-tabs .nav-link:focus,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card:hover,
html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-card:focus-visible,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-card:hover,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-card:focus-visible {
    color: var(--wo-metro-text);
    background-color: var(--wo-metro-panel-alt);
    border-color: var(--wo-metro-border-strong);
    box-shadow: 0 8px 18px var(--wo-metro-shadow);
}

html[data-theme="dark"][data-theme-variant="metro"] .projects-agile-lane-body.is-drop-target,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-lane-body.is-drop-target {
    background: var(--wo-metro-accent-ghost);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-card,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-log-item,
html[data-theme="dark"][data-theme-variant="metro"] .wo-task-chip,
html[data-theme="dark"][data-theme-variant="metro"] .wo-progress,
html[data-theme="dark"][data-theme-variant="metro"] .wo-phase-group-row td {
    background: rgba(255, 255, 255, 0.02);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-pending,
html[data-theme="dark"][data-theme-variant="metro"] .project-agile-task-card.is-pending-update {
    border-color: var(--wo-metro-border-strong);
    background: rgba(255, 255, 255, 0.035);
    color: var(--wo-metro-text);
}

html[data-theme="dark"][data-theme-variant="metro"] .project-agile-quick-panel.is-awaiting-apply {
    border-color: var(--wo-metro-accent);
    box-shadow: 0 0 0 0.2rem var(--wo-metro-accent-ghost);
}

/* table-light: Bootstrap 5.0.2 has no native dark override; connector views use this for thead */
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] .table > thead.table-light > tr > th,
html[data-theme="dark"] .table > thead.table-light > tr > td {
    background-color: #1e2a3a !important;
    color: var(--wo-nav-link-color) !important;
    border-color: var(--wo-border) !important;
}

/* bg-white: Bootstrap utility forces white; suppress in dark mode */
html[data-theme="dark"] .bg-white {
    background-color: var(--wo-surface-raised) !important;
}

/* .bg-light dark override: wo-layout.css @layer vendor (WO-CSS-016) */

/* jQuery UI hover/focus: hardcoded light-blue tint + green border, no dark counterpart */
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-hover,
html[data-theme="dark"] .ui-widget-header .ui-state-hover,
html[data-theme="dark"] .ui-state-focus,
html[data-theme="dark"] .ui-widget-content .ui-state-focus,
html[data-theme="dark"] .ui-widget-header .ui-state-focus,
html[data-theme="dark"] .ui-button:hover,
html[data-theme="dark"] .ui-button:focus {
    border-color: #3b6ea8;
    background-color: rgba(59, 110, 168, 0.25);
    color: var(--wo-text-base);
}

/* DTE Header: keep blue brand color, ensure text is legible on dark */
html[data-theme="dark"] div.DTE_Header {
    background-color: #1a4f8a;
    border-color: var(--wo-border);
}

/* Bootstrap 5 offcanvas — no native dark support in v5.0.2 */
html[data-theme="dark"] .offcanvas {
    background-color: #1c2330;
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}
html[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--wo-border);
}
html[data-theme="dark"] .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap 5 alert variants — no native dark support in v5.0.2 */
html[data-theme="dark"] .alert-info {
    background-color: #0a3447;
    color: #7ed6f7;
    border-color: #1a4f6e;
}
html[data-theme="dark"] .alert-success {
    background-color: #0d2e1e;
    color: #75c9a0;
    border-color: #175232;
}
html[data-theme="dark"] .alert-warning {
    background-color: #3f2d09;
    color: #ffd885;
    border-color: #6b4a10;
}
html[data-theme="dark"] .alert-danger {
    background-color: #4a1518;
    color: #f5b7bb;
    border-color: #7f2830;
}
html[data-theme="dark"] .alert-primary {
    background-color: #0c2552;
    color: #8bb6f8;
    border-color: #1a3d7a;
}
html[data-theme="dark"] .alert-secondary {
    background-color: #1e2530;
    color: #b5bdc8;
    border-color: #2d3748;
}
html[data-theme="dark"] .alert-light {
    background-color: var(--wo-surface-raised);
    color: var(--wo-text-base);
    border-color: var(--wo-border);
}

/* Bootstrap 5 contextual table rows — bright light-theme colors are unreadable
   in dark mode, especially on hover.  Override BS custom properties so the
   table-color pipeline stays intact (hover, striping, etc.).  */
html[data-theme="dark"] .table-warning {
    --bs-table-bg: rgba(146, 102, 10, 0.15);
    --bs-table-hover-bg: rgba(146, 102, 10, 0.25);
    color: #ffd885;
}
html[data-theme="dark"] .table-info {
    --bs-table-bg: rgba(10, 52, 71, 0.25);
    --bs-table-hover-bg: rgba(10, 52, 71, 0.4);
    color: #7ed6f7;
}
html[data-theme="dark"] .table-success {
    --bs-table-bg: rgba(13, 58, 36, 0.25);
    --bs-table-hover-bg: rgba(13, 58, 36, 0.4);
    color: #75c9a0;
}
html[data-theme="dark"] .table-danger {
    --bs-table-bg: rgba(90, 26, 30, 0.25);
    --bs-table-hover-bg: rgba(90, 26, 30, 0.4);
    color: #f5b7bb;
}
html[data-theme="dark"] .table-primary {
    --bs-table-bg: rgba(26, 63, 122, 0.25);
    --bs-table-hover-bg: rgba(26, 63, 122, 0.4);
    color: #8bb6f8;
}

/* NOTE: Bootstrap utility dark overrides (bg-warning, bg-info, bg-*-subtle,
   text-*-emphasis, bg-peach, bg-purple) moved to wo-vendor-overrides.css.
   Bootstrap utilities use unlayered !important — @layer theme !important
   can never win. See wo-vendor-overrides.css "Bootstrap 5 utility dark
   overrides" section. */

/* .separator column divider — dark bg needs lighter border */
html[data-theme="dark"] .separator {
    border-right-color: #3d4f67;
}

/* Toggle switch track — gray (#ccc) is too light on dark surfaces */
html[data-theme="dark"] .slider {
    background-color: #3d4f67;
}

/* DTE datetime picker — hardcoded white in Workorders.source.css */
html[data-theme="dark"] div.editor-datetime {
    background-color: #1c2330;
    border-color: var(--wo-border);
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.6);
    color: var(--wo-text-base);
}
html[data-theme="dark"] div.editor-datetime table th {
    color: var(--wo-text-muted);
}
html[data-theme="dark"] div.editor-datetime table td {
    color: #d8e3f2;
}
html[data-theme="dark"] div.editor-datetime table td.day {
    background: var(--wo-surface-input);
}
html[data-theme="dark"] div.editor-datetime table td.day.disabled {
    color: var(--wo-text-muted);
    background: var(--wo-surface-subtle);
}
html[data-theme="dark"] div.editor-datetime table td.day.today {
    background-color: #1e3a5f;
}
html[data-theme="dark"] div.editor-datetime div.editor-datetime-label:hover {
    border-color: var(--wo-border);
    background-color: var(--wo-surface-hover);
}

/* ============================================================
   DTE Bubble editor — vendor sets background-color:white
   ============================================================ */
html[data-theme="dark"] div.DTE_Bubble div.DTE_Bubble_Liner {
    background-color: #1c2330;
    border-color: var(--wo-border);
    color: var(--wo-text-base);
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close:after {
    color: var(--wo-placeholder-color);
}
html[data-theme="dark"] div.DTE_Bubble div.DTE_Bubble_Triangle {
    background-color: #1c2330;
    border-color: var(--wo-border);
}

/* ============================================================
   DTE Envelope editor — vendor sets background-color:white
   ============================================================ */
html[data-theme="dark"] div.DTED_Envelope_Wrapper div.DTED_Envelope_Container {
    background-color: #1c2330;
    color: var(--wo-text-base);
}
html[data-theme="dark"] div.DTED_Envelope_Wrapper div.DTED_Envelope_Container div.DTED_Envelope_Close:after {
    color: var(--wo-placeholder-color);
}

/* ============================================================
   Bootstrap Modal — header/footer inherit card bg but need
   explicit border and btn-close inversion in dark mode
   ============================================================ */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--wo-border);
    background-color: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   Bootstrap Tooltip — default is dark bg with white text which
   inverts poorly; give it a subtle dark-surface look instead
   ============================================================ */
html[data-theme="dark"] .tooltip-inner {
    background-color: #374660;
    color: var(--wo-text-base);
}
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #374660;
}
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #374660;
}
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=start] .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #374660;
}
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^=end] .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #374660;
}

/* ============================================================
   Code / Pre / Mark elements
   ============================================================ */
html[data-theme="dark"] code {
    background-color: #1e2a3a;
    color: #f8a4c8;
    border-radius: 0.2rem;
    padding: 0.1em 0.3em;
}
html[data-theme="dark"] pre {
    background-color: #151d29;
    color: #d3deef;
    border-color: var(--wo-border);
}
html[data-theme="dark"] mark {
    background-color: #4a3a10;
    color: #ffd885;
}

/* Bootstrap 5 list-group — hover/active states missing in v5.0.2 dark mode */
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:focus {
    background-color: var(--wo-surface-hover);
    color: var(--wo-text-base);
}
html[data-theme="dark"] .list-group-item.active {
    background-color: var(--wo-active-bg);
    border-color: var(--wo-active-bg);
    color: #fff;
}

/* Bootstrap 5 popover — no native dark support in v5.0.2 */
html[data-theme="dark"] .popover {
    background-color: var(--wo-surface-raised);
    border-color: var(--wo-border);
}
html[data-theme="dark"] .popover-header {
    background-color: var(--wo-surface);
    color: var(--wo-text-base);
    border-bottom-color: var(--wo-border);
}
html[data-theme="dark"] .popover-body {
    color: var(--wo-text-base);
}
html[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--wo-surface-raised);
}
html[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--wo-surface-raised);
}
html[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--wo-surface-raised);
}
html[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
html[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--wo-surface-raised);
}

} /* end @layer theme */