/* ============================================================
   app.css — основа: цвета и размеры (:root), вход, список выбора, шапка, плитки
   показателей, подсказки, уведомления, каркас загрузки. Дальше по порядку —
   css/forms.css, tables.css, checklist.css, mobile.css: порядок подключения
   = порядок каскада, как когда всё было одним файлом.
   С 26.10.2026 стили разнесены по файлам без правок.
   ============================================================ */
  :root{
    --paper:#EEF1F6; --surface:#FFFFFF; --surface-2:#F7F9FC;
    --border:#E4E8F0; --border-strong:#D3DAE6;
    --ink:#121722; --ink-2:#414b5c; --muted:#636D80;
    --accent:#2B59F0; --accent-ink:#1B3AC2; --accent-soft:#E9EFFF;
    --good:#0FA45A; --good-bg:#E4F6EC; --good-ink:#0C7F45;
    --mid:#DE9109;  --mid-bg:#FAF0DA;  --mid-ink:#976306;
    --bad:#E23A3A;  --bad-bg:#FBE7E7;  --bad-ink:#D01F1F;
    /* -ink — те же цвета, опущенные до читаемого контраста: заливки и
       графики остаются яркими, а текст и цифры перестают выцветать */
    --new:#2B59F0;  --new-bg:#E9EFFF;
    --kz:#6D34D6;   --kz-bg:#F1E9FF;   /* контрольные звонки заказчика */
    --radius:14px; --radius-sm:10px;
    --ease-out:cubic-bezier(.23,1,.32,1);   /* резче стандартного ease-out */
    --shadow:0 1px 2px rgba(18,23,34,.05), 0 2px 8px rgba(18,23,34,.04);
    --shadow-lg:0 12px 40px rgba(18,23,34,.18);
    --font:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display:'Space Grotesk', var(--font);
    --login-bg:#0B1019; --login-card:#131b2b; --login-line:rgba(255,255,255,.08);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  /* место под полосу прокрутки держим всегда: иначе при загрузке данных
     она появляется и вся страница дёргается вбок */
  html { scrollbar-gutter:stable; }
  body { font-family:var(--font); background:var(--paper); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; }
  .hidden { display:none !important; }
  /* Смена раздела меняет и длину страницы: в отчётах она втрое больше.
     Короткое проявление снимает ощущение подмены. Двигаем только
     прозрачность — ни размеров, ни положения. */
  @keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
  .page-in{ animation:pageIn .16s var(--ease-out); }
  ::selection { background:var(--accent); color:#fff; }
  /* Кнопки и ссылки не показывали фокус: с клавиатуры было не понять,
     где ты находишься. Только :focus-visible — мышью рамка не мигает. */
  button:focus-visible, a:focus-visible, select:focus-visible,
  input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
  }
  /* На тач-экранах мелкие кнопки в таблицах не попадались пальцем */
  @media (pointer:coarse){
    .btn-small, .logout-btn, .seg-btn{ min-height:40px; }
  }

  /* ===== ВХОД (консоль) ===== */
  .login-wrapper{
    display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px;
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(43,89,240,.22), transparent 60%),
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/22px 22px,
      var(--login-bg);
  }
  .login-container{
    background:var(--login-card); padding:44px 38px; border-radius:20px;
    border:1px solid var(--login-line); box-shadow:var(--shadow-lg);
    width:400px; max-width:100%; text-align:center; animation:rise .5s cubic-bezier(.2,.7,.3,1) both;
  }
  .logo{
    width:60px; height:60px; margin:0 auto 18px; border-radius:16px;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,#2B59F0,#1B3AC2); color:#fff; font-size:26px;
    box-shadow:0 8px 24px rgba(43,89,240,.45);
  }
  .login-container h1{ color:#fff; font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.2px; margin-bottom:8px; }
  .subtitle{ color:#93a0b8; font-size:14px; margin-bottom:28px; }
  .pin-input-container{ position:relative; margin-bottom:14px; }
  .pin-input-container > i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#5c6a86; font-size:16px; }
  .pin-input-container input{
    width:100%; padding:15px 44px 15px 46px; border:1.5px solid rgba(255,255,255,.12); border-radius:12px;
    font-size:16px; outline:none; background:#0d1523; color:#fff; transition:border-color .2s, box-shadow .2s;
  }
  .pin-input-container input::placeholder{ color:#3a465e; }
  .pin-input-container input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(43,89,240,.22); }
  .pw-eye{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:none; border-radius:9px; color:#5c6a86; cursor:pointer; font-size:15px;
  }
  .pw-eye:hover{ color:var(--accent); }
  .login-btn{
    width:100%; padding:15px; background:var(--accent); color:#fff; border:none; border-radius:12px;
    font-family:var(--display); font-size:16px; font-weight:600; cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s;
  }
  .login-btn:hover{ background:var(--accent-ink); box-shadow:0 10px 26px rgba(43,89,240,.4); }
  @media (hover:hover) and (pointer:fine){
    .login-btn:hover{ transform:translateY(-1px); }
  }
  .login-btn:active{ transform:translateY(0); }
  /* Нажатие должно чувствоваться: кнопка проседает и сразу возвращается */
  .btn-small:active, .btn-filter:active, .seg-btn:active, .logout-btn:active,
  .btn-submit:active, .ci-toggle:active, .ev-opt:active{ transform:scale(.97); }
  .login-btn[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
  #loginForm{ margin-top:4px; }
  #loginForm .pin-input-container{ margin-bottom:14px; }
  #loginForm .login-btn{ margin-top:4px; }
  .error-message{ color:#ff8a8a; font-size:14px; margin-top:15px; min-height:20px; }

  /* ===== СПИСОК ВЫБОРА С ПОИСКОМ (ui-select.js) ===== */
  .uisel{ position:relative; display:block; }
  .uisel-native{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; }
  .uisel-btn{
    position:relative; width:100%; text-align:left; cursor:pointer; font-family:inherit;
    background:var(--surface); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:border-color .2s, box-shadow .2s;
  }
  .uisel-btn:hover{ border-color:var(--muted) !important; }
  .uisel-btn:focus-visible, .uisel[data-open] .uisel-btn{
    border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(43,89,240,.14); outline:none;
  }
  .uisel-btn[disabled]{ opacity:.6; cursor:default; }
  .uisel-btn.uisel-placeholder .uisel-val{ color:var(--muted); }
  .uisel-caret{ position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--muted); pointer-events:none; }
  .uisel[data-open] .uisel-caret{ transform:translateY(-50%) rotate(180deg); }

  .uisel-panel{
    position:fixed; z-index:1200; background:var(--surface); border:1px solid var(--border-strong);
    border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
    overflow:hidden; min-width:210px;
  }
  /* display:flex выше перебивал атрибут hidden, и все панели висели внизу страницы */
  .uisel-panel[hidden]{ display:none; }
  .uisel-search{ position:relative; padding:8px; border-bottom:1px solid var(--border); flex:0 0 auto; }
  .uisel-search i{ position:absolute; left:19px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; }
  .uisel-search input{
    width:100%; padding:9px 11px 9px 34px; border:1.5px solid var(--border-strong); border-radius:9px;
    font-size:14px; font-family:inherit; color:var(--ink); background:var(--surface-2); outline:none;
  }
  .uisel-search input:focus{ border-color:var(--accent); background:var(--surface); }
  .uisel-list{ overflow-y:auto; padding:6px; flex:1 1 auto; }
  .uisel-group{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:var(--muted); padding:9px 10px 5px; }
  .uisel-item{ padding:9px 11px; border-radius:8px; font-size:14px; color:var(--ink); cursor:pointer; }
  .uisel-item-in-group{ padding-left:20px; }
  .uisel-item:hover, .uisel-item.uisel-active{ background:var(--accent-soft); color:var(--accent-ink); }
  .uisel-item.uisel-disabled{ color:var(--muted); cursor:default; background:none; }
  .uisel-empty{ padding:18px; text-align:center; color:var(--muted); font-size:14px; }
  @media (max-width:640px){ .uisel-panel{ min-width:0; } }

  /* ===== ШАПКА ===== */
  .header{
    background:var(--surface); color:var(--ink); padding:14px 26px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    position:sticky; top:0; z-index:50;
  }
  .header h1{ font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.2px; display:flex; align-items:center; gap:12px; }
  /* Заголовок с логотипом — путь домой из любого раздела, как везде */
  .header h1.home-link{ cursor:pointer; user-select:none; border-radius:12px; padding:2px 8px 2px 2px;
    margin-left:-2px; transition:background .18s var(--ease-out); }
  .header h1.home-link:hover{ background:var(--surface-2); }
  .header h1.home-link:active{ transform:scale(.985); }
  .header h1 i{
    width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
    display:inline-flex; align-items:center; justify-content:center; font-size:16px; margin:0;
  }
  .user-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .user-badge{ background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); padding:7px 13px; border-radius:9px; font-size:13px; font-weight:500; }
  .user-badge i{ margin-right:6px; color:var(--muted); }
  .logout-btn{ background:transparent; border:1px solid var(--border-strong); color:var(--ink-2); padding:7px 15px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:500; transition:background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .16s var(--ease-out); }
  .logout-btn:hover{ background:var(--bad-bg); border-color:var(--bad-ink); color:var(--bad-ink); }

  .container{ max-width:1200px; margin:0 auto; padding:24px 20px 40px; }
  /* Отчёты шире кабинетов: в 1200px «Производственные показатели» с двумя
     десятками колонок не влезали, и внизу висел горизонтальный бегунок,
     хотя справа оставалось пустое место. */
  #repPage .container{ max-width:min(1900px, 100%); }
  .kbd-hint{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }
  /* Полоса разделов стоит по центру: прижатая к левому краю, она при
     входе в отчёты прыгала влево вместе с широким контейнером (на 1920
     — на 350px). Контейнеры центрированы все, так что по центру она на
     любой странице в одном и том же месте. Вкладки отчётов — под ней. */
  .seg.nav-slot, #repPage .seg.seg-sub{ margin-left:auto; margin-right:auto; }

  /* ===== СТАТ-КАРТЫ ===== */
  .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
  .stat-card{
    background:var(--surface); padding:18px 20px; border-radius:var(--radius); border:1px solid var(--border);
    box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  /* Цветную полоску слева убрал: цвет цифры и так говорит, о чём карточка */
  .stat-card .number{ font-family:var(--display); font-size:30px; font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
  .stat-card .label{ font-size:11px; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
  .stat-card .number.new{ color:var(--new); }
  .stat-card .number.inprogress{ color:var(--mid-ink); }
  .stat-card .number.checked{ color:var(--good-ink); }
  .stat-card .number.rejected{ color:var(--bad-ink); }
  .stat-card .number.rating{ color:var(--accent); }
  /* Подсказка «что входит в показатель»: наведение мышью, на телефоне —
     касание (плитка получает фокус). Сами о себе забывали, что считается. */
  .stat-card[data-tip]{ overflow:visible; cursor:help; outline:none; }
  /* пояснение к столбцам таблицы: подсказка над таблицей обрезалась бы прокруткой */
  .col-legend{ margin:0 0 12px; font-size:13px; color:var(--ink-2); }
  .col-legend summary{ cursor:pointer; color:var(--accent); font-weight:600; list-style:none; }
  .col-legend summary::-webkit-details-marker{ display:none; }
  .col-legend ul{ margin:8px 0 0; padding-left:18px; line-height:1.5; }
  .col-legend li{ margin:3px 0; }
  .stat-card[data-tip] .label::after{ content:'?'; display:inline-block; width:14px; height:14px; margin-left:6px;
    border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--muted);
    font-size:10px; line-height:12px; text-align:center; letter-spacing:0; vertical-align:1px; }
  .stat-card[data-tip]::after{ content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:0; z-index:60;
    width:max(100%, 280px); padding:11px 13px; border-radius:10px; background:#1b2333; color:#fff;
    font-size:12.5px; line-height:1.5; font-weight:400; text-transform:none; letter-spacing:0; white-space:pre-line;
    box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
    transition:opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s; }
  /* касание даёт фокус — подсказка открыта, пока не коснулись другого места;
     наведение — только для мыши: на телефоне оно «залипает», и подсказки
     от разных плиток вылезали друг на друга */
  .stat-card[data-tip]:focus{ z-index:5; border-color:var(--border-strong); }
  .stat-card[data-tip]:focus::after{ opacity:1; visibility:visible; transform:none; }
  @media (hover:hover) and (pointer:fine){
    .stat-card[data-tip]:hover{ z-index:5; border-color:var(--border-strong); }
    .stat-card[data-tip]:hover::after{ opacity:1; visibility:visible; transform:none; }
  }
  /* у правого края подсказка открывается влево, чтобы не уйти за экран */
  .stat-card[data-tip]:nth-last-child(-n+2)::after{ left:auto; right:0; }

  /* Сообщения об ошибках: одно место и один вид. Системное окно браузера
     останавливало работу и выглядело чужим, а половина кода и так
     показывала ошибку плашкой. */
  /* Сверху справа, под шапкой: внизу уведомление ложилось на панель
     чек-листа и закрывало «Сохранить оценку» — ту самую кнопку, которую
     после ошибки надо нажать ещё раз. И после сохранения страница уезжает
     наверх — взгляд как раз здесь. */
  .toasts{ position:fixed; right:18px; top:80px; z-index:1300; display:flex;
    flex-direction:column; max-width:min(420px, calc(100vw - 36px)); }
  @media (max-width:600px){ .toasts{ top:12px; left:12px; right:12px; max-width:none; } }
  /* промежуток — отступом, а не gap: при уходе он схлопывается вместе
     с уведомлением, и соседи подтягиваются плавно, а не прыжком */
  .toast{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin-bottom:10px;
    border-radius:var(--radius-sm); border:1px solid var(--border-strong);
    background:var(--surface); box-shadow:var(--shadow-lg); font-size:14px;
    line-height:1.45; cursor:pointer; overflow:hidden;
    animation:toastIn .22s var(--ease-out) both; }
  .toast.leaving{ animation:toastOut .15s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
  .toast.gone{ height:0 !important; padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0;
    transition:height .16s var(--ease-out), padding .16s var(--ease-out), margin .16s var(--ease-out); }
  .toast.bump{ animation:toastBump .32s var(--ease-out); }
  @keyframes toastIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
  @keyframes toastOut{ to{ opacity:0; transform:translateX(16px); } }
  @keyframes toastBump{ 25%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } 75%{ transform:translateX(-2px); } }
  .toast i{ margin-top:2px; }
  /* ошибку сохранения мало увидеть — её надо передать: заголовок,
     причина и кнопки, и уведомление само не уходит */
  .toast.sticky{ cursor:default; }
  .toast .t-body{ display:flex; flex-direction:column; gap:4px; }
  .toast .t-title{ font-weight:700; }
  .toast .t-actions{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
  .toast .t-actions button{ font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border-radius:8px;
    cursor:pointer; border:1px solid currentColor; background:transparent; color:inherit; }
  .toast .t-actions button.primary{ background:var(--bad); border-color:var(--bad); color:#fff; }
  .toast.err{ border-color:var(--bad); background:var(--bad-bg); color:var(--bad-ink); }
  .toast.ok{ border-color:var(--good); background:var(--good-bg); color:var(--good-ink); }

  /* Каркас на время загрузки. Крутилка сообщает «идёт работа», каркас —
     ещё и «сейчас тут будет таблица», поэтому глазу спокойнее. */
  .skel{ padding:2px 0; }
  .skel-row{ display:flex; gap:14px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--border); }
  .skel-bar{ height:11px; border-radius:6px;
    background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
    background-size:400% 100%; animation:skel 1.3s ease-in-out infinite; }
  @keyframes skel{ from{ background-position:100% 0; } to{ background-position:0 0; } }