/* ---------------------------------------------------------------------------
   gekon.css — один язык оформления для всех страниц конторы.

   До этого файла каждая из четырнадцати страниц несла собственную копию
   палитры, шапки, кнопок и таблиц. Они расходились: шапка на отчёте была
   на два пиксела ниже, чем на людях, а кнопка «сохранить» на трёх страницах
   имела три разных радиуса. Теперь определение одно.

   ЧТО ЭТО ЗА ВИД
   Прямой угол, тёплый серый, волосяная линия в один пиксел, плотная таблица,
   строка состояния — язык деловой программы, который сложился к концу
   девяностых и с тех пор ничем не был улучшен для таблиц с числами.
   Поверх него — настоящая типографика, воздух, состояния наведения и
   фокуса. Ни одного градиента: синий в системе ровно один.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ
   Страница подключает этот файл ПОСЛЕ своего <style>. Значит при равной
   силе селектора выигрывает он, а собственные правила страницы, у которых
   в селекторе есть класс, продолжают выигрывать у него. Это и нужно:
   общий вид отсюда, частности — со страницы.
   --------------------------------------------------------------------------- */

:root {
  /* Синий один на всю систему — фирменный. */
  --navy:#1E2A4A; --navy-hi:#2B3C66; --navy-tint:#EBEEF4;

  /* Текст: три ступени и не больше. */
  --ink:#171B23; --ink2:#4C5462; --grey:#6A7280;

  /* Поверхности: тёплый серый — прямой потомок того самого #d4d0c8. */
  --bg:#F5F4F1; --card:#FFFFFF; --face:#ECEAE5; --face2:#E3E1DA;

  /* Линии: одна видимая, одна почти нет — внутри данных. */
  --line:#D6D3CA; --line2:#E9E7E0;

  /* Смысловые. Приглушены намеренно: в таблице их много. */
  --ok:#2E6A40; --warn:#8F6510; --bad:#A03428; --err:#A03428;

  --r:2px;
  --shadow:0 10px 30px rgba(23,27,35,.16);
  --ui:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 14px/1.55 var(--ui);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { font-weight:600; text-wrap:balance; }
h1 { font-size:19px; }
h2 { font-size:15px; }

/* Числа выравниваются по разряду везде, где их печатают колонкой. */
.n, .num, td.right, th.right, .money, [data-num] { font-variant-numeric:tabular-nums; }
.mono, code { font-family:var(--mono); font-variant-numeric:tabular-nums; }

a { color:var(--navy); }

/* --- шапка: одна синяя полоса, вкладки внутри неё -------------------------- */
header {
  background:var(--navy); color:#fff;
  padding:12px 20px 10px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
header b { font-size:15px; font-weight:600; letter-spacing:.01em; }
header .sp { flex:1; }
header small { opacity:.72; font-size:12px; }
header a { color:#fff; opacity:.8; font-size:13px; text-decoration:none; }
header a:hover { opacity:1; text-decoration:underline; }
header button {
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.38);
  border-radius:var(--r); padding:5px 11px; cursor:pointer; font:inherit; font-size:13px;
}
header button:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); }
header button:focus-visible { outline:2px solid #fff; outline-offset:1px; }

nav {
  background:var(--navy); display:flex; gap:2px; padding:0 14px;
  overflow-x:auto; scrollbar-width:none;
}
nav::-webkit-scrollbar { display:none; }
nav a {
  color:#C3CCDF; text-decoration:none; padding:7px 11px 8px; font-size:13px;
  white-space:nowrap; border-bottom:2px solid transparent;
}
nav a:hover { color:#fff; background:#27345A; }
nav a[aria-current] { color:#fff; font-weight:500; border-bottom-color:#fff; box-shadow:none; }
nav a:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
nav[hidden] { display:none !important; }

/* --- полотно --------------------------------------------------------------- */
main { max-width:1280px; margin:18px auto; padding:0 20px 60px; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px;
}

.signin { max-width:460px; margin:9vh auto; }
.signin h1 { font-size:19px; margin:0 0 6px; }
.signin p { color:var(--grey); margin:0 0 18px; font-size:14px; }

.step { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.step:first-of-type { margin-top:0; padding-top:0; border-top:0; }

.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.bar .muted { font-size:13px; }
/* Ряд органов управления. Почти всегда каждая ячейка устроена одинаково —
   подпись сверху, поле снизу, — поэтому выравнивание по НИЖНЕМУ краю: кнопка
   без подписи при выравнивании по центру повисает на середине поля ввода, и
   весь ряд выглядит рассыпанным. Ряд, сложенный из текста, а не из полей,
   помечается .mid и выравнивается по центру, как раньше. */
.row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.row.mid { align-items:center; }

/* --- органы управления ------------------------------------------------------
   Кнопка больше не выпуклая. От прежнего объёма остался один волосяной
   блик сверху — ровно столько, чтобы читалось «на это можно нажать». */
button, .btn { font-family:var(--ui); }

button.primary {
  background:var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius:var(--r); padding:9px 16px; font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit;
}
button.primary:hover:not(:disabled) { background:var(--navy-hi); border-color:var(--navy-hi); }
button.primary:disabled { opacity:.42; cursor:default; }

button.ghost {
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 14px; font-size:13.5px; cursor:pointer;
  font-family:inherit; box-shadow:inset 0 1px 0 #fff;
}
button.ghost:hover { background:var(--navy-tint); border-color:#BFC4D1; }

button.danger {
  background:var(--card); color:var(--bad); border:1px solid #E0BDB8;
  border-radius:var(--r); padding:8px 14px; font-size:13.5px; cursor:pointer;
  font-family:inherit;
}
button.danger:hover { background:#FBF1EF; }

button.small { padding:4px 9px; font-size:12.5px; border-radius:var(--r); }

button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline:2px solid var(--navy); outline-offset:1px;
}

/* Выбор из нескольких: выбранное заливается, а не обводится. */
.counts button, .quick button {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 13px; cursor:pointer; font:inherit; font-size:13.5px; text-align:left;
  box-shadow:inset 0 1px 0 #fff; color:var(--ink);
}
.counts button:hover, .quick button:hover { background:var(--navy-tint); border-color:#BFC4D1; }
.counts button[aria-pressed="true"], .quick button[aria-pressed="true"] {
  background:var(--navy); border-color:var(--navy); color:#fff; font-weight:500; box-shadow:none;
}
.counts button[aria-pressed="true"] * { color:inherit; }

/* Поле ввода: призрак утопленной рамки — одна тень сверху, и всё. */
/* :where() обнуляет вес селектора. Значит это правило задаёт вид поля по
   умолчанию, но любое правило страницы с классом — input.rate, input.code,
   .bar select — выигрывает у него без борьбы и остаётся компактным. */
:where(input[type=email], input[type=text], input[type=date], input[type=search],
       input[type=number], input[type=tel], select, textarea) {
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; font-family:inherit; background:var(--card); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(23,27,35,.06);
}
/* Поле даты не должно растягиваться на пол-экрана: в нём всегда ровно
   десять знаков, и коробка шириной 576 px просто шумит. Вес нулевой, так что
   страница переопределит это одним словом, если ей правда нужно шире. */
:where(input[type=date], input[type=time]) { width:170px; }

:where(input, select, textarea):focus {
  outline:2px solid var(--navy); outline-offset:-1px; border-color:var(--navy);
}
:where(input, select):disabled { background:#F1F0EC; color:var(--grey); }

label.field {
  display:block; font-size:11px; color:var(--grey); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}

/* --- ряд полей в сетке -------------------------------------------------------
   У одного поля подпись влезает в строку, у соседнего переносится на две — и
   поле соседа опускается ниже на одну строку. Ряд из четырёх полей от этого
   выглядит рассыпанным, и именно это видно на «Правилах оплаты» и на «Когда
   поднимать тревогу». Подпись всегда занимает по высоте две строки, поэтому
   все поля ряда начинаются на одной линии; подписи с одной строкой при этом
   остаются прижатыми к верху своей ячейки, рядом с заголовком колонки.
   Подпись, внутри которой лежит сама галочка, не трогаем: там высота ни на
   что не влияет, а лишние восемнадцать пикселей разрывают строку пополам.
   Браузер без :has() просто не применит правило и увидит то, что было. */
.grid2 > * > label:not(:has(input)), .fld > label:not(:has(input)) { min-height:3.1em; }

/* Растянуть поле на всю ячейку ряда: у текстового input своей ширины нет, и
   без этого «примечание» на пол-экрана стоит коробкой в 200 px. */
.row .wide { flex:1; min-width:0; }
.row .wide > input, .row .wide > select, .row .wide > textarea { width:100%; }

/* --- таблицы ----------------------------------------------------------------
   Плотность взята у деловых программ конца девяностых и не смягчена:
   когда строк восемьдесят, воздух между ними — это лишняя прокрутка. */
table.roster, table.pay, table.list, table.lab, table.acc,
table.days, table.tt {
  width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
table.roster th, table.pay th, table.list th, table.lab th, table.acc th,
table.days th, table.tt th {
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink2); background:var(--face2);
  padding:8px 11px; white-space:nowrap;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
table.roster th:last-child, table.pay th:last-child, table.list th:last-child,
table.lab th:last-child, table.acc th:last-child,
table.days th:last-child, table.tt th:last-child { border-right:0; }
table th.right, table td.right, th.n, td.n { text-align:right; }
table th.ctr,   table td.ctr   { text-align:center; }
/* Цифры в колонке обязаны стоять одна под другой: без табличных цифр «1 Jun»
   и «29 Sep» разъезжаются на полсимвола, и колонка перестаёт читаться
   столбиком. Раньше это стояло только на странице людей. */
table td.right, table td.n, table td.ctr { font-variant-numeric:tabular-nums; }
table th { vertical-align:middle; }

table.roster td, table.pay td, table.list td, table.lab td, table.acc td,
table.days td, table.tt td {
  padding:8px 11px; border-bottom:1px solid var(--line2); vertical-align:middle;
}
table.roster tr:last-child td, table.pay tr:last-child td,
table.list tr:last-child td, table.acc tr:last-child td { border-bottom:0; }
table.roster tr:hover td, table.list tr:hover td, table.acc tr:hover td { background:var(--navy-tint); }
table.roster .nm { font-weight:500; }
table.roster img.th { border-radius:var(--r); border:1px solid var(--line); background:#EDEFF3; }

/* --- плашки: квадрат с волосяной рамкой, а не цветная таблетка ------------- */
.pill {
  display:inline-block; font-size:11px; font-weight:600; padding:2px 7px;
  border-radius:var(--r); border:1px solid var(--line); background:var(--face);
  letter-spacing:.02em; white-space:nowrap; color:var(--ink2);
}
.pill.OK       { background:#EDF5EF; border-color:#BDD6C4; color:var(--ok); }
.pill.SOON,
.pill.NO_DATE  { background:#FCF7E9; border-color:#E3D2AB; color:var(--warn); }
.pill.PENDING  { background:#FBF3E4; border-color:#E0CCA4; color:#8A4B00; }
.pill.EXPIRED,
.pill.NO_CARD  { background:#FBF1EF; border-color:#E0BDB8; color:var(--bad); }
.pill.INACTIVE { background:var(--face); border-color:var(--line); color:var(--grey); }
/* Уволен — это не «просто неактивен»: решение принял человек, и оно
   записано вместе с датой и именем. Поэтому отдельная плашка, темнее
   INACTIVE, но без красного: увольнение — не авария. */
.pill.DISMISSED { background:var(--face2, var(--face)); border-color:#C9CEDA; color:#4A5468; }
.pill.role     { background:var(--navy-tint); border-color:#C4CCDE; color:var(--navy); }

/* --- мелочь ---------------------------------------------------------------- */
.muted { color:var(--grey); font-size:13px; }
.note  { color:var(--ink2); font-size:13px; }
.empty { color:var(--grey); font-size:14px; padding:14px 0; }
.big   { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
#msg, #sigmsg { margin:14px 0; font-size:14px; }
#msg.err, #sigmsg.err { color:var(--bad); }
#msg.ok,  #sigmsg.ok  { color:var(--ok); }
[hidden] { display:none !important; }
hr { border:0; border-top:1px solid var(--line); margin:18px 0; }

/* --- подсказки --------------------------------------------------------------
   Знак вопроса рядом с заголовком колонки. Он появился потому, что владелец
   посмотрел на колонку «Card» и не понял, что это. Квадрат, а не кружок —
   в этой системе круглых форм нет. */
.tipq {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--card); color:var(--grey);
  font-size:10px; font-weight:700; line-height:1; cursor:help;
  margin-left:5px; vertical-align:middle; user-select:none; flex:0 0 auto;
  font-family:inherit;
}
.tipq:hover, .tipq.on { background:var(--navy); border-color:var(--navy); color:#fff; }

/* --- переключатель второго языка ---------------------------------------------
   Английский — база страницы и не переключается. Эти две кнопки решают, на
   каком языке человек читает объяснения: испанский для бригад, русский для
   конторы и русскоязычных субподрядчиков. Выбор один на все страницы. */
.l2pick { display:inline-flex; gap:0; margin-right:10px; }
.l2pick button {
  font:600 11px/1 var(--mono); letter-spacing:.06em; padding:5px 8px; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.22); border-radius:0;
}
.l2pick button:first-child { border-radius:var(--r) 0 0 var(--r); }
.l2pick button:last-child  { border-radius:0 var(--r) var(--r) 0; }
/* Кнопок стало три, и правило «убрать левую рамку у последней» оставляло
   двойную линию между первой и средней. Убираем её у каждой, кроме первой. */
.l2pick button + button { border-left:0; }
.l2pick button[aria-pressed="true"] { background:rgba(255,255,255,.92); color:var(--navy); }
.l2pick button:hover { color:#fff; }
.l2pick button[aria-pressed="true"]:hover { color:var(--navy); }
.tipq:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
#tip {
  position:fixed; z-index:9999; max-width:310px;
  background:var(--navy); color:#fff; padding:10px 12px; border-radius:var(--r);
  font-size:12.5px; line-height:1.5; font-weight:400; text-align:left;
  white-space:normal; box-shadow:var(--shadow); pointer-events:none;
}
#tip .es { display:block; margin-top:6px; opacity:.78; font-style:normal; }
#tip[hidden] { display:none !important; }

/* --- диалог ---------------------------------------------------------------- */
dialog {
  border:1px solid var(--line); border-top:2px solid var(--navy);
  border-radius:var(--r); padding:0; box-shadow:var(--shadow);
  background:var(--card); color:var(--ink); font-family:var(--ui);
}
dialog::backdrop { background:rgba(23,27,35,.34); }

/* --- строка состояния: внизу панели, поделена на ячейки -------------------- */
.statusbar {
  display:flex; flex-wrap:wrap; border-top:1px solid var(--line);
  background:var(--face); font-size:12px; color:var(--ink2);
}
.statusbar > * { padding:7px 12px; border-right:1px solid var(--line); }
.statusbar > :first-child { flex:1 1 210px; }
.statusbar > :last-child { border-right:0; }
.statusbar b { font-weight:500; color:var(--ink); }

/* --- узкий экран ------------------------------------------------------------ */
@media (max-width:760px) {
  /* На телефоне широкая таблица должна прокручиваться сама, а не тащить за
     собой всю страницу: иначе бригадир, открывший отчёт в машине, возит
     пальцем шапку и заголовок вместе с числами. display:block делает из
     таблицы обычный блок с прокруткой; внутренняя раскладка колонок при
     этом сохраняется. */
  table.roster, table.list, table.pay, table.lab, table.acc,
  table.days, table.tt, table.crew {
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  header { padding:10px 16px 8px; gap:10px 14px; }
  nav { padding:0 16px; }
  main { margin:14px auto; padding:0 16px 48px; }
  .card { padding:14px 16px; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* --- печать ----------------------------------------------------------------- */
@media print {
  header, nav, .bar, button { display:none !important; }
  body { background:#fff; }
  main { max-width:none; margin:0; padding:0; }
  .card { border:0; padding:0; }
}