/**
 * theme-vendor.css — Awesome Support theme layer, file 4 of 6 (iteration II)
 * =========================================================================
 *
 * STATUS: AUTHORED in Stage 5 (issue #81 — "Third-party widget chrome and the
 * TinyMCE editor iframe"). Created as a documented stub in Stage 1 (issue #60)
 * so the binding load order of api-contract-II §4.1.2 was complete from the
 * first commit of the iteration.
 *
 * OWNS (api-contract-II §4.1.1 row 4): the chrome of the bundled third-party
 * widgets, themed from tokens — select2, sweetalert2, daterangepicker,
 * bs-custom-file-input, blockUI, Dropzone (the TinyMCE image manager), the two
 * FontAwesome majors' icon colour, and the TinyMCE editor toolbar/skin (`.tox`)
 * that renders in the PARENT document (§8; the editor IFRAME body is themed
 * separately in theme-tinymce-content.css, file 6).
 *
 * MUST NOT CONTAIN: Bootstrap or Shards core selectors (files 2 and 3).
 *
 * AUTHORING RULES (§4.1.3):
 *   - tokens only; no colour literal of any notation. The single exception is
 *     an alpha-blended derivative copied VERBATIM from
 *     docs/input/design/component-reference.css, on a line carrying the
 *     verbatim-copy comment (here: the `rgba(0, 0, 0, 0.62)` scrim, ref §8).
 *   - `!important` only against a vendor rule that is itself `!important` OR an
 *     inline style a plugin writes at runtime (select2/swal/blockUI/Dropzone
 *     are the heavy offenders), each occurrence commented with what it counters.
 *   - one comment line per rule block, naming the widget surface it overrides.
 *   - breakpoints 767/768 and 1199/1200 only; no `prefers-color-scheme`.
 *
 * WHERE EACH WIDGET IS ACTUALLY USED (verified on disk, Stage 5):
 *   - select2 ......... CLIENT shell only (helpdesk.js `$('select').select2()`,
 *                       `.searcher`); staff `<select>`s stay NATIVE by design.
 *   - sweetalert2 ..... STAFF only (staff.js delete/confirm dialogs).
 *   - daterangepicker . STAFF ticket search (staff.js `.datepicker`).
 *   - bs-custom-file ... STAFF file inputs; its visual surface is Bootstrap's
 *                       `.custom-file-label` + `::after`, themed in
 *                       theme-bootstrap.css §2 — see §4 below (near-noop).
 *   - blockUI ......... STAFF ticket view (staff.js `$('#myTabContent').block`).
 *   - Dropzone ........ the TinyMCE image manager (self-contained document,
 *                       staff/tinymce_image_manager.php).
 *   - FontAwesome ..... v4 on the client shell + image manager, v5 on the staff
 *                       and installer shells (deliberately NOT unified, A14).
 *   - TinyMCE `.tox` .. every page that embeds the editor (both shells).
 */

/* ==========================================================================
 * 1. select2  —  assets/components/select2/  (CLIENT shell)
 *    Surfaces: `.select2-selection` (rendered control), `.select2-dropdown`
 *    (panel at document root + `--shadow-card`), the search field, the
 *    highlighted option (`--color-primary-soft`), the multi-select tag chips.
 *    Default theme (`--default`) — helpdesk.js attaches no `theme:` option.
 *    theme-vendor.css loads AFTER select2.min.css in the client head, so these
 *    equal-or-higher-specificity rules win by ORDER; no `!important` is needed
 *    (select2's stylesheet uses none on these surfaces). spec §1.15 row 21.
 * ========================================================================== */

/* Rendered single control. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 40px;                                   /* tap target */
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text);
  line-height: normal;
}
.select2-container--default .select2-selection__placeholder {
  color: var(--color-text-muted);
}
/* Single control's dropdown arrow. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--color-text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--color-text-muted) transparent;
}
/* Focus / open state borrows the ember accent (matches the app's focus ring). */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--color-primary);
}

/* Multi-select selected tags (chips). */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-text-muted);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--color-text);
}

/* The dropdown panel — rendered at the document ROOT, outside the page shell,
 * which is why an unstyled select2 dropdown is a residual light artefact TC-3
 * must catch while it is open. */
.select2-dropdown {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--color-surface-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.select2-container--default .select2-results__option {
  color: var(--color-text);
}
/* Highlighted (keyboard/hover) option — ember tint, not select2's default blue. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary-soft);
  color: var(--color-text);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}

/* ==========================================================================
 * 2. sweetalert2  —  assets/components/sweetalert/  (STAFF confirmations)
 *    Renders at the document ROOT (like select2's dropdown), so an unstyled
 *    dialog is the single most visible residual light artefact once the pages
 *    are dark — TC-3 must pass WHILE a confirm is open. The A7 modal treatment:
 *    `--color-surface-alt` panel, `--radius-lg`, `--shadow-modal`, an
 *    `rgba(0,0,0,.62)` backdrop, and the primary/ghost button pair.
 *    staff.js fires every confirm with `type:'warning'` and an inline
 *    `cancelButtonColor:'#d33'` (no `confirmButtonText` colour), which is why
 *    only `.swal2-cancel`'s fill needs `!important` (see below).
 *    spec §1.15 row 22, component-reference.css §8.
 * ========================================================================== */

/* WHY EVERY RULE IN THIS SECTION IS `!important` (verified in-browser, Stage 5):
 * sweetalert2 INJECTS its default stylesheet as an inline <style> at RUNTIME
 * (an `(inline)` sheet re-declaring `.swal2-popup{background:#fff}`, etc.).
 * That injected sheet lands AFTER the entire theme layer in the cascade and
 * re-states every surface at equal specificity, so load order can never win —
 * only `!important` beats it. The brief permits `!important` against a plugin's
 * runtime-written styles; each rule below is commented with the injected
 * declaration it counters. (staff.js additionally writes an INLINE
 * `cancelButtonColor:'#d33'` on the cancel button, also `!important`-countered.) */

/* Backdrop. */
.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.62) !important; /* counters injected .swal2-container.swal2-shown{background:rgba(0,0,0,.4)} (scrim verbatim, component-reference.css §8) */
}

/* Dialog panel — the A7 modal surface. */
.swal2-popup {
  background-color: var(--color-surface-alt) !important; /* counters injected .swal2-popup{background:#fff} */
  border: 1px solid var(--color-border) !important;      /* counters injected .swal2-popup{border:none} */
  border-radius: var(--radius-lg) !important;            /* counters injected .swal2-popup{border-radius:.3125em} */
  box-shadow: var(--shadow-modal) !important;            /* counters injected .swal2-modal{box-shadow:0 0 10px rgba(0,0,0,.4)} */
  color: var(--color-text) !important;                   /* counters injected default popup ink */
}
.swal2-title {
  color: var(--color-text) !important;                   /* counters injected .swal2-title{color:#595959} */
}
.swal2-content {
  color: var(--color-text) !important;                   /* counters injected .swal2-content ink */
}

/* Confirm button — the A7 PRIMARY (ember). */
.swal2-styled.swal2-confirm {
  background-color: var(--color-primary) !important;     /* counters injected .swal2-confirm{background-color:#3085d6} */
  border-radius: var(--radius-md) !important;            /* counters injected .swal2-styled{border-radius:.25em} */
  color: var(--color-on-primary) !important;
}
.swal2-styled.swal2-confirm:hover {
  background-color: var(--color-primary-hover) !important; /* counters injected confirm :hover fill */
}
/* Cancel button — the A7 GHOST. Countered against BOTH the injected
 * `.swal2-cancel{background-color:#aaa}` AND staff.js's inline
 * `cancelButtonColor:'#d33'`. */
.swal2-styled.swal2-cancel {
  background-color: var(--color-surface-raised) !important; /* counters injected .swal2-cancel{background-color:#aaa} + inline cancelButtonColor:'#d33' */
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text) !important;
}
.swal2-styled.swal2-cancel:hover {
  background-color: var(--color-surface-alt) !important;    /* counters inline cancelButtonColor:'#d33' */
}
/* Both buttons share the ember focus ring instead of swal2's blue glow. */
.swal2-styled:focus {
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important; /* counters injected .swal2-styled:focus glow */
}
/* The `type:'warning'` glyph — recoloured onto the warning token. */
.swal2-icon.swal2-warning {
  border-color: var(--color-warning) !important;         /* counters injected .swal2-icon.swal2-warning{color/border-color:#facea8} */
  color: var(--color-warning) !important;
}

/* ==========================================================================
 * 3. daterangepicker  —  assets/components/daterangepicker/  (STAFF search)
 *    The calendar popover on the staff ticket queue search (staff.js
 *    `.datepicker`). Appended to <body>, so — like swal2 — it lands outside the
 *    page shell. `--color-surface-alt` popover, `--color-primary` selection,
 *    a NON-COLOUR today marker (underline + bold, §4.1.3 rule 7), and >= 40px
 *    day cells in the mobile band. spec §1.15 row 23, §2.25.
 * ========================================================================== */

.daterangepicker {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
/* The little arrow that points at the input. */
.daterangepicker:before {
  border-bottom-color: var(--color-border);
}
.daterangepicker:after {
  border-bottom-color: var(--color-surface-alt);
}
.daterangepicker.drop-up:before {
  border-top-color: var(--color-border);
}
.daterangepicker.drop-up:after {
  border-top-color: var(--color-surface-alt);
}
.daterangepicker .calendar-table {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  color: var(--color-text);
}
/* Days belonging to the adjacent month. */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
}
/* Hover on a selectable day / nav chevron. */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}
/* In-range fill and the selected endpoints. */
.daterangepicker td.in-range {
  background-color: var(--color-primary-soft);
  color: var(--color-text);
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
.daterangepicker td.disabled {
  color: var(--color-text-muted);
}
/* Today — distinguished by MORE than colour (underline + weight), so the
 * marker survives greyscale / colour-blind viewing (§4.1.3 rule 7). */
.daterangepicker td.today {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Month / year selects and the header. */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.daterangepicker th.month {
  color: var(--color-text);
}
/* Footer band + its buttons. */
.daterangepicker .drp-buttons,
.daterangepicker .drp-calendar {
  border-color: var(--color-border);
}
.daterangepicker .drp-selected {
  color: var(--color-text-muted);
}
.daterangepicker .cancelBtn {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
/* Mobile band: day cells reach the 40px tap target (spec §2.25). The vendor
 * pins the popover to a fixed `width:278px` and sizes cells with
 * `.daterangepicker .calendar-table td{min-width:32px;width:32px}` (0,2,0), so
 * the cell rule is restated at MATCHING specificity — it wins by load order
 * (theme-vendor loads after daterangepicker.css, which injects no runtime CSS)
 * — and the popover is released to size to the wider grid without overflowing
 * the viewport (7x40 = 280px fits inside 375 - 16px gutter). */
@media (max-width: 767px) {
  .daterangepicker {
    width: auto;
    max-width: calc(100vw - 16px);
  }
  .daterangepicker .drp-calendar {
    max-width: none;
  }
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
 * 4. bs-custom-file-input  —  assets/components/bs-custom-file-input/  (STAFF)
 *    The plugin's ONLY job is rewriting the label TEXT ("No file selected" ->
 *    the chosen filename). Its visual surface is Bootstrap's `.custom-file-label`
 *    + its `::after` "Browse" button, which is fully themed in
 *    theme-bootstrap.css §2 (dark fill, secondary button, >= 40px). There is no
 *    residual plugin-injected chrome to override here, so this section is
 *    intentionally empty — kept as an anchor so the file matches the §4.1.1
 *    widget inventory. spec §1.15 row 24.
 * ========================================================================== */

/* (No rules — see theme-bootstrap.css §2 "File input".) */

/* ==========================================================================
 * 5. blockUI  —  assets/components/blockui/  (STAFF ticket view)
 *    blockUI ships NO stylesheet — jquery.blockUI.js writes every style INLINE.
 *    staff.js `addKnowledgebase()` blocks `#myTabContent` with
 *    `overlayCSS:{backgroundColor:'#fff',opacity:0.7}` — a WHITE overlay, i.e. a
 *    light flash on a dark page — and a transparent message box holding only a
 *    spinner icon. Only inline styles are in play, so the overlay repair needs
 *    `!important`; the message box is deliberately left transparent (forcing a
 *    surface would draw a box around a bare spinner). spec §1.15 row 25,
 *    component-reference.css §8.
 * ========================================================================== */

.blockOverlay {
  background-color: rgba(0, 0, 0, 0.62) !important; /* counters blockUI inline overlayCSS.backgroundColor:'#fff' (verbatim scrim, component-reference.css §8) */
}

/* ==========================================================================
 * 6. Dropzone + the TinyMCE image manager  —  staff/tinymce_image_manager.php
 *    A SELF-CONTAINED document (its own <head>, its own vendor CSS: Dropzone,
 *    featherlight, lightbox, styles.css, FontAwesome 4). It links the theme
 *    layer (tokens -> bootstrap -> vendor -> components) AFTER that vendor CSS,
 *    so these rules win by order — except where the vendor uses `!important`
 *    (the `.dropzone` fill), which is countered and commented.
 *    Surfaces: the toggle control, the Dropzone drop area, the thumbnail grid
 *    (3 / 2 / 1 columns at >=1200 / 768-1199 / <768 px), each tile's neutral
 *    `.ds-plate`, the filename meta and the per-tile action row. spec §1.15
 *    row 25, api-contract-II §4.4.3 item 3 (the `.ds-plate` TC-3 carve-out).
 * ========================================================================== */

/* The "Upload image" toggle (`a.action#btnToggleUploader`) — A7 secondary
 * button. styles.css gives `a.action` a light gradient + `text-shadow:#fff`. */
.action#btnToggleUploader,
a.action {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-shadow: none;
}
a.action:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}

/* The Dropzone drop area. styles.css sets `.dropzone{background:#f2f2f2
 * !important}` + a light box-shadow, so the fill needs `!important`. */
.dropzone {
  background-color: var(--color-surface-alt) !important; /* counters styles.css `.dropzone{background-color:#f2f2f2!important}` */
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--color-text-muted);
}
.dropzone:hover,
.dropzone.dz-drag-hover {
  background-color: var(--color-primary-soft) !important; /* counters styles.css `.dropzone{background-color:#f2f2f2!important}` */
  border-color: var(--color-primary);
}
/* Dropzone's own preview plate for a file being uploaded. */
.dropzone .dz-preview .dz-image {
  border-radius: var(--radius-sm);
}

/* The thumbnail grid. styles.css floats `.wrap`; replace the float with a
 * responsive grid (1 col mobile -> 2 col >=768 -> 3 col >=1200). */
.images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Each tile — the float and fixed margins are dropped; the grid gaps space them. */
.images .wrap {
  float: none;
  margin: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* The image sits on a neutral `.ds-plate` (defined in theme-components.css §10)
 * — a DELIBERATELY light surface, and the named §4.4.3 TC-3 carve-out. Here it
 * fills the tile top and centres the thumbnail. */
.images .wrap .ds-plate {
  display: flex;
  width: 100%;
  min-height: 120px;
  padding: var(--space-2);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}
.images .wrap .ds-plate img.img-thumbnail {
  margin: auto;
  max-height: 140px;
  width: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* Filename + actions row — styles.css positions these absolutely and hides the
 * buttons until `:hover`, which is unreachable on touch. Make the whole row
 * static and always visible so every action is a real 40px target. */
.images .info {
  position: static;
  height: auto;
  line-height: normal;
  padding: var(--space-2);
  background: var(--color-surface-alt);
}
.images .buttons,
.images .name {
  position: static;
  width: auto;
  background: transparent;
  opacity: 1;
}
.images .wrap .buttons,
.images .wrap:hover .buttons {
  opacity: 1;                 /* neutralise styles.css hover-only reveal */
  z-index: auto;
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.images .wrap:hover .name {
  opacity: 1;                 /* neutralise styles.css hover transform */
  margin-top: 0;
  line-height: normal;
  background: transparent;
}
/* Filename — a muted meta line, truncated with an ellipsis. */
.images .name {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Per-tile action buttons — 40px targets, muted icons, ember/error on hover. */
.images .buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.images .buttons span {
  padding: 0;
}
.images .buttons a:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}
.images .buttons a#btnDelete:hover {
  color: var(--color-error);
}

/* The `editor_full` pager (Views/pager/editor_full.php renders `ul.pager` here).
 * styles.css draws it as light gradient pills; recolour onto the dark surface.
 * (The shell pagers are themed by the framework-views task; this vendor pager
 * is local to the image manager, so it is repaired here.) */
.pager {
  margin-top: var(--space-5);
}
.pager li a,
.pager .page-link {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  box-shadow: none;
}
.pager li a:hover,
.pager .page-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  box-shadow: none;
}
.pager li.current,
.pager .page-item.current .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ==========================================================================
 * 7. FontAwesome icon colour  —  v4 (`fa fa-*`: client shell + image manager)
 *    and v5 (`fas/far fa-*`: staff + installer shells). The two majors are
 *    deliberately NOT unified (A14); only their COLOUR is tokenised: an icon
 *    INHERITS its context's themed text colour by default. This single rule
 *    neutralises the only hard-coded icon colour in the tree — the image
 *    manager's styles.css `.fa{color:#000}` — without touching any glyph.
 *    spec §1.15 row 26, §1.16.
 * ========================================================================== */

.fa,
.fas,
.far,
.fal,
.fab,
.fad {
  color: inherit;
}

/* ==========================================================================
 * 8. TinyMCE editor chrome  —  `.tox` (toolbar / menubar / status bar)
 *    The editor is served from this application's own origin since #150 (it was
 *    cdnjs before); `staff/tinymce.php` requests the `oxide-dark`
 *    skin, which themes this chrome in the PARENT document. These rules restate
 *    the surfaces onto the exact tokens (and hold the chrome dark if the skin
 *    asset is slow/unreachable while the script loaded). The editor IFRAME body
 *    is a separate document, themed by theme-tinymce-content.css (file 6).
 *    Nothing here is `!important`: theme-vendor loads after the skin CSS, and
 *    the oxide skin uses none on these surfaces. spec §1.15, design-spec-II §2.17.
 * ========================================================================== */

.tox.tox-tinymce {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
/* The edit-area IFRAME ELEMENT's own background (distinct from its content
 * document, which theme-tinymce-content.css darkens). The browser default is
 * white; setting it to the raised surface prevents a white flash before the
 * iframe's content_css loads, and keeps even a naive TC-3 iframe-bg read dark.
 * The editor content body sits on top of this, so it is only ever seen briefly. */
.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  /* counters the oxide skin CSS TinyMCE injects at runtime (since #150 from our
   * own origin, but still injected AFTER the theme layer, so load order cannot
   * win — that is what makes `!important` necessary here): its
   * `.tox-edit-area__iframe{background-color:#fff}` would otherwise flash a
   * white edit area and read white to a naive TC-3 iframe-element scan, even
   * though theme-tinymce-content.css darkens the iframe's own document. */
  background-color: var(--color-surface-raised) !important;
}
.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}
.tox .tox-menubar {
  background-color: var(--color-surface-raised);
}
/* Toolbar buttons. */
.tox .tox-tbtn,
.tox .tox-mbtn {
  color: var(--color-text-muted);
}
.tox .tox-tbtn svg,
.tox .tox-mbtn svg {
  fill: var(--color-text-muted);
}
.tox .tox-tbtn:hover,
.tox .tox-mbtn:hover,
.tox .tox-tbtn:focus,
.tox .tox-tbtn--enabled {
  background-color: var(--color-surface);
  color: var(--color-text);
}
.tox .tox-tbtn:hover svg,
.tox .tox-tbtn--enabled svg {
  fill: var(--color-text);
}
.tox .tox-tbtn__select-label,
.tox .tox-tbtn--select {
  color: var(--color-text-muted);
}
/* Toolbar group separators. */
.tox .tox-toolbar__group {
  border-color: var(--color-border);
}
/* Status bar. */
.tox .tox-statusbar {
  background-color: var(--color-surface-raised);
  border-top-color: var(--color-border);
  /* Muted status text — the theme's intent since iteration II. 5.10.9's skin
   * sets `color:#fff` on this same selector, so this needs the same
   * runtime-order `!important` as the two properties below (#150). */
  color: var(--color-text-muted) !important;
  /* #150: the oxide skin added `text-transform: uppercase` to `.tox-statusbar`
   * between 5.0.4 and 5.10.9, which rendered the word count as "0 WORDS". The
   * DOM text is unchanged ("0 words") — this is purely the skin's casing. Pin it
   * back so the security-only version bump stays visually neutral.
   *
   * `!important` is REQUIRED here, exactly as for `.tox-edit-area__iframe`
   * above: the skin's own rule is `.tox .tox-statusbar` — the SAME (0,2,0)
   * specificity as this one — and TinyMCE injects the skin stylesheet at
   * RUNTIME, below the whole static head, so it wins on order. Specificity
   * alone cannot beat it (docs/stack/frontend.md → vendor-specificity rule 1). */
  text-transform: none !important;
}
.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount {
  /* Same runtime-order reason as `.tox .tox-statusbar` above (#150). The
   * word-count selector is new in the 5.10 skin and carries its own `color`,
   * so it is enumerated explicitly rather than left to inherit. */
  color: var(--color-text-muted) !important;
}