/* ------------------------------------------------------------ токени --- */
:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e2e5eb;
  --border-strong: #cfd4dd;
  --text: #1b1f26;
  --text-muted: #6b7280;
  --accent: #2f6fed;
  --accent-soft: #e8f0ff;
  --danger: #d92d20;
  --danger-soft: #fef3f2;
  --past: #f0f1f4;
  --cancel-bg: #fdecec;
  --cancel-bg-hover: #fbdcdc;
  --cancel-border: #f3c9c9;
  --cancel-text: #c0392b;
  --confirm-bg: #e4f6e9;
  --confirm-bg-hover: #d3efdb;
  --confirm-border: #bde5c8;
  --confirm-text: #1e7b34;
  --slot-h: 27px;
  --time-col: 62px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .12);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .22);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Темні значення визначені один раз, застосовуються у двох випадках:
   тема «як у системі» і явно обрана темна. */
:root {
  --d-bg: #14161a;
  --d-surface: #1c1f25;
  --d-surface-2: #21252c;
  --d-border: #2c313a;
  --d-border-strong: #3a4049;
  --d-text: #e8eaee;
  --d-text-muted: #949aa5;
  --d-accent: #5b8dff;
  --d-accent-soft: #1e2a44;
  --d-danger: #f97066;
  --d-danger-soft: #3a1d1a;
  --d-past: #101215;
  --d-cancel-bg: #3a1e1e;
  --d-cancel-bg-hover: #4a2525;
  --d-cancel-border: #5c2e2e;
  --d-cancel-text: #f08a80;
  --d-confirm-bg: #14301f;
  --d-confirm-bg-hover: #1b3f2a;
  --d-confirm-border: #245538;
  --d-confirm-text: #64d68d;
  --d-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --d-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --d-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --surface-2: var(--d-surface-2);
    --border: var(--d-border);
    --border-strong: var(--d-border-strong);
    --text: var(--d-text);
    --text-muted: var(--d-text-muted);
    --accent: var(--d-accent);
    --accent-soft: var(--d-accent-soft);
    --danger: var(--d-danger);
    --danger-soft: var(--d-danger-soft);
    --past: var(--d-past);
    --cancel-bg: var(--d-cancel-bg);
    --cancel-bg-hover: var(--d-cancel-bg-hover);
    --cancel-border: var(--d-cancel-border);
    --cancel-text: var(--d-cancel-text);
    --confirm-bg: var(--d-confirm-bg);
    --confirm-bg-hover: var(--d-confirm-bg-hover);
    --confirm-border: var(--d-confirm-border);
    --confirm-text: var(--d-confirm-text);
    --shadow-sm: var(--d-shadow-sm);
    --shadow-md: var(--d-shadow-md);
    --shadow-lg: var(--d-shadow-lg);
  }
}

:root[data-theme="dark"] {
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --surface-2: var(--d-surface-2);
  --border: var(--d-border);
  --border-strong: var(--d-border-strong);
  --text: var(--d-text);
  --text-muted: var(--d-text-muted);
  --accent: var(--d-accent);
  --accent-soft: var(--d-accent-soft);
  --danger: var(--d-danger);
  --danger-soft: var(--d-danger-soft);
  --past: var(--d-past);
  --cancel-bg: var(--d-cancel-bg);
  --cancel-bg-hover: var(--d-cancel-bg-hover);
  --cancel-border: var(--d-cancel-border);
  --cancel-text: var(--d-cancel-text);
  --confirm-bg: var(--d-confirm-bg);
  --confirm-bg-hover: var(--d-confirm-bg-hover);
  --confirm-border: var(--d-confirm-border);
  --confirm-text: var(--d-confirm-text);
  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
}

html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* Браузерне [hidden] { display: none } має низький пріоритет і програє
   будь-якому авторському display. Без цього рядка елементи з display: flex
   або grid лишаються видимими, попри hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

/* Вікно фіксоване: сторінка не прокручується, висоту ділять шапка, дні
   й дошка. Саме від вільного місця тут рахується висота слота. */
html { height: 100%; }
body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }
.req { color: var(--danger); }

/* ------------------------------------------------------------ топбар --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
}
/* Материнський бренд приглушений, продукт — на повну силу: два однаково
   жирні слова в рядку 15px змагалися б між собою. */
.brand-parent { color: var(--text-muted); }
.brand-div {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  flex: 0 0 auto;
}
/* Логотип лежить у public/logo.svg — щоб замінити, просто перезапишіть файл. */
.brand-mark {
  width: 24px; height: 24px;
  background: url('logo.svg') center / contain no-repeat;
  flex: 0 0 auto;
}

.date-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
/* Годинник теж у рамці — інакше він висів у ряду як єдиний «голий» елемент. */
.clock {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Тонка риска відділяє дії над бронюваннями від налаштувань вигляду. */
.topbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex: 0 0 auto;
}

/* Три кнопки навігації читаються як один елемент керування, а не як три
   випадкові кнопки поруч. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  overflow: hidden;
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 0 12px;
  line-height: 1.3;
  transition: background .12s, color .12s;
}
.segmented button:first-child,
.segmented button:last-child { padding: 0 11px; font-size: 16px; line-height: 1; }
.segmented button + button { border-left: 1px solid var(--border); }
.segmented button:hover { background: var(--accent-soft); color: var(--accent); }
.segmented button:active { background: var(--accent); color: #fff; }

.date-field {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 9px;
  padding: 0 4px 0 8px;
  transition: border-color .12s;
}
.date-field:hover, .date-field:focus-within { border-color: var(--accent); }
.date-field input[type="date"] {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

/* ------------------------------------------------------------ кнопки --- */
button { font: inherit; cursor: pointer; }

.icon-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

.ghost-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  transition: background .12s, border-color .12s;
}
.ghost-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.ghost-btn.subtle { color: var(--text-muted); }

/* Усі елементи керування в шапці однієї висоти й однієї форми —
   інакше ряд читається як набір випадкових кнопок. */
.topbar-right .pill,
.topbar-right .icon-btn,
.topbar-right .clock,
.segmented { height: 30px; }

/* Лише іконка: підпис дублював підказку при наведенні й розтягував ряд.
   Обидві кнопки тепер такої ж форми, як тема й довідка поруч. */
.pill {
  position: relative;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  font: inherit;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.pill:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Закладка заливається, монітор лишається контурним — так пара іконок
   не зливається в однакові прямокутники. */
#mineBtn svg path { fill: currentColor; stroke: none; }
/* Лічильник сідає на ріг іконки, як на мобільних застосунках. */
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--surface);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ghost-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.primary-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}
.primary-btn:hover { filter: brightness(1.07); }
.primary-btn:disabled { opacity: .55; cursor: not-allowed; }

.danger-btn {
  border: 1px solid var(--border);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
}
.danger-btn:hover { border-color: var(--danger); }

/* --------------------------------------- кнопки дій у модальних вікнах --- */
/* Однаковий розмір: пара читається як вибір із двох рівноцінних дій,
   а не як головна кнопка й додаток до неї. Значення несе колір. */
.btn-cancel,
.btn-confirm,
.btn-delete {
  min-width: 132px;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background .12s, border-color .12s, filter .12s;
}

.btn-cancel {
  background: var(--cancel-bg);
  border-color: var(--cancel-border);
  color: var(--cancel-text);
}
.btn-cancel:hover { background: var(--cancel-bg-hover); border-color: var(--cancel-text); }

.btn-confirm {
  background: var(--confirm-bg);
  border-color: var(--confirm-border);
  color: var(--confirm-text);
}
.btn-confirm:hover { background: var(--confirm-bg-hover); border-color: var(--confirm-text); }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* Видалення необоротне — єдина суцільна заливка, щоб не сплуталось зі «Скасувати». */
.btn-delete {
  min-width: 0;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-delete:hover { filter: brightness(1.08); }

/* ------------------------------------------------- смуга днів тижня --- */
.daystrip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 5px 20px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* Смужка прокрутки під днями виглядала як зайва деталь — замість неї
     краї плавно розчиняються, підказуючи, що далі є ще дні. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
}
.daystrip::-webkit-scrollbar { display: none; }

/* Кожен тиждень — окремий блок з підписом, щоб було видно межу тижня. */
.week { flex: 0 0 auto; padding: 0 14px; position: relative; }
.week:first-child { padding-left: 0; }
.week + .week::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}

.week-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 2px;
  white-space: nowrap;
}
.week-label .wl-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.week-label .wl-range { font-size: 11px; color: var(--text-muted); opacity: .75; }
.week.current .wl-title { color: var(--accent); }
.week.current .wl-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}

.week-days { display: flex; gap: 6px; }

.daystrip button {
  flex: 0 0 auto;
  min-width: 54px;
  padding-bottom: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 9px;
  padding: 3px 8px 4px;
  text-align: center;
  line-height: 1.25;
  position: relative;
}
.daystrip button .dow { display: block; font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.daystrip button .dnum { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.daystrip button:hover { border-color: var(--accent); }
.daystrip button.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.daystrip button.selected .dow { color: rgba(255, 255, 255, .8); }
.daystrip button.is-today .dnum::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin: 1px auto 0;
}
.daystrip button.selected.is-today .dnum::after { background: #fff; }
.daystrip button.weekend .dnum { color: var(--danger); }
.daystrip button.selected.weekend .dnum { color: #fff; }

/* ------------------------------------------------------------ layout --- */
.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 16px;
  padding: 10px 20px 12px;
  align-items: stretch;
}

.board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Заголовок дня в один рядок: кожен зекономлений піксель іде слотам. */
.board-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.board-head h2 { font-size: 14px; }
.board-head p { margin: 0; font-size: 12px; }
.board-head .linklike { font-size: 12px; }

/* Показує, що дані живі: крапка блимає на кожному успішному оновленні. */
.refresh-info {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.refresh-info .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: 0 0 auto;
}
.refresh-info.fresh .pulse { background: #2f9e44; animation: pulse-dot 1.2s ease-out; }
.refresh-info.stale { color: var(--danger); }
.refresh-info.stale .pulse { background: var(--danger); }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(47, 158, 68, .55); }
  100% { box-shadow: 0 0 0 7px rgba(47, 158, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .refresh-info.fresh .pulse { animation: none; }
}


/* -------------------------------------------------------------- сітка --- */
.grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: fit-content;
}

.grid-corner {
  position: sticky;
  top: 0; left: 0;
  z-index: 12;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.room-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.room-head .swatch { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.room-head .rname { font-weight: 600; font-size: 13px; }
.room-head .rcount { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.time-col {
  position: sticky;
  left: 0;
  z-index: 8;
  background: var(--surface);
  border-right: 1px solid var(--border);
  width: var(--time-col);
}
.time-label {
  height: var(--slot-h);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 8px;
  transform: translateY(-6px);
}
.time-label.half { opacity: .45; }
/* чверті лишають свою висоту, але не захаращують колонку підписами */
.time-label.quarter { visibility: hidden; }

.room-col {
  position: relative;
  border-right: 1px solid var(--border);
  min-width: 170px;
}

.slot {
  height: var(--slot-h);
  border-bottom: 1px dashed transparent;
  border-top: 1px solid var(--border);
  transition: background .1s;
}
.slot.hour { border-top-color: var(--border-strong); }
.slot:first-child { border-top: none; }
.slot.free { cursor: pointer; }
.slot.free:hover { background: var(--accent-soft); }
.slot.past { background: var(--past); cursor: not-allowed; }
.slot.dragging { background: var(--accent-soft); }

/* блок бронювання */
.booking {
  position: absolute;
  left: 4px; right: 4px;
  border-radius: 7px;
  padding: 4px 7px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, .12);
  z-index: 3;
  transition: transform .1s, box-shadow .1s;
}
.booking:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); z-index: 5; }
.booking .b-time {
  font-size: 10px;
  opacity: .9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.booking .b-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking .b-purpose {
  font-size: 11px;
  opacity: .92;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* короткі бронювання: час і ПІБ в один рядок */
.booking.compact { padding: 2px 7px; display: flex; gap: 6px; align-items: baseline; }
.booking.compact .b-time { flex: 0 0 auto; }
.booking.compact .b-name { flex: 1 1 auto; min-width: 0; font-size: 11px; }
.booking.mine::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  opacity: .85;
  pointer-events: none;
}
.booking.is-past { opacity: .5; }

/* поточний час */
.now-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px solid var(--danger);
  z-index: 6;
  pointer-events: none;
}
.now-line::before {
  content: "";
  position: absolute;
  left: -4px; top: -4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

/* ---------------------------------------------------------- сайдбар --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.card h3 { font-size: 13px; margin-bottom: 10px; }

.my-list { display: grid; gap: 8px; }
.my-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .12s;
}
.my-item:hover { border-color: var(--accent); }
.my-item .mi-when { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.my-item .mi-room { font-size: 11px; color: var(--text-muted); }

/* ---------------------------------------------------------- модалки --- */
.modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(480px, calc(100vw - 24px));
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.modal.narrow { width: min(360px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }

.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 15px; flex: 1; }
.icon-btn.close { border: none; background: transparent; font-size: 22px; color: var(--text-muted); }
.icon-btn.close:hover { background: var(--surface-2); color: var(--text); }

.modal-body { padding: 16px; display: grid; gap: 13px; max-height: 68vh; overflow: auto; }

.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 14px 14px;
}

.field { display: grid; gap: 5px; min-width: 0; }
.field > label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.field > label .opt {
  font-size: 11px;
  font-weight: 400;
  opacity: .7;
}

/* Форма ділиться на три групи: де і коли / хто / доступ.
   Лінії дають оку точки опори, щоб дев'ять полів не читались суцільним стовпцем. */
.sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3px 0;
}

/* Дата й час — один змістовий блок «коли», тому стоять в один рядок,
   а тривалість підписана тут же, а не окремим абзацом нижче. */
.when {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px 10px;
  align-items: end;
}
.when .duration {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -3px;
}
.when .duration:empty { display: none; }
.when .duration .cap-note { color: var(--danger); }

/* PIN набирають як код — великі розріджені цифри читаються краще
   й не плутаються з полем звичайного тексту. */
.pin-input {
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pin-input::placeholder {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .4em;
  opacity: .35;
}
.field input, .field select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  width: 100%;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .muted { margin: 0; }
.cap-note { color: var(--danger); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.error {
  margin: 0;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

/* картка перегляду */
.view-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; }
.view-row dt { color: var(--text-muted); }
.view-row dd { margin: 0; font-weight: 500; }
.view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: #fff;
}

/* ------------------------------------------------------------- тост --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-width: calc(100vw - 32px);
}
.toast.err { background: var(--danger); color: #fff; }



/* --------------------------------------------------- банер адміністратора --- */
.adminbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  position: sticky;
  top: 55px;
  z-index: 35;
}
.adminbar span { flex: 1; }
.adminbar .ghost-btn {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.adminbar .ghost-btn:hover { background: rgba(255, 255, 255, .28); }

/* ------------------------------------------------------ підказки збоку --- */
.linklike {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linklike:hover { filter: brightness(1.15); }

/* ----------------------------------------------- приватне бронювання --- */
.booking.private {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .10) 0 6px,
    rgba(255, 255, 255, 0) 6px 12px
  );
}
.booking.private .b-name::before { content: "🔒 "; font-size: 10px; }

/* --------------------------------------------------- чекбокс у формі --- */
.checkline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--surface-2);
  cursor: pointer;
}
.checkline:hover { border-color: var(--accent); }
.checkline input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
.checkline > span { display: grid; gap: 2px; }
.checkline strong { font-size: 13px; font-weight: 600; }
.checkline .small { line-height: 1.35; }

/* На вузькому екрані три поля «коли» не вміщаються в рядок. */
@media (max-width: 460px) {
  .when { grid-template-columns: 1fr 1fr; }
  .when .field:first-child { grid-column: 1 / -1; }
}

/* Блок для адміністратора у вікні бронювання: візуально відокремлений,
   щоб не сплутати його з тим, що бачать усі. */
.view-tech-label {
  margin: 14px 0 6px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.view-row.tech dd { font-variant-numeric: tabular-nums; word-break: break-all; }

/* ------------------------------------------------- групи у формі --- */
/* Названі групи замість безіменних ліній: підпис каже, що саме нижче,
   тож потрібне поле знаходиться поглядом, а не перечитуванням усього. */
.form-group { display: grid; gap: 13px; }
.form-group + .form-group { margin-top: 4px; }

.group-title {
  margin: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------- гості зустрічі --- */
/* Поле-рамка з чипами всередині, як у поштових клієнтах. Окрема кнопка
   «Додати» коштувала кліку на кожну адресу й не давала вставити список. */
.guest-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: text;
}
.guest-box:focus-within { border-color: var(--accent); }

#fGuest {
  flex: 1 1 130px;
  min-width: 90px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 3px 2px;
  outline: none;
}

.guest-count { color: var(--text-muted); font-weight: 400; }

.guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  max-width: 100%;
}
.guest-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-x {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.guest-x:hover { background: var(--cancel-bg); color: var(--cancel-text); }

/* ------------------------------------------------ налаштування пошти --- */
.wide-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
}
.wide-btn .chevron { margin-left: auto; color: var(--text-muted); }
.lock-mark { display: inline-flex; flex: 0 0 auto; }
.lock-mark svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.smtp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.smtp-test { display: flex; gap: 8px; }
.smtp-test input { flex: 1 1 auto; min-width: 0; }
.smtp-test .ghost-btn { flex: 0 0 auto; }

/* Підтвердження вдалої перевірки: зелене, щоб не сплутати з помилкою. */
.ok-note {
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--confirm-border);
  border-radius: 8px;
  background: var(--confirm-bg);
  color: var(--confirm-text);
  font-size: 12.5px;
  line-height: 1.45;
}

@media (max-width: 460px) {
  .smtp-row { grid-template-columns: 1fr; }
  .smtp-test { flex-direction: column; }
}

/* ------------------------------------------------------- журнал змін --- */
.audit { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden; }
/* Журнал ширший за інші вікна: це таблиця, і «Chrome 141 · Android 14 ·
   SM-G991B» у вузьку колонку не влазить. */
#auditDialog { width: min(880px, calc(100vw - 24px)); }

.audit-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 300px);
  gap: 10px;
  align-items: start;
  padding: 7px 11px;
  background: var(--surface);
  font-size: 12.5px;
}
.a-when { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.a-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 7px;
}
.a-create { background: var(--confirm-bg); color: var(--confirm-text); }
.a-edit   { background: var(--accent-soft); color: var(--accent); }
.a-delete { background: var(--cancel-bg); color: var(--cancel-text); }
.a-set    { background: var(--surface-2); color: var(--text-muted); }
.a-fail   { background: var(--danger-soft); color: var(--danger); }

.a-name { font-weight: 600; }
/* Рядки однакової висоти: саме це дозволяє показувати фіксовані десять
   записів і бути певним, що сторінка влізе без прокрутки. Тому деталі
   обрізаються, а не переносяться. */
.audit-row > div:nth-child(2) { min-width: 0; }
.a-detail {
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 2px;
  min-height: 14px;          /* тримає висоту рядка, коли деталей немає */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-meta { display: flex; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; }
.a-tech {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
  min-width: 0;
  /* Без nowrap довгий рядок браузера переносився б і робив рядок вищим —
     а на однаковій висоті тримається вся сторінка. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Відбиток пристрою: однаковий код і колір означають той самий браузер. */
.dev-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.dev-chip.none { background: var(--surface-2); color: var(--text-muted); }

#auditDialog .modal-body { max-height: 74vh; }

/* Стрілки гортання: у краях журналу гаснуть, щоб було видно межу. */
#auditPrev, #auditNext { min-width: 34px; padding: 5px 9px; }
#auditPrev:disabled, #auditNext:disabled { opacity: .35; cursor: default; }
#auditPage { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .audit-row { grid-template-columns: 1fr; gap: 5px; }
  .a-meta { justify-content: flex-start; }
  .a-tech { text-align: left; }
}

/* ------------------------------------------------------------ довідка --- */
.modal.wide { width: min(620px, calc(100vw - 24px)); }

.modal-body.help { gap: 22px; }
.help section { display: grid; gap: 7px; }
.help h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.help p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.help p strong { color: var(--text); }

/* Чотири кроки зшиті вертикальною лінією, щоб читалися як послідовність,
   а не як чотири незалежні розділи. Лінія вкорочена на радіус кружечка
   згори й знизу — інакше вона стирчала б над першим і під останнім. */
.help .steps {
  position: relative;
  display: grid;
  gap: 18px;
}
.help .steps::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 21px; bottom: 21px;
  width: 2px;
  background: var(--border-strong);
}
.help .step { position: relative; padding-left: 32px; }
.help .step-num {
  position: absolute;
  left: 0; top: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
}

.help .callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
}
.help .tips {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.help .tips strong { color: var(--text); }

.help .keys {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 3px;
}
.help .keys span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.help kbd {
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  padding: 1px 5px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
}

/* ---------------------------------------------- умовні позначки сітки ---
   Кольори й рамки описати словами майже неможливо: «сірий слот» і «біла
   рамка» стають зрозумілими лише коли їх видно. Тому зразки намальовані
   тими самими правилами, що й справжні клітинки календаря. */
.help .legend {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 18px;
}
.help .legend li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted);
}
.help .legend strong { color: var(--text); font-weight: 600; }

.lg {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 28px;
  border-radius: 7px;
  overflow: hidden;
}

/* клітинки сітки */
.lg-free { background: var(--surface); border: 1px solid var(--border-strong); }
.lg-past { background: var(--past); border: 1px solid var(--border); }
.lg-now  { background: var(--surface); border: 1px solid var(--border); }
.lg-now::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--danger);
}
.lg-now::after {
  content: "";
  position: absolute;
  left: 1px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--danger);
}

/* бронювання: два різні кольори навмисно — щоб було видно, що колір
   залежить від автора, а не від кімнати чи статусу */
.lg-book, .lg-mine, .lg-private {
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: var(--shadow-sm);
}
.lg-book { background: #2b71b8; }
.lg-mine { background: #1e7f3a; }

/* світла смужка на місці імені */
.lg-book::before, .lg-mine::before {
  content: "";
  position: absolute;
  left: 7px; right: 11px; top: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
}
.lg-mine::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  opacity: .85;
}

/* приватна бронь: сірий «автор невідомий» плюс та сама штриховка, що в сітці */
.lg-private {
  background-color: #5b6472;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .10) 0 6px,
    rgba(255, 255, 255, 0) 6px 12px
  );
}
.lg-private::before {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
}

/* Підказка про офіс-менеджера живе в підвалі: вона потрібна не під час
   читання, а тоді, коли решта не спрацювала. */
.modal-foot .foot-note {
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .help .legend { grid-template-columns: 1fr; }

  /* На телефоні в шапці тісно, а знак ліворуч і так каже, чий це продукт. */
  .brand-parent, .brand-div { display: none; }
}




/* ==========================================================================
   Планшет: бічна панель переїжджає під календар.
   ========================================================================== */
/* ==========================================================================
   Телефон: екран статичний. Шапка, дні й підвал закріплені, прокручується
   лише сітка — і тільки по вертикалі. Колонки кімнат ділять ширину екрана.
   ========================================================================== */
@media (max-width: 860px) {
  :root {
    --time-col: 44px;
    --col-min: 0px;   /* колонки стискаються під ширину екрана */
  }

  html { height: 100%; }
  body {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* --- шапка --- */
  .topbar {
    position: static;
    flex: 0 0 auto;
    padding: 8px 10px;
    gap: 8px;
    row-gap: 8px;
  }
  .brand { min-width: 0; }
  .brand h1 { font-size: 14px; gap: 7px; min-width: 0; }
  /* Обрізати треба назву продукту, а не весь рядок: у flex-контейнері
     ellipsis працює на дитині, а не на батькові. */
  .brand h1 #officeName { overflow: hidden; text-overflow: ellipsis; }
  .brand-mark { width: 20px; height: 20px; }
  .topbar-right { margin-left: auto; gap: 6px; }
  .clock { display: none; }

  .date-nav { order: 3; width: 100%; margin-left: 0; }
  .date-field { flex: 1; min-width: 0; }
  .date-field input { width: 100%; }

  .adminbar { position: static; flex: 0 0 auto; padding: 7px 10px; font-size: 12px; }

  /* --- смуга днів --- */
  .daystrip { flex: 0 0 auto; padding: 6px 10px 8px; }
  .week { padding: 0 8px; }
  .week-label { margin-bottom: 3px; gap: 5px; }
  .week-label .wl-title, .week-label .wl-range { font-size: 10px; }
  .daystrip button { min-width: 44px; padding: 4px 6px; border-radius: 8px; }
  .daystrip button .dow { font-size: 10px; }
  .daystrip button .dnum { font-size: 14px; }

  /* --- основна область --- */
  .layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;   /* дошка займає всю вільну висоту */
    align-items: stretch;
    padding: 8px;
    gap: 8px;
  }

  .board {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .board-head { padding: 6px 10px; gap: 8px; }
  .board-head h2 { font-size: 13px; }
  .board-head p { font-size: 11px; }
  .board-head .linklike { font-size: 11px; }

  /* --- сітка вписується в ширину, скрол лише вертикальний --- */
  .grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .grid { min-width: 0; width: 100%; align-content: start; }
  .room-col { min-width: 0; }

  .room-head { padding: 7px 7px; gap: 5px; white-space: normal; }
  .room-head .rname { font-size: 11px; line-height: 1.15; }
  .room-head .rcount { display: none; }

  .time-label { font-size: 10px; padding-right: 5px; }

  .booking { left: 2px; right: 2px; padding: 3px 5px; border-radius: 6px; }
  .booking .b-time { font-size: 9px; }
  .booking .b-name { font-size: 11px; }
  .booking .b-purpose { display: none; }

  /* --- модалки на всю ширину --- */
  .modal, .modal.narrow, .modal.wide { width: calc(100vw - 16px); }
  .modal-body { max-height: 62vh; }
}

/* ------------------------------------------------- щільна сітка (15 хв) --- */
/* Коли слот низький, підписи півгодин злипаються з годинними, а в блоці
   лишається місце лише на імʼя. */
.grid.dense .time-label { font-size: 10px; transform: translateY(-5px); }
.grid.dense .time-label.half { visibility: hidden; }

.booking.tiny { padding: 0 5px; display: flex; align-items: center; }
.booking.tiny .b-time { display: none; }
.booking.tiny .b-name { font-size: 10px; line-height: 1.1; }

.fatal { padding: 40px; font-family: var(--font); }