/*
  Item 40 (R-016): WebClient theme "VCL + Windows 11" in 3 tones (Light / Dark / Soft), a SECOND theme beside Classic.
  Every rule is scoped under body.theme-w11 (+ .tone-light / .tone-dark / .tone-soft), set by js/theme-w11.js; with
  Classic the body has none of these classes and nothing here applies.
  v2 (2.68.1.809, after the 806 screenshots and the user's "clean, no clashing colours"):
  - one accent (the tone's blue) for the selected tab underline, the selected row bar, focus and the SEARCH button;
    everything else neutral greys;
  - grids: flat header band, no vertical cell lines, one faint line per row (no zebra), coloured cell fills from the
    screens' renderers neutralised, flags (OF / Y / status) as bold text in the tone's text colour, links in the text
    colour (dark: #8ad0ff) with underline on hover;
  - fewer borders: panels 1 px border-level line, toolbar buttons without outline until hover, only SEARCH filled;
  - the forms' neutral inline backgrounds (white, clBtnFace, clWindow) follow the tone; saturated colours (StartUp
    tiles, status colours, the header bar) stay;
  - inside W11 only: grid rows a little taller (cell padding) - no form control moves.
  Tokens = the canvas mockups TourBookingW11 / ...Dark / ...Soft (renderVals tone table).
*/

body.theme-w11.tone-light {
  --w-ground: #f3f3f3; --w-surface: #ffffff; --w-surface2: #fafafa; --w-border: #e5e5e5; --w-line: #f0f0f0;
  --w-text: #1b1b1b; --w-muted: #444444; --w-ctrl-bg: #fdfdfd; --w-ctrl-border: #d1d1d1; --w-ctrl-bottom: #8a8a8a;
  --w-head: #f7f7f7; --w-sel: #cce4f7; --w-accent: #005fb8; --w-accent-text: #ffffff; --w-tabbar: #e9e9e9;
  --w-tab-sel: #ffffff; --w-grid-link: #1b1b1b; --w-hover: #f0f0f0; --w-dis: #a0a0a0;
}
body.theme-w11.tone-dark {
  --w-ground: #202020; --w-surface: #2b2b2b; --w-surface2: #272727; --w-border: #3a3a3a; --w-line: #333333;
  --w-text: #f3f3f3; --w-muted: #c5c5c5; --w-ctrl-bg: #2d2d2d; --w-ctrl-border: #454545; --w-ctrl-bottom: #9a9a9a;
  --w-head: #323232; --w-sel: #1f4266; --w-accent: #4cc2ff; --w-accent-text: #002033; --w-tabbar: #1b1b1b;
  --w-tab-sel: #2b2b2b; --w-grid-link: #8ad0ff; --w-hover: #3a3a3a; --w-dis: #7a7a7a;
}
body.theme-w11.tone-soft {
  --w-ground: #eceef1; --w-surface: #f5f6f8; --w-surface2: #e9ebee; --w-border: #d3d7db; --w-line: #e3e6e9;
  --w-text: #1f2328; --w-muted: #4a5058; --w-ctrl-bg: #f5f6f8; --w-ctrl-border: #c7ccd1; --w-ctrl-bottom: #7b828a;
  --w-head: #e6e9ec; --w-sel: #d2e2f0; --w-accent: #2f6ea6; --w-accent-text: #ffffff; --w-tabbar: #dfe2e6;
  --w-tab-sel: #f5f6f8; --w-grid-link: #1f2328; --w-hover: #e3e6e9; --w-dis: #8a9098;
}

/* ---- font family only (Ext keeps its sizes) ---- */
body.theme-w11,
body.theme-w11 .x-body,
body.theme-w11 .x-panel-body,
body.theme-w11 .x-btn-inner,
body.theme-w11 .x-tab-inner,
body.theme-w11 .x-form-field,
body.theme-w11 .x-form-text,
body.theme-w11 .x-form-item-label,
body.theme-w11 .x-form-display-field,
body.theme-w11 .x-grid-cell-inner,
body.theme-w11 .x-column-header-text,
body.theme-w11 .x-panel-header-text,
body.theme-w11 .x-window-header-text,
body.theme-w11 .x-menu-item-text,
body.theme-w11 .x-boundlist-item,
body.theme-w11 .x-toolbar-text,
body.theme-w11 .x-tree-node-text,
body.theme-w11 .x-fieldset-header-text,
body.theme-w11 .x-label {
  font-family: 'Segoe UI Variable Text', 'Segoe UI', Tahoma, sans-serif;
}

/* ---- ground, panels (cards) ---- */
body.theme-w11,
body.theme-w11 .x-body,
body.theme-w11 .x-viewport,
body.theme-w11 .x-border-layout-ct,
body.theme-w11 .x-tabpanel-child,
body.theme-w11 .x-tab-panel-body {
  background-color: var(--w-ground);
  color: var(--w-text);
}
body.theme-w11 .x-panel-body-default,
body.theme-w11 .x-panel-body {
  background-color: var(--w-surface);
  border-color: var(--w-border);
  color: var(--w-text);
}
body.theme-w11 .x-panel-default {
  border-color: var(--w-border);
}
body.theme-w11 .x-panel-default-framed,
body.theme-w11 .x-fieldset {
  border-color: var(--w-border);
  border-radius: 8px;
}
body.theme-w11 .x-panel-header-default,
body.theme-w11 .x-panel-header {
  background-image: none;
  background-color: var(--w-surface2);
  border-color: var(--w-border);
}
body.theme-w11 .x-panel-header-text,
body.theme-w11 .x-panel-header-title-default {
  color: var(--w-text);
}
body.theme-w11 .x-form-item-label,
body.theme-w11 .x-form-cb-label,
body.theme-w11 .x-fieldset-header-text {
  color: var(--w-muted);
}
/* neutral inline backgrounds written by the forms (Color = clWhite / clBtnFace / clWindow) follow the tone; saturated
   ones (tiles, status colours, header bar) are not matched and stay */
body.theme-w11 [style*="background-color: rgb(255, 255, 255)"],
body.theme-w11 [style*="background-color:#FFFFFF" i],
body.theme-w11 [style*="background-color: #FFFFFF" i],
body.theme-w11 [style*="background-color: rgb(240, 240, 240)"],
body.theme-w11 [style*="background-color:#F0F0F0" i],
body.theme-w11 [style*="background-color: #F0F0F0" i] {
  background-color: var(--w-surface) !important;
}
body.theme-w11.tone-dark [style*="color: rgb(0, 0, 0)"],
body.theme-w11.tone-dark [style*="color:#000000"],
body.theme-w11.tone-dark [style*="color: #000000"],
body.theme-w11.tone-dark [style*="color: rgb(128, 128, 128)"] {
  color: var(--w-text) !important;
}

/* ---- tab strips (document tabs, sub-tabs) and the menu bar ---- */
body.theme-w11 .x-tab-bar-default,
body.theme-w11 .x-tab-bar-body-default {
  background-image: none;
  background-color: var(--w-tabbar);
  border-color: var(--w-border);
}
body.theme-w11 .x-tab-default-top,
body.theme-w11 .x-tab-default {
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
}
body.theme-w11 .x-tab-default-top .x-tab-inner-default,
body.theme-w11 .x-tab-default .x-tab-inner-default {
  color: var(--w-muted);
}
body.theme-w11 .x-tab-default-top.x-tab-over,
body.theme-w11 .x-tab-default.x-tab-over {
  background-color: var(--w-hover);
}
body.theme-w11 .x-tab-default-top.x-tab-active,
body.theme-w11 .x-tab-default.x-tab-active {
  background-image: none;
  background-color: var(--w-tab-sel);
  border-color: var(--w-border);
  box-shadow: inset 0 -2px 0 var(--w-accent);
}
body.theme-w11 .x-tab-default-top.x-tab-active .x-tab-inner-default,
body.theme-w11 .x-tab-default.x-tab-active .x-tab-inner-default {
  color: var(--w-text);
  font-weight: 600;
}
body.theme-w11 .x-toolbar-default,
body.theme-w11 .x-toolbar {
  background-image: none;
  background-color: var(--w-surface2);
  border-color: var(--w-border);
}

/* ---- buttons: subtle (no outline until hover); buttons outside toolbars keep a light outline; SEARCH filled ---- */
body.theme-w11 .x-btn-default-toolbar-small,
body.theme-w11 .x-btn-default-toolbar-medium {
  background-image: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
}
body.theme-w11 .x-btn-default-small,
body.theme-w11 .x-btn-default-medium,
body.theme-w11 .x-btn-default-large {
  background-image: none;
  background-color: var(--w-surface);
  border: 1px solid var(--w-ctrl-border);
  border-radius: 4px;
  box-shadow: none;
}
body.theme-w11 .x-btn .x-btn-inner {
  color: var(--w-text);
}
body.theme-w11 .x-btn-default-toolbar-small.x-btn-over,
body.theme-w11 .x-btn-default-toolbar-medium.x-btn-over,
body.theme-w11 .x-btn-default-small.x-btn-over,
body.theme-w11 .x-btn-default-medium.x-btn-over,
body.theme-w11 .x-btn-default-large.x-btn-over {
  background-image: none;
  background-color: var(--w-hover);
  border-color: var(--w-ctrl-border);
}
body.theme-w11 .x-btn.x-btn-pressed {
  background-image: none;
  background-color: var(--w-sel);
}
body.theme-w11 .x-btn-disabled .x-btn-inner,
body.theme-w11 .x-item-disabled .x-btn-inner {
  color: var(--w-dis);
}
body.theme-w11 .x-btn.w11-primary,
body.theme-w11 .x-btn.w11-primary.x-btn-over {
  background-image: none;
  background-color: var(--w-accent);
  border-color: var(--w-accent);
}
body.theme-w11 .x-btn.w11-primary .x-btn-inner {
  color: var(--w-accent-text);
  font-weight: 600;
}

/* ---- inputs, combos, date pickers ---- */
body.theme-w11 .x-form-trigger-wrap,
body.theme-w11 .x-form-text-wrap {
  border-color: var(--w-ctrl-border);
  border-bottom-color: var(--w-ctrl-bottom);
  border-radius: 4px;
}
body.theme-w11 .x-form-text-default,
body.theme-w11 .x-form-text,
body.theme-w11 .x-form-field {
  background-image: none;
  background-color: var(--w-ctrl-bg);
  color: var(--w-text);
}
body.theme-w11 .x-form-trigger-default,
body.theme-w11 .x-form-trigger {
  background-color: var(--w-ctrl-bg);
}
body.theme-w11 .x-form-focus,
body.theme-w11 .x-form-trigger-wrap-focus {
  border-color: var(--w-accent);
  border-bottom-color: var(--w-accent);
}
body.theme-w11 .x-boundlist {
  background-color: var(--w-surface);
  border-color: var(--w-border);
}
body.theme-w11 .x-boundlist-item {
  color: var(--w-text);
  border-color: transparent;
}
body.theme-w11 .x-boundlist-item-over {
  background-color: var(--w-hover);
}
body.theme-w11 .x-boundlist-selected {
  background-color: var(--w-sel);
}

/* ---- grids ---- */
body.theme-w11 .x-grid-header-ct,
body.theme-w11 .x-column-header {
  background-image: none;
  background-color: var(--w-head);
  border-color: var(--w-head);
}
body.theme-w11 .x-grid-header-ct {
  border-bottom: 1px solid var(--w-border);
}
body.theme-w11 .x-column-header-text,
body.theme-w11 .x-column-header-inner {
  color: var(--w-muted);
  font-weight: 600;
}
body.theme-w11 .x-column-header-over {
  background-color: var(--w-hover);
}
body.theme-w11 .x-grid-body,
body.theme-w11 .x-grid-view {
  background-color: var(--w-surface);
  border-color: var(--w-border);
}
body.theme-w11 .x-grid-item,
body.theme-w11 .x-grid-item-alt {
  background-color: var(--w-surface);
  color: var(--w-text);
}
body.theme-w11 .x-grid-item,
body.theme-w11 .x-grid-with-row-lines .x-grid-item {
  border-color: var(--w-line);
}
body.theme-w11 .x-grid-cell,
body.theme-w11 .x-grid-with-col-lines .x-grid-cell {
  border-right-color: transparent;
  color: var(--w-text);
}
body.theme-w11 .x-grid-cell-inner {
  padding-top: 6px;
  padding-bottom: 6px;
}
/* coloured cell fills from the screens' renderers (Cat / Paid DP / INV ...): neutral, value as bold text */
body.theme-w11 .x-grid-cell[style*="background"],
body.theme-w11 .x-grid-cell-inner[style*="background"] {
  background: transparent !important;
  color: var(--w-text) !important;
  font-weight: 600;
}
body.theme-w11 .x-grid-cell-inner a,
body.theme-w11 .x-grid-cell-inner a:visited {
  color: var(--w-grid-link) !important;
  text-decoration: none;
}
body.theme-w11 .x-grid-cell-inner a:hover {
  text-decoration: underline;
}
body.theme-w11 .x-grid-item-over {
  background-color: var(--w-hover);
}
/* overrides the classic CustomCSS .x-grid-item-selected (ServerModule.dfm) only while W11 is on */
body.theme-w11 .x-grid-item-selected {
  background-color: var(--w-sel);
  color: var(--w-text);
  box-shadow: inset 3px 0 0 var(--w-accent);
}

/* ---- pager ---- */
body.theme-w11 .x-pagingtoolbar,
body.theme-w11 .x-toolbar-default.x-docked-bottom {
  background-color: var(--w-surface2);
  border-color: var(--w-border);
}
body.theme-w11 .x-btn-plain-toolbar-small {
  background-image: none;
  background-color: transparent;
  border-radius: 4px;
}
body.theme-w11 .x-btn-plain-toolbar-small.x-btn-over {
  background-color: var(--w-hover);
}

/* ---- windows and message boxes ---- */
body.theme-w11 .x-window-default,
body.theme-w11 .x-message-box {
  border-radius: 8px;
  border-color: var(--w-border);
  background-color: var(--w-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
body.theme-w11 .x-window-header-default {
  background-image: none;
  background-color: var(--w-surface2);
  border-color: var(--w-border);
}
body.theme-w11 .x-window-header-text,
body.theme-w11 .x-window-header-title-default {
  color: var(--w-text);
}
body.theme-w11 .x-window-body-default {
  background-color: var(--w-surface);
  border-color: var(--w-border);
  color: var(--w-text);
}

/* ---- menus ---- */
body.theme-w11 .x-menu-default,
body.theme-w11 .x-menu-body-default {
  background-image: none;
  background-color: var(--w-surface);
  border-color: var(--w-border);
  border-radius: 6px;
}
body.theme-w11 .x-menu-item-text {
  color: var(--w-text);
}
body.theme-w11 .x-menu-item-active {
  background-image: none;
  background-color: var(--w-sel);
}

/* ---- links elsewhere ---- */
body.theme-w11 a {
  color: var(--w-grid-link);
}

/* ---- 817 (816 DEFECT): in Dark and Soft the grid body, the filter panels and the input fields stayed white (inline
   styles / later stylesheets beat the scoped rules). These two tones force their surfaces; Light keeps the softer
   rules above, Classic is untouched (no theme-w11 class). Panels with their own inline background (StartUp tiles,
   status colours) are excluded by :not([style*="background"]). ---- */
body.theme-w11.tone-dark .x-grid-body,
body.theme-w11.tone-dark .x-grid-view,
body.theme-w11.tone-dark .x-grid-item,
body.theme-w11.tone-dark .x-grid-item-alt,
body.theme-w11.tone-soft .x-grid-body,
body.theme-w11.tone-soft .x-grid-view,
body.theme-w11.tone-soft .x-grid-item,
body.theme-w11.tone-soft .x-grid-item-alt {
  background-color: var(--w-surface) !important;
  color: var(--w-text) !important;
}
body.theme-w11.tone-dark .x-grid-cell,
body.theme-w11.tone-soft .x-grid-cell {
  background-color: transparent !important;
}
body.theme-w11.tone-dark .x-grid-cell-inner,
body.theme-w11.tone-soft .x-grid-cell-inner {
  color: var(--w-text) !important;
}
body.theme-w11.tone-dark .x-grid-cell-inner a,
body.theme-w11.tone-soft .x-grid-cell-inner a {
  color: var(--w-grid-link) !important;
}
body.theme-w11.tone-dark .x-grid-item-over,
body.theme-w11.tone-soft .x-grid-item-over {
  background-color: var(--w-hover) !important;
}
body.theme-w11.tone-dark .x-grid-item-selected,
body.theme-w11.tone-soft .x-grid-item-selected {
  background-color: var(--w-sel) !important;
}
body.theme-w11.tone-dark .x-panel-body:not([style*="background"]),
body.theme-w11.tone-dark .x-panel-body-default:not([style*="background"]),
body.theme-w11.tone-soft .x-panel-body:not([style*="background"]),
body.theme-w11.tone-soft .x-panel-body-default:not([style*="background"]) {
  background-color: var(--w-surface) !important;
  color: var(--w-text) !important;
}
body.theme-w11.tone-dark .x-form-text,
body.theme-w11.tone-dark .x-form-field,
body.theme-w11.tone-dark .x-form-text-default,
body.theme-w11.tone-dark .x-form-trigger-wrap,
body.theme-w11.tone-dark .x-form-text-wrap,
body.theme-w11.tone-dark textarea,
body.theme-w11.tone-soft .x-form-text,
body.theme-w11.tone-soft .x-form-field,
body.theme-w11.tone-soft .x-form-text-default,
body.theme-w11.tone-soft .x-form-trigger-wrap,
body.theme-w11.tone-soft .x-form-text-wrap,
body.theme-w11.tone-soft textarea {
  background-image: none !important;
  background-color: var(--w-ctrl-bg) !important;
  color: var(--w-text) !important;
}
body.theme-w11.tone-dark .x-form-item-label,
body.theme-w11.tone-dark .x-form-cb-label,
body.theme-w11.tone-dark .x-form-display-field,
body.theme-w11.tone-dark .x-label {
  color: var(--w-muted) !important;
}
body.theme-w11.tone-dark .x-form-text::placeholder,
body.theme-w11.tone-dark .x-form-empty-field {
  color: var(--w-dis) !important;
}
/* 818: the triggers (combo arrow, date picker) keep Ext's sprite - 817 had removed it with the inputs above; Dark
   shows the sprite inverted (light glyph on a dark button), Soft as it is */
body.theme-w11.tone-dark .x-form-trigger {
  background-color: #fdfdfd !important; /* inverted by the filter into a dark button */
  filter: invert(0.88) hue-rotate(180deg);
}