/* Shared colour roles for every GoFlow page. Keep layout in component styles. */
body, body[class] {
  color-scheme: light;
  --bg: #f7f9fd;
  --text: #263451;
  --surface: #ffffff;
  --surface-subtle: #f0f4fa;
  --border: #d8dfeb;
  --input-border: #7a879d;
  --muted: #53637c;
  --accent: #594cc4;
  --accent-bg: #eeecff;
  --accent-border: #8b80d9;
  --danger: #ac354f;
  --danger-bg: #fff0f3;
  --danger-border: #cb7184;
  --warning: #795800;
  --warning-bg: #fff3c4;
  --success: #28664d;
  --success-bg: #e9f5ef;
  --brand: #6655ce;
  --brand-text: #ffffff;
  --focus: #6655ce;
  /* Aliases keep existing board, settings and conversation components aligned. */
  --panel: var(--surface);
  --control-bg: var(--surface);
  --control-border: var(--input-border);
  --control-text: var(--muted);
  --accent-text: var(--accent);
  --tag-bg: var(--surface-subtle);
  --tag-text: var(--muted);
  --danger-text: var(--danger);
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] body, body.dark, body.theme-dark {
  color-scheme: dark;
  --bg: #0f172a;
  --text: #edf2ff;
  --surface: #1b2940;
  --surface-subtle: #24344f;
  --border: #3b4c68;
  --input-border: #7789a8;
  --muted: #b8c5dc;
  --accent: #cec9ff;
  --accent-bg: #302e52;
  --accent-border: #9489d9;
  --danger: #f5a6b7;
  --danger-bg: #432b3b;
  --danger-border: #ba7389;
  --warning: #ebcf7d;
  --warning-bg: #403921;
  --success: #94d4b9;
  --success-bg: #203e38;
  --focus: #b8adff;
}
html[data-theme="tech"] body, body.theme-tech {
  color-scheme: dark;
  --bg: #071d2a;
  --text: #e0f2fe;
  --surface: #102e40;
  --surface-subtle: #183b50;
  --border: #395d72;
  --input-border: #779bac;
  --muted: #b2cbd9;
  --accent: #8de4f4;
  --accent-bg: #143d4d;
  --accent-border: #549dac;
  --danger: #f5a6b7;
  --danger-bg: #432b3b;
  --danger-border: #ba7389;
  --warning: #ebcf7d;
  --warning-bg: #403921;
  --success: #94d4b9;
  --success-bg: #203e38;
  --focus: #8de4f4;
}
html[data-theme="calm"] body, body.theme-calm {
  color-scheme: light;
  --bg: #f5f2ec;
  --text: #3e382f;
  --surface: #fffdf8;
  --surface-subtle: #eee9de;
  --border: #d8d0c1;
  --input-border: #8c8070;
  --muted: #655e52;
  --accent: #5e513e;
  --accent-bg: #eae2d3;
  --accent-border: #95836b;
  --focus: #685638;
}
/* Shared surfaces, controls and readable status colours. */
body[class] .app { background: var(--bg); color: var(--text); }
body[class] header { background: var(--surface); border-color: var(--border); }
body[class] .brand-icon, body .brand-mark { background: var(--brand); color: var(--brand-text); }
body a { color: var(--accent); }
body[class] #viewModalBackdrop a { color: var(--accent); }
body[class] .page-heading h2 { color: var(--text); }
body input, body select, body textarea,
body[class] :is(.app, .modal, dialog) :is(input, select, textarea) {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
body input::placeholder, body textarea::placeholder { color: var(--muted); opacity: 1; }
body :is(input, select, textarea, button, summary, a):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
body :is(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
body[class] :is(.modal, dialog.workflow-dialog) {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border);
}
body[class] :is(.modal-footer #cancelEditModal) {
  background: var(--surface) !important; color: var(--muted) !important; border-color: var(--input-border) !important;
}
body[class] :is(button.primary, #sprintBtn, .modal-footer button:not(.danger):not(#cancelEditModal)) {
  background: var(--accent-bg) !important; color: var(--accent) !important; border-color: var(--accent-border) !important;
}
body[class] :is(button.deny, .modal-footer button.danger) {
  background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-border) !important;
}
body[class] :is(.priority-high, .pill.overdue, .status-suspended, .status-revoked, .status-removed) {
  background: var(--danger-bg) !important; color: var(--danger) !important;
}
body[class] :is(.priority-medium, .pill.due-soon, .status-pending) {
  background: var(--warning-bg) !important; color: var(--warning) !important;
}
body[class] :is(.priority-low, .status-active) {
  background: var(--success-bg) !important; color: var(--success) !important;
}
body[class] :is(.column, .request-summary, .priority-options span) {
  background: var(--surface-subtle); color: var(--text); border-color: var(--border);
}
body[class] .card { background: var(--surface); color: var(--text); border-color: var(--border); }
body[class] .card-prioritized { background: var(--accent-bg); }
body[class] .card:hover { border-color: var(--accent-border); }
body[class] .priority-options input:checked + span {
  background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border);
}
body[class] .priority-options input:focus-visible + span { outline-color: var(--focus); }
body[class] :is(.card-desc, .product-line, .card-category, .card-date, .detail-context,
  .workflow-dialog p, .workflow-dialog .optional-fields, .field-hint, .request-summary small,
  .request-summary span, .page-heading p, .breadcrumb, .control-bar .hint, .empty-lane,
  #saveNotice, #importWarnings, #viewModalBackdrop .card-meta) { color: var(--muted); }
body[class] .request-type { background: var(--accent-bg); color: var(--accent); }
body[class] .workflow-dialog .error { color: var(--danger); }
body[class] :is(.card-footer, .triage-actions, .modal-footer, .workflow-dialog .actions,
  #viewModalBackdrop .card-meta, #importPreview, .card-collaboration, .inbox-entry) { border-color: var(--border); }
body[class] footer { background: var(--bg); color: var(--muted); border-color: var(--border); }
body[class] .conversation-comment { background: var(--surface-subtle); border-color: var(--border); }
body[class] .conversation-comment blockquote { border-color: var(--accent-border); }
body[class] .collaboration-heading button[aria-pressed=true] {
  background: var(--accent-bg) !important; color: var(--accent) !important; border-color: var(--accent-border) !important;
}
body[class].save-blocked #saveNotice { background: var(--warning-bg); color: var(--warning); }
body[class] .card.drop-before { box-shadow: 0 -4px 0 var(--focus); }
body[class] .card.drop-after { box-shadow: 0 4px 0 var(--focus); }
.card-list, .compact-row, .date-bucket { color: var(--text); }
body button, body .button-link { border-color: var(--input-border); }
body button:hover:not(:disabled), body .button-link:hover { border-color: var(--accent-border); }

/* Paint the complete canvas, including short and loading pages. */
html:has(body.dark),html:has(body.theme-dark){background:#0f172a}
html:has(body.theme-tech){background:#071d2a}
html:has(body.theme-calm){background:#f5f2ec}
body{min-height:100vh}

/* One native select treatment across pages, board controls and dialogs. */
body,body[class]{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%2353637c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-theme="dark"] body,html[data-theme="tech"] body,body.dark,body.theme-dark,body.theme-tech{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23b8c5dc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body select:not([multiple]):is(:not([size]),[size="1"]),
body[class] :is(.app,.modal,dialog) select:not([multiple]):is(:not([size]),[size="1"]) {
  -webkit-appearance:none;
  appearance:none;
  padding-inline-end:36px!important;
  background-image:var(--select-chevron)!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:12px 12px!important;
}
@media(forced-colors:active){
  body select:not([multiple]):is(:not([size]),[size="1"]),
  body[class] :is(.app,.modal,dialog) select:not([multiple]):is(:not([size]),[size="1"]){
    -webkit-appearance:auto;appearance:auto;background-image:none!important;padding-inline-end:12px!important
  }
}