:root{
    color-scheme: light;
    /* Фирменные цвета AQUAGIZER */
    --brand-orange:#FF6600;
    --brand-orange-dark:#E05A00;
    --brand-blue:#00A4FF;
    --brand-blue-dark:#0086D1;
    --brand-gray:#525252;
    --primary:#FF6600;
    --primary-dark:#E05A00;
    --bg:#f5f4f2;
    --card:#ffffff;
    --border:#e5e2de;
    --text:#2e2e2e;
    --text-muted:#6b6b6b;
    --danger:#dc2626;
    --danger-bg:#fee2e2;
    --warning:#d97706;
    --warning-bg:#fef3c7;
    --success:#16a34a;
    --success-bg:#dcfce7;
    --neutral-bg:#eeece9;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
  }
  .app{display:flex;min-height:100vh;align-items:flex-start;}
  .sidebar{
    width:260px;
    background:var(--brand-gray);
    color:#f2f2f2;
    padding:24px 16px;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
  }
  .brand-mark{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
  /* логотип-ссылка «домой»: заметно, что по нему можно нажать */
  .brand-home{cursor:pointer;user-select:none;border-radius:8px;padding:2px 4px;margin-left:-4px;transition:background .15s;}
  .brand-home:hover{background:rgba(255,255,255,.1);}
  .brand-home:active{background:rgba(255,255,255,.16);}
  .brand-icon{
    font-size:15px;
    width:26px;height:26px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;
    background:linear-gradient(135deg, var(--brand-orange), var(--brand-blue));
    color:#fff;
  }
  .brand-word{font-size:19px;font-weight:800;letter-spacing:.01em;line-height:1.1;}
  .brand-part-a{color:var(--brand-blue);}
  .brand-part-b{color:var(--brand-orange);}
  .sidebar .subtitle{
    font-size:12px;
    color:#d3d3d3;
    margin-bottom:24px;
  }
  .nav-btn{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    margin-bottom:6px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:#e3e3e3;
    font-size:13px;
    cursor:pointer;
    transition:background .15s;
  }
  .nav-btn:hover{background:rgba(255,255,255,.1);}
  .nav-btn.active{background:var(--primary);color:#fff;font-weight:600;}
  .nav-group-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
  .nav-caret{font-size:10px;opacity:.7;}
  .nav-sub-btn{padding-left:26px;font-size:12.5px;}
  .nav-group-label{
    padding:10px 12px 2px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#c7c7c7;
    font-weight:600;
  }
  .nav-note{
    margin-top:24px;
    padding:12px;
    background:rgba(0,0,0,.18);
    border-radius:8px;
    font-size:11px;
    color:#d3d3d3;
    line-height:1.5;
  }
  .console-demo-links{
    margin-top:16px;
    padding:12px;
    background:rgba(0,0,0,.18);
    border-radius:8px;
    font-size:11px;
    color:#d3d3d3;
    line-height:1.6;
  }
  .console-demo-links a{color:#7dd0ff;cursor:pointer;text-decoration:underline;}
  .content{
    flex:1;
    padding:32px 40px;
    max-width:1100px;
  }
  .page-title{
    font-size:22px;
    font-weight:700;
    margin:0 0 4px 0;
  }
  .page-subtitle{
    color:var(--text-muted);
    font-size:13px;
    margin:0 0 24px 0;
  }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
  }
  .card h3{margin:0 0 14px 0;font-size:15px;}
  .card h3 .muted{color:var(--text-muted);font-weight:400;font-size:12px;}
  /* Сетка фильтров: на ноутбуке все четыре (тип, регион, управляющий, точка) в одну строку,
     период — строкой ниже на всю ширину. На телефоне раскладка другая, см. медиа-запрос. */
  .filters-grid{display:grid;gap:14px;grid-template-columns:repeat(4, minmax(0,1fr));align-items:end;}
  .filters-grid .filters-period{grid-column:1 / -1;}
  /* пятый фильтр (проверяющий) занимает две колонки — в одну имя не читается */
  .filters-grid .filters-span2{grid-column:span 2;}
  .filters-grid select, .filters-grid input[type=text]{width:100%;}

  .grid-cols{display:grid;gap:16px;}
  .cols-3{grid-template-columns:repeat(3,1fr);}
  .cols-2{grid-template-columns:repeat(2,1fr);}
  .stat{
    background:var(--neutral-bg);
    border-radius:10px;
    padding:16px;
    text-align:center;
  }
  .stat .num{font-size:26px;font-weight:700;}
  .stat .label{font-size:12px;color:var(--text-muted);margin-top:4px;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
  th{color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
  tr:last-child td{border-bottom:none;}
  .table-scroll{overflow-x:auto;}
  .table-scroll table{min-width:640px;}
  /* фиксированные проценты колонок — чтобы Точка/Регион/Статус/Рейтинг выравнивались
     по одной сетке во всех трёх таблицах (Конвейеры/Роботы/МСО), независимо от длины названий */
  .points-table{table-layout:fixed;}
  .points-table th:nth-child(1), .points-table td:nth-child(1){width:46%;}
  .points-table th:nth-child(2), .points-table td:nth-child(2){width:24%;}
  .points-table th:nth-child(3), .points-table td:nth-child(3){width:18%;}
  .points-table th:nth-child(4), .points-table td:nth-child(4){width:12%;}
  .badge{
    display:inline-block;
    padding:3px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
  }
  .badge-danger{background:var(--danger-bg);color:var(--danger);}
  .badge-warning{background:var(--warning-bg);color:var(--warning);}
  .badge-success{background:var(--success-bg);color:var(--success);}
  .badge-neutral{background:var(--neutral-bg);color:var(--text-muted);}
  .btn{
    border:none;
    border-radius:8px;
    padding:8px 14px;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    background:var(--primary);
    color:#fff;
  }
  .btn:hover{background:var(--primary-dark);}
  .btn-secondary{background:var(--neutral-bg);color:var(--text);}
  .btn-secondary:hover{background:var(--border);}
  .btn-sm{padding:5px 10px;font-size:11.5px;}
  .btn:disabled{opacity:.5;cursor:not-allowed;}
  /* Карточка проверки в журнале — мобильная замена широкой таблице */
  .insp-card{
    border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--card);
  }

  /* Заголовок блока пунктов («Пост 1», «Бокс 2») — сворачивается нажатием */
  .group-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--neutral-bg);border-radius:8px;padding:9px 12px;margin:10px 0 8px;
    cursor:pointer;user-select:none;font-size:13px;
  }
  .group-head:hover{background:var(--border);}
  .group-head.group-done{background:var(--success-bg);}
  /* пункт, к которому перешли по кнопке отправки: видно, куда именно смотреть */
  .checklist-item.item-highlight{
    border-color:var(--primary);
    box-shadow:0 0 0 2px var(--primary) inset;
  }

  .checklist-item{
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px;
    margin-bottom:10px;
  }
  .checklist-item .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .checklist-item .qtext{font-size:13.5px;font-weight:500;}
  .checklist-item .tags{margin-top:6px;}
  .tag{font-size:10.5px;color:var(--text-muted);margin-right:8px;}
  .answer-toggle{display:flex;gap:6px;flex-shrink:0;}
  .toggle-btn{
    border:1px solid var(--border);
    background:#fff;
    padding:6px 12px;
    border-radius:7px;
    font-size:12px;
    cursor:pointer;
  }
  .toggle-btn.yes.active{background:var(--success-bg);border-color:var(--success);color:var(--success);}
  .toggle-btn.no.active{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);}
  /* «Н/П» — нейтральный, не красный: это не нарушение, а отсутствие узла на объекте */
  .toggle-btn.na.active{background:var(--neutral-bg);border-color:var(--text-muted);color:var(--text-muted);font-weight:600;}
  /* ---------- Шкала 0–5: ползунок ---------- */
  /* Оценка — это степень, поэтому здесь бегунок, а не ряд кнопок: тянуть его быстрее, чем
     целиться пальцем в мелкие кнопки, и сама шкала читается как непрерывная. */
  .scale-wrap{margin-top:12px;}
  .scale-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px;}
  .scale-value{font-size:20px;font-weight:700;color:var(--primary);min-width:2ch;}
  .scale-empty .scale-value{color:var(--text-muted);}
  .scale-hint{font-size:11.5px;color:var(--text-muted);margin-top:2px;}

  .scale-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:26px;background:transparent;cursor:pointer;display:block;
  }
  .scale-range:disabled{opacity:.4;cursor:default;}
  /* дорожка */
  .scale-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--border);}
  .scale-range::-moz-range-track{height:6px;border-radius:999px;background:var(--border);}
  /* бегунок — крупный, чтобы попадать пальцем на объекте */
  .scale-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
    background:#fff;border:2px solid var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.25);
    margin-top:-10px;
  }
  .scale-range::-moz-range-thumb{
    width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--primary);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
  }
  .scale-empty .scale-range::-webkit-slider-thumb{border-color:var(--text-muted);}
  .scale-empty .scale-range::-moz-range-thumb{border-color:var(--text-muted);}

  /* деления под шкалой — по числу шагов, ровно под позициями бегунка */
  .scale-ticks{
    display:flex;justify-content:space-between;
    font-size:12px;color:var(--text-muted);padding:0 11px;margin-top:-2px;
  }
  .photo-btn{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    border:1px dashed var(--border);
    padding:6px 10px;
    border-radius:7px;
    cursor:pointer;
    background:#fafafa;
    color:var(--text-muted);
  }
  .photo-btn.attached{border-color:var(--success);color:var(--success);background:var(--success-bg);border-style:solid;}
  /* Уведомление всплывает ПОВЕРХ содержимого (position:fixed), а не занимает место в потоке:
     раньше при каждом сохранении оно сдвигало весь экран вниз, и место, куда смотрел
     пользователь, уезжало из-под курсора. */
  .banner{
    position:fixed;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:200;
    max-width:min(560px, calc(100vw - 24px));
    padding:12px 18px;
    border-radius:10px;
    background:var(--success-bg);
    color:var(--success);
    border:1px solid var(--success);
    box-shadow:0 8px 24px rgba(0,0,0,.16);
    font-size:13px;
    font-weight:600;
    text-align:center;
    animation:bannerIn .16s ease-out;
  }
  @keyframes bannerIn{
    from{opacity:0; transform:translateX(-50%) translateY(-8px);}
    to{opacity:1; transform:translateX(-50%) translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .banner{animation:none;}
  }
  select,input[type=date],input[type=text],textarea{
    border:1px solid var(--border);
    border-radius:7px;
    padding:6px 9px;
    font-size:12.5px;
    font-family:inherit;
  }
  textarea{width:100%;resize:vertical;}
  .tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
  .tab-btn{
    padding:7px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#fff;
    font-size:12.5px;
    cursor:pointer;
  }
  .tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
  .perm-grid{display:grid;grid-template-columns:1.4fr repeat(6,1fr);gap:6px;align-items:center;font-size:12.5px;}
  .perm-grid .head{font-weight:600;color:var(--text-muted);font-size:11px;text-align:center;}
  .perm-cell{text-align:center;}
  .guest-shell{max-width:560px;margin:0 auto;}
  .guest-header{
    background:linear-gradient(135deg,var(--brand-orange),var(--brand-blue));
    color:#fff;
    padding:24px;
    border-radius:12px 12px 0 0;
  }
  .guest-body{background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:24px;}
  .locked-overlay{
    text-align:center;
    padding:40px 20px;
    color:var(--success);
  }
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;}
  .bar-name{width:270px;flex-shrink:0;white-space:nowrap;}
  .bar-track{flex:1;background:var(--neutral-bg);border-radius:6px;height:10px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:6px;background:var(--primary);}
  .type-label-bar{
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
    background:var(--neutral-bg);
    border-radius:6px;
    padding:7px 10px;
    margin-bottom:10px;
  }
  .type-label-bar .sub{font-weight:400;text-transform:none;letter-spacing:normal;}
  .trend-table{table-layout:fixed;}
  .trend-table th:first-child, .trend-table td:first-child{width:32%;}
  .trend-table th:nth-child(2), .trend-table td:nth-child(2){text-align:center;}
  .trend-table th:last-child, .trend-table td:last-child{width:128px;text-align:center;}
  .trend-table td{vertical-align:top;}
  .trend-table tr.trend-type-row td{
    width:auto !important;
    text-align:left !important;
    background:var(--neutral-bg);
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  @media (max-width:760px){
    .trend-table th:first-child, .trend-table td:first-child{width:auto;}
    .trend-table th:last-child, .trend-table td:last-child{width:104px;}
    .bar-name{width:150px;overflow:hidden;text-overflow:ellipsis;}
  }
  .empty-state{color:var(--text-muted);font-size:13px;padding:20px 0;text-align:center;}

  /* ---------- Мобильная адаптация (телефон оператора) ---------- */
  @media (max-width: 760px){
    .app{flex-direction:column;}
    .sidebar{
      width:100%;
      padding:14px 12px;
      position:sticky; top:0; z-index:10;
      height:auto;
      overflow-y:visible;
    }
    .brand-word{font-size:16px;}
    .sidebar .subtitle{margin-bottom:12px;}
    #roleNav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;}
    .nav-btn{width:auto;white-space:nowrap;margin-bottom:0;}
    .nav-note{display:none;}
    .content{padding:16px;max-width:100%;}
    .page-title{font-size:19px;}
    .grid-cols.cols-3, .grid-cols.cols-2{grid-template-columns:1fr;}
    .checklist-item .row{flex-direction:column;align-items:stretch;}
    .answer-toggle{margin-top:10px;}
    .toggle-btn{flex:1;text-align:center;padding:10px 8px;}
    table{font-size:12px;}
    th,td{padding:8px 5px;}
    .perm-grid{grid-template-columns:1fr;text-align:left;}
    .perm-grid .head{text-align:left;}
    .perm-cell{text-align:left;}
    .guest-shell{max-width:100%;}

    /* На телефоне пояснения под заголовком раздела съедают по 2–3 строки на каждом экране,
       а нужны они только при первом знакомстве — на маленьком экране важнее сами данные. */
    .page-subtitle{display:none;}
    /* Четыре фильтра в строку на телефон не влезают: короткие (тип и регион) оставляем парой,
       поиск по управляющему и точке — на всю ширину, иначе поле становится нечитаемо узким. */
    .filters-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .filters-grid > .filters-wide{grid-column:1 / -1;}
    /* Подсказки внутри подписей фильтров на телефоне тоже лишние */
    .filter-hint{display:none;}

    /* iOS Safari сам приближает страницу, когда фокус попадает в поле со шрифтом меньше 16px,
       и обратно НЕ отдаляет — экран остаётся «уехавшим» за границы. Именно это ловилось на
       комментарии к ответу «Нет» в чек-листе. 16px — порог, ниже которого срабатывает автозум,
       поэтому на телефоне все поля ввода печатают этим размером. Блокировать зум через
       maximum-scale в viewport было бы проще, но это отняло бы у людей возможность увеличить
       текст пальцами — на объекте при ярком солнце это нужно. */
    input, select, textarea{font-size:16px !important;}
  }

  /* ---------- Меню сотрудника: кружок в правом верхнем углу ---------- */
  .user-menu{position:fixed; top:10px; right:12px; z-index:160;}
  .user-avatar{
    width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
    background:linear-gradient(135deg, var(--brand-blue), var(--brand-orange));
    color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .user-avatar:hover{filter:brightness(1.08);}
  /* прозрачная подложка — чтобы меню закрывалось нажатием мимо него */
  .user-menu-backdrop{position:fixed; inset:0; z-index:155; background:transparent;}
  .user-menu-panel{
    position:absolute; top:46px; right:0; min-width:230px;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.18); padding:12px; text-align:left;
  }
  .user-menu-name{font-size:13.5px; font-weight:700; color:var(--text);}
  .user-menu-role{font-size:11.5px; color:var(--text-muted); margin-bottom:10px;}
  .user-menu-item{
    display:block; width:100%; text-align:left; border:none; background:transparent;
    padding:8px 6px; font-size:13px; color:var(--text); cursor:pointer; border-radius:7px;
    font-family:inherit;
  }
  .user-menu-item:hover{background:var(--neutral-bg);}

  /* ---------- Kiosk-режим оператора (рабочий телефон точки, без переключателя ролей) ---------- */
  .kiosk-header{
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:16px 20px;
    position:sticky; top:0; z-index:10;
  }
  .kiosk-point{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;}
  .kiosk-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
  .kiosk-content{padding:20px;max-width:640px;margin:0 auto;}
  .demo-clock-card{
    background:#fffbeb;
    border:1px dashed var(--warning);
    border-radius:12px;
    padding:14px;
    margin-bottom:20px;
  }
  .demo-clock-card .demo-label{font-size:11px;color:var(--warning);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
  .schedule-item{
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    margin-bottom:12px;
    background:var(--card);
  }
  .schedule-item.is-due{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;}
  .schedule-item.is-overdue{border-color:var(--danger);}
  .schedule-item.is-done{opacity:.75;}
  .schedule-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .schedule-item-title{font-size:14.5px;font-weight:700;}
  .schedule-item-sched{font-size:11.5px;color:var(--text-muted);margin-top:3px;}
  .kiosk-demo-toggle{text-align:center;padding:20px 0 8px;}
  .kiosk-demo-toggle a{font-size:11px;color:var(--text-muted);text-decoration:underline;cursor:pointer;}

/* ---------- Блоки в конструкторе чек-листа ---------- */
/* Блок — раздел чек-листа. В шаблоне он не отдельная запись, а общее начало текста у пунктов
   («Территория — Урны чистые»), поэтому рамка здесь чисто визуальная: она показывает, какие
   пункты соберутся в один сворачиваемый раздел при заполнении. */
.tpl-block{
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:8px;
  padding:10px;
  margin-bottom:10px;
  background:var(--bg);
}
.tpl-block-loose{
  border-left-color:var(--border);
  background:transparent;
}
.tpl-block-head{
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:8px;
}
.tpl-block-name{
  flex:1;
  min-width:120px;
  font-weight:700;
}
.tpl-block-name-plain{
  flex:1;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text-muted);
}
.tpl-block-count{
  font-size:11px;
  color:var(--text-muted);
  background:var(--neutral-bg);
  border-radius:10px;
  padding:1px 7px;
  white-space:nowrap;
}

@media (max-width:768px){
  .tpl-block{padding:8px;}
  .tpl-block-head{flex-wrap:wrap;}
  .tpl-block-name{flex:1 1 100%;}
}

/* Ручка перетаскивания пункта. touch-action:none — иначе на телефоне жест уходит
   в прокрутку страницы и пункт не тащится; на самой строке прокрутку не отключаем,
   чтобы список по-прежнему листался пальцем в любом другом месте. */
.tpl-drag{
  flex:0 0 auto;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  color:var(--text-muted);
  font-size:15px;
  line-height:1;
  padding:6px 4px;
  text-align:center;
}
.tpl-drag:active{cursor:grabbing;}
.tpl-item{border-radius:6px;}
.tpl-item.tpl-dragging{
  background:var(--neutral-bg);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  opacity:.85;
}

@media (max-width:768px){
  /* палец толще курсора — ручке нужна площадь побольше */
  .tpl-drag{font-size:19px;padding:10px 9px;}
}