/* ======================================================================
   Operator UI — «міст» для наявних сторінок (AdminLTE 3 / Bootstrap 4)
   Фаза A переходу на власний UI-кіт: усі старі сторінки отримують
   кольори, шрифти й форму елементів кіту в трьох темах без зміни їхньої розмітки.
   Токени — з operator-ui.css (підключати ПІСЛЯ нього). Claude, 2026-10-25.
   ====================================================================== */

html[data-theme] body {
    font-family: var(--ui-font);
    font-size: 14px;
    color: var(--ui-ink);
    background: var(--ui-bg);
    font-variant-numeric: tabular-nums;
}
html[data-theme] .content-wrapper,
html[data-theme] .main-footer { background: var(--ui-bg); color: var(--ui-ink); }
html[data-theme] .main-footer { border-top: 1px solid var(--ui-line); color: var(--ui-muted); }
:where(html[data-theme]) a { color: var(--ui-accent); }
:where(html[data-theme]) a:hover { color: color-mix(in srgb, var(--ui-accent) 80%, var(--ui-ink)); }
:where(html[data-theme]) :is(h1, h2, h3, h4, h5, h6) { color: var(--ui-ink); }
html[data-theme] .content-header h1 {
    font: 700 22px/1.2 var(--ui-font-title); text-transform: uppercase; letter-spacing: .01em;
}
html[data-theme] .text-dark { color: var(--ui-ink) !important; }
html[data-theme] .text-muted { color: var(--ui-muted) !important; }
html[data-theme] .text-primary { color: var(--ui-accent) !important; }
html[data-theme] .bg-white, html[data-theme] .bg-light { background-color: var(--ui-surface) !important; color: var(--ui-ink); }
html[data-theme] hr, html[data-theme] .dropdown-divider { border-color: var(--ui-line); }
html[data-theme] :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* ---------- Верхня панель ---------- */
html[data-theme] .main-header.navbar {
    background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); min-height: 60px;
}
html[data-theme] .main-header .nav-link { color: var(--ui-ink-2); }
html[data-theme] .main-header .nav-link:hover { color: var(--ui-ink); }
html[data-theme] .main-header .ui-theme-switch { margin-right: 10px; }

/* ---------- Бічне меню ---------- */
html[data-theme] .main-sidebar,
html[data-theme] .main-sidebar::before { background: var(--ui-side-bg) !important; box-shadow: none !important; }
html[data-theme] .main-sidebar { border-right: 1px solid var(--ui-side-line); }
html[data-theme] .main-sidebar .brand-link {
    display: flex; align-items: center; height: 60px; padding: 0 16px;
    border-bottom: 1px solid var(--ui-side-line) !important; color: var(--ui-side-ink);
}
html[data-theme] .main-sidebar .brand-link .ui-brand-logo,
html[data-theme] .main-sidebar .brand-link .ui-brand-mark { display: none; height: 34px; width: auto; max-width: 100%; }
html[data-theme] .main-sidebar .brand-link .ui-brand-mark { height: 30px; }
html[data-theme="light"] .main-sidebar .brand-link .ui-brand-logo.is-on-light,
html[data-theme="console"] .main-sidebar .brand-link .ui-brand-logo.is-on-dark,
html[data-theme="night"] .main-sidebar .brand-link .ui-brand-logo.is-on-dark { display: block; }
html[data-theme="light"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-logo,
html[data-theme="console"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-logo,
html[data-theme="night"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-logo { display: none; }
html[data-theme="light"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-mark.is-on-light,
html[data-theme="console"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-mark.is-on-dark,
html[data-theme="night"] .sidebar-collapse .main-sidebar:not(:hover) .brand-link .ui-brand-mark.is-on-dark { display: block; }
html[data-theme] .main-sidebar .brand-link .brand-text { display: none; }

html[data-theme] .main-sidebar .sidebar { padding: 6px 10px; }
html[data-theme] .nav-sidebar .nav-link {
    position: relative; border-radius: var(--ui-r-control); margin-bottom: 1px;
    color: var(--ui-side-ink) !important; padding: 8px 12px;
}
html[data-theme] .nav-sidebar .nav-link > .nav-icon { color: var(--ui-side-muted); }
html[data-theme] .nav-sidebar .nav-link > p { font-size: 14px; }
html[data-theme] .nav-sidebar .nav-link:hover { background: var(--ui-side-hover) !important; }
html[data-theme] .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme] .nav-sidebar .nav-treeview .nav-link.active {
    background: var(--ui-side-active) !important; color: var(--ui-side-ink) !important; box-shadow: none !important; font-weight: 500;
}
html[data-theme] .nav-sidebar .nav-link.active > .nav-icon { color: var(--ui-accent); }
/* червоний «штекер» активного пункту */
html[data-theme] .nav-sidebar .nav-link.active::before {
    content: ""; position: absolute; left: -10px; top: 50%; width: 5px; height: 18px;
    transform: translateY(-50%); border-radius: 0 4px 4px 0; background: var(--ui-accent);
}
html[data-theme] .nav-sidebar .menu-open > .nav-link { background: transparent !important; }
html[data-theme] .nav-sidebar .nav-treeview { padding-left: 8px; }
html[data-theme] .nav-sidebar .nav-header { color: var(--ui-side-muted); font-size: 12px; text-transform: none; }

/* ---------- Картки ---------- */
html[data-theme] .card {
    background: var(--ui-surface); color: var(--ui-ink);
    border: 1px solid var(--ui-line); border-radius: var(--ui-r-panel); box-shadow: none;
}
html[data-theme] .card-header { background: transparent; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); }
html[data-theme] .card-footer { background: var(--ui-surface-2); border-top: 1px solid var(--ui-line); }
html[data-theme] .card-title { font-weight: 600; font-size: 15px; }
html[data-theme] .card-primary.card-outline,
html[data-theme] .card-info.card-outline { border-top: 3px solid var(--ui-accent); }
html[data-theme] .card-outline-tabs { border-top: 1px solid var(--ui-line) !important; }
html[data-theme] .card-outline-tabs .card-header { padding: 0 12px; }
html[data-theme] .card-outline-tabs .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
html[data-theme] .card-outline-tabs .nav-tabs .nav-link.active { border-bottom-color: var(--ui-accent) !important; background: transparent; color: var(--ui-ink); }
html[data-theme] .card-primary:not(.card-outline) > .card-header,
html[data-theme] .card-info:not(.card-outline) > .card-header { background: var(--ui-surface-2); color: var(--ui-ink); }
html[data-theme] .small-box, html[data-theme] .info-box {
    background: var(--ui-surface) !important; color: var(--ui-ink) !important;
    border: 1px solid var(--ui-line); border-radius: var(--ui-r-panel); box-shadow: none;
}
html[data-theme] .info-box .info-box-icon { border-radius: var(--ui-r-control); }

/* ---------- Кнопки ---------- */
html[data-theme] .btn {
    border-radius: var(--ui-r-pill); font-weight: 600; font-size: 14px; padding: .4rem 1rem;
    box-shadow: none;
}
html[data-theme] .btn-sm { font-size: 13px; padding: .25rem .75rem; }
html[data-theme] .btn-xs { border-radius: var(--ui-r-pill); }
html[data-theme] .btn.btn-primary,
html[data-theme] .btn.btn-info {
    background: var(--ui-btn-bg); color: var(--ui-btn-ink); border: 1px solid var(--ui-accent);
    box-shadow: inset -3px 4px 0 0 var(--ui-accent);
}
html[data-theme] .btn.btn-primary:hover, html[data-theme] .btn.btn-primary:focus,
html[data-theme] .btn.btn-info:hover, html[data-theme] .btn.btn-info:focus,
html[data-theme] .btn.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ui-btn-bg); color: var(--ui-btn-ink); border-color: var(--ui-accent);
    box-shadow: inset -4px 5px 0 0 var(--ui-accent);
}
html[data-theme] .btn-secondary, html[data-theme] .btn-default, html[data-theme] .btn-light,
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-primary, html[data-theme] .btn-outline-info {
    background: var(--ui-btn-bg); color: var(--ui-btn-ink); border: 1px solid var(--ui-line-strong);
}
html[data-theme] .btn-secondary:hover, html[data-theme] .btn-default:hover, html[data-theme] .btn-light:hover,
html[data-theme] .btn-outline-secondary:hover, html[data-theme] .btn-outline-primary:hover, html[data-theme] .btn-outline-info:hover {
    background: var(--ui-surface-2); color: var(--ui-ink); border-color: var(--ui-ink-2);
}
html[data-theme] .btn-success { background: var(--lamp-on); border-color: var(--lamp-on); color: #fff; }
html[data-theme] .btn-warning { background: var(--lamp-wait); border-color: var(--lamp-wait); color: #1C1C1C; }
html[data-theme] .btn-danger { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
html[data-theme] .btn-outline-danger { color: var(--ui-accent); border-color: var(--ui-accent); }
html[data-theme] .btn-outline-danger:hover { background: var(--ui-accent); color: #fff; }
html[data-theme] .btn-outline-success { color: var(--lamp-on); border-color: var(--lamp-on); }
html[data-theme] .btn-link { color: var(--ui-ink); text-decoration: underline dotted; text-underline-offset: 3px; font-weight: 500; }
html[data-theme] .btn-link:hover { color: var(--ui-accent); }

/* ---------- Форми ---------- */
html[data-theme] .form-control,
html[data-theme] .custom-select,
html[data-theme] .custom-file-label {
    background-color: var(--ui-surface); color: var(--ui-ink);
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-control);
}
html[data-theme] .form-control:focus, html[data-theme] .custom-select:focus {
    border-color: var(--ui-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 20%, transparent);
    background-color: var(--ui-surface); color: var(--ui-ink);
}
html[data-theme] .form-control::placeholder { color: var(--ui-muted); }
html[data-theme] .form-control:disabled, html[data-theme] .form-control[readonly] { background-color: var(--ui-surface-2); color: var(--ui-muted); }
html[data-theme] .input-group-text { background: var(--ui-surface-2); color: var(--ui-muted); border-color: var(--ui-line-strong); }
html[data-theme] .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-theme] .input-group-append .input-group-text { border-radius: 0 var(--ui-r-control) var(--ui-r-control) 0; }
:where(html[data-theme]) label { color: var(--ui-ink-2); font-weight: 500; }
html[data-theme] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ui-accent); border-color: var(--ui-accent); }

/* ---------- Таблиці (у т.ч. DataTables з оформленням Bootstrap 4) ---------- */
html[data-theme] .table { color: var(--ui-ink); background: transparent; }
/* посилання в таблицях — кольором тексту, червоним лише при наведенні: інакше червоне все */
html[data-theme] .table a:not(.btn), html[data-theme] table.dataTable a:not(.btn) { color: var(--ui-ink); font-weight: 500; }
html[data-theme] .table a:not(.btn):hover, html[data-theme] table.dataTable a:not(.btn):hover { color: var(--ui-accent); text-decoration: underline; }
html[data-theme] .table th, html[data-theme] .table td { border-color: var(--ui-line); vertical-align: middle; }
html[data-theme] .table thead th {
    background: var(--ui-surface-2); color: var(--ui-muted); font-weight: 500; font-size: 13px;
    border-bottom: 1px solid var(--ui-line); border-top: 0;
}
html[data-theme] .table-bordered, html[data-theme] .table-bordered th, html[data-theme] .table-bordered td { border-color: var(--ui-line); }
html[data-theme] .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--ui-surface-2) 60%, transparent); }
html[data-theme] .table-hover tbody tr:hover, html[data-theme] table.dataTable tbody tr:hover {
    background: color-mix(in srgb, var(--ui-accent) 6%, transparent); color: var(--ui-ink);
}
html[data-theme] .dataTables_wrapper .dataTables_filter input,
html[data-theme] .dataTables_wrapper .dataTables_length select {
    background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-control);
}
html[data-theme] .dataTables_wrapper .dataTables_info { color: var(--ui-muted); }
html[data-theme] table.dataTable thead .sorting::before, html[data-theme] table.dataTable thead .sorting::after,
html[data-theme] table.dataTable thead .sorting_asc::before, html[data-theme] table.dataTable thead .sorting_asc::after,
html[data-theme] table.dataTable thead .sorting_desc::before, html[data-theme] table.dataTable thead .sorting_desc::after { color: var(--ui-muted); }
html[data-theme] table.dataTable thead .sorting_asc::before, html[data-theme] table.dataTable thead .sorting_desc::after { color: var(--ui-accent); opacity: 1; }
html[data-theme] .dt-buttons .btn { border-radius: var(--ui-r-pill) !important; margin-right: 4px; }

/* DataTables із класом «display» (без Bootstrap-класу .table) */
html[data-theme] table.dataTable { color: var(--ui-ink); background: transparent; border-collapse: collapse !important; }
html[data-theme] table.dataTable thead th, html[data-theme] table.dataTable thead td {
    background: var(--ui-surface-2); color: var(--ui-muted); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--ui-line) !important;
}
html[data-theme] table.dataTable tbody tr { background: transparent; }
html[data-theme] table.dataTable tbody td { border-top: 1px solid var(--ui-line) !important; vertical-align: middle; }
html[data-theme] table.dataTable.stripe tbody tr.odd, html[data-theme] table.dataTable.display tbody tr.odd { background: transparent; }
html[data-theme] table.dataTable.display tbody tr.odd > .sorting_1, html[data-theme] table.dataTable.display tbody tr.even > .sorting_1 { background: transparent; }
html[data-theme] table.dataTable.no-footer { border-bottom: 1px solid var(--ui-line) !important; }
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--ui-r-control) !important; color: var(--ui-ink-2) !important; border: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important;
}
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--ui-ink) !important; color: var(--ui-bg) !important; border-color: var(--ui-ink) !important; }
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; }
html[data-theme] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
html[data-theme] .dataTables_wrapper .dataTables_length, html[data-theme] .dataTables_wrapper .dataTables_filter,
html[data-theme] .dataTables_wrapper .dataTables_paginate { color: var(--ui-muted) !important; }
html[data-theme] .dataTables_wrapper .dataTables_processing { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-r-control); }

/* ---------- Пагінація ---------- */
html[data-theme] .page-link {
    background: var(--ui-surface); color: var(--ui-ink-2); border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-control) !important; margin: 0 2px; min-width: 34px; text-align: center;
}
html[data-theme] .page-link:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
html[data-theme] .page-item.active .page-link { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-bg); }
html[data-theme] .page-item.disabled .page-link { background: var(--ui-surface); color: var(--ui-muted); opacity: .5; }

/* ---------- Вікна, меню, вкладки, сповіщення ---------- */
html[data-theme] .modal-content { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-r-panel); }
html[data-theme] .modal-header, html[data-theme] .modal-footer { border-color: var(--ui-line); }
html[data-theme] .modal-title { font-weight: 600; }
html[data-theme] .close { color: var(--ui-ink); text-shadow: none; }
html[data-theme] .dropdown-menu { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-r-control); box-shadow: var(--ui-shadow-pop); }
html[data-theme] .dropdown-item { color: var(--ui-ink); }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus { background: var(--ui-surface-2); color: var(--ui-ink); }
html[data-theme] .dropdown-item.active, html[data-theme] .dropdown-item:active { background: var(--ui-accent-soft); color: var(--ui-ink); }
html[data-theme] .nav-tabs { border-bottom-color: var(--ui-line); }
html[data-theme] .nav-tabs .nav-link { color: var(--ui-muted); border: 0; border-bottom: 2px solid transparent; }
html[data-theme] .nav-tabs .nav-link.active, html[data-theme] .nav-tabs .nav-item.show .nav-link {
    background: transparent; color: var(--ui-ink); border-bottom-color: var(--ui-accent);
}
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link { border-radius: var(--ui-r-pill); color: var(--ui-ink-2); }
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link.active { background: var(--ui-ink); color: var(--ui-bg) !important; }
html[data-theme] .list-group-item { background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line); }
html[data-theme] .alert { border-radius: var(--ui-r-control); border: 1px solid var(--ui-line); }
html[data-theme] .alert-success { background: color-mix(in srgb, var(--lamp-on) 14%, var(--ui-surface)); color: var(--ui-ink); }
html[data-theme] .alert-danger { background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)); color: var(--ui-ink); }
html[data-theme] .alert-warning { background: color-mix(in srgb, var(--lamp-wait) 16%, var(--ui-surface)); color: var(--ui-ink); }
html[data-theme] .alert-info { background: var(--ui-surface-2); color: var(--ui-ink); }
html[data-theme] .badge { border-radius: var(--ui-r-pill); font-weight: 500; padding: .3em .7em; }
html[data-theme] .badge-primary, html[data-theme] .badge-info { background: var(--ui-ink); color: var(--ui-bg); }
html[data-theme] .badge-success { background: var(--lamp-on); }
html[data-theme] .badge-warning { background: var(--lamp-wait); color: #1C1C1C; }
html[data-theme] .badge-danger { background: var(--ui-accent); }
html[data-theme] .badge-secondary { background: var(--ui-line-strong); color: var(--ui-ink); }
html[data-theme] .progress { background: var(--ui-surface-2); border-radius: var(--ui-r-pill); }
html[data-theme] .progress-bar { background: var(--ui-accent); }

/* ---------- select2 ---------- */
html[data-theme] .select2-container--default .select2-selection--single,
html[data-theme] .select2-container--default .select2-selection--multiple {
    background: var(--ui-surface); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-control); min-height: 38px;
}
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ui-ink); line-height: 36px; }
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
html[data-theme] .select2-dropdown { background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line-strong); }
html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ui-accent); color: #fff; }
html[data-theme] .select2-container--default .select2-results__option[aria-selected=true] { background: var(--ui-surface-2); }
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ui-surface-2); border-color: var(--ui-line); color: var(--ui-ink); border-radius: var(--ui-r-pill);
}
html[data-theme] .select2-search__field { background: var(--ui-surface); color: var(--ui-ink); }

/* ---------- summernote (редактор) у темній темі ---------- */
html[data-theme="night"] .note-editor.note-frame { border-color: var(--ui-line); }
html[data-theme="night"] .note-editor .note-toolbar, html[data-theme="night"] .note-editor .note-statusbar { background: var(--ui-surface-2); }
html[data-theme="night"] .note-editor .note-editing-area .note-editable { background: var(--ui-surface); color: var(--ui-ink); }

/* ---------- Сторінки входу й реєстрації ---------- */
html[data-theme] .login-page, html[data-theme] .register-page { background: var(--ui-bg); }
html[data-theme] .login-box .card, html[data-theme] .register-box .card { border-radius: var(--ui-r-panel); }
html[data-theme] .login-logo a, html[data-theme] .register-logo a { color: var(--ui-ink); }

/* ---------- Перемикач теми у верхній панелі старих сторінок ---------- */
html[data-theme] .main-header .ui-theme-switch button span:not(.ui-theme-dot) { display: inline; }
@media (max-width: 991px) {
    html[data-theme] .main-header .ui-theme-switch button span:not(.ui-theme-dot) { display: none; }
}

/* ---------- Кнопки-фільтри на Tailwind (головна: «Вчора», «Останні 7 днів»…) ---------- */
html[data-theme] .filter-btn {
    border-radius: var(--ui-r-pill) !important; background: var(--ui-surface) !important; color: var(--ui-ink-2) !important;
    border: 1px solid var(--ui-line-strong); font-weight: 500;
}
html[data-theme] .filter-btn:hover { background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; }
html[data-theme] .filter-btn.btn-primary { background: var(--ui-ink) !important; color: var(--ui-bg) !important; border-color: var(--ui-ink); }
/* решта Tailwind-сірих фонів у вмісті — під токени теми */
html[data-theme] .content-wrapper .bg-white { background-color: var(--ui-surface) !important; }
html[data-theme] .content-wrapper .bg-gray-50, html[data-theme] .content-wrapper .bg-gray-100,
html[data-theme] .content-wrapper .bg-gray-200 { background-color: var(--ui-surface-2) !important; }
html[data-theme] .content-wrapper .text-gray-500, html[data-theme] .content-wrapper .text-gray-600 { color: var(--ui-muted) !important; }
html[data-theme] .content-wrapper .text-gray-700, html[data-theme] .content-wrapper .text-gray-800,
html[data-theme] .content-wrapper .text-gray-900 { color: var(--ui-ink) !important; }
html[data-theme] .content-wrapper .border-gray-200, html[data-theme] .content-wrapper .border-gray-300 { border-color: var(--ui-line) !important; }

/* батьківський пункт меню з відкритим підменю: без фону й «штекера» — штекер лише в активного підпункту */
html[data-theme] .nav-sidebar .nav-item:has(> .nav-treeview) > .nav-link.active { background: transparent !important; }
html[data-theme] .nav-sidebar .nav-item:has(> .nav-treeview) > .nav-link.active::before { display: none; }

/* «хлібні крихти» (власний клас bg-light-middle) */
html[data-theme] .breadcrumb {
    background: var(--ui-surface) !important; color: var(--ui-muted); border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-control);
}
html[data-theme] .breadcrumb a { color: var(--ui-ink); font-weight: 500; }
html[data-theme] .breadcrumb-item + .breadcrumb-item::before { color: var(--ui-muted); }
html[data-theme] .bg-light-middle { background-color: var(--ui-surface-2) !important; color: var(--ui-ink); }

/* рідні елементи браузера (календар у полі дати, прокрутка) — під темну тему */
html[data-theme="night"] { color-scheme: dark; }
html[data-theme="light"], html[data-theme="console"] { color-scheme: light; }
html[data-theme="console"] .main-sidebar { color-scheme: dark; }

/* ---------- «Користувачі й групи» (resources/css/pages/organization/users.css) ---------- */
html[data-theme] .org-users-tabs .nav-link { background: var(--ui-surface-2) !important; color: var(--ui-muted) !important; border-radius: var(--ui-r-pill); }
html[data-theme] .org-users-tabs .nav-link.active { background: var(--ui-ink) !important; color: var(--ui-bg) !important; border-color: var(--ui-ink); }
html[data-theme] .org-users-card { border-color: var(--ui-line); }
html[data-theme] .org-users-panel, html[data-theme] .role-setting-card,
html[data-theme] .org-users-permission-row, html[data-theme] .org-users-member-item {
    background: var(--ui-surface-2); border-color: var(--ui-line); color: var(--ui-ink);
}
html[data-theme] .org-tree ul { border-left-color: var(--ui-line-strong); }
html[data-theme] .org-tree li::before { background: var(--ui-line-strong); }
html[data-theme] .org-node-card { border-color: var(--ui-line); }
html[data-theme] .org-node-card.root { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-bg); }
html[data-theme] .org-node-card.color-default { background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] .org-node-action { color: var(--ui-ink-2); }
html[data-theme] .org-node-action.delete, html[data-theme] .role-allowed-remove { color: var(--ui-accent); }
html[data-theme] .org-users-groups-table thead th, html[data-theme] .org-users-roles-table thead th { color: var(--ui-muted); }
html[data-theme] .role-allowed-list .badge { background: var(--ui-surface-2); color: var(--ui-ink); }
html[data-theme] .role-color-item.selected { border-color: var(--ui-ink); box-shadow: 0 0 0 2px var(--ui-line); }

/* відтінок акценту для наведення — для сторінкових стилів (resources/css/pages), переведених на токени */
html[data-theme] { --ui-accent-strong: color-mix(in srgb, var(--ui-accent) 82%, #000); }

/* у темній темі зелений світліший — текст на ньому темний, щоб читався */
html[data-theme="night"] .btn-success, html[data-theme="night"] .badge-success { color: #1C1C1C; }

/* ---------- Сторінка помилки 403/404 (errors/admin, errors/admin-standalone) ---------- */
.ui-error {
    max-width: 640px; margin: 48px auto; padding: 32px; text-align: left;
    background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-r-panel);
}
.ui-error__code { font: 700 56px/1 var(--ui-font-title); color: var(--ui-accent); letter-spacing: .02em; margin-bottom: 12px; }
html[data-theme] .ui-error__title, .ui-error__title { font: 700 22px/1.25 var(--ui-font-title); text-transform: uppercase; margin: 0 0 10px; color: var(--ui-ink); }
.ui-error__text { font-size: 15px; line-height: 1.55; color: var(--ui-ink-2); margin: 0 0 10px; max-width: 52ch; }
.ui-error__path { font-size: 13px; color: var(--ui-muted); margin: 0 0 22px; word-break: break-all; }
.ui-error__path code { color: var(--ui-ink-2); background: var(--ui-surface-2); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.ui-error__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-error__actions a { text-decoration: none; }
.ui-error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ui-error--standalone { margin: 0; width: 100%; }
.ui-error__brand { margin-bottom: 28px; }
.ui-error__brand img { display: none; height: 40px; width: auto; }
:root[data-theme="light"] .ui-error__brand .is-on-light,
:root[data-theme="console"] .ui-error__brand .is-on-light,
:root[data-theme="night"] .ui-error__brand .is-on-dark { display: block; }
@media (max-width: 575px) { .ui-error { padding: 22px 18px; margin: 16px auto; } .ui-error__code { font-size: 44px; } }

/* ---------- Tailwind-утиліти в Livewire-компонентах (Інтеграції тощо) — під токени теми ----------
   Без цього в темній темі темний текст text-slate-900 лишався на темному тлі. Скрізь у зонах адмінки, і в модальних вікнах. */
html[data-theme] .bg-white { background-color: var(--ui-surface) !important; }
html[data-theme] .bg-slate-50, html[data-theme] .bg-slate-100, html[data-theme] .bg-gray-50,
html[data-theme] .bg-gray-100, html[data-theme] .bg-gray-200 { background-color: var(--ui-surface-2) !important; }
html[data-theme] .text-slate-900, html[data-theme] .text-slate-800, html[data-theme] .text-gray-900,
html[data-theme] .text-gray-800 { color: var(--ui-ink) !important; }
html[data-theme] .text-slate-700, html[data-theme] .text-slate-600, html[data-theme] .text-gray-700,
html[data-theme] .text-gray-600 { color: var(--ui-ink-2) !important; }
html[data-theme] .text-slate-500, html[data-theme] .text-slate-400, html[data-theme] .text-gray-500,
html[data-theme] .text-gray-400 { color: var(--ui-muted) !important; }
html[data-theme] .border-slate-200, html[data-theme] .border-gray-200 { border-color: var(--ui-line) !important; }
html[data-theme] .border-slate-300, html[data-theme] .border-gray-300 { border-color: var(--ui-line-strong) !important; }
html[data-theme] .hover\:bg-slate-50:hover, html[data-theme] .hover\:bg-slate-100:hover,
html[data-theme] .hover\:bg-slate-200:hover, html[data-theme] .hover\:bg-slate-200\/70:hover,
html[data-theme] .hover\:bg-gray-300:hover { background-color: color-mix(in srgb, var(--ui-ink) 10%, var(--ui-surface)) !important; }
html[data-theme] .hover\:text-slate-800:hover, html[data-theme] .hover\:text-slate-700:hover,
html[data-theme] .hover\:text-slate-600:hover { color: var(--ui-ink) !important; }
/* синій акцент Tailwind → акцент бренду */
html[data-theme] .bg-blue-600 { background-color: var(--ui-accent) !important; color: #fff !important; }
html[data-theme] .hover\:bg-blue-700:hover { background-color: var(--ui-accent-strong) !important; }
html[data-theme] .text-blue-600, html[data-theme] .text-blue-700, html[data-theme] .hover\:text-blue-700:hover { color: var(--ui-accent) !important; }
html[data-theme] .border-blue-600 { border-color: var(--ui-accent) !important; }
html[data-theme] .bg-blue-50 { background-color: var(--ui-accent-soft) !important; }
html[data-theme] .focus\:border-blue-600:focus { border-color: var(--ui-focus) !important; }
html[data-theme] .focus\:ring-2:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 25%, transparent) !important; }
html[data-theme] .hover\:bg-red-50:hover { background-color: var(--ui-accent-soft) !important; }
/* поля Tailwind-форм: текст, підказка, стрілка списку в темній темі */
html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]).bg-white,
html[data-theme] select.bg-white, html[data-theme] textarea.bg-white { color: var(--ui-ink) !important; }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--ui-muted); opacity: 1; }
html[data-theme] select option { background: var(--ui-surface); color: var(--ui-ink); }
html[data-theme] input[type="checkbox"], html[data-theme] input[type="radio"] { accent-color: var(--ui-accent); }
/* поле з автозаповненням браузера (там, де воно дозволене — вхід) не біліє в темній темі */
html[data-theme="night"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--ui-ink); caret-color: var(--ui-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ui-surface-2) inset; transition: background-color 9999s;
}

/* Перемикач мови інтерфейсу (layouts/admin/main, 2026-10-29): код мови в «пігулці», список — назви мовою самої мови; від 7 мов — дві колонки */
.ui-lang .ui-lang__toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 0 6px;
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-pill); color: var(--ui-ink);
    font-size: 13px; font-weight: 600; line-height: 1.4;
}
.ui-lang .ui-lang__toggle:hover, .ui-lang.show .ui-lang__toggle { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-lang .ui-lang__toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-lang .ui-lang__menu { min-width: 220px; padding: 6px; max-height: 70vh; overflow-y: auto; }
.ui-lang .ui-lang__menu--wide.show { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); column-gap: 4px; min-width: 340px; }
.ui-lang .ui-lang__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 10px; border-radius: var(--ui-r-control); color: var(--ui-ink); white-space: nowrap;
}
.ui-lang .ui-lang__item:hover, .ui-lang .ui-lang__item:focus { background: var(--ui-accent-soft); color: var(--ui-ink); }
.ui-lang .ui-lang__item.active, .ui-lang .ui-lang__item.active:hover { background: transparent; color: var(--ui-accent); font-weight: 600; }
.ui-lang .ui-lang__abbr { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ui-muted); }
.ui-lang .ui-lang__item.active .ui-lang__abbr { color: var(--ui-accent); }
@media (max-width: 575.98px) {
    .ui-lang .ui-lang__toggle { margin: 0 2px; padding: 4px 8px; }
    .ui-lang .ui-lang__toggle .fa-globe { display: none; }
    .ui-lang .ui-lang__menu--wide.show { grid-template-columns: 1fr; min-width: 200px; }
}

/* Меню «Підприємство» (2026-10-31): вкладені розділи (Моя команда, HR, Кол-центр) — з відступом, щоб рівні було видно */
.nav-sidebar .nav-enterprise > .nav-treeview { padding-left: .6rem; }
.nav-sidebar .nav-enterprise .nav-treeview .nav-treeview { padding-left: .9rem; }

/* ---------- Дзвіночок: непрочитані повідомлення в тікетах (2026-10-31) ---------- */
.ui-bell .ui-bell__toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0 4px; padding: 0; border-radius: 50%;
    border: 1px solid var(--ui-line); color: var(--ui-ink-2); background: transparent;
}
.ui-bell .ui-bell__toggle:hover, .ui-bell.show .ui-bell__toggle { border-color: var(--ui-accent); color: var(--ui-accent); }
.ui-bell .ui-bell__toggle:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-bell .ui-bell__toggle.has-unread { color: var(--ui-ink); border-color: var(--ui-accent); }
.ui-bell__badge {
    position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
    background: var(--ui-accent, #E31E24); color: #FFFFFF; font: 700 11px/1 var(--ui-font, sans-serif);
    box-shadow: 0 0 0 2px var(--ui-surface, #FFFFFF);
}
.ui-bell__badge[hidden] { display: none; }
.ui-bell__toggle.is-ringing .ui-bell__icon, .pt-bell__link.is-ringing svg { animation: ui-bell-ring .9s ease-in-out 1; transform-origin: 50% 2px; }
@keyframes ui-bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .ui-bell__toggle.is-ringing .ui-bell__icon, .pt-bell__link.is-ringing svg { animation: none; } }
.ui-bell .ui-bell__menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ui-bell__head { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--ui-line); }
.ui-bell__list { max-height: 60vh; overflow-y: auto; }
.ui-bell .ui-bell__item { display: grid; grid-template-columns: 8px 1fr; gap: 12px; align-items: start; padding: 12px 16px; white-space: normal; border-bottom: 1px solid var(--ui-line); }
.ui-bell .ui-bell__item:hover, .ui-bell .ui-bell__item:focus { background: var(--ui-accent-soft); color: var(--ui-ink); }
.ui-bell__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ui-accent); }
.ui-bell__text { display: grid; gap: 2px; min-width: 0; }
.ui-bell__subject { font-weight: 600; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bell__meta { font-size: 12px; color: var(--ui-muted); }
.ui-bell__empty { padding: 18px 16px; color: var(--ui-muted); font-size: 14px; }
.ui-bell .ui-bell__all { display: block; padding: 11px 16px; text-align: center; font-weight: 600; color: var(--ui-accent); }
@media (max-width: 575.98px) {
    .ui-bell .ui-bell__toggle { width: 36px; height: 36px; margin: 0 2px; }
}
/* перебиваємо відступи й колір .navbar-light .nav-link AdminLTE */
.main-header .navbar-nav .ui-bell .ui-bell__toggle { padding: 0; color: var(--ui-ink-2); }
.main-header .navbar-nav .ui-bell .ui-bell__toggle:hover,
.main-header .navbar-nav .ui-bell.show .ui-bell__toggle { color: var(--ui-accent); }
.main-header .navbar-nav .ui-bell .ui-bell__toggle.has-unread { color: var(--ui-ink); }
.ui-bell .ui-bell__toggle:focus:not(:focus-visible) { outline: none; }
.ui-bell__icon { flex: none; width: 20px; height: 20px; }