/* Per-window color themes. Loaded last so it can beat OS skins (#os.theme-*)
   and hardcoded app hex. Token values come from js/platform/app-color-theme.js. */

#os .window[data-app-color-theme],
body .window[data-app-color-theme] {
  color: var(--ink) !important;
  background: var(--win-bg) !important;
  border-color: var(--win-border) !important;
  scrollbar-color: var(--faint) var(--surface-2);
}

#os .window[data-app-color-theme].focused,
body .window[data-app-color-theme].focused {
  border-color: var(--win-border-focus) !important;
}

#os .window[data-app-color-theme] .window-titlebar,
body .window[data-app-color-theme] .window-titlebar {
  background: var(--titlebar-bg) !important;
  border-bottom-color: var(--win-border) !important;
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] .window-title-label,
#os .window[data-app-color-theme] .window-title-text,
body .window[data-app-color-theme] .window-title-label,
body .window[data-app-color-theme] .window-title-text {
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] .win-btn,
body .window[data-app-color-theme] .win-btn {
  color: var(--ink) !important;
}

#os:not(.theme-macos) .window[data-app-color-theme] .win-btn:hover:not(.close),
body:not(.theme-macos) .window[data-app-color-theme] .win-btn:hover:not(.close) {
  background: var(--win-hover-bg) !important;
}

#os .window[data-app-color-tone="dark"] .win-theme-dot,
body .window[data-app-color-tone="dark"] .win-theme-dot {
  border-color: rgba(255, 255, 255, 0.42);
}

#os .window[data-app-color-tone="light"] .win-theme-dot,
body .window[data-app-color-tone="light"] .win-theme-dot {
  border-color: rgba(0, 0, 0, 0.28);
}

#os .window[data-app-color-theme] .win-theme-dot.is-on,
body .window[data-app-color-theme] .win-theme-dot.is-on {
  box-shadow:
    0 0 0 2px var(--titlebar-bg),
    0 0 0 3.5px var(--ink);
}

#os .window[data-app-color-theme] .window-body,
body .window[data-app-color-theme] .window-body {
  background: var(--win-body-bg) !important;
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] .project-context-bar,
body .window[data-app-color-theme] .project-context-bar {
  background: color-mix(in srgb, var(--titlebar-bg) 88%, var(--win-body-bg)) !important;
  border-bottom-color: var(--win-border) !important;
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] .project-context-sep {
  background: var(--win-border) !important;
}

#os .window[data-app-color-theme] :is(
  .work-status-select,
  .project-context-new-name-input,
  .searchable-picker-trigger,
  .ctx-tree-trigger
) {
  background: var(--win-body-bg) !important;
  color: var(--ink) !important;
  border-color: var(--win-border) !important;
}

#os .window[data-app-color-theme] :is(.app, .app-content, .app-frame) {
  color: var(--ink) !important;
  background: var(--win-body-bg) !important;
}

#os .window[data-app-color-theme] :is(.app-toolbar, .app-statusbar) {
  background: var(--app-bar) !important;
  color: var(--ink) !important;
  border-color: var(--app-line) !important;
}

#os .window[data-app-color-theme] :is(.btn, .field, .st-tbtn, .st-btn, .st-project, .st-input) {
  background: var(--app-btn) !important;
  color: var(--ink) !important;
  border-color: var(--app-line) !important;
}

#os .window[data-app-color-theme] :is(.btn, .st-tbtn, .st-btn):hover {
  background: var(--app-btn-hover) !important;
}

#os .window[data-app-color-theme] :is(.btn.primary, .st-tbtn.primary, button.primary, .st-btn.primary) {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: transparent !important;
}

#os .window[data-app-color-theme] .window-body input:not([type="color"]):not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
#os .window[data-app-color-theme] .window-body select,
#os .window[data-app-color-theme] .window-body textarea {
  background: var(--app-input) !important;
  color: var(--ink) !important;
  border-color: var(--input-border, var(--app-line)) !important;
  color-scheme: inherit;
}

#os .window[data-app-color-theme] .window-body :is(input, textarea)::placeholder {
  color: var(--ink-soft) !important;
  opacity: 0.9;
}

/* App shells that still hardcode hex backgrounds. */
#os .window[data-app-color-theme] :is(
  .studio,
  .graph-studio-app,
  .graph-studio-root,
  .plasmid-studio-root,
  .ps-app,
  .eln-studio-root,
  .pkpd-studio-root,
  .pkpd-app,
  .method-validation-root,
  .mvs-app,
  .omics-studio-app,
  .omics-app,
  .olink-app,
  .compound-studio-app,
  .pathology-studio-app,
  .path-root,
  .molecular-design-root,
  .mds-app,
  .design-studio-root,
  .tox-studio-root,
  .pcr-studio-app,
  .pss-root,
  .instrument-booking-root,
  .ib-app,
  .inventory-root,
  .inv-app,
  .pdf-studio-root,
  .pdf-studio,
  .kgs-app,
  .molbio-app,
  .tika-root,
  .eh-app,
  .microsoft-cloud-root,
  .org-platform-app,
  .partner-portal-app,
  .partner-root,
  .dashboard-app,
  .profile-app,
  .admin-app,
  .smart-upload-root,
  .pm-app,
  .excel-app,
  .word-app,
  .office-app,
  .ppt-studio,
  .fe-explorer-root,
  .clib,
  .workflow-builder,
  .qms-lite-root,
  .lims-studio-root,
  .imaging-studio-root,
  .protein-studio-root,
  .data-importer-root,
  .scientific-data-cloud-root,
  .wh-browser,
  .ss-app,
  .hs-office-root,
  .report-studio,
  .files-app,
  .calc-app,
  .notepad-app,
  .terminal-app,
  .cfm-root,
  .bsx-app,
  .dev-notes-app
) {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] :is(
  .st-toolbar,
  .st-sidebar,
  .st-inspector,
  .st-ai,
  .graph-studio-menubar,
  .graph-studio-nav,
  .ib-header,
  .ib-top-nav,
  .files-sidebar,
  .files-path,
  .files-toolbar,
  .studio-ai-panel,
  .studio-ai-head,
  .office-ribbon,
  .office-rb,
  .office-rb-tabs,
  .excel-ribbon,
  .excel-formula-bar,
  .clib-header,
  .clib-toolbar,
  .clib-side,
  .clib-inspect,
  .ss-titlebar,
  .hs-editor-topline,
  .hs-toolstrip,
  .hs-leftbar-shell,
  .hs-preview-toolbar,
  .wh-tabstrip,
  .graph-studio-statusbar
) {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] :is(
  .st-card,
  .st-workspace,
  .st-table-wrap,
  .studio-ai-panel,
  .cs-panel,
  .cs-card,
  .ad-dialog-card,
  .ad-cmenu
) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .office-titlebar {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

#os .window[data-app-color-theme] .office-tbtn {
  color: var(--on-primary) !important;
}

#os .window[data-app-color-theme] .excel-formula-input {
  color: var(--ink) !important;
  background: var(--control-bg) !important;
}

#os .window[data-app-color-theme] .excel-grid-scroll {
  background: var(--surface) !important;
}

#os .window[data-app-color-theme] .window-body :is(
  [class*="toolbar"],
  [class*="menubar"],
  [class*="sidebar"],
  [class*="inspector"],
  [class*="statusbar"],
  [class*="navigator"],
  [class*="commandbar"]
):not(.modebar):not([class*="plotly"]) {
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .window-body :is(
  [class*="modal"],
  [class*="dialog"],
  [class*="popover"],
  [class*="dropdown"],
  [class*="menu-drop"],
  [class*="context-menu"]
):not([class*="plotly"]) {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Portaled project tree, pickers, menus, dialogs. */
[data-app-color-theme].ctx-tree-panel,
[data-app-color-theme] .ctx-tree-panel,
[data-app-color-theme].ctx-tree-pop,
[data-app-color-theme] .ctx-tree-pop,
[data-app-color-theme].searchable-picker-panel,
[data-app-color-theme].ctx-menu,
[data-app-color-theme].work-status-date-panel,
[data-app-color-theme].platform-dialog,
[data-app-color-theme] .platform-dialog,
[data-app-color-theme].org-modal-backdrop,
[data-app-color-theme] .org-modal,
[data-app-color-theme].session-action-overlay,
[data-app-color-theme].save-draft-overlay,
[data-app-color-theme].wi-history-overlay,
[data-app-color-theme].ad-cmenu,
[data-app-color-theme].ad-dialog-card,
[data-app-color-theme].graph-studio-cmenu,
[data-app-color-theme].graph-studio-nav-cmenu,
[data-app-color-theme].hs-ctx-menu,
[data-app-color-theme].hs-exact-dd-menu {
  color: var(--ink) !important;
  border-color: var(--win-border) !important;
  color-scheme: inherit;
}

[data-app-color-theme].ctx-tree-panel,
[data-app-color-theme] .ctx-tree-panel,
[data-app-color-theme].ctx-tree-pop,
[data-app-color-theme] .ctx-tree-pop,
[data-app-color-theme].searchable-picker-panel,
[data-app-color-theme].work-status-date-panel,
[data-app-color-theme].platform-dialog,
[data-app-color-theme] .platform-dialog,
[data-app-color-theme].org-modal-backdrop,
[data-app-color-theme] .org-modal,
[data-app-color-theme].ad-cmenu,
[data-app-color-theme].ad-dialog-card,
[data-app-color-theme].graph-studio-cmenu,
[data-app-color-theme].graph-studio-nav-cmenu,
[data-app-color-theme].hs-ctx-menu,
[data-app-color-theme].hs-exact-dd-menu {
  background: var(--surface) !important;
  background-image: none !important;
}

[data-app-color-theme].ctx-menu {
  background: #ffffff !important;
  color: #132238 !important;
}

[data-app-color-theme].ctx-menu .ctx-item {
  color: #132238;
}

[data-app-color-theme] .ctx-tree-row,
[data-app-color-theme] .searchable-picker-option,
[data-app-color-theme] .ctx-tree-trigger-label,
[data-app-color-theme] .ctx-tree-section {
  color: var(--ink) !important;
}

[data-app-color-theme].ctx-menu .ctx-item:hover:not([disabled]),
[data-app-color-theme] .ctx-tree-row:hover,
[data-app-color-theme] .searchable-picker-option:hover,
[data-app-color-theme] .searchable-picker-option.is-active {
  background: var(--ctx-hover, var(--menu-hover)) !important;
}

[data-app-color-theme].searchable-picker-panel .searchable-picker-search,
[data-app-color-theme].ctx-tree-panel input,
[data-app-color-theme].ctx-tree-panel textarea,
[data-app-color-theme].ctx-tree-pop input,
[data-app-color-theme].ctx-tree-pop textarea,
[data-app-color-theme].work-status-date-panel input,
[data-app-color-theme].platform-dialog input,
[data-app-color-theme].platform-dialog textarea,
[data-app-color-theme].platform-dialog select,
[data-app-color-theme] .platform-dialog input,
[data-app-color-theme] .platform-dialog textarea,
[data-app-color-theme] .platform-dialog select,
[data-app-color-theme].org-modal-backdrop input,
[data-app-color-theme].org-modal-backdrop textarea,
[data-app-color-theme].org-modal-backdrop select {
  background: var(--control-bg) !important;
  color: var(--ink) !important;
  border-color: var(--control-line) !important;
}

[data-app-color-theme] :is(.btn.primary, button.primary) {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: transparent !important;
}

#os .window[data-app-color-theme] :is(
  .st-nav-item.active,
  .files-side-item.active,
  .theme-card.active,
  .ad-tab.active,
  .office-rb-tab.active,
  .ib-nav.active
) {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

#os .window[data-app-color-theme] .office-rb,
#os .window[data-app-color-theme] .office-rb-tabs {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .office-rb-tabs {
  background: var(--surface-2) !important;
}

#os .window[data-app-color-theme] .office-rb-tab:not(.active) {
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] :is(.ib-btn, .ib-btn.secondary, .ib-search, .ib-filter, .ib-controls, .ib-panel, .ib-calendar, .ib-instrument-card, .ib-booking-row, .ib-resource, .ib-stats > div) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .ib-btn.primary,
#os .window[data-app-color-theme] .studio-ai-send {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: transparent !important;
}

#os .window[data-app-color-theme] .ib-main,
#os .window[data-app-color-theme] .ib-page-title h1,
#os .window[data-app-color-theme] .ib-brand strong {
  color: var(--ink) !important;
}

#os .window[data-app-color-theme] .ib-brand span,
#os .window[data-app-color-theme] .ib-nav:not(.active) {
  color: var(--ink-soft) !important;
}

#os .window[data-app-color-theme] :is(.pss-card, .pss-note, .pss-stat, .pss-health) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .pss-root :is(button, input, select, textarea) {
  background: var(--control-bg) !important;
  color: var(--ink) !important;
  border-color: var(--control-line) !important;
}

#os .window[data-app-color-theme] .pss-root button.primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: transparent !important;
}

#os .window[data-app-color-theme] :is(
  .files-home-card,
  .files-preview,
  .theme-card,
  .calc-display,
  .calc-key,
  .seq-input,
  .seq-stat,
  .clib-card,
  .clib-preview,
  .clib-clip-card,
  .ad-formpane,
  .ad-row,
  .ad-schem-card,
  .ad-protocol,
  .ad-insp-card,
  .ad-review-card
) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .window-body :is(
  [class$="-card"],
  [class$="-panel"],
  [class$="-pane"],
  [class$="-modal"]
):not(.excel-cell):not(.js-plotly-plot):not([class*="plotly"]):not(.hs-preview-frame):not(.file-viewer-frame):not(.hs-page):not(.word-page):not(.word-page-sheet):not(.word-doc-frame) {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] :is(.hs-doc-action, .hs-action-menu-btn, .hs-mode-seg, .hs-ep-toggle, .hs-leftbar-tabs, .hs-fmt-panel, .hs-fmt-seg) {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os .window[data-app-color-theme] .hs-mode-btn.on,
#os .window[data-app-color-theme] .hs-fmt-seg-btn.on {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* Desktop .dark skins must not paint a light app khaki/white/mist. */
#os.dark .window[data-app-color-tone="light"] .window-titlebar,
#os.dark .window[data-app-color-tone="light"] .window-body,
#os.theme-macos.dark .window[data-app-color-tone="light"] .window-titlebar,
#os.theme-macos.dark .window[data-app-color-tone="light"] .window-body {
  color-scheme: light !important;
}

#os.dark .window[data-app-color-tone="light"] :is(
  .hs-leftbar-shell,
  .hs-editor-topline,
  .hs-toolstrip,
  .hs-action-menu-btn,
  .hs-leftbar-acc,
  .hs-leftbar-tab.on,
  .hs-fmt-panel,
  .hs-fmt-title,
  .hs-preview-toolbar,
  .hs-exact-dd-btn,
  .hs-exact-dd-menu,
  .hs-ctx-menu,
  .hs-mode-seg,
  .hs-ep-toggle,
  .hs-leftbar-tabs,
  .hs-doc-actions,
  .hs-toolgroup,
  .hs-fmt-seg,
  .hs-page-thumb,
  .instrument-booking-root,
  .ib-app,
  .ib-header,
  .ib-controls,
  .ib-calendar,
  .ib-instrument-card,
  .ib-booking-row,
  .ib-panel,
  .ib-resource,
  .files-sidebar,
  .files-path,
  .files-preview,
  .files-home-card,
  .calc-display,
  .calc-key,
  .seq-input,
  .seq-stat,
  .theme-card,
  .ad-formpane,
  .ad-row,
  .ad-dialog-card,
  .ad-cmenu,
  .wh-browser,
  .wh-tabstrip,
  .clib
) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

#os.dark .window[data-app-color-tone="light"] :is(.ib-header, .hs-leftbar-shell, .hs-editor-topline, .files-sidebar, .wh-tabstrip, .clib-header, .clib-toolbar) {
  background: var(--surface-2) !important;
}

#os.dark .window[data-app-color-tone="light"] :is(
  .ib-page-title h1,
  .ib-instrument-card h3,
  .ib-resource strong,
  .ib-section-title,
  .ib-booking-info h3,
  .hs-office-root,
  .hs-office-root .studio
) {
  color: var(--ink) !important;
}

/* Keep macOS traffic lights, even inside a themed window. */
#os.theme-macos .window[data-app-color-theme] .win-btn.close { background: #ff5f57 !important; }
#os.theme-macos .window[data-app-color-theme] .win-btn.min { background: #febc2e !important; }
#os.theme-macos .window[data-app-color-theme] .win-btn.max { background: #28c840 !important; }
#os.theme-macos .window:not(.focused)[data-app-color-theme] .win-btn.close,
#os.theme-macos .window:not(.focused)[data-app-color-theme] .win-btn.min,
#os.theme-macos .window:not(.focused)[data-app-color-theme] .win-btn.max {
  background: #d6d6d8 !important;
}
#os.theme-macos.dark .window:not(.focused)[data-app-color-theme] .win-btn.close,
#os.theme-macos.dark .window:not(.focused)[data-app-color-theme] .win-btn.min,
#os.theme-macos.dark .window:not(.focused)[data-app-color-theme] .win-btn.max {
  background: #54545a !important;
}