@import url("components/buttons.css");
@import url("components/cards.css");

/* Global color theme: shared semantic overrides for every app shell. */
html[data-theme="dark"] .global-header,html[data-theme="dark"] .header-quick-nav-more-menu,html[data-theme="dark"] .module-switcher-menu,html[data-theme="dark"] .messages-menu,html[data-theme="dark"] .notification-menu,html[data-theme="dark"] .user-dropdown-menu,html[data-theme="dark"] .dropdown-menu,html[data-theme="dark"] .popover,html[data-theme="dark"] .modal,html[data-theme="dark"] .task-modal,html[data-theme="dark"] .drawer{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .global-header,html[data-theme="dark"] .header-divider{border-color:var(--ds-border)}html[data-theme="dark"] .header-page-title,html[data-theme="dark"] .table thead th,html[data-theme="dark"] .data-table thead th,html[data-theme="dark"] .settings-section-link{color:var(--ds-text)}html[data-theme="dark"] .form-control,html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--ds-text-muted);opacity:1}
html[data-theme="dark"] input:-webkit-autofill,html[data-theme="dark"] input:-webkit-autofill:hover,html[data-theme="dark"] input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ds-text);-webkit-box-shadow:0 0 0 1000px var(--ds-surface) inset}
html[data-theme="dark"] .toast-message{box-shadow:var(--ds-shadow-lg)}.theme-toggle-btn{position:relative;width:44px;place-items:center}html[data-theme="dark"] .client-status-dashboard-card,html[data-theme="dark"] .client-status-phase-card,html[data-theme="dark"] .client-status-item-row,html[data-theme="dark"] .client-status-item-create,html[data-theme="dark"] .client-status-summary-item{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .client-status-dashboard-breakdown span,html[data-theme="dark"] .client-status-dashboard-progress,html[data-theme="dark"] .client-status-widget-progress,html[data-theme="dark"] .client-status-summary-item{background:var(--ds-surface-muted)}
/* Dark-shell alignment and module text exceptions. */
html[data-theme="dark"] .sidebar{background:var(--ds-surface);box-shadow:inset -1px 0 0 var(--ds-border)}
html[data-theme="dark"] .sidebar::before{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
html[data-theme="dark"] .sidebar-logo::after{background:var(--ds-border)}
html[data-theme="dark"] .sidebar-logo span{color:#2cb65e}
html[data-theme="dark"] .sidebar-nav a{color:var(--ds-text)}
html[data-theme="dark"] .sidebar-nav a:hover{background:var(--ds-surface-muted)}
html[data-theme="dark"] .sidebar-nav a.active{background:rgba(16,185,129,.22);box-shadow:inset 3px 0 0 var(--primary-color)}
html[data-theme="dark"] .task-title-link,html[data-theme="dark"] .task-title,html[data-theme="dark"] .task-view-item strong,html[data-theme="dark"] .task-view-description p,html[data-theme="dark"] .task-assignee{color:var(--ds-text)}
html[data-theme="dark"] .planner-task-title{color:#fff}
html[data-theme="dark"] .tasks-subtitle,html[data-theme="dark"] .task-description-content{color:var(--ds-text-muted)}/* Contrast audit: shared dropdown,menu,table,form and icon text. */
html[data-theme="dark"] .user-dropdown-menu a,html[data-theme="dark"] .user-dropdown-menu a i,html[data-theme="dark"] .notification-menu a,html[data-theme="dark"] .notification-menu a i,html[data-theme="dark"] .messages-header,html[data-theme="dark"] .notification-header,html[data-theme="dark"] .messages-item,html[data-theme="dark"] .messages-item i,html[data-theme="dark"] .header-quick-nav-link{color:var(--ds-text)}
html[data-theme="dark"] .user-dropdown-menu .logout-link,html[data-theme="dark"] .user-dropdown-menu .logout-link i{color:var(--ds-danger)}
html[data-theme="dark"] .dropdown-divider,html[data-theme="dark"] .messages-header,html[data-theme="dark"] .notification-header{border-color:var(--ds-border)}
html[data-theme="dark"] .messages-preview,html[data-theme="dark"] .messages-meta time,html[data-theme="dark"] .notification-item-content small,html[data-theme="dark"] small,html[data-theme="dark"] .form-text,html[data-theme="dark"] .help-text{color:var(--ds-text-muted)}
html[data-theme="dark"] .form-group label,html[data-theme="dark"] label,html[data-theme="dark"] .table thead th,html[data-theme="dark"] .data-table thead th,html[data-theme="dark"] .table tbody td,html[data-theme="dark"] .data-table tbody td{color:var(--ds-text)}
html[data-theme="dark"] select option{background:var(--ds-surface);color:var(--ds-text)}
html[data-theme="dark"] input:disabled,html[data-theme="dark"] select:disabled,html[data-theme="dark"] textarea:disabled,html[data-theme="dark"] input[readonly],html[data-theme="dark"] textarea[readonly]{color:var(--ds-text-muted);background:var(--ds-surface-muted);border-color:var(--ds-border)}html[data-theme="dark"] .command-palette-trigger{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}html[data-theme="dark"] .command-palette-trigger span{color:var(--ds-text)}html[data-theme="dark"] .command-palette-trigger:hover{background:var(--ds-surface-muted);border-color:var(--ds-border-strong)}
html[data-theme="dark"] .header-quick-nav-link:hover,html[data-theme="dark"] .header-quick-nav-link:focus-visible{background:var(--ds-surface-muted);border-color:var(--ds-border-strong);color:var(--ds-success)}
html[data-theme="dark"] .header-quick-nav-link:hover i,html[data-theme="dark"] .header-quick-nav-link:focus-visible i{color:var(--ds-success)}
/* Employee portal task cards and controls. */
html[data-theme="dark"] .employee-task-index-header,html[data-theme="dark"] .employee-task-toolbar,html[data-theme="dark"] .employee-task-list-card,html[data-theme="dark"] .employee-task-index-empty,html[data-theme="dark"] .employee-task-pagination,html[data-theme="dark"] .employee-shell .employee-project-index-card{background:var(--ds-surface);color:var(--ds-text);box-shadow:var(--ds-shadow-sm)}
html[data-theme="dark"] .employee-task-index-header{background:linear-gradient(135deg,var(--ds-surface),var(--ds-surface-muted))}
html[data-theme="dark"] .employee-task-view-switch,html[data-theme="dark"] .employee-task-filter-tabs a,html[data-theme="dark"] .employee-task-group>header>span,html[data-theme="dark"] .employee-task-input-wrap input,html[data-theme="dark"] .employee-task-search-control select{background:var(--ds-surface-muted);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .employee-task-view-switch a,html[data-theme="dark"] .employee-task-search-control,html[data-theme="dark"] .employee-task-list-main>strong,html[data-theme="dark"] .employee-task-index-header h1,html[data-theme="dark"] .employee-task-group>header h2,html[data-theme="dark"] .employee-project-index-card h2{color:var(--ds-text)}
html[data-theme="dark"] .employee-task-index-header p,html[data-theme="dark"] .employee-task-list-main>small,html[data-theme="dark"] .employee-task-due,html[data-theme="dark"] .employee-task-index-empty,html[data-theme="dark"] .employee-project-index-counts span{color:var(--ds-text-muted)}
html[data-theme="dark"] .employee-task-search-form{border-color:var(--ds-border)}
html[data-theme="dark"] .employee-task-list-card:hover,html[data-theme="dark"] .employee-task-list-card:focus-visible,html[data-theme="dark"] .employee-task-view-switch a:hover,html[data-theme="dark"] .employee-task-input-wrap input:hover,html[data-theme="dark"] .employee-task-search-control select:hover{background:var(--ds-surface-muted);border-color:var(--ds-border-strong)}
/* Remaining reusable employee portal cards. */
html[data-theme="dark"] .employee-shell .project-card,html[data-theme="dark"] .employee-shell .project-description,html[data-theme="dark"] .employee-shell .resource-card,html[data-theme="dark"] .employee-shell .task-file-card,html[data-theme="dark"] .employee-shell .conversation-card,html[data-theme="dark"] .employee-task-view-card,html[data-theme="dark"] .employee-task-instructions,html[data-theme="dark"] .employee-task-resources,html[data-theme="dark"] .task-resource-card,html[data-theme="dark"] .employee-task-delivery{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .resources-page .btn.resource-folder-back,html[data-theme="dark"] .resources-page .btn.resource-folder-back:hover{color:#fff!important}
html[data-theme="dark"] .employee-shell .project-card h3,html[data-theme="dark"] .employee-shell .project-description h3,html[data-theme="dark"] .employee-shell .resource-card h4,html[data-theme="dark"] .employee-shell .conversation-name,html[data-theme="dark"] .employee-task-view-card h3,html[data-theme="dark"] .employee-task-section-heading h2,html[data-theme="dark"] .task-resource-name{color:var(--ds-text)}
html[data-theme="dark"] .employee-shell .project-card p,html[data-theme="dark"] .employee-shell .project-description p,html[data-theme="dark"] .employee-shell .conversation-preview,html[data-theme="dark"] .employee-shell .conversation-date,html[data-theme="dark"] .employee-task-view-card>h3+p,html[data-theme="dark"] .task-resource-meta{color:var(--ds-text-muted)}
html[data-theme="dark"] .task-resource-card:hover,html[data-theme="dark"] .task-resource-card:focus-visible,html[data-theme="dark"] .employee-shell .project-card:hover,html[data-theme="dark"] .employee-shell .resource-card:hover,html[data-theme="dark"] .employee-shell .task-file-card:hover,html[data-theme="dark"] .employee-shell .conversation-card:hover{background:var(--ds-surface-muted)}
/* Dark controls use a distinct surface rather than white or card-colored fields. */
html[data-theme="dark"] .form-control,html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .employee-file-picker,html[data-theme="dark"] .employee-task-empty,html[data-theme="dark"] .employee-task-state{background:var(--ds-surface-muted);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .employee-file-picker-summary,html[data-theme="dark"] .employee-task-empty,html[data-theme="dark"] .employee-task-empty i{color:var(--ds-text-muted)}
html[data-theme="dark"] .employee-file-picker:hover,html[data-theme="dark"] .form-control:hover,html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):hover,html[data-theme="dark"] select:hover,html[data-theme="dark"] textarea:hover{border-color:var(--ds-border-strong)}
/* Headings do not use bright separator rules in dark mode. */
html[data-theme="dark"] .employee-task-detail-header,html[data-theme="dark"] .employee-task-section-heading-simple,html[data-theme="dark"] .employee-task-comment-form,html[data-theme="dark"] .employee-task-detail-footer{border-top-color:transparent;border-bottom-color:transparent}
html[data-theme="dark"] .section-header,html[data-theme="dark"] .section-heading,html[data-theme="dark"] .content-header,html[data-theme="dark"] .card-header,html[data-theme="dark"] .page-header{border-bottom-color:transparent}
/* Resources sit on a subtly deeper panel so each source card is easy to scan. */
html[data-theme="dark"]{--ds-surface-deep:#141d2d}
html[data-theme="dark"] .employee-task-resources{background:var(--ds-surface-deep);border-color:var(--ds-border)}
html[data-theme="dark"] .employee-task-resources .task-resource-card{background:var(--ds-surface)}
/* Employee dashboard hero: restrained premium dark presentation. */
html[data-theme="dark"] .dashboard-hero{background:linear-gradient(135deg,var(--ds-surface) 0%,var(--ds-surface) 72%,rgba(5,87,67,.34) 100%);border:1px solid var(--ds-border);box-shadow:var(--ds-shadow-md);color:var(--ds-text)}
html[data-theme="dark"] .dashboard-hero .hero-left h2,html[data-theme="dark"] .dashboard-hero .level-progress-card h4,html[data-theme="dark"] .dashboard-hero .level-stats,html[data-theme="dark"] .dashboard-hero .level-stats span{color:var(--ds-text)}
html[data-theme="dark"] .dashboard-hero .hero-left>p{color:var(--ds-text-muted);opacity:1}
html[data-theme="dark"] .dashboard-hero .hero-badge,html[data-theme="dark"] .dashboard-hero .employee-badge{background:var(--ds-surface-muted);border:1px solid var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .dashboard-hero .level-progress-card{background:transparent;border-color:var(--ds-border)}
html[data-theme="dark"] .dashboard-hero .level-progress-bar{background:var(--ds-surface-muted)}
html[data-theme="dark"] .employee-warning-panel{background:var(--ds-surface-muted);border-color:var(--ds-border);box-shadow:none;backdrop-filter:none;color:var(--ds-text)}
html[data-theme="dark"] .employee-warning-heading strong{color:var(--ds-text);background:var(--ds-surface);border:1px solid var(--ds-border)}
html[data-theme="dark"] .employee-warning-card.is-empty{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text-subtle)}
html[data-theme="dark"] .employee-warning-policy{color:var(--ds-text-muted)}
html[data-theme="dark"] .employee-warning-panel.is-critical{background:var(--ds-danger-soft);border-color:var(--ds-danger)}
html[data-theme="dark"] .hero-score{background:var(--ds-surface-muted);border-color:var(--ds-border);box-shadow:none;backdrop-filter:none}
html[data-theme="dark"] .score-circle{background:conic-gradient(var(--primary-color) calc(var(--performance-score) * 1%),var(--ds-border) 0);box-shadow:0 12px 28px rgba(0,0,0,.24)}
html[data-theme="dark"] .score-circle::before{background:var(--ds-surface);box-shadow:inset 0 0 0 1px var(--ds-border)}
html[data-theme="dark"] .score-circle span,html[data-theme="dark"] .hero-score small{color:var(--ds-text)}
html[data-theme="dark"] .performance-factors span{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text-muted)}
html[data-theme="dark"] .hero-coins-card{background:var(--ds-surface-muted);border-color:rgba(252,211,77,.45);box-shadow:inset 0 1px 0 rgba(252,211,77,.08),0 10px 26px rgba(0,0,0,.18);backdrop-filter:none}
html[data-theme="dark"] .hero-coins-card::after{background:radial-gradient(circle,rgba(252,211,77,.14),transparent 68%)}
html[data-theme="dark"] .hero-coins-copy small,html[data-theme="dark"] .hero-coins-copy span,html[data-theme="dark"] .hero-coins-tokens{color:var(--ds-warning)}
html[data-theme="dark"] .hero-coins-copy strong{color:var(--ds-warning)}
html[data-theme="dark"] .hero-draw-ticket{color:var(--ds-text);background:var(--ds-surface-muted);border-color:rgba(252,211,77,.4);box-shadow:0 10px 26px rgba(0,0,0,.18)}
html[data-theme="dark"] .hero-draw-ticket::before,html[data-theme="dark"] .hero-draw-ticket::after{background:var(--ds-surface)}
html[data-theme="dark"] .hero-draw-ticket-stub{color:var(--ds-warning);background:var(--ds-warning-soft);border-color:rgba(252,211,77,.35)}
html[data-theme="dark"] .hero-draw-ticket-copy small,html[data-theme="dark"] .hero-draw-ticket-copy em{color:var(--ds-warning)}
html[data-theme="dark"] .hero-draw-ticket-copy strong{color:var(--ds-text)}
html[data-theme="dark"] .hero-draw-ticket-copy span{color:var(--ds-text-muted)}
html[data-theme="dark"] .hero-draw-ticket-progress{background:var(--ds-surface)}
html[data-theme="dark"] .hero-draw-ticket-progress span{background:linear-gradient(90deg,#d97706,var(--ds-warning))}
/* Conversations and embedded message pop-outs. */
html[data-theme="dark"] .conversation-popout,html[data-theme="dark"] .conversation-popout-header,html[data-theme="dark"] .conversation-popout-frame,html[data-theme="dark"] .embedded-chat-body,html[data-theme="dark"] .chat-panel,html[data-theme="dark"] .chat-composer{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .conversation-popout-identity strong,html[data-theme="dark"] .chat-user-header,html[data-theme="dark"] .chat-page-header h1{color:var(--ds-text)}
html[data-theme="dark"] .chat-container{background:radial-gradient(circle at 12px 12px,rgba(148,163,184,.08) 1px,transparent 1px),var(--ds-surface-muted)}
html[data-theme="dark"] .chat-other .chat-bubble{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .chat-composer-input,html[data-theme="dark"] .chat-sender-field select{background:var(--ds-surface-muted);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .chat-composer-input:focus{background:var(--ds-surface-muted);border-color:var(--primary-color)}
html[data-theme="dark"] .conversation-card{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .conversation-preview,html[data-theme="dark"] .conversation-date{color:var(--ds-text-muted)}
/* Full notifications page. */
html[data-theme="dark"] .notification-card,html[data-theme="dark"] .empty-notifications{background:var(--ds-surface);border-color:var(--ds-border);box-shadow:var(--ds-shadow-sm);color:var(--ds-text)}
html[data-theme="dark"] .notification-card:hover{box-shadow:var(--ds-shadow-md)}
html[data-theme="dark"] .notification-icon{background:var(--ds-surface-muted)}
html[data-theme="dark"] .notification-top h3,html[data-theme="dark"] .empty-notifications h3{color:var(--ds-text)}
html[data-theme="dark"] .notification-content p,html[data-theme="dark"] .notification-date,html[data-theme="dark"] .empty-notifications p{color:var(--ds-text-muted)}
html[data-theme="dark"] .notification-task-context>span{background:var(--ds-surface-muted);border-color:var(--ds-border);color:var(--ds-text)}
/* Remove decorative horizontal title separators throughout dark mode. */
html[data-theme="dark"] hr,html[data-theme="dark"] .dashboard-content hr{border:0;background:transparent}
html[data-theme="dark"] .form-card>h2,html[data-theme="dark"] .form-card>h3,html[data-theme="dark"] .card-header,html[data-theme="dark"] .dashboard-card-header,html[data-theme="dark"] .table-card-header{border-bottom-color:transparent}
/* Embedded chat inherits the saved theme and uses a deliberately distinct dark conversation surface. */
html[data-theme="dark"] .embedded-chat-body,html[data-theme="dark"] .embedded-chat-shell{background:var(--ds-surface-page);color:var(--ds-text)}
html[data-theme="dark"] .embedded-chat-shell .chat-panel{background:var(--ds-surface);border:1px solid var(--ds-border);box-shadow:inset 0 0 0 1px rgba(148,163,184,.05)}
html[data-theme="dark"] .embedded-chat-shell .chat-container{background:radial-gradient(circle at 12px 12px,rgba(148,163,184,.08) 1px,transparent 1px),var(--ds-surface-deep)}
html[data-theme="dark"] .embedded-chat-shell .chat-composer{background:var(--ds-surface);border-top-color:var(--ds-border)}
html[data-theme="dark"] .embedded-chat-shell .chat-other .chat-bubble{background:var(--ds-surface-muted);border-color:var(--ds-border);color:var(--ds-text);box-shadow:0 3px 12px rgba(0,0,0,.16)}
html[data-theme="dark"] .embedded-chat-shell .chat-author{color:var(--ds-success)}
html[data-theme="dark"] .embedded-chat-shell .chat-time{color:var(--ds-text-muted)}
/* Account-menu divider: low-contrast dark separation, never white in dark mode. */
html[data-theme="dark"] .user-dropdown-menu .dropdown-divider,html[data-theme="dark"] .dropdown-divider{background:var(--ds-border);border-color:transparent}
/* App launcher: white hierarchy for titles in dark mode. */
html[data-theme="dark"] .app-launcher-header strong,html[data-theme="dark"] .app-launcher-card-copy strong,html[data-theme="dark"] .module-switcher-menu .app-launcher-card-link{color:var(--ds-text)}
html[data-theme="dark"] .app-launcher-header span,html[data-theme="dark"] .app-launcher-group-title,html[data-theme="dark"] .app-launcher-card-copy small{color:var(--ds-text-muted)}
html[data-theme="dark"] .app-launcher-header{border-bottom-color:var(--ds-border)}
/* Application launcher headings stay white in dark mode. */
html[data-theme="dark"] .module-switcher-menu .app-launcher-header strong,html[data-theme="dark"] .module-switcher-menu .app-launcher-group-title{color:var(--ds-text)}
/* Notification menu separators use the dark theme border, never white. */
html[data-theme="dark"] .notification-menu .notification-item{border-bottom-color:var(--ds-border-subtle)}
html[data-theme="dark"] .notification-footer{border-top-color:var(--ds-border-subtle)}
/* Review submission step matches the dark task-delivery surface. */
html[data-theme="dark"] .employee-delivery-submit-step{background:var(--ds-surface-muted);border:1px solid var(--ds-border);box-shadow:inset 3px 0 0 var(--primary-color)}
html[data-theme="dark"] .employee-delivery-submit-step .employee-delivery-step-heading h3,html[data-theme="dark"] .employee-delivery-submit-step .employee-delivery-step-heading strong{color:var(--ds-text)}
html[data-theme="dark"] .employee-delivery-submit-step .employee-delivery-step-heading p{color:var(--ds-text-muted)}
/* Task-detail metadata badges: semantic accents on compact dark surfaces. */
html[data-theme="dark"] .employee-task-meta-grid .employee-task-meta-pill{box-shadow:none}
html[data-theme="dark"] .employee-task-meta-grid .employee-task-status-pill.status-pending,html[data-theme="dark"] .employee-task-meta-grid .employee-task-priority-chip.priority-medium{color:var(--ds-warning);background:var(--ds-warning-soft);border-color:rgba(252,211,77,.35)}
html[data-theme="dark"] .employee-task-meta-grid .employee-task-status-pill.status-progress{color:var(--ds-info);background:var(--ds-info-soft);border-color:rgba(147,197,253,.32)}
html[data-theme="dark"] .employee-task-meta-grid .employee-task-status-pill.status-review{color:#c4b5fd;background:#2e1f58;border-color:rgba(196,181,253,.32)}
html[data-theme="dark"] .employee-task-meta-grid .employee-task-status-pill.status-revision,html[data-theme="dark"] .employee-task-meta-grid .employee-task-priority-chip.priority-high,html[data-theme="dark"] .employee-task-meta-grid .employee-task-priority-chip.priority-urgent{color:var(--ds-danger);background:var(--ds-danger-soft);border-color:rgba(252,165,165,.32)}
html[data-theme="dark"] .employee-task-meta-grid .employee-task-status-pill.status-completed,html[data-theme="dark"] .employee-task-meta-grid .employee-task-priority-chip.priority-low{color:var(--ds-success);background:var(--ds-success-soft);border-color:rgba(134,239,172,.3)}
/* Shared page title and breadcrumb structure. */
.app-page-header{margin:0 0 28px;padding:3px 0 0}.app-page-header h1{margin:0;color:var(--ds-text);font-size:28px;font-weight:750;letter-spacing:-.025em;line-height:1.16}.app-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;color:var(--ds-text-muted);font-size:11px;line-height:1.5}.app-breadcrumb a{color:var(--ds-text-muted);text-decoration:none}.app-breadcrumb a:hover,.app-breadcrumb a:focus-visible{color:var(--primary-color);text-decoration:none}.app-breadcrumb [aria-current="page"]{color:var(--ds-text);font-weight:600}.app-breadcrumb-separator{color:var(--ds-text-subtle);user-select:none}@media(max-width:640px){.app-page-header{margin-bottom:22px}.app-page-header h1{font-size:26px}.app-breadcrumb{gap:6px;font-size:11px}}
/* Global administration sidebar in dark mode. */
html[data-theme="dark"] .global-admin-sidebar{background:var(--ds-surface);box-shadow:inset -1px 0 0 var(--ds-border)}
html[data-theme="dark"] .global-sidebar-brand{border-bottom-color:var(--ds-border)}
html[data-theme="dark"] .global-sidebar-brand strong,html[data-theme="dark"] .global-sidebar-dashboard,html[data-theme="dark"] .global-sidebar-module>summary{color:var(--ds-text)}
html[data-theme="dark"] .global-sidebar-brand span,html[data-theme="dark"] .global-sidebar-label,html[data-theme="dark"] .global-sidebar-children a,html[data-theme="dark"] .global-sidebar-chevron{color:var(--ds-text-muted)}
html[data-theme="dark"] .global-sidebar-dashboard>i,html[data-theme="dark"] .global-sidebar-module-main>i{color:var(--ds-text-muted)}
html[data-theme="dark"] .global-sidebar-dashboard:hover,html[data-theme="dark"] .global-sidebar-module>summary:hover,html[data-theme="dark"] .global-sidebar-module.is-current-module>summary{background:var(--ds-surface-muted);color:var(--ds-text)}
html[data-theme="dark"] .global-sidebar-dashboard.active{background:rgba(16,185,129,.2);box-shadow:inset 3px 0 0 var(--primary-color)}
html[data-theme="dark"] .global-sidebar-children a:hover{background:var(--ds-surface-muted);color:var(--ds-text)}
html[data-theme="dark"] .global-sidebar-children a.active{background:rgba(16,185,129,.22);color:var(--ds-text);box-shadow:inset 2px 0 0 var(--primary-color)}
html[data-theme="dark"] .global-sidebar-scroll{scrollbar-color:var(--ds-border-strong) transparent}
html[data-theme="dark"] .global-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--ds-border-strong)}
/* Command palette: readable page names and dark selected state. */
html[data-theme="dark"] .command-palette-item,
html[data-theme="dark"] .command-palette-item-copy strong { color: var(--ds-text); }
html[data-theme="dark"] .command-palette-item-copy small,
html[data-theme="dark"] .command-palette-item-type,
html[data-theme="dark"] .command-palette-group-title { color: var(--ds-text-muted); }
html[data-theme="dark"] .command-palette-item:hover,
html[data-theme="dark"] .command-palette-item.is-selected { background: var(--ds-surface-muted); }
html[data-theme="dark"] .command-palette-item-icon { background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-border); }
/* Command palette interaction refinement. */
html[data-theme="dark"] .command-palette-item {
    border: 1px solid transparent;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html[data-theme="dark"] .command-palette-item:hover,
html[data-theme="dark"] .command-palette-item.is-selected {
    background: #25344a ;
    border-color: #3b506b;
    box-shadow: inset 3px 0 0 rgba(52, 211, 153, .8);
}
html[data-theme="dark"] .command-palette-item-icon {
    background: #111b2c ;
    color: #5eead4;
    box-shadow: inset 0 0 0 1px #31435c;
}
html[data-theme="dark"] .command-palette-item:hover .command-palette-item-icon,
html[data-theme="dark"] .command-palette-item.is-selected .command-palette-item-icon {
    background: #0d1625 ;
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .42);
}
/* Messages footer divider matches the chat composer border. */
html[data-theme="dark"] .messages-footer { border-top-color: var(--ds-border); }
html[data-theme="dark"] .messages-footer a:hover,
html[data-theme="dark"] .messages-footer a:focus-visible { background: var(--ds-surface-muted); }
/* Employee profile: keep every information card readable in Dark Theme. */
html[data-theme="dark"] .details-grid .detail-item {
    background: var(--ds-surface) ;
    border: 1px solid var(--ds-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
html[data-theme="dark"] .details-grid .detail-item span,
html[data-theme="dark"] .details-grid .detail-item strong,
html[data-theme="dark"] .profile-top-grid .form-card h2,
html[data-theme="dark"] .profile-top-grid .form-card h3,
html[data-theme="dark"] .profile-top-grid .form-card h4,
html[data-theme="dark"] .profile-top-grid .form-card p {
    color: var(--ds-text) ;
}
html[data-theme="dark"] .profile-top-grid .form-card .id-uploaded-success {
    background: var(--ds-surface-muted);
    border: 1px solid var(--ds-border);
}
html[data-theme="dark"] .profile-avatar img { border-color: var(--ds-border-strong); }
/* My Tasks filter counts: high-contrast, compact counters in Dark Theme. */
html[data-theme="dark"] .employee-task-filter-tabs strong {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    color: #f8fafc;
    background: #111c2e;
    border: 1px solid #43556e;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
html[data-theme="dark"] .employee-task-filter-tabs a:hover strong {
    background: #1c2b41;
    border-color: #5d7696;
}
html[data-theme="dark"] .employee-task-filter-tabs a.is-active strong {
    color: #fff;
    background: var(--primary-color);
    border-color: rgba(167, 243, 208, .55);
    box-shadow: 0 3px 8px rgba(5, 150, 105, .3);
}

/* Employee announcement banner: subdued, readable surface in Dark Theme. */
html[data-theme="dark"] .announcement-banner {
    background: linear-gradient(135deg, #202c3d 0%, #182739 100%);
    border-color: #75612a;
    box-shadow: inset 3px 0 0 #d6a82f, 0 10px 24px rgba(0, 0, 0, .16);
}
html[data-theme="dark"] .announcement-banner .announcement-header {
    color: #fde68a;
}
html[data-theme="dark"] .announcement-banner .announcement-body {
    color: var(--ds-text);
}
html[data-theme="dark"] .announcement-banner .announcement-link {
    color: #6ee7b7;
}
html[data-theme="dark"] .announcement-banner .announcement-link:hover,
html[data-theme="dark"] .announcement-banner .announcement-link:focus-visible {
    color: #a7f3d0;
    text-decoration: underline;
}
/* Project Status channel navigation uses theme surfaces. */
html[data-theme="dark"] .status-portal{--portal-bg:var(--ds-surface-page);--portal-card:var(--ds-surface);--portal-text:var(--ds-text);--portal-muted:var(--ds-text-muted);--portal-border:var(--ds-border);--portal-soft:var(--ds-surface-muted);--portal-accent:#60a5fa}html[data-theme="dark"] .status-portal-phase-content{background:var(--ds-surface)}
html[data-theme="dark"] .status-portal-channel-nav a{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text-muted)}
html[data-theme="dark"] .status-portal-channel-nav a.is-active{background:var(--ds-info-soft);border-color:#3b82f6;color:var(--ds-info)}

/* Client-status management cards: keep the project settings surfaces in the dark system palette. */
html[data-theme="dark"] .client-status-shell,
html[data-theme="dark"] .client-status-shell .table-card,
html[data-theme="dark"] .client-status-channel-row,
html[data-theme="dark"] .client-status-channel-phase-container,
html[data-theme="dark"] .client-status-project-picker {
    background:var(--ds-surface);
    border-color:var(--ds-border);
    color:var(--ds-text);
    box-shadow:var(--ds-shadow-sm);
}
html[data-theme="dark"] .client-status-shell .client-status-channel-phase-container.has-channel {
    background:linear-gradient(135deg,var(--ds-surface),rgba(16,185,129,.08));
    border-color:rgba(16,185,129,.3);
}
html[data-theme="dark"] .client-status-shell h2,
html[data-theme="dark"] .client-status-shell h3,
html[data-theme="dark"] .client-status-shell h4,
html[data-theme="dark"] .client-status-shell .form-label,
html[data-theme="dark"] .client-status-shell .client-status-channel-form label,
html[data-theme="dark"] .client-status-shell .client-status-channel-fields label {
    color:var(--ds-text);
}
html[data-theme="dark"] .client-status-shell .text-muted,
html[data-theme="dark"] .client-status-shell .form-text,
html[data-theme="dark"] .client-status-shell .client-status-channel-phase-container-header p,
html[data-theme="dark"] .client-status-shell .client-status-channel-phase-count {
    color:var(--ds-text-muted)!important;
}

/* Project status snapshot sidebar: match its dark-theme card surface to the rest of the workspace. */
html[data-theme="dark"] .client-status-widget {
    background:linear-gradient(180deg,var(--ds-surface) 0%,var(--ds-surface-muted) 100%);
    border-color:var(--ds-border);
    color:var(--ds-text);
    box-shadow:var(--ds-shadow-md);
}
html[data-theme="dark"] .client-status-widget .client-status-widget-label,
html[data-theme="dark"] .client-status-widget .client-status-widget-progress-row,
html[data-theme="dark"] .client-status-widget .client-status-widget-stats dt,
html[data-theme="dark"] .client-status-widget .client-status-widget-note {
    color:var(--ds-text-muted);
}
html[data-theme="dark"] .client-status-widget h3,
html[data-theme="dark"] .client-status-widget .client-status-widget-progress-row strong,
html[data-theme="dark"] .client-status-widget .client-status-widget-stats dd {
    color:var(--ds-text);
}
html[data-theme="dark"] .client-status-widget .client-status-widget-progress {
    background:var(--ds-border);
}
/* Soften the dense summary-panel outline in project status dark mode. */
html[data-theme="dark"] .client-status-overview-form .client-status-summary-grid {
    background:var(--ds-surface-muted);
    border-color:rgba(148,163,184,.24);
    box-shadow:none;
}
html[data-theme="dark"] .client-status-overview-form .client-status-summary-item {
    border-right-color:rgba(148,163,184,.18);
}
html[data-theme="dark"] .client-status-overview-form .client-status-save-project {
    border-top-color:rgba(148,163,184,.16);
}
/* Administration profile image panel. */
html[data-theme="dark"] .admin-profile-avatar-panel {
    background:linear-gradient(135deg,var(--ds-surface) 0%,var(--ds-surface-muted) 100%);
    border:1px solid var(--ds-border);
    box-shadow:var(--ds-shadow-sm);
}
html[data-theme="dark"] .admin-profile-avatar-copy h3 { color:var(--ds-text); }
html[data-theme="dark"] .admin-profile-avatar-copy p,
html[data-theme="dark"] .admin-profile-avatar-actions > span { color:var(--ds-text-muted); }
/* Task instructions readability in dark mode */
html[data-theme="dark"] .task-description-card h3,
html[data-theme="dark"] .task-description-card h3 i,
html[data-theme="dark"] .task-description-content,
html[data-theme="dark"] .task-description-content * {
    color: #fff;
}
html[data-theme="dark"] .status-badge.status-pending{color:#fcd34d;background:#3f3211;border-color:#8f741f}
html[data-theme="dark"] .status-badge.status-review{color:#93c5fd;background:#152f4f;border-color:#315f91}
html[data-theme="dark"] .status-badge.debt-status-open{color:#93c5fd;background:#152f4f;border:1px solid #315f91}
html[data-theme="dark"] .status-badge.debt-status-partial{color:#fcd34d;background:#3f3211;border:1px solid #8f741f}
html[data-theme="dark"] .status-badge.debt-status-paid{color:#86efac;background:#123a2b;border:1px solid #277354}
html[data-theme="dark"] .status-badge.debt-status-cancelled,html[data-theme="dark"] .status-badge.status-overdue{color:#fca5a5;background:#3c1d22;border:1px solid #7f3038}
html[data-theme="dark"] .status-badge.status-draft{color:#cbd5e1;background:#29364a;border:1px solid #53647d}
html[data-theme="dark"] .project-tab-nav{background:var(--ds-surface-muted);border-color:var(--ds-border-strong);border-top-color:var(--primary-color);box-shadow:var(--ds-shadow-sm),inset 0 1px 0 rgba(255,255,255,.03)}
html[data-theme="dark"] .project-tab-link:not(.is-active){color:var(--ds-text);background:var(--ds-surface);border-color:var(--ds-border);box-shadow:none}
html[data-theme="dark"] .project-tab-link:not(.is-active) .project-tab-icon{background:var(--ds-success-soft)}
html[data-theme="dark"] .project-tab-link:not(.is-active):hover{color:var(--ds-success);background:var(--ds-surface-elevated);border-color:var(--primary-color);box-shadow:var(--ds-shadow-sm)}
html[data-theme="dark"] .project-tab-link:not(.is-active):hover .project-tab-icon{background:color-mix(in srgb,var(--primary-color) 22%,var(--ds-surface))}
html[data-theme="dark"] .client-status-bulk-status{background:var(--ds-surface-muted);border-color:var(--ds-border-strong);color:var(--ds-text-muted)}
html[data-theme="dark"] .client-status-bulk-status .client-status-select-all{color:var(--ds-text)}
html[data-theme="dark"] .client-status-bulk-status [data-selected-items-count]{color:var(--ds-text-muted)}
html[data-theme="dark"] .client-status-bulk-status .form-select{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .client-status-drag-handle{background:var(--ds-surface-muted);border:1px solid var(--ds-border);color:var(--ds-text-muted);box-shadow:none}
html[data-theme="dark"] .client-status-drag-handle:hover{background:var(--ds-surface-elevated);border-color:var(--ds-border-strong);color:var(--ds-success)}
html[data-theme="dark"] .client-status-item-row .badge.text-bg-success{color:#dcfce7!important;background:#166534!important;border:1px solid #22c55e}
html[data-theme="dark"] .task-due-display{color:var(--ds-text);background:var(--ds-surface-muted);border-color:var(--ds-border);box-shadow:none}
html[data-theme="dark"] .task-due-time{color:var(--ds-text-muted)}
html[data-theme="dark"] .task-due-display.is-overdue{background:#3c1d22;border-color:#7f3038}
html[data-theme="dark"] .theme-toggle-btn,html[data-theme="dark"] .messages-btn,html[data-theme="dark"] .notification-btn,html[data-theme="dark"] .user-dropdown-btn,html[data-theme="dark"] .module-switcher-btn,html[data-theme="dark"] .header-quick-nav-more-btn,html[data-theme="dark"] .header-quick-nav-add{background:var(--ds-surface);border-color:var(--ds-border);color:var(--ds-text)}
html[data-theme="dark"] .theme-toggle-btn:hover,html[data-theme="dark"] .messages-btn:hover,html[data-theme="dark"] .notification-btn:hover,html[data-theme="dark"] .user-dropdown-btn:hover,html[data-theme="dark"] .module-switcher-btn:hover,html[data-theme="dark"] .header-quick-nav-more-btn:hover,html[data-theme="dark"] .header-quick-nav-add:hover{background:var(--ds-surface-muted);border-color:var(--ds-border-strong)}
html[data-theme="dark"] .status-portal-phase-toggle{background:var(--ds-surface)}
html[data-theme="dark"] .status-portal-phase-toggle:hover{background:var(--ds-surface-muted)}
.theme-toggle-btn{position:relative;display:inline-grid;width:44px;height:44px;padding:0;place-items:center;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#334155;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.theme-toggle-btn:hover{background:#f8fafc;border-color:#cbd5e1}
.theme-toggle-btn:focus-visible{outline:3px solid rgba(16,185,129,.28);outline-offset:2px}
.theme-toggle-btn i{font-size:18px}