/* ======================================================================
   Operator UI — власний UI-кіт адмінки (прототип v0.2, Claude 2026-10-25): стиль публічного сайту
   Теми: light («Світла»), console («Темне меню»), night («Темна»).
   Тема задається атрибутом data-theme на <html>.
   Палітра, шрифти (Benzin + Montserrat), логотип і форма кнопок — як на публічному сайті.
   Статуси — «лампи»; активний пункт меню — червоний «штекер».
   ====================================================================== */

/* ---------- Шрифти бренду (як на публічному сайті) ---------- */
@font-face { font-family: "Benzin"; src: url("fonts/Benzin-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Benzin"; src: url("fonts/Benzin-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Токени (палітра публічного сайту: #EEEEEE / #1C1C1C / #E31E24) ---------- */
:root,
:root[data-theme="light"] {
    --ui-bg: #EEEEEE;
    --ui-surface: #FFFFFF;
    --ui-surface-2: #F5F5F5;
    --ui-ink: #1C1C1C;
    --ui-ink-2: #434343;
    --ui-muted: #595959;
    --ui-line: #D9D9D9;
    --ui-line-strong: #B8B8B8;
    --ui-accent: #E31E24;          /* фірмовий червоний */
    --ui-accent-ink: #FFFFFF;
    --ui-accent-soft: #FBE3E4;
    --ui-focus: #E31E24;

    --ui-side-bg: #FFFFFF;
    --ui-side-ink: #1C1C1C;
    --ui-side-muted: #595959;
    --ui-side-hover: #F2F2F2;
    --ui-side-active: #EEEEEE;
    --ui-side-line: #D9D9D9;

    --ui-btn-bg: #FFFFFF;
    --ui-btn-ink: #1C1C1C;

    --lamp-on: #1E9E62;
    --lamp-wait: #E0A100;
    --lamp-off: #E31E24;
    --lamp-idle: #B8B8B8;

    --ui-shadow-pop: 0 10px 30px -12px rgba(28, 28, 28, .35);
    color-scheme: light;
}

:root[data-theme="console"] {
    --ui-side-bg: #1C1C1C;
    --ui-side-ink: #FFFFFF;
    --ui-side-muted: #B8B8B8;
    --ui-side-hover: #2B2B2B;
    --ui-side-active: #343434;
    --ui-side-line: #2E2E2E;
}

:root[data-theme="night"] {
    --ui-bg: #1C1C1C;
    --ui-surface: #262626;
    --ui-surface-2: #2E2E2E;
    --ui-ink: #FFFFFF;
    --ui-ink-2: #D9D9D9;
    --ui-muted: #B8B8B8;
    --ui-line: #3A3A3A;
    --ui-line-strong: #595959;
    --ui-accent: #E31E24;
    --ui-accent-ink: #FFFFFF;
    --ui-accent-soft: #3A2223;
    --ui-focus: #FF4A4F;

    --ui-side-bg: #161616;
    --ui-side-ink: #FFFFFF;
    --ui-side-muted: #B8B8B8;
    --ui-side-hover: #262626;
    --ui-side-active: #2E2E2E;
    --ui-side-line: #2A2A2A;

    --ui-btn-bg: #262626;
    --ui-btn-ink: #FFFFFF;

    --lamp-on: #34C27F;
    --lamp-wait: #F2B21B;
    --lamp-off: #FF4A4F;
    --lamp-idle: #595959;

    --ui-shadow-pop: 0 14px 34px -14px rgba(0, 0, 0, .8);
    color-scheme: dark;
}

:root {
    --ui-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui-font-title: "Benzin", "Montserrat", sans-serif;
    --ui-r-control: 10px;
    --ui-r-pill: 56px;
    --ui-r-panel: 14px;
    --ui-side-w: 252px;
    --ui-top-h: 64px;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ui {
    margin: 0;
    font: 400 14px/1.5 var(--ui-font);
    color: var(--ui-ink);
    background: var(--ui-bg);
    font-variant-numeric: tabular-nums;
}
.ui a { color: var(--ui-accent); text-decoration: none; }
.ui a:hover { text-decoration: underline; }
.ui :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .ui * { transition: none !important; animation: none !important; } }

/* ---------- Каркас ---------- */
.ui-shell { display: grid; grid-template-columns: var(--ui-side-w) 1fr; min-height: 100vh; }
.ui-shell.is-collapsed { grid-template-columns: 72px 1fr; }

.ui-side {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--ui-side-bg); color: var(--ui-side-ink);
    border-right: 1px solid var(--ui-side-line);
    display: flex; flex-direction: column;
}
.ui-brand {
    height: var(--ui-top-h); display: flex; align-items: center; gap: 10px;
    padding: 0 18px; border-bottom: 1px solid var(--ui-side-line);
    color: var(--ui-side-ink);
}
/* Логотип: світла версія на світлому меню, версія з білим «Д» — на темному (як у брендбуку) */
.ui-brand img { display: none; height: 36px; width: auto; }
.ui-brand .ui-brand-mark { height: 30px; }
:root[data-theme="light"] .ui-brand .is-on-light,
:root[data-theme="console"] .ui-brand .is-on-dark,
:root[data-theme="night"] .ui-brand .is-on-dark { display: block; }
.ui-shell.is-collapsed .ui-brand .ui-brand-logo { display: none !important; }
.ui-shell:not(.is-collapsed) .ui-brand .ui-brand-mark { display: none !important; }
.ui-org {
    margin: 12px 12px 4px; padding: 10px 12px; border-radius: var(--ui-r-control);
    background: var(--ui-side-hover); font-size: 13px; line-height: 1.3;
}
.ui-org small { display: block; color: var(--ui-side-muted); }

.ui-nav { list-style: none; margin: 8px 0; padding: 0 10px; }
.ui-nav-group { margin: 14px 12px 6px; font-size: 12px; color: var(--ui-side-muted); }
.ui-nav a {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; margin: 1px 0; border-radius: var(--ui-r-control);
    color: var(--ui-side-ink); text-decoration: none; font-size: 14px;
}
.ui-nav a:hover { background: var(--ui-side-hover); text-decoration: none; }
.ui-nav a i { width: 18px; text-align: center; color: var(--ui-side-muted); font-size: 15px; }
.ui-nav a.is-active { background: var(--ui-side-active); font-weight: 500; }
.ui-nav a.is-active i { color: var(--ui-accent); }
/* «штекер» активного пункту */
.ui-nav a.is-active::before {
    content: ""; position: absolute; left: -10px; top: 50%; width: 6px; height: 18px;
    transform: translateY(-50%); border-radius: 0 4px 4px 0; background: var(--ui-accent);
}
.ui-nav .ui-count {
    margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 11px;
    font-size: 12px; line-height: 20px; text-align: center;
    background: var(--ui-side-line); color: var(--ui-side-ink);
}
.ui-shell.is-collapsed .ui-nav span,
.ui-shell.is-collapsed .ui-nav-group,
.ui-shell.is-collapsed .ui-org,
.ui-shell.is-collapsed .ui-brand-name,
.ui-shell.is-collapsed .ui-count { display: none; }
.ui-shell.is-collapsed .ui-nav a { justify-content: center; }

.ui-main { min-width: 0; display: flex; flex-direction: column; }
.ui-top {
    position: sticky; top: 0; z-index: 20; height: var(--ui-top-h);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
    background: color-mix(in srgb, var(--ui-bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--ui-line);
}
.ui-top .ui-spacer { flex: 1; }
.ui-content { padding: 24px; }
.ui-page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ui-page-head h1 {
    margin: 0; font: 700 26px/1.15 var(--ui-font-title); letter-spacing: .01em; text-transform: uppercase; color: var(--ui-ink);
}
.ui-page-head p { margin: 4px 0 0; color: var(--ui-muted); max-width: 70ch; }
.ui-page-head .ui-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Кнопки (форма й «червона тінь» — як кнопки на публічному сайті) ---------- */
.ui-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
    border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-pill);
    background: var(--ui-btn-bg); color: var(--ui-btn-ink); font: 600 14px/1 var(--ui-font);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ui-btn:hover { border-color: var(--ui-ink-2); text-decoration: none; }
.ui-btn--primary {
    background: var(--ui-btn-bg); color: var(--ui-btn-ink); border-color: var(--ui-accent);
    box-shadow: inset -3px 4px 0 0 var(--ui-accent);
}
.ui-btn--primary:hover { box-shadow: inset -4px 5px 0 0 var(--ui-accent); border-color: var(--ui-accent); }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--ui-ink-2); }
.ui-btn--ghost:hover { background: var(--ui-surface-2); border-color: transparent; }
.ui-btn--danger { color: var(--ui-accent); }
.ui-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }
.ui-icon-btn { width: 38px; padding: 0; justify-content: center; }

/* ---------- Панелі ---------- */
.ui-panel { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-panel); }
.ui-panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); }
.ui-panel-head h2 { margin: 0; font: 600 15px/1.3 var(--ui-font); }
.ui-panel-body { padding: 18px; }

/* Зведення: не «картки з великою цифрою», а рядок показників у одній панелі */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ui-stat { padding: 14px 18px; border-left: 1px solid var(--ui-line); }
.ui-stat:first-child { border-left: 0; }
.ui-stat b { display: block; font: 600 22px/1.2 var(--ui-font); }
.ui-stat span { color: var(--ui-muted); font-size: 13px; }

/* ---------- Лампи статусів ---------- */
.ui-lamp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ui-ink-2); }
.ui-lamp::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--lamp, var(--lamp-idle));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lamp, var(--lamp-idle)) 18%, transparent),
                0 0 8px color-mix(in srgb, var(--lamp, var(--lamp-idle)) 55%, transparent);
}
.ui-lamp--on   { --lamp: var(--lamp-on); }
.ui-lamp--wait { --lamp: var(--lamp-wait); }
.ui-lamp--off  { --lamp: var(--lamp-off); }
.ui-lamp--idle { --lamp: var(--lamp-idle); }
.ui-lamp--idle::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lamp-idle) 18%, transparent); }

.ui-tag {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-ink-2);
}

/* ---------- Форми ---------- */
.ui-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ui-field label { font-size: 13px; color: var(--ui-ink-2); font-weight: 500; }
.ui-input, .ui-select, .ui select, .ui input[type="search"] {
    height: 36px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-control);
    background: var(--ui-surface); color: var(--ui-ink); font: 400 14px var(--ui-font);
}
.ui-input:focus, .ui-select:focus, .ui select:focus, .ui input[type="search"]:focus {
    outline: none; border-color: var(--ui-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 22%, transparent);
}
.ui-hint { font-size: 12px; color: var(--ui-muted); }

/* ---------- Перемикач теми ---------- */
.ui-theme-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-pill); background: var(--ui-surface); }
.ui-theme-switch button {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--ui-r-pill);
    background: transparent; color: var(--ui-muted); font: 500 13px var(--ui-font); cursor: pointer;
}
.ui-theme-switch button[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-bg); }
.ui-theme-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ui-line-strong); }

.ui-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; font-size: 13px;
}

/* ---------- DataTables (1.x) у стилі кіту ---------- */
.ui .dataTables_wrapper { font-size: 14px; }
.ui .dataTables_wrapper .ui-dt-top,
.ui .dataTables_wrapper .ui-dt-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; }
.ui .dataTables_wrapper .ui-dt-top { border-bottom: 1px solid var(--ui-line); }
.ui .dataTables_wrapper .ui-dt-bottom { border-top: 1px solid var(--ui-line); color: var(--ui-muted); }
.ui .dataTables_filter { margin-left: auto; }
.ui .dataTables_filter label, .ui .dataTables_length label { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); margin: 0; }
.ui .dataTables_filter input { width: 240px; }
.ui .dataTables_paginate { margin-left: auto; display: flex; gap: 4px; }
.ui .dataTables_paginate .paginate_button {
    min-width: 32px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center;
    border-radius: var(--ui-r-control); border: 1px solid transparent; color: var(--ui-ink-2) !important; cursor: pointer;
}
.ui .dataTables_paginate .paginate_button:hover { background: var(--ui-surface-2); text-decoration: none; }
.ui .dataTables_paginate .paginate_button.current { border-color: var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-ink) !important; font-weight: 600; }
.ui .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; }

.ui table.ui-table, .ui table.dataTable { width: 100% !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; }
.ui table.dataTable thead th {
    position: sticky; top: var(--ui-top-h); z-index: 1;
    padding: 10px 14px; text-align: left; font-size: 13px; font-weight: 500; color: var(--ui-muted);
    background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); white-space: nowrap; cursor: pointer;
}
.ui table.dataTable thead th.sorting_asc::after { content: " ↑"; color: var(--ui-accent); }
.ui table.dataTable thead th.sorting_desc::after { content: " ↓"; color: var(--ui-accent); }
.ui table.dataTable tbody td { padding: 11px 14px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.ui table.dataTable tbody tr:last-child td { border-bottom: 0; }
.ui table.dataTable tbody tr:hover td { background: color-mix(in srgb, var(--ui-accent-soft) 45%, transparent); }
.ui table.dataTable td.dataTables_empty { padding: 40px; text-align: center; color: var(--ui-muted); }
.ui .ui-person { display: flex; align-items: center; gap: 10px; }
.ui .ui-person small { display: block; color: var(--ui-muted); font-size: 12px; }

/* ---------- Адаптивність ---------- */
@media (max-width: 900px) {
    .ui-shell, .ui-shell.is-collapsed { grid-template-columns: 1fr; }
    .ui-side { position: fixed; z-index: 40; width: 280px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--ui-shadow-pop); }
    .ui-shell.is-open .ui-side { transform: none; }
    .ui-content { padding: 16px; }
    .ui-top { padding: 0 16px; }
    .ui .dataTables_filter input { width: 100%; }
    .ui-theme-switch button span { display: none; }
}