/* ============================================================================
   HotelTRS dark mode

   GENERATED - do not edit by hand.
   Source: .design-system/scripts/build-dark-css.py
   Regenerate: python .design-system/scripts/build-dark-css.py

   Why these rules exist at all: the Blazorise theme bakes one set of literal
   LIGHT colours into a <style> element inside <body>, across 36 component
   generators. A <style> in <body> beats a stylesheet in <head> on document
   order, so flipping the tokens is not enough - the generated rules have to be
   out-specified. Prefixing with :root[data-theme="dark"] scores (0,3,0) and
   beats every one of them without a single !important on a colour.

   Each rule is emitted twice: once for an explicit dark choice, once for a
   dark OS with no explicit choice. That duplication is why this file is
   generated.
   ============================================================================ */

/* Redefine the handful of Blazorise variables its generated sheet
   actually reads, so those rules resolve dark at the source. */

:root[data-theme="dark"] {
  --b-theme-body-background-color: var(--trs-bg);
  --b-theme-body-text-color: var(--trs-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --b-theme-body-background-color: var(--trs-bg);
  --b-theme-body-text-color: var(--trs-text);
  }
}

/* ---- explicit choice ---- */

:root[data-theme="dark"] body {
    background-color: var(--trs-bg);
    color: var(--trs-text);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .offcanvas,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .list-group {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .popover-body,
:root[data-theme="dark"] .tooltip-inner {
    background-color: var(--trs-surface);
    color: var(--trs-text);
}

:root[data-theme="dark"] .list-group-item {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .flatpickr-input {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text);
    border-color: var(--trs-border-strong);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text);
    border-color: var(--trs-fill);
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .form-select::placeholder {
    color: var(--trs-text-muted);
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: var(--trs-bg);
    color: var(--trs-text-muted);
}

:root[data-theme="dark"] .form-check-input {
    background-color: var(--trs-surface-sunken);
    border-color: var(--trs-border-strong);
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: var(--trs-fill);
    border-color: var(--trs-fill);
}

:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .col-form-label,
:root[data-theme="dark"] label {
    color: var(--trs-text);
}

:root[data-theme="dark"] .table {
    --bs-table-bg: var(--trs-surface);
    --bs-table-color: var(--trs-text);
    --bs-table-border-color: var(--trs-border);
    --bs-table-striped-bg: var(--trs-surface-sunken);
    --bs-table-striped-color: var(--trs-text);
    --bs-table-hover-bg: var(--trs-p-100);
    --bs-table-hover-color: var(--trs-text);
    color: var(--trs-text);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .table > thead > tr > *,
:root[data-theme="dark"] .table-fixed-header > .table > thead th {
    background-color: var(--trs-fill);
    color: var(--trs-on-primary);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .btn-primary {
    background-color: var(--trs-fill);
    border-color: var(--trs-fill);
    color: var(--trs-on-primary);
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus,
:root[data-theme="dark"] .btn-primary:active {
    background-color: var(--trs-fill-hover);
    border-color: var(--trs-fill-hover);
    color: var(--trs-on-primary);
}

:root[data-theme="dark"] .btn-secondary {
    background-color: var(--trs-n-300);
    border-color: var(--trs-n-300);
    color: var(--trs-text);
}

:root[data-theme="dark"] .btn-light {
    background-color: var(--trs-surface-sunken);
    border-color: var(--trs-border);
    color: var(--trs-text);
}

:root[data-theme="dark"] .btn-outline-primary,
:root[data-theme="dark"] .btn-outline-secondary {
    color: var(--trs-text-primary);
    border-color: var(--trs-border-strong);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--trs-fill);
    border-color: var(--trs-fill);
    color: var(--trs-on-primary);
}

:root[data-theme="dark"] .btn-outline-success {
    color: var(--trs-success);
    border-color: var(--trs-success);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-info {
    color: var(--trs-info);
    border-color: var(--trs-info);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-warning {
    color: var(--trs-warning);
    border-color: var(--trs-warning);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-danger {
    color: var(--trs-danger);
    border-color: var(--trs-danger);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-light,
:root[data-theme="dark"] .btn-outline-dark {
    color: var(--trs-text);
    border-color: var(--trs-border-strong);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-success:hover {
    background-color: var(--trs-success);
    color: var(--trs-n-50);
    border-color: var(--trs-success);
}

:root[data-theme="dark"] .btn-outline-info:hover {
    background-color: var(--trs-info);
    color: var(--trs-n-50);
    border-color: var(--trs-info);
}

:root[data-theme="dark"] .btn-outline-warning:hover {
    background-color: var(--trs-warning);
    color: var(--trs-n-50);
    border-color: var(--trs-warning);
}

:root[data-theme="dark"] .btn-outline-danger:hover {
    background-color: var(--trs-danger);
    color: var(--trs-n-50);
    border-color: var(--trs-danger);
}

:root[data-theme="dark"] .btn-success {
    background-color: var(--trs-success);
    border-color: var(--trs-success);
    color: var(--trs-n-50);
}

:root[data-theme="dark"] .btn-info {
    background-color: var(--trs-info);
    border-color: var(--trs-info);
    color: var(--trs-n-50);
}

:root[data-theme="dark"] .btn-warning {
    background-color: var(--trs-warning);
    border-color: var(--trs-warning);
    color: var(--trs-n-50);
}

:root[data-theme="dark"] .btn-danger {
    background-color: var(--trs-danger);
    border-color: var(--trs-danger);
    color: var(--trs-n-50);
}

:root[data-theme="dark"] .btn-dark {
    background-color: var(--trs-n-300);
    border-color: var(--trs-n-300);
    color: var(--trs-n-800);
}

:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-dark {
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .text-black50 {
    color: var(--trs-text-muted) !important;
}

:root[data-theme="dark"] .badge.text-bg-primary,
:root[data-theme="dark"] .badge-close.text-bg-primary {
    background-color: var(--trs-p-100) !important;
    color: var(--trs-text-primary) !important;
}

:root[data-theme="dark"] .badge.text-bg-secondary,
:root[data-theme="dark"] .badge-close.text-bg-secondary {
    background-color: var(--trs-surface-sunken) !important;
    color: var(--trs-text-secondary) !important;
}

:root[data-theme="dark"] .badge.text-bg-success,
:root[data-theme="dark"] .badge-close.text-bg-success {
    background-color: var(--trs-success-bg) !important;
    color: var(--trs-success) !important;
}

:root[data-theme="dark"] .badge.text-bg-info,
:root[data-theme="dark"] .badge-close.text-bg-info {
    background-color: var(--trs-info-bg) !important;
    color: var(--trs-info) !important;
}

:root[data-theme="dark"] .badge.text-bg-warning,
:root[data-theme="dark"] .badge-close.text-bg-warning {
    background-color: var(--trs-warning-bg) !important;
    color: var(--trs-warning) !important;
}

:root[data-theme="dark"] .badge.text-bg-danger,
:root[data-theme="dark"] .badge-close.text-bg-danger {
    background-color: var(--trs-danger-bg) !important;
    color: var(--trs-danger) !important;
}

:root[data-theme="dark"] .badge.text-bg-light,
:root[data-theme="dark"] .badge-close.text-bg-light {
    background-color: var(--trs-surface-sunken) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .badge.text-bg-dark,
:root[data-theme="dark"] .badge-close.text-bg-dark {
    background-color: var(--trs-n-300) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .badge.text-bg-link,
:root[data-theme="dark"] .badge-close.text-bg-link {
    background-color: var(--trs-p-100) !important;
    color: var(--trs-text-primary) !important;
}

:root[data-theme="dark"] .table-danger,
:root[data-theme="dark"] .table-danger > td,
:root[data-theme="dark"] .table-danger > th,
:root[data-theme="dark"] .table-danger td,
:root[data-theme="dark"] .table-danger th {
    background-color: var(--trs-danger-bg) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-warning,
:root[data-theme="dark"] .table-warning > td,
:root[data-theme="dark"] .table-warning > th,
:root[data-theme="dark"] .table-warning td,
:root[data-theme="dark"] .table-warning th {
    background-color: var(--trs-warning-bg) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-success,
:root[data-theme="dark"] .table-success > td,
:root[data-theme="dark"] .table-success > th,
:root[data-theme="dark"] .table-success td,
:root[data-theme="dark"] .table-success th {
    background-color: var(--trs-success-bg) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-info,
:root[data-theme="dark"] .table-info > td,
:root[data-theme="dark"] .table-info > th,
:root[data-theme="dark"] .table-info td,
:root[data-theme="dark"] .table-info th {
    background-color: var(--trs-info-bg) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-secondary,
:root[data-theme="dark"] .table-secondary > td,
:root[data-theme="dark"] .table-secondary > th,
:root[data-theme="dark"] .table-secondary td,
:root[data-theme="dark"] .table-secondary th {
    background-color: var(--trs-surface-sunken) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-light > td,
:root[data-theme="dark"] .table-light > th,
:root[data-theme="dark"] .table-light td,
:root[data-theme="dark"] .table-light th {
    background-color: var(--trs-surface-sunken) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .table-dark,
:root[data-theme="dark"] .table-dark > td,
:root[data-theme="dark"] .table-dark > th,
:root[data-theme="dark"] .table-dark td,
:root[data-theme="dark"] .table-dark th {
    background-color: var(--trs-n-200) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .alert-success {
    background-color: var(--trs-success-bg);
    color: var(--trs-success);
    border-color: var(--trs-success);
}

:root[data-theme="dark"] .alert-info {
    background-color: var(--trs-info-bg);
    color: var(--trs-info);
    border-color: var(--trs-info);
}

:root[data-theme="dark"] .alert-warning {
    background-color: var(--trs-warning-bg);
    color: var(--trs-warning);
    border-color: var(--trs-warning);
}

:root[data-theme="dark"] .alert-danger {
    background-color: var(--trs-danger-bg);
    color: var(--trs-danger);
    border-color: var(--trs-danger);
}

:root[data-theme="dark"] .alert-light,
:root[data-theme="dark"] .alert-secondary,
:root[data-theme="dark"] .alert-dark {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .alert-primary {
    background-color: var(--trs-p-100);
    color: var(--trs-text-primary);
    border-color: var(--trs-p-300);
}

:root[data-theme="dark"] .btn.text-white {
    color: var(--trs-n-50) !important;
}

:root[data-theme="dark"] img[src*="HotelTRS-title"] {
    filter: invert(1) hue-rotate(180deg) brightness(1.6);
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

:root[data-theme="dark"] .nav-tabs,
:root[data-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--trs-border);
    color: var(--trs-text-secondary);
}

:root[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--trs-surface);
    color: var(--trs-text-primary);
    border-color: var(--trs-border) var(--trs-border) var(--trs-surface);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--trs-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text);
}

:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .breadcrumb-item,
:root[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--trs-text-secondary);
}

:root[data-theme="dark"] .breadcrumb-item > a,
:root[data-theme="dark"] .breadcrumb-item > a:hover {
    color: var(--trs-text-primary);
}

:root[data-theme="dark"] .page-link {
    background-color: var(--trs-surface);
    color: var(--trs-text-primary);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--trs-fill);
    border-color: var(--trs-fill);
    color: var(--trs-on-primary);
}

:root[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--trs-surface);
    color: var(--trs-text-muted);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .b-bar,
:root[data-theme="dark"] .b-bar-light,
:root[data-theme="dark"] .b-bar-dark,
:root[data-theme="dark"] .navbar-light,
:root[data-theme="dark"] .b-bar-menu,
:root[data-theme="dark"] .b-bar-dropdown-menu,
:root[data-theme="dark"] .b-bar-brand,
:root[data-theme="dark"] .b-bar-light .nav-item,
:root[data-theme="dark"] .b-bar-light .navbar-nav {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .btn-link,
:root[data-theme="dark"] .btn-link:hover {
    color: var(--trs-text-primary);
}

:root[data-theme="dark"] .b-bar-link,
:root[data-theme="dark"] .b-bar-item {
    color: var(--trs-text);
}

:root[data-theme="dark"] .b-bar-link:hover,
:root[data-theme="dark"] .b-bar-item:hover {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text-primary);
}

:root[data-theme="dark"] .b-layout-sider,
:root[data-theme="dark"] .b-layout-header,
:root[data-theme="dark"] .b-layout-footer {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .b-snackbar-body {
    background-color: var(--trs-n-700);
    color: var(--trs-n-50);
}

:root[data-theme="dark"] .accordion-button {
    background-color: var(--trs-surface);
    color: var(--trs-text);
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text-primary);
}

:root[data-theme="dark"] .progress {
    background-color: var(--trs-surface-sunken);
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
    border-color: var(--trs-border) !important;
}

:root[data-theme="dark"] hr {
    border-color: var(--trs-border);
    opacity: 1;
}

:root[data-theme="dark"] .text-muted {
    color: var(--trs-text-muted) !important;
}

:root[data-theme="dark"] .text-primary {
    color: var(--trs-text-primary) !important;
}

:root[data-theme="dark"] .text-secondary {
    color: var(--trs-text-secondary) !important;
}

:root[data-theme="dark"] .text-danger {
    color: var(--trs-danger) !important;
}

:root[data-theme="dark"] .text-success {
    color: var(--trs-success) !important;
}

:root[data-theme="dark"] .text-warning {
    color: var(--trs-warning) !important;
}

:root[data-theme="dark"] .text-info {
    color: var(--trs-info) !important;
}

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white {
    background-color: var(--trs-surface) !important;
    color: var(--trs-text) !important;
}

:root[data-theme="dark"] .border-1,
:root[data-theme="dark"] .border-2,
:root[data-theme="dark"] .border-3,
:root[data-theme="dark"] .border-4,
:root[data-theme="dark"] .border-5 {
    border-color: var(--trs-border) !important;
}

:root[data-theme="dark"] .trs-surface-sunken {
    background-color: var(--trs-surface-sunken);
}

:root[data-theme="dark"] .flatpickr-calendar,
:root[data-theme="dark"] .flatpickr-months,
:root[data-theme="dark"] .flatpickr-weekdays,
:root[data-theme="dark"] .flatpickr-day {
    background-color: var(--trs-surface);
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--trs-text-muted);
}

:root[data-theme="dark"] .flatpickr-weekday {
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-day.selected,
:root[data-theme="dark"] .flatpickr-day.selected:hover,
:root[data-theme="dark"] .flatpickr-day.startRange,
:root[data-theme="dark"] .flatpickr-day.endRange {
    background-color: var(--trs-fill);
    border-color: var(--trs-fill);
    color: var(--trs-on-primary);
}

:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .flatpickr-day.today:hover {
    background-color: var(--trs-surface-sunken);
}

:root[data-theme="dark"] .flatpickr-day.inRange {
    background-color: var(--trs-surface-sunken);
    border-color: var(--trs-surface-sunken);
}

:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--trs-surface);
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-time input,
:root[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-time input:hover,
:root[data-theme="dark"] .flatpickr-time input:focus,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--trs-surface-sunken);
    color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--trs-text);
}

:root[data-theme="dark"] .flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--trs-border);
}

:root[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--trs-surface);
}

:root[data-theme="dark"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--trs-border);
}

:root[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--trs-surface);
}

:root[data-theme="dark"] .ql-toolbar,
:root[data-theme="dark"] .ql-container,
:root[data-theme="dark"] .ql-container .ql-editor {
    background-color: var(--trs-surface);
    color: var(--trs-text);
    border-color: var(--trs-border);
}

:root[data-theme="dark"] .ql-snow .ql-stroke,
:root[data-theme="dark"] .ql-snow .ql-stroke.ql-thin {
    stroke: var(--trs-text);
}

:root[data-theme="dark"] .ql-snow .ql-fill,
:root[data-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--trs-text);
}

:root[data-theme="dark"] .ql-snow .ql-picker,
:root[data-theme="dark"] .ql-snow .ql-picker-label {
    color: var(--trs-text);
}

:root[data-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--trs-surface);
    border-color: var(--trs-border);
    color: var(--trs-text);
}

:root[data-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
:root[data-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-stroke,
:root[data-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
:root[data-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--trs-text-primary);
}

:root[data-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-fill,
:root[data-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: var(--trs-text-primary);
}

:root[data-theme="dark"] .ql-snow .ql-toolbar button:hover,
:root[data-theme="dark"] .ql-snow .ql-toolbar button.ql-active,
:root[data-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover,
:root[data-theme="dark"] .ql-snow .ql-toolbar .ql-picker-item:hover {
    color: var(--trs-text-primary);
}

:root[data-theme="dark"] .ql-snow .ql-editor.ql-blank::before {
    color: var(--trs-text-muted);
}

/* ---- dark OS, no explicit choice ---- */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) body {
        background-color: var(--trs-bg);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .modal-content,
    :root:not([data-theme="light"]) .dropdown-menu,
    :root:not([data-theme="light"]) .offcanvas,
    :root:not([data-theme="light"]) .accordion-item,
    :root:not([data-theme="light"]) .list-group {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .modal-header,
    :root:not([data-theme="light"]) .modal-footer,
    :root:not([data-theme="light"]) .card-header,
    :root:not([data-theme="light"]) .card-footer {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .popover,
    :root:not([data-theme="light"]) .popover-body,
    :root:not([data-theme="light"]) .tooltip-inner {
        background-color: var(--trs-surface);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .list-group-item {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select,
    :root:not([data-theme="light"]) .input-group-text,
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) .flatpickr-input {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text);
        border-color: var(--trs-border-strong);
    }

    :root:not([data-theme="light"]) .form-control:focus,
    :root:not([data-theme="light"]) .form-select:focus {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text);
        border-color: var(--trs-fill);
    }

    :root:not([data-theme="light"]) .form-control::placeholder,
    :root:not([data-theme="light"]) .form-select::placeholder {
        color: var(--trs-text-muted);
    }

    :root:not([data-theme="light"]) .form-control:disabled,
    :root:not([data-theme="light"]) .form-select:disabled,
    :root:not([data-theme="light"]) .form-control[readonly] {
        background-color: var(--trs-bg);
        color: var(--trs-text-muted);
    }

    :root:not([data-theme="light"]) .form-check-input {
        background-color: var(--trs-surface-sunken);
        border-color: var(--trs-border-strong);
    }

    :root:not([data-theme="light"]) .form-check-input:checked {
        background-color: var(--trs-fill);
        border-color: var(--trs-fill);
    }

    :root:not([data-theme="light"]) .form-label,
    :root:not([data-theme="light"]) .col-form-label,
    :root:not([data-theme="light"]) label {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .table {
        --bs-table-bg: var(--trs-surface);
        --bs-table-color: var(--trs-text);
        --bs-table-border-color: var(--trs-border);
        --bs-table-striped-bg: var(--trs-surface-sunken);
        --bs-table-striped-color: var(--trs-text);
        --bs-table-hover-bg: var(--trs-p-100);
        --bs-table-hover-color: var(--trs-text);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .table > :not(caption) > * > * {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .table > thead > tr > *,
    :root:not([data-theme="light"]) .table-fixed-header > .table > thead th {
        background-color: var(--trs-fill);
        color: var(--trs-on-primary);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .btn-primary {
        background-color: var(--trs-fill);
        border-color: var(--trs-fill);
        color: var(--trs-on-primary);
    }

    :root:not([data-theme="light"]) .btn-primary:hover,
    :root:not([data-theme="light"]) .btn-primary:focus,
    :root:not([data-theme="light"]) .btn-primary:active {
        background-color: var(--trs-fill-hover);
        border-color: var(--trs-fill-hover);
        color: var(--trs-on-primary);
    }

    :root:not([data-theme="light"]) .btn-secondary {
        background-color: var(--trs-n-300);
        border-color: var(--trs-n-300);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .btn-light {
        background-color: var(--trs-surface-sunken);
        border-color: var(--trs-border);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .btn-outline-primary,
    :root:not([data-theme="light"]) .btn-outline-secondary {
        color: var(--trs-text-primary);
        border-color: var(--trs-border-strong);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-primary:hover {
        background-color: var(--trs-fill);
        border-color: var(--trs-fill);
        color: var(--trs-on-primary);
    }

    :root:not([data-theme="light"]) .btn-outline-success {
        color: var(--trs-success);
        border-color: var(--trs-success);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-info {
        color: var(--trs-info);
        border-color: var(--trs-info);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-warning {
        color: var(--trs-warning);
        border-color: var(--trs-warning);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-danger {
        color: var(--trs-danger);
        border-color: var(--trs-danger);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-light,
    :root:not([data-theme="light"]) .btn-outline-dark {
        color: var(--trs-text);
        border-color: var(--trs-border-strong);
        background-color: transparent;
    }

    :root:not([data-theme="light"]) .btn-outline-success:hover {
        background-color: var(--trs-success);
        color: var(--trs-n-50);
        border-color: var(--trs-success);
    }

    :root:not([data-theme="light"]) .btn-outline-info:hover {
        background-color: var(--trs-info);
        color: var(--trs-n-50);
        border-color: var(--trs-info);
    }

    :root:not([data-theme="light"]) .btn-outline-warning:hover {
        background-color: var(--trs-warning);
        color: var(--trs-n-50);
        border-color: var(--trs-warning);
    }

    :root:not([data-theme="light"]) .btn-outline-danger:hover {
        background-color: var(--trs-danger);
        color: var(--trs-n-50);
        border-color: var(--trs-danger);
    }

    :root:not([data-theme="light"]) .btn-success {
        background-color: var(--trs-success);
        border-color: var(--trs-success);
        color: var(--trs-n-50);
    }

    :root:not([data-theme="light"]) .btn-info {
        background-color: var(--trs-info);
        border-color: var(--trs-info);
        color: var(--trs-n-50);
    }

    :root:not([data-theme="light"]) .btn-warning {
        background-color: var(--trs-warning);
        border-color: var(--trs-warning);
        color: var(--trs-n-50);
    }

    :root:not([data-theme="light"]) .btn-danger {
        background-color: var(--trs-danger);
        border-color: var(--trs-danger);
        color: var(--trs-n-50);
    }

    :root:not([data-theme="light"]) .btn-dark {
        background-color: var(--trs-n-300);
        border-color: var(--trs-n-300);
        color: var(--trs-n-800);
    }

    :root:not([data-theme="light"]) .text-body,
    :root:not([data-theme="light"]) .text-dark {
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .text-black50 {
        color: var(--trs-text-muted) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-primary,
    :root:not([data-theme="light"]) .badge-close.text-bg-primary {
        background-color: var(--trs-p-100) !important;
        color: var(--trs-text-primary) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-secondary,
    :root:not([data-theme="light"]) .badge-close.text-bg-secondary {
        background-color: var(--trs-surface-sunken) !important;
        color: var(--trs-text-secondary) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-success,
    :root:not([data-theme="light"]) .badge-close.text-bg-success {
        background-color: var(--trs-success-bg) !important;
        color: var(--trs-success) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-info,
    :root:not([data-theme="light"]) .badge-close.text-bg-info {
        background-color: var(--trs-info-bg) !important;
        color: var(--trs-info) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-warning,
    :root:not([data-theme="light"]) .badge-close.text-bg-warning {
        background-color: var(--trs-warning-bg) !important;
        color: var(--trs-warning) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-danger,
    :root:not([data-theme="light"]) .badge-close.text-bg-danger {
        background-color: var(--trs-danger-bg) !important;
        color: var(--trs-danger) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-light,
    :root:not([data-theme="light"]) .badge-close.text-bg-light {
        background-color: var(--trs-surface-sunken) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-dark,
    :root:not([data-theme="light"]) .badge-close.text-bg-dark {
        background-color: var(--trs-n-300) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .badge.text-bg-link,
    :root:not([data-theme="light"]) .badge-close.text-bg-link {
        background-color: var(--trs-p-100) !important;
        color: var(--trs-text-primary) !important;
    }

    :root:not([data-theme="light"]) .table-danger,
    :root:not([data-theme="light"]) .table-danger > td,
    :root:not([data-theme="light"]) .table-danger > th,
    :root:not([data-theme="light"]) .table-danger td,
    :root:not([data-theme="light"]) .table-danger th {
        background-color: var(--trs-danger-bg) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-warning,
    :root:not([data-theme="light"]) .table-warning > td,
    :root:not([data-theme="light"]) .table-warning > th,
    :root:not([data-theme="light"]) .table-warning td,
    :root:not([data-theme="light"]) .table-warning th {
        background-color: var(--trs-warning-bg) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-success,
    :root:not([data-theme="light"]) .table-success > td,
    :root:not([data-theme="light"]) .table-success > th,
    :root:not([data-theme="light"]) .table-success td,
    :root:not([data-theme="light"]) .table-success th {
        background-color: var(--trs-success-bg) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-info,
    :root:not([data-theme="light"]) .table-info > td,
    :root:not([data-theme="light"]) .table-info > th,
    :root:not([data-theme="light"]) .table-info td,
    :root:not([data-theme="light"]) .table-info th {
        background-color: var(--trs-info-bg) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-secondary,
    :root:not([data-theme="light"]) .table-secondary > td,
    :root:not([data-theme="light"]) .table-secondary > th,
    :root:not([data-theme="light"]) .table-secondary td,
    :root:not([data-theme="light"]) .table-secondary th {
        background-color: var(--trs-surface-sunken) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-light,
    :root:not([data-theme="light"]) .table-light > td,
    :root:not([data-theme="light"]) .table-light > th,
    :root:not([data-theme="light"]) .table-light td,
    :root:not([data-theme="light"]) .table-light th {
        background-color: var(--trs-surface-sunken) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .table-dark,
    :root:not([data-theme="light"]) .table-dark > td,
    :root:not([data-theme="light"]) .table-dark > th,
    :root:not([data-theme="light"]) .table-dark td,
    :root:not([data-theme="light"]) .table-dark th {
        background-color: var(--trs-n-200) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .alert-success {
        background-color: var(--trs-success-bg);
        color: var(--trs-success);
        border-color: var(--trs-success);
    }

    :root:not([data-theme="light"]) .alert-info {
        background-color: var(--trs-info-bg);
        color: var(--trs-info);
        border-color: var(--trs-info);
    }

    :root:not([data-theme="light"]) .alert-warning {
        background-color: var(--trs-warning-bg);
        color: var(--trs-warning);
        border-color: var(--trs-warning);
    }

    :root:not([data-theme="light"]) .alert-danger {
        background-color: var(--trs-danger-bg);
        color: var(--trs-danger);
        border-color: var(--trs-danger);
    }

    :root:not([data-theme="light"]) .alert-light,
    :root:not([data-theme="light"]) .alert-secondary,
    :root:not([data-theme="light"]) .alert-dark {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .alert-primary {
        background-color: var(--trs-p-100);
        color: var(--trs-text-primary);
        border-color: var(--trs-p-300);
    }

    :root:not([data-theme="light"]) .btn.text-white {
        color: var(--trs-n-50) !important;
    }

    :root:not([data-theme="light"]) img[src*="HotelTRS-title"] {
        filter: invert(1) hue-rotate(180deg) brightness(1.6);
    }

    :root:not([data-theme="light"]) .btn-close {
        filter: invert(1) grayscale(1) brightness(2);
    }

    :root:not([data-theme="light"]) .nav-tabs,
    :root:not([data-theme="light"]) .nav-tabs .nav-link {
        border-color: var(--trs-border);
        color: var(--trs-text-secondary);
    }

    :root:not([data-theme="light"]) .nav-tabs .nav-link.active {
        background-color: var(--trs-surface);
        color: var(--trs-text-primary);
        border-color: var(--trs-border) var(--trs-border) var(--trs-surface);
    }

    :root:not([data-theme="light"]) .dropdown-item {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .dropdown-item:hover,
    :root:not([data-theme="light"]) .dropdown-item:focus {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .dropdown-divider {
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .breadcrumb-item,
    :root:not([data-theme="light"]) .breadcrumb-item + .breadcrumb-item::before {
        color: var(--trs-text-secondary);
    }

    :root:not([data-theme="light"]) .breadcrumb-item > a,
    :root:not([data-theme="light"]) .breadcrumb-item > a:hover {
        color: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .page-link {
        background-color: var(--trs-surface);
        color: var(--trs-text-primary);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .page-item.active .page-link {
        background-color: var(--trs-fill);
        border-color: var(--trs-fill);
        color: var(--trs-on-primary);
    }

    :root:not([data-theme="light"]) .page-item.disabled .page-link {
        background-color: var(--trs-surface);
        color: var(--trs-text-muted);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .b-bar,
    :root:not([data-theme="light"]) .b-bar-light,
    :root:not([data-theme="light"]) .b-bar-dark,
    :root:not([data-theme="light"]) .navbar-light,
    :root:not([data-theme="light"]) .b-bar-menu,
    :root:not([data-theme="light"]) .b-bar-dropdown-menu,
    :root:not([data-theme="light"]) .b-bar-brand,
    :root:not([data-theme="light"]) .b-bar-light .nav-item,
    :root:not([data-theme="light"]) .b-bar-light .navbar-nav {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .btn-link,
    :root:not([data-theme="light"]) .btn-link:hover {
        color: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .b-bar-link,
    :root:not([data-theme="light"]) .b-bar-item {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .b-bar-link:hover,
    :root:not([data-theme="light"]) .b-bar-item:hover {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .b-layout-sider,
    :root:not([data-theme="light"]) .b-layout-header,
    :root:not([data-theme="light"]) .b-layout-footer {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .b-snackbar-body {
        background-color: var(--trs-n-700);
        color: var(--trs-n-50);
    }

    :root:not([data-theme="light"]) .accordion-button {
        background-color: var(--trs-surface);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .accordion-button:not(.collapsed) {
        background-color: var(--trs-surface-sunken);
        color: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .progress {
        background-color: var(--trs-surface-sunken);
    }

    :root:not([data-theme="light"]) .border,
    :root:not([data-theme="light"]) .border-top,
    :root:not([data-theme="light"]) .border-bottom,
    :root:not([data-theme="light"]) .border-start,
    :root:not([data-theme="light"]) .border-end {
        border-color: var(--trs-border) !important;
    }

    :root:not([data-theme="light"]) hr {
        border-color: var(--trs-border);
        opacity: 1;
    }

    :root:not([data-theme="light"]) .text-muted {
        color: var(--trs-text-muted) !important;
    }

    :root:not([data-theme="light"]) .text-primary {
        color: var(--trs-text-primary) !important;
    }

    :root:not([data-theme="light"]) .text-secondary {
        color: var(--trs-text-secondary) !important;
    }

    :root:not([data-theme="light"]) .text-danger {
        color: var(--trs-danger) !important;
    }

    :root:not([data-theme="light"]) .text-success {
        color: var(--trs-success) !important;
    }

    :root:not([data-theme="light"]) .text-warning {
        color: var(--trs-warning) !important;
    }

    :root:not([data-theme="light"]) .text-info {
        color: var(--trs-info) !important;
    }

    :root:not([data-theme="light"]) .bg-light,
    :root:not([data-theme="light"]) .bg-white {
        background-color: var(--trs-surface) !important;
        color: var(--trs-text) !important;
    }

    :root:not([data-theme="light"]) .border-1,
    :root:not([data-theme="light"]) .border-2,
    :root:not([data-theme="light"]) .border-3,
    :root:not([data-theme="light"]) .border-4,
    :root:not([data-theme="light"]) .border-5 {
        border-color: var(--trs-border) !important;
    }

    :root:not([data-theme="light"]) .trs-surface-sunken {
        background-color: var(--trs-surface-sunken);
    }

    :root:not([data-theme="light"]) .flatpickr-calendar,
    :root:not([data-theme="light"]) .flatpickr-months,
    :root:not([data-theme="light"]) .flatpickr-weekdays,
    :root:not([data-theme="light"]) .flatpickr-day {
        background-color: var(--trs-surface);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-day.flatpickr-disabled,
    :root:not([data-theme="light"]) .flatpickr-day.prevMonthDay,
    :root:not([data-theme="light"]) .flatpickr-day.nextMonthDay {
        color: var(--trs-text-muted);
    }

    :root:not([data-theme="light"]) .flatpickr-weekday {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-day.selected,
    :root:not([data-theme="light"]) .flatpickr-day.selected:hover,
    :root:not([data-theme="light"]) .flatpickr-day.startRange,
    :root:not([data-theme="light"]) .flatpickr-day.endRange {
        background-color: var(--trs-fill);
        border-color: var(--trs-fill);
        color: var(--trs-on-primary);
    }

    :root:not([data-theme="light"]) .flatpickr-day:hover,
    :root:not([data-theme="light"]) .flatpickr-day.today:hover {
        background-color: var(--trs-surface-sunken);
    }

    :root:not([data-theme="light"]) .flatpickr-day.inRange {
        background-color: var(--trs-surface-sunken);
        border-color: var(--trs-surface-sunken);
    }

    :root:not([data-theme="light"]) .flatpickr-current-month input.cur-year,
    :root:not([data-theme="light"]) .flatpickr-current-month .flatpickr-monthDropdown-months {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
        background-color: var(--trs-surface);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-current-month .numInputWrapper span.arrowUp:after {
        border-bottom-color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-current-month .numInputWrapper span.arrowDown:after {
        border-top-color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-months .flatpickr-prev-month svg,
    :root:not([data-theme="light"]) .flatpickr-months .flatpickr-next-month svg {
        fill: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-time input,
    :root:not([data-theme="light"]) .flatpickr-time .flatpickr-time-separator,
    :root:not([data-theme="light"]) .flatpickr-time .flatpickr-am-pm {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-time input:hover,
    :root:not([data-theme="light"]) .flatpickr-time input:focus,
    :root:not([data-theme="light"]) .flatpickr-time .flatpickr-am-pm:hover,
    :root:not([data-theme="light"]) .flatpickr-time .flatpickr-am-pm:focus {
        background: var(--trs-surface-sunken);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-time .numInputWrapper span.arrowUp:after {
        border-bottom-color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-time .numInputWrapper span.arrowDown:after {
        border-top-color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .flatpickr-calendar.arrowTop:before {
        border-bottom-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .flatpickr-calendar.arrowTop:after {
        border-bottom-color: var(--trs-surface);
    }

    :root:not([data-theme="light"]) .flatpickr-calendar.arrowBottom:before {
        border-top-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .flatpickr-calendar.arrowBottom:after {
        border-top-color: var(--trs-surface);
    }

    :root:not([data-theme="light"]) .ql-toolbar,
    :root:not([data-theme="light"]) .ql-container,
    :root:not([data-theme="light"]) .ql-container .ql-editor {
        background-color: var(--trs-surface);
        color: var(--trs-text);
        border-color: var(--trs-border);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-stroke,
    :root:not([data-theme="light"]) .ql-snow .ql-stroke.ql-thin {
        stroke: var(--trs-text);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-fill,
    :root:not([data-theme="light"]) .ql-snow .ql-stroke.ql-fill {
        fill: var(--trs-text);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-picker,
    :root:not([data-theme="light"]) .ql-snow .ql-picker-label {
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-picker-options {
        background-color: var(--trs-surface);
        border-color: var(--trs-border);
        color: var(--trs-text);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button:hover .ql-stroke,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
        stroke: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button:hover .ql-fill,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button.ql-active .ql-fill {
        fill: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button:hover,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar button.ql-active,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar .ql-picker-label:hover,
    :root:not([data-theme="light"]) .ql-snow .ql-toolbar .ql-picker-item:hover {
        color: var(--trs-text-primary);
    }

    :root:not([data-theme="light"]) .ql-snow .ql-editor.ql-blank::before {
        color: var(--trs-text-muted);
    }
}