/* ==========================================================================
   Nolecom World — Tema scuro
   Attivato da html[data-theme="dark"]. Palette grafite-blu: l'elevazione è
   codificata dalla luminosità (pagina < card < superfici rialzate < hover).
   Ogni override usa le variabili: per ritoccare un colore si cambia una riga.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Superfici (dal basso verso l'alto) */
    --th-bg:        #10151b;   /* sfondo pagina */
    --th-surface:   #171e26;   /* card, header, tabelle */
    --th-raised:    #1f2937;   /* dropdown, modali, popover */
    --th-hover:     #263241;   /* hover di righe e voci */
    --th-inset:     #0c1116;   /* campi input (incassati) */

    /* Testo */
    --th-text:      #dbe4ed;
    --th-text-2:    #8fa1b3;
    --th-text-3:    #5c6d7e;

    /* Bordi */
    --th-border:      #2c3a49;
    --th-border-soft: #223040;

    /* Accento e semantici ricalibrati per fondo scuro */
    --th-primary:      #6ea8e8;
    --th-primary-dim:  #33517a;
    --th-link:         #7fb1ec;
    --th-success:      #6fbf73;
    --th-success-bg:   #1d3524;
    --th-danger:       #e57373;
    --th-danger-bg:    #3a2023;
    --th-warning:      #d9b13f;
    --th-warning-bg:   #382e14;
    --th-info:         #62b0c9;
    --th-info-bg:      #16303a;

    --th-shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   Base: pagina, testo, link
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .page-main {
    background-color: var(--th-bg) !important;
    color: var(--th-text);
}

html[data-theme="dark"] a:not(.btn):not(.badge):not(.tag):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: var(--th-link);
}

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] label, html[data-theme="dark"] .form-label {
    color: var(--th-text);
}

html[data-theme="dark"] .text-muted, html[data-theme="dark"] .small, html[data-theme="dark"] small {
    color: var(--th-text-2) !important;
}

html[data-theme="dark"] .text-dark { color: var(--th-text) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--th-surface) !important; }
html[data-theme="dark"] hr { border-color: var(--th-border-soft); }

/* Scrollbar */
html[data-theme="dark"] { scrollbar-color: var(--th-hover) var(--th-bg); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--th-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--th-hover); border-radius: 6px; border: 2px solid var(--th-bg); }

/* Overlay di caricamento (base.html.twig usa sfondo #fff inline) */
html[data-theme="dark"] .se-pre-con { background-color: var(--th-bg) !important; }

/* --------------------------------------------------------------------------
   Header e navigazione
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .header {
    background: var(--th-surface) !important;
    border-bottom: 1px solid var(--th-border-soft);
}
/* Logo: variante bianca su fondo scuro. content:url() scavalca l'attributo src,
   quindi regge anche ai reset via JS (es. bacheca/index.html.twig). */
html[data-theme="dark"] .header-brand-img,
html[data-theme="dark"] .mobile-header img,
html[data-theme="dark"] .col-login img.h-6 {
    content: url('../images/nolecom_white.png');
}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .header .nav-item .nav-link {
    color: var(--th-text-2);
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-item.active .nav-link,
html[data-theme="dark"] .nav-link.active {
    color: var(--th-primary);
}
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--th-border); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--th-surface);
    border-color: var(--th-border) var(--th-border) var(--th-surface);
    color: var(--th-text);
}
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
    background: var(--th-surface);
    border-top-color: var(--th-border-soft);
    color: var(--th-text-2);
    box-shadow: none;
}
html[data-theme="dark"] .breadcrumb { background-color: var(--th-surface); }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--th-text-3); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--th-text-2); }
html[data-theme="dark"] .breadcrumb-item.active b { color: var(--th-text); }

/* Tab della homepage (regole base in nolecom.css) */
html[data-theme="dark"] .home-tabs { border-bottom-color: var(--th-border); }
html[data-theme="dark"] .tab-label { color: var(--th-text-3); }
html[data-theme="dark"] .tab-label:hover { color: var(--th-text-2); }
html[data-theme="dark"] .tab-input:checked + .tab-label {
    color: var(--th-text);
    border-left-color: var(--th-border);
    border-right-color: var(--th-border);
    border-bottom-color: var(--th-surface);
}
html[data-theme="dark"] .tab-input:checked:first-child + .tab-label { border-left-color: var(--th-border); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .card {
    background-color: var(--th-surface);
    border-color: var(--th-border-soft);
    box-shadow: none;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--th-surface);
    border-color: var(--th-border-soft);
    color: var(--th-text);
}
html[data-theme="dark"] .card-title { color: var(--th-text); }
html[data-theme="dark"] .list-group-item {
    background-color: var(--th-surface);
    border-color: var(--th-border-soft);
    color: var(--th-text);
}

/* --------------------------------------------------------------------------
   Tabelle e DataTables
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
    color: var(--th-text);
    background-color: transparent;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--th-border-soft);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table .thead-light th,
html[data-theme="dark"] table.dataTable thead th {
    background-color: var(--th-raised);
    color: var(--th-text-2);
    border-color: var(--th-border);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.025);
}
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
    background-color: var(--th-hover);
    color: var(--th-text);
}
html[data-theme="dark"] table.dataTable tbody tr { background-color: transparent; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--th-text-2);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--th-text-2) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--th-hover) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .page-link {
    background-color: var(--th-surface);
    border-color: var(--th-border);
    color: var(--th-text-2);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--th-primary-dim);
    border-color: var(--th-primary-dim);
    color: var(--th-text);
}

/* Righe degli elenchi ordini/report (activity_assigned, report):
   in nolecom.css hanno sfondi bianchi/grigi chiari fissi */
html[data-theme="dark"] .report_customer_td,
html[data-theme="dark"] .report_customer_td_odd { background-color: var(--th-surface); }
html[data-theme="dark"] .report_customer_td:hover,
html[data-theme="dark"] .report_customer_td_odd:hover { background-color: var(--th-hover); }
html[data-theme="dark"] .report_customer { background-color: var(--th-raised); }
html[data-theme="dark"] .report_customer_odd { background-color: var(--th-hover); }
html[data-theme="dark"] .stanby_order { background: var(--th-warning-bg); }
html[data-theme="dark"] .stanby_order:hover { background-color: #4a3d1a; }

/* Tabelle DataTables Nolecom: il bianco !important di nolecom.css va ribattuto */
html[data-theme="dark"] .table-datatable-nolecom {
    background-color: var(--th-surface) !important;
    border-color: var(--th-border);
}
html[data-theme="dark"] .thBorderRight > th { border-right-color: var(--th-border); }
html[data-theme="dark"] .dataTables_scrollFoot tfoot tr {
    background-color: var(--th-raised);
    border-top-color: var(--th-border);
}

/* Righe evidenziate con classi semantiche nelle tabelle */
html[data-theme="dark"] .table .bg-success, html[data-theme="dark"] tr.bg-success { background-color: var(--th-success-bg) !important; }
html[data-theme="dark"] .table .bg-danger,  html[data-theme="dark"] tr.bg-danger  { background-color: var(--th-danger-bg) !important; }
html[data-theme="dark"] .table .bg-warning, html[data-theme="dark"] tr.bg-warning { background-color: var(--th-warning-bg) !important; }

/* Classi contestuali Bootstrap (table-success ecc.): i pastello chiari diventano tinte scure */
html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-success > th,
html[data-theme="dark"] .table-success > td { background-color: var(--th-success-bg) !important; }
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger > th,
html[data-theme="dark"] .table-danger > td { background-color: var(--th-danger-bg) !important; }
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-warning > th,
html[data-theme="dark"] .table-warning > td { background-color: var(--th-warning-bg) !important; }
html[data-theme="dark"] .table-hover .table-success:hover,
html[data-theme="dark"] .table-hover .table-success:hover > td,
html[data-theme="dark"] .table-hover .table-danger:hover,
html[data-theme="dark"] .table-hover .table-danger:hover > td,
html[data-theme="dark"] .table-hover .table-warning:hover,
html[data-theme="dark"] .table-hover .table-warning:hover > td { background-color: var(--th-hover) !important; }

/* --------------------------------------------------------------------------
   Form: input, select, textarea, checkbox, datepicker
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--th-inset);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: var(--th-inset);
    border-color: var(--th-primary);
    color: var(--th-text);
    box-shadow: 0 0 0 2px rgba(110, 168, 232, 0.25);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--th-text-3);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--th-surface);
    color: var(--th-text-2);
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--th-raised);
    border-color: var(--th-border);
    color: var(--th-text-2);
}
html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--th-inset);
    border-color: var(--th-border);
}
html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--th-primary-dim);
    border-color: var(--th-primary);
}
html[data-theme="dark"] .selectgroup-button {
    border-color: var(--th-border);
    color: var(--th-text-2);
}
html[data-theme="dark"] .selectgroup-input:checked + .selectgroup-button {
    background-color: var(--th-primary-dim);
    color: var(--th-text);
}

/* Bootstrap datepicker */
html[data-theme="dark"] .datepicker-dropdown {
    background-color: var(--th-raised);
    border-color: var(--th-border);
    box-shadow: var(--th-shadow);
    color: var(--th-text);
}
html[data-theme="dark"] .datepicker-dropdown:before { border-bottom-color: var(--th-border); }
html[data-theme="dark"] .datepicker-dropdown:after { border-bottom-color: var(--th-raised); }
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
    color: var(--th-text);
}
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
    color: var(--th-text-3);
}
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.focused {
    background: var(--th-hover);
}
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: var(--th-primary-dim) !important;
    background-image: none;
    color: var(--th-text) !important;
}
html[data-theme="dark"] .datepicker table tr td.today {
    background-color: var(--th-warning-bg) !important;
    background-image: none;
    color: var(--th-text) !important;
}

/* --------------------------------------------------------------------------
   Dropdown e menu
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--th-raised);
    border-color: var(--th-border);
    box-shadow: var(--th-shadow);
    color: var(--th-text);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--th-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active {
    background-color: var(--th-hover);
    color: var(--th-text);
}
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--th-border-soft); }
html[data-theme="dark"] .dropdown-menu-arrow:before {
    background: var(--th-raised);
    border-color: var(--th-border);
}
html[data-theme="dark"] .dropdown-header { color: var(--th-text-2); }

/* --------------------------------------------------------------------------
   Modali, tooltip, popover
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--th-raised);
    border-color: var(--th-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--th-border-soft);
}
html[data-theme="dark"] .modal-title { color: var(--th-text); }
html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; }
html[data-theme="dark"] .close { color: var(--th-text); text-shadow: none; }
html[data-theme="dark"] .popover {
    background-color: var(--th-raised);
    border-color: var(--th-border);
}
html[data-theme="dark"] .popover-body { color: var(--th-text); }
html[data-theme="dark"] .tooltip-inner { background-color: var(--th-raised); color: var(--th-text); }

/* --------------------------------------------------------------------------
   Bottoni neutri (i colorati restano, funzionano anche su scuro)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
    background-color: var(--th-raised);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--th-hover);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--th-border);
    color: var(--th-text-2);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--th-hover);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .btn-link { color: var(--th-link); }

/* --------------------------------------------------------------------------
   Alert e badge
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .alert-success { background-color: var(--th-success-bg); border-color: var(--th-success); color: #b5e2b8; }
html[data-theme="dark"] .alert-danger  { background-color: var(--th-danger-bg);  border-color: var(--th-danger);  color: #f2c1c1; }
html[data-theme="dark"] .alert-warning { background-color: var(--th-warning-bg); border-color: var(--th-warning); color: #ecd9a0; }
html[data-theme="dark"] .alert-info    { background-color: var(--th-info-bg);    border-color: var(--th-info);    color: #bfe0eb; }

/* --------------------------------------------------------------------------
   Select2
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--th-inset);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--th-text);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--th-text-3);
}
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--th-raised);
    border-color: var(--th-border);
    box-shadow: var(--th-shadow);
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--th-inset);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .select2-results__option { color: var(--th-text); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--th-primary-dim);
    color: var(--th-text);
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--th-hover);
    color: var(--th-text);
}
html[data-theme="dark"] .select2-results__group { color: var(--th-text-2); }
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--th-hover);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--th-surface);
}

/* --------------------------------------------------------------------------
   Resource planner: FullCalendar 4, sidenav laterale, tooltip eventi
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed .fc-content,
html[data-theme="dark"] .fc-unthemed .fc-popover,
html[data-theme="dark"] .fc-unthemed .fc-list-view,
html[data-theme="dark"] .fc-unthemed .fc-list-heading td {
    border-color: var(--th-border-soft);
}
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-popover .fc-header,
html[data-theme="dark"] .fc-unthemed .fc-list-heading td,
html[data-theme="dark"] .fc-widget-header {
    background: var(--th-raised);
}
html[data-theme="dark"] .fc-unthemed td.fc-today { background: var(--th-warning-bg); }
html[data-theme="dark"] .fc-unthemed .fc-popover {
    background: var(--th-raised);
    border-color: var(--th-border);
}
html[data-theme="dark"] .fc-cell-shaded,
html[data-theme="dark"] .fc-unthemed .fc-disabled-day { background: var(--th-inset); }
html[data-theme="dark"] .fc-holiday { background: var(--th-inset); }

html[data-theme="dark"] .sidenav,
html[data-theme="dark"] .sidenav-large {
    background-color: var(--th-surface);
}
html[data-theme="dark"] .tooltiptopicevent {
    background: var(--th-raised);
    border-color: var(--th-border);
    color: var(--th-text);
}

/* --------------------------------------------------------------------------
   Dropzone
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .dropzone {
    background: var(--th-inset) !important;
    border: 1px dashed var(--th-border) !important;
    color: var(--th-text-2);
}
html[data-theme="dark"] .dropzone .dz-message { color: var(--th-text-2); }
html[data-theme="dark"] .dropzone .dz-preview .dz-details {
    background-color: var(--th-raised);
    color: var(--th-text);
}
html[data-theme="dark"] .dropzone .dz-preview {
    background: transparent;
}
html[data-theme="dark"] .dropzone .dz-preview .dz-image {
    background: var(--th-raised);
}

/* --------------------------------------------------------------------------
   Vista mobile
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .mobile-action-card {
    background: var(--th-surface) !important;
    border-color: var(--th-border-soft) !important;
    color: var(--th-text) !important;
}

/* --------------------------------------------------------------------------
   Dettagli: avatar, tag, progress, stamp, editor markdown
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .tag {
    background-color: var(--th-hover);
    color: var(--th-text);
}
/* I tag colorati mantengono la codifica semantica: tinte ricalibrate per fondo
   scuro, dichiarate dopo la regola base .tag per vincerla a parità di specificità */
html[data-theme="dark"] .tag-blue,
html[data-theme="dark"] .tag-primary   { background-color: #3a6db5; color: #fff; }
html[data-theme="dark"] .tag-indigo    { background-color: #5a68b8; color: #fff; }
html[data-theme="dark"] .tag-purple    { background-color: #8e54c9; color: #fff; }
html[data-theme="dark"] .tag-pink      { background-color: #c95d85; color: #fff; }
html[data-theme="dark"] .tag-red,
html[data-theme="dark"] .tag-danger    { background-color: #b03434; color: #fff; }
html[data-theme="dark"] .tag-orange    { background-color: #c97a37; color: #fff; }
html[data-theme="dark"] .tag-yellow,
html[data-theme="dark"] .tag-warning   { background-color: var(--th-warning); color: #241c07; }
html[data-theme="dark"] .tag-green,
html[data-theme="dark"] .tag-lime,
html[data-theme="dark"] .tag-success   { background-color: #4d8a33; color: #fff; }
html[data-theme="dark"] .tag-teal      { background-color: #2a9d8f; color: #fff; }
html[data-theme="dark"] .tag-cyan,
html[data-theme="dark"] .tag-azure,
html[data-theme="dark"] .tag-info      { background-color: #2f7f99; color: #fff; }
html[data-theme="dark"] .tag-gray,
html[data-theme="dark"] .tag-secondary { background-color: #55606c; color: #fff; }
html[data-theme="dark"] .progress { background-color: var(--th-inset); }
html[data-theme="dark"] .stamp { background: var(--th-hover); }
html[data-theme="dark"] .avatar { background-color: var(--th-hover) center/cover; color: var(--th-text-2); }
html[data-theme="dark"] .CodeMirror,
html[data-theme="dark"] .editor-toolbar {
    background-color: var(--th-inset);
    border-color: var(--th-border);
    color: var(--th-text);
}
html[data-theme="dark"] .editor-toolbar a { color: var(--th-text-2) !important; }