/* ============================
   THEME VARIABLES
   Светлая / тёмная тема через CSS-переменные
============================ */

:root {
    /* Твои существующие переменные — НЕ ТРОГАЮ */
    --bg: #f5f7fa;
    --bg-card: #ffffff;
    --bg-topbar: #ffffff;
    --bg-filters: #ffffff;

    --text: #333333;
    --text-soft: #555555;
    --text-muted: #777777;
    --label: #666666;

    --border: #e5e5e5;
    --border-soft: #f0f0f0;

    --shadow: rgba(0, 0, 0, 0.06);
    --shadow-strong: rgba(0, 0, 0, 0.12);
    --shadow-modal: rgba(0, 0, 0, 0.25);

    --btn-secondary-bg: #f0f0f0;
    --btn-secondary-bg-hover: #e0e0e0;
    --btn-primary-bg: #1677ff;
    --btn-primary-bg-hover: #0958d9;
    --btn-primary-fg: #ffffff;

    --table-header-bg: #fafafa;
    --table-row-hover-bg: #f9f9f9;

    --backdrop: rgba(0, 0, 0, 0.35);

    --toast-success: #52c41a;
    --toast-error: #ff4d4f;
    --toast-warning: #faad14;
    --toast-info: #1677ff;
    --toast-fg: #ffffff;
    --toast-warning-fg: #111111;
    --sort-indicator-color: #999999;
    --row-highlight-bg: #fff3b0;
    --child-row-bg: #fafafa;
    --radius-modal: 12px;
    --status-badge-fg: #111111;

    /* ============================
       ДОБАВЛЕННЫЕ ПЕРЕМЕННЫЕ ZIRCONIX
       (ничего не ломают, просто расширяют)
    ============================ */

    /* Фирменные цвета */
    --brand-primary: #3a7afe;
    --brand-accent: #6aa9ff;

    /* Текст */
    --text-strong: #1a1a1a;

    /* Стеклянный топбар */
    --bg-topbar-glass: rgba(255, 255, 255, 0.7);
    --shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   Мост к общим модулям (наряд с зубной картой)
   Общая вёрстка написана на токенах админской темы. Дублировать её здесь под
   местные имена значило бы держать две копии одного стиля, поэтому панель просто
   объявляет те же имена поверх своей палитры — цвета остаются свои.
   ============================================================ */
:root {
    --color-bg-surface: var(--bg-card);
    --color-bg-surface-alt: #fafafa;
    --color-bg-subtle: #f3f6fa;
    --color-bg-hover: #e8f1fc;
    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-soft);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border);
    --color-divider: var(--border-soft);
    --color-accent: var(--btn-primary-bg);
    --color-on-accent: var(--btn-primary-fg);
    --color-focus-ring: var(--btn-primary-bg);
    --color-danger: #ff4d4f;
    --color-danger-text: #a00;
    --color-success: #52c41a;
    --color-success-text: #15803d;
    --color-warning: #ca8a04;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #b45309;
    --color-warning-text-dark: #78350f;
    --radius-table: 8px;
    --radius-modal: 12px;
}

/* ============================
   DARK THEME OVERRIDES
============================ */

body.dark-theme {
    /* Твои существующие переменные — НЕ ТРОГАЮ */
    --bg: #121212;
    --bg-card: #1c1c1c;
    --bg-topbar: #1f1f1f;
    --bg-filters: #1c1c1c;

    --text: #e5e5e5;
    --text-soft: #cfcfcf;
    --text-muted: #a0a0a0;
    --label: #b0b0b0;

    --border: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255, 255, 255, 0.04);

    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --shadow-modal: rgba(0, 0, 0, 0.7);

    --btn-secondary-bg: #2a2a2a;
    --btn-secondary-bg-hover: #333333;
    --btn-primary-bg: #3a7afe;
    --btn-primary-bg-hover: #2d63d1;
    --btn-primary-fg: #ffffff;

    --table-header-bg: #1a1a1a;
    --table-row-hover-bg: #222222;

    --backdrop: rgba(0, 0, 0, 0.55);

    /* Новые переменные Zirconix для тёмной темы */
    --text-strong: #f0f0f0;
    --bg-topbar-glass: rgba(28, 28, 28, 0.7);
    --shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.4);
    --status-badge-fg: #111111;
    --toast-fg: #ffffff;
    --toast-warning-fg: #111111;
    --sort-indicator-color: #a8a8a8;
    --row-highlight-bg: #4b4230;
    --child-row-bg: #1c1c1c;
    --radius-modal: 12px;

    /* Те же имена для общих модулей — см. мост в светлой теме. */
    --color-bg-surface: var(--bg-card);
    --color-bg-surface-alt: #232323;
    --color-bg-subtle: #171717;
    --color-bg-hover: #2a2a2a;
    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-soft);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border);
    --color-divider: var(--border-soft);
    --color-accent: var(--btn-primary-bg);
    --color-on-accent: var(--btn-primary-fg);
    --color-focus-ring: var(--btn-primary-bg);
    --color-danger: #f87171;
    --color-danger-text: #fecaca;
    --color-success: #86efac;
    --color-success-text: #86efac;
    --color-warning: #d4a24f;
    --color-warning-bg: #3b2f15;
    --color-warning-text: #d4a24f;
    --color-warning-text-dark: #f0ca86;

}

/* ============================
   БАЗОВЫЕ СТИЛИ
============================ */

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

* {
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

/* ============================
   TOPBAR (обновлённый стиль Zirconix)
============================ */

.topbar {
    backdrop-filter: blur(12px);
    background: var(--bg-topbar-glass);
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-topbar);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 26px;
    color: var(--brand-primary);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    animation: fadeIn 2.4s ease;
}

.logo-text {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-strong);
    font-family: "Inter", "Segoe UI", sans-serif;

    /* Анимация появления */
    animation: fadeIn 2.4s ease;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 8px;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topbar-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ============================
   КНОПКИ
============================ */

.btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
}

.theme-switch {
    position: relative;
    width: 54px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--btn-secondary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .2s ease, border-color .2s ease;
}

.theme-switch__icon {
    font-size: 12px;
    line-height: 1;
    z-index: 1;
    opacity: .45;
    transform: scale(.92);
    transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.theme-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}

.theme-switch__icon--sun {
    opacity: 1;
    transform: scale(1);
}

.theme-switch.theme-switch--dark .theme-switch__icon--sun {
    opacity: .45;
    transform: scale(.92);
}

.theme-switch.theme-switch--dark .theme-switch__icon--moon {
    opacity: 1;
    transform: scale(1);
}

.theme-switch.theme-switch--dark .theme-switch__thumb {
    transform: translateX(24px);
}

.theme-switch:active .theme-switch__thumb {
    transform: translateX(1px) scale(.97);
}

.theme-switch.theme-switch--dark:active .theme-switch__thumb {
    transform: translateX(23px) scale(.97);
}

.theme-switch:hover {
    background: var(--btn-secondary-bg-hover);
}

.theme-switch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================
   ФИЛЬТРЫ
============================ */

.filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-filters);
    border-bottom: 1px solid var(--border);
}

.filters-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-item--view {
    margin-left: auto;
}

.filter-item label,
.filter-item-label,
.filters-search-label {
    font-size: 13px;
    color: var(--label);
}

.filters-search-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.filters-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-control {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 14px;
    background: var(--bg-card);
    color: var(--text);
}

/* Safari без сброса нативного appearance рисует <select> своим системным
   виджетом, игнорируя border/background/padding — выглядит как узкая нестилизованная
   полоска (в Chrome такого нет). Приводим select к общему виду с input и рисуем свою стрелку. */
select.form-control,
.modal select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}

body.dark-theme select.form-control,
body.dark-theme .modal select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a0a0a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ============================
   ПЕРЕКЛЮЧАТЕЛЬ ВИДОВ
============================ */

.view-switch {
    display: flex;
    gap: 6px;
}

.switch-btn {
    background: var(--btn-secondary-bg);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s ease, color .15s ease;
    color: var(--text);
}

.switch-btn:hover {
    background: var(--btn-secondary-bg-hover);
}

.switch-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

/* ============================
   КОНТЕНТ
============================ */

.content {
    padding: 20px 24px;
}

/* ============================
   АНИМАЦИИ
============================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================
   КАРТОЧКИ ЗАКАЗОВ
============================ */

.cards-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.order-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 2px 6px var(--shadow);
    border: 1px solid var(--border);
    border-left: 3px solid var(--status-color, var(--border));
    transition: border-color .15s ease, box-shadow .15s ease;
    /* В сетке карточки в строке одной высоты — прижимаем панель действий к низу */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.order-card:hover {
    box-shadow: 0 3px 10px var(--shadow-strong);
}

/* Шапка: строка «номер + статус», ниже вид работы на всю ширину, затем параметры */
.order-card-head {
    padding: 12px 14px 8px;
    line-height: 1.35;
}

.order-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 4px;
}

.order-card-topline .status-badge {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.order-card-num {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.order-card-work {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: break-word;
}

.order-card-params-inline {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Строка сроков и дат под шапкой */
.order-card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--border-soft);
}

.due-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-soft);
    white-space: nowrap;
}

.due-chip--overdue {
    background: rgba(255, 77, 79, 0.12);
    border-color: rgba(255, 77, 79, 0.4);
    color: var(--toast-error);
}

.due-chip--soon {
    background: rgba(250, 173, 20, 0.14);
    border-color: rgba(250, 173, 20, 0.45);
    color: #ad6800;
}

body.dark-theme .due-chip--soon {
    color: var(--toast-warning);
}

/* Переносится по разделителям « · »; пары «Создан 14.08.2026» держит вместе
   неразрывный пробел в renderOrderCard — nowrap на всю строку вылезал за карточку. */
.order-card-dates {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 0;
}

/* Сетка «метка — значение» */
.order-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    padding: 10px 14px;
    font-size: 13px;
}

.kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.kv--wide {
    grid-column: 1 / -1;
}

.kv-label {
    color: var(--label);
    flex-shrink: 0;
}

.kv-value {
    color: var(--text);
    text-align: right;
    overflow-wrap: break-word;
    min-width: 0;
}

.kv-value--employee {
    font-weight: 600;
    color: var(--text-strong);
}

.order-card-head,
.order-card-meta-row,
.order-card-grid,
.order-children {
    flex-shrink: 0;
}

/* Состав в карточках: заметная кликабельная плашка с прогрессом */
.order-children {
    margin: 0 14px 4px;
}

.order-composite-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(22, 119, 255, 0.35);
    border-radius: 8px;
    background: rgba(22, 119, 255, 0.08);
    color: var(--btn-primary-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease;
}

.order-composite-bar:hover {
    background: rgba(22, 119, 255, 0.16);
}

body.dark-theme .order-composite-bar {
    background: rgba(22, 119, 255, 0.16);
    color: #69b1ff;
}

body.dark-theme .order-composite-bar:hover {
    background: rgba(22, 119, 255, 0.26);
}

.order-composite-text {
    flex: 1 1 auto;
    min-width: 0;
}

.order-composite-chevron {
    transition: transform .2s ease;
}

.order-composite-bar.expanded .order-composite-chevron {
    transform: rotate(180deg);
}

.order-children-content {
    margin-top: 8px;
}

.child-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.child-item-title {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 13px;
    overflow-wrap: break-word;
    min-width: 0;
}

.child-item-meta {
    font-size: 12.5px;
    color: var(--text-soft);
}

.order-card .child-table td,
.order-card .child-table th {
    background: var(--bg-card) !important;
}

/* Панель действий: все кнопки одной высоты */
.order-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 14px;
    border-top: 1px solid var(--border-soft);
    background: var(--table-header-bg);
    flex-shrink: 0;
}

.order-actions button {
    border: 1px solid transparent;
    background: var(--btn-secondary-bg);
    padding: 0 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
    color: var(--text);
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    box-sizing: border-box;
    line-height: 1;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.order-actions button.card-action-icon {
    min-width: 34px;
    padding: 0;
    font-size: 15px;
}

.order-actions button:hover {
    background: var(--btn-secondary-bg-hover);
}

.order-actions .primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

/* Узкие карточки: сетка «метка — значение» в одну колонку */
@media (max-width: 480px) {
    .order-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Модалка смены статуса */
.status-next-current {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
}

.status-next-current-label {
    color: var(--text-muted);
}

.status-next-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-next-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}

.status-next-btn:hover:not(:disabled) {
    background: var(--table-row-hover-bg);
    border-color: var(--brand-primary);
}

.status-next-btn:disabled,
.status-next-btn--blocked {
    opacity: 0.55;
    cursor: not-allowed;
}

.status-next-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-next-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.status-next-why {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-muted);
}

.status-next-arrow {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

/* Взять в работу (список заказов сотрудника) */
.table-action-btn.btn-take-work {
    background: rgba(22, 119, 255, 0.12);
    color: var(--btn-primary-bg);
    border: 1px solid rgba(22, 119, 255, 0.35);
}

.table-action-btn.btn-take-work:hover {
    background: rgba(22, 119, 255, 0.2);
}

.order-actions .btn-take-work.primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: none;
}

.order-actions .btn-take-work.primary:hover {
    background: var(--btn-primary-bg-hover);
}

.order-actions .primary:hover {
    background: var(--btn-primary-bg-hover);
    border-color: transparent;
}

/* ============================
   ТАБЛИЦА
============================ */

.table-view {
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow);
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th {
    text-align: left;
    padding: 10px;
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: default;
}

.orders-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.orders-table th.sortable:hover {
    background: var(--btn-secondary-bg-hover);
}

.orders-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    color: var(--text-soft);
}

.orders-table tr:hover td {
    background: var(--table-row-hover-bg);
}

/* Строки с child_orders */

.child-row {
    background: var(--bg-filters);
}

.child-table {
    margin-top: 10px;
    background: var(--bg-card);
    border-radius: 8px;
}

.child-table td,
.child-table th {
    background: var(--bg-card) !important;
}

/* Индикатор сортировки */

.th-sort-asc::after {
    content: " ▲";
    font-size: 12px;
    color: var(--sort-indicator-color);
}

.th-sort-desc::after {
    content: " ▼";
    font-size: 12px;
    color: var(--sort-indicator-color);
}

/* ============================
   МОДАЛКИ (Ant Design style)
============================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-modal);
    padding: 18px 20px;
    width: 420px;
    max-width: 95vw;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-modal);
    animation: fadeInUp .2s ease;
    color: var(--text);
}

.modal-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.modal-body {
    margin-bottom: 16px;
}

.modal-body label {
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--label);
}

/* Тумблер (вкл/выкл): input скрыт, .switch-slider — сам бегунок. .modal-body label { display:block }
   выше ломает раскладку .switch без этого override — бегунок наезжает на текст. */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.modal-body label.switch {
    display: inline-flex;
}

.switch input {
    display: none;
}

.switch-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.switch-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.switch input:checked + .switch-slider {
    background: var(--btn-primary-bg);
}

.switch input:checked + .switch-slider::before {
    transform: translateX(20px);
}

.switch-label {
    color: var(--text);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.modal-footer .btn {
    min-width: 90px;
}

/* Строка печати QR: выбор размера с кнопкой принтера слева, «Закрыть» справа.
   Обёртка нужна потому, что .modal-footer прижимает содержимое вправо, а
   разводить эти две группы по краям надо внутри неё. */
.qr-footer {
    /* Одна высота на все три контрола: у select и .btn разные внутренние
       отступы, и без общего числа они выстраиваются лесенкой. */
    --qr-row-h: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.qr-footer__print {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.qr-footer .btn,
.qr-footer select.form-control {
    height: var(--qr-row-h);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* Ширину задаёт сам список: общее правило .modal select тянет его на всю
   ширину модалки, и контрол весил бы больше самого кода. */
.qr-footer select.form-control {
    width: auto;
    min-width: 150px;
}

/* Печать — квадрат с принтером: подпись здесь ничего не добавляет. Селектор с
   .modal-footer — иначе общее правило .modal-footer .btn { min-width: 90px }
   растянуло бы квадрат в прямоугольник. */
.modal-footer .qr-footer__print-btn {
    flex: 0 0 auto;
    width: var(--qr-row-h);
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal .form-control,
.modal select {
    width: 100%;
}

/* ============================
   TOAST NOTIFICATIONS
============================ */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 260px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--toast-fg);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px var(--shadow-modal);
    animation: toastFadeIn .25s ease;
    opacity: 0.95;
}

.toast-success { background: var(--toast-success); }
.toast-error { background: var(--toast-error); }
.toast-warning { background: var(--toast-warning); color: var(--toast-warning-fg); }
.toast-info { background: var(--toast-info); }

.toast i {
    font-size: 18px;
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 0.95; transform: translateY(0); }
}
/* ============================
   АДАПТИВ
============================ */

@media (max-width: 768px) {

    /* Контейнер становится вертикальным */
    .topbar-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Верхняя строка: логотип слева, кнопка темы справа */
    .topbar-left {
        width: 100%;
        display: flex;
        justify-content: space-between; /* ← ключ */
        align-items: center;
    }

    /* Кнопка темы — справа, в верхней строке.
       Только размещение: размеры и внутреннюю раскладку задаёт .theme-switch.
       Прежде здесь стояли padding: 0 и justify-content: center — от них солнце и
       луна сбивались в кучу к середине, вместо того чтобы стоять по краям
       переключателя, и значки выглядели косыми рядом с бегунком. */
    #themeToggle {
        order: -1;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* Нижний блок — кнопки заказа и администрирования */
    .topbar-right {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    #addOrderBtn,
    #adminBtn {
        flex: 1 1 auto;
    }
}


/* ============================
   ПОВОРОТ СТРЕЛКИ
============================ */

.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text);
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.expand-btn.expanded {
    transform: rotate(90deg);
}

.table-action-btn {
    background: var(--btn-secondary-bg);
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    transition: background .15s ease;
    margin-right: 4px;
    vertical-align: middle;
}

.table-action-btn:hover {
    background: var(--btn-secondary-bg-hover);
}

/* Удаление недоступно — заметно отличается от активной корзины */
.table-action-btn.action-delete--blocked:disabled,
.table-action-btn.action-delete--blocked:disabled:hover,
.table-action-btn.action-assign--blocked:disabled,
.table-action-btn.action-assign--blocked:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
    color: var(--text-muted);
    background: var(--btn-secondary-bg);
    border: 1px dashed var(--border);
    box-shadow: none;
}

.order-actions button.action-delete--blocked:disabled,
.order-actions button.action-delete--blocked:disabled:hover,
.order-actions button.action-assign--blocked:disabled,
.order-actions button.action-assign--blocked:disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
    color: var(--text-muted);
    background: var(--btn-secondary-bg);
    border: 1px dashed var(--border);
    box-shadow: none;
}

body.dark-theme .table-action-btn.action-delete--blocked:disabled,
body.dark-theme .table-action-btn.action-assign--blocked:disabled,
body.dark-theme .order-actions button.action-delete--blocked:disabled,
body.dark-theme .order-actions button.action-assign--blocked:disabled {
    border-color: rgba(255, 255, 255, 0.22);
}

.actions-cell {
    white-space: nowrap;
    /* Кнопок бывает 3 или 4 (без «взять в работу») — выравнивание вправо держит общие колонки иконок */
    text-align: right;
}

.actions-cell .table-action-btn:last-child {
    margin-right: 0;
}

.child-row {
    transition: all .25s ease;
}

.child-row.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.child-row:not(.hidden) {
    opacity: 1;
    max-height: 500px; /* достаточно для вложенной таблицы */
}

@keyframes highlightRow {
    0%   { background-color: var(--row-highlight-bg); }
    100% { background-color: transparent; }
}

.order-row.highlight {
    animation: highlightRow 1.5s ease-out;
}

/* Светлая тема */
.child-row td {
    background: var(--child-row-bg) !important;
}

/* Тёмная тема */
.dark-theme .child-row td {
    background: var(--child-row-bg) !important;
}


/* Контейнер дочерних работ */
.order-children-content {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    overflow-x: hidden;
}

/* Один элемент списка */
.child-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

/* Последний элемент без линии */
.child-item:last-child {
    border-bottom: none;
}

/* Текст */
.child-item div {
    margin: 4px 0;
    line-height: 1.35;
    word-break: break-word;
}

/* Заголовки */
.child-item strong {
    font-weight: 600;
    color: var(--text-strong);
}

.child-item .child-item-actions {
    margin-top: 8px;
    padding-top: 8px;
    justify-content: flex-start;
}

.status-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
    color: var(--status-badge-fg);
    transition: background-color 0.35s ease, color 0.35s ease;
}

.order-params-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.35;
}

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
}

.boot-screen.hidden {
    display: none !important;
}

.boot-screen-inner {
    text-align: center;
}

.boot-logo {
    font-size: 2rem;
    color: var(--brand-primary);
    margin-bottom: 12px;
}

.boot-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* QR self-service (цех) */
.scan-section {
    margin-bottom: 16px;
}

.scan-section:last-child {
    margin-bottom: 0;
}

.scan-section-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}

.scan-section--claim .scan-section-title {
    color: var(--btn-primary-bg);
}

.scan-workflow-wrap {
    max-height: min(70vh, 520px);
    overflow: auto;
    text-align: left;
}

.scan-line {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg-card);
}

.scan-line-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.scan-line-title {
    font-weight: 600;
    color: var(--text);
}

.scan-line-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.scan-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scan-muted {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.btn-scan-claim,
.btn-scan-status {
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--btn-secondary-bg);
    color: var(--text);
    cursor: pointer;
}

.btn-scan-claim {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: transparent;
}

.btn-scan-claim:hover {
    background: var(--btn-primary-bg-hover);
}

.btn-scan-status:hover:not(:disabled) {
    background: var(--btn-secondary-bg-hover);
}

.btn-scan-status:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .scan-workflow-wrap {
        max-height: min(85vh, 720px);
    }

    .scan-line-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-scan-claim,
    .btn-scan-status {
        width: 100%;
        min-height: 44px;
        font-size: 0.95rem;
        padding: 10px 14px;
    }

    .scan-line {
        padding: 12px 14px;
    }

    .modal-backdrop .modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}

.composite-my-work-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(22, 119, 255, 0.12);
    color: var(--btn-primary-bg);
    vertical-align: middle;
}

body.dark-theme .composite-my-work-badge {
    background: rgba(22, 119, 255, 0.22);
    color: #69b1ff;
}

.child-table tbody tr.child-row-assignee {
    background: rgba(22, 119, 255, 0.06);
}

body.dark-theme .child-table tbody tr.child-row-assignee {
    background: rgba(22, 119, 255, 0.12);
}

.child-item-assignee {
    border-left: 3px solid var(--btn-primary-bg);
    padding-left: 10px;
}

/* Модалка «Материалы»: выдача / возврат (поле + кнопка в одной строке) */
.mat-ops-modal .mat-ops-hint {
    margin: 0 0 16px;
    padding: 10px 12px;
    line-height: 1.45;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--table-row-hover-bg);
}

.mat-ops-modal .mat-op-head {
    margin-bottom: 0;
    line-height: 1.45;
}

.mat-ops-modal .mat-op-row {
    width: 100%;
    box-sizing: border-box;
}

.mat-ops-modal .mat-op-field-block {
    width: 100%;
    box-sizing: border-box;
}

.mat-ops-modal .mat-op-issue-block {
    margin-top: 20px;
}

.mat-ops-modal .mat-op-field-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.mat-ops-modal .mat-op-input-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.mat-ops-modal .mat-op-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    min-height: 0;
    height: 36px;
    max-height: 36px;
    line-height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
    align-self: flex-start;
}

.mat-ops-modal .mat-op-input-row input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.mat-ops-modal .mat-op-input-row input[type="number"]::-webkit-inner-spin-button,
.mat-ops-modal .mat-op-input-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mat-ops-modal .mat-op-ret-block {
    margin-top: 14px;
}

.mat-ops-modal .btn-mat-issue,
.mat-ops-modal .btn-mat-ret {
    flex: 0 0 auto;
    min-width: 7.5rem;
    white-space: nowrap;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

.mat-ops-modal .btn-mat-issue {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: rgba(58, 122, 254, 0.08);
}

.mat-ops-modal .btn-mat-issue:hover {
    background: rgba(58, 122, 254, 0.16);
}

.mat-ops-modal .btn-mat-ret:hover {
    background: var(--table-row-hover-bg);
}

.mat-ops-modal .mat-ret-preview {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
}


/* ============================
   Модалка «Протокол работы»
============================ */

.protocol-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.protocol-version-line {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.protocol-step {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.protocol-step:last-child {
    border-bottom: none;
}

.protocol-step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
}

.protocol-step-num {
    color: var(--text-muted);
    font-weight: 500;
}

.protocol-step-mins {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.protocol-step-instruction {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.4;
}

.protocol-step-params {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-soft);
}

.protocol-checkpoint {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(22, 119, 255, 0.35);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--btn-primary-bg);
}

.protocol-checkpoint--done {
    border-color: rgba(82, 196, 26, 0.4);
    background: rgba(82, 196, 26, 0.08);
    color: #237804;
}

body.dark-theme .protocol-checkpoint--done {
    color: #73d13d;
}

.protocol-checkpoint-btn {
    margin-left: auto;
    border: 1px solid var(--border);
    background: var(--btn-secondary-bg);
    color: var(--text);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.protocol-checkpoint-btn--mark {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

.protocol-checkpoint-btn:hover {
    filter: brightness(0.95);
}

/* ============================================================
   РАКУРС «ЗАКАЗ-НАРЯДЫ»
   ============================================================ */

.batch-card .order-card-topline { flex-wrap: wrap; gap: 8px 12px; }

/* Полоса слева у наряда — тон фазы, которая его держит. Тона те же, что
   у плашек фаз в админке: цвет фазы системный и в панелях не расходится. */
.batch-card--registered   { --status-color: #e87ba4; }
.batch-card--in_work      { --status-color: #2a78d6; }
.batch-card--produced     { --status-color: #1baf7a; }
.batch-card--handed_over  { --status-color: #eda100; }
.batch-card--accepted     { --status-color: #008300; }
.batch-card--closed       { --status-color: #4a3aa7; }
.batch-card--cancelled    { --status-color: #e34948; }

body.dark-theme .batch-card--registered  { --status-color: #d55181; }
body.dark-theme .batch-card--in_work     { --status-color: #3987e5; }
body.dark-theme .batch-card--produced    { --status-color: #199e70; }
body.dark-theme .batch-card--handed_over { --status-color: #c98500; }
body.dark-theme .batch-card--accepted    { --status-color: #008300; }
body.dark-theme .batch-card--closed      { --status-color: #9085e9; }
body.dark-theme .batch-card--cancelled   { --status-color: #e66767; }

.batch-card-ready { font-size: 13px; color: var(--text-soft); }
.batch-card-ready b { font-size: 15px; color: var(--text); }

/* Плашка «держит» красится тоном фазы — тем же, что у фаз в админке.
   Мягкая отрисовка: подложка из тона, текст темнее его же. */
.batch-card-hold {
    font-size: 12px;
    padding: 1px 9px;
    border-radius: 999px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--ph, var(--text-muted)) 16%, transparent);
    color: color-mix(in srgb, var(--ph, var(--text-muted)) 78%, #000);
    border: 1px solid color-mix(in srgb, var(--ph, var(--text-muted)) 34%, transparent);
}

body.dark-theme .batch-card-hold {
    background: color-mix(in srgb, var(--ph, var(--text-muted)) 26%, transparent);
    color: color-mix(in srgb, var(--ph, var(--text-muted)) 45%, #fff);
    border-color: color-mix(in srgb, var(--ph, var(--text-muted)) 44%, transparent);
}

.batch-card-hold--registered  { --ph: #e87ba4; }
.batch-card-hold--in_work     { --ph: #2a78d6; }
.batch-card-hold--produced    { --ph: #1baf7a; }
.batch-card-hold--handed_over { --ph: #eda100; }
.batch-card-hold--accepted    { --ph: #008300; }
.batch-card-hold--closed      { --ph: #4a3aa7; }
.batch-card-hold--cancelled   { --ph: #e34948; }

body.dark-theme .batch-card-hold--registered  { --ph: #d55181; }
body.dark-theme .batch-card-hold--in_work     { --ph: #3987e5; }
body.dark-theme .batch-card-hold--produced    { --ph: #199e70; }
body.dark-theme .batch-card-hold--handed_over { --ph: #c98500; }
body.dark-theme .batch-card-hold--accepted    { --ph: #008300; }
body.dark-theme .batch-card-hold--closed      { --ph: #9085e9; }
body.dark-theme .batch-card-hold--cancelled   { --ph: #e66767; }

/* Состав наряда свёрнут по умолчанию: место в списке дороже, чем постоянно
   развёрнутые карточки работ. */
.batch-works { margin: 10px 0 4px; }

.batch-works__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--table-header-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.batch-works__bar::-webkit-details-marker { display: none; }
.batch-works__bar:hover { background: var(--table-row-hover-bg); }
.batch-works__text { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--text-soft); }
.batch-works__chev { transition: transform .15s ease; }
.batch-works[open] .batch-works__chev { transform: rotate(180deg); }

.batch-card-works {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
}

.batch-work {
    border: 1px solid var(--border);
    border-left: 3px solid var(--status-color, var(--border));
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--table-header-bg);
}

.batch-work__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.batch-work__num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.batch-work__name { font-size: 13.5px; }
.batch-work__meta { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; }
.batch-work__actions { margin-top: 6px; }

/* Пачку двигают двойной стрелкой, работу — одиночной: действия разные,
   и путать их нельзя. Кнопка пачки выделена тоном. */
.card-action-icon--batch {
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-bg);
}

.card-action-icon--batch:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}