/* =============================================================================
   N-CL Kundenportal
   Цвета и типографика один в один с настенным табло Lager Tafel.
   Отличие: размеры не в vw (это был портретный ТВ), а в clamp() —
   иначе на широком мониторе всё раздувается.
   ========================================================================== */

/* Тёмная тема — основная, один в один со складским табло. */
:root{
  --bg:#080b14; --panel:#0d1424; --line:#16203a; --line2:#1e2a44;
  --txt:#e6ecf7; --txt-dim:#9fb0cc; --txt-mute:#5f7196; --ls:#7fb4ff;
  --amber:#ef9f27; --teal:#5dcaa5; --green:#5dcaa5; --red:#e24b4a;
  --our:#22a24e; --them:#2f6fd6; --cargo:#e8b21e;

  /* Производные: раньше были вписаны цветом прямо в правила, из-за чего
     не переключались вместе с темой. */
  --field-bg:#0a0f1c;        /* фон полей ввода */
  --on-amber:#0a0f1c;        /* текст на янтарной кнопке */
  --icon-edge:#0d1424;       /* обводка внутри SVG-иконок = цвет фона */
  --doc-abhol:#7fd6a8; --doc-schaden:#f08d8c; --doc-pal:#f0c463;
  --err-text:#ff8a89;
  --shadow:rgba(0,0,0,.6);
  --scrim:rgba(4,7,14,.66);
  --knob:#1e2a44;            /* бегунок переключателя темы */
  --ring:rgba(127,180,255,.18);
  --hover:rgba(127,180,255,.10);   /* подсветка груза под курсором */
  --hover-edge:#7fb4ff;            /* метка слева у него же */
  --seg-track:#0a0f1c;             /* жёлоб переключателя вкладок */
  --seg-ink:#1a2640;               /* подложка активной вкладки */
  --seg-ink-edge:#2a3a5c;
}

/* Светлая тема. Включается атрибутом data-theme="light" на <html>,
   поэтому переключение мгновенное и без перезагрузки.
   Смысловые цвета (наше действие/груз/таможня) сохранены, но затемнены —
   на белом фоне светлые оттенки читались бы плохо. */
:root[data-theme="light"]{
  --bg:#f4f6fa; --panel:#ffffff; --line:#e2e7f0; --line2:#ccd5e3;
  --txt:#16202f; --txt-dim:#41506a; --txt-mute:#6b7a93; --ls:#1d5fd0;
  --amber:#b4700a; --teal:#0f8a63; --green:#0f8a63; --red:#c62f2e;
  --our:#17803c; --them:#2453a8; --cargo:#a97a08;

  --field-bg:#ffffff;
  --on-amber:#ffffff;
  --icon-edge:#ffffff;       /* на светлом фоне обводка должна быть белой */
  --doc-abhol:#0f7a55; --doc-schaden:#b52c2b; --doc-pal:#8a6207;
  --err-text:#b32725;
  --shadow:rgba(20,32,56,.18);
  --scrim:rgba(30,42,64,.42);
  --knob:#e8eef8;
  --ring:rgba(29,95,208,.16);
  --hover:rgba(29,95,208,.075);
  --hover-edge:#1d5fd0;
  --seg-track:#e9edf4; --seg-ink:#ffffff; --seg-ink-edge:#d5ddea;
}

/* Базовый размер данных в таблице. Все прочие размеры — шапка, значки,
   номер ATB, плашки документов — считаются от него множителем, поэтому
   таблица уменьшается и увеличивается ЦЕЛИКОМ, сохраняя пропорции.
   Благодаря этому она помещается на узком мониторе и не приходится
   переключаться на карточки раньше, чем это действительно нужно.
   0.917vw подобрано так, чтобы на 1920px получалось ровно 17.6px.
   Нижняя граница 13px — предел читаемости: при ней подпись в шапке
   выходит 11px. Ниже этого таблицу уже не ужимаем, а переключаемся
   на карточки. */
:root{ --d: clamp(13px, 0.917vw, 17.6px); }

/* Пока тема не выбрана — уважаем системную настройку пользователя. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f6fa; --panel:#ffffff; --line:#e2e7f0; --line2:#ccd5e3;
    --txt:#16202f; --txt-dim:#41506a; --txt-mute:#6b7a93; --ls:#1d5fd0;
    --amber:#b4700a; --teal:#0f8a63; --green:#0f8a63; --red:#c62f2e;
    --our:#17803c; --them:#2453a8; --cargo:#a97a08;
    --field-bg:#ffffff; --on-amber:#ffffff; --icon-edge:#ffffff;
    --doc-abhol:#0f7a55; --doc-schaden:#b52c2b; --doc-pal:#8a6207;
    --err-text:#b32725; --shadow:rgba(20,32,56,.18); --scrim:rgba(30,42,64,.42);
    --knob:#e8eef8; --ring:rgba(29,95,208,.16);
    --hover:rgba(29,95,208,.075); --hover-edge:#1d5fd0;
    --seg-track:#e9edf4; --seg-ink:#ffffff; --seg-ink-edge:#d5ddea;
  }
}

*{margin:0; padding:0; box-sizing:border-box;}

html,body{
  min-height:100%;
  background:var(--bg);
  font-family:"Roboto Mono","DejaVu Sans Mono","Consolas",monospace;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- Login -- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:24px;
  flex-direction:column; gap:18px;
}
/* Подвал страницы входа: правовые ссылки и неприметный вход в управление. */
.foot{
  font-size:12px; color:var(--txt-mute); text-align:center;
}
.foot a{ color:var(--txt-mute); text-decoration:none; }
.foot a:hover{ color:var(--txt-dim); text-decoration:underline; }
.foot .sep{ margin:0 8px; opacity:.5; }
.foot a.quiet{ opacity:.45; }
.foot a.quiet:hover{ opacity:1; }
/* ------------------------------------------- Переключатель темы (ползунок)
   Капсула с двумя значками и скользящим бегунком. Оба значка видны сразу,
   поэтому понятно, что это выбор из двух состояний, а не просто кнопка.
   Бегунок стоит на текущей теме. */
.theme-switch{
  position:relative; display:inline-flex; align-items:center;
  gap:0; padding:3px; border:1px solid var(--line2); border-radius:999px;
  background:var(--field-bg); cursor:pointer; vertical-align:middle;
  font-family:inherit; line-height:1;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-switch:hover{ border-color:var(--ls); box-shadow:0 0 0 3px var(--ring); }
.theme-switch:focus-visible{ outline:none; border-color:var(--ls);
  box-shadow:0 0 0 3px var(--ring); }

/* Бегунок — подложка под активным значком. Двигается пружинкой. */
.theme-switch .knob{
  position:absolute; top:3px; left:3px; width:26px; height:26px;
  border-radius:50%; background:var(--knob);
  box-shadow:0 2px 6px var(--shadow);
  transition:transform .32s cubic-bezier(.34,1.4,.5,1), background .2s ease;
  pointer-events:none;
}
/* В светлой теме активен левый значок (солнце), в тёмной — правый (месяц). */
:root[data-theme="dark"] .theme-switch .knob{ transform:translateX(26px); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .theme-switch .knob{ transform:translateX(26px); }
}

.theme-switch .ic{
  position:relative; z-index:1; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--txt-mute);
  transition:color .2s ease, transform .3s ease;
}
/* Подсвечиваем тот значок, на котором стоит бегунок. */
:root[data-theme="light"] .theme-switch .ic-sun,
:root:not([data-theme]) .theme-switch .ic-sun{ color:#b4700a; }
:root[data-theme="dark"]  .theme-switch .ic-moon{ color:#ffd469; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .theme-switch .ic-sun{ color:var(--txt-mute); }
  :root:not([data-theme]) .theme-switch .ic-moon{ color:#ffd469; }
}
.theme-switch:hover .ic{ transform:scale(1.12); }
.theme-switch svg{ width:15px; height:15px; display:block; }

/* ----------------------------------------------------- Бегущая строка ----
   Объявление от N-CL всем клиентам сразу. Текст едет справа налево по кругу.
   Скорость постоянная независимо от длины: длительность считает скрипт. */
.ticker{
  display:flex; align-items:center; gap:12px;
  padding:8px clamp(12px,2vw,26px);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--amber) 16%, transparent),
    color-mix(in srgb, var(--amber) 5%, transparent));
  border-bottom:1px solid var(--line2);
  overflow:hidden;
}
.ticker[hidden]{ display:none; }
.ticker-tag{
  flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:1px;
  color:var(--on-amber); background:var(--amber);
  padding:3px 9px; border-radius:999px;
}
/* Окно, в котором едет текст. */
.ticker-view{ flex:1 1 auto; overflow:hidden; position:relative; }
.ticker-track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:ticker-run linear infinite;
}
/* Текст продублирован дважды — когда первая копия уходит, вторая уже
   на её месте, поэтому склейки не видно. */
.ticker-track span{
  padding-right:64px; font-size:13.5px; color:var(--txt);
}
@keyframes ticker-run{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* На паузе при наведении — чтобы можно было дочитать. */
.ticker:hover .ticker-track{ animation-play-state:paused; }
/* Кому мешает движение — уважаем системную настройку и не двигаем. */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* На доске подвал прижат вниз и не мешает списку грузов. */
.board-foot{ padding:18px 0 26px; border-top:1px solid var(--line); margin-top:24px; }

/* ------------------------------------------------- Обратная связь клиента */
.fb-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:var(--scrim); align-items:flex-start; justify-content:center;
  padding:8vh 16px;
}
.fb-overlay.show{ display:flex; }
.fb-box{
  width:100%; max-width:520px; background:var(--panel);
  border:1px solid var(--line2); border-radius:14px; padding:20px 22px;
  box-shadow:0 20px 60px var(--shadow);
}
.fb-title{ color:var(--amber); font-size:17px; font-weight:700; margin-bottom:8px; }
.fb-note{ color:var(--txt-mute); font-size:13px; line-height:1.5; margin-bottom:14px; }
.fb-box textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:120px;
  background:var(--bg); color:var(--txt); border:1px solid var(--line2);
  border-radius:10px; padding:10px 12px; font:inherit; font-size:14px;
  line-height:1.5; outline:none;
}
.fb-box textarea:focus{ border-color:var(--ls); }
.fb-msg{ min-height:18px; font-size:13px; margin:10px 0 2px; }
.fb-msg.ok{ color:var(--teal); }
.fb-msg.err{ color:var(--red); }
.fb-bar{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* ------------------------------------------------------ Документы к грузу --
   Плашки под строкой. Подписи словами: значки из внутренней таблицы
   клиенту ничего не говорят. */
.docs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  /* Те же боковые поля, что у строки груза: полоса должна начинаться
     ровно под ней, а не с собственного отступа. */
  padding:0 clamp(12px,2vw,26px) 9px; margin-top:-2px;
  border-bottom:1px solid var(--line);
}
.docs .doc{
  display:inline-block; text-decoration:none;
  font-size:calc(var(--d) * .756); font-weight:700; letter-spacing:.3px;
  padding:4px 12px; border-radius:999px;
  color:var(--txt-dim); background:var(--panel);
  border:1px solid var(--line2); white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.docs .doc:hover{ background:var(--line2); color:var(--txt); border-color:var(--ls); }

/* Смысловые цвета: то же деление, что у иконок услуг на доске. */
.docs .doc-abholschein { color:var(--doc-abhol); border-color:rgba(93,202,165,.45); }
.docs .doc-schaden     { color:var(--doc-schaden); border-color:rgba(226,75,74,.5); }
.docs .doc-palettierung{ color:var(--doc-pal); border-color:rgba(232,178,30,.45); }
.docs .doc-verwiegung  { color:var(--doc-pal); border-color:rgba(232,178,30,.45); }

/* Подложка связывает строку с её полосой в один груз — теперь это
   единственное, что их объединяет, поэтому она чуть заметнее прежнего. */
.row + .docs{ background:rgba(127,180,255,.045); }

/* Учётка склада: заголовок клиента над его грузами — как на табло. */
.grp{display:flex; align-items:center; justify-content:center; gap:12px;
  padding:6px 16px 5px; margin-top:2px;
  background:linear-gradient(90deg, transparent, var(--hover) 50%, transparent);
  border-top:1px solid var(--ring); border-bottom:1px solid var(--ring);}
.grp .k{color:var(--ls); font-weight:700; font-size:clamp(15px,1.25vw,19px); letter-spacing:.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%;}
.grp .n{color:var(--txt-mute); font-weight:700; font-size:clamp(13px,1vw,16px);}

/* В карточке (телефон) документы идут отдельной строкой без рамки. */
.card .docs{ padding:10px 0 0; margin:0; border-bottom:none; border-top:1px solid var(--line); }

.login-box{
  width:100%; max-width:420px; background:var(--panel);
  border:1px solid var(--line2); border-radius:14px; padding:32px 28px;
}
.login-box .brand{
  color:var(--amber); font-size:28px; font-weight:700;
  letter-spacing:2px; text-align:center; margin-bottom:6px;
}
.login-box .sub{
  color:var(--txt-mute); font-size:13px; text-align:center; margin-bottom:26px;
}
.field{margin-bottom:16px;}
.field label{
  display:block; color:var(--txt-dim); font-size:12px;
  letter-spacing:.5px; margin-bottom:6px; text-transform:uppercase;
}
.field input{
  width:100%; padding:12px 14px; background:var(--field-bg);
  border:1px solid var(--line2); border-radius:8px;
  color:var(--txt); font-size:15px; font-family:inherit;
}
.field input:focus{outline:none; border-color:var(--ls);}
.btn{
  width:100%; padding:13px; border:none; border-radius:8px;
  background:var(--amber); color:var(--on-amber); font-size:15px;
  font-weight:700; font-family:inherit; cursor:pointer; letter-spacing:.5px;
}
.btn:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn.secondary{background:var(--line2); color:var(--txt);}
.msg{
  margin-top:16px; padding:11px 14px; border-radius:8px;
  font-size:13.5px; line-height:1.45; display:none;
}
.msg.show{display:block;}
.msg.error{background:rgba(226,75,74,.14); color:var(--err-text); border:1px solid rgba(226,75,74,.35);}
.msg.info{background:rgba(93,202,165,.12); color:var(--teal); border:1px solid rgba(93,202,165,.3);}
.hint{color:var(--txt-mute); font-size:12px; margin-top:14px; line-height:1.5;}

/* ----------------------------------------------------------------- Kopf -- */
.head{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px clamp(12px,2vw,26px);
  background:var(--panel); border-bottom:3px solid var(--line2);
}
.head .brand{
  color:var(--amber); font-size:clamp(16px,1.7vw,24px);
  font-weight:700; letter-spacing:2px;
}
.head .kunde{
  color:var(--txt); font-size:clamp(13px,1.2vw,17px); font-weight:700;
  padding:4px 12px; background:rgba(127,180,255,.12);
  border:1px solid rgba(127,180,255,.28); border-radius:6px;
}
.head .spacer{flex:1 1 auto;}
.head .stand{color:var(--txt-mute); font-size:12.5px; white-space:nowrap;}
.head .clock{font-size:clamp(14px,1.3vw,19px); font-weight:700; letter-spacing:1px;}
.conn{
  width:11px; height:11px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px rgba(93,202,165,.6); flex:0 0 auto;
}
.conn.off{background:var(--red); box-shadow:0 0 8px rgba(226,75,74,.6);}
.linkbtn{
  background:none; border:1px solid var(--line2); color:var(--txt-mute);
  font-family:inherit; font-size:12px; padding:5px 11px;
  border-radius:6px; cursor:pointer;
}
.linkbtn:hover{color:var(--txt); border-color:var(--ls);}

.toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px clamp(12px,2vw,26px); border-bottom:1px solid var(--line);
}
.toolbar input{
  flex:1 1 220px; max-width:340px; padding:9px 12px; background:var(--field-bg);
  border:1px solid var(--line2); border-radius:8px;
  color:var(--txt); font-family:inherit; font-size:14px;
}
.toolbar input:focus{outline:none; border-color:var(--ls);}
.toolbar .found{color:var(--txt-mute); font-size:12.5px;}

/* ---------------------------------------------------------------- Zonen -- */
.zone{margin-bottom:26px;}
.zone-head{
  display:flex; align-items:center; gap:12px;
  padding:12px clamp(12px,2vw,26px) 8px;
}
.zone-head .dot{width:14.3px; height:14.3px; border-radius:50%;}
.zone.imlager .zone-head .dot{background:var(--teal);}
.zone.unterwegs .zone-head .dot{background:var(--amber);}
.zone-head .title{font-size:clamp(18.2px,1.8vw,25.3px); font-weight:700; letter-spacing:1.5px;}
.zone.imlager .zone-head .title{color:var(--teal);}
.zone.unterwegs .zone-head .title{color:var(--amber);}
.zone-head .count{color:var(--txt-mute); font-size:clamp(15.7px,1.45vw,20.6px); font-weight:700;}

/* 12 колонок — та же сетка, что на табло.
   Каждая колонка задана как minmax(минимум, доля): когда места мало,
   держится минимум, а лишнюю ширину все делят между собой соразмерно.
   Раньше гибкими были только MAWB и HAWB, и на широком мониторе весь
   запас уходил в них двоих: колонка MAWB раздувалась до 700px, а между
   номерами зияло больше 500px пустоты. */
.col-head,.row{
  display:grid; align-items:center; gap:8px;
  grid-template-columns:
    /* Минимумы заданы в долях того же --d, что и шрифт. Поэтому колонка
       никогда не станет уже своего содержимого: уменьшается текст —
       ровно во столько же раз уменьшается и колонка. */
    minmax(calc(var(--d) * 8.07),.75fr) minmax(calc(var(--d) * 4.55),.55fr)
    minmax(calc(var(--d) * 9.09),.35fr) minmax(calc(var(--d) * 7.67),.3fr)
    minmax(calc(var(--d) * 4.09),.6fr)  minmax(calc(var(--d) * 5.11),.8fr)
    minmax(calc(var(--d) * 3.41),.9fr)  minmax(calc(var(--d) * 4.70),1fr)
    minmax(calc(var(--d) * 4.09),.95fr) minmax(calc(var(--d) * 5.20),1fr)
    minmax(calc(var(--d) * 7.05),1.05fr)
    minmax(calc(var(--d) * 8.75),.5fr)  minmax(calc(var(--d) * 3.52),.8fr);
  padding:0 clamp(12px,2vw,26px);
}
/* Шапка колонок. Раньше она была набрана тем же приглушённым серым, что и
   данные, и терялась среди строк. Теперь это отдельная полоса: своя подложка,
   жирное начертание и разрядка — читается как заголовок с первого взгляда,
   но остаётся тише самих данных.

   Две строки, как в исходной таблице: сверху полное название колонки, снизу
   единица измерения. Сокращения ABHOL/ANNAH/VERL/PAL больше не нужны — после
   расширения таблицы место под целые слова есть. Минимумы колонок выше
   рассчитаны по самой длинной подписи, PALETTIERUNG. */
.col-head{
  letter-spacing:1.2px;
  padding-top:11px; padding-bottom:11px;
  /* Подложка именно --line2: из наших токенов только он даёт заметную
     ступень к фону в обеих темах (1.38 против 1.07 у --panel).
     Одной подложки мало — при данных в 17.6px шапка читалась робко,
     поэтому её держат сразу три вещи: размер, яркий текст и линия снизу. */
  background:var(--line2);
  border-bottom:2px solid var(--txt-mute);
}
.col-head>span{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:0; text-align:center; overflow:hidden;
}
.col-head b{font-size:calc(var(--d) * .852); font-weight:700; color:var(--txt); white-space:nowrap;}
.col-head i{
  font-style:normal; font-size:calc(var(--d) * .682); font-weight:400; letter-spacing:.5px;
  color:var(--txt-mute); white-space:nowrap;
}
.row{padding-top:7px; padding-bottom:7px; border-bottom:1px solid var(--line);}
/* На груз с документами приходилось две линии подряд — под строкой и под
   полосой ATB, отчего таблица выглядела рябой. Линию оставляем одну: она
   закрывает груз целиком, вместе с его полосой. */
.row:has(+ .docs){border-bottom:none;}
/* Все данные строки набраны ОДНИМ размером. Какая это колонка, читается по
   её положению и подписи в шапке, поэтому размером различать их незачем —
   разнобой только мешает вести взгляд по строке. Размером выделен лишь ATB:
   он и правда мельче по значимости, это редкая справочная ссылка.

   Важность показана цветом и насыщенностью, лесенкой:
     LS      — синий, жирный: складской номер, по нему груз и зовут;
     MAWB    — самый светлый нейтральный: основная авианакладная;
     HAWB    — приглушённый: домашняя накладная подчинена MAWB;
     ANZAHL,
     GEWICHT — светлые: факты о грузе;
     EINGANG — приглушённый: это контекст, а не опознавательный признак. */
.row>span{min-width:0; text-align:center; font-size:var(--d);}
.row .eingang{color:var(--txt-dim); font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums;}
.row .ls{color:var(--ls); font-weight:700; letter-spacing:.3px;}
.row .mawb{color:var(--txt); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;}
.row .hawb{color:var(--txt-dim); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;}
.row .anzahl,.row .gewicht{color:var(--txt); font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums;}

/* ATB — собственная колонка рядом с ZOLL, как в исходной таблице: это
   таможенные данные, и стоять они должны вместе. Номер и позиция в две
   строки внутри ячейки: так колонке хватает 150px вместо 260px, а высоту
   строки это не меняет — её всё равно задают значки услуг. */
.row .atbcol{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  line-height:1.25; white-space:nowrap; overflow:hidden; min-width:0;
}
.row .atbcol .v{
  font-size:calc(var(--d) * .739); color:var(--ls); font-weight:700;
  font-variant-numeric:tabular-nums;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.row .atbcol .p{font-size:calc(var(--d) * .659); color:var(--txt-mute);}
.row .atbcol .none{font-size:calc(var(--d) * .739); color:var(--txt-mute);}

/* Подсветка под курсором. Груз — это строка ПЛЮС её полоса с ATB и
   документами, поэтому загораются обе части, над какой бы из них ни стоял
   курсор. Слева зажигается метка: на широком экране она помогает поймать
   начало строки, не теряя её среди соседних. */
.row,.docs{transition:background .12s ease, box-shadow .12s ease;}
.row:hover,
.row:hover + .docs,
.docs:hover,
.row:has(+ .docs:hover){
  background:var(--hover);
  box-shadow:inset 3px 0 0 var(--hover-edge);
}

.svc{display:flex; align-items:center; justify-content:center; gap:4px; font-size:calc(var(--d) * .96); font-weight:700;}
.svc svg{width:calc(var(--d) * 1.875); height:calc(var(--d) * 1.875); display:block; overflow:visible;}
.svc .svc-img{
  width:calc(var(--d) * 2.188); height:calc(var(--d) * 2.188); display:block; object-fit:contain;
  clip-path:circle(47% at 50% 50%); user-select:none;
}
.svc .cnt{color:var(--txt-dim);}
.ic-our{color:var(--our);}
.ic-them{color:var(--them);}
.ic-cargo{color:var(--cargo);}

.mirror{display:inline-block; transform:scaleX(-1);}
.an-drive{animation:drive 2.4s ease-in-out infinite;}
.an-float{animation:floaty 3.2s ease-in-out infinite;}
.fork-up{animation:liftUp 2.4s ease-in-out infinite;}
@keyframes drive{0%,100%{transform:translateX(-8%)}50%{transform:translateX(8%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10%)}}
@keyframes liftUp{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}

.zoll{width:calc(var(--d) * 1.034); height:calc(var(--d) * 1.034); border-radius:50%; justify-self:center;}
.zoll.free{background:var(--green);}
.zoll.nofree{background:var(--red);}

.empty{
  padding:22px clamp(12px,2vw,26px); text-align:center;
  color:var(--txt-mute); font-size:16.9px; font-weight:700;
}

.stale-banner{
  display:none; margin:0 clamp(12px,2vw,26px) 14px;
  padding:10px 14px; border-radius:8px; font-size:13px;
  background:rgba(239,159,39,.12); color:var(--amber);
  border:1px solid rgba(239,159,39,.35);
}
.stale-banner.show{display:block;}

/* ---------------------------------------------------------------- Вкладки
   Капсула с двумя ярлыками и скользящей подложкой — тот же приём, что у
   ползунка темы в шапке, поэтому читается как часть одного продукта.
   Цветная точка у ярлыка — цвет зоны, куда ведёт вкладка: бирюзовый —
   «на складе сейчас», синий — «история». Подложку двигает board.js. */
.tabbar{
  display:flex; align-items:center;
  padding:12px clamp(12px,2vw,26px) 2px;
}
.tabs{
  position:relative; display:inline-flex; align-items:stretch; gap:2px;
  padding:4px; border-radius:12px;
  background:var(--seg-track); border:1px solid var(--line2);
}
.tab-ink{
  position:absolute; top:4px; bottom:4px; left:0; width:0;
  border-radius:9px; background:var(--seg-ink);
  border:1px solid var(--seg-ink-edge);
  box-shadow:0 1px 2px var(--shadow), 0 4px 14px -6px var(--shadow);
  pointer-events:none;
}
/* Пока вкладка не встала на место — без движения, иначе при загрузке
   подложка выезжала бы из левого края. */
.tabs.ready .tab-ink{
  transition:transform .38s cubic-bezier(.34,1.32,.5,1), width .38s cubic-bezier(.34,1.32,.5,1);
}
.tab{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:none; border:none; border-radius:9px;
  padding:8px 18px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:1.4px;
  color:var(--txt-mute); white-space:nowrap;
  transition:color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.tab .tdot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:currentColor; opacity:.55;
  transition:background .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.tab:hover{ color:var(--txt-dim); }
.tab.active{ color:var(--txt); }
.tab.active .tdot{ opacity:1; }
.tab.t-board.active .tdot{ background:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.tab.t-hist.active .tdot { background:var(--ls);   box-shadow:0 0 0 3px color-mix(in srgb, var(--ls) 22%, transparent); }
.tab:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

/* Выбор месяца. Системная стрелка заменена своей, нарисованной рамкой:
   её цвет берётся из темы. */
.msel{ position:relative; display:inline-flex; flex:0 0 auto; }
.msel[hidden]{ display:none; }
.msel::after{
  content:""; position:absolute; right:14px; top:50%;
  width:7px; height:7px; margin-top:-6px;
  border-right:2px solid var(--txt-mute); border-bottom:2px solid var(--txt-mute);
  transform:rotate(45deg); pointer-events:none;
  transition:border-color .15s ease;
}
.msel:hover::after{ border-color:var(--ls); }
.toolbar .month{
  -webkit-appearance:none; appearance:none;
  min-width:190px; padding:9px 38px 9px 12px; cursor:pointer;
  background:var(--field-bg); border:1px solid var(--line2);
  border-radius:8px; color:var(--txt); font-family:inherit; font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.toolbar .month:hover{ border-color:var(--ls); }
.toolbar .month:focus{ outline:none; border-color:var(--ls); box-shadow:0 0 0 3px var(--ring); }
.toolbar .month option{ background:var(--panel); color:var(--txt); }

/* --------------------------------------------------------------- Historie
   Те же колонки, что на доске, но без ZOLL: на месте даты прихода — даты
   выдачи и прихода двумя строками. Цвет зоны — синий --ls: это справка,
   а не живое состояние склада (бирюзовый/янтарный остаются за доской). */
.zone.hist .zone-head{ flex-wrap:wrap; row-gap:10px; }
.zone.hist .zone-head .dot{background:var(--ls);}
.zone.hist .zone-head .title{color:var(--ls);}
.zone.hist .zone-head .per{
  color:var(--txt-mute); font-size:12.5px; letter-spacing:.4px;
  padding-left:12px; border-left:1px solid var(--line2);
}

/* Сводка: что сейчас на экране — период, число отправок, штук и вес.
   Справа от заголовка зоны; на узком экране уходит на свою строку. */
.hsum{
  margin-left:auto; display:flex; align-items:stretch;
  background:var(--panel); border:1px solid var(--line2); border-radius:12px;
  overflow:hidden;
}
.hsum[hidden]{ display:none; }
.hsum .st{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:8px 20px; border-left:1px solid var(--line);
}
.hsum .st:first-child{ border-left:none; }
.hsum .l{
  font-size:10.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--txt-mute); white-space:nowrap;
}
.hsum .v{
  font-size:clamp(16px,1.15vw,20px); font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hsum .v small{ font-size:.66em; font-weight:400; color:var(--txt-dim); margin-left:5px; }
.hsum .st-range{ background:color-mix(in srgb, var(--ls) 8%, transparent); }
.hsum .st-range .v{ color:var(--ls); }

/* Шапка колонок «прилипает» под шапкой страницы: в длинной истории
   не теряется, какая колонка что значит. Смещение считает board.js. */
.zone.hist .col-head{ position:sticky; top:var(--head-h,0); z-index:4; }
.zone.hist.is-empty .col-head{ display:none; }

.hist .col-head,.hist .row{
  grid-template-columns:
    minmax(calc(var(--d) * 8.07),.75fr) minmax(calc(var(--d) * 4.55),.55fr)
    minmax(calc(var(--d) * 9.09),.35fr) minmax(calc(var(--d) * 7.67),.3fr)
    minmax(calc(var(--d) * 4.09),.6fr)  minmax(calc(var(--d) * 5.11),.8fr)
    minmax(calc(var(--d) * 3.41),.9fr)  minmax(calc(var(--d) * 4.70),1fr)
    minmax(calc(var(--d) * 4.09),.95fr) minmax(calc(var(--d) * 5.20),1fr)
    minmax(calc(var(--d) * 7.05),1.05fr)
    minmax(calc(var(--d) * 8.75),.5fr);
}
.row .dates,.row .lscol{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  line-height:1.25; white-space:nowrap; overflow:hidden; min-width:0;
}
.row .dates .v{color:var(--txt); font-variant-numeric:tabular-nums;}
.row .dates .p{font-size:calc(var(--d) * .659); color:var(--txt-mute); font-variant-numeric:tabular-nums;}
.row .lscol .v{color:var(--ls); font-weight:700; letter-spacing:.3px;}
.row .lscol .p{font-size:calc(var(--d) * .659); color:var(--txt-mute);
  max-width:100%; overflow:hidden; text-overflow:ellipsis;}

/* Месяц — отдельный блок. Его заголовок прилипает под шапкой колонок,
   пока листаешь этот месяц, и уезжает вместе с последней строкой. */
.msec + .msec{ margin-top:22px; }
.grp.mon{
  position:sticky; top:var(--mon-top,0); z-index:3;
  justify-content:flex-start; gap:14px; margin:0;
  padding:12px clamp(12px,2vw,26px) 10px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  border-top:none; border-bottom:1px solid var(--line2);
}
/* Синяя метка слева — то же место, где у строки под курсором зажигается
   полоска: глаз сразу находит начало месяца. */
.grp.mon::before{
  content:""; align-self:stretch; width:4px; border-radius:2px;
  background:var(--ls); margin-right:-2px;
}
.grp.mon .k{
  color:var(--txt); font-size:clamp(16px,1.2vw,20px); font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; max-width:none;
}
.grp.mon .k em{
  font-style:normal; font-weight:400; color:var(--txt-mute);
  margin-left:10px; letter-spacing:.5px;
}
.grp.mon .n{
  margin-left:auto; color:var(--txt-mute); font-weight:400;
  font-size:clamp(12.5px,.85vw,14.5px); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.grp.mon .n b{ color:var(--txt-dim); font-weight:700; }
.grp.mon .n .sep{ margin:0 9px; opacity:.6; }
/* Конец списка — тихая подпись, чтобы короткая история (в первый месяц
   одна-две строки) не обрывалась на полуслове. */
.hend{
  display:flex; align-items:center; gap:16px;
  margin:26px clamp(12px,2vw,26px) 0;
  color:var(--txt-mute); font-size:12px; letter-spacing:.5px; white-space:nowrap;
}
.hend::before,.hend::after{ content:""; flex:1 1 auto; height:1px; background:var(--line2); }

/* Пустые состояния: значок в круге, заголовок, пояснение. */
.hempty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; padding:56px 20px 40px;
}
.hempty .ico{
  width:64px; height:64px; border-radius:50%; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ls); background:var(--hover);
  box-shadow:inset 0 0 0 1px var(--ring), 0 0 0 8px color-mix(in srgb, var(--ls) 4%, transparent);
}
.hempty .ico svg{ width:30px; height:30px; display:block; }
.hempty .t{ color:var(--txt); font-size:16.5px; font-weight:700; letter-spacing:.2px; }
.hempty .s{ color:var(--txt-mute); font-size:13.5px; line-height:1.55; max-width:52ch; }
.hempty .linkbtn{ margin-top:10px; padding:7px 14px; font-size:12.5px; color:var(--txt-dim); }
.hempty .linkbtn:focus-visible{ outline:none; border-color:var(--ls); box-shadow:0 0 0 3px var(--ring); }

/* Загрузка: контур будущих строк с бегущим бликом. */
.hload{ padding:6px 0 0; }
.hload .sk{
  height:calc(var(--d) * 2.6); margin:0 clamp(12px,2vw,26px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, transparent 0%, var(--hover) 45%, transparent 90%) 0 0 / 220% 100% no-repeat;
  animation:hshimmer 1.5s ease-in-out infinite;
}
.hload .sk:nth-child(2){ animation-delay:.12s; opacity:.8; }
.hload .sk:nth-child(3){ animation-delay:.24s; opacity:.6; }
.hload .sk:nth-child(4){ animation-delay:.36s; opacity:.4; }
.hload .cap{
  padding:18px 12px 6px; text-align:center;
  color:var(--txt-mute); font-size:13px; font-weight:700; letter-spacing:.6px;
}
@keyframes hshimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* Появление каскадом — только при открытии вкладки и смене месяца
   (класс .anim ставит и снимает board.js). Фоновое обновление раз в минуту
   перерисовывает без движения. */
@keyframes hrise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
#hist-body.anim .grp,
#hist-body.anim .row,
#hist-body.anim .docs,
#hist-body.anim .card,
#hist-body.anim .hempty,
#hist-body.anim .hend{
  animation:hrise .46s cubic-bezier(.2,.75,.25,1) both;
  animation-delay:calc(var(--i, 0) * 26ms);
}
@media (prefers-reduced-motion: reduce){
  #hist-body.anim *{ animation:none !important; }
  .tabs.ready .tab-ink{ transition:none; }
  .hload .sk{ animation:none; }
}

/* Карточки — для экранов, куда таблица уже не помещается */
.card{display:none;}

/* ------------------------------------------- Телефон и узкий экран --------
   Порог поднят с 820px: после полных подписей в шапке и колонки ATB таблице
   нужно ~1385px содержимого (замерено), и на более узком экране она вылезала бы
   за край. Карточки показывают ровно те же данные, просто столбиком. */
@media (max-width:1140px){
  .col-head{display:none;}
  .row{display:none;}
  /* Полоса документов идёт следом за .row и без этого осталась бы на экране
     сиротой: те же плашки показались бы второй раз, отдельно от карточки. */
  .row + .docs{display:none;}
  /* У Teillieferung между строкой и документами стоит пояснение — без этих
     правил на телефоне оно и плашки документов показывались дважды:
     сиротами под скрытой строкой и ещё раз внутри карточки. */
  .row + .teilnote{display:none;}
  .row + .teilnote + .docs{display:none;}

  .card{
    /* Карточке подстройка под ширину не нужна: она и так в одну колонку.
       Фиксируем базу — все формулы calc() внутри дают ровно те размеры,
       что были до введения масштабирования. */
    --d:17.6px;
    display:block; margin:0 12px 10px; padding:12px 14px;
    background:var(--panel); border:1px solid var(--line2);
    border-left:4px solid var(--ls); border-radius:10px;
  }
  .card .top{display:flex; align-items:baseline; gap:10px; margin-bottom:8px;}
  .card .top .ls{color:var(--ls); font-size:24.2px; font-weight:700;}
  .card .top .eingang{color:var(--txt-dim); font-size:15.1px; margin-left:auto;}
  .card .top .kd{color:var(--txt-mute); font-size:14px; font-weight:700;}
  .card .awb{font-size:16.9px; color:var(--txt-dim); word-break:break-all; margin-bottom:2px;}
  .card .awb .lbl{color:var(--txt-mute); font-size:13.3px; letter-spacing:.4px; margin-right:6px;}
  .card .nums{display:flex; gap:18px; margin:9px 0 4px; font-size:16.9px; font-variant-numeric:tabular-nums;}
  .card .nums .lbl{color:var(--txt-mute); font-size:13.3px; letter-spacing:.4px; display:block;}
  .card .svcs{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  }
  .card .zollbox{display:flex; align-items:center; gap:7px; font-size:14.5px; color:var(--txt-mute);}

  .head{gap:9px; padding:9px 12px;}
  .head .brand{font-size:16px; letter-spacing:1px;}
  .head .stand{width:100%; order:10;}
  .toolbar{padding:9px 12px;}
  .zone-head{padding:12px 12px 8px;}
  .empty{padding:18px 12px;}
  .stale-banner{margin:0 12px 12px;}

  /* История карточками. Даты — справа в шапке карточки, как первая
     колонка таблицы: выдача крупно, приход под ней. */
  .tabbar{padding:10px 12px 2px;}
  .grp.mon{padding:11px 12px 9px;}
  .grp.mon + .card{margin-top:10px;}
  .msec + .msec{margin-top:16px;}
  .hend{margin:18px 12px 0;}
  .card.h .top{align-items:flex-start;}
  .card.h .top .ls{line-height:1.1;}
  .card.h .top .kd{align-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .card.h .when{
    margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end;
    gap:2px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .card.h .when b{color:var(--txt); font-size:15.1px; font-weight:700;}
  .card.h .when i{font-style:normal; color:var(--txt-mute); font-size:12.5px;}
}

/* Телефон: вкладки на всю ширину пополам, сводка — сеткой 2×2. */
@media (max-width:600px){
  .tabs{display:flex; width:100%;}
  .tab{flex:1 1 0; padding:9px 8px;}
  .zone.hist .hsum{margin-left:0; width:100%; display:grid; grid-template-columns:1fr 1fr;}
  .hsum .st{padding:8px 14px; border-left:none;}
  .hsum .st:nth-child(even){border-left:1px solid var(--line);}
  .hsum .st:nth-child(n+3){border-top:1px solid var(--line);}
  /* Выбор месяца — той же ширины, что поле поиска над ним. */
  .msel{flex:1 1 220px; max-width:340px;}
  .toolbar .month{width:100%; min-width:0;}
  /* Подпись периода уже есть в сводке («Zeitraum») — здесь она бы
     переносилась отдельной строкой с висящей чертой. */
  .zone.hist .zone-head .per{display:none;}
  .hend{white-space:normal; text-align:center;}
  .hempty{padding:40px 16px 28px;}
}

@media (min-width:1141px){
  .card{display:none !important;}
}

/* Teillieferung: Kante + «5/10» / «Rest 5» + Hinweiszeile */
.row.teil { box-shadow: inset 4px 0 0 #f39c12; background: rgba(243, 156, 18, .10); }
/* Karte (Telefon) hat schon eine eigene Kante links -> nur deren Farbe */
.card.teil { border-left-color: #f39c12; background: rgba(243, 156, 18, .10); }
.anzahl.teil { color: #e67e22; font-weight: 800; }
.anzahl.teil i { font-style: normal; font-weight: 600; opacity: .8; }
.teilnote { margin: 2px 0 6px 0; padding: 6px 12px; border-radius: 8px; background: rgba(243, 156, 18, .15);
            color: #e67e22; font-size: 13px; font-weight: 600; }