:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f2937;
    background: #f5f7fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #185abd; text-decoration: none; }

.topbar {
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 28px;
}
.brand { font-weight: 750; color: #111827; }
.topbar nav { display:flex; gap:18px; flex:1; }
.userbox { display:flex; gap:12px; align-items:center; }
.link-button {
    border:0; background:none; padding:0; margin:0;
    color:#185abd; cursor:pointer; font:inherit;
}

.container { max-width:none; margin:20px auto; padding:0 16px; }

.auth-card, .form-card {
    max-width:460px;
    margin:70px auto;
    background:#fff;
    padding:28px;
    border:1px solid #e5e7eb;
    border-radius:12px;
}

label { display:block; font-weight:600; margin:16px 0 7px; }
input, select {
    width:100%;
    padding:11px 12px;
    border:1px solid #cfd5dd;
    border-radius:8px;
    background:#fff;
    font:inherit;
}
button, .button {
    display:inline-block;
    margin-top:18px;
    padding:10px 16px;
    border-radius:8px;
    border:0;
    background:#185abd;
    color:#fff;
    font-weight:650;
    cursor:pointer;
}
.button.secondary { background:#e9eef7; color:#185abd; margin-left:8px; }

.otp { font-size:24px; letter-spacing:.32em; text-align:center; }
.muted { color:#6b7280; }
.notice { background:#eef6ff; padding:10px 12px; border-radius:8px; margin-bottom:16px; }
.error { background:#fff0f0; color:#a11717; padding:10px 12px; border-radius:8px; margin-bottom:16px; }

.cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:16px;
}
.card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:7px;
    color:inherit;
}
.card strong { font-size:19px; }
.card small { color:#6b7280; }

.page-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.badge { background:#e9eef7; border-radius:999px; padding:7px 11px; font-size:13px; }
.placeholder {
    margin-top:24px;
    padding:28px;
    background:#fff;
    border:1px dashed #b8c0cc;
    border-radius:12px;
}

table { width:100%; border-collapse:collapse; background:#fff; }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid #edf0f3; }
th { background:#f8fafc; }

.check { display:flex; align-items:center; gap:9px; font-weight:500; }
.check input { width:auto; }
.permission-row {
    display:grid;
    grid-template-columns:1fr 190px;
    gap:14px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #edf0f3;
}
.form-card h2 { margin-top:28px; }
.form-card.wide { max-width:900px; }

/* QUEUE */
.queue-wrap {
    overflow:auto;
    max-height:calc(100vh - 180px);
    border:1px solid #d8dee8;
    background:#fff;
}
.queue-wrap.compact {
    max-height:none;
    margin-bottom:28px;
}

.queue-table {
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    border-radius:0;
}
.queue-table th,
.queue-table td {
    padding:5px 7px;
    border-right:1px solid #e3e7ec;
    border-bottom:1px solid #e3e7ec;
    vertical-align:middle;
    overflow:hidden;
}
.queue-table th:first-child,
.queue-table td:first-child {
    border-left:0;
}
.queue-table thead th {
    position:sticky;
    top:0;
    z-index:8;
    background:#f8fafc;
}

/* Первые шесть колонок закреплены слева.
   left выставляет JS на основании фактических сохранённых ширин. */
.queue-table .sticky {
    position:sticky;
    z-index:5;
    background:#fff;
}
.queue-table thead .sticky {
    z-index:12;
    background:#f8fafc;
}

.namecol {
    white-space:normal;
    overflow-wrap:anywhere;
}

.image-cell {
    padding:1px !important;
    text-align:center;
}
.product-img {
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
    display:block;
    margin:0 auto;
}
.client-order-img {
    object-fit:contain;
}

.printer-head {
    text-align:center;
    overflow:visible !important;
}
.printer-name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.printer-toggle {
    margin:2px 0 0;
    padding:0;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#1ca54c;
    font-size:28px;
    line-height:38px;
}
.printer-online {
    display:block;
    transform:translateY(-1px);
}
.printer-toggle img {
    width:36px;
    height:36px;
    object-fit:contain;
    display:block;
    margin:auto;
}

.printer-head.out { background:#ffd5d5; }
.out-cell { background:#ffe7e7; }

.assign {
    text-align:center;
    padding:5px !important;
}
.cell-input {
    width:100%;
    min-width:0;
    padding:7px 4px;
    text-align:center;
    border-radius:4px;
}
.cell-input.saving { opacity:.5; }
.cell-input.saved { outline:2px solid #37a55b; }

.client-row td { background:#ffd0d0; }
.client-row .sticky { background:#ffd0d0; }

.material.petg { background:#f4f11b !important; }
.material.abs  { background:#23dc12 !important; }
.material.pa   { background:#bedbab !important; }
.material.tpu  { background:#e79191 !important; }

/* Ресайзер не меняет position у TH — иначе ломается sticky. */
th.resizable {
    overflow:visible;
}
.resize-handle {
    position:absolute;
    top:0;
    right:-4px;
    width:9px;
    height:100%;
    cursor:col-resize;
    user-select:none;
    touch-action:none;
    z-index:30;
}
.resize-handle::after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:4px;
    width:1px;
    background:transparent;
}
.resize-handle:hover::after {
    background:#185abd;
}
body.column-resizing,
body.column-resizing * {
    cursor:col-resize !important;
    user-select:none !important;
}

.history-table {
    width:max-content;
    min-width:100%;
}


/* v0.3.3: компактная шапка + адаптивный размер текста */
.queue-table thead th {
    height: 76px;
    padding: 4px 6px;
}

.header-fit {
    width: 100%;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.03;
    font-weight: 700;
    font-size: 16px;
}

.printer-head {
    height: 76px;
    padding: 4px !important;
}

.printer-name {
    font-size: 15px;
    line-height: 1;
}

/* В узких служебных колонках содержимое центрируем по вертикали,
   но текст оставляем слева — так он читается стабильнее. */
.c3 .header-fit,
.c4 .header-fit,
.c5 .header-fit,
.c6 .header-fit {
    align-items: center;
}


/* v0.3.4: выравнивание служебных числовых колонок */
.queue-table th.c4,
.queue-table th.c5,
.queue-table th.c6,
.queue-table td.c4,
.queue-table td.c5,
.queue-table td.c6 {
    text-align: center;
}

.queue-table th.c4 .header-fit,
.queue-table th.c5 .header-fit,
.queue-table th.c6 .header-fit {
    justify-content: center;
    text-align: center;
}


/* v0.3.9 — Queue scrolling */

/* Строка "Заказ клиента" без цветового выделения. */
.client-row td,
.client-row .sticky {
    background: #fff !important;
}

/* Жирная линия под шапкой. */
.queue-table thead th {
    border-bottom: 3px solid #1f2937 !important;
}

/* ВАЖНО:
   Queue больше не имеет собственного вертикального скролла.
   Страница скроллится только браузером.
   overflow-y:hidden безопасен, потому что контейнер не ограничен по высоте. */
.queue-wrap {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 24px;
}

/* Дополнительный горизонтальный скролл всегда у нижней границы окна.
   Вертикального overflow у него нет вообще. */
.queue-xscroll {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #eef1f5;
    border-top: 1px solid #b8c0cc;
    z-index: 2000;
    display: none;
}

.queue-xscroll.active {
    display: block;
}

.queue-xscroll-inner {
    height: 1px;
}

/* Явно заметный горизонтальный scrollbar для Chrome/Edge. */
.queue-xscroll::-webkit-scrollbar {
    width: 0;
    height: 16px;
}
.queue-xscroll::-webkit-scrollbar-track {
    background: #dfe4ea;
}
.queue-xscroll::-webkit-scrollbar-thumb {
    background: #7f8998;
    border-radius: 8px;
    border: 3px solid #dfe4ea;
}
.queue-xscroll::-webkit-scrollbar-thumb:hover {
    background: #606b7b;
}

/* Чтобы плавающая полоса не перекрывала самый низ страницы. */
body {
    padding-bottom: 20px;
}


/* v0.4.0 */
.inline-form {
    display: inline;
    margin: 0;
}
.inline-form button {
    margin-top: 0;
}


/* ============================================================
   v0.4.3 — Queue layout
   - один горизонтальный scrollbar: плавающий внизу окна;
   - нативный горизонтальный scrollbar внутри таблицы скрыт;
   - вертикально скроллится только таблица;
   - верхняя глобальная панель PrintDesk уезжает вверх после начала
     вертикальной прокрутки таблицы;
   - Queue title/date/buttons/status остаются на месте.
   ============================================================ */

body.queue-page-mode {
    overflow: hidden;
    padding-bottom: 0 !important;
}

/* Верхняя общая панель остаётся только в начальном положении.
   После начала прокрутки таблицы она плавно уезжает вверх. */
body.queue-page-mode .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    transition: transform 140ms ease;
    transform: translateY(0);
}

body.queue-page-mode.queue-table-scrolled .topbar {
    transform: translateY(-60px);
}

/* Queue занимает всё оставшееся окно.
   При скрытии topbar рабочая область поднимается на её место. */
body.queue-page-mode .container {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 20px;
    left: 0;
    margin: 0;
    padding: 0 16px;
    max-width: none;
    transition: top 140ms ease;
    overflow: hidden;
}

body.queue-page-mode.queue-table-scrolled .container {
    top: 0;
}

.queue-workspace-active {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    background: #f5f7fa;
}

.queue-workspace-active .page-head {
    flex: 0 0 auto;
}

.queue-workspace-active > .muted {
    flex: 0 0 auto;
}

/* Табличная область занимает весь остаток высоты.
   Внутри неё есть только вертикальная прокрутка.
   Горизонтальное положение меняет нижний плавающий scrollbar. */
.queue-workspace-active .queue-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: auto;
    margin-bottom: 0;
    scrollbar-gutter: stable;
}

/* Edge/Chrome: скрываем ТОЛЬКО горизонтальную полосу queue-wrap.
   Вертикальная полоса таблицы остаётся рабочей. */
.queue-workspace-active .queue-wrap::-webkit-scrollbar:horizontal {
    height: 0;
}

.queue-workspace-active .queue-wrap::-webkit-scrollbar:vertical {
    width: 14px;
}

.queue-workspace-active .queue-wrap::-webkit-scrollbar-track:vertical {
    background: #e2e6eb;
}

.queue-workspace-active .queue-wrap::-webkit-scrollbar-thumb:vertical {
    background: #8a94a3;
    border-radius: 8px;
    border: 3px solid #e2e6eb;
}

/* Оставляем только этот горизонтальный scrollbar. */
body.queue-page-mode .queue-xscroll {
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 20px;
    z-index: 4000;
}

/* Шапка самой таблицы остаётся сверху табличной области. */
.queue-workspace-active .queue-table thead th {
    position: sticky;
    top: 0;
}


/* v0.4.4 — оставляем только один горизонтальный scrollbar.
   Внутренний горизонтальный scrollbar queue-wrap полностью запрещён,
   но scrollLeft по-прежнему управляется внешней нижней полосой через JS. */
.queue-workspace-active .queue-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* На всякий случай убираем высоту горизонтальной полосы Chromium/Edge. */
.queue-workspace-active .queue-wrap::-webkit-scrollbar:horizontal {
    height: 0 !important;
    display: none !important;
}


/* v0.4.6 — последняя установленная деталь в шапке принтера */
.printer-status-content {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.printer-status-img {
    display: block;
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    margin: auto;
}

.printer-part-img {
    border-radius: 3px;
}


/* v0.4.7 — время начала/окончания задачи в шапке принтера */

/* Шапка стала выше: имя принтера + старт + картинка + окончание. */
.queue-table thead th,
.printer-head {
    height: 108px;
}

.printer-toggle {
    width: 100%;
    height: 78px;
    min-width: 0;
    margin: 1px 0 0;
    padding: 0 3px;
    line-height: normal;
    display: block;
    overflow: hidden;
}

.printer-task-stack {
    width: 100%;
    height: 76px;
    min-width: 0;
    display: grid;
    grid-template-rows: 17px 40px 17px;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

.printer-task-time {
    width: 100%;
    min-width: 0;
    height: 17px;
    line-height: 17px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.printer-status-content {
    width: 38px;
    height: 38px;
    min-width: 0;
}

.printer-status-img {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
}

/* Имя принтера остаётся отдельной верхней строкой. */
.printer-name {
    height: 16px;
    line-height: 16px;
}


/* ============================================================
   v0.4.9 — start/end above picture + remaining-time countdown
   ============================================================ */

/* More vertical room for:
   printer name
   start
   end
   picture
   countdown
*/
.queue-table thead th,
.printer-head {
    height: 132px;
}

.printer-toggle {
    width: 100%;
    height: 102px;
    min-width: 0;
    margin: 1px 0 0;
    padding: 0 2px;
    line-height: normal;
    display: block;
    overflow: hidden;
}

.printer-task-stack {
    width: 100%;
    height: 100px;
    min-width: 0;
    display: grid;
    grid-template-rows: 16px 16px 42px 20px;
    row-gap: 1px;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

/* Start + end: black, two separate lines, never wrap. */
.printer-task-time {
    width: 100%;
    min-width: 0;
    height: 16px;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: #000 !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.printer-status-content {
    width: 40px;
    height: 40px;
    min-width: 0;
}

.printer-status-img {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
}

/* Countdown strip under the picture. */
.printer-countdown {
    width: 100%;
    min-width: 0;
    height: 20px;
    line-height: 20px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 2px;
}

/* Once remaining time is negative, only text changes to yellow.
   Background continues to use the minimum end of the gradient. */
.printer-countdown.expired {
    color: #ffeb00 !important;
}

/* Keep the printer name compact. */
.printer-name {
    height: 16px;
    line-height: 16px;
}


/* ============================================================
   v0.5.0 — исправленная компоновка шапки принтера
   ============================================================ */

/* Даём шапке достаточно реальной высоты, чтобы ничего не обрезалось. */
.queue-table thead th,
.printer-head {
    height: 138px !important;
    min-height: 138px !important;
}

.printer-head {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* У кнопки не должно быть клиппинга содержимого. */
.printer-toggle {
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    display: block !important;
    overflow: visible !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Вся рабочая часть под именем принтера — обычная вертикальная колонка. */
.printer-task-stack {
    width: 100% !important;
    height: 108px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    overflow: visible !important;
}

/* Две строки времени идут непосредственно друг под другом, без "пустой строки". */
.printer-time-pair {
    width: 100%;
    min-width: 0;
    height: 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 0 0 22px;
    overflow: visible;
}

.printer-task-time {
    width: 100% !important;
    min-width: 0 !important;
    height: 11px !important;
    min-height: 11px !important;
    line-height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-size: 11px;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Картинка всегда целиком помещается в свой блок. */
.printer-status-content {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.printer-status-img,
.printer-part-img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Таймер гарантированно расположен ПОД картинкой и не обрезается. */
.printer-countdown {
    width: 100% !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 1px !important;
    flex: 0 0 20px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-size: 12px;
    font-weight: 700 !important;
    border-radius: 2px;
}

.printer-countdown.expired {
    color: #ffeb00 !important;
    -webkit-text-fill-color: #ffeb00 !important;
}

/* Зелёный цвет оставляем только самой точке свободного принтера. */
.printer-online {
    color: #1ca54c !important;
    -webkit-text-fill-color: #1ca54c !important;
    font-size: 28px !important;
    line-height: 44px !important;
}

/* Имя принтера — отдельная компактная строка сверху. */
.printer-name {
    height: 16px !important;
    line-height: 16px !important;
    margin: 0 0 1px 0 !important;
}


/* ============================================================
   v0.5.1 — точное центрирование + адаптивный fit при ресайзе
   ============================================================ */

/* Убираем внутренние отступы TH — они и давали визуальный сдвиг слева. */
.printer-head {
    padding: 3px 0 3px 0 !important;
    text-align: center !important;
}

/* Форма не должна добавлять геометрию вокруг содержимого. */
.printer-head form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Полностью сбрасываем стандартное оформление button браузера. */
.printer-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline-offset: 0 !important;
    text-align: center !important;
}

/* Вся стопка строго по геометрическому центру колонки. */
.printer-task-stack {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* Даты: две плотные строки, но line-height достаточно большой,
   чтобы верх/низ цифр не обрезался. */
.printer-time-pair {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.printer-task-time {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-weight: 600 !important;
}

/* Картинка тоже центрируется относительно полной ширины TH. */
.printer-status-content {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Таймер занимает всю ширину принтерной колонки и центрируется. */
.printer-countdown {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

/* Имя принтера по центру той же самой геометрии. */
.printer-name {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}


/* ============================================================
   v0.5.2 — режим "принтер выведен из эксплуатации"
   ============================================================ */

/* Одна дата установки флага вместо двух строк задания. */
.printer-outage-time-pair {
    justify-content: center !important;
}

.printer-outage-since {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Таймер сколько принтер находится вне эксплуатации.
   Никакого фона — только чёрный текст. */
.printer-outage-elapsed {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 1px !important;
    flex: 0 0 20px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 700 !important;
    border-radius: 0 !important;
}


/* ============================================================
   v0.5.3 — таймер прижат вниз, картинка использует максимум поля
   ============================================================ */

/* Внутри кнопки:
   1) время/времена сверху
   2) вся оставшаяся высота — картинке
   3) таймер строго у нижнего края
*/
.printer-toggle {
    height: 116px !important;
    min-height: 116px !important;
    overflow: hidden !important;
}

.printer-task-stack {
    width: 100% !important;
    height: 116px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 28px minmax(0, 1fr) 20px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
}

/* Верхний блок времени остаётся компактным. */
.printer-time-pair {
    grid-row: 1 !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Средняя область занимает ВСЁ оставшееся место между временем и таймером. */
.printer-status-content {
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Изображение масштабируется одновременно по ширине и высоте своего поля.
   object-fit:contain гарантирует, что деталь/крестик видны целиком. */
.printer-status-img,
.printer-part-img {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

/* Обычный таймер — всегда нижняя строка. */
.printer-countdown {
    grid-row: 3 !important;
    align-self: end !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
}

/* Таймер простоя принтера — туда же, у самого низа. */
.printer-outage-elapsed {
    grid-row: 3 !important;
    align-self: end !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
}

/* Свободный принтер: зелёная точка центрируется в том же большом поле картинки. */
.printer-online {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}


/* ============================================================
   v0.5.4 — возвращаем точное центрирование шапки принтеров
   ============================================================ */

/* В v0.5.3 stretch был нужен для максимальной области картинки,
   но он визуально растянул всю стопку к краям.
   Сама сетка остаётся на всю ширину, а содержимое центрируем отдельно. */
.printer-task-stack {
    align-items: center !important;
    justify-items: center !important;
}

/* Временной блок занимает всю ширину, но его строки центрированы. */
.printer-time-pair {
    justify-self: stretch !important;
    align-self: start !important;
    text-align: center !important;
}

.printer-task-time {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Область изображения по-прежнему получает всю доступную ширину/высоту,
   а само изображение масштабируется contain и центрируется внутри неё. */
.printer-status-content {
    justify-self: stretch !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.printer-status-img,
.printer-part-img {
    object-position: 50% 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Оба таймера занимают полную ширину, текст строго по центру. */
.printer-countdown,
.printer-outage-elapsed {
    justify-self: stretch !important;
    text-align: center !important;
}

/* Имя и номер принтера — строго по центру ячейки. */
.printer-head,
.printer-name {
    text-align: center !important;
}

/* И поля количества в теле таблицы держим по центру визуально. */
.queue-table td.assign {
    text-align: center !important;
}

.queue-table td.assign .cell-input {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   v0.5.5 — structural centering of printer header
   Previous patch mainly repeated existing align rules.
   This version removes flex/grid ambiguity and pins each zone
   to the exact geometric width of the printer column.
   ============================================================ */

.printer-head {
    position: sticky !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

/* Name gets the full column width. */
.printer-name {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Form and button must be exactly the same width as the TH. */
.printer-status-form {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 116px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.printer-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 116px !important;
    min-width: 0 !important;
    min-height: 116px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Do not let old flex/grid alignment affect actual positions. */
.printer-task-stack {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 116px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Top zone: exact full width, centered text. */
.printer-time-pair {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 14px 14px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
}

.printer-outage-time-pair {
    grid-template-rows: 28px !important;
}

.printer-task-time {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transform: none !important;
}

.printer-outage-since {
    height: 28px !important;
    line-height: 28px !important;
}

/* Middle zone: starts at exactly 28 px and ends 20 px above bottom.
   This is the maximum available picture area. */
.printer-status-content {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 28px !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* The IMAGE BOX itself fills the middle zone; contain centers the full picture. */
.printer-status-img,
.printer-part-img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}

/* Bottom zone: exact full width and pinned to the bottom edge. */
.printer-countdown,
.printer-outage-elapsed {
    box-sizing: border-box !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 1px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Free printer dot also sits at the exact center of the middle zone. */
.printer-online {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}


/* ============================================================
   v0.5.7 — безопасное центрирование ТОЛЬКО верхних строк времени.
   Таймер и нижняя геометрия не меняются.
   ============================================================ */

.printer-task-time {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow: hidden !important;
    transform: none !important;
}

.printer-time-text {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    line-height: inherit !important;
}


/* ============================================================
   v0.5.9 — чистая Grid-компоновка шапки принтера.
   Без absolute-positioning верхних строк.
   ============================================================ */

.printer-head {
    box-sizing: border-box !important;
    height: 138px !important;
    min-height: 138px !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* 20 px — номер/имя принтера. */
.printer-name {
    position: static !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* Оставшиеся 118 px полностью принадлежат статусу принтера. */
.printer-status-form {
    position: static !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.printer-toggle {
    position: static !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 118px !important;
    min-width: 0 !important;
    min-height: 118px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    transform: none !important;
}

/*
  28 px — время
  всё остальное — картинка
  20 px — таймер, строго последняя строка
*/
.printer-task-stack {
    position: static !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 28px minmax(0, 1fr) 20px !important;
    width: 100% !important;
    height: 118px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* Две реальные строки времени, без абсолютного позиционирования. */
.printer-time-pair {
    position: static !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 14px 14px !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.printer-outage-time-pair {
    grid-template-rows: 28px !important;
}

.printer-task-time {
    position: static !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 14px !important;
    min-width: 0 !important;
    min-height: 14px !important;
    line-height: 14px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transform: none !important;
}

.printer-outage-since {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
}

.printer-time-text {
    position: static !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    line-height: 1 !important;
    transform: none !important;
}

/* Картинка занимает максимально возможную центральную область. */
.printer-status-content {
    position: static !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    overflow: hidden !important;
}

.printer-status-img,
.printer-part-img {
    position: static !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Таймер — физически третья и последняя строка Grid. */
.printer-countdown,
.printer-outage-elapsed {
    position: static !important;
    grid-row: 3 !important;
    box-sizing: border-box !important;
    display: block !important;
    align-self: end !important;
    width: 100% !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 1px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Свободный принтер. */
.printer-online {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}


/* ============================================================
   v0.6.0 — одна строка над Queue + общий раздел Настройки
   ============================================================ */

.queue-workspace-active {
    padding-top: 18px !important;
}

.queue-toolbar {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 0 14px 0 !important;
}

.queue-toolbar-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
}

.queue-toolbar-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.queue-toolbar-actions .button,
.queue-toolbar-actions button {
    margin: 0 !important;
}

.queue-toolbar-actions .inline-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.settings-cards {
    margin-top: 20px;
}


/* ============================================================
   v0.6.1 — История Плана в том же формате, что и основной План
   ============================================================ */

.history-page {
    padding-bottom: 30px;
}

.history-main-toolbar {
    margin-bottom: 18px;
}

.history-main-toolbar h1 {
    margin: 0;
}

.history-plan-block {
    margin-bottom: 34px;
}

.history-plan-toolbar {
    margin: 0 0 8px 0;
}

.history-plan-toolbar .queue-toolbar-title {
    font-size: 22px !important;
}

/* Исторический блок не ограничиваем высотой: показывается весь План.
   Горизонтальный скролл остаётся у каждого блока отдельно. */
.history-plan-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin-bottom: 0 !important;
}

.history-plan-table {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* В истории printer header визуально такой же, но не кликабельный. */
.history-printer-status {
    pointer-events: none;
}

.history-printer-toggle {
    cursor: default !important;
}

/* В истории шапка не должна прилипать к окну при прокрутке всей страницы. */
.history-plan-table thead th,
.history-plan-table .sticky {
    position: static !important;
}

/* Но сетка, цвета, изображения и геометрия остаются теми же. */
.history-plan-table .c1,
.history-plan-table .c2,
.history-plan-table .c3,
.history-plan-table .c4,
.history-plan-table .c5,
.history-plan-table .c6 {
    position: static !important;
}


/* ============================================================
   v0.6.2 — История: статичные таймеры размера как в Плане
   ============================================================ */

.history-plan-table .printer-countdown,
.history-plan-table .printer-outage-elapsed {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
}

.history-plan-table .printer-countdown.expired {
    color: #ffeb00 !important;
    -webkit-text-fill-color: #ffeb00 !important;
}

/* Static historical value: no visual cue suggesting a live control. */
.history-static-timer {
    cursor: default !important;
}


/* ============================================================
   v0.6.3 — системный часовой пояс
   ============================================================ */

.settings-section {
    margin-top: 18px;
}

.settings-timezone-card {
    max-width: 620px;
}

.settings-timezone-card input[list] {
    width: min(100%, 420px);
}

.settings-hint {
    margin-top: 8px;
    margin-bottom: 14px;
    line-height: 1.4;
}

.settings-inline-hint {
    margin: 2px 0 8px 0;
    font-size: 13px;
}


/* v0.7.0 — brief visual confirmation when completed production updates shortage */
.queue-table .req.live-updated {
    font-weight: 700;
}


/* ============================================================
   v0.8.0 — ручное завершение печати / Брак
   ============================================================ */

.production-cell {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
}

.production-cell .cell-input {
    box-sizing: border-box;
}

.production-cell-actions {
    height: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.production-cell-actions.production-actions-visible {
    height: 19px;
    min-height: 19px;
    opacity: 1;
    pointer-events: auto;
}

.production-action {
    box-sizing: border-box;
    width: 22px;
    min-width: 22px;
    height: 18px;
    min-height: 18px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.production-success {
    background: #24984a;
}

.production-success:hover {
    background: #1d7f3d;
}

.production-defect {
    background: #c63c3c;
}

.production-defect:hover {
    background: #a92f2f;
}

.production-action:disabled {
    opacity: .45;
    cursor: wait;
}

.defects-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8dee8;
    background: #fff;
}

.defects-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.defects-table th,
.defects-table td {
    padding: 7px 9px;
    border-right: 1px solid #e3e7ec;
    border-bottom: 1px solid #e3e7ec;
    vertical-align: middle;
}

.defects-table th {
    background: #f8fafc;
    text-align: left;
    white-space: nowrap;
}

.defects-table tr:last-child td {
    border-bottom: 0;
}

.defect-name {
    min-width: 280px;
}

.defect-image-cell {
    width: 56px;
    padding: 3px !important;
    text-align: center;
}

.defect-product-img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    object-fit: contain;
}

.defect-number {
    text-align: center;
    font-weight: 700;
}


/* ============================================================
   v0.8.2 — fixed input/action geometry + hidden OOS body cells
   ============================================================ */

/* The printer header stays marked as out of service.
   The BODY column is not tinted and contains no input boxes. */
.queue-table td.printer-unavailable-cell,
.history-plan-table td.printer-unavailable-cell {
    background: inherit !important;
    padding: 5px !important;
}

/*
 * Permanent geometry:
 *   34 px input
 *   19 px reserved action row
 * Buttons appear/disappear inside the reserved row, so the input never jumps.
 */
.production-cell {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 34px 19px !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.queue-table td.assign,
.history-plan-table td.assign {
    vertical-align: top !important;
}

.production-cell .cell-input {
    grid-row: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
}

.production-cell-actions,
.production-cell-actions.production-actions-visible {
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 19px !important;
    min-height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
}

/* Hidden state keeps its physical 19px slot. */
.production-cell-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Only visibility changes when quantity becomes positive. */
.production-cell-actions.production-actions-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.history-production-cell .production-cell-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================================
   v0.8.4 — аккуратные кнопки завершения печати
   ============================================================ */

/* Чуть больше места под кнопки, чтобы они не обрезались снизу. */
.production-cell {
    grid-template-rows: 34px 22px !important;
    min-height: 59px !important;
    gap: 3px !important;
}

.production-cell-actions,
.production-cell-actions.production-actions-visible {
    height: 22px !important;
    min-height: 22px !important;
    overflow: visible !important;
    gap: 5px !important;
}

/* Кнопки — полноценные квадратные элементы с точным центрированием символа. */
.production-action {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    overflow: visible !important;
    cursor: pointer !important;
}

.production-success {
    background: #24984a !important;
}

.production-defect {
    background: #c63c3c !important;
}

.production-success:hover {
    background: #1d7f3d !important;
}

.production-defect:hover {
    background: #a92f2f !important;
}

.production-action:active {
    transform: translateY(1px);
}

.production-action:disabled {
    opacity: .45 !important;
    cursor: wait !important;
}


/* ============================================================
   v0.8.5 — одинаковая геометрия зелёной и красной кнопок
   ============================================================ */

.production-action {
    position: relative !important;
    flex: 0 0 20px !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: hidden !important;
}

/* Убираем зависимость внешнего вида от Unicode-глифов ✓ и ×.
   Значки рисуются CSS и поэтому визуально одинаково центрируются. */
.production-success::before {
    content: "" !important;
    position: absolute !important;

    width: 5px !important;
    height: 9px !important;

    left: 7px !important;
    top: 4px !important;

    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;

    transform: rotate(45deg) !important;
    transform-origin: center !important;
}

.production-defect::before,
.production-defect::after {
    content: "" !important;
    position: absolute !important;

    width: 10px !important;
    height: 2px !important;

    left: 5px !important;
    top: 9px !important;

    background: #fff !important;
    border-radius: 1px !important;

    transform-origin: center !important;
}

.production-defect::before {
    transform: rotate(45deg) !important;
}

.production-defect::after {
    transform: rotate(-45deg) !important;
}


/* ============================================================
   v0.8.7 — только центрирование заголовков "Артикул" и "Наименование"
   ============================================================ */

.queue-table thead th.c1 .header-fit,
.queue-table thead th.c2 .header-fit,
.history-plan-table thead th.c1 .header-fit,
.history-plan-table thead th.c2 .header-fit {
    text-align: center !important;
    justify-content: center !important;
}


/* ============================================================
   v0.9.0 — раздел «Зачистка»
   ============================================================ */

.cleanup-page-head h1 {
    margin: 0;
}

.cleanup-page-head > div {
    display: flex;
    gap: 8px;
}

.cleanup-error {
    margin-bottom: 14px;
}

.cleanup-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d8dee8;
    background: #fff;
}

.cleanup-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.cleanup-table th,
.cleanup-table td {
    padding: 7px 9px;
    border-right: 1px solid #e3e7ec;
    border-bottom: 1px solid #e3e7ec;
    vertical-align: middle;
}

.cleanup-table th {
    background: #f8fafc;
    text-align: center;
    white-space: nowrap;
}

.cleanup-table tr:last-child td {
    border-bottom: 0;
}

.cleanup-article {
    width: 90px;
    text-align: center;
}

.cleanup-name {
    min-width: 320px;
}

.cleanup-image-cell {
    width: 64px;
    padding: 3px !important;
    text-align: center;
}

.cleanup-product-img {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    object-fit: contain;
}

.cleanup-number {
    width: 130px;
    text-align: center;
    font-weight: 700;
}

.cleanup-action-cell {
    min-width: 315px;
}

.cleanup-action {
    display: grid;
    grid-template-columns: 92px 64px minmax(120px, 1fr);
    gap: 7px;
    align-items: center;
}

.cleanup-qty-input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    text-align: center;
    font-size: 15px;
}

.cleanup-action .button {
    margin: 0 !important;
    white-space: nowrap;
}

.cleanup-send-button {
    min-width: 125px;
}

.cleanup-row-completed {
    opacity: 0;
    transition: opacity .25s ease;
}


/* ============================================================
   v0.9.2 — атрибуция партий в разделе «Зачистка»
   ============================================================ */

.cleanup-person {
    width: 115px;
    min-width: 115px;
    text-align: center;
    white-space: nowrap;
}

.cleanup-table {
    min-width: 1220px;
}


/* ============================================================
   v0.9.3 — мелкие правки интерфейса «Зачистка»
   ============================================================ */

/* Воздух между верхними кнопками и таблицей. */
.cleanup-page-head {
    margin-bottom: 14px !important;
}


/* ============================================================
   v0.9.4 — дата появления строки в разделе «Зачистка»
   ============================================================ */

.cleanup-datetime {
    width: 145px;
    min-width: 145px;
    text-align: center;
    white-space: nowrap;
}

.cleanup-table {
    min-width: 1370px;
}


/* ============================================================
   v0.9.5 — кнопка «В брак» в разделе «Зачистка»
   ============================================================ */

.cleanup-action-cell {
    min-width: 410px;
}

.cleanup-action {
    grid-template-columns:
        92px
        58px
        minmax(120px, 1fr)
        minmax(90px, .75fr);
}

.cleanup-defect-button {
    background: #c63c3c !important;
    border-color: #c63c3c !important;
    color: #fff !important;
}

.cleanup-defect-button:hover {
    background: #a92f2f !important;
    border-color: #a92f2f !important;
}


/* ============================================================
   v0.9.6 — одинаковая шапка четырёх производственных разделов
   База геометрии: страница «План»
   ============================================================ */

/*
 * План уже использует .queue-toolbar / .queue-toolbar-title /
 * .queue-toolbar-actions. Те же классы теперь стоят на главных шапках
 * «Зачистка», «Брак» и «История».
 *
 * Здесь фиксируем только главную полосу раздела, чтобы старые локальные
 * правила (например cleanup-page-head / history-main-toolbar) не меняли
 * расстояния.
 */
.section-main-toolbar {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 0 14px 0 !important;
}

.section-main-toolbar .queue-toolbar-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
}

.section-main-toolbar .queue-toolbar-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.section-main-toolbar .queue-toolbar-actions .button,
.section-main-toolbar .queue-toolbar-actions button {
    margin: 0 !important;
}

/* Старые локальные отступы больше не должны отличаться от Плана. */
.cleanup-page-head,
.history-main-toolbar {
    margin-bottom: 14px !important;
}


/* ============================================================
   v0.10.0 — конфликт активной задачи на принтере
   ============================================================ */

.task-conflict-modal[hidden] {
    display: none !important;
}

.task-conflict-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.task-conflict-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
}

.task-conflict-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #d7dde6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .22);
}

.task-conflict-title {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
}

.task-conflict-text {
    font-size: 15px;
    line-height: 1.45;
}

.task-conflict-note {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #f5f7fa;
    font-size: 13px;
    line-height: 1.4;
}

.task-conflict-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.task-conflict-actions .button {
    margin: 0 !important;
}

.task-conflict-defect,
.task-conflict-success {
    color: #fff !important;
    border: 0 !important;
}

.task-conflict-defect {
    background: #c63c3c !important;
}

.task-conflict-defect:hover {
    background: #a92f2f !important;
}

.task-conflict-success {
    background: #24984a !important;
}

.task-conflict-success:hover {
    background: #1d7f3d !important;
}


/* ============================================================
   v0.11.0 — заказ клиента в Зачистке / Успешных
   ============================================================ */

.cleanup-client-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 205px;
}

.cleanup-client-action .button {
    margin: 0 !important;
    min-width: 92px;
}

.cleanup-client-success {
    background: #24984a !important;
    border-color: #24984a !important;
    color: #fff !important;
}

.cleanup-client-success:hover {
    background: #1d7f3d !important;
    border-color: #1d7f3d !important;
}

.cleanup-client-defect {
    background: #c63c3c !important;
    border-color: #c63c3c !important;
    color: #fff !important;
}

.cleanup-client-defect:hover {
    background: #a92f2f !important;
    border-color: #a92f2f !important;
}


/* ============================================================
   v0.11.3 — Принтер + выбор инженера «Снял» в Зачистке
   ============================================================ */

.cleanup-removed-cell {
    padding: 4px 6px !important;
}

.cleanup-removed-select {
    width: 132px;
    min-width: 132px;
    height: 34px;
    margin: 0;
    padding: 5px 28px 5px 8px;
    border-radius: 6px;
    text-align: left;
    font-size: 13px;
}

.cleanup-printer {
    width: 105px;
    min-width: 105px;
    text-align: center;
    white-space: nowrap;
}

.cleanup-table {
    min-width: 1490px;
}


/* ============================================================
   v0.12.0 — единый раздел «Настройки»
   ============================================================ */

.settings-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 10px 0 40px;
}

.settings-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
}

.settings-heading h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.18;
    color: #182230;
}

.settings-heading p {
    margin: 7px 0 0;
    color: #697386;
    line-height: 1.45;
}

.settings-heading-with-action {
    align-items: center;
}

.settings-heading .settings-primary-action,
.settings-heading .settings-back-button {
    flex: 0 0 auto;
    margin: 0 !important;
}

.settings-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 22px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #e1e6ed;
    border-radius: 10px;
    background: #ffffff;
}

.settings-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 7px;
    color: #526071;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.settings-tab:hover {
    background: #f3f6fa;
    color: #185abd;
}

.settings-tab.active {
    background: #e9eef7;
    color: #185abd;
}

.settings-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-panel,
.settings-summary-card {
    border: 1px solid #e1e6ed;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

.settings-panel {
    padding: 24px;
}

.settings-panel-primary {
    border-top: 3px solid #185abd;
    padding-top: 21px;
}

.settings-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.settings-panel-head h2 {
    margin: 3px 0 0;
    font-size: 21px;
    line-height: 1.25;
    color: #1f2937;
}

.settings-panel-head p {
    max-width: 760px;
    margin: 7px 0 0;
    color: #697386;
    line-height: 1.48;
}

.settings-kicker {
    color: #7a8697;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-value-badge,
.settings-count-badge {
    flex: 0 0 auto;
    border: 1px solid #dce3ed;
    border-radius: 999px;
    background: #f7f9fc;
    color: #445164;
    font-size: 13px;
    font-weight: 700;
}

.settings-value-badge {
    padding: 8px 11px;
}

.settings-count-badge {
    min-width: 38px;
    padding: 8px 12px;
    text-align: center;
}

.settings-form {
    margin: 0;
}

.settings-form-inline {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.settings-field {
    min-width: 0;
}

.settings-field label {
    margin: 0 0 7px;
    font-size: 13px;
    color: #354052;
}

.settings-field input,
.settings-field select {
    margin: 0;
}

.settings-field-small {
    width: 210px;
}

.settings-field-hint {
    display: block;
    margin-top: 7px;
    color: #7a8697;
    font-size: 12px;
    line-height: 1.4;
}

.settings-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.settings-form-inline .settings-form-actions {
    margin-top: 0;
}

.settings-form-actions button,
.settings-form-actions .button {
    margin: 0 !important;
}

.settings-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.settings-summary-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    gap: 14px;
    align-items: start;
    padding: 22px;
    color: inherit;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.settings-summary-card:hover {
    border-color: #c8d3e1;
    box-shadow: 0 5px 18px rgba(16, 24, 40, .065);
    transform: translateY(-1px);
}

.settings-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e9eef7;
    color: #185abd;
    font-size: 17px;
    font-weight: 800;
}

.settings-summary-body h2 {
    margin: 3px 0 0;
    font-size: 19px;
    color: #1f2937;
}

.settings-summary-body p {
    margin: 7px 0 0;
    min-height: 42px;
    color: #697386;
    line-height: 1.45;
}

.settings-card-arrow {
    padding-top: 14px;
    color: #8390a2;
    font-size: 20px;
    transition: transform 120ms ease;
}

.settings-summary-card:hover .settings-card-arrow {
    transform: translateX(2px);
    color: #185abd;
}

.settings-stats {
    display: flex;
    gap: 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf0f3;
}

.settings-stats span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-stats strong {
    color: #273345;
    font-size: 17px;
}

.settings-stats small {
    color: #8390a2;
    font-size: 11px;
}

.settings-panel-table {
    padding: 0;
    overflow: hidden;
}

.settings-panel-table .settings-panel-head {
    margin: 0;
    padding: 24px;
}

.settings-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid #e8ecf1;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.settings-table th,
.settings-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #edf0f3;
    vertical-align: middle;
}

.settings-table th {
    background: #f8fafc;
    color: #667386;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
}

.settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.settings-table tbody tr:hover td {
    background: #fbfcfe;
}

.settings-table input {
    margin: 0;
    padding: 8px 10px;
    border-radius: 7px;
}

.settings-number-col {
    width: 120px;
}

.settings-active-col {
    width: 100px;
    text-align: center !important;
}

.settings-action-col {
    width: 105px;
}

.settings-checkbox-cell,
.settings-row-action {
    text-align: center;
}

.settings-row-action a {
    font-weight: 650;
}

.settings-user-name {
    font-weight: 650;
    color: #293548;
}

.settings-status,
.settings-role {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f4f8;
    color: #596679;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.settings-status-active {
    background: #eaf7ef;
    color: #247144;
}

.settings-status-blocked {
    background: #fff0f0;
    color: #a13b3b;
}

.settings-role-admin {
    background: #e9eef7;
    color: #185abd;
}

.settings-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd3de;
    transition: background 120ms ease;
}

.settings-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
    transition: transform 120ms ease;
}

.settings-switch input:checked + span {
    background: #185abd;
}

.settings-switch input:checked + span::after {
    transform: translateX(16px);
}

.printer-settings-form {
    margin: 0;
}

.printer-add-row {
    max-width: 460px;
    margin-top: 20px;
}

.printer-settings-form > .settings-form-actions {
    margin-top: 18px;
}

.settings-user-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.settings-option-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.settings-check-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #fafbfd;
    cursor: pointer;
}

.settings-check-card input {
    width: auto;
    margin-top: 3px;
}

.settings-check-card span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.settings-check-card strong {
    color: #303b4c;
    font-size: 13px;
}

.settings-check-card small {
    color: #7b8798;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.settings-permissions {
    border: 1px solid #e5e9ef;
    border-radius: 9px;
    overflow: hidden;
}

.settings-permission-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f3;
}

.settings-permission-row:last-child {
    border-bottom: 0;
}

.settings-permission-row select {
    margin: 0;
    padding: 8px 10px;
}

.settings-savebar {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .08);
    backdrop-filter: blur(8px);
}

.settings-savebar button,
.settings-savebar .button {
    margin: 0 !important;
}

@media (max-width: 760px) {
    .settings-card-grid,
    .settings-form-grid,
    .settings-option-row {
        grid-template-columns: 1fr;
    }

    .settings-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-heading .settings-primary-action,
    .settings-heading .settings-back-button {
        align-self: flex-start;
    }

    .settings-form-inline {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-field-small {
        width: 100%;
    }

    .settings-permission-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* ============================================================
   v0.13.0 — роли и права АРМ
   ============================================================ */

.permission-disabled,
.button.permission-disabled,
.topnav-disabled,
.card-disabled {
    cursor: not-allowed !important;
    user-select: none;
}

.button.permission-disabled,
.permission-disabled {
    opacity: .46 !important;
    filter: grayscale(.45);
    pointer-events: none;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
}

button:disabled {
    opacity: .46 !important;
    filter: grayscale(.45);
}

.topbar nav .topnav-disabled {
    display: inline-flex;
    align-items: center;
    color: #9ba5b3;
    opacity: .7;
}

.dashboard-section-title {
    margin: 24px 0 12px;
    font-size: 18px;
    color: #354052;
}

.card-disabled {
    opacity: .52;
    filter: grayscale(.55);
    background: #f5f6f8 !important;
    border-color: #e2e6eb !important;
}

.card-disabled * {
    color: #8d97a4 !important;
}

.settings-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-role-inactive {
    background: #fff0f0;
    color: #9b4a4a;
}

.settings-legacy-warning {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #ecd8a4;
    border-radius: 7px;
    background: #fff9e8;
    color: #775f24;
}

.settings-role-help {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #e1e6ed;
    border-radius: 8px;
    background: #f8fafc;
    color: #687587;
    font-size: 13px;
    line-height: 1.45;
}

.settings-empty-state {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 30px 24px;
    border-top: 1px solid #e8ecf1;
    color: #778397;
}

.settings-empty-state strong {
    color: #3a4657;
}

.role-permission-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-section-card {
    overflow: hidden;
    border: 1px solid #e2e7ee;
    border-radius: 10px;
    background: #fff;
}

.role-section-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 24px;
    align-items: center;
    padding: 16px;
}

.role-section-main > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-section-main strong {
    color: #293548;
    font-size: 15px;
}

.role-section-main span {
    color: #778397;
    font-size: 12px;
    line-height: 1.4;
}

.role-section-main select {
    margin: 0;
}

.role-action-list {
    border-top: 1px solid #edf0f3;
    background: #fafbfd;
}

.role-action-title {
    padding: 10px 16px 6px;
    color: #8994a4;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.role-action-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid #eef1f4;
}

.role-action-row:first-of-type {
    border-top: 0;
}

.role-action-row input {
    width: auto;
    margin: 3px 0 0;
}

.role-action-row span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.role-action-row strong {
    color: #394658;
    font-size: 13px;
}

.role-action-row small {
    color: #818c9d;
    font-size: 12px;
    line-height: 1.35;
}

.settings-option-row-single {
    grid-template-columns: minmax(0, 520px);
}

@media (max-width: 900px) {
    .settings-card-grid {
        grid-template-columns: 1fr;
    }

    .role-section-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}


/* ============================================================
   v0.14.0 — запущенное количество неизменяемо
   ============================================================ */

.cell-input[readonly],
.cell-input.cell-input-locked {
    cursor: default;
}

.cell-input[readonly]:focus,
.cell-input.cell-input-locked:focus {
    outline-style: solid;
}
/* ============================================================
   v0.14.3 — единые модальные сообщения PrintDesk
   ============================================================ */

body.printdesk-dialog-open {
    overflow: hidden;
}

.printdesk-dialog-root[hidden] {
    display: none !important;
}

.printdesk-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.printdesk-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 36, 51, .42);
    backdrop-filter: blur(1px);
}

.printdesk-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 26px 22px 20px;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .24);
}

.printdesk-dialog-title {
    margin: 0 0 14px;
    color: #202b3c;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
}

.printdesk-dialog-message {
    color: #3d495a;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}

.printdesk-dialog-note {
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 7px;
    background: #f4f6f9;
    color: #495668;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
}

.printdesk-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.printdesk-dialog-actions .button {
    min-width: 98px;
    margin: 0 !important;
}

.printdesk-dialog-button-danger {
    border-color: #d43b3b !important;
    background: #d43b3b !important;
    color: #fff !important;
}

.printdesk-dialog-button-danger:hover {
    border-color: #bd3030 !important;
    background: #bd3030 !important;
}

.printdesk-dialog-button-success {
    border-color: #20a25a !important;
    background: #20a25a !important;
    color: #fff !important;
}

.printdesk-dialog-button-success:hover {
    border-color: #188b4c !important;
    background: #188b4c !important;
}

@media (max-width: 560px) {
    .printdesk-dialog-root {
        padding: 14px;
    }

    .printdesk-dialog {
        padding: 22px 16px 16px;
    }

    .printdesk-dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .printdesk-dialog-actions .button {
        width: 100%;
    }
}
/* ============================================================
   v0.14.4 — мобильный План: Картинка + Нехватка слева
   ============================================================ */

@media (max-width: 900px) {
    /*
     * Из шести закреплённых служебных колонок оставляем только:
     *   c3 = Картинка
     *   c4 = Нехватка
     *
     * Принтеры и их рабочие ячейки не скрываются и продолжают
     * горизонтально прокручиваться как раньше.
     */
    .queue-table.queue-compact-left .c1,
    .queue-table.queue-compact-left .c2,
    .queue-table.queue-compact-left .c5,
    .queue-table.queue-compact-left .c6 {
        display: none !important;
    }

    .queue-table.queue-compact-left .c3,
    .queue-table.queue-compact-left .c4 {
        display: table-cell;
    }

    /*
     * На узком экране резайзеры скрытых колонок тоже отсутствуют.
     * Резайзеры Картинки, Нехватки и принтеров остаются рабочими.
     */
    .queue-table.queue-compact-left th.c1 .resize-handle,
    .queue-table.queue-compact-left th.c2 .resize-handle,
    .queue-table.queue-compact-left th.c5 .resize-handle,
    .queue-table.queue-compact-left th.c6 .resize-handle {
        display: none !important;
    }
}

/* ============================================================
   v0.14.8 — dark theme
   ============================================================ */

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

    --dark-bg: #10151c;
    --dark-bg-soft: #141b24;
    --dark-surface: #18212b;
    --dark-surface-2: #202b37;
    --dark-surface-3: #263240;
    --dark-border: #344252;
    --dark-border-soft: #293544;
    --dark-text: #e7edf5;
    --dark-text-strong: #f3f6fa;
    --dark-muted: #9aa8b8;
    --dark-muted-2: #7f8d9e;
    --dark-accent: #4f84e8;
    --dark-accent-soft: #22395f;
    --dark-input: #111820;
    --dark-hover: #222d39;
    --dark-shadow: rgba(0, 0, 0, .34);

    background: var(--dark-bg);
    color: var(--dark-text);
}

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

html[data-theme="dark"] .topbar {
    border-color: var(--dark-border-soft);
    background: #141b23;
    color: var(--dark-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .topbar a,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .userbox,
html[data-theme="dark"] .userbox span {
    color: var(--dark-text);
}

html[data-theme="dark"] .topbar nav a {
    color: #c4cfdb;
}

html[data-theme="dark"] .topbar nav a:hover,
html[data-theme="dark"] .brand:hover {
    color: #ffffff;
}

html[data-theme="dark"] .topnav-disabled {
    color: #667486 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] label {
    color: var(--dark-text-strong);
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted {
    color: var(--dark-muted);
}

html[data-theme="dark"] a {
    color: #78a8ff;
}

html[data-theme="dark"] hr {
    border-color: var(--dark-border-soft);
}

/* Buttons */

html[data-theme="dark"] button,
html[data-theme="dark"] .button {
    border-color: #42608a;
    background: #315c9d;
    color: #ffffff;
}

html[data-theme="dark"] button:hover:not(:disabled),
html[data-theme="dark"] .button:hover:not(.permission-disabled) {
    border-color: #5578ad;
    background: #3a68ad;
}

html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .link-button {
    border-color: var(--dark-border);
    background: var(--dark-surface-2);
    color: #d7e0ea;
}

html[data-theme="dark"] button.secondary:hover:not(:disabled),
html[data-theme="dark"] .button.secondary:hover:not(.permission-disabled),
html[data-theme="dark"] .link-button:hover {
    border-color: #46586d;
    background: var(--dark-surface-3);
    color: #ffffff;
}

html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .permission-disabled {
    border-color: #303b48 !important;
    background: #202832 !important;
    color: #687687 !important;
    opacity: .72 !important;
}

/* Form controls */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-color: var(--dark-border);
    background: var(--dark-input);
    color: var(--dark-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #687789;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #5687d4;
    outline-color: #5687d4;
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly] {
    border-color: #2b3744;
    background: #182029;
    color: #8b99a9;
}

/* Dashboard / cards */

html[data-theme="dark"] .card,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .settings-summary-card {
    border-color: var(--dark-border-soft);
    background: var(--dark-surface);
    color: var(--dark-text);
    box-shadow: 0 1px 2px var(--dark-shadow);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .settings-summary-card:hover {
    border-color: #46586d;
    background: #1b2530;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .card-disabled {
    border-color: #29333f !important;
    background: #171e26 !important;
    opacity: .62;
}

html[data-theme="dark"] .card-disabled * {
    color: #677586 !important;
}

/* Settings */

html[data-theme="dark"] .settings-heading h1,
html[data-theme="dark"] .settings-panel-head h2,
html[data-theme="dark"] .settings-summary-body h2,
html[data-theme="dark"] .settings-user-name,
html[data-theme="dark"] .role-section-main strong,
html[data-theme="dark"] .role-action-row strong {
    color: var(--dark-text-strong);
}

html[data-theme="dark"] .settings-heading p,
html[data-theme="dark"] .settings-panel-head p,
html[data-theme="dark"] .settings-summary-body p,
html[data-theme="dark"] .settings-field-hint,
html[data-theme="dark"] .role-section-main span,
html[data-theme="dark"] .role-action-row small {
    color: var(--dark-muted);
}

html[data-theme="dark"] .settings-tabs {
    border-color: var(--dark-border-soft);
    background: var(--dark-surface);
}

html[data-theme="dark"] .settings-tab {
    color: #aebbc9;
}

html[data-theme="dark"] .settings-tab:hover {
    background: var(--dark-hover);
    color: #dce7f5;
}

html[data-theme="dark"] .settings-tab.active {
    background: var(--dark-accent-soft);
    color: #8ab5ff;
}

html[data-theme="dark"] .settings-panel-primary {
    border-top-color: var(--dark-accent);
}

html[data-theme="dark"] .settings-value-badge,
html[data-theme="dark"] .settings-count-badge,
html[data-theme="dark"] .settings-role,
html[data-theme="dark"] .settings-status {
    border-color: var(--dark-border);
    background: #222d38;
    color: #c1cbd6;
}

html[data-theme="dark"] .settings-summary-icon {
    background: var(--dark-accent-soft);
    color: #81adff;
}

html[data-theme="dark"] .settings-stats,
html[data-theme="dark"] .settings-table-wrap,
html[data-theme="dark"] .settings-panel-table .settings-panel-head,
html[data-theme="dark"] .role-action-list {
    border-color: var(--dark-border-soft);
}

html[data-theme="dark"] .settings-stats strong {
    color: var(--dark-text);
}

html[data-theme="dark"] .settings-table,
html[data-theme="dark"] .settings-table td {
    background: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border-soft);
}

html[data-theme="dark"] .settings-table th {
    border-color: var(--dark-border-soft);
    background: #202a35;
    color: #a8b5c5;
}

html[data-theme="dark"] .settings-table tbody tr:hover td {
    background: var(--dark-hover);
}

html[data-theme="dark"] .settings-check-card,
html[data-theme="dark"] .settings-role-help,
html[data-theme="dark"] .settings-permissions,
html[data-theme="dark"] .role-section-card {
    border-color: var(--dark-border-soft);
    background: var(--dark-bg-soft);
}

html[data-theme="dark"] .settings-permission-row,
html[data-theme="dark"] .role-action-row {
    border-color: var(--dark-border-soft);
}

html[data-theme="dark"] .role-action-list {
    background: #151d26;
}

html[data-theme="dark"] .settings-savebar {
    border-color: var(--dark-border);
    background: rgba(24, 33, 43, .96);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .settings-status-active {
    background: #183a29;
    color: #82d6a6;
}

html[data-theme="dark"] .settings-status-blocked,
html[data-theme="dark"] .settings-role-inactive {
    background: #432525;
    color: #eea0a0;
}

html[data-theme="dark"] .settings-role-admin {
    background: var(--dark-accent-soft);
    color: #8bb6ff;
}

html[data-theme="dark"] .settings-legacy-warning {
    border-color: #685927;
    background: #322c18;
    color: #d8c37a;
}

/* Production tables */

html[data-theme="dark"] table {
    color: var(--dark-text);
}

html[data-theme="dark"] .queue-table,
html[data-theme="dark"] .cleanup-table,
html[data-theme="dark"] .defects-table,
html[data-theme="dark"] .successes-table {
    background: var(--dark-surface);
}

html[data-theme="dark"] .queue-table th,
html[data-theme="dark"] .queue-table td,
html[data-theme="dark"] .cleanup-table th,
html[data-theme="dark"] .cleanup-table td,
html[data-theme="dark"] .defects-table th,
html[data-theme="dark"] .defects-table td,
html[data-theme="dark"] .successes-table th,
html[data-theme="dark"] .successes-table td {
    border-color: #303d4b;
}

html[data-theme="dark"] .queue-table thead th,
html[data-theme="dark"] .cleanup-table thead th,
html[data-theme="dark"] .defects-table thead th,
html[data-theme="dark"] .successes-table thead th,
html[data-theme="dark"] .printer-head {
    background: #202a35;
    color: #e5ebf3;
}

html[data-theme="dark"] .queue-table tbody td,
html[data-theme="dark"] .cleanup-table tbody td,
html[data-theme="dark"] .defects-table tbody td,
html[data-theme="dark"] .successes-table tbody td {
    background: #171f28;
    color: #dfe6ef;
}

/*
 * Sticky left cells need an explicit dark background or the horizontally
 * scrolling printer columns will show through them.
 */
html[data-theme="dark"] .queue-table .c1,
html[data-theme="dark"] .queue-table .c2,
html[data-theme="dark"] .queue-table .c3,
html[data-theme="dark"] .queue-table .c4,
html[data-theme="dark"] .queue-table .c5,
html[data-theme="dark"] .queue-table .c6 {
    background: #1a232d;
}

html[data-theme="dark"] .queue-table thead .c1,
html[data-theme="dark"] .queue-table thead .c2,
html[data-theme="dark"] .queue-table thead .c3,
html[data-theme="dark"] .queue-table thead .c4,
html[data-theme="dark"] .queue-table thead .c5,
html[data-theme="dark"] .queue-table thead .c6 {
    background: #202a35;
}

html[data-theme="dark"] .queue-table tbody tr:hover td,
html[data-theme="dark"] .cleanup-table tbody tr:hover td {
    background: #1d2732;
}

html[data-theme="dark"] .queue-table tbody tr:hover .c1,
html[data-theme="dark"] .queue-table tbody tr:hover .c2,
html[data-theme="dark"] .queue-table tbody tr:hover .c3,
html[data-theme="dark"] .queue-table tbody tr:hover .c4,
html[data-theme="dark"] .queue-table tbody tr:hover .c5,
html[data-theme="dark"] .queue-table tbody tr:hover .c6 {
    background: #202b36;
}

html[data-theme="dark"] .cell-input {
    border-color: #3c4b5c;
    background: #10171f;
    color: #f0f4f8;
}

html[data-theme="dark"] .cell-input[readonly],
html[data-theme="dark"] .cell-input.cell-input-locked {
    background: #18212a;
    color: #b8c4d0;
}

html[data-theme="dark"] .printer-head.out {
    background: #382326 !important;
}

html[data-theme="dark"] .queue-empty,
html[data-theme="dark"] .empty-state {
    color: var(--dark-muted);
}

/* Dialogs / realtime */

html[data-theme="dark"] .printdesk-dialog {
    border-color: var(--dark-border);
    background: #1a232d;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .printdesk-dialog-title {
    color: var(--dark-text-strong);
}

html[data-theme="dark"] .printdesk-dialog-message {
    color: #d0d9e3;
}

html[data-theme="dark"] .printdesk-dialog-note {
    background: #111820;
    color: #aebbc9;
}

html[data-theme="dark"] .printdesk-dialog-backdrop {
    background: rgba(2, 5, 9, .68);
}

html[data-theme="dark"] .global-realtime-notice {
    border-color: var(--dark-border);
    background: #1b242e;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .global-realtime-notice strong {
    color: var(--dark-text-strong);
}

html[data-theme="dark"] .global-realtime-notice span {
    color: var(--dark-muted);
}

/* Scrollbars */

html[data-theme="dark"] {
    scrollbar-color: #445264 #151c24;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #151c24;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border: 2px solid #151c24;
    border-radius: 999px;
    background: #445264;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #56667a;
}

/* Theme toggle */

.theme-toggle {
    width: 54px !important;
    min-width: 54px !important;
    height: 28px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    cursor: pointer;
}

.theme-toggle-track {
    position: relative;
    display: block;
    width: 54px;
    height: 28px;
    border: 1px solid #c8d1dc;
    border-radius: 999px;
    background: #e8edf3;
    transition:
        background 140ms ease,
        border-color 140ms ease;
}

.theme-toggle-sun,
.theme-toggle-moon {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

.theme-toggle-sun {
    left: 7px;
    color: #9d7412;
}

.theme-toggle-moon {
    right: 7px;
    color: #657386;
}

.theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(20, 30, 45, .27);
    transition: transform 160ms ease;
}

.theme-toggle[aria-checked="true"] .theme-toggle-track {
    border-color: #46596f;
    background: #273545;
}

.theme-toggle[aria-checked="true"] .theme-toggle-thumb {
    transform: translateX(26px);
    background: #dce6f2;
}

.theme-toggle[aria-checked="true"] .theme-toggle-sun {
    color: #768493;
}

.theme-toggle[aria-checked="true"] .theme-toggle-moon {
    color: #b8cdf2;
}

.theme-toggle:focus-visible .theme-toggle-track {
    outline: 2px solid #4d82d6;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .theme-toggle {
        width: 48px !important;
        min-width: 48px !important;
    }

    .theme-toggle-track {
        width: 48px;
    }

    .theme-toggle[aria-checked="true"] .theme-toggle-thumb {
        transform: translateX(20px);
    }
}

/* PrintDesk v0.15.6c logo size fix:start */
.pd-brand-logo-top {
    height: 42px !important;
    width: auto !important;
    max-width: 360px !important;
    object-fit: contain !important;
}

.pd-auth-logo img {
    width: min(380px, 92%) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 700px) {
    .pd-brand-logo-top {
        height: 34px !important;
        max-width: 240px !important;
    }

    .pd-auth-logo img {
        width: min(300px, 90%) !important;
    }
}
/* PrintDesk v0.15.6c logo size fix:end */

/* v0.16.0 journal */
.journal-retention-note {
    margin-top: 4px;
    font-size: 12px;
    color: #778397;
}

.journal-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #fff;
}

.journal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px;
}

.journal-table th,
.journal-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e3e8ef;
    border-right: 1px solid #edf1f5;
    vertical-align: top;
    text-align: left;
    font-size: 13px;
}

.journal-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f7fb;
    font-weight: 700;
}

.journal-table th:last-child,
.journal-table td:last-child {
    border-right: 0;
}

.journal-time {
    white-space: nowrap;
}

.journal-details {
    min-width: 300px;
}

.cell-input.cell-input-locked:not(:disabled) {
    pointer-events: auto !important;
    cursor: text !important;
}

[data-theme="dark"] .journal-table-wrap,
[data-theme="dark"] .journal-table {
    background: #182334;
    border-color: #35445a;
}

[data-theme="dark"] .journal-table th {
    background: #223047;
}

[data-theme="dark"] .journal-table th,
[data-theme="dark"] .journal-table td {
    border-color: #35445a;
}

[data-theme="dark"] .journal-retention-note {
    color: #9aa8bb;
}

/* v0.16.1 printer state without table flicker */
.printer-unavailable-cell .production-cell {
    visibility: hidden;
    pointer-events: none;
}

.printer-toggle-saving {
    opacity: 0.72;
}

.printer-status-form,
.printer-toggle,
.printer-task-stack {
    box-sizing: border-box;
}

/* v0.16.2 user deletion */
.settings-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
}

.settings-user-actions form {
    margin: 0;
}

.settings-delete-user-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #b42318;
    font: inherit;
    cursor: pointer;
}

.settings-delete-user-button:hover {
    text-decoration: underline;
}

.settings-delete-user-button:disabled,
.settings-delete-user-button.is-disabled {
    color: #98a2b3;
    cursor: not-allowed;
    text-decoration: none;
}

[data-theme="dark"] .settings-delete-user-button {
    color: #ff8f86;
}

[data-theme="dark"] .settings-delete-user-button:disabled,
[data-theme="dark"] .settings-delete-user-button.is-disabled {
    color: #7f8b9d;
}

/* v0.16.4a mandatory printer outage reason */
.printer-outage-reason-field {
    margin-top: 14px;
    text-align: left;
}

.printer-outage-reason-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

.printer-outage-reason-input {
    width: 100%;
    min-height: 78px;
    box-sizing: border-box;
    resize: vertical;
    padding: 9px 10px;
    border: 1px solid #cfd7e3;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    line-height: 1.4;
}

.printer-outage-reason-input:focus {
    outline: 2px solid rgba(8,67,174,.18);
    border-color: #0843ae;
}

.printer-outage-reason-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
}

[data-theme="dark"] .printer-outage-reason-input {
    background: #182334;
    color: #eef3f8;
    border-color: #46566d;
}

[data-theme="dark"] .printer-outage-reason-error {
    color: #ff8f86;
}

/* v0.16.5 printer outage reason edit */
.printer-outage-reason-field {
    margin-top: 14px;
    text-align: left;
}

.printer-outage-reason-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
}

.printer-outage-reason-input {
    width: 100%;
    min-height: 78px;
    box-sizing: border-box;
    resize: vertical;
    padding: 9px 10px;
    border: 1px solid #cfd7e3;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    line-height: 1.4;
}

.printer-outage-reason-input:focus {
    outline: 2px solid rgba(8,67,174,.18);
    border-color: #0843ae;
}

.printer-outage-reason-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
}

[data-theme="dark"] .printer-outage-reason-input {
    background: #182334;
    color: #eef3f8;
    border-color: #46566d;
}

[data-theme="dark"] .printer-outage-reason-error {
    color: #ff8f86;
}

/* v0.16.17 - striped Queue rows */

.queue-table tbody tr:not(.client-row):nth-child(odd)
td:not(.material):not(.printer-unavailable-cell) {
    background: #ffffff;
}

.queue-table tbody tr:not(.client-row):nth-child(even)
td:not(.material):not(.printer-unavailable-cell) {
    background: #f3f5f7;
}

.queue-table tbody tr:not(.client-row):nth-child(odd)
.sticky:not(.material) {
    background: #ffffff;
}

.queue-table tbody tr:not(.client-row):nth-child(even)
.sticky:not(.material) {
    background: #f3f5f7;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(odd)
td:not(.material):not(.printer-unavailable-cell) {
    background: #171f28;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(even)
td:not(.material):not(.printer-unavailable-cell) {
    background: #1c2631;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(odd)
.sticky:not(.material) {
    background: #171f28;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(even)
.sticky:not(.material) {
    background: #1c2631;
}

.queue-table tbody tr:not(.client-row):hover
td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr:not(.client-row):hover
.sticky:not(.material) {
    background: #e9eef3;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):hover
td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):hover
.sticky:not(.material) {
    background: #24313e;
}

/* v0.16.18a - restore agreed Queue visuals */

/* OOS printer: the red cross is enough; no special header fill. */
.printer-head.out {
    background: #f8fafc !important;
}

html[data-theme="dark"] .printer-head.out {
    background: #202a35 !important;
}

/* Dark Queue workspace must not expose light bands. */
html[data-theme="dark"] .queue-workspace-active {
    background: var(--dark-bg) !important;
}

/* The old client-row rule used #fff !important; override it explicitly. */
html[data-theme="dark"] .queue-table .client-row td {
    background: #171f28 !important;
    color: #dfe6ef !important;
}

html[data-theme="dark"] .queue-table .client-row .sticky {
    background: #1a232d !important;
}

html[data-theme="dark"] .queue-table .client-row:hover td {
    background: #1d2732 !important;
}

html[data-theme="dark"] .queue-table .client-row:hover .sticky {
    background: #202b36 !important;
}

/* Printer timestamps and ordinary timers are white in dark theme. */
html[data-theme="dark"] .printer-head .printer-toggle,
html[data-theme="dark"] .printer-head .printer-task-time,
html[data-theme="dark"] .printer-head .printer-time-text,
html[data-theme="dark"] .printer-head .printer-outage-since,
html[data-theme="dark"] .printer-head .printer-outage-elapsed,
html[data-theme="dark"] .printer-head .printer-countdown:not(.expired) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Preserve semantic colors. */
html[data-theme="dark"] .printer-head .printer-online {
    color: #1ca54c !important;
    -webkit-text-fill-color: #1ca54c !important;
}

html[data-theme="dark"] .printer-head .printer-countdown.expired {
    color: #ffeb00 !important;
    -webkit-text-fill-color: #ffeb00 !important;
}

/* v0.16.19 - remove horizontal striping, restore exact user icons, row+column hover */

/* Neutralize the zebra backgrounds introduced by v0.16.17. */
.queue-table tbody tr:not(.client-row):nth-child(odd) td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr:not(.client-row):nth-child(even) td:not(.material):not(.printer-unavailable-cell) {
    background: #ffffff !important;
}

.queue-table tbody tr:not(.client-row):nth-child(odd) .sticky:not(.material),
.queue-table tbody tr:not(.client-row):nth-child(even) .sticky:not(.material) {
    background: #ffffff !important;
}

html[data-theme="dark"] .queue-table tbody tr:not(.client-row):nth-child(odd) td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"] .queue-table tbody tr:not(.client-row):nth-child(even) td:not(.material):not(.printer-unavailable-cell) {
    background: #171f28 !important;
}

html[data-theme="dark"] .queue-table tbody tr:not(.client-row):nth-child(odd) .sticky:not(.material),
html[data-theme="dark"] .queue-table tbody tr:not(.client-row):nth-child(even) .sticky:not(.material) {
    background: #171f28 !important;
}

/* Row highlight remains useful, but now without constant zebra banding. */
.queue-table tbody tr.queue-hover-row td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr.queue-hover-row .sticky:not(.material),
.queue-table tbody tr.client-row.queue-hover-row td,
.queue-table tbody tr.client-row.queue-hover-row .sticky {
    background: #e9eef3 !important;
}

html[data-theme="dark"] .queue-table tbody tr.queue-hover-row td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"] .queue-table tbody tr.queue-hover-row .sticky:not(.material),
html[data-theme="dark"] .queue-table tbody tr.client-row.queue-hover-row td,
html[data-theme="dark"] .queue-table tbody tr.client-row.queue-hover-row .sticky {
    background: #24313e !important;
}

/* Column highlight overlays the whole column without destroying semantic cell colors. */
.queue-table th.queue-hover-col,
.queue-table td.queue-hover-col {
    box-shadow: inset 0 0 0 9999px rgba(49, 103, 173, 0.08) !important;
}

html[data-theme="dark"] .queue-table th.queue-hover-col,
html[data-theme="dark"] .queue-table td.queue-hover-col {
    box-shadow: inset 0 0 0 9999px rgba(115, 159, 220, 0.14) !important;
}

/* Stronger emphasis at the hovered row/column intersection. */
.queue-table tr.queue-hover-row > th.queue-hover-col,
.queue-table tr.queue-hover-row > td.queue-hover-col {
    box-shadow: inset 0 0 0 9999px rgba(49, 103, 173, 0.14) !important;
}

html[data-theme="dark"] .queue-table tr.queue-hover-row > th.queue-hover-col,
html[data-theme="dark"] .queue-table tr.queue-hover-row > td.queue-hover-col {
    box-shadow: inset 0 0 0 9999px rgba(115, 159, 220, 0.22) !important;
}

/* Keep the custom client row dark in dark theme. */
html[data-theme="dark"] .queue-table .client-row td {
    background: #171f28 !important;
    color: #dfe6ef !important;
}

html[data-theme="dark"] .queue-table .client-row .sticky {
    background: #1a232d !important;
}

/* The exact supplied icons must not get an outline/border from UA styles. */
.printer-status-img,
.client-order-img,
.queue-product-img,
img[src*="printer_out_of_service.png"],
img[src*="client_order_icon.png"] {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* v0.16.20 - row and column hover fix */

/*
 * v0.16.17 zebra striping remains neutralized.
 * Hover is now an overlay, so material colors and special cells remain visible.
 */
.queue-table tbody tr:not(.client-row):nth-child(odd)
td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr:not(.client-row):nth-child(even)
td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr:not(.client-row):nth-child(odd)
.sticky:not(.material),
.queue-table tbody tr:not(.client-row):nth-child(even)
.sticky:not(.material) {
    background: #ffffff !important;
}

html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(odd)
td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(even)
td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(odd)
.sticky:not(.material),
html[data-theme="dark"]
.queue-table tbody tr:not(.client-row):nth-child(even)
.sticky:not(.material) {
    background: #171f28 !important;
}

/* Cancel older hover background replacement; use translucent overlay instead. */
.queue-table tbody tr:hover
td:not(.material):not(.printer-unavailable-cell),
.queue-table tbody tr:hover
.sticky:not(.material) {
    background: #ffffff !important;
}

html[data-theme="dark"]
.queue-table tbody tr:hover
td:not(.material):not(.printer-unavailable-cell),
html[data-theme="dark"]
.queue-table tbody tr:hover
.sticky:not(.material) {
    background: #171f28 !important;
}

/* Preserve the client row base colors. */
html[data-theme="dark"] .queue-table .client-row td {
    background: #171f28 !important;
    color: #dfe6ef !important;
}

html[data-theme="dark"] .queue-table .client-row .sticky {
    background: #1a232d !important;
}

/* Row highlight: native CSS hover, no JavaScript dependency. */
.queue-table tbody tr:hover > td {
    box-shadow:
        inset 0 0 0 9999px rgba(49, 103, 173, 0.09) !important;
}

html[data-theme="dark"] .queue-table tbody tr:hover > td {
    box-shadow:
        inset 0 0 0 9999px rgba(115, 159, 220, 0.13) !important;
}

/* Column highlight: class is applied by the small JS helper. */
.queue-table th.queue-hover-col,
.queue-table td.queue-hover-col {
    box-shadow:
        inset 0 0 0 9999px rgba(49, 103, 173, 0.08) !important;
}

html[data-theme="dark"] .queue-table th.queue-hover-col,
html[data-theme="dark"] .queue-table td.queue-hover-col {
    box-shadow:
        inset 0 0 0 9999px rgba(115, 159, 220, 0.14) !important;
}

/* Intersection of highlighted row and highlighted column. */
.queue-table tbody tr:hover > td.queue-hover-col {
    box-shadow:
        inset 0 0 0 9999px rgba(49, 103, 173, 0.18) !important;
}

html[data-theme="dark"]
.queue-table tbody tr:hover > td.queue-hover-col {
    box-shadow:
        inset 0 0 0 9999px rgba(115, 159, 220, 0.24) !important;
}

/* v0.16.23 - Cleanup column proportions */

/*
 * Redistribute width without making the table wider:
 *   "Ожидает зачистки" / "Ожидает упаковки": 130 -> 65 px each
 *   "Запустил" / "Снял":                    115 -> 180 px each
 *
 * Net width change: 0 px.
 */
.cleanup-table th {
    white-space: normal !important;
    line-height: 1.08;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Запустил */
.cleanup-table th:nth-child(5),
.cleanup-table td:nth-child(5) {
    width: 180px;
    min-width: 180px;
}

/* Снял */
.cleanup-table th:nth-child(6),
.cleanup-table td:nth-child(6) {
    width: 180px;
    min-width: 180px;
}

/* Use the new wider "Снял" column instead of keeping the old 132 px select. */
.cleanup-removed-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Ожидает зачистки */
.cleanup-table th:nth-child(8),
.cleanup-table td:nth-child(8) {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* Ожидает упаковки */
.cleanup-table th:nth-child(9),
.cleanup-table td:nth-child(9) {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* v0.16.24 - Cleanup name column 30 percent narrower */

/*
 * Previous base min-width: 320 px.
 * 320 * 0.70 = 224 px.
 * The image column is intentionally untouched.
 */
.cleanup-table th:nth-child(3),
.cleanup-table td:nth-child(3),
.cleanup-name {
    width: 224px;
    min-width: 224px;
    max-width: 224px;
}

.cleanup-name {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* v0.16.25 - Cleanup name/send width rebalance */

/*
 * v0.16.24 set "Наименование" to 224 px.
 * Increase it by 20%: 224 -> 269 px (+45 px).
 * Take the same 45 px from "Отправить": 410 -> 365 px.
 * Image column remains untouched.
 */

/* Наименование */
.cleanup-table th:nth-child(3),
.cleanup-table td:nth-child(3),
.cleanup-name {
    width: 269px;
    min-width: 269px;
    max-width: 269px;
}

/* Отправить */
.cleanup-table th:nth-child(10),
.cleanup-table td:nth-child(10),
.cleanup-action-cell {
    min-width: 365px;
}

.cleanup-action-cell {
    width: 365px;
}

/* v0.16.28 - Production ARM topbar menu */
.production-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.production-menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #185abd;
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.production-menu-button:hover,
.production-menu-button:focus-visible,
.production-menu-button[aria-expanded="true"] {
    color: #0f4da8;
    text-decoration: underline;
}

.production-menu-button:focus-visible {
    outline: 2px solid #185abd;
    outline-offset: 4px;
}

.production-menu-button-disabled {
    color: #9aa3af;
    cursor: default;
    text-decoration: none !important;
}

.production-menu-caret {
    font-size: 11px;
    line-height: 1;
    transition: transform 120ms ease;
}

.production-menu-button[aria-expanded="true"] .production-menu-caret {
    transform: rotate(180deg);
}

.production-menu-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -10px;
    z-index: 5000;
    width: min(820px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
}

.production-menu-panel[hidden] {
    display: none !important;
}

.production-menu-title {
    padding: 2px 4px 10px;
    font-size: 14px;
    font-weight: 750;
    color: #374151;
}

.production-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.production-menu-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.production-menu-item:hover,
.production-menu-item:focus-visible {
    border-color: #b9c9df;
    background: #f6f9fd;
    color: #1f2937;
}

.production-menu-item:focus-visible {
    outline: 2px solid #185abd;
    outline-offset: 1px;
}

.production-menu-item strong {
    color: #111827;
    font-size: 15px;
}

.production-menu-item span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.3;
}

.production-menu-item-disabled {
    opacity: 0.48;
    cursor: default;
    background: #f8fafc;
}

html[data-theme="dark"] .production-menu-button {
    color: #8db8ff;
}

html[data-theme="dark"] .production-menu-button:hover,
html[data-theme="dark"] .production-menu-button:focus-visible,
html[data-theme="dark"] .production-menu-button[aria-expanded="true"] {
    color: #b7d2ff;
}

html[data-theme="dark"] .production-menu-panel {
    border-color: #334155;
    background: #151d26;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .production-menu-title {
    color: #dbe5f0;
}

html[data-theme="dark"] .production-menu-item {
    border-color: #334155;
    background: #1a232d;
    color: #e5edf5;
}

html[data-theme="dark"] .production-menu-item:hover,
html[data-theme="dark"] .production-menu-item:focus-visible {
    border-color: #526579;
    background: #202c38;
    color: #ffffff;
}

html[data-theme="dark"] .production-menu-item strong {
    color: #f2f6fa;
}

html[data-theme="dark"] .production-menu-item span {
    color: #aab8c6;
}

html[data-theme="dark"] .production-menu-item-disabled {
    background: #161e27;
}

@media (max-width: 720px) {
    .production-menu-panel {
        position: fixed;
        top: 58px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 74px);
        overflow: auto;
    }

    .production-menu-grid {
        grid-template-columns: 1fr;
    }

    .production-menu-item {
        padding: 11px 12px;
    }
}

/* v0.16.30 - unified ARM menus */
.arm-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.arm-menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #185abd;
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.arm-menu-button:hover,
.arm-menu-button:focus-visible,
.arm-menu-button[aria-expanded="true"] {
    color: #0f4da8;
    text-decoration: underline;
}

.arm-menu-button:focus-visible {
    outline: 2px solid #185abd;
    outline-offset: 4px;
}

.arm-menu-caret {
    font-size: 11px;
    line-height: 1;
    transition: transform 120ms ease;
}

.arm-menu-button[aria-expanded="true"] .arm-menu-caret {
    transform: rotate(180deg);
}

.arm-menu-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -10px;
    z-index: 5000;
    width: min(820px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
}

.arm-menu-panel[hidden] {
    display: none !important;
}

.arm-menu-title {
    padding: 2px 4px 10px;
    font-size: 14px;
    font-weight: 750;
    color: #374151;
}

.arm-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.arm-menu-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arm-menu-item:hover,
.arm-menu-item:focus-visible {
    border-color: #b9c9df;
    background: #f6f9fd;
    color: #1f2937;
}

.arm-menu-item strong {
    color: #111827;
    font-size: 15px;
}

.arm-menu-item span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.3;
}

html[data-theme="dark"] .arm-menu-button {
    color: #8db8ff;
}

html[data-theme="dark"] .arm-menu-button:hover,
html[data-theme="dark"] .arm-menu-button:focus-visible,
html[data-theme="dark"] .arm-menu-button[aria-expanded="true"] {
    color: #b7d2ff;
}

html[data-theme="dark"] .arm-menu-panel {
    border-color: #334155;
    background: #151d26;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .arm-menu-title {
    color: #dbe5f0;
}

html[data-theme="dark"] .arm-menu-item {
    border-color: #334155;
    background: #1a232d;
    color: #e5edf5;
}

html[data-theme="dark"] .arm-menu-item:hover,
html[data-theme="dark"] .arm-menu-item:focus-visible {
    border-color: #526579;
    background: #202c38;
    color: #ffffff;
}

html[data-theme="dark"] .arm-menu-item strong {
    color: #f2f6fa;
}

html[data-theme="dark"] .arm-menu-item span {
    color: #aab8c6;
}

@media (max-width: 720px) {
    .arm-menu-panel {
        position: fixed;
        top: 58px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 74px);
        overflow: auto;
    }

    .arm-menu-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PLAN MOBILE SWIPE v0.16.30a
   Mobile-only override for the active Plan.
   Desktop scrolling behaviour is intentionally unchanged.
   ============================================================ */
@media (max-width: 900px) {
    body.queue-page-mode .container {
        bottom: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .queue-workspace-active {
        padding-top: 8px !important;
    }

    .queue-workspace-active .queue-wrap {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        scrollbar-gutter: auto;
    }

    body.queue-page-mode .queue-xscroll,
    .queue-xscroll {
        display: none !important;
    }

    .queue-workspace-active .queue-wrap::-webkit-scrollbar:horizontal {
        height: 0 !important;
        display: none !important;
    }

    .queue-table .resize-handle {
        display: none !important;
        pointer-events: none !important;
    }

    .queue-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .queue-toolbar-title {
        flex: 1 0 100% !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .queue-toolbar-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        white-space: normal !important;
    }

    .queue-toolbar-actions .button,
    .queue-toolbar-actions button {
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 13px;
    }
}

/* ============================================================
   PLAN MOBILE ADAPTIVE CELLS v0.16.30c
   Only the active Plan on screens <= 900px.
   ============================================================ */
@media (max-width: 900px) {
    /*
     * Keep printer columns compact, but make the CONTENT adapt to the
     * available width instead of clipping fixed-size controls.
     */
    .queue-workspace-active .queue-table td.assign {
        padding: 3px !important;
    }

    .queue-workspace-active .production-cell {
        width: 100% !important;
        min-width: 0 !important;
        gap: 3px !important;
    }

    .queue-workspace-active .production-cell .cell-input {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 4px 2px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: center !important;
    }

    /*
     * This is the important part:
     * вњ“ and Г— no longer have fixed 22px widths on mobile.
     * They share the full available cell width 50/50.
     */
    .queue-workspace-active .production-cell-actions {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    .queue-workspace-active
    .production-cell-actions.production-actions-visible {
        height: 24px !important;
        min-height: 24px !important;
    }

    .queue-workspace-active .production-action {
        box-sizing: border-box !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 24px !important;
        overflow: hidden !important;
    }

    /*
     * Slightly tighten the printer header typography, but keep its
     * existing information and controls.
     */
    .queue-workspace-active .printer-name {
        padding: 0 2px !important;
        font-size: 13px !important;
    }

    .queue-workspace-active .printer-time-text {
        font-size: 9px !important;
        letter-spacing: -0.02em !important;
    }

    .queue-workspace-active .printer-countdown,
    .queue-workspace-active .printer-outage-elapsed {
        font-size: 11px !important;
    }
}
/* END PLAN MOBILE ADAPTIVE CELLS v0.16.30c */

/* ============================================================
   PLAN MOBILE ACTION ICONS v0.16.30d
   Mobile-only: draw success/defect icons with CSS geometry
   instead of relying on Unicode glyph rendering.
   ============================================================ */
@media (max-width: 900px) {
    .queue-workspace-active .production-action {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Hide the original Unicode glyph only visually.
           aria-label remains available to accessibility tools. */
        font-size: 0 !important;
        line-height: 1 !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;

        overflow: hidden !important;
    }

    /* Check mark */
    .queue-workspace-active .production-success::before {
        content: "" !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 9px !important;
        height: 15px !important;
        border-right: 3px solid #fff !important;
        border-bottom: 3px solid #fff !important;
        transform: rotate(45deg) translate(-1px, -1px) !important;
        transform-origin: center !important;
    }

    /* Cross: two clean bars, independent of the device font. */
    .queue-workspace-active .production-defect::before,
    .queue-workspace-active .production-defect::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 16px !important;
        height: 3px !important;
        margin-left: -8px !important;
        margin-top: -1.5px !important;
        border: 0 !important;
        border-radius: 2px !important;
        background: #fff !important;
        transform-origin: center !important;
    }

    .queue-workspace-active .production-defect::before {
        transform: rotate(45deg) !important;
    }

    .queue-workspace-active .production-defect::after {
        transform: rotate(-45deg) !important;
    }
}
/* END PLAN MOBILE ACTION ICONS v0.16.30d */

/* ============================================================
   MOBILE TOPBAR SWIPE v0.16.30e
   - hide desktop-only Plan width controls on mobile
   - keep the topbar one line
   - horizontal movement is handled by touch JS without clipping
     dropdown menus vertically
   ============================================================ */
@media (max-width: 900px) {
    /* These controls exist for desktop column management only. */
    #fit-printer-widths,
    #reset-queue-widths {
        display: none !important;
    }

    /*
     * Do NOT put overflow-x:auto on .topbar:
     * it would also create a vertical overflow context and could clip
     * the Production/Warehouse dropdown menus.
     */
    html,
    body {
        overflow-x: hidden;
    }

    .topbar {
        --pd-mobile-topbar-x: 0px;

        box-sizing: border-box;
        width: 100%;
        max-width: 100vw;

        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 18px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        /* Keep dropdowns free to extend below the bar. */
        overflow: visible !important;

        touch-action: pan-y;
        user-select: none;
    }

    /*
     * Direct topbar sections travel together.
     * The topbar itself never becomes a scroll container, so dropdowns
     * are not vertically clipped.
     */
    .topbar > .brand,
    .topbar > nav,
    .topbar > .userbox {
        flex: 0 0 auto !important;
        transform: translate3d(
            var(--pd-mobile-topbar-x),
            0,
            0
        );
        transition: transform 90ms ease-out;
        will-change: transform;
    }

    .topbar.pd-mobile-topbar-dragging > .brand,
    .topbar.pd-mobile-topbar-dragging > nav,
    .topbar.pd-mobile-topbar-dragging > .userbox {
        transition: none !important;
    }

    .topbar > nav {
        width: max-content !important;
        min-width: max-content !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 18px !important;
        white-space: nowrap !important;
    }

    .topbar > nav > * {
        flex: 0 0 auto !important;
    }

    .topbar > .brand,
    .topbar > .userbox {
        white-space: nowrap !important;
    }

    .topbar > .userbox {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /*
     * The logo should remain compact enough that at least the first
     * navigation item is visible before swiping.
     */
    .topbar .pd-brand-logo-top {
        max-width: 150px !important;
    }

    /*
     * After hiding the two desktop width buttons, the remaining Plan
     * action does not need to reserve a full row of empty space.
     */
    .queue-toolbar-actions {
        width: auto !important;
        max-width: 100% !important;
    }
}
/* END MOBILE TOPBAR SWIPE v0.16.30e */

/* ============================================================
   PRINTDESK MOBILE SYSTEM v0.16.31

   General mobile UX layer for PrintDesk.
   Scope: <= 900px only.

   Principles:
   - desktop remains unchanged;
   - wide data tables remain wide and are swiped horizontally;
   - forms/cards stack instead of being squeezed;
   - touch targets stay usable;
   - no business logic or permissions are changed;
   - Plan-specific layout from v0.16.30a-e is not redesigned here.
   ============================================================ */
@media (max-width: 900px) {

    /* --------------------------------------------------------
       1. COMMON PAGE GEOMETRY
       -------------------------------------------------------- */

    body:not(.queue-page-mode) .container {
        width: 100% !important;
        margin: 12px auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body:not(.queue-page-mode) h1 {
        overflow-wrap: anywhere;
    }

    .page-head {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .section-main-toolbar {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .section-main-toolbar .queue-toolbar-title {
        flex: 1 0 100% !important;
        width: 100% !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .section-main-toolbar .queue-toolbar-actions {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        white-space: normal !important;
    }

    .section-main-toolbar .queue-toolbar-actions .button,
    .section-main-toolbar .queue-toolbar-actions button {
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 11px !important;
    }

    .placeholder,
    .notice,
    .error {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* --------------------------------------------------------
       2. NATIVE TOUCH-SWIPE TABLES

       These wrappers keep normal table semantics. We do not
       reflow rows into "cards", because that makes production
       and audit tables harder to compare.
       -------------------------------------------------------- */

    .cleanup-table-wrap,
    .defects-table-wrap,
    .journal-table-wrap,
    .settings-table-wrap,
    .history-plan-wrap,
    .history-table-wrap,
    .wh-table-wrap,
    .wh-history-table {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }

    /* Hide only the visual horizontal scrollbar.
       Native finger scrolling remains active. */
    .cleanup-table-wrap::-webkit-scrollbar:horizontal,
    .defects-table-wrap::-webkit-scrollbar:horizontal,
    .journal-table-wrap::-webkit-scrollbar:horizontal,
    .settings-table-wrap::-webkit-scrollbar:horizontal,
    .history-plan-wrap::-webkit-scrollbar:horizontal,
    .history-table-wrap::-webkit-scrollbar:horizontal,
    .wh-table-wrap::-webkit-scrollbar:horizontal,
    .wh-history-table::-webkit-scrollbar:horizontal {
        height: 0 !important;
        display: none !important;
    }

    .cleanup-table-wrap,
    .defects-table-wrap,
    .journal-table-wrap,
    .settings-table-wrap,
    .history-plan-wrap,
    .history-table-wrap,
    .wh-table-wrap,
    .wh-history-table {
        scrollbar-width: none;
    }

    /* Prevent wide tables from being compressed into unreadability. */
    .cleanup-table {
        min-width: 1180px !important;
    }

    .defects-table {
        min-width: 900px !important;
    }

    .journal-table {
        min-width: 860px !important;
    }

    .settings-table {
        min-width: 720px;
    }

    .file-links-table {
        min-width: 840px !important;
    }

    /* Resize handles are desktop controls and steal touch gestures. */
    .history-plan-table .resize-handle,
    .settings-table .resize-handle,
    .cleanup-table .resize-handle,
    .defects-table .resize-handle,
    .journal-table .resize-handle {
        display: none !important;
        pointer-events: none !important;
    }

    /* --------------------------------------------------------
       3. CLEANUP
       -------------------------------------------------------- */

    .cleanup-table th,
    .cleanup-table td {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .cleanup-action,
    .cleanup-client-action {
        touch-action: manipulation;
    }

    .cleanup-action .button,
    .cleanup-client-action .button,
    .cleanup-all-button,
    .cleanup-send-button,
    .cleanup-defect-button {
        min-height: 38px !important;
    }

    .cleanup-qty-input,
    .cleanup-removed-select {
        min-height: 38px !important;
        font-size: 16px !important;
    }

    /* --------------------------------------------------------
       4. SUCCESS / DEFECT / JOURNAL
       -------------------------------------------------------- */

    .defects-table th,
    .defects-table td,
    .journal-table th,
    .journal-table td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .defect-name {
        min-width: 220px !important;
    }

    .journal-details {
        min-width: 280px;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .journal-retention-note {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.35;
    }

    /* --------------------------------------------------------
       5. PLAN HISTORY

       Keep its real tabular structure. History is read/compare
       oriented, so swipe is preferable to hiding data columns.
       -------------------------------------------------------- */

    .history-page {
        padding-bottom: 18px !important;
    }

    .history-plan-block {
        margin-bottom: 24px !important;
    }

    .history-plan-toolbar {
        margin-bottom: 6px !important;
    }

    .history-plan-toolbar .queue-toolbar-title {
        font-size: 17px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .history-plan-wrap {
        border: 1px solid #d8dee8;
    }

    .history-plan-table .resize-handle {
        display: none !important;
    }

    /* --------------------------------------------------------
       6. DASHBOARD / CARDS
       -------------------------------------------------------- */

    .cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .card {
        min-width: 0;
        padding: 16px !important;
    }

    .dashboard-section-title {
        margin-top: 18px !important;
        margin-bottom: 9px !important;
    }

    /* --------------------------------------------------------
       7. SETTINGS / ADMIN

       Tabs are a horizontal swipe strip.
       Forms and cards become one-column.
       Data tables remain swipeable.
       -------------------------------------------------------- */

    .settings-shell {
        width: 100% !important;
        padding-top: 2px !important;
        padding-bottom: 24px !important;
    }

    .settings-heading {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .settings-heading h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .settings-heading p {
        font-size: 13px;
        line-height: 1.4;
    }

    .settings-heading .settings-primary-action,
    .settings-heading .settings-back-button {
        align-self: flex-start !important;
        min-height: 40px;
    }

    .settings-tabs {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-bottom: 14px !important;
    }

    .settings-tabs::-webkit-scrollbar {
        height: 0 !important;
        display: none !important;
    }

    .settings-tab {
        flex: 0 0 auto !important;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    .settings-panel {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    .settings-panel-table {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .settings-panel-table .settings-panel-head {
        padding: 16px !important;
    }

    .settings-panel-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .settings-value-badge,
    .settings-count-badge {
        align-self: flex-start;
    }

    .settings-card-grid,
    .settings-form-grid,
    .settings-option-row {
        grid-template-columns: 1fr !important;
    }

    .settings-form-inline {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .settings-field,
    .settings-field-small {
        width: 100% !important;
        max-width: none !important;
    }

    .settings-field input,
    .settings-field select,
    .settings-field textarea,
    .settings-user-form input,
    .settings-user-form select,
    .settings-user-form textarea {
        min-height: 42px;
        font-size: 16px;
    }

    .settings-form-actions {
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    .settings-form-actions button,
    .settings-form-actions .button {
        min-height: 40px;
    }

    .settings-summary-card {
        grid-template-columns: 40px minmax(0, 1fr) 18px !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    .settings-summary-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .settings-stats {
        gap: 14px !important;
        flex-wrap: wrap !important;
    }

    .settings-permission-row,
    .role-section-main {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .settings-savebar {
        left: 0;
        right: 0;
        bottom: 6px !important;
        flex-wrap: wrap !important;
        justify-content: stretch !important;
        padding: 9px !important;
    }

    .settings-savebar button,
    .settings-savebar .button {
        flex: 1 1 auto;
        min-height: 40px;
    }

    .file-links-name {
        min-width: 220px !important;
    }

    .file-links-file-row {
        gap: 6px !important;
    }

    .file-links-unlink-button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    /* --------------------------------------------------------
       8. WAREHOUSE

       warehouse.html already has its own responsive basis.
       These rules align it with the same PrintDesk mobile UX.
       !important is deliberate because warehouse has inline CSS
       after app.css in document order.
       -------------------------------------------------------- */

    .wh-header {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .wh-title h1 {
        font-size: 24px !important;
    }

    .wh-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 7px !important;
        justify-content: stretch !important;
    }

    .wh-stat {
        min-width: 0 !important;
        text-align: left !important;
        padding: 8px 10px !important;
    }

    .wh-stat:last-child {
        grid-column: 1 / -1;
    }

    .wh-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .wh-sidebar,
    .wh-actions {
        position: static !important;
    }

    /* Group navigation becomes a swipeable strip instead of
       consuming a tall vertical column on a phone. */
    .wh-group-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 7px !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .wh-group-list::-webkit-scrollbar {
        height: 0 !important;
        display: none !important;
    }

    .wh-group-link {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        border: 1px solid var(--wh-border) !important;
        padding: 8px 10px !important;
    }

    .wh-group-link.active {
        border-color: var(--wh-accent) !important;
    }

    .wh-toolbar {
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    .wh-toolbar-title {
        order: 1 !important;
    }

    .wh-add-item {
        order: 2 !important;
        min-height: 42px !important;
        margin-left: auto !important;
    }

    .wh-search {
        order: 3 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .wh-search input {
        width: 100% !important;
        height: 42px !important;
        font-size: 16px !important;
    }

    .wh-table-wrap {
        max-height: none !important;
    }

    .wh-table {
        min-width: 780px !important;
    }

    .wh-operation-switch button {
        min-height: 40px !important;
    }

    .wh-shell input,
    .wh-shell select {
        min-height: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }

    .wh-shell textarea {
        font-size: 16px !important;
    }

    .wh-modal {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .wh-modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .wh-modal-head {
        padding: 12px 14px !important;
    }

    .wh-modal-body {
        padding: 14px !important;
    }

    .wh-item-modal-grid {
        grid-template-columns: 1fr !important;
    }

    .wh-item-modal-grid .wh-modal-wide {
        grid-column: auto !important;
    }

    .wh-modal-actions {
        flex-wrap: wrap !important;
    }

    .wh-modal-actions button {
        min-height: 42px !important;
    }

    /* --------------------------------------------------------
       9. COMMON DIALOGS / AUTH
       -------------------------------------------------------- */

    .printdesk-dialog-root {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .printdesk-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh !important;
        padding: 20px 16px 16px !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .printdesk-dialog-actions {
        flex-wrap: wrap !important;
        gap: 7px !important;
    }

    .printdesk-dialog-button,
    .printdesk-dialog-actions button {
        min-height: 42px;
    }

    .task-conflict-modal {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .task-conflict-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: 14px 14px 0 0 !important;
        padding: 16px !important;
    }

    .task-conflict-actions {
        justify-content: stretch !important;
    }

    .task-conflict-actions .button {
        flex: 1 1 auto;
        min-height: 42px;
    }

    .auth-card,
    .form-card {
        width: 100% !important;
        max-width: 460px !important;
        margin: 24px auto !important;
        padding: 20px !important;
    }
}

/* Extra-small phones: preserve usability instead of shrinking controls. */
@media (max-width: 520px) {
    body:not(.queue-page-mode) .container {
        margin-top: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .section-main-toolbar .queue-toolbar-title {
        font-size: 20px !important;
    }

    .settings-panel {
        padding: 13px !important;
    }

    .settings-panel-table {
        padding: 0 !important;
    }

    .settings-panel-table .settings-panel-head {
        padding: 13px !important;
    }

    .wh-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .wh-add-item {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .wh-add-item-plus {
        width: 20px !important;
        height: 20px !important;
    }
}
/* END PRINTDESK MOBILE SYSTEM v0.16.31 */