/* =========================================================
   Окошко — дизайн-токены и базовые компоненты
   Источник: design/mockups/*.dc.html, docs/DESIGN_SYSTEM.md
   Копируется в static/css/tokens.css
   ========================================================= */

:root {
  /* Поверхности */
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #F8F6F2;
  --surface-3: #F3F0EA;
  --segmented-bg: #EAE6DE;
  --border: #E6E1D8;
  --border-strong: #DDD7CC;
  --divider: #F1EEE8;
  --dashed: #C9C2B5;
  --grid-line: #EFEBE4;

  /* Текст */
  --ink: #1C1B19;
  --ink-2: #4A463F;
  --ink-3: #5F5A51;
  --ink-4: #6E6A62;
  --on-ink: #F6F4EF;
  --on-ink-2: #BDB7AB;
  --sidebar-text: #D6D0C4;
  --sidebar-fg: #EDE9E1;
  --sidebar-muted: #A9A398;
  --sidebar-hover: #2B2926;
  --sidebar-border: #3A3733;
  --on-ink-border: #4A4640;
  --hour-label: #8A857B;
  --ink-disabled: #9C978D;

  /* Акценты */
  --brand: #E07A5F;
  --accent: #C8553D;
  --accent-soft: #FBEDE8;
  --accent-ink: #8A3322;
  --success: #1F5F5B;
  --success-soft: #DCEBE8;
  --success-ink: #17423F;
  --toggle-off: #CFC8BC;
  --muted-block: #EEEBE5;

  /* Категории: фон / текст / сплошной */
  --nail-bg: #F6DDD5;  --nail-ink: #6B2A1B;  --nail: #C8553D;
  --brow-bg: #E6DFF0;  --brow-ink: #3E2A5E;  --brow: #4B3470;
  --pedi-bg: #DCEBE8;  --pedi-ink: #17423F;  --pedi: #1F5F5B;
  --other-bg: #F3E7C9; --other-ink: #5A430E; --other: #8A6A1C;

  /* Шрифты */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Радиусы */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Отступы */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Размеры */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --sidebar-w: 232px;
  --sidebar-w-compact: 72px;
  --tabbar-h: 84px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --panel-w: 340px;
  --hour-h: 64px;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, .12);
  --shadow-md: 0 8px 20px rgba(28, 27, 25, .16);
  --shadow-lg: 0 30px 60px rgba(28, 27, 25, .10);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Типографика ---------- */
.h-page { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
.h-hero { font-family: var(--font-display); font-weight: 600; font-size: 56px; letter-spacing: -0.03em; line-height: 1.08; }
.h-section { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.15; }
.h-block { font-size: 17px; font-weight: 700; }
.num-xl { font-family: var(--font-display); font-weight: 500; font-size: 28px; }
.text-muted { color: var(--ink-3); }
.text-subtle { color: var(--ink-4); }
.caption { font-size: 12px; font-weight: 600; color: var(--ink-4); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: #33312D; color: var(--on-ink); }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); font-weight: 600; }
.btn--secondary:hover { background: var(--surface-2); }
.btn--accent { background: var(--accent); color: #FFFFFF; }
.btn--accent:hover { background: #B34A34; color: #FFFFFF; }
.btn--success { background: var(--success); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink-3); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--danger-text { background: var(--surface); border-color: var(--border-strong); color: var(--accent-ink); font-weight: 600; }
.btn--sm { height: var(--control-h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn--lg { height: 56px; padding: 0 26px; font-size: 16px; border-radius: var(--r-lg); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; }

/* ---------- Сегмент ---------- */
.segmented { display: inline-flex; background: var(--segmented-bg); border-radius: var(--r-md); padding: 4px; gap: 2px; }
.segmented__item { border: 0; background: transparent; border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.segmented__item[aria-pressed="true"], .segmented__item--active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Чипы (фильтры и выбор) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 600;
}
.chip--active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip--warn { background: var(--accent-soft); border-color: #E9B8A9; color: var(--accent-ink); }
.chip__dot { width: 10px; height: 10px; border-radius: 3px; }

/* Кнопки выбора времени/даты в онлайн-записи */
.slot { height: 46px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); font-size: 15px; font-weight: 700; }
.slot[aria-pressed="true"] { background: var(--success); border-color: var(--success); color: #FFFFFF; }
.day { height: 64px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.day__weekday { font-size: 11px; font-weight: 600; }
.day__num { font-size: 18px; font-weight: 700; }
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.day:disabled { background: var(--muted-block); border-color: var(--muted-block); color: #9C978D; cursor: default; }

/* ---------- Теги ---------- */
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 10px; background: var(--surface-3); color: var(--ink); }
.tag--accent  { background: var(--accent-soft); color: var(--accent-ink); }
.tag--success { background: var(--success-soft); color: var(--success); }
.tag--nail    { background: var(--nail-bg); color: var(--accent-ink); }
.tag--brow    { background: var(--brow-bg); color: var(--brow); }
.tag--pedi    { background: var(--pedi-bg); color: var(--pedi); }
.tag--dark    { background: var(--ink); color: var(--on-ink); }
.tag--add     { background: transparent; border: 1px dashed var(--dashed); }

/* ---------- Тумблер ---------- */
.toggle { position: relative; width: 46px; height: 28px; border-radius: 14px; border: 0; padding: 0; background: var(--toggle-off); flex-shrink: 0; transition: background-color .15s; }
.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.toggle[aria-checked="true"] { background: var(--success); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); }

/* ---------- Карточки ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: var(--s-6); }
.card--tight { padding: var(--s-4) 18px; border-radius: var(--r-xl); }
.card--dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.card--soft { background: var(--surface-2); border: 0; border-radius: var(--r-lg); padding: var(--s-4); }
.card--success { background: var(--success); color: #F1F7F6; border-color: var(--success); }

.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi__label { font-size: 13px; color: var(--ink-4); }
.kpi__value { font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.kpi__delta { font-size: 13px; font-weight: 600; color: var(--success); }
.card--dark .kpi__label { color: var(--on-ink-2); }
.card--dark .kpi__delta { color: #9FD3C9; }

/* ---------- Поля ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; }
.field__error { font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.field__hint { font-size: 12px; color: var(--ink-4); }
.input, .select, .textarea {
  height: var(--control-h); border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface); padding: 0 14px; font-size: 14px; font-weight: 500; width: 100%;
}
.textarea { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.input[aria-invalid="true"] { border-color: var(--accent); }
.search { display: flex; align-items: center; gap: 10px; height: var(--control-h); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 14px; color: var(--ink-4); }
.search input { border: 0; outline: 0; flex: 1; background: transparent; color: var(--ink); }

/* ---------- Аватары ---------- */
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--ink); flex-shrink: 0; }
.avatar--round { border-radius: 50%; }
.avatar--lg { width: 52px; height: 52px; border-radius: 16px; font-size: 17px; }
.avatar--xl { width: 88px; height: 88px; border-radius: 26px; font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.avatar--nail { background: var(--nail-bg); color: var(--accent-ink); }
.avatar--brow { background: var(--brow-bg); color: var(--brow); }
.avatar--pedi { background: var(--pedi-bg); color: var(--pedi); }
.avatar--other { background: var(--other-bg); color: var(--other-ink); }

/* ---------- Сайдбар ---------- */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--ink); color: #EDE9E1; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.sidebar__logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.sidebar__logo-mark { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.sidebar__nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
.sidebar__link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--sidebar-text); }
.sidebar__link:hover { background: var(--sidebar-hover); color: #EDE9E1; }
.sidebar__link--active, .sidebar__link[aria-current="page"] { background: #EDE9E1; color: var(--ink); font-weight: 600; }
.sidebar__link--active:hover { background: #EDE9E1; color: var(--ink); }
.sidebar__count { margin-left: auto; font-size: 12px; color: #A9A398; }
.sidebar__box { margin-top: auto; background: var(--sidebar-hover); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }

/* ---------- Календарь ---------- */
.cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.cal__head { display: flex; height: 60px; border-bottom: 1px solid var(--border); }
.cal__gutter { width: 56px; flex-shrink: 0; position: relative; }
.cal__hour { position: absolute; left: 0; width: 48px; text-align: right; font-size: 11px; font-weight: 600; color: #8A857B; transform: translateY(-7px); }
.cal__col {
  flex: 1; position: relative; border-left: 1px solid #EFEBE4;
  background-image: repeating-linear-gradient(to bottom, #EFEBE4 0, #EFEBE4 1px, transparent 1px, transparent var(--hour-h));
}
.cal__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.cal__now-label { position: absolute; left: 4px; background: var(--accent); color: #FFFFFF; font-size: 11px; font-weight: 700; border-radius: var(--r-xs); padding: 2px 5px; transform: translateY(-9px); }

.appt {
  position: absolute; left: 6px; right: 6px;
  border-radius: var(--r-sm); padding: 7px 10px; overflow: hidden;
  font-size: 12px; line-height: 16px; text-align: left; border: 0; width: auto;
}
.appt__time { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.appt__service { font-weight: 600; }
.appt__badge { background: #FFFFFF; border-radius: var(--r-xs); padding: 0 6px; font-weight: 600; }
.appt--nail  { background: var(--nail-bg);  color: var(--nail-ink); }
.appt--brow  { background: var(--brow-bg);  color: var(--brow-ink); }
.appt--pedi  { background: var(--pedi-bg);  color: var(--pedi-ink); }
.appt--other { background: var(--other-bg); color: var(--other-ink); }
.appt--no-show { background: var(--muted-block); color: var(--ink-3); }
.appt--no-show .appt__service { text-decoration: line-through; }
.appt--selected { outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: var(--shadow-md); z-index: 1; }
.appt--break { background-image: repeating-linear-gradient(45deg, var(--muted-block) 0 6px, var(--surface-2) 6px 12px); color: var(--ink-4); font-weight: 600; display: flex; align-items: center; }
.appt--free { background: transparent; border: 1.5px dashed var(--dashed); color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.appt--free:hover { border-color: var(--ink-3); background: var(--surface-2); }

/* ---------- Таблица ---------- */
.table-row { display: grid; align-items: center; gap: 12px; padding: 0 20px; min-height: 60px; border-bottom: 1px solid var(--divider); font-size: 14px; }
.table-head { font-size: 12px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; min-height: 46px; border-bottom-color: var(--border); }

/* ---------- Модалка и тост ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(28, 27, 25, .4); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 20px; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--s-6); box-shadow: var(--shadow-lg); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: 12px 18px; font-weight: 600; z-index: 60; }

@media (max-width: 767px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { border-radius: 20px 20px 0 0; width: 100%; }
  .h-hero { font-size: 36px; }
  .h-section { font-size: 28px; }
}