/* ui.css — общий стиль страниц CRM.
   Основа — DESIGN.md «Custom Style» (docs/DESIGN-CRM.md): нейтральная палитра, основной цвет клиента, шрифт Inter,
   кнопки-пилюли, поля со скруглением, лёгкие тени, раскладка «линейки» (вертикальные линии по краям колонки
   и линия между секциями).

   Цвета НЕ зашиты: их задаёт фирменный стиль клиента (панель управления → «Фирменный стиль»: основной, тёмный и фон →
   lib/palette.js) или clients/<id>/client.json. Сервер подставляет их вместо меток theme.* и dark.*;
   производные оттенки (карточки, обводка фокуса, линии) считает lib/template.js — метки ui.* и uidark.*.
   Скругления можно переопределить из панели: сервер добавляет в страницу --radius-btn и --radius-win (RADIUS_CSS).

   Страницы подключают файл первым (<link rel="stylesheet" href="/ui.css">), свои правила пишут после него и берут цвета
   только из переменных ниже. Прежние имена переменных (--paper, --ink, --accent …) оставлены для общего кода. */

/* ---------- шрифт ---------- */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- цвета и размеры ---------- */
:root{
  color-scheme: light;
  --background:#F3F2F2; --foreground:#201E1D;
  --card:#FBFBFB; --card-foreground:#201E1D;
  --popover:#FBFBFB; --popover-foreground:#201E1D;
  --muted:#EAE9E9; --muted-2:#E3E1E1; --muted-foreground:#605D5D;
  --subtle:#F3F2F2;
  --border:#D7D3D3; --input:#D7D3D3; --rule:rgba(32,30,29,0.1);
  --primary:#EC3013; --primary-foreground:#F3F2F2; --primary-hover:#ED533B;
  --primary-soft:rgba(236,48,19,0.1); --ring:rgba(236,48,19,0.3); --today:rgba(236,48,19,0.06);
  --destructive:#EC3013; --destructive-soft:#FFE0D9;
  /* смысловые цвета: не зависят от бренда (статусы, отметки табеля, сигналы) */
  --info:#1d4ed8; --info-soft:#eff6ff;
  --warning:#b45309; --warning-soft:#fffbeb;
  --success:#15803d; --success-soft:#f0fdf4;
  --violet:#6d28d9; --violet-soft:#f5f3ff;
  --overlay:rgba(0,0,0,.45);
  /* форма */
  --radius-btn:999px; --radius-field:22px; --radius-win:18px; --radius-sm:12px; --radius-xs:8px;
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter:24px; --page-max:70rem; --page-inset:0px;
  /* прежние имена (код страниц, общие скрипты, значки ui.svg) */
  --paper:var(--background); --surface:var(--card); --surface-2:var(--muted); --ink:var(--foreground); --ink-soft:var(--muted-foreground);
  --line:var(--border); --accent:var(--primary); --accent-ink:var(--primary-foreground); --accent-dark:var(--primary-hover);
  --accent-soft:var(--primary-soft); --danger:var(--destructive); --danger-soft:var(--destructive-soft);
  --font-sans:var(--font); --font-label:var(--font);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --background:#1A1817; --foreground:#F3F2F2;
    --card:#242120; --card-foreground:#F3F2F2;
    --popover:#242120; --popover-foreground:#F3F2F2;
    --muted:#2C2827; --muted-2:#3A3635; --muted-foreground:#A8A4A3;
    --subtle:#282524;
    --border:#3A3635; --input:#3A3635; --rule:rgba(243,242,242,0.1);
    --primary:#FF5B3F; --primary-foreground:#201E1D; --primary-hover:#D64F38;
    --primary-soft:rgba(255,91,63,0.16); --ring:rgba(255,91,63,0.4); --today:rgba(255,91,63,0.08);
    --destructive:#FF5B3F; --destructive-soft:rgba(255,91,63,.18);
    --info:#93c5fd; --info-soft:rgba(59,130,246,.16);
    --warning:#fcd34d; --warning-soft:rgba(245,158,11,.16);
    --success:#86efac; --success-soft:rgba(34,197,94,.15);
    --violet:#c4b5fd; --violet-soft:rgba(139,92,246,.18);
    --overlay:rgba(0,0,0,.6);
    --shadow-xs:0 1px 2px 0 rgba(0,0,0,.3);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --background:#1A1817; --foreground:#F3F2F2;
  --card:#242120; --card-foreground:#F3F2F2;
  --popover:#242120; --popover-foreground:#F3F2F2;
  --muted:#2C2827; --muted-2:#3A3635; --muted-foreground:#A8A4A3;
  --subtle:#282524;
  --border:#3A3635; --input:#3A3635; --rule:rgba(243,242,242,0.1);
  --primary:#FF5B3F; --primary-foreground:#201E1D; --primary-hover:#D64F38;
  --primary-soft:rgba(255,91,63,0.16); --ring:rgba(255,91,63,0.4); --today:rgba(255,91,63,0.08);
  --destructive:#FF5B3F; --destructive-soft:rgba(255,91,63,.18);
  --info:#93c5fd; --info-soft:rgba(59,130,246,.16);
  --warning:#fcd34d; --warning-soft:rgba(245,158,11,.16);
  --success:#86efac; --success-soft:rgba(34,197,94,.15);
  --violet:#c4b5fd; --violet-soft:rgba(139,92,246,.18);
  --overlay:rgba(0,0,0,.6);
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.3);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.4);
}

/* ---------- основа ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body{ margin:0; min-height:100%; }
body{
  background:var(--background); color:var(--foreground); font-family:var(--font);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11";
}
body:has(> .rulers){ display:flex; flex-direction:column; min-height:100vh; }
button, input, select, textarea{ font-family:inherit; }
[hidden]{ display:none !important; }
::selection{ background:var(--primary-soft); }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.ico{ width:16px; height:16px; display:inline-block; vertical-align:middle; flex-shrink:0; overflow:visible; }
.num, .tabular{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted-foreground); }

/* ---------- раскладка «линейки» ---------- */
.rulers{ --page-max:70rem; position:relative; display:flex; flex-direction:column; flex:1 0 auto; min-width:0; }
.rulers.wide{ --page-max:1840px; --page-inset:16px; }
.rulers::after{
  content:''; pointer-events:none; position:absolute; inset:0; margin:0 auto; z-index:1;
  width:calc(100% - 2 * var(--page-inset)); max-width:var(--page-max);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}
.rulers > *{ border-bottom:1px solid var(--rule); }
.rulers > .grow{ flex:1 0 auto; border-bottom:none; }
.wrap, .rulers > .app{
  width:calc(100% - 2 * var(--page-inset)); max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter);
}
.rulers > .app{ padding-block:24px 40px; min-width:0; }
.rulers > .app:last-child, .rulers > .app:has(+ .grow){ border-bottom:none; }

/* строка управления страницы (месяц, кнопки). Название раздела — только в шапке разделов, здесь его нет */
.page-head > .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding-block:16px;
}
.page-head .brand{ min-width:0; }
.page-head h1, .topbar .brand h1{
  margin:0; font-size:36px; line-height:1.05; font-weight:500; letter-spacing:-0.025em; color:var(--card-foreground); text-wrap:balance;
}
.page-head .tagline, .topbar .brand .tagline, .topbar .brand p{ margin:10px 0 0; font-size:16px; line-height:1.5; color:var(--muted-foreground); }
.page-head .head-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* метка-пилюля (tagline из DESIGN.md) */
.pill{
  display:inline-flex; align-items:center; gap:6px; width:fit-content; min-height:24px; padding:3px 9px; border-radius:999px;
  background:var(--muted); color:var(--muted-foreground); font-size:13px; line-height:1.3;
}
.pill b, .pill strong{ color:var(--foreground); font-weight:500; }

/* ---------- кнопки ---------- */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .logout-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; white-space:nowrap;
  min-height:40px; padding:0 14px; border-radius:var(--radius-btn); border:1px solid transparent; background-clip:padding-box;
  font:500 14px/1.2 var(--font); text-decoration:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s, color .15s, box-shadow .15s, border-color .15s;
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-ghost:active, .btn-danger:active, .logout-btn:active{ transform:translateY(1px); }
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible,
.btn-danger:focus-visible, .logout-btn:focus-visible{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.btn-primary{ background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-xs); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-secondary, .btn-outline, .logout-btn{ background:var(--card); color:var(--foreground); border-color:var(--border); box-shadow:var(--shadow-xs); }
.btn-secondary:hover, .btn-outline:hover, .logout-btn:hover{ background:var(--muted); }
.btn-ghost{ background:transparent; color:var(--foreground); font-weight:400; }
.btn-ghost:hover{ background:var(--muted); }
.btn-danger{ background:var(--destructive-soft); color:var(--destructive); border-color:transparent; }
.btn-danger:hover{ background:var(--destructive); color:#fff; }
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-outline:disabled, .btn-ghost:disabled, .btn-danger:disabled,
.btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"]{ opacity:.5; cursor:default; pointer-events:none; }
.btn .ico, .btn-primary .ico, .btn-secondary .ico, .btn-outline .ico, .btn-ghost .ico, .btn-danger .ico, .logout-btn .ico{ width:16px; height:16px; }
.btn-sm, .btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-ghost.btn-sm, .btn-danger.btn-sm{ min-height:32px; padding:0 12px; font-size:13px; gap:4px; }
.btn-icon{ width:40px; padding:0; }
.btn-icon.btn-sm{ width:32px; }
a.btn-primary, a.btn-secondary, a.btn-ghost, a.logout-btn{ text-decoration:none; }

/* небольшие кнопки в строках таблиц и списков */
.icon-btn, a.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:28px; padding:0 10px;
  border:none; border-radius:var(--radius-btn); background:transparent; color:var(--muted-foreground);
  font:400 13px/1.2 var(--font); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .15s, color .15s;
}
.icon-btn:hover{ background:var(--muted); color:var(--foreground); }
.icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.icon-btn .ico{ width:14px; height:14px; }
.icon-btn-danger:hover, .icon-btn.danger:hover{ background:var(--destructive-soft); color:var(--destructive); }
.link-btn{
  display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:none; background:none; color:var(--muted-foreground);
  font:400 14px/1.4 var(--font); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border);
}
.link-btn:hover{ color:var(--foreground); text-decoration-color:currentColor; }
.back-link{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px 0 8px; margin-left:-8px; border-radius:var(--radius-btn);
  color:var(--muted-foreground); font-size:14px; text-decoration:none; border:none; background:none; cursor:pointer;
}
.back-link:hover{ color:var(--foreground); background:var(--muted); }
.back-link .ico{ width:16px; height:16px; }

/* ---------- поля ввода ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"])), :where(select), :where(textarea){
  min-height:40px; width:100%; min-width:0; padding:0 12px; border:1px solid var(--input); border-radius:var(--radius-field);
  background:var(--card); color:var(--foreground); font:400 16px/1.3 var(--font); box-shadow:var(--shadow-xs); outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
:where(textarea){ padding:10px 12px; min-height:72px; border-radius:min(var(--radius-field), 18px); line-height:1.5; resize:vertical; }
:where(select){
  appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
:where(select[multiple]){ background-image:none; padding:6px; }
:where(input, select, textarea)::placeholder{ color:var(--muted-foreground); opacity:1; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible{ border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); outline:none; }
:where(input, select, textarea):disabled{ opacity:.55; cursor:not-allowed; }
:where(input[type="checkbox"], input[type="radio"]){ accent-color:var(--primary); width:16px; height:16px; margin:0; vertical-align:middle; }
:where(input[type="file"]){ font:400 14px/1.4 var(--font); color:var(--muted-foreground); max-width:100%; }
:where(input[type="file"])::file-selector-button{
  margin-right:10px; min-height:32px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-btn);
  background:var(--card); color:var(--foreground); font:500 13px/1 var(--font); cursor:pointer;
}
@media (min-width:768px){ :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea){ font-size:14px; } }

/* поле с подписью: <div class="field"><label>…</label><input></div> */
.field{ margin-bottom:14px; min-width:0; }
.field > label, .field-label{ display:block; margin-bottom:6px; font-size:14px; line-height:1.4; font-weight:500; color:var(--foreground); }
.field .hint, .field-hint{ margin-top:6px; font-size:13px; line-height:1.4; color:var(--muted-foreground); }
.field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-row > .field{ flex:1; min-width:160px; }
.form-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.form-error{ margin:10px 0 0; color:var(--destructive); font-size:14px; line-height:1.4; }
.check-row, label.check{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }

/* ---------- карточки, панели ---------- */
.panel, .card{
  background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:var(--radius-win);
  box-shadow:var(--shadow-xs); padding:24px;
}
.panel{ margin-bottom:20px; }
.panel h2, .card h2{ margin:0 0 16px; font-size:20px; line-height:1.25; font-weight:500; letter-spacing:-0.01em; }
.panel h3, .card h3{ margin:0 0 12px; font-size:16px; line-height:1.4; font-weight:500; }
.section-title{ margin:0 0 12px; font-size:20px; line-height:1.25; font-weight:500; letter-spacing:-0.01em; }

/* ---------- вкладки (сегменты) ---------- */
.tabs{
  display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:3px; margin-bottom:20px; border-radius:var(--radius-btn);
  background:var(--muted); overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tabs > button, .tabs > a, .tab-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 14px; border:none; border-radius:var(--radius-btn);
  background:transparent; color:var(--muted-foreground); font:500 14px/1.2 var(--font); white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color .15s, color .15s, box-shadow .15s;
}
.tabs > button:hover, .tabs > a:hover, .tab-btn:hover{ color:var(--foreground); }
.tabs > .is-active, .tabs > [aria-selected="true"], .tab-btn.is-active{ background:var(--background); color:var(--foreground); box-shadow:var(--shadow-xs), 0 0 0 1px var(--border); }
.tabs > button:focus-visible, .tab-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

/* ---------- метки статуса ---------- */
.badge{
  display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:2px 8px; border-radius:999px;
  background:var(--muted); color:var(--foreground); font-size:12px; line-height:1.3; font-weight:500; white-space:nowrap;
}
.badge.ok, .badge.success{ background:var(--success-soft); color:var(--success); }
.badge.warn, .badge.warning{ background:var(--warning-soft); color:var(--warning); }
.badge.crit, .badge.danger, .badge.fail{ background:var(--destructive-soft); color:var(--destructive); }
.badge.info{ background:var(--info-soft); color:var(--info); }
.badge.accent{ background:var(--primary-soft); color:var(--primary); }

/* ---------- пусто, ошибки, плашки ---------- */
.empty-state{ padding:48px 20px; text-align:center; color:var(--muted-foreground); font-size:14px; }
.empty-state p{ margin:0 0 16px; }
.notice, .banner{
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--card); color:var(--foreground); font-size:14px; line-height:1.5;
}
.notice.warn, .banner.warn, .banner{ background:var(--warning-soft); color:var(--warning); border-color:transparent; }
.notice.crit, .banner.crit{ background:var(--destructive-soft); color:var(--destructive); border-color:transparent; }
.notice.info, .banner.info{ background:var(--info-soft); color:var(--info); border-color:transparent; }

/* ---------- окна ---------- */
.overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--overlay); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.overlay-box{
  width:100%; max-width:400px; max-height:calc(100vh - 32px); overflow:auto; padding:24px;
  background:var(--popover); color:var(--popover-foreground); border-radius:calc(var(--radius-win) + 4px);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--rule);
}
.overlay-box h2, .overlay-box h3{ margin:0 0 12px; font-size:18px; line-height:1.3; font-weight:500; }
.overlay-box p{ margin:0 0 16px; font-size:15px; line-height:1.5; }
.overlay-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:20px; }
.overlay-box > .overlay-actions:first-child{ margin-top:0; }

/* всплывающее окно у элемента */
.popover, .mini-popover{
  position:fixed; z-index:50; padding:12px; font-size:14px;
  background:var(--popover); color:var(--popover-foreground); border-radius:calc(var(--radius-win) + 4px);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--rule);
}

/* уведомление внизу экрана */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:95;
  max-width:calc(100vw - 32px); padding:10px 16px; border-radius:var(--radius-btn);
  background:var(--foreground); color:var(--background); font-size:14px; line-height:1.4; box-shadow:var(--shadow-lg);
}
.toast.error, .toast.is-error{ background:var(--destructive); color:#fff; }

/* ---------- панель действий ---------- */
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* ---------- выбор месяца ---------- */
.month-nav{ display:flex; align-items:center; gap:8px; }
.month-nav > button{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex-shrink:0;
  border:1px solid var(--border); border-radius:var(--radius-btn); background:var(--card); color:var(--foreground);
  box-shadow:var(--shadow-xs); cursor:pointer;
}
.month-nav > button:hover{ background:var(--muted); }
.month-nav > button:focus-visible{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.month-nav > button .ico{ width:18px; height:18px; }
.month-display{
  position:relative; display:inline-flex; align-items:center; gap:8px; min-height:40px; min-width:180px; padding:0 14px;
  border:1px solid var(--border); border-radius:var(--radius-field); background:var(--card); box-shadow:var(--shadow-xs); cursor:pointer;
}
.month-display:hover{ background:var(--muted); }
.month-display:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.month-display .cal, .month-display .chev{ width:16px; height:16px; color:var(--muted-foreground); flex-shrink:0; }
.month-label{ flex:1; font-size:14px; line-height:1.2; font-weight:500; text-transform:capitalize; white-space:nowrap; }
.month-display input[type="month"]{
  position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; cursor:pointer; border:none; padding:0; margin:0; box-shadow:none;
}
.month-display.no-native{ min-width:0; padding:0 8px; }
.month-display.no-native .month-label, .month-display.no-native .cal, .month-display.no-native .chev{ display:none; }
.month-display.no-native input[type="month"]{ position:static; opacity:1; width:150px; border:none; box-shadow:none; background:none; }

/* ---------- шапка разделов ---------- */
.site-nav{ position:relative; z-index:40; background:var(--background); border-bottom:1px solid var(--rule); }
.site-nav-inner{
  width:calc(100% - 32px); max-width:1840px; margin:0 auto; padding:0 4px; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.site-nav-left{ display:flex; align-items:center; gap:2px; min-width:0; flex:1 1 auto; }
.site-nav-links{
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap; margin-left:6px; min-width:0; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
  padding-right:24px;
}
.site-nav-links::-webkit-scrollbar{ display:none; }
.site-nav-link{
  display:inline-flex; align-items:center; flex-shrink:0; min-height:32px; padding:0 12px; border:none; border-radius:var(--radius-btn); background:none;
  font:400 14px/1 var(--font); letter-spacing:0; text-transform:none; color:var(--muted-foreground); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s, color .15s;
}
.site-nav-link:hover{ color:var(--foreground); background:var(--muted); }
.site-nav-link.is-active{ color:var(--foreground); background:var(--muted); font-weight:500; }
.site-nav-link:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.site-nav-help, .site-nav-logout{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; min-height:32px; padding:0 12px;
  border:1px solid transparent; border-radius:var(--radius-btn); background:transparent; color:var(--foreground);
  font:400 14px/1 var(--font); text-decoration:none; cursor:pointer; transition:background-color .15s;
}
.site-nav-help:hover, .site-nav-help.is-active{ background:var(--muted); }
.site-nav-logout{ border-color:var(--border); background:var(--card); box-shadow:var(--shadow-xs); font-weight:500; }
.site-nav-logout:hover{ background:var(--muted); }
.site-nav-help:focus-visible, .site-nav-logout:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.site-nav-help .ico, .site-nav-logout .ico{ width:16px; height:16px; }
/* переключатель объекта (вставляет site-context.js) */
.site-nav .site-obj{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:1; min-width:0; max-width:300px; min-height:32px; padding:0 12px; margin-right:2px;
  border:1px solid var(--border); border-radius:var(--radius-field); background:var(--card); box-shadow:var(--shadow-xs);
  font:400 14px/1 var(--font); letter-spacing:0; text-transform:none; color:var(--foreground); text-decoration:none; white-space:nowrap; overflow:hidden;
}
.site-nav a.site-obj:hover{ background:var(--muted); border-color:var(--border); color:var(--foreground); }
.site-nav .site-obj .site-obj-label{ color:var(--muted-foreground); font-weight:400; flex-shrink:0; }
.site-nav .site-obj .site-obj-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.site-nav .site-obj svg{ width:14px; height:14px; color:var(--muted-foreground); flex-shrink:0; }
.site-nav-inner > .site-obj{ margin-left:auto; }
.site-nav-inner > .site-obj ~ .site-nav-help{ margin-left:0; }
.site-nav-help{ margin-left:auto; }
@media (min-width:761px) and (max-width:1535px){
  .site-nav-help-label{ display:none; }
  .site-nav-help{ padding:0; width:32px; }
  .site-nav-inner > .site-obj .site-obj-label{ display:none; }
  .site-nav .site-obj{ max-width:220px; }
}
@media (min-width:761px) and (max-width:1599px){
  .site-nav-link{ padding:0 8px; }
  .site-nav .site-obj{ max-width:200px; }
}
@media (min-width:761px) and (max-width:1199px){
  .site-nav .site-obj{ max-width:150px; }
}

/* колокольчик и конверт */
.bell-wrap{ position:relative; flex-shrink:0; }
.bell-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:none; border-radius:var(--radius-btn); background:none; color:var(--foreground); cursor:pointer; font-size:0; line-height:0;
}
.bell-btn:hover{ background:var(--muted); }
.bell-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.bell-btn .ico{ width:18px; height:18px; }
.bell-dot{
  position:absolute; top:7px; right:7px; width:8px; height:8px; border:none; border-radius:50%;
  background:var(--primary); box-shadow:0 0 0 2px var(--background);
}
.bell-panel{
  position:fixed; z-index:80; width:320px; max-width:calc(100vw - 16px); max-height:70vh; overflow-y:auto; padding:16px;
  background:var(--popover); color:var(--popover-foreground); border:none; border-radius:calc(var(--radius-win) + 4px);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--rule);
}
.bell-panel h2{ margin:0 0 8px; font-size:16px; line-height:1.5; font-weight:500; }
.bell-empty{ font-size:14px; color:var(--muted-foreground); padding:4px 0; }
.ann-item{ padding:12px 0; border-bottom:1px solid var(--border); }
.ann-item:last-child{ border-bottom:none; padding-bottom:0; }
.ann-title{ display:flex; align-items:center; gap:6px; font-size:14px; line-height:1.5; font-weight:500; }
.ann-title .flag{ display:inline-flex; color:var(--primary); }
.ann-title .flag .ico{ width:14px; height:14px; }
.ann-message{ margin-top:4px; font-size:14px; line-height:1.5; color:var(--muted-foreground); white-space:pre-wrap; }
.ann-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:12px; color:var(--muted-foreground); }
.ann-delete{ border:none; background:none; padding:0; color:var(--muted-foreground); font:inherit; cursor:pointer; }
.ann-delete:hover{ color:var(--destructive); }
.bell-admin-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:0; border:none; background:none;
  color:var(--primary); font:500 14px/1.2 var(--font); cursor:pointer;
}
.bell-admin-toggle .ico{ width:14px; height:14px; }
.bell-admin-form{ margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.bell-admin-form input:not([type="checkbox"]), .bell-admin-form textarea{ display:block; width:100%; margin-bottom:8px; }
.bell-important-check input{ flex-shrink:0; }
.bell-admin-form textarea{ min-height:64px; }
.bell-important-check{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; }
.bell-admin-form button{
  width:100%; min-height:40px; border:none; border-radius:var(--radius-btn); background:var(--primary); color:var(--primary-foreground);
  font:500 14px/1 var(--font); cursor:pointer; box-shadow:var(--shadow-xs);
}
.bell-admin-form button:hover{ background:var(--primary-hover); }

/* ---------- узкие экраны ---------- */
@media (max-width:640px){
  :root{ --gutter:16px; }
  .rulers.wide{ --page-inset:0px; }
  .rulers::after{ border-color:transparent; }
  .page-head > .wrap{ padding-block:12px; gap:12px; }
  .page-head h1, .topbar .brand h1{ font-size:30px; }
  .page-head .tagline, .topbar .brand .tagline, .topbar .brand p{ margin-top:8px; font-size:15px; }
  .rulers > .app{ padding-block:16px 32px; }
  .panel, .card{ padding:16px; }
  .month-nav{ width:100%; justify-content:space-between; gap:6px; }
  .month-nav > button{ width:36px; height:36px; }
  .month-display{ flex:1; min-width:0; min-height:36px; padding:0 10px; }
  .overlay{ align-items:flex-end; padding:8px; }
  .overlay-box{ max-width:none; border-radius:calc(var(--radius-win) + 4px); }
  .btn-label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}