/* Semantic dark surfaces apply to every section, including dialogs and native controls. */
:root{color-scheme:light}
:root[data-theme=dark]{
 color-scheme:dark;--ad-bg:#11171e;--ad-surface:#1b242e;--ad-text:#e5eaf0;--ad-muted:#abb9c8;--ad-line:#435363;
 --ad-primary:#087f8c;--ad-primary-hover:#06656f;--ad-selected:#183c43;--ad-accent:#a5a0ff;
 --ad-green:#72dcab;--ad-green-soft:#163e31;--ad-orange:#ffd18a;--ad-orange-soft:#45351e;
 --ad-purple:#d6b7ff;--ad-purple-soft:#382a4c;--ad-red:#ffacb7;--ad-red-soft:#472a36;--ad-neutral:#293541;
 background:var(--ad-bg);color:var(--ad-text)
}
#themeToggle{white-space:nowrap}
:root[data-theme=dark] body{background:var(--ad-bg);color:var(--ad-text)}
:root[data-theme=dark] :is(#portal,#finance){color:var(--ad-text)}
:root[data-theme=dark] :is(input,textarea,select,option,dialog,.taskcard,.mobile-task-card,.movement,.tablewrap,.tasktablewrap,#webLogin,#webSignup,.people-card,.tag-picker,.column-option){background:var(--ad-surface);color:var(--ad-text);border-color:var(--ad-line)}
:root[data-theme=dark] :is(input,textarea)::placeholder{color:#93a5b8;opacity:1}
:root[data-theme=dark] :is(input,textarea,select):hover{border-color:#8b9fb2}
:root[data-theme=dark] :is(.secondary,.appname button,.taskscopes #tableSettingsButton,#refresh){background:var(--ad-surface);color:var(--ad-text);border-color:var(--ad-line)}
:root[data-theme=dark] :is(.secondary,.appname button,#refresh):hover:not(:disabled){background:#2b3948;border-color:#8b9fb2}
:root[data-theme=dark] :is(.appbar nav button,.taskscopes button){background:transparent;color:var(--ad-muted)}
:root[data-theme=dark] :is(.appbar nav button.selected,.taskscopes button.active){background:var(--ad-selected);color:#91e4e9;border-color:var(--ad-primary)}
:root[data-theme=dark] :is(.appbar nav button,.taskscopes button):hover:not(:disabled){background:#2b3948;color:var(--ad-text)}
:root[data-theme=dark] .taskscopes #newTask{background:var(--ad-primary);color:#fff}
:root[data-theme=dark] .taskscopes #newTask:hover{background:var(--ad-primary-hover)}
:root[data-theme=dark] :is(a,summary,.tablelink,.tasklink){color:#8ddfe5}
:root[data-theme=dark] .tasktable th{background:#26333f;color:var(--ad-muted);border-color:var(--ad-line)}
:root[data-theme=dark] .tasktable td{background:var(--ad-surface);color:var(--ad-text);border-color:#354555}
:root[data-theme=dark] .tasktable .taskgroup:hover td{background:#213c43}
:root[data-theme=dark] :is(.tasktable .done td,.tasktable .done .tabletitle,.tasktable .done .tableperson,.mobile-task-card.done){background:#202b34;color:#a7b4c1}
:root[data-theme=dark] .tasktable .tabletitle{color:var(--ad-text)}
:root[data-theme=dark] :is(.task-description-preview,.mobile-task-description,.tableextra,.taskdates,.schedule-fact dt,.schedule-actions p,.schedule-state){color:var(--ad-muted)}
:root[data-theme=dark] :is(.tableextra strong,.brand span,.mobile-task-title){color:var(--ad-text)}
:root[data-theme=dark] :is(.submissionbox,.submissioncomment,.person-details,.people-details,.settings-layout>section,.schedule-state,.schedule-action-help){background:#25313e;border-color:var(--ad-line)}
:root[data-theme=dark] :is(.tag-chip,.pill){background:#373052;color:#e0d2ff}
:root[data-theme=dark] .filechip{background:#293d54;color:#d2e3ff}
:root[data-theme=dark] :is(.reviewbadge,.statuspill){background:var(--status-bg,var(--ad-purple-soft));color:var(--status-ink,var(--ad-purple))}
:root[data-theme=dark] .reviewcomment{background:var(--ad-orange-soft);color:var(--ad-orange);border-color:#ab8550}
:root[data-theme=dark] [data-task-status=new]{--status-bg:#183e66;--status-ink:#acd4ff;--status-accent:#7ab9ff}
:root[data-theme=dark] [data-task-status=cancelled]{--status-bg:#34414e;--status-ink:#c5d0db;--status-accent:#99a8b8}
:root[data-theme=dark] :is(.tasktable select,.mobile-task-overview select,.taskcontrols select[data-task-status]){background:var(--status-bg,var(--ad-selected));color:var(--status-ink,#a5e8eb)}
:root[data-theme=dark] .taskgroup.is-selected td,:root[data-theme=dark] .taskgroup.selected td,:root[data-theme=dark] .mobile-task-card.is-selected{background:#214c59;color:var(--ad-text)}
:root[data-theme=dark] :is(.bulk-actions,.bulk-toolbar,#taskSelectionBar,#bulkToolbar){background:#243b46;color:var(--ad-text);border-color:#6aa9b5}
:root[data-theme=dark] :is(#reconcile,.schedule-state.is-active){background:var(--ad-green-soft);color:var(--ad-green);border-color:#4c8d73}
:root[data-theme=dark] :is(.schedule-actions,.schedule-danger,dialog>.heading,dialog form>.heading,.mobile-task-card .tableactions,.role-checkboxes,.tag-picker-list){border-color:var(--ad-line)}
:root[data-theme=dark] .schedule-danger button{color:var(--ad-red);border-color:#9c6170}
:root[data-theme=dark] .tag-picker-option:hover{background:var(--ad-selected)}
:root[data-theme=dark] dialog::backdrop{background:#060b12b8}
:root[data-theme=dark] :is(button,a,summary):focus-visible{outline-color:#8ddfe5}
:root[data-theme=dark] input:checked{accent-color:#45bdc8}
:root[data-theme=dark] .tasktable .taskgroup.task-selected td,:root[data-theme=dark] .tasktable .taskgroup.task-selected:hover td,:root[data-theme=dark] .mobile-task-card.task-selected{background:#214c59!important;color:var(--ad-text);outline-color:#76cbd3}
:root[data-theme=dark] #bulkTaskActions{background:#243b46;color:var(--ad-text);border-color:#6aa9b5}
:root[data-theme=dark] :is(.tag-picker-title,.task-date-range .hint,.person-status,.person-contacts){color:var(--ad-muted)}
:root[data-theme=dark] :is(.task-date-range,.person-access-grid,.person-access,.user-role-box){border-color:var(--ad-line)}
:root[data-theme=dark] #taskTable select[data-task-status],:root[data-theme=dark] .mobile-task-overview select[data-task-status]{background:var(--status-bg,var(--ad-selected));color:var(--status-ink,var(--ad-text))}
@media(max-width:700px){
 .appname{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 .appname>.brand,.appname>nav,.appname>.header-languages{flex:1 1 100%;max-width:100%;min-width:0}
 .appname>#identity{flex:1 1 100%;max-width:100%;min-width:0;width:auto;margin:0;overflow-wrap:normal}
 .appname>#primaryLanguageControl{flex:1 1 130px;min-width:0;max-width:100%}
 .appname>button{flex:0 0 auto}
}

/* Header shares the page width and a single control size in either theme. */
.appbar{padding:12px 24px}
.appbar>.appname{max-width:1452px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.appname>.brand{margin:0 8px 0 0;flex:0 0 auto}
.appname>nav{order:0;flex:1 1 auto;min-width:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.appname>#primaryLanguageControl{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;font-size:11px;color:var(--ad-muted)}
.appname>#primaryLanguageControl select{width:104px;min-width:0;height:32px;padding:5px 8px;font-size:11px;border-radius:6px;background:var(--ad-surface);color:var(--ad-text);border:1px solid var(--ad-line)}
.appname>button,.appname>nav button{min-height:32px;padding:6px 10px;border-radius:6px;font-size:11px;white-space:nowrap}
.appname>#identity{flex:0 1 auto;width:auto;max-width:230px;min-width:0;margin:0;font-size:11px;text-align:right;overflow-wrap:anywhere}
@media(max-width:1100px){.appname>nav{order:1;flex-basis:100%}.appname>.brand{margin-right:auto}}
@media(max-width:700px){
 .appbar{padding:10px 12px}
 .appname>.brand{flex:1 1 auto;max-width:100%;margin:0}
 .appname>nav{flex:1 1 100%;max-width:100%;order:1}
 .appname>#primaryLanguageControl{flex:0 0 auto}
 .appname>#identity{flex:1 1 100%;max-width:100%;text-align:left}
 .appname>button{flex:0 1 auto}
}
.appname>button{background:var(--ad-surface);color:var(--ad-text);border:1px solid var(--ad-line)}
.appname>nav button{background:transparent;border:1px solid transparent;color:var(--ad-muted)}
.appname>nav button.selected{background:var(--ad-selected);color:var(--ad-primary-hover);border-color:transparent}

:root[data-theme=dark] .taskscopes #newFolder,:root[data-theme=dark] .taskscopes .filter-tools button{background:var(--ad-surface);color:var(--ad-text);border-color:var(--ad-line)}
:root[data-theme=dark] .taskscopes #newFolder:hover,:root[data-theme=dark] .taskscopes .filter-tools button:hover{background:#2b3948}

/* Use available display width, retaining the same small page gutters. */
#portal{width:100%;max-width:none}
.appbar>.appname{max-width:none;width:100%}
#taskPane,.tasktablewrap{min-width:0;max-width:100%}
#taskTable{min-width:100%}
.brand-logo{display:block;flex-shrink:0;width:34px;height:34px}
#primaryLanguageControl{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:16px 0 8px;font-size:12px;color:var(--ad-muted)}
#primaryLanguageControl select{width:100%}
:root:not([data-theme=dark]) .appname>#themeToggle{background:#1b242e;color:#e5eaf0;border-color:#435363;color-scheme:dark}
:root:not([data-theme=dark]) .appname>#themeToggle:hover{background:#2b3948;border-color:#8b9fb2}
:root[data-theme=dark] .appname>#themeToggle{background:#fff;color:#323338;border-color:#d0d4e4;color-scheme:light}
:root[data-theme=dark] .appname>#themeToggle:hover{background:#f0f2f7;border-color:#a2a5b5}
.notification-badge{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:10px;background:var(--ad-primary);color:#fff;font-size:10px;min-width:18px}
#notificationsPane{background:var(--ad-surface);border:1px solid var(--ad-line);border-radius:12px;padding:18px;min-width:0}
#notificationsPane .heading{flex-wrap:wrap;gap:12px}
.notification-table{table-layout:fixed;width:100%}.notification-table th:nth-child(2){width:50%}
.notification-table th,.notification-table td{padding:12px;text-align:left;border-color:var(--ad-line);overflow-wrap:anywhere;color:var(--ad-text)}
.notification-table th{background:var(--ad-neutral);text-transform:none;letter-spacing:normal}
.notification-row{cursor:pointer}.notification-row.unread{background:var(--ad-selected)}
.notification-row:hover{outline:1px solid var(--ad-primary);outline-offset:-1px}.notification-row:focus-visible{outline:2px solid var(--ad-primary);outline-offset:-2px}
.notification-description{font-size:12px;line-height:1.5;margin:6px 0 0;white-space:pre-wrap;color:var(--ad-muted)}
#notificationError{color:var(--ad-red)}
@media(max-width:700px){#notificationsPane{padding:12px}.notification-table th,.notification-table td{padding:7px;font-size:11px}.notification-table th:nth-child(2){width:42%}.notification-table button{padding:6px;font-size:10px;white-space:normal}.notification-description{font-size:11px}}
@media(max-width:700px){
 .notification-table,.notification-table tbody{display:block;width:100%}
 .notification-table thead{display:none}
 .notification-table .notification-row{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--ad-line)}
 .notification-table td{display:block;width:auto;border:0;padding:8px 10px;font-size:12px}
 .notification-table td:nth-child(1){grid-column:1;font-weight:600}
 .notification-table td:nth-child(3){grid-column:2;grid-row:1;text-align:right;font-size:10px;max-width:120px;color:var(--ad-muted)}
 .notification-table td:nth-child(2){grid-column:1/-1;grid-row:2}
 .notification-table td:nth-child(4){grid-column:1/-1;grid-row:3}
 .notification-table button{font-size:11px;padding:7px 10px;white-space:nowrap}
 .notification-description{font-size:12px}
}

/* The task workspace fits the viewport; only its controls and list can scroll. */
body.task-workspace{height:100dvh;overflow:hidden}
.task-workspace #portal{padding-bottom:12px}
.task-workspace #taskPane{height:var(--workspace-height);display:flex;flex-direction:column;position:relative;min-height:0;padding-bottom:0;overflow:hidden}
.task-workspace-controls{flex:0 1 auto;min-height:0;overflow:auto;max-height:48%;scrollbar-gutter:stable}
.task-workspace-controls .taskscopes{margin-top:12px}
.task-workspace .tasktablewrap{flex:1 1 0;min-height:0;max-height:none;margin-bottom:10px;overflow:auto;scrollbar-gutter:stable}
.tasktablewrap::-webkit-scrollbar{width:12px;height:14px}
.tasktablewrap::-webkit-scrollbar-track{background:var(--ad-neutral)}
.tasktablewrap::-webkit-scrollbar-thumb{background:var(--ad-muted);border:3px solid var(--ad-neutral);border-radius:8px}
.tasktablewrap::-webkit-scrollbar-corner{background:var(--ad-neutral)}
.task-workspace #taskPane .selection-toolbar{position:absolute;z-index:6;bottom:32px;left:12px;right:24px;margin:0;max-height:45%;overflow:auto;box-shadow:0 4px 20px #0003}
.task-workspace #taskPane:has(.selection-toolbar:not([hidden])) .tasktablewrap{scroll-padding-bottom:160px}
.task-workspace #taskPane:has(.selection-toolbar:not([hidden])) .tasktablewrap::after{content:"";display:block;height:160px;flex:none}
@media(max-width:700px){
 .task-workspace-controls{max-height:48%}
 .task-workspace #mobileTaskCards{flex:1 1 0;min-height:0;overflow:auto;display:block;padding:0 0 10px}
 .task-workspace #mobileTaskCards .mobile-task-card{margin-bottom:10px}
 .task-workspace #taskPane .selection-toolbar{left:0;right:0;bottom:10px;max-height:55%}
 .task-workspace #taskPane:has(.selection-toolbar:not([hidden])) #mobileTaskCards{scroll-padding-bottom:240px}
 .task-workspace #taskPane:has(.selection-toolbar:not([hidden])) #mobileTaskCards::after{content:"";display:block;height:240px}
}
/* A persistent horizontal control also works when macOS hides native scrollbars. */
#taskHorizontalScroll{flex:0 0 16px;width:100%;height:16px;min-height:16px;margin:0 0 10px;padding:0;border:0;border-radius:8px;appearance:none;background:var(--ad-neutral);cursor:ew-resize;accent-color:var(--ad-muted)}
#taskHorizontalScroll::-webkit-slider-runnable-track{height:12px;border-radius:8px;background:var(--ad-neutral)}
#taskHorizontalScroll::-webkit-slider-thumb{appearance:none;width:64px;height:12px;border-radius:8px;background:var(--ad-muted);border:2px solid var(--ad-neutral)}
#taskHorizontalScroll::-moz-range-thumb{width:64px;height:10px;border-radius:8px;background:var(--ad-muted);border:1px solid var(--ad-line)}
.task-workspace .tasktablewrap{margin-bottom:4px}
@media(max-width:700px){#taskHorizontalScroll{display:none}}
:root[data-theme=dark]{--ad-burning-bg:#412c32;--ad-burning-edge:#c67d80}

/* Keep navigation reachable at large account sizes and short viewports. */
.task-workspace .appbar{max-height:35dvh;overflow:auto}
.task-workspace #taskNavigation{max-height:22dvh;overflow:auto;overscroll-behavior:contain}

/* The persistent range owns horizontal scrolling; retain the native vertical bar. */
@media(min-width:701px){.task-workspace .tasktablewrap{overflow-x:hidden}}
/* Shared choice fields for filters, task forms and task status controls. */
.search-filter-field .search-filter-control input{margin:0;border-radius:6px 0 0 6px;padding:8px 9px;font-size:12px;width:100%}
.search-filter-field .search-filter-toggle{min-width:28px;padding:0;border-left:0}
.search-filter-field .search-filter-menu[popover]{position:fixed;inset:auto;margin:0;box-sizing:border-box;max-width:calc(100vw - 20px)}
.search-filter-menu .search-filter-option{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px;font-size:12px;cursor:pointer;border-radius:5px;line-height:1.4;color:var(--ad-text)}
.search-filter-menu .search-filter-option:hover,.search-filter-menu .search-filter-option:focus-within{background:var(--ad-selected)}
.search-filter-menu .search-filter-option input{width:auto;flex:none;margin:2px 0 0;padding:0}
.search-filter-menu .search-filter-option span{min-width:0;overflow-wrap:anywhere}
.search-filter-control:has(input:disabled){opacity:.65}
.choice-compact{width:100%;min-width:0}.choice-compact .search-filter-control input{font-size:11px;padding:7px 5px}.choice-compact .filter-choices{display:none}
.tasktable .choice-compact input{min-width:0;width:100%}
.tasktable .choice-compact .search-filter-toggle{min-width:20px;flex-basis:20px;font-size:10px}
.tasktable .choice-compact .search-filter-clear{display:none}
@media(max-width:700px){.search-filter-field .search-filter-control input{font-size:12px}.choice-compact .search-filter-control input{font-size:10px;padding:7px 3px}}
.choice-compact[data-task-status] .search-filter-control :is(input,button){background:var(--status-bg,var(--ad-selected));color:var(--status-ink,var(--ad-text));border-color:transparent}
.search-filter-control>.search-filter-toggle{margin:0;align-self:stretch}
.search-filter-field .filter-choice{margin:0}
.choice-single input[type=search]::-webkit-search-cancel-button{display:none}
.selection-controls>.search-filter-field{width:160px;flex:0 0 160px}
.selection-controls>.search-filter-field .search-filter-control :is(input,button){height:36px}
@media(max-width:700px){.selection-controls>.search-filter-field{grid-column:1/-1;width:100%;min-width:0}}
.search-filter-menu[popover]{min-width:0}
.selection-controls .choice-compact .search-filter-clear{display:none}
/* Subsystem navigation is an overlay, outside the header's scroll clipping. */
#subsystemMenu{position:fixed;inset:auto;margin:0;box-sizing:border-box;max-width:calc(100vw - 24px);overflow:auto;overscroll-behavior:contain;z-index:1000}
#subsystemMenu::backdrop{background:transparent;pointer-events:none}

/* On phones, the open action shares the content row instead of consuming a third row. */
@media(max-width:700px){.notification-table .notification-row{grid-template-columns:minmax(0,1fr) fit-content(45%)}.notification-table td:nth-child(2){grid-column:1;grid-row:2}.notification-table td:nth-child(4){grid-column:2;grid-row:2;align-self:start;text-align:right}.notification-table button{max-width:100%;white-space:normal;overflow-wrap:anywhere}.notification-table td:nth-child(3){max-width:100%}}