/* Дизайн-система бэк-офиса Polden.
   Токены — из хендоффа дизайнера (design/design_handoff_payroll_backoffice/README.md).
   Прямоугольная эстетика: радиусы 0 везде, теней нет кроме боковой панели. */

:root {
  --app-bg:#faf9f6; --card:#fff; --rail-bg:#faf9f6; --app-border:#d5d4cd;
  --ink:#17171a; --text:#2c2c28; --dim:#7c7b73; --faint:#a9a89e;
  --line:#eeede6; --line-soft:#f2f1ea; --line-strong:#d5d4cd;
  --ok:#0a5c3e; --ok-dim:#4a6b5c; --ok-bg:#eef5f1; --ok-line:#dbe7e0;
  --warn:#8a6d1c; --warn-bg:#fdf8e8;
  --block:#a32b23; --block-bg:#fdeceb;
  --input-border:#cfcec6; --input-bg:#fff;
  --hover:#f4f3ec; --bar:#17171a; --bar-soft:#b8c9c0;
}
[data-theme="dark"] {
  --app-bg:#161618; --card:#1d1d20; --rail-bg:#141416; --app-border:#2a2a2c;
  --ink:#e6e6df; --text:#c9c9c2; --dim:#8f8e86; --faint:#6f6f68;
  --line:#26262a; --line-soft:#222226; --line-strong:#333338;
  --ok:#5fae8b; --ok-dim:#7d9c8c; --ok-bg:#182420; --ok-line:#26382f;
  --warn:#d9b44a; --warn-bg:#282314;
  --block:#c0554a; --block-bg:#2a1a1a;
  --input-border:#3a3a3e; --input-bg:#141416;
  --hover:#1f1f22; --bar:#c9c9c2; --bar-soft:#3f5a4d;
  color-scheme: dark;
}

/* Смена темы: новая тема заливает страницу кругом из точки клика.
   Штатный кроссфейд обоих снимков гасим — движение ведёт clip-path
   из setTheme() в base.html, иначе две анимации дерутся и цвет мутнеет.
   Псевдоэлементы ::view-transition-* под `*` не попадают, радиус 0 их не трогает. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

* { box-sizing: border-box; border-radius: 0 !important; }
html, body { margin:0; padding:0; }
body {
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background:var(--app-bg); color:var(--text); font-size:13px; line-height:1.45;
  min-width:1180px;
}
a { color:var(--ok); text-decoration:none; }
a:hover { text-decoration:underline; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align:right; white-space:nowrap; }

/* ─────────────────────────────────────────────────────── каркас */
.app { display:flex; width:100%; max-width:1600px; min-height:100vh; margin:0 auto;
       border-left:1px solid var(--app-border); border-right:1px solid var(--app-border); }
.rail {
  width:196px; flex:0 0 196px; background:var(--rail-bg); border-right:1px solid var(--line-strong);
  padding:18px 0; display:flex; flex-direction:column; gap:1px; position:sticky; top:0; height:100vh;
}
.rail .logo { padding:0 16px 18px; font-size:12px; letter-spacing:.14em; color:var(--ink); font-weight:700; }
.rail .logo small { display:block; color:var(--faint); font-weight:400; letter-spacing:.1em; }
.rail a.nav { display:block; font-size:13px; padding:8px 16px; color:var(--dim); border-left:2px solid transparent; }
.rail a.nav:hover { background:var(--hover); color:var(--text); text-decoration:none; }
.rail a.nav.on { color:var(--ink); background:var(--hover); border-left-color:var(--ok); font-weight:500; }
.rail .foot { margin-top:auto; padding:14px 16px 0; border-top:1px solid var(--line); color:var(--faint); font-size:11px; }
.rail .foot .sw { color:var(--dim); cursor:pointer; }
.rail .foot .sw.on { color:var(--ink); border-bottom:2px solid var(--ink); }

.main { flex:1; padding:20px 24px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.employee-shell { max-width:1180px; border-left:1px solid var(--app-border); }
.employee-shell .main { padding:18px 22px; }
.employee-topbar { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line);
                  padding-bottom:14px; color:var(--dim); font-size:12px; letter-spacing:.08em;
                  text-transform:uppercase; position:relative; }
.employee-topbar small { color:var(--faint); }
.identity-mark { color:var(--ink); letter-spacing:0; text-transform:none; max-width:220px;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:start; }
.portal-card { border:1px solid var(--line); background:var(--card); padding:14px 16px; }
.request-row form { margin:0; }
.request-form-fields { display:grid; gap:10px; }
.request-form-fields .f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.request-form-fields input, .request-form-fields select { width:100%; box-sizing:border-box; }
.request-form-fields .date-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.request-form-fields .btn { justify-self:start; }
.request-days { color:var(--dim); font-size:12px; }
.person-sidebar form { display:grid; gap:8px; }
.person-sidebar form .row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
                            gap:8px; align-items:end; margin-top:0 !important; }
.person-sidebar form .f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.person-sidebar form input, .person-sidebar form select { width:100% !important; min-width:0; }
.person-sidebar form .btn { justify-self:start; margin-top:0 !important; }
.person-sidebar form p { margin:4px 0 0; }

.queue-grid { display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start; }
.request-link { display:block; padding:8px 10px; border-bottom:1px solid var(--line-soft); color:var(--text); }
.request-link:hover, .request-link.on { background:var(--hover); text-decoration:none; }
.request-link span { display:block; color:var(--dim); font-size:12px; margin-top:2px; }
.head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
h1 { font-size:22px; font-weight:500; color:var(--ink); margin:0; letter-spacing:.02em; }
.crumb { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.sub { color:var(--dim); font-size:12.5px; }
.spacer { flex:1; }

/* ─────────────────────────────────────────────────── типографика */
.label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.muted { color:var(--dim); }
.faint { color:var(--faint); }
h2 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
     font-weight:500; margin:0 0 8px; }

/* ─────────────────────────────────────────────────── полоса итогов */
.totals { display:flex; gap:0; border:1px solid var(--line); background:var(--card); }
.totals .item { padding:10px 16px; border-right:1px solid var(--line); min-width:120px; }
.totals .item:last-child { border-right:0; }
.totals .item.right { margin-left:auto; text-align:right; border-right:0; border-left:1px solid var(--line); }
.totals .v { font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; }
.totals .item.warn .v { color:var(--warn); }
.totals .item.block .v { color:var(--block); }
.totals .item.ok .v { color:var(--ok); }
.totals .item.muted .v { font-size:13px; color:var(--dim); }
.totals .sub { font-size:11.5px; color:var(--dim); margin-top:2px; }
.totals .item.warn .sub { color:var(--warn); }

/* ─────────────────────────────────────────────────────── таблицы */
table { border-collapse:collapse; width:100%; background:var(--card); }
th { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
     font-weight:500; text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-strong); }
th a { color:var(--dim); }
td { padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
tbody tr:hover { background:var(--hover); }
tr.warn td { background:var(--warn-bg); }
tr.block td { background:var(--block-bg); }
tr.muted td { color:var(--faint); }
tr.sel td { background:var(--hover); }
tr.sel td:first-child { border-left:2px solid var(--ok); }
tr.total td { border-top:1px solid var(--line-strong); border-bottom:0; color:var(--ink); }
td.wrap { white-space:normal; }
td.over, .over { color:var(--warn); }
.scroll { overflow:auto; border:1px solid var(--line); }

/* ─────────────────────────────────────────────────── бейджи, флаги */
.badge { display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
         padding:3px 8px; border:1px solid transparent; font-weight:500; }
.badge.draft { color:var(--warn); background:var(--warn-bg); }
.badge.approved, .badge.active { color:var(--ok); background:var(--ok-bg); }
.badge.terminated { color:var(--dim); background:var(--line); }
.badge.invoice { color:var(--text); background:var(--line); }
.badge.block { color:var(--block); background:var(--block-bg); }
.flag { display:block; font-size:12px; color:var(--warn); }
.flag.block { color:var(--block); font-weight:500; }
.flag.done { color:var(--faint); text-decoration:line-through; }
.chip { display:inline-block; padding:5px 11px; font-size:12px; border:1px solid var(--line-strong);
        color:var(--dim); margin-right:-1px; }
.chip:hover { text-decoration:none; background:var(--hover); }
.chip.on { background:var(--ink); color:var(--app-bg); border-color:var(--ink); }

/* ───────────────────────────────────────────── кнопки и формы */
.btn { display:inline-block; font-family:inherit; font-size:12.5px; padding:7px 14px; cursor:pointer;
       border:1px solid var(--line-strong); background:var(--card); color:var(--text); }
.btn:hover { background:var(--hover); text-decoration:none; }
.btn.primary { background:var(--ok); border-color:var(--ok); color:#fff; }
[data-theme="dark"] .btn.primary { color:#10201a; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { color:var(--block); border-color:var(--block); }
.btn[disabled], .btn.off { color:var(--faint); border-color:var(--line); cursor:not-allowed; background:var(--card); }
input, select, textarea {
  font-family:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--ok); outline-offset:-1px; }
form.row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
form.row .f { display:flex; flex-direction:column; gap:3px; }
.card { border:1px solid var(--line); background:var(--card); padding:14px 16px; }
.card h2 { margin-top:0; }

/* ───────────────────────────────────────── инлайн-сообщения */
.note { border-left:3px solid var(--warn); background:var(--warn-bg); color:var(--warn);
        padding:8px 12px; font-size:12.5px; }
.note.block { border-left-color:var(--block); background:var(--block-bg); color:var(--block); }
.note.ok { border-left-color:var(--ok); background:var(--ok-bg); color:var(--ok); }
.note + .note { margin-top:-1px; }

/* ─────────────────────────────────────────── боковая панель разбора */
.split { display:flex; gap:0; align-items:flex-start; }
.split .list { flex:1; min-width:0; }
.split.open .list { opacity:.72; }
.panel { width:560px; flex:0 0 560px; border-left:1px solid var(--line-strong); background:var(--card);
         box-shadow:-14px 0 28px rgba(0,0,0,.08); padding:16px 18px; position:sticky; top:20px; }
.panel h3 { font-size:17px; font-weight:500; color:var(--ink); margin:0 0 2px; }
.panel .close { float:right; color:var(--dim); }

/* ────────────────────────────────────────── календарь отсутствий */
.cal { display:grid; grid-template-columns:repeat(31, 1fr); gap:1px; min-width:340px; }
.cal i { display:block; height:18px; background:var(--line-soft); font-style:normal; }
.cal i.we { background:var(--line); }
.cal i.vacation, .legend i.vacation { background:#e8d9a8; }
.cal i.sick, .legend i.sick { background:#c9d6dd; }
.cal i.unpaid, .legend i.unpaid { background:#ddd8cf; }
.calendar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.calendar-head h2 { margin:0; }
.month-nav .chip { margin:0; padding:3px 9px; }
.month-nav-row { display:flex; align-items:center; justify-content:space-between; gap:16px; row-gap:6px; flex-wrap:wrap; }
.month-nav-group { display:flex; align-items:center; gap:8px; row-gap:6px; flex-wrap:wrap; }
.month-label { min-width:44px; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:500; }
.legend { display:flex; align-items:center; gap:14px; margin-bottom:10px; color:var(--dim); font-size:12px; }
.legend-key { display:inline-flex; align-items:center; gap:5px; }
.legend i { display:inline-block; width:12px; height:12px; border:1px solid var(--line); }

/* ─────────────────────────────────────────────────── график */
.bars { display:flex; align-items:flex-end; gap:10px; height:150px; }
.bars .b { flex:1; background:var(--bar-soft); position:relative; }
.bars .b b { position:absolute; top:-16px; left:0; right:0; text-align:center; font-size:11px;
             font-weight:400; color:var(--dim); }
.bars .b span { position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:11px;
                color:var(--faint); }

/* ─────────────────────────────────────────────── кабинет: навигация */
.employee-brand { color:var(--ink); font-weight:700; letter-spacing:.14em; }
.employee-brand small { font-weight:400; letter-spacing:.1em; }
.employee-nav { display:flex; gap:28px; position:absolute; left:50%; top:50%;
                transform:translate(-50%, -50%); }
.employee-nav a { color:var(--dim); text-transform:none; font-size:14px; font-weight:500;
                  padding-bottom:4px; border-bottom:2px solid transparent; }
.employee-nav a:hover { color:var(--ink); text-decoration:none; }
.employee-nav a.on { color:var(--ink); border-bottom-color:var(--ok); }

/* ─────────────────────────────────────────────── процентовки: формы */
.allocation-form { display:flex; flex-direction:column; gap:10px; }
.allocation-row { display:grid; grid-template-columns:1fr 130px auto; gap:8px; align-items:center; }
.allocation-row input { width:100%; box-sizing:border-box; }
.allocation-readonly { display:flex; justify-content:space-between; gap:12px;
                       padding:6px 0; border-bottom:1px solid var(--line-soft); }
#allocation-total { color:var(--dim); font-variant-numeric:tabular-nums; }
.project-picker { position:relative; }
.project-picker-input { width:100%; box-sizing:border-box; }
.project-picker-list {
  position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:20;
  background:var(--card); border:1px solid var(--line-strong);
  max-height:220px; overflow-y:auto; box-shadow:0 6px 16px rgba(0,0,0,.1);
}
.project-picker-option { padding:7px 10px; font-size:13px; cursor:pointer; }
.project-picker-option:hover, .project-picker-option.active { background:var(--hover); }
.project-picker-empty { padding:7px 10px; font-size:12.5px; color:var(--faint); }
.participant-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
                      gap:4px 12px; margin-bottom:10px; }
.participant-picker label { display:flex; gap:6px; align-items:center; font-size:13px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end;
           padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line-strong); }
.participant-row { display:flex; align-items:center; gap:10px; padding:8px 0;
                   border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.participant-row > span { min-width:0; overflow-wrap:anywhere; }
.participant-row form { display:flex; gap:6px; align-items:center; }
.participant-row form:first-of-type { margin-left:auto; }
.participant-row.status-submitted > span { color:var(--ok); }
.participant-row.status-draft > span,
.participant-row.status-returned > span { color:var(--warn); }
.participant-row.status-excluded > span { color:var(--faint); }
.participant-row .flag { display:inline-block; background:var(--warn-bg); color:var(--warn);
                         padding:2px 8px; border-radius:2px; font-size:11px; font-weight:500;
                         cursor:help; }

/* ──────────────────────────────────────── лид-утверждение: процентовки */
.alloc-card { border:1px solid var(--line); margin-bottom:12px; }
.alloc-card:last-child { margin-bottom:0; }
.alloc-card-head { display:flex; align-items:center; gap:10px; padding:10px 12px;
                    border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.alloc-card-head form { display:flex; gap:6px; align-items:center; }
.alloc-card-head form:first-of-type { margin-left:auto; }
.alloc-table { width:auto; max-width:100%; margin:0; }
.alloc-table td:first-child { overflow-wrap:anywhere; word-break:break-word; }
.alloc-table tr:last-child td { border-bottom:0; }

/* ──────────────────────────────────────────────── орг структура */
.badge.dept { color:var(--dim); background:var(--line-soft); font-weight:400; letter-spacing:.04em; }
.org-tree { display:flex; flex-direction:column; }
.org-branch > summary,
.org-leaf { display:flex; align-items:baseline; padding:8px 4px; border-bottom:1px solid var(--line-soft); }
.org-branch > summary { cursor:pointer; list-style:none; }
.org-branch > summary:hover, .org-leaf:hover { background:var(--hover); }
.org-branch > summary::-webkit-details-marker { display:none; }
.org-branch > summary::before { content:"▾"; display:inline-block; width:16px; flex:0 0 auto;
                                 color:var(--dim); }
.org-branch:not([open]) > summary::before { content:"▸"; }
.org-leaf::before { content:""; display:inline-block; width:16px; flex:0 0 auto; }
.org-children { margin-left:8px; padding-left:15px; border-left:1px solid var(--line); }
.org-node { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.org-name { color:var(--ink); }
.org-role { color:var(--dim); font-size:12.5px; }
.org-email { font-size:12px; }
.org-count { font-size:11.5px; }

/* ──────────────────────────────────────────────────────── вход */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center;
                background:var(--app-bg); }
.login-card { border:1px solid var(--line); background:var(--card); padding:32px 36px;
              display:flex; flex-direction:column; gap:14px; align-items:flex-start; min-width:280px; }
.login-card .btn { align-self:stretch; text-align:center; }