@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f00.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f01.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f02.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f03.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f04.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f05.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f06.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f07.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f08.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f09.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/f10.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/f11.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: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/f12.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/f13.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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f14.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f15.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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f16.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f17.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f18.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/f19.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/f20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/f21.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;
}

/* Рута CRM (демо; код спільний із Chebrets) — світла, щільна, без зайвого хрому. Головне правило: усе видно з першого екрана. */
:root{
  /* ── Палітра з брендбуку «Чебрець» — та сама, що на сайті ──
     Для тексту на кремі — затемнені відтінки тих самих родин (контраст AA). */
  --bg:#F5F1E0;            /* крем, ледь притемнений під робочі поверхні */
  --card:#FFFCF0;
  --ink:#34412C;           /* Темна кора */
  --ink-soft:#4A5442;
  --muted:#7A5F62;         /* родина «троянди», 5.3:1 на кремі */
  --line:#E4DECB;
  --line-2:#CBC4AC;
  --forest:#34412C;        /* шапка й акцентні плашки — «кора» */
  --moss:#3B5844;          /* Ліс — основний акцент, кнопки */
  --moss-soft:#E7ECE2;
  --ember:#503211;         /* Теплий дуб — попередження, витрати */
  --ember-soft:#F3E9DC;
  --red:#A83A2A;
  --red-soft:#FBEAE7;
  --gold:#DCB5B3;          /* Рожева пудра — ТІЛЬКИ на темному тлі */
  --gold-ink:#8A5B50;      /* пудра для тексту на світлому, 5:1 */
  --r:12px;
  --shadow:0 1px 2px rgba(52,65,44,.05), 0 8px 22px -14px rgba(52,65,44,.32);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--moss)}
/* Заголовки — серифний бренд-шрифт, як на сайті; тіло й цифри — Montserrat */
h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:600;margin:0 0 4px;letter-spacing:0}
h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;margin:0 0 14px}
h3{font-size:15px;margin:0 0 10px;font-weight:600}
.mono{font-variant-numeric:tabular-nums}

/* ── шапка ───────────────────────────────────────── */
.top{
  /* Шар 40, а не 30: випадайка клієнта у фільтрах (.cs-list, z-index:30) лежить
     у розмітці нижче, і при однакових шарах малювалась ПОВЕРХ липкої шапки. */
  background:var(--forest);color:#F5F1E0;position:sticky;top:0;z-index:40;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
  padding-top:env(safe-area-inset-top,0px);      /* «чубчик» і панель Telegram */
}
/* Усе, що ВИЩЕ шапки, заливаємо її ж кольором: у вбудованому браузері Telegram
   вікно тягнеться під напівпрозору адресну панель, і крізь неї просвічувала
   сторінка — виглядало як дірка над шапкою. */
.nav-veil{
  position:fixed;left:0;right:0;bottom:100%;height:100vh;
  background:var(--forest);z-index:29;pointer-events:none;
}
/* Контент, що підходить знизу, спершу розмивається й тане під шапкою */
/* Тільки м'яке розмиття, без темної смуги — щоб під шапкою не було відчуття тіні */
.top::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 30%,transparent 100%);
}
.top-in{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:56px}
.brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:21px;color:#F9F5E1;text-decoration:none;margin-right:14px;white-space:nowrap}
.brand span{color:var(--gold);font-weight:500;font-size:12px;display:block;line-height:1;margin-top:2px;letter-spacing:.14em;text-transform:uppercase}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{
  color:rgba(249,245,225,.74);text-decoration:none;padding:9px 14px;border-radius:8px;font-size:14.5px;
  transition:.15s;white-space:nowrap;
}
.top nav a:hover{background:rgba(249,245,225,.1);color:#fff}
.top nav a.on{background:rgba(220,181,179,.22);color:#fff;font-weight:600}
.top .out{color:rgba(249,245,225,.55);text-decoration:none;font-size:13.5px;padding:8px 10px}
.top .out:hover{color:#fff}

.wrap{max-width:1280px;margin:0 auto;
      padding:24px max(20px,env(safe-area-inset-right,0px)) 60px max(20px,env(safe-area-inset-left,0px))}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head p{margin:0;color:var(--muted);font-size:14px}

/* ── картки й сітки ──────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.grid{display:grid;gap:18px}
/* min-width:0 обов'язково: інакше широка таблиця всередині розпирає колонку
   сітки (у грід-елементів min-width:auto), і сторінка їде горизонтально
   замість того, щоб таблиця скролилась у своєму .scroll */
.grid > *{min-width:0}
.g2{grid-template-columns:1.25fr .75fr}
/* Клієнти: шість колонок у вузькій колонці сітки не вміщались і «Борг» різало.
   До 1400px список іде на всю ширину, форма додавання — під ним. */
.cl-page{grid-template-columns:1fr}
.cl-page .add-first{order:1;align-self:start}
/* Телефон і суми не переносяться, «Звідки» на середніх ширинах не критичне */
.cl-list .c-phone,.cl-list .c-sum,.cl-list .c-debt,.cl-list .c-trips{white-space:nowrap}
@media (max-width:1100px){
  .tbl.cl-list .c-src,.cl-list th:nth-child(3){display:none}
}
.g2e{grid-template-columns:1fr 1fr}
/* Верх Огляду: календарі зайнятості ліворуч, цифри-посилання праворуч. */
/* Верх Огляду ділиться динамічно: картка календарів просить рівно стільки, скільки
   треба її будиночкам (--occ-w рахує сервер: до трьох календарів у рядок), аналітика
   забирає всю решту й сама розкладає плитки в 2 або 4 колонки — за своєю шириною,
   а не за шириною вікна. Більше будиночків → вужча аналітика, і навпаки. */
.top-row{display:grid;grid-template-columns:minmax(0,var(--occ-w,860px)) minmax(300px,1fr);
         gap:16px;align-items:start;margin-bottom:18px}
.top-row .occ-card{margin-bottom:0;min-width:0}
/* у вузькій картці заголовок місяця не резервує зайвого — інакше кнопка
   «Календар броней» зривається на другий рядок */
.occ-card .cal-title{min-width:0}
.occ-card .occ-head{margin-bottom:12px}
.top-side{min-width:0;container-type:inline-size}
/* стабільні 2×2, поки колонка вузька — без «сироти» в другому ряду */
.top-side .tiles{grid-template-columns:repeat(2,1fr);margin-bottom:0}
/* Коли будиночків мало (або плитки стали на всю ширину), колонка широка —
   тоді 4 в рядок: 2×2 з плитками по 450px виглядали як порожні банери.
   Рахуємо саме ширину колонки: від кількості будиночків вона різна. */
@container (min-width:560px){
  .top-side .tiles{grid-template-columns:repeat(4,1fr)}
  .top-side .tile .v{font-size:24px}
}
@media(max-width:1150px){
  /* Аналітика переїжджає під календарі, обидві картки — на всю ширину.
     Порожнечі праворуч більше немає: календарі самі розтягуються на вільне
     місце (auto-fit), а поодинокий не роздувається — його стримує max-width. */
  .top-row{grid-template-columns:minmax(0,1fr)}
  .top-row .occ-card{margin-bottom:16px}
}

/* Плитки навмисно компактні: це рядок-заголовок сторінки, а не її зміст —
   під ними мусить одразу починатись календар зайнятості. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:10px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 16px;box-shadow:var(--shadow)}
.tile .k{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.tile .v{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.tile .s{font-size:11px;color:var(--muted);margin-top:1px;line-height:1.35}
/* Плитка-посилання: стрілка «go» проявляється при наведенні, щоб у спокої
   картка лишалась цифрою, а не рекламним банером. */
a.tile{display:block;text-decoration:none;color:inherit;position:relative;transition:.15s}
a.tile:hover{border-color:var(--moss);transform:translateY(-2px);
             box-shadow:0 2px 4px rgba(28,43,34,.06), 0 14px 30px -16px rgba(28,43,34,.45)}
a.tile .go{
  font-size:11px;font-weight:600;color:var(--moss);margin-top:5px;
  opacity:0;transform:translateY(-3px);transition:.15s;
}
a.tile:hover .go{opacity:1;transform:none}
a.tile.accent:hover{border-color:var(--gold)}
a.tile.accent .go{color:var(--gold)}
.tile.accent{background:var(--forest);border-color:var(--forest);color:#F5F1E0}
.tile.accent .k{color:rgba(249,245,225,.55)}
.tile.accent .v{color:var(--gold)}
.tile.accent .s{color:rgba(249,245,225,.62)}

/* ── таблиці ─────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--line);
}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#FAF8F2}
.tbl a{text-decoration:none;font-weight:600}
.tbl a:hover{text-decoration:underline}
.tbl .r{text-align:right}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .sub{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.scroll{overflow-x:auto;margin:0 -22px;padding:0 22px}
.empty{padding:34px 10px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* ── статуси ─────────────────────────────────────── */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.st-new{background:var(--ember-soft);color:var(--ember)}
.st-conf{background:var(--moss-soft);color:var(--moss)}
.st-done{background:#EDEBE4;color:var(--ink-soft)}
.st-cancel{background:var(--red-soft);color:var(--red);text-decoration:line-through}
.pay-ok{background:var(--moss-soft);color:var(--moss)}
.pay-part{background:#FBF4E3;color:var(--gold-ink)}
/* «Не оплачено» — найтривожніший стан, а був найблідішим із трьох: фон майже
   зливався з полотном сторінки. Тепер він помітний, як і «частково». */
.pay-no{background:#FBEDE9;color:#8A3D2E;border:1px solid #F0D9D1}
.pay-over{background:var(--ember-soft);color:var(--ember)}

/* ── форми ───────────────────────────────────────── */
.field{margin-bottom:15px}
.field label,.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  /* min-width:0 обов'язково: у поля є природна мінімальна ширина (атрибут size,
     20 символів за замовчуванням), і на вузькому екрані воно розпирає картку
     за межі вікна — сторінка їде вбік. width:100% цього не рятує. */
  width:100%;min-width:0;font:400 14.5px 'Montserrat',sans-serif;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:9px;background:#fff;color:var(--ink);
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--moss);outline-offset:1px;border-color:transparent}
.row{display:grid;gap:12px}
/* min-width:0 обов'язково: у грід-елементів мінімум за замовчуванням «auto»,
   тож довге поле (textarea, select із довгим пунктом) розпирає рядок ширше
   за колонку — і картка вилазить за екран, а край її мовчки зрізає.
   Саме через це на телефоні губились суми й кнопки в картці броні. */
.row > *{min-width:0}
.row2{grid-template-columns:1fr 1fr}
.row3{grid-template-columns:1fr 1fr 1fr}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;margin-bottom:10px}
.chk input{width:17px;height:17px;accent-color:var(--moss);margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14px 'Montserrat',sans-serif;padding:11px 18px;border-radius:9px;border:1px solid transparent;
  background:var(--moss);color:#fff;cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap;
}
.btn:hover{background:#254934}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:8px}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:#F6F3EB;border-color:var(--moss);color:var(--moss)}
.btn.amber{background:var(--ember)}
.btn.amber:hover{background:#A5551F}
.btn.danger{background:#fff;color:var(--red);border-color:#E7CFC9}
.btn.danger:hover{background:var(--red-soft)}
.btn.full{width:100%}
.btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ── дрібне ──────────────────────────────────────── */
.flash{padding:13px 18px;border-radius:10px;margin-bottom:18px;font-size:14.5px;font-weight:500}
/* Смуга демо-стенда: тепла, але не тривожна — це не помилка, а пояснення */
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 16px;border-radius:10px;margin-bottom:16px;font-size:13.5px;line-height:1.45;
  background:var(--ember-soft);color:var(--ember);border:1px dashed rgba(80,50,17,.35)}
.demo-bar b{font-weight:700}
.demo-bar form{margin:0}
.demo-bar .lnk{color:inherit;font-weight:600;white-space:nowrap}
.demo-bar .lnk:hover{opacity:.75}
.flash.ok{background:var(--moss-soft);color:var(--moss)}
.flash.err{background:var(--red-soft);color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:13px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.sep{height:1px;background:var(--line);margin:18px 0}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.kv:last-child{border-bottom:0}
/* Довгі значення («щоранку: заїзди й прибирання на сьогодні») з nowrap вилазили
   за межі картки не лише на телефоні, а й на середніх ширинах вікна. */
.kv b{white-space:normal;text-align:right}
.total-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:14px;margin-top:8px;border-top:2px solid var(--ink);font-size:16px}
.total-line b{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600}
.search{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search input{width:auto;flex:1;min-width:180px}

/* ── помітний рядок пошуку ─────────────────────────── */
.search.big{gap:10px;margin-bottom:14px}
.search.big .s-box{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:0 14px;
  transition:border-color .15s, box-shadow .15s;
}
.search.big .s-box:focus-within{border-color:var(--moss);box-shadow:0 0 0 3px rgba(59,88,68,.14)}
.search.big .s-ic{color:var(--muted);flex:none}
.search.big .s-box:focus-within .s-ic{color:var(--moss)}
.search.big input{
  flex:1;min-width:0;border:0;background:transparent;padding:13px 0;font-size:15px;
}
.search.big input:focus{outline:none}
.search.big input::placeholder{color:var(--muted)}
.search.big .btn{padding:12px 18px}

/* ── фільтри списку: живуть у шапці сторінки, між назвою і кнопками ────────
   Забирають вільну ширину посередині; коли її бракує — переносяться цілим
   блоком під назву, а кнопки лишаються праворуч. */
.lf-row{flex:1 1 520px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px}
.lf-g{display:flex;align-items:center;gap:8px}
.lf-g label{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0;white-space:nowrap}
.lf-g input[type=date],.lf-g select{width:auto;padding:8px 11px;font-size:13.5px}
/* Клієнт: поле з живим фільтром поверх select-а */
.lf-cs .cs{display:inline-block;width:180px}
.lf-cs .cs input{width:100%;padding:8px 11px;font-size:13.5px}
.lf-cs .cs-x{top:6px;width:22px;height:22px;font-size:13px;line-height:1}
.lf-cs .cs-list{min-width:300px;max-height:320px}
/* Шапка «Броней» несе ще й фільтри: коли вони переносяться у два рядки,
   назва сторінки має лишатись поруч, а не провисати вниз. */
.bk-head{align-items:center}
.lf-note{font-size:12.5px;color:var(--muted);margin-left:auto}
/* Мітка «рахунок розійшовся з бронню» у списку рахунків */
.inv-stale-tag{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;
  color:var(--ember);text-decoration:none;white-space:nowrap}
.inv-stale-tag:hover{text-decoration:underline}
/* Борг у списку клієнтів */
.c-debt b{color:var(--gold-ink);font-weight:700}

/* Короткий підсумок боргів у Фінансах (сам список — на «Внести оплату») */
.debt-brief{margin-top:14px}
.db-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line)}
.db-line:last-child{border-bottom:0}
.db-k{flex:1 1 200px;min-width:0;font-size:14px;color:var(--ink-soft)}
.db-k.late{color:var(--red);font-weight:600}
.db-line b{font-size:17px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.db-line em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* Підсумок просто в заголовку колонки — у дужках, тим самим дрібним шрифтом.
   Окремий рядок під шапкою читався як ще одна бронь. */
.th-tot{
  font-style:normal;font-weight:700;color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;
}
.th-tot::before{content:'('}
.th-tot::after{content:')'}

/* Пресети періоду — швидше, ніж набирати дві дати в нативному полі */
.lf-presets{gap:6px}
.lf-presets a{
  padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
}
.lf-presets a:hover{border-color:var(--moss);color:var(--moss)}
.lf-presets a.on{background:var(--moss);border-color:var(--moss);color:#fff}
/* Згортання фільтрів: на ноуті summary не потрібне (скрипт тримає open) */
.lf-fold{flex:1 1 100%;min-width:0}
.lf-fold > summary{display:none;list-style:none}
.lf-fold > summary::-webkit-details-marker{display:none}
.lf-fold-body{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px}
@media (max-width:900px){
  .lf-fold > summary{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    padding:9px 14px;border:1px solid var(--line-2);border-radius:9px;background:#fff;
    font-size:13.5px;font-weight:600;color:var(--ink-soft);
  }
  .lf-fold > summary::after{content:'▾';font-size:11px;color:var(--muted)}
  .lf-fold[open] > summary{margin-bottom:10px}
  .lf-fold[open] > summary::after{content:'▴'}
}
/* Миттєвий пошук ховає вкладки й фільтри атрибутом hidden, а display:flex
   із класу його перебивав — тому ховаємо явно. */
.tabs[hidden],.lf-row[hidden]{display:none}
@media (max-width:900px){
  /* на телефоні підпис і поле стають парою на всю ширину, інакше дата обрізається */
  .lf-row{gap:8px 10px}
  .lf-g{flex:1 1 46%}
  .lf-g input[type=date],.lf-g select{flex:1;min-width:0}
  .lf-cs{flex:1 1 100%}
  .lf-cs .cs{flex:1;width:auto}
  .lf-note{margin-left:0;flex:1 0 100%}
}

/* ── миттєві результати під пошуком ────────────────── */
.sr{margin:0 0 6px}
.sr-head{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:2px 0 8px;
}
.sr-none{color:var(--muted);font-size:14px;margin:6px 0 12px}
.sr-row{
  display:block;text-decoration:none;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--moss);border-radius:10px;
  padding:10px 13px;margin-bottom:7px;transition:.15s;
}
.sr-row:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--line-2)}
.sr-t{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sr-t b{font-size:14.5px;font-weight:600}
.sr-t b em{font-style:normal;font-weight:400;color:var(--muted);font-size:12.5px}
.sr-t i{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.sr-m{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.sr-p{display:flex;gap:6px;margin-top:7px}
.hit{background:rgba(220,181,179,.45);color:var(--ink);border-radius:3px;padding:0 1px}

/* ── меню «Ще» в шапці ─────────────────────────────── */
/* ⚠️ «Ще» показуємо і на ноуті: Кошик, Ціни за періодами, Календар броней,
   аркуш на день і «Що нового» жили ТІЛЬКИ в цьому меню, а на великому екрані
   воно було сховане — розділи не існували для того, хто працює за столом. */
.more{position:relative}
.more > summary{
  list-style:none;cursor:pointer;color:rgba(249,245,225,.74);padding:9px 14px;border-radius:8px;
  font-size:14.5px;white-space:nowrap;user-select:none;
}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:' ▾';opacity:.7}
.more > summary:hover{background:rgba(249,245,225,.1);color:#fff}
.more > summary.on{background:rgba(220,181,179,.22);color:#fff;font-weight:600}
.more[open] > summary{background:rgba(249,245,225,.14);color:#fff}
.more-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:210px;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 10px 30px -10px rgba(26,33,22,.55);
}
.more-menu a{
  display:block;padding:11px 13px;border-radius:8px;text-decoration:none;
  color:var(--ink);font-size:14.5px;font-weight:500;
}
.more-menu a:hover{background:var(--moss-soft);color:var(--moss)}
/* Списки броней і клієнтів на телефоні. Раніше кожна клітинка ставала рядком
   «підпис → значення» — одна бронь займала пів екрана й читалась як анкета.
   Тепер це щільна картка з власною розкладкою: головне ліворуч, гроші й стан праворуч. */
.onmob{display:none}
@media(max-width:820px){
  .list-tbl thead{display:none}
  .list-tbl,.list-tbl tbody{display:block;width:100%}
  .list-tbl tr{
    display:grid;column-gap:10px;row-gap:3px;align-items:baseline;
    border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:11px;
    padding:11px 13px;margin-bottom:9px;background:#fff;
  }
  .list-tbl tr:hover{background:#fff}
  /* Підказка «рядок клікабельний» — смужка в першій комірці — має сенс у таблиці,
     де перша комірка стоїть скраю. У картці це дата посеред картки, і смужка
     виглядала як зайвий елемент біля дат. Картка й так підіймається тінню. */
  .list-tbl tr[data-href]:hover td:first-child{box-shadow:none}
  /* .tbl td у мобільному блоці нижче теж ставить padding — беремо вищою вагою */
  .tbl.list-tbl td{display:block;border:0;padding:0;text-align:left}
  .list-tbl td::before{display:none}         /* підписи більше не потрібні */
  .list-tbl .sub{display:inline;margin-left:7px;color:var(--muted);font-size:12.5px}
  .list-tbl .onmob{display:inline;font-weight:400;color:var(--muted)}
  .list-tbl .pill{font-size:11px;padding:3px 9px}

  /* Броні: дати+сума, клієнт, будиночок+гості+оплата */
  .bk-list tr{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"dates dates sum" "client client client" "house guests pay";
  }
  .bk-list .c-dates{grid-area:dates;font-size:15px;font-weight:600;min-width:0}
  .bk-list .c-dates a{color:var(--ink)}
  /* Підпис «№27 · 2026 · 2 ночі» стояв у тому ж рядку, що й дати, вилазив за
     межі комірки і напливав на суму праворуч. Даємо йому власний рядок. */
  .bk-list .c-dates .sub{display:block;margin-left:0;margin-top:1px}
  /* .tbl .num забороняє перенос — довгий діапазон («25 вересня — 11 жовтня»)
     через це вилазив за картку в БУДЬ-ЯКОМУ списку з датами. Дозволяємо перенос. */
  .list-tbl .c-dates,.list-tbl .c-dates a{white-space:normal}
  .bk-list .c-sum{grid-area:sum;font-size:15px;font-weight:700;text-align:right}
  .bk-list .c-client{grid-area:client;font-size:13.5px;color:var(--ink-soft)}
  .bk-list .c-pay{grid-area:pay;text-align:right;justify-self:end}
  /* вкладки списку: на телефоні дрібніші, щоб не з'їдали екран перед списком
     (вища вага, бо базове правило .tabs a стоїть у файлі нижче) */
  .card .tabs a{padding:7px 12px;font-size:13px}
  .card .search{margin-bottom:12px}
  .bk-list .c-house{grid-area:house;font-size:12.5px;color:var(--muted)}
  .bk-list .c-guests{grid-area:guests;font-size:12.5px;color:var(--muted)}
  .bk-list .c-guests::before{content:'· '}
  .bk-list tr{margin-bottom:10px}
  /* На 320px рвались саме змістовні зв'язки: «1 / ніч», «15–19 / вересня»,
     «ще 1 / 950 ₴». Дата й підпис — нерозривні, сума боргу теж. */
  .bk-list .c-dates a{white-space:nowrap}
  .bk-list .c-dates .sub{white-space:nowrap;font-size:11.5px}
  .bk-list .c-pay{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  .bk-list .c-left{white-space:nowrap;font-size:12px;color:var(--gold-ink);font-weight:600}
}
@media (max-width:380px){
  /* найвужчий екран: дрібніший кегль дат замість переносу посеред фрази */
  .bk-list .c-dates a{font-size:14px}
  .bk-list .c-dates .sub{font-size:11px}

  /* Рахунки: номер+сума, клієнт+період, стан+кнопки */
  .inv-list tr{
    grid-template-columns:1fr auto;
    grid-template-areas:"num sum" "cl per" "st st" "act act";
  }
  /* «№ CH1-2026-012» ламався на 2–4 рядки: номер — нерозривний */
  .inv-list .c-num{grid-area:num;font-size:15px;font-weight:600;min-width:0}
  .inv-list .c-num a{color:var(--ink);white-space:nowrap}
  .inv-list .c-sum,.inv-list .c-per{white-space:nowrap}
  .inv-list .c-sum{grid-area:sum;text-align:right;font-size:15px}
  .inv-list .c-cl{grid-area:cl;font-size:13px;color:var(--ink-soft)}
  .inv-list .c-per{grid-area:per;font-size:12.5px;color:var(--muted);text-align:right}
  /* вища вага, бо .tbl.list-tbl td вище ставить display:block */
  .tbl.inv-list .c-date{display:none}
  .inv-list .c-st{grid-area:st;margin-top:4px}
  .inv-list .c-act{grid-area:act;margin-top:6px}
  .inv-list .c-act .btns{justify-content:flex-end;flex-wrap:wrap!important}

  /* Найближчі заїзди на Огляді: та сама картка, що в списку броней */
  /* Рядок 1: дати · будиночок … сума. Рядок 2: імʼя з контактами.
     Рядок 3: послуги й примітка. Раніше будиночок стояв аж унизу поруч
     з інстаграмом, а телефон — біля імені, і контакти були розкидані. */
  .up-list tr{
    /* Дати — гнучка колонка: довгий діапазон переноситься всередині себе,
       а будиночок і сума лишаються праворуч на своїх місцях. */
    /* Мінімум під найдовше слово («вересня»): без нього на 320px колонка
       стискалась до 48px і текст вилазив за картку. */
    grid-template-columns:minmax(74px,1fr) auto auto;
    grid-template-areas:"dates house sum" "client client client" "extra extra extra";
  }
  .up-list .c-dates{grid-area:dates;font-size:15px;font-weight:600}
  .up-list .c-dates a{color:var(--ink)}
  .up-list .c-sum{grid-area:sum;font-size:15px;font-weight:700;text-align:right;align-self:start}
  .up-list .c-client{grid-area:client;font-size:13.5px;color:var(--ink-soft)}
  .up-list .c-house{grid-area:house;font-size:13px;color:var(--ink-soft);font-weight:600;align-self:start;white-space:nowrap}
  /* «N ночей» у перший рядок разом із будиночком і сумою не вміщається і рве
     його навпіл. Діапазон дат і так це показує, тож на телефоні прибираємо. */
  .up-list .c-dates .sub{display:none}
  .up-list .c-house::before{content:'· ';color:var(--muted);font-weight:400}
  .up-list .c-extra{grid-area:extra}
  .up-list .c-extra:empty,.up-list .c-extra:not(:has(i,.up-note)){display:none}

  /* Клієнти: імʼя+сума, телефон+звідки+броні */
  .cl-list tr{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"name name sum" "phone src trips";
  }
  .cl-list .c-name{grid-area:name;font-size:15px;font-weight:600}
  .cl-list .c-name a{color:var(--ink)}
  .cl-list .c-sum{grid-area:sum;font-size:15px;font-weight:700;text-align:right}
  .cl-list .c-phone{grid-area:phone;font-size:13px;color:var(--ink-soft)}
  .cl-list .c-src{grid-area:src;font-size:12.5px;color:var(--muted)}
  .cl-list .c-src::before{content:'· '}
  .cl-list .c-trips{grid-area:trips;font-size:12.5px;color:var(--muted);text-align:right}
}

/* Довідник послуг: на десктопі таблиця, на телефоні — картки.
   У вигляді таблиці кнопка «Зберегти» їхала за край екрана й була недосяжна. */
.svc-tbl .cellwrap{display:block}
.svc-tbl .btn.sm{white-space:nowrap}
@media(max-width:820px){
  .svc-tbl thead{display:none}
  .svc-tbl,.svc-tbl tbody,.svc-tbl tr,.svc-tbl td{display:block;width:100%}
  .svc-tbl tr{
    border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:12px;background:#FAF8F2;
  }
  .svc-tbl td{border:0;padding:6px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .svc-tbl td::before{
    content:attr(data-l);flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);
  }
  .svc-tbl td[data-l=""]{padding-top:10px;margin-top:6px;border-top:1px dashed var(--line);justify-content:flex-end}
  .svc-tbl td.r{text-align:left}
  .svc-tbl .cellwrap{flex:1;min-width:0}
  .svc-tbl input[type=text]{width:100%;min-width:0!important}
  .svc-tbl input[type=number]{width:110px!important}
}

/* підрозділи Налаштувань — окремий рядок під шапкою */
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.subnav a{
  padding:8px 15px;border-radius:8px;text-decoration:none;color:var(--ink-soft);
  font-size:14px;font-weight:600;transition:.15s;
}
.subnav a:hover{background:#fff;color:var(--moss)}
.subnav a.on{background:var(--forest);color:#EFE7D6}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border-radius:8px;background:#fff;border:1px solid var(--line);text-decoration:none;
        color:var(--ink-soft);font-size:13.5px;font-weight:600}
.tabs a.on{background:var(--moss);color:#fff;border-color:var(--moss)}

/* швидке додавання послуги в один клік */
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{
  font:600 13.5px 'Montserrat',sans-serif;background:#fff;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 15px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:.15s;
}
.quick button:hover{border-color:var(--moss);background:var(--moss-soft);color:var(--moss)}
.quick button b{font-weight:400;color:var(--muted);font-size:12.5px}
.quick button:hover b{color:var(--moss)}

/* ── фінанси: стовпчики року ─────────────────────── */
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:11px;height:11px;border-radius:3px}
.chart-legend .lg-paid{background:var(--moss)}
.chart-legend .lg-acc{background:rgba(47,92,66,.25)}
.chart-legend .lg-spent{background:var(--ember)}
.chart{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;min-width:720px;padding-top:8px}
.ch-m{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
      border-radius:9px;padding:6px 3px;transition:.15s}
.ch-m:hover{background:#FAF8F2}
.ch-m.on{background:var(--moss-soft);box-shadow:inset 0 0 0 1px rgba(47,92,66,.3)}
.ch-v{font-size:10.5px;color:var(--ink-soft);font-weight:700;height:14px;white-space:nowrap}
/* стовпчики ростуть від низу; нараховане — тлом, оплачене й витрати — поверх */
.ch-bars{display:flex;align-items:flex-end;gap:3px;height:132px;position:relative}
/* лінія-основа тягнеться за межі колонки, тож сусідні зливаються в суцільну вісь */
.ch-bars::after{content:'';position:absolute;left:-60%;right:-60%;bottom:-1px;height:1px;background:var(--line)}
.ch-bars i{width:9px;border-radius:3px 3px 0 0;min-height:0;transition:.15s}
.ch-bars .acc{background:rgba(47,92,66,.25)}
.ch-bars .paid{background:var(--moss)}
.ch-bars .spent{background:var(--ember)}
.ch-n{font-size:11px;color:var(--muted);font-weight:600}
.ch-m.on .ch-n{color:var(--moss)}
.exp-form{background:#FAF8F2;border:1px solid var(--line);border-radius:10px;padding:14px}

/* ── фінанси: борги ──────────────────────────────── */
/* min(330px,100%) — інакше на екрані 320px колонка вимагає 330 і картка боржника
   вилазить за край: суми обрізались рівно там, де про них найважливіше знати. */
.debts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:14px;margin-top:16px}
.debt{border:1px solid var(--line);border-left:3px solid var(--gold-ink);border-radius:10px;padding:14px 16px;background:#FAF8F2}
.debt.late{border-left-color:var(--red);background:#FCF6F4}
.debt-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.debt-c{font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.debt-c:hover{color:var(--moss);text-decoration:underline}
.debt-m{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.late-tag{display:inline-block;margin-left:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
          background:var(--red-soft);color:var(--red);padding:2px 6px;border-radius:4px}
.debt-sum{text-align:right;white-space:nowrap}
.debt-sum b{display:block;font-size:19px;font-weight:700;color:var(--gold-ink)}
.debt.late .debt-sum b{color:var(--red)}
.debt-sum span{font-size:11.5px;color:var(--muted)}
.debt-items{border-top:1px dashed var(--line);padding-top:9px}
/* Назва позиції переноситься, сума — ніколи не стискається: на вузькому екрані
   рвалось саме число («−1 80» замість «−1 800 ₴»). */
.di{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;color:var(--ink-soft)}
.di > :first-child{min-width:0}
.di b{color:var(--ink);white-space:nowrap;flex:0 0 auto}
.di.paid{border-top:1px dashed var(--line);margin-top:5px;padding-top:6px;color:var(--moss)}
.di.paid b{color:var(--moss)}
.debt-a{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ── сьогодні і завтра ───────────────────────────── */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.dd-col{background:#FAF8F2;border:1px solid var(--line);border-radius:10px;padding:12px 14px 10px}
.dd-col.now{border-color:rgba(47,92,66,.45);background:#fff}
.dd-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
      padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.dd-h b{font-size:15px}
.dd-h span{font-size:12px;color:var(--muted)}
.dd-sec + .dd-sec{margin-top:12px}
.dd-l{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;
      text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:6px}
.dd-l i{font-style:normal;font-size:10px;padding:1px 7px;border-radius:999px;
        background:rgba(28,43,34,.08);color:var(--ink-soft)}
.dd-l.in{color:var(--moss)}
.dd-l.in i{background:var(--moss-soft);color:var(--moss)}
.dd-l.out{color:var(--ember)}
.dd-l.out i{background:var(--ember-soft);color:var(--ember)}
.dd-none{font-size:12px;color:var(--muted);margin:0;padding:2px 0 0}
/* Рядок броні: ліва кольорова риска каже, це заїзд, виїзд чи «гостюють». */
.dr{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
    border-left:3px solid var(--line-2);border-radius:8px;padding:9px 11px;margin-bottom:6px;transition:.15s}
.dr:last-child{margin-bottom:0}
/* рядок клікається цілком (data-href), а імʼя всередині — звичайне посилання */
.dr[data-href],.lead-row[data-href]{cursor:pointer}
.dr-nm{color:inherit;text-decoration:none}
/* Піктограма «скопіювати текст для гостя» — без підпису, поруч із сумою.
   Ціль ≥28px: пальцем на телефоні в самий значок 14px не влучити. */
.dm-ic{
  /* Було 28×28 без підпису: ціль замала для пальця, а призначення видно лише
     під мишкою. Тепер зі словом і мінімальною висотою 40px. */
  display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:-10px;
  min-height:40px;padding:0 11px;margin-left:6px;border:1px solid var(--line-2);
  border-radius:9px;background:#fff;color:var(--muted);cursor:pointer;transition:.15s;
  font:inherit;font-size:12.5px;
}
.dm-ic .dm-w{white-space:nowrap}
.dm-ic:hover{color:var(--moss);border-color:var(--moss);background:var(--moss-soft)}
.dm-ic:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
/* після копіювання значок на мить стає галочкою */
.dm-ic.done{color:var(--moss);border-color:var(--moss);background:var(--moss-soft)}
.dm-ic.done svg{display:none}
.dm-ic.done::after{content:'✓';font-size:14px;font-weight:700;line-height:1}
/* Instagram у цих рядках — частина дрібного підпису, а не окремий акцент:
   базові 13.5px тут вибивались із рядка й тягли перенос. */
.dr-m .up-ig{font-size:11.5px}
.lead-row .lr-sub .up-ig{font-size:12.5px}
.dr[data-href]:hover .dr-nm,.lead-row[data-href]:hover .dr-nm{text-decoration:underline}
.dr:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--line-2)}
/* Заїзд — зелена картка, виїзд — приглушено-червона: видно з першого погляду,
   без окремих підписів «Заїзди / Виїзди» над списками. */
.dr.in{border-left-color:var(--moss);background:#F3F7F0;border-color:#D8E3D2}
.dr.out{border-left-color:#B4674F;background:#FCF4F1;border-color:#EBD6CE}
.dr.stay{border-left-color:var(--line-2)}
/* «(заїзд)» / «(виїзд)» просто біля імені */
.dr-mark{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.dr-mark::before{content:'('}
.dr-mark::after{content:')'}
.dr.in .dr-mark{color:var(--moss)}
.dr.out .dr-mark{color:#A2543C}
.dr.stay .dr-mark{color:var(--muted);font-weight:600}
.dr-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dr-t b{font-size:14px;font-weight:600}
.dr-sum{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-m{font-size:11.5px;color:var(--muted);margin-top:1px}
/* дати заїзду–виїзду — головне в рядку після імені, тому темніші за решту */
.dr-d{color:var(--ink-soft);font-weight:600}
.dr-s{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.dr-s i{font-style:normal;font-size:10.5px;font-weight:600;background:var(--moss-soft);color:var(--moss);
        padding:2px 8px;border-radius:5px}
.dr-s i em{font-style:normal;font-weight:400;opacity:.75}
.dr-debt{margin-top:7px;font-size:12px;color:var(--gold-ink);font-weight:600}
.dr-debt b{font-size:12.5px}
.dr-ok{margin-top:7px;font-size:11px;color:var(--moss)}

/* ── міні-календарі зайнятості на Огляді ─────────── */
.occ-card{margin-bottom:18px}
.occ-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
/* Календарики розтягуються на ширину картки (auto-fit), але не вужчі за --occ-min
   і не ширші за 344px: три будиночки дають клітинку ~32px — у неї вже влучаєш
   мишею без прицілювання, а один будиночок не роздувається на пів екрана
   (на планшеті виходили кружечки по 80px). Зайву ширину віддаємо полям, тож
   поодинокий календар стоїть по центру картки, а не тулиться ліворуч.
   Клітинка лишається квадратом (aspect-ratio), тож кружечки не стають овалами. */
.occ-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--occ-min,232px)),1fr))}
.occ-m{width:100%;max-width:344px;margin-inline:auto;container-type:inline-size;
       background:#FAF8F2;border:1px solid var(--line);border-radius:9px;padding:10px 11px 11px;box-sizing:border-box}
/* Назва будиночка вузька на дрібних картках — лічильник переносимо під неї,
   а не тиснемо обидва в один рядок (раніше «Хатина «Смерека»» рвалась навпіл). */
.occ-t{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap}
.occ-t .dot{width:8px;height:8px;border-radius:50%;flex:none}
.occ-t b{font-size:12.5px;min-width:0}
.occ-t em{font-style:normal;margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
/* призупинений будиночок лишається видимим, поки має незавершені броні */
.occ-m.off{background:#F6F3EA;border-style:dashed}
.occ-off{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
         background:var(--ember-soft);color:var(--ember);padding:2px 6px;border-radius:4px;text-decoration:none}
.occ-off:hover{background:var(--ember);color:#fff}
.occ-m .cy-w{gap:2px;margin-bottom:2px}
.occ-m .cy-w span{font-size:8px}
.occ-m .cy-g{gap:2px}
/* Дні — кружечки: квадратна клітинка (aspect-ratio) + повне заокруглення.
   Половинки заїзду/виїзду лишаються градієнтом і читаються як половинки кола. */
.occ-m .cy-e{aspect-ratio:1;height:auto}
.occ-d{
  aspect-ratio:1;height:auto;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;transition:.12s;
}
/* збільшення робить сам transform — фіксований font-size на hover «з'їдав» би
   цифру там, де календарик широкий і шрифт уже більший */
.occ-d:hover{border-color:var(--moss);transform:scale(1.3);z-index:3;box-shadow:var(--shadow)}
.occ-d.past{color:rgba(28,43,34,.28);background:#FCFAF5}
/* Ширший календарик — більший підпис: інакше в кружечку 32px стоїть 9-піксельна
   цифра й читається як крихта. Міряємо саме картку (container), а не вікно:
   ширина календарика залежить від кількості будиночків, а не від екрана. */
@container (min-width:212px){ .occ-t b{font-size:13.5px} .occ-m .cy-w span{font-size:9.5px} .occ-d{font-size:11px} }
@container (min-width:252px){ .occ-t b{font-size:14px} .occ-m .cy-w span{font-size:10.5px} .occ-d{font-size:12px} }
/* День ділиться навпіл: ліва половина — ранок (виїзд), права — ніч (заїзд/ночівля).
   Тому суцільна ніч дає повну заливку, заїзд — праву половину, виїзд — ліву,
   а «один виїхав, другий заїхав» — два кольори в одній клітинці. */
.occ-d.whole{background:var(--c);border-color:var(--c);color:#fff}
.occ-d.in{background:linear-gradient(90deg,transparent 0 50%,var(--cr) 50% 100%)}
.occ-d.out{background:linear-gradient(90deg,var(--cl) 0 50%,transparent 50% 100%)}
.occ-d.split{background:linear-gradient(90deg,var(--cl) 0 50%,var(--cr) 50% 100%)}
/* число стоїть на межі двох кольорів (або кольору й білого) — світла обводка
   робить його читним у будь-якому поєднанні */
.occ-d.in,.occ-d.out,.occ-d.split{color:var(--ink);text-shadow:0 0 2px #fff,0 0 3px #fff}
.occ-d.whole:hover,.occ-d.split:hover,.occ-d.in:hover,.occ-d.out:hover{filter:brightness(1.1)}
.occ-d.now{box-shadow:0 0 0 2px var(--ember)}

/* ── календар броней ─────────────────────────────── */
.cal-card{padding:18px}
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cal-move{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Стрілки й місяць не розриваються між собою, хоч би яка вузька була картка */
.cal-nav{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;flex:0 0 auto}
.cal-nav .cal-title{white-space:nowrap}
.cal-move .mv{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;text-decoration:none;color:var(--ink-soft);font-size:15px;transition:.15s;
}
.cal-move .mv:hover{border-color:var(--moss);color:var(--moss);background:var(--moss-soft)}
.cal-title{font-size:17px;min-width:190px;text-align:center}
.cal-houses{display:flex;gap:6px;flex-wrap:wrap}
.hf{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink-soft);
  font-size:13px;font-weight:600;transition:.15s;
}
.hf i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.hf:hover{border-color:var(--line-2)}
.hf.on{background:var(--forest);color:#EFE7D6;border-color:var(--forest)}
/* призупинений будиночок у фільтрі — пунктиром, щоб не плутати з робочими */
.hf.off{border-style:dashed;color:var(--muted)}
.hf.off i{opacity:.55}

/* тиждень: сім довгих стовпців */
/* align-items:start — інакше всі сім стовпців тягнуться до висоти найвищого,
   і тиждень з однією бронню давав сім однакових порожніх прямокутників. */
.cw{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:8px;min-width:1080px;align-items:start}
.cw-col{background:#FAF8F2;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.cw-col.we{background:#F7F4EC}
.cw-col.now{border-color:var(--moss);box-shadow:0 0 0 1px var(--moss)}
.cw-h{padding:9px 11px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:baseline;gap:6px}
.cw-h span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cw-h b{font-size:17px;font-weight:700}
.cw-h em{font-style:normal;font-size:11.5px;color:var(--muted)}
.cw-col.now .cw-h b{color:var(--moss)}
/* Підлога висоти була 190px: тиждень із однією бронню займав ~270px на кожен
   із семи стовпців, тобто два екрани порожнечі. Тепер висоту тримає вміст,
   а 96px — просто достатня ціль для перетягування на порожній день. */
.cw-body{padding:8px;display:flex;flex-direction:column;gap:7px;min-height:96px}
.cw-free{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:8px 4px;
  text-decoration:none;border-radius:8px}
.cw-free i{font-style:normal;opacity:0;font-weight:600;color:var(--green)}
.cw-free:hover{background:#EDF1E7;color:var(--green)}
.cw-free:hover i{opacity:1}
.cw-b{
  display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--c);border-radius:8px;padding:9px 10px;transition:.15s;
}
.cw-b:hover{box-shadow:var(--shadow);border-color:var(--line-2);border-left-color:var(--c);transform:translateY(-1px)}
.cw-b .hn{display:block;font-size:11px;font-weight:700;color:var(--c);text-transform:uppercase;letter-spacing:.04em}
.cw-b .cn{display:block;font-weight:600;font-size:13.5px;margin-top:2px}
.cw-b .mt{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.cw-b .sv{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cw-b .sv i{
  font-style:normal;font-size:11px;background:var(--moss-soft);color:var(--moss);
  padding:2px 7px;border-radius:5px;font-weight:600;
}
.cw-b .in,.cw-b .out{
  display:inline-block;margin-top:6px;margin-right:4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;background:rgba(28,43,34,.09);color:var(--ink);
}
.cw-b .in{background:var(--moss-soft);color:var(--moss)}

/* місяць: класична сітка */
/* min-width такий самий, як у сітки .cm — інакше підписи днів їдуть відносно клітинок */
.cm-w{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;min-width:820px}
.cm-w span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-left:4px}
.cm{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;min-width:820px}
.cm-d{
  background:#FAF8F2;border:1px solid var(--line);border-radius:9px;padding:6px;
  min-height:104px;display:flex;flex-direction:column;gap:4px;
}
.cm-d.off{opacity:.45}
.cm-d.now{border-color:var(--moss);box-shadow:0 0 0 1px var(--moss);background:#fff}
.cm-n{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:0 2px}
.cm-n span{font-size:10px;background:var(--forest);color:#EFE7D6;border-radius:999px;padding:1px 6px;font-weight:700}
.cm-b{
  display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--c);border-radius:6px;padding:4px 6px;transition:.15s;
}
.cm-b:hover{border-color:var(--c);box-shadow:var(--shadow)}
.cm-b b{display:block;font-size:11px;font-weight:700;color:var(--c);line-height:1.25}
.cm-b span{display:block;font-size:11.5px;color:var(--ink);line-height:1.3}
.cm-b em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:1px}
.cm-more{font-size:10.5px;color:var(--muted);text-decoration:none;padding-left:4px}
.cm-more:hover{color:var(--moss);text-decoration:underline}

/* рік: дванадцять міні-місяців зі смужками по будиночках */
.cy{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.cy-m{background:#FAF8F2;border:1px solid var(--line);border-radius:10px;padding:11px 12px 12px}
.cy-m h5{margin:0 0 8px;font-size:13.5px}
.cy-m h5 a{text-decoration:none;color:var(--ink)}
.cy-m h5 a:hover{color:var(--moss);text-decoration:underline}
.cy-w{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.cy-w span{font-size:9px;color:var(--muted);text-align:center;font-weight:700}
.cy-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cy-e{aspect-ratio:1}
.cy-d{
  aspect-ratio:1;border-radius:5px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;transition:.12s;position:relative;
}
.cy-d:hover{border-color:var(--moss);transform:scale(1.12);z-index:2;box-shadow:var(--shadow)}
.cy-d b{
  font-size:9px;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1;
  margin-top:auto;padding-bottom:2px;
}
.cy-d.busy{background:#F6F2E8}
.cy-d.busy b{color:var(--ink);font-weight:700}
.cy-d.now{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember)}
/* смужки навмисно високі: на мініатюрі року це єдиний сигнал зайнятості */
.cy-d .bars{display:flex;gap:1px;height:9px;padding:1.5px 1.5px 0}
.cy-d .bars i{flex:1;border-radius:2px;background:rgba(28,43,34,.07)}
.cy-d .bars i.on{background:var(--c)}

@media(max-width:900px){
  .cal-bar{gap:10px}
  .cal-title{min-width:0;font-size:15.5px}
  /* Місяць більше не тягнеться на 900px у горизонтальний скрол: на телефоні
     з нього було видно 4 колонки з 7. Тепер сітка по ширині екрана, а броні —
     кольоровими смужками по будиночках, як у річному вигляді (він подобається).
     Назва й гість лишаються в підказці, тап так само відкриває бронь. */
  .cm,.cm-w{min-width:0}
  .cal-card .scroll{overflow:visible}
  .cm,.cm-w{gap:3px}
  .cm-w span{font-size:9px;letter-spacing:.04em;padding-left:0;text-align:center}
  .cm-d{min-height:58px;padding:4px 3px;gap:3px;border-radius:7px}
  .cm-n{font-size:11px;padding:0;justify-content:center}
  .cm-n span{font-size:9px;padding:0 4px;margin-left:3px}
  /* Бронь — смужка кольору будиночка замість тексту, який тут не вміщається */
  /* Видима смужка 7px, але натискається смуга ~19px: колір малюємо лише у
     внутрішній коробці, а падінг працює як невидима ціль для пальця. */
  .cm-b{border:0;background:var(--c);background-clip:content-box;
    height:7px;padding:6px 0;border-radius:3px;box-sizing:content-box}
  .cm-b b,.cm-b span,.cm-b em{display:none}
  .cm-b:hover{box-shadow:none;opacity:.8}
  .cm-more{font-size:9px;padding-left:0;text-align:center}
  .cm-add{width:18px;height:18px;line-height:16px;font-size:12px;right:3px;bottom:3px}
  /* Тиждень на телефоні: не горизонтальний скрол на 900px (видно було 2,5 дні з 7),
     а вертикальний список днів — кожен день своєю смугою на всю ширину. */
  /* align-items:start потрібен лише сітці на ноуті (щоб стовпці не тягнулись
     до висоти найвищого). У мобільному списку він, навпаки, стискав рядки по
     ширині вмісту — повертаємо розтягування. */
  .cw{display:flex;flex-direction:column;gap:8px;min-width:0;align-items:stretch}
  /* Дата дня трьома рядками («Пн» / «7» / «вересня») робила кожен рядок вищим
     за його вміст: вільний день займав стільки ж, скільки день із бронню.
     Тепер день і число — в один рядок. */
  .cw-h{display:grid;grid-template-columns:auto auto;justify-content:center;
    align-content:center;column-gap:6px;row-gap:1px;padding:6px}
  .cw-h span{grid-area:1/1}
  .cw-h b{grid-area:1/2;line-height:1.1}
  .cw-h em{grid-area:2/1/3/3;text-align:center;line-height:1.2}
  .cw-col{flex-direction:row;align-items:stretch}
  .cw-h{
    flex-direction:column;justify-content:center;align-items:center;gap:0;
    min-width:74px;border-bottom:0;border-right:1px solid var(--line);padding:8px 6px;
  }
  .cw-body{flex:1;min-height:0;padding:8px}
  .cw-free{padding:4px}
  .dd{grid-template-columns:1fr}
  /* На планшеті картка стає на всю ширину — беремо з цього більшу клітинку:
     два календарики в рядок замість трьох тісних. */
  .occ-grid{--occ-min:300px}
  .occ-t em{font-size:10px}
  .cy{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.thumb{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.thumb .t{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}

.invoice-frame{width:100%;height:1000px;border:1px solid var(--line);border-radius:var(--r);background:#fff}

@media(max-width:900px){
  .g2,.g2e{grid-template-columns:1fr}
  .row2,.row3{grid-template-columns:1fr}
  .wrap{padding:18px 14px 50px}
  .card{padding:16px}
  .scroll{margin:0 -16px;padding:0 16px}
  /* На телефоні меню не переносимо в чотири рядки (шапка з'їдала пів екрана),
     а робимо горизонтальний свайп по пунктах. */
  .top-in{padding:0 12px;flex-wrap:nowrap;gap:4px}
  .top nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{padding:8px 10px;font-size:13.5px}
  .brand{margin-right:6px;font-size:15px}
  /* Другорядні розділи й вихід переїжджають у меню «Ще» — інакше шапка
     перетворювалась на стрічку, яку доводилось прокручувати вбік. */
  .top nav a.sec{display:none}
  .top .out{display:none}
  .more{display:block;flex:none}
  .more > summary{padding:8px 11px;font-size:13.5px}
}
/* Шапка на вузькому телефоні: «Клієнти» не влазили й обрізались до «Кліє»
   на кожній сторінці CRM. Лишаємо Огляд · Броні · Ще, а «Клієнти» — у «Ще». */
@media (max-width:380px){
  .top nav a[href="/admin/clients"]{display:none}
  .top nav a{padding:8px 9px;font-size:13px}
  .brand{font-size:14px;margin-right:4px}
}
@media (min-width:381px){ .more-menu a.only-narrow{display:none} }

/* ── доступність і зручність (аудит 2026-08-20) ──── */
/* Видимий фокус із клавіатури: був лише в полів вводу, кнопки й посилання
   лишались невидимими для тих, хто ходить табом. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
.tile:focus-visible,.occ-d:focus-visible,.cy-d:focus-visible{
  outline:3px solid var(--ember);outline-offset:2px;border-radius:8px;
}
/* На телефоні рядок таблиці — головна ціль пальця, тож даємо їй висоту */
@media(max-width:900px){
  .tbl td{padding:14px 12px}
  .tbl a{display:inline-block;padding:2px 0}
  /* Кружечок лишається дрібним, а ціль пальця більша за нього — інакше
     квадратні клітинки давали 24px, а круглі лише 18px. */
  .occ-m{padding:8px 7px 9px}
  .occ-d{font-size:10.5px;position:relative}
  .occ-d::after{content:'';position:absolute;inset:-3px}
  .cy-d b{font-size:10px}
}

/* ── Фінанси: розбір після аудиту ─────────────────── */
/* Зміна до минулого місяця: зелена, якщо це добре саме для цієї цифри
   (дохід зріс — добре, витрати зросли — ні). */
.trend{font-weight:700;font-size:10.5px;padding:1px 5px;border-radius:4px;margin-left:4px;white-space:nowrap}
.trend.up{background:var(--moss-soft);color:var(--moss)}
.trend.down{background:var(--ember-soft);color:var(--ember)}
.tile.accent .trend.up{background:rgba(220,181,179,.2);color:#EFD3D1}
.tile.accent .trend.down{background:rgba(226,140,86,.22);color:#F2B487}

/* Дохід по будиночках — смуги, бо порівнюють між собою, а не читають точні числа */
.hbars{display:grid;gap:14px}
.hbar-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}
.hbar-t b{font-size:15px}
.hbar-t span{font-family:'Montserrat';font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.hbar-l{height:10px;border-radius:999px;background:#EFEBE1;overflow:hidden}
.hbar-l i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--moss),#4E8A63)}
.hbar-m{font-size:12.5px;color:var(--muted);margin-top:5px}
.hbar.zero{opacity:.5}
.hbar.zero .hbar-l i{background:var(--line-2)}

/* Борги: спершу ті, хто виїхав і не доплатив */
.debt-group{margin:18px 0 10px}
.debt-gl{
  display:flex;align-items:baseline;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.debt-gl i{font-style:normal;font-family:'Montserrat';letter-spacing:0;text-transform:none;font-size:14px}
.debt-gl.late{color:var(--red)}
.debt-gl.late i{color:var(--red)}
.debt-gl.soon i{color:var(--gold-ink)}

/* Форма витрати згорнута: список читають щодня, вводять — зрідка */
.exp-add{border:1px dashed var(--line-2);border-radius:10px;background:#FAF8F2}
.exp-add > summary{
  cursor:pointer;padding:11px 14px;font-weight:600;font-size:14px;color:var(--moss);list-style:none;
}
.exp-add > summary::-webkit-details-marker{display:none}
.exp-add > summary:hover{color:var(--ink)}
.exp-add[open] > summary{border-bottom:1px dashed var(--line-2)}
.exp-add .exp-form{border:0;background:transparent;padding:14px}

/* Шкала графіка: підписи ліворуч і горизонтальні лінії за стовпцями.
   132px — висота .ch-bars, 14px — рядок із сумою над ними. */
.chart-box{position:relative;padding-left:60px}
.chart-y{position:absolute;left:0;top:34px;height:132px;width:54px;pointer-events:none}
.chart-y span{
  position:absolute;right:0;bottom:var(--p);transform:translateY(50%);
  font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.chart-lines{
  position:absolute;left:60px;right:0;top:34px;height:133px;pointer-events:none;
  background:repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 33px);
  opacity:.7;
}
.chart{position:relative}
/* Картки в сітці тримаються свого вмісту, а не тягнуться до сусідньої висоти */
.grid{align-items:start}

/* Мініатюра послуги в довіднику — вона ж вхід у картку з фото й описом */
.svc-thumb{width:78px}
.svc-thumb a{display:block;width:64px;height:48px;border-radius:7px;overflow:hidden;background:#F1EEE6}
.svc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.svc-thumb .no-photo{
  display:grid;place-items:center;width:100%;height:100%;font-size:10.5px;font-weight:700;
  color:var(--muted);border:1px dashed var(--line-2);border-radius:7px;
}
.svc-thumb a:hover .no-photo{border-color:var(--moss);color:var(--moss)}
@media(max-width:820px){ .svc-thumb{width:auto} .svc-thumb a{width:90px;height:64px} }

/* тумблери секцій на сторінці «Тексти сайту» */
.sec-toggles{display:flex;gap:18px;flex-wrap:wrap}
.sec-toggles .chk{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px}

/* панель збереження на «Текстах сайту» */
/* Смуга липка, тож вона фізично лежить поверх сторінки. Без запасу знизу
   останні поля форми ховалися під нею саме тоді, коли їх заповнюють. */
.savebar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(to bottom, transparent, var(--bg) 38%);padding:10px 0 4px;margin-top:6px}
main.wrap:has(.savebar){padding-bottom:88px}
.savebar-note{margin:0;flex:1;min-width:0}
@media(max-width:700px){
  .savebar{gap:8px}
  .savebar .btn{flex:1;justify-content:center;white-space:normal}
  .savebar-note{flex-basis:100%}
  /* пігулки-тумблери секцій не тягнуть ширину */
  .sec-toggles{gap:8px}
  .sec-toggles .chk{font-size:13px;padding:8px 12px}
}

/* «Послуги і ціни»: список-рядки замість інлайн-таблиці — однаково добре
   на ноуті й телефоні; усе редагування живе в картці послуги */
.svc-list{display:flex;flex-direction:column;gap:8px}
.svc-row{
  display:grid;grid-template-columns:64px 1fr auto auto;gap:14px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;
  text-decoration:none;color:var(--ink);transition:.15s;
}
.svc-row:hover{border-color:var(--moss);box-shadow:var(--shadow);transform:translateY(-1px)}
.svc-row .ph{width:64px;height:48px;border-radius:8px;overflow:hidden;background:#F1EEE6;flex:none}
.svc-row .ph img{width:100%;height:100%;object-fit:cover;display:block}
.svc-row .no-photo{display:grid;place-items:center;width:100%;height:100%;font-style:normal;
  font-size:10.5px;font-weight:700;color:var(--muted);border:1px dashed var(--line-2);border-radius:8px}
.svc-row .nm{min-width:0}
.svc-row .nm b{display:block;font-size:14.5px;font-weight:600}
.svc-row .nm small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.svc-row .badges .pill{font-style:normal}
.svc-row .pr{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;white-space:nowrap}
@media(max-width:700px){
  .svc-row{grid-template-columns:56px 1fr auto;grid-template-areas:"ph nm pr" "ph badges pr"}
  .svc-row .ph{grid-area:ph;width:56px;height:44px}
  .svc-row .nm{grid-area:nm}
  .svc-row .badges{grid-area:badges}
  .svc-row .pr{grid-area:pr;font-size:18px}
}

/* ── картка броні ─────────────────────────────────── */
/* Одна картка замість п'яти: смуга-резюме зверху, під нею щоденні дії
   (статус, оплата, послуги), і аж потім те, що змінюють найрідше. */
.page-head.tight{align-items:center;margin-bottom:14px}
.page-head.tight h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-head.tight h1 .pill{font-family:'Montserrat',sans-serif;font-size:12px}
/* overflow:clip замість hidden: так само обрізає кути, але НЕ створює
   контейнер прокрутки — інакше липка права колонка всередині не працює */
.bk-card{padding:0;overflow:clip}

/* смуга-резюме на «корі» — єдиний темний акцент сторінки */
.bk-band{
  background:var(--forest);color:#F1EBDA;display:flex;flex-wrap:wrap;gap:18px 28px;
  padding:15px 22px;align-items:center;
}
.bk-band .bb-k{
  display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  /* .5 давало ефективний #93967F на темній смузі — контраст 3,57:1 при 10px.
     .72 = #BCBBA9, контраст 5,6:1, і підпис лишається тихішим за значення. */
  color:rgba(241,235,218,.72);font-weight:700;margin-bottom:2px;
}
.bk-band b{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:600;line-height:1.15;display:block}
.bk-band a{color:#F9F5E1;text-decoration:none;border-bottom:1px solid rgba(220,181,179,.5)}
.bk-band a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.bk-band .bb-sub{display:block;font-size:12px;color:rgba(241,235,218,.62);margin-top:3px}
/* Борг має бути помітним, але не важчим за саму суму: окремий рядок-пігулка */
.bk-band .bb-debt,.bk-band .bb-wait{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:600;background:rgba(240,201,160,.16);color:#F0C9A0}
.bk-band .bb-wait{background:rgba(241,235,218,.12);color:rgba(241,235,218,.8);font-weight:500}
.bk-band .bb-sub a{border-bottom:0;color:rgba(241,235,218,.8)}
.bk-band .bb-none{font-family:'Montserrat',sans-serif;font-size:14px;color:rgba(241,235,218,.6)}
.bb-stay{padding-left:28px;border-left:1px solid rgba(241,235,218,.16)}
.bb-act{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* телефон — дія, а не текст: ціль пальця, помітна на темному */
.bb-tel{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  background:rgba(249,245,225,.1);border:1px solid rgba(220,181,179,.35)!important;
  font-size:14px;font-weight:600;white-space:nowrap;
}
.bk-band .bb-tel{color:#F9F5E1;text-decoration:none}
.bk-band .bb-tel:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)!important}
.bb-tel.add{font-weight:500;font-size:13px;color:var(--gold)}
/* пігулка стану оплати на темному — світлі варіанти читаються погано */
.bk-band .pill{background:rgba(249,245,225,.14);color:#F1EBDA}
.bk-band .pill.pay-ok{background:rgba(167,196,163,.22);color:#CFE0C6}
.bk-band .pill.pay-part{background:rgba(220,181,179,.22);color:#F0D2CF}
.bk-band .pill.pay-over,.bk-band .pill.pay-no{background:rgba(226,164,110,.2);color:#F0C9A0}

/* Дві колонки: щоденні дії і рідкі правки в лівій, послуги — праворуч на всю
   висоту. Так довга колонка чипів не додає сторінці зайвого поверху. */
.bk-cols{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"main side";align-items:start}
.bk-cols > *{min-width:0}
.bk-main{grid-area:main;padding:20px 22px;min-width:0}
.bk-side{grid-area:side;min-width:0}
.bk-sec + .bk-sec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.bk-l{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:10px;
}
.bk-l i{font-style:normal;background:var(--moss-soft);color:var(--moss);border-radius:999px;
        padding:1px 7px;margin-left:5px;letter-spacing:0}

/* статус — чотири сегменти, один клік замість випадайки */
.sg{display:flex;gap:6px;flex-wrap:wrap}
.sg-i{position:relative;cursor:pointer}
.sg-i input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sg-i span{
  display:block;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:#fff;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.15s;
  text-decoration:none;                     /* «Скасовано» тут не перекреслюємо */
}
.sg-i:hover span{border-color:var(--moss);color:var(--moss)}
/* Обраний статус фарбується власною м'якою плашкою з довідника пігулок —
   помітно, але без жодної кричущої заливки. */
.sg-i input:checked + span{border-color:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.sg-i input:checked + span.st-new{background:var(--ember-soft);color:var(--ember)}
.sg-i input:checked + span.st-conf{background:var(--moss-soft);color:var(--moss)}
.sg-i input:checked + span.st-done{background:#EDEBE4;color:var(--ink-soft)}
.sg-i input:checked + span.st-cancel{background:var(--red-soft);color:var(--red)}
.sg-i input:focus-visible + span{outline:3px solid var(--ember);outline-offset:2px}

/* гроші: спершу відповідь на щоденне питання, потім розклад */
.mny{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.mny-big{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}
.mny-big span{font-size:12.5px;font-weight:600;color:var(--muted)}
.mny-big b{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;line-height:1;
           font-variant-numeric:tabular-nums}
/* гривня серифом стрибає по базовій лінії — лишаємо її в Montserrat */
.mny-big b i{font-family:'Montserrat',sans-serif;font-style:normal;font-size:16px;font-weight:600;margin-left:5px}
.mny-big.due b{color:var(--gold-ink)}
.mny-big.over b{color:var(--ember)}
.mny-big.done b{color:var(--moss)}
.mny-bar{height:8px;border-radius:999px;background:#EFEBE1;overflow:hidden;margin-bottom:12px}
.mny-bar i{display:block;height:100%;border-radius:999px;background:var(--moss)}
.mny-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0;color:var(--ink-soft)}
.mny-row > span{min-width:0}
.mny-row em{font-style:normal;color:var(--muted);font-size:12px}
/* Переноситись має ПІДПИС, а не число: «18 000 ₴» не розривається на «18 000» і «₴» */
.mny-row b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.mny-row.disc b{color:var(--gold-ink)}
.mny-row.total{border-top:1px solid var(--line);margin-top:5px;padding-top:9px;font-weight:700;font-size:15px}
.mny-row.total b{font-size:16px}
.bk-inv{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}

/* послуги — своя світла колонка, щоб не зливатись із формою */
.bk-side{padding:20px 22px;background:#FAF8F2;border-left:1px solid var(--line);align-self:stretch}
.bk-side .quick button{padding:8px 13px;font-size:13px}
/* довідник послуг: на ноуті просто підпис, на телефоні — згортайка */
.svc-cat > summary{list-style:none}
.svc-cat > summary::-webkit-details-marker{display:none}
.svc-cat > summary .bk-l{margin-bottom:10px}
/* ціна в чипі — те, чим послуги розрізняються, тож не глушимо її */
.bk-side .quick button b{color:var(--ink-soft);font-weight:700;font-size:12.5px}
.bk-side .quick button.alt{border-style:dashed}
.svc-in{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.svc-empty{font-size:13px;color:var(--muted);margin:0}
.svc-line{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 8px 8px 12px;margin-bottom:6px;
}
.svc-line .sl-n{font-size:13.5px;min-width:0}
.svc-line .sl-n i{font-style:normal;font-weight:700;color:var(--moss)}
.svc-line .sl-n em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.svc-line b{font-size:14px;font-variant-numeric:tabular-nums}
.sl-x{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;transition:.15s;
}
.sl-x:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.svc-sum{display:flex;justify-content:space-between;gap:12px;padding:8px 12px 0;font-size:13.5px;font-weight:700}

/* блок дат і гостей — звичайна секція, тільки поле коментаря нижче */
.bk-when textarea{min-height:52px}
/* поля самі перебудовуються під ширину — краще, ніж стрибок 4 → 2 → 1 */
.row4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* У ряду «Заїзд · Виїзд · Будиночок · Гостей» цифрі гостей багато місця не треба —
   віддаємо його назві будиночка */
.bk-when .row4{grid-template-columns:1fr 1fr 1.7fr .55fr}
/* те саме у формі нової броні: Будиночок · Гостей · Статус */
.bn-row{grid-template-columns:1.8fr .5fr 1fr}
@media(max-width:1000px){ .bk-when .row4{grid-template-columns:1fr 1fr} }
@media(max-width:900px){ .bn-row{grid-template-columns:1fr} }

/* Липка смуга не має перекривати поле, до якого браузер сам прокручує */
html{scroll-padding-bottom:96px}

/* липка смуга збереження */
.bk-save{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
         padding:12px 16px;box-shadow:var(--shadow)}
/* тиха текстова дія: у спокої на сторінці немає жодної червоної плашки */
.lnk{
  background:none;border:0;padding:0;font:600 13px 'Montserrat',sans-serif;color:var(--moss);
  text-decoration:underline;cursor:pointer;
}
.lnk:hover{color:var(--ink)}
.lnk.danger{color:var(--muted);font-weight:500}
.lnk.danger:hover{color:var(--red)}

@media(max-width:1000px){
  /* один стовпець: спершу гроші й дії, потім послуги, і аж потім рідкі правки */
  .bk-cols{grid-template-columns:1fr;grid-template-areas:"main" "side"}
  .bk-side{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:1000px){
  .svc-cat > summary{
    cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;
    border:1px dashed var(--line-2);border-radius:9px;padding:11px 13px;
  }
  .svc-cat > summary .bk-l{margin:0}
  .svc-cat > summary::after{content:'＋ додати';margin-left:auto;font-size:12px;font-weight:700;color:var(--moss)}
  .svc-cat[open] > summary::after{content:'згорнути'}
  .svc-cat[open] .quick{margin-top:11px}
}
@media(max-width:900px){
  .bk-band{padding:14px 16px;gap:14px}
  .bb-stay{padding-left:0;border-left:0}
  .bb-act{margin-left:0;width:100%}
  .bb-tel{flex:1;justify-content:center}
  .bk-main,.bk-side{padding:16px}
  /* смуга збереження на телефоні — один компактний рядок */
  .bk-save{padding:10px 12px;gap:8px}
  .bk-save .btn{flex:1;justify-content:center;padding:11px 12px}
  /* Текст-пояснення ховаємо, але попередження про незбережені правки — ні:
     саме на телефоні його найлегше проґавити. */
  .bk-save .savebar-note{display:none}
  .bk-save.dirty .savebar-note{display:block;flex-basis:100%;order:3;font-size:12px}
  .sl-x{width:38px;height:38px}
}



/* Незбережена правка: підсумок показано як попередній, смуга збереження кличе натиснути */
.mny.preview{position:relative}
.mny.preview::before{
  content:'попередній підрахунок — натисніть «Зберегти зміни»';
  position:absolute;right:0;top:-19px;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--ember);
}
.mny.preview .mny-big b{opacity:.75}
.bk-save.dirty{border-color:var(--ember);box-shadow:0 0 0 3px rgba(80,50,17,.12), var(--shadow)}
.bk-save.dirty .savebar-note::before{content:'Є незбережені зміни. ';color:var(--ember);font-weight:700}

/* ── рахунки ──────────────────────────────────────── */
/* Рядок рахунку в картці броні: номер, стан, сума, PDF */
.inv-line{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:7px;
}
.inv-line .il-n{font-weight:600;text-decoration:none;font-size:14px}
.inv-line .il-n em{font-style:normal;color:var(--muted);font-weight:400;font-size:12.5px;margin-left:5px}
.inv-line b{margin-left:auto;font-variant-numeric:tabular-nums}
/* Рахунок застарів: бронь змінилась після його видачі */
.inv-stale{
  font-size:12.5px;line-height:1.5;color:var(--ember);background:var(--ember-soft);
  border-radius:9px;padding:9px 12px;margin:0 0 8px;
}
.inv-stale b{white-space:nowrap}

/* Підсумки над списком рахунків */
.inv-sums{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin-bottom:14px;font-size:14px;color:var(--muted)}
.inv-sums b{color:var(--ink);font-size:16px;margin-left:5px}
.inv-sums .due b{color:var(--gold-ink)}
.inv-sums .due i{font-style:normal;font-size:12.5px;margin-left:6px}
.inv-sums .ok{color:var(--moss);font-weight:600}
/* Смужка стану на сторінці рахунку */
.inv-pay{padding:16px 20px}
.ip-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.ip-row .bk-l{margin-bottom:3px}
.ip-row b{font-size:19px;font-variant-numeric:tabular-nums}
.ip-row b.due{color:var(--gold-ink)}
.ip-row b.ok{color:var(--moss);font-size:16px}
.ip-row .btn{margin-left:auto}
@media(max-width:700px){ .ip-row{gap:16px} .ip-row .btn{margin-left:0;width:100%;justify-content:center} }


/* ── Telegram-сповіщення ──────────────────────────── */
/* Рядок отримувача: підпис, поле ID, кнопка тесту */
.tg-chat{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;margin-bottom:10px}
.tg-chat label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.tg-chat input{font-variant-numeric:tabular-nums}
/* Матриця «подія × отримувач»: чекбокси по центру колонок */
.tg-matrix th.c,.tg-matrix td.c{text-align:center;min-width:96px}
.tg-matrix td.c input{width:18px;height:18px;accent-color:var(--moss);cursor:pointer}
.tg-matrix td .sub{white-space:normal}
.tg-matrix td:first-child{min-width:190px}
@media(max-width:700px){
  .tg-chat{grid-template-columns:1fr auto;grid-template-areas:"l l" "i b"}
  .tg-chat label{grid-area:l}
  .tg-chat input{grid-area:i}
  .tg-chat .btn{grid-area:b}
}


/* Редактор рахунку перед створенням: рядки позицій */
/* Назва позиції — 1fr, але при 5 колонках у неї лишалось ~180px і текст
   «Знижка за тривалість (−10% з 2-ї ночі)» обрізався. Даємо назві власний
   ряд на вузькому екрані, а на широкому — більше місця. */
.inv-h,.inv-row{display:grid;grid-template-columns:minmax(220px,2fr) 74px 104px 96px 34px;gap:8px;align-items:center}
.inv-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;
       padding:0 2px 8px;border-bottom:1px solid var(--line)}
.inv-h .c{text-align:center}
.inv-h .r,.inv-row .row-sum{text-align:right}
.inv-row{padding:7px 0;border-bottom:1px dashed var(--line)}
.inv-row input{padding:9px 10px;font-size:14px}
.inv-row input[name=item_qty],.inv-row input[name=item_price]{text-align:right}
.inv-row .row-sum{font-size:14px;white-space:nowrap}
.rq-lines{white-space:pre-line;font-size:13.5px;color:var(--ink-soft);margin:8px 0;line-height:1.5}
@media(max-width:700px){
  .inv-h{display:none}
  /* min-width:0 — інакше поле «Назва» тримає свою природну ширину й розпирає
     картку за екран (на 320px сторінка їхала вбік). */
  .inv-row{grid-template-columns:1fr 1fr;grid-template-areas:"nm nm" "q p" "s x"}
  .inv-row > *,.inv-row input,.inv-row .inv-f{min-width:0;max-width:100%}
  .inv-row input[name=item_name]{grid-area:nm}
  .inv-row input[name=item_qty]{grid-area:q}
  .inv-row input[name=item_price]{grid-area:p}
  .inv-row .row-sum{grid-area:s;align-self:center}
  .inv-row .sl-x{grid-area:x;justify-self:end}
}


/* Огляд: середній ряд — «Сьогодні і завтра» ширший за колонку заявок */
.dash-mid{grid-template-columns:1.38fr .62fr;margin-bottom:18px;align-items:stretch}
/* Колонка заявок не тягне ряд у довжину: довгий список гортається всередині картки */
.dash-mid > div:last-child{display:flex;flex-direction:column;max-height:640px}
/* Прокрутка ТІЛЬКИ вертикальна: негативні поля .lead-row тут прибрані,
   інакше вони ширші за контейнер і вилазив горизонтальний повзунок */
.dash-mid > div:last-child .lead-list{overflow-y:auto;overflow-x:hidden;margin-right:-8px;padding-right:8px}
.dash-mid .lead-row{margin:0}
@media(max-width:1150px){ .dash-mid{grid-template-columns:1fr} .dash-mid > div:last-child{max-height:none} }
/* На телефоні «Сьогодні і завтра» — головне на сторінці: підіймаємо її над
   календарями зайнятості. `display:contents` розпускає .dash-mid, тож обидві
   картки стають дітьми .dash-top і піддаються order. */
@media(max-width:900px){
  .dash-top{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
  .dash-mid{display:contents}
  .dash-mid > .card + .card{margin-top:0}
  .top-row{margin-bottom:0}
  .dash-today{order:-1}
}
/* «Найближчі заїзди»: телефон і Instagram — клікабельні прямо зі списку */
.up-tel{color:var(--muted);text-decoration:none;font-weight:400}
.up-tel:hover{color:var(--moss);text-decoration:underline}
.up-ig{color:var(--gold-ink);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap}
.up-ig:hover{text-decoration:underline}

/* «Найближчі заїзди»: колонка послуг і приміток */
.up-extra{max-width:340px}
.up-svc{display:flex;flex-wrap:wrap;gap:4px}
.up-svc i{font-style:normal;font-size:10.5px;font-weight:600;background:var(--moss-soft);color:var(--moss);
          padding:2px 8px;border-radius:5px;white-space:nowrap}
.up-note{display:block;font-size:12px;color:var(--gold-ink);margin-top:5px;line-height:1.45}
.up-svc + .up-note{margin-top:6px}


/* Поля дат у новій броні — лише показ вибору: без браузерного пікера,
   щоб не було двох календарів поруч */
.ro-date{background:#FAF8F2;cursor:default;pointer-events:none}
.ro-date::-webkit-calendar-picker-indicator{display:none}

/* ── міні-календар зайнятості у формі нової броні ── */
.bn-cal{margin:4px 0 16px;background:#FAF8F2;border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.bn-cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bn-nav button{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--line-2);background:#fff;
  cursor:pointer;color:var(--ink-soft);font-size:13px;
}
.bn-nav button:hover{border-color:var(--moss);color:var(--moss)}
.bn-grid{display:grid;grid-template-columns:1fr;max-width:380px}
.bn-m b{display:block;font-size:12.5px;margin-bottom:6px}
.bn-w,.bn-d{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
/* 9px однією літерою давало два «п» і два «с» поспіль — прочитати ряд було
   неможливо. Дві літери, 11px і виділені вихідні. */
.bn-w span{font-size:11px;color:var(--muted);text-align:center;font-weight:700;letter-spacing:.02em}
.bn-w span:nth-child(6),.bn-w span:nth-child(7){color:#8A4419}
.bn-d button{
  height:34px;border-radius:6px;border:1px solid var(--line);background:#fff;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;padding:0;
}
.bn-nav button:disabled{opacity:.35;cursor:default}
.bn-d button:hover{border-color:var(--moss)}
.bn-d button.past{color:rgba(28,43,34,.28);background:#FCFAF5;cursor:default}
/* зайнята ніч — перекреслена, натиснути не можна */
.bn-d button.busy{background:#F1EEE6;color:var(--muted);text-decoration:line-through;cursor:not-allowed}
.bn-d button.sel{background:var(--moss);border-color:var(--moss);color:#fff}
.bn-d button.mid{background:var(--moss-soft);border-color:var(--moss-soft)}
/* На телефоні календар — ПЕРШИМ у картці: обирати дати, не скролячи повз поля */
@media(max-width:900px){
  .bn-cal{max-width:none}
  /* Порядок на телефоні: спершу будиночок (сітка малює зайнятість саме його),
     потім календар, і аж тоді решта полів. Раніше селект стояв НИЖЧЕ сітки. */
  .card:has(.bn-cal){display:flex;flex-direction:column}
  .card:has(.bn-cal) > *{order:3}
  .card:has(.bn-cal) > h2{order:0}
  .card:has(.bn-cal) > .bn-row{order:1}
  .card:has(.bn-cal) > .bn-cal{order:2;margin-top:0}
  /* Клітинки 34px — легко промахнутись на сусідню ніч */
  .bn-d button{min-height:44px;font-size:13px}
  .bn-cal-h{flex-wrap:nowrap;gap:10px}
  .bn-nav{display:flex;gap:6px;flex:0 0 auto}
  .bn-nav button{width:38px;height:38px}
}
@media(max-width:380px){
  /* На 320px клітинка була 30px завширшки — палець накриває сусідній день.
     Знімаємо все зайве по боках, щоб віддати ширину самим дням. */
  .bn-cal{padding:10px 6px}
  .bn-w,.bn-d{gap:2px}
  .bn-d button{min-height:44px;border-radius:5px}
  .card:has(.bn-cal){padding-left:10px;padding-right:10px}
}


/* ── журнал платежів у картці броні ───────────────── */
/* Поле дати прибрано з форми — момент ставиться сам, правиться в журналі */
.pay-form{display:grid;grid-template-columns:110px 130px auto auto 1fr;gap:10px;align-items:end}
.pay-form .field{margin-bottom:0}
.pay-form .btn{white-space:nowrap}
.pay-form .lnk{align-self:center}
.pay-row{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 8px 8px 12px;margin-bottom:6px;
}
.pay-row .pr-when{font-size:13px;font-weight:600;white-space:nowrap}
.pay-row .pr-when em{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}
.pay-row .pr-how{font-size:12.5px;color:var(--muted)}
/* Сума ніколи не переноситься — на 320px «9 000 ₴» рвалось на три рядки */
.pay-row b{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:380px){
  /* дата й спосіб — верхнім рядком, сума з хрестиком — нижнім */
  .pay-row{grid-template-columns:1fr auto;gap:6px 10px}
  .pay-row .pr-when{grid-column:1}
  .pay-row .pr-how{grid-column:2;text-align:right}
  .pay-row b{grid-column:1;text-align:left}
}
.pf-on{font-size:13px;font-weight:600;color:var(--moss);margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:700px){
  /* На телефоні дата й час у формі внесення зайві: ставиться поточний момент,
     а поправити його можна вже в журналі, натиснувши на дату запису.
     Сума, спосіб і кнопка стають одним рядком — внесення в один рух. */
  /* ⚠️ Було «сума | спосіб | кнопка» в один ряд — і кнопка «Внести оплату»
     виходила за правий край екрана (до 393px при вікні 390 і навіть при 320):
     з телефона оплату було не внести взагалі. Тепер кнопка окремим рядом на
     всю ширину, а підстановки сум — над нею. */
  .pay-form{grid-template-columns:1fr 1fr;grid-template-areas:"a m" "q q" "b b" "l l";gap:8px}
  .pay-form .field:nth-child(1){grid-area:a}
  .pay-form .field:nth-child(2){grid-area:m}
  .pay-form .pay-quick{grid-area:q}
  .pay-form > .btn:not(.ghost){grid-area:b;justify-self:stretch;padding:12px 14px;min-height:48px}
  .pay-form .btn.ghost{justify-self:stretch;text-align:center}
  .pay-form > .lnk{grid-area:l}
  .pay-form input,.pay-form select{min-width:0}
}
@media(max-width:399px){
  /* На найвужчих екранах повний напис розпирає рядок — лишаємо дієслово */
  .pay-form > .btn:not(.ghost){font-size:0}
  .pay-form > .btn:not(.ghost)::after{content:'Внести';font-size:14px;font-weight:600}
}

/* ── Правка дати вже внесеного платежу ───────────────────────────────────── */
.pay-row .pr-when{border:0;background:none;padding:0;font-family:inherit;cursor:pointer;
  color:var(--ink);border-bottom:1px dashed var(--line-2);text-align:left}
.pay-row .pr-when:hover{color:var(--green);border-bottom-color:var(--moss)}
.pay-when-edit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-2px 0 8px;padding:9px 12px;
  background:#FAF8F2;border:1px solid var(--line);border-radius:9px}
.pay-when-edit[hidden]{display:none}
.pay-when-edit input{width:auto;min-width:190px;font-size:13.5px;padding:8px 10px}
.pw-word{flex:1 1 100%;font-size:12.5px;color:var(--muted)}


/* ── пошук клієнта в новій броні ──────────────────── */
.cs{position:relative}
.cs .cs-x{
  position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);cursor:pointer;font-size:14px;
}
.cs .cs-x:hover{color:var(--red);border-color:var(--red)}
.cs-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:280px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;
}
.cs-i{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 11px;border-radius:7px;font:500 14px 'Montserrat',sans-serif;color:var(--ink);
}
.cs-i:hover{background:var(--moss-soft)}
.cs-i i{font-style:normal;color:var(--gold-ink);font-size:12.5px;margin-left:6px}
.cs-none{padding:10px 12px;color:var(--muted);font-size:13px}

/* ── картка клієнта (той самий каркас, що й у броні) ── */
/* Рядок історії: дати й склад ліворуч, гроші й статуси праворуч */
.cl-trip{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:7px;
  text-decoration:none;color:var(--ink);transition:.15s;
}
.cl-trip:hover{border-color:var(--moss);box-shadow:var(--shadow);transform:translateY(-1px)}
.cl-trip.off{opacity:.55;background:#FAF8F2}
.cl-trip .ct-d b{display:block;font-size:14.5px;font-weight:600}
.cl-trip .ct-d em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
.cl-trip .ct-s{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cl-trip .ct-s i{
  font-style:normal;font-size:10.5px;font-weight:600;background:var(--moss-soft);color:var(--moss);
  padding:2px 8px;border-radius:5px;
}
.cl-trip .ct-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap}
.cl-trip .ct-r b{font-size:15px;font-variant-numeric:tabular-nums}
.cl-danger{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* «Видалити бронь» унизу картки — видно завжди, і на телефоні теж */
.bk-danger{padding:14px 22px 18px;border-top:1px solid var(--line)}
/* тап-ціль ≥40px, вигляд лишається тихим */
.bk-danger .lnk{padding:10px 0;display:inline-block}
@media(max-width:900px){ .bk-danger{padding:8px 16px 12px} }
/* у смузі-резюме клієнта три однакові колонки, тому роздільник у кожної */
.bk-band .bb-stay + .bb-stay{padding-left:28px;border-left:1px solid rgba(241,235,218,.16)}
@media(max-width:900px){
  .bk-band .bb-stay + .bb-stay{padding-left:0;border-left:0}
  .cl-trip{flex-direction:column;gap:8px}
  .cl-trip .ct-r{flex-direction:row;align-items:center;flex-wrap:wrap}
}

/* ── перетягування броней у календарі ─────────────── */
/* Клас .dnd ставить скрипт лише там, де є мишка — на дотику жест не вмикається. */
.dnd-hint{display:none}
.dnd .dnd-hint{display:inline}
/* Місяць списком — лише для телефона; на ноуті імена й суми видно в сітці.
   Правило мусить стояти ПІСЛЯ мобільного блоку вище, інакше базове display:none
   перебиває його за однакової ваги. */
.cm-list{display:none}
@media (max-width:900px){ .cm-list{display:block;margin-top:16px} }
.cml-row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--c,var(--moss));
  border-radius:9px;padding:9px 11px;margin-top:6px;
}
.cml-d{font-size:13.5px;font-weight:600;flex:0 0 auto}
.cml-w{font-size:13px;color:var(--ink-soft);min-width:0;flex:1 1 auto}
.cml-w em{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.cml-s{font-size:13.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}

.dnd .cw-b,.dnd .cm-b{cursor:grab}
.dnd .cw-b:active,.dnd .cm-b:active{cursor:grabbing}
.cw-b.dragging,.cm-b.dragging{opacity:.4}
/* день-приймач підсвічується, поки над ним тримають бронь */
.cw-body.drop-on,.cm-d.drop-on{background:var(--moss-soft);box-shadow:inset 0 0 0 2px var(--moss)}

/* повідомлення з дією «повернути назад» */
.flash{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flash form{margin:0}
.flash .lnk{color:inherit}
.flash .lnk:hover{opacity:.75}

/* ── повністю клікабельні рядки ───────────────────── */
[data-href]{cursor:pointer}
/* рядок таблиці при наведенні трохи виростає, підсвічується й дає тінь */
tr[data-href]{transition:transform .14s, box-shadow .14s, background .14s}
tr[data-href]:hover{
  background:#fff;transform:scale(1.008);
  box-shadow:0 3px 6px rgba(52,65,44,.08), 0 14px 28px -16px rgba(52,65,44,.45);
  position:relative;z-index:2;
}
tr[data-href]:hover td:first-child{box-shadow:inset 3px 0 0 var(--moss)}
/* заявки з сайту на Огляді — картки-рядки */
.lead-row{
  display:block;padding:12px 14px;margin:0 -14px;border-radius:10px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line);transition:.15s;
}
.lead-row:last-child{border-bottom:0}
.lead-row:hover{
  background:#fff;transform:scale(1.015);border-color:transparent;
  box-shadow:0 3px 6px rgba(52,65,44,.08), 0 16px 30px -16px rgba(52,65,44,.5);
}
.lead-row .lr-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lead-row .lr-top b{font-size:14.5px;font-weight:600}
.lead-row .lr-top i{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.lead-row .lr-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}


/* ── Липка смуга створення броні ─────────────────────────────────────────── */
/* Кнопка «Створити бронь» жила в кінці другої картки: на телефоні до неї було
   ~2000 px прокрутки, а суму до створення не показували взагалі. */
.bn-bar{position:sticky;bottom:0;z-index:30;margin:18px -4px -4px;padding:10px 4px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(247,244,236,0) 0%,var(--bg) 42%)}
.bn-bar-in{display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 6px 24px rgba(38,45,32,.10);padding:12px 14px}
.bn-sum{display:flex;flex-direction:column;gap:2px;min-width:0}
.bn-sum b{font-size:22px;line-height:1.1;letter-spacing:-.01em}
.bn-sum span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-bar .btn{white-space:nowrap;flex:0 0 auto}
@media (max-width:700px){
  .bn-bar-in{padding:10px 12px;gap:10px}
  .bn-sum b{font-size:19px}
  /* На вузькому екрані рядок із знижкою не влазив і обрізався — даємо перенос */
  .bn-sum span{white-space:normal;font-size:12px;line-height:1.35}
  .bn-bar .btn{padding:11px 16px}
}


/* ── Фінанси: дрібні правки після аудиту ─────────────────────────────────── */
.debts{align-items:start}                 /* картки по своїй висоті, а не по найвищій у ряду */
.debt-gl{flex-wrap:wrap}
.debt-gl i{white-space:nowrap;margin-left:auto}
.di.disc b{color:var(--gold-ink)}
/* гривня серифом стрибає над базовою лінією — тримаємо її в Montserrat */
.total-line b i{font-family:'Montserrat',sans-serif;font-style:normal;font-size:15px;font-weight:600;margin-left:5px}
.btn:disabled{opacity:.45;cursor:default}


/* ── Редактор рахунку ────────────────────────────────────────────────────── */
.warn-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;
  background:#FBF4E3;border:1px solid #E4D6B4;border-radius:12px;padding:11px 14px;font-size:13.5px}
.warn-bar b{font-weight:700}
/* ⚠️ white-space:nowrap не давав довгому підпису перенестись, і смуга
   «на цю бронь уже є рахунок» розпирала сторінку до 489px на телефоні.
   Текст переносимо, а нерозривним лишається тільки сам номер рахунку. */
.warn-chk{display:inline-flex;align-items:flex-start;gap:7px;margin-left:auto;cursor:pointer;
  min-width:0;flex:0 1 auto}
.warn-chk input{flex:0 0 auto;margin-top:2px}
.warn-chk > span{min-width:0;flex:1 1 auto}
.warn-chk b{white-space:nowrap}
.warn-chk input{width:16px;height:16px;accent-color:var(--green)}
.inv-f{display:contents}
@media (max-width:700px){
  /* Заголовки колонок сховані, тож два однакові числові поля були без підписів:
     у якому кількість, а в якому ціна — вгадати неможливо. */
  /* На мобільній сітці елементом стає сама мітка, тож area переїжджає на неї */
  .inv-f{display:block;position:relative}
  .inv-row .inv-f[data-f^="К"]{grid-area:q}
  .inv-row .inv-f[data-f^="Ц"]{grid-area:p}
  .inv-f input{width:100%}
  .inv-f::before{content:attr(data-f);display:block;font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin:0 0 3px 2px}
  .warn-chk{margin-left:0}
}


/* ── Telegram: на телефоні таблиця й пари «ключ-значення» ламали сторінку ── */
@media (max-width:700px){
  /* .kv b{white-space:nowrap} виштовхував довгі значення за межі картки —
     єдина сторінка CRM, яка їхала вбік цілком. */
  .kv{flex-direction:column;align-items:flex-start;gap:2px}
  .kv b{white-space:normal}
  /* Матриця 5×4 не влазила: видно було одну колонку з чотирьох.
     Рядок стає карткою події, а отримувачі — пігулками-тумблерами. */
  .tg-scroll{overflow:visible}
  .tg-matrix,.tg-matrix tbody,.tg-matrix tr,.tg-matrix td{display:block;width:auto}
  .tg-matrix thead{display:none}
  .tg-matrix tr{border:1px solid var(--line);border-radius:14px;padding:11px 12px 12px;margin:0 0 10px;background:var(--card)}
  .tg-matrix td{border:0;padding:0}
  .tg-matrix td:first-child{min-width:0;padding:0 0 9px}
  .tg-matrix td:first-child b{font-size:14.5px}
  .tg-matrix td:first-child .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .tg-matrix td.c{display:inline-block;min-width:0;margin:0 6px 6px 0}
  .tg-matrix .tg-p{display:inline-flex;align-items:center;gap:8px;min-height:38px;
    border:1px solid var(--line);border-radius:999px;padding:0 14px 0 11px;
    font-size:12.5px;background:var(--bg);cursor:pointer;margin:0}
  .tg-matrix .tg-p:has(input:checked){border-color:var(--moss);background:#EDF1E7;color:var(--green);font-weight:600}
}


/* ── Липка смуга збереження на телефоні ──────────────────────────────────── */
@media (max-width:700px){
  /* Смуга займала ~138px (шоста частина екрана) і перекривала поля під собою */
  .savebar .savebar-note{display:none}
  .savebar{flex-wrap:nowrap;gap:8px}
  .savebar .btn{white-space:nowrap;font-size:14px;padding:11px 14px;
    /* Дві кнопки в один рядок на вузькому екрані не мусять виштовхувати сторінку */
    min-width:0;overflow:hidden;text-overflow:ellipsis}
  html{scroll-padding-bottom:150px}
}
@media (max-width:430px){
  .savebar .btn{font-size:13px;padding:11px 9px}
}


/* ── Вибір файлу ─────────────────────────────────────────────────────────── */
/* Нативне поле пише «Choose File / No file chosen» посеред українського
   інтерфейсу і не читається як кнопка. Ховаємо його, лишаючи доступним. */
.file-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--line-2);border-radius:12px;background:#FAF8F2;padding:12px 14px}
.file-pick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-pick label{cursor:pointer;margin:0}
.file-pick input[type=file]:focus-visible + label{outline:2px solid var(--moss);outline-offset:2px}
.file-name{font-size:13px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.file-pick.has .file-name{color:var(--ink)}


/* ── Порядок показу: стрілки просто в списку ─────────────────────────────── */
.svc-item{display:flex;align-items:stretch;gap:8px}
.svc-item .svc-row{flex:1;min-width:0}
.ord{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:0 0 auto}
.ord form{margin:0}
.ord button{width:30px;height:26px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0}
.ord button:hover:not(:disabled){border-color:var(--moss);color:var(--green)}
.ord button:disabled{opacity:.3;cursor:default}
@media (max-width:700px){ .ord button{width:36px;height:32px} }


/* ── Сума просто в смузі-резюме картки броні ─────────────────────────────── */
/* На телефоні перший екран показував гостя й дати, а «скільки грошей» —
   лише після прокрутки до блоку оплати. */
.bb-money{padding-left:28px;border-left:1px solid rgba(241,235,218,.16)}
.bb-money b{display:block;font-size:22px;line-height:1.15;margin-top:2px;letter-spacing:-.01em}
@media (max-width:700px){
  .bb-money{padding-left:0;border-left:0}
  .bb-money b{font-size:20px}
}

.cl-note{margin:16px 0 0;padding:12px 14px;background:#FBF8F0;border:1px solid var(--line);border-radius:12px}
.cl-note p{margin:4px 0 0;font-size:14px;white-space:pre-line}


/* ── Порядок списку клієнтів ─────────────────────────────────────────────── */
.sort-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.sort-row a{border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted);text-decoration:none}
.sort-row a:hover{border-color:var(--moss);color:var(--green)}
.sort-row a.on{border-color:var(--moss);background:#EDF1E7;color:var(--green);font-weight:600}
/* На телефоні форма додавання лежала під усім списком — піднімаємо її */
/* Форма додавання більше не стрибає на початок: швидкий вхід до неї —
   кнопка «＋ Додати клієнта» у шапці сторінки. */
@media (max-width:900px){ .add-first{order:0} }


/* ── Створити бронь просто з календаря ───────────────────────────────────── */
.cm-d{position:relative}
.cm-add{position:absolute;right:5px;bottom:4px;width:22px;height:22px;line-height:20px;text-align:center;
  border:1px solid var(--line);border-radius:7px;color:var(--muted);text-decoration:none;font-size:14px;
  opacity:0;transition:opacity .12s}
.cm-d:hover .cm-add{opacity:1}
.cm-add:hover{border-color:var(--moss);color:var(--green);background:#EDF1E7}
@media (hover:none){ .cm-add{opacity:.5} .cw-free i{opacity:.75} }


/* ── Смуга збереження картки броні ───────────────────────────────────────── */
/* Висіла завжди, навіть коли нічого не правили: ~9% екрана iPhone під контентом.
   Показуємо лише коли є що зберігати; «Видалити бронь» лишається доступним. */
@media (max-width:700px){
  .bk-save{transform:translateY(120%);opacity:0;pointer-events:none;transition:transform .18s,opacity .18s}
  .bk-save.dirty{transform:none;opacity:1;pointer-events:auto}
}

.mny-stale{display:none;margin:0 0 10px;padding:7px 10px;border-radius:9px;
  background:#FBF4E3;border:1px solid #E4D6B4;font-size:12.5px}
.mny.stale .mny-stale{display:block}
.mny.stale .mny-big b{opacity:.45}

.cs-or{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--ink)}

.cs-new{display:block;width:100%;text-align:left;border:0;background:#EDF1E7;color:var(--green);
  font-weight:600;font-size:13.5px;padding:11px 12px;cursor:pointer;font-family:inherit}
.cs-new:hover{background:#E3E9DA}

.dd-quiet{margin:8px 0 0;font-size:13px;color:var(--muted)}
.dd-col.quiet{padding-bottom:10px}


/* ── Річний календар на телефоні ─────────────────────────────────────────── */
/* Два місяці в ряд давали клітинку 18px — влучити пальцем майже неможливо.
   Один місяць у ряд робить день ~40px; гортати рік однією колонкою все одно
   доводиться, тож «весь рік одним поглядом» тут нічого не втрачає. */
@media (max-width:560px){
  .cy{grid-template-columns:1fr;gap:12px}
  .cy-m{padding:12px 14px 14px}
  .cy-m h5{font-size:15px}
  .cy-w span{font-size:11px}
  .cy-w,.cy-g{gap:4px}
  .cy-d b{font-size:12px}
  .cy-d .bars{height:11px}
}

@media (max-width:900px){
  /* Колонка стає flex-контейнером, а flex-елементи за замовчуванням не
     стискаються менше за свій вміст — картка позицій виїжджала за екран. */
  .inv-editor{display:flex;flex-direction:column}
  .inv-editor > *{min-width:0;width:100%}
  /* Покупець і Продавець — це переважно вже підставлені дані, а редагують
     позиції; до того ж липка кнопка «Сформувати рахунок» живе саме в картці
     позицій, тож нагорі має бути вона: інакше кнопка аж на третьому екрані. */
  .inv-editor > .inv-buyer{order:1}
}

.c-never{font-size:12px;font-weight:400;color:var(--muted)}
@media (max-width:820px){
  /* Пошук працює живцем від 2 символів, тож кнопка лише крала ширину:
     плейсхолдер обрізався посеред слова і не показував, що шукає й Instagram. */
  .search.big .btn{display:none}
  .search.big .s-box{flex:1;min-width:0}
}
/* Бланк рахунку лежить у картці з рамкою — власна рамка давала подвійний контур */
.invoice-frame{border:0}

/* Головна відповідь сторінки рахунку — «оплачено чи ні». Раніше пігулка
   успадковувала Cormorant від h1 і читалась як бліда виноска. */
.page-head h1 .pill{font-family:'Montserrat',sans-serif;font-size:12px;vertical-align:middle}

.bn-warn{margin:9px 0 0;padding:8px 11px;border-radius:9px;background:#FBF4E3;border:1px solid #E4D6B4;font-size:12.5px}

/* На ноутбуці підпис отримувача стоїть у шапці колонки — у клітинці він зайвий */
.tg-matrix .tg-p{margin:0}
@media (min-width:701px){ .tg-matrix .tg-p span{display:none} }


/* ── Міні-календарі будиночків на Огляді ─────────────────────────────────── */
/* Два місяці по 196px влазять у 390px лише коштом 19-піксельних клітинок —
   влучити пальцем у потрібний день майже неможливо. На телефоні календар один
   у ряд (це робить auto-fit: два по 300px просто не влазять), клітинка стає
   ~39px і календар починає працювати. Тут лишаються тільки дрібні поправки
   на палець: більші проміжки й підписи днів тижня. */
@media (max-width:700px){
  .occ-grid{gap:14px}
  .occ-m{padding:12px 14px 14px}
  .occ-m .cy-w{gap:4px;margin-bottom:4px}
  .occ-m .cy-w span{font-size:11px}
  .occ-m .cy-g{gap:4px}
}

/* Великі суми в смузі-резюме набрані серифом — знак гривні в ньому стрибає
   над базовою лінією і виходить більшим за цифри (той самий фікс, що в .mny-big) */
.bk-band b i{font-family:'Montserrat',sans-serif;font-style:normal;font-size:.62em;font-weight:600;margin-left:5px}


/* ── Дві кнопки звʼязку в картці клієнта ─────────────────────────────────── */
/* Раніше телефон був один і на телефоні розтягувався на всю ширину смуги.
   Тепер два рівні за вагою способи звʼязку: подзвонити й Instagram. */
.bb-act .bb-tel{flex:0 1 auto;min-width:0;gap:8px}
.bb-act .bt-t{min-width:0}
.bb-tel .bt-i{flex:0 0 auto;opacity:.8}
/* Порожній канал — тихіша кнопка, але така сама ціль пальця */
.bk-band .bb-tel.add{font-weight:500;font-size:13.5px;color:rgba(241,235,218,.72);
  background:transparent;border-style:dashed!important}
/* Порожня кнопка має прозорий фон, тож темний текст на наведенні зникав
   на темній смузі. Даємо їй ту саму золоту підкладку, що й заповненій. */
.bk-band .bb-tel.add:hover{background:var(--gold);color:var(--forest);border-style:solid!important}
@media(max-width:900px){
  /* Жорсткі колонки 1fr 1fr різали номер посеред цифр. Тут кожна кнопка не
     вужча за свій вміст: влазять удвох — стоять поруч, ні — переносяться
     й розтягуються на всю ширину. Обрізаного номера не буде ніколи. */
  .bb-act{display:flex;flex-wrap:wrap;gap:9px;width:100%}
  .bb-act .bb-tel{flex:1 1 auto;min-width:max-content;justify-content:center;
    padding:11px 12px;font-size:13px;gap:7px}
  .bb-tel .bt-i{width:15px;height:15px}
}


/* ── Нова бронь: поля поруч із календарем ────────────────────────────────── */
/* Раніше все стояло стовпчиком над сіткою: картка тягнулась на два екрани,
   а дати й будиночок не було видно одночасно з зайнятістю. */
.bn-split{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:20px;align-items:start}
.bn-split > *{min-width:0}
.bn-split .bn-cal{margin:0}
/* Ліва колонка: спершу вибір будиночка, під ним його зайнятість */
.bn-cal-col .field{margin-bottom:12px}
.bn-fields .field{margin-bottom:12px}
.bn-fields .row{margin-bottom:0}
.ro-note{margin:-4px 0 12px}
.ro-ar-m{display:none}
@media (max-width:760px){
  /* Вузько для двох колонок: будиночок і календар зверху, решта полів під ними */
  .bn-split{grid-template-columns:1fr;gap:14px}
  .ro-ar{display:none}
  .ro-ar-m{display:inline}
}

/* ── Додаткові послуги у формі створення ─────────────────────────────────── */
.bn-svc{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bn-svc-add{display:flex;gap:9px;align-items:stretch;margin:8px 0 12px}
.bn-svc-add select{flex:1;min-width:0}
.bn-svc-add .btn{flex:0 0 auto;white-space:nowrap}
.bn-svc-list{display:flex;flex-direction:column;gap:7px}
.bn-svc-row{display:grid;grid-template-columns:1fr auto auto 30px;gap:10px;align-items:center;
  background:#FAF8F2;border:1px solid var(--line);border-radius:11px;padding:9px 10px 9px 13px}
.bn-svc-row .sr-n{font-size:14px;font-weight:600;min-width:0}
.bn-svc-row .sr-n em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:1px}
.bn-svc-row .sr-s{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Лічильник «− 2 +»: та сама логіка, що на сайті в пропозиції послуг */
.bn-qt{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.bn-qt button{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:8px;
  font-size:16px;line-height:1;color:var(--ink);cursor:pointer;padding:0}
.bn-qt button:hover:not(:disabled){border-color:var(--moss);color:var(--green)}
.bn-qt button:disabled{opacity:.35;cursor:default}
.bn-qt b{min-width:26px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .bn-svc-row{grid-template-columns:1fr auto;grid-template-areas:"n x" "q s";row-gap:8px}
  .bn-svc-row .sr-n{grid-area:n}
  .bn-svc-row .sl-x{grid-area:x}
  .bn-qt{grid-area:q}
  .bn-svc-row .sr-s{grid-area:s;text-align:right}
  .bn-qt button{width:34px;height:34px}
}


/* Дати заїзду/виїзду — показ, а не поле вводу: підпис як у label, значення прописом */
.bn-fields .lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.ro-day{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#FAF8F2;
  font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Довга назва в заголовку сітки скидала стрілки в стовпчик */
.bn-cal-h{flex-wrap:nowrap;gap:10px}
.cal-t{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bn-nav{display:flex;gap:6px;flex:0 0 auto}
/* «Гостей» — двозначне число, «Статус» — слово: ділимо ширину за вмістом */
.bn-fields .row2:last-of-type{grid-template-columns:.72fr 1.28fr}


/* ── Дії з рахунком просто в картці броні ────────────────────────────────── */
/* Дії — піктограми в кінці самого рядка рахунку, одразу за сумою.
   Підписами словами вони займали ~330px і зіштовхували себе на другий рядок. */
.inv-acts{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:12px}
.inv-acts form{margin:0;display:flex}
.ico-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink-soft);
  cursor:pointer;padding:0;text-decoration:none;transition:border-color .12s,color .12s,background .12s}
.ico-btn:hover{border-color:var(--moss);color:var(--green);background:#EDF1E7}
.ico-btn.danger:hover{border-color:var(--red);color:var(--red);background:#FBF0EE}
.ico-btn:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.inv-share{display:flex;gap:7px;align-items:center;margin:8px 0 0;flex-wrap:wrap}
/* Без цього рядка display:flex перебиває атрибут hidden і панель видно завжди */
.inv-share[hidden]{display:none}
.inv-share input{flex:1;min-width:180px;font-size:12.5px;padding:9px 11px;background:#FAF8F2}
.inv-make{margin:12px 0 6px}
.bk-inv .lnk{display:inline-block;font-size:12.5px}
@media (max-width:760px){
  /* Номер із датою, стан, сума й чотири піктограми в один рядок на 390px не
     влазять фізично. Номер піднімаємо нагору, а стан, суму й піктограми
     лишаємо в одному рядку — саме там, де вони й потрібні разом. */
  .inv-line{gap:7px;padding:10px 10px 9px;row-gap:9px}
  /* Номер зі станом — верхній рядок, сума з піктограмами — нижній.
     Усі чотири елементи в одну лінію на 390px не вміщаються фізично
     (319px чистої ширини проти ~330px вмісту). */
  .inv-line .il-n{flex:1 1 auto}
  .inv-line .pill{margin-right:auto}
  .inv-line b.num{margin-left:0;order:4}
  .inv-acts{margin-left:auto;gap:4px;order:5}
  .ico-btn{width:36px;height:36px}
  .inv-share input{min-width:0;flex:1 1 100%}
}


/* ── Телефон та Instagram — завжди поруч, в одному рядку ─────────────────── */
/* Раніше вони були окремими елементами гнучкої смуги й на вужчому вікні
   Instagram зривався на власний рядок. Тепер це одна група, яка переноситься
   цілком, а всередині не розривається. */
.bb-links{display:flex;gap:9px;flex:0 1 auto;min-width:0;flex-wrap:nowrap}
/* Ширина за вмістом: рівні частки різали і номер, і нік. Стискаються лише
   якщо інакше не вміщаються, і вже тоді з трьома крапками. */
.bb-links .bb-tel{flex:0 1 auto;min-width:0;justify-content:center}
.bb-links .bt-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){ .bb-links{flex:1 1 100%} }


/* ── Швидка оплата: список неоплачених із полем суми просто в рядку ──────── */
.qp-list{display:flex;flex-direction:column;gap:9px}
.qp{display:grid;grid-template-columns:1.3fr auto auto;gap:16px;align-items:center;
  background:#FAF8F2;border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:0}
.qp.late{border-color:#E4D6B4;background:#FBF4E3}
.qp-who{min-width:0}
.qp-n{display:block;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.qp-n:hover{color:var(--green);text-decoration:underline}
.qp-m{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.qp-m i{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600}
.qp-m .late-tag{background:var(--red-soft);color:var(--red)}
.qp-m .soon-tag{background:var(--moss-soft);color:var(--moss)}
.qp-tel{display:inline-block;margin-top:3px;font-size:12.5px;color:var(--green);text-decoration:none}
.qp-sums{display:flex;gap:18px;flex:0 0 auto}
.qp-sums span{display:flex;flex-direction:column;gap:1px}
.qp-sums em{font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.qp-sums b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.qp-left b{color:var(--gold-ink);font-weight:700}
.qp-in{display:flex;gap:7px;align-items:center;flex:0 0 auto}
.qp-in input{width:104px;padding:10px 11px;font-size:14px;text-align:right}
.qp-in select{width:112px;padding:10px 8px;font-size:13.5px}
.qp-in .btn{white-space:nowrap;padding:11px 16px}
@media (max-width:900px){
  /* На телефоні: хто й скільки — зверху, поле й кнопка — окремим рядком */
  .qp{grid-template-columns:1fr;gap:10px;padding:12px}
  .qp-sums{gap:14px;justify-content:space-between}
  .qp-in{display:grid;grid-template-columns:1fr 1fr auto;gap:7px}
  .qp-in input,.qp-in select{width:auto;min-width:0}
}
@media (max-width:380px){
  /* На вузькому екрані три контроли в рядок ховали половину суми («1040»
     замість «10400»). Поле суми отримує власний рядок на всю ширину. */
  .qp-in{grid-template-columns:1fr auto}
  .qp-in input{grid-column:1 / -1;text-align:left;font-size:16px}
}


/* ── «Найближчі заїзди»: імʼя і контакти однією групою ───────────────────── */
/* ⚠️ Урок 06.09.2026: display:flex на <td> ЛАМАЄ сітку таблиці — комірка
   перестає тягтись на висоту рядка, і її нижня межа «пливе» вище за сусідні.
   Саме так поплила таблиця «Найближчі заїзди». Якщо треба flex усередині
   комірки — робити його на внутрішньому <span>, а не на самому td. */




/* ── Заголовок картки броні ──────────────────────────────────────────────── */
/* Довгий заголовок («Бронь №27 · 31 серпня — 2 вересня») переносився, і пілюлі
   падали на другий рядок. Дрібніший кегль лишає все в одну лінію. */
.page-head.tight h1{font-size:26px;line-height:1.2}
.page-head.tight h1 .pill{vertical-align:middle;margin-left:6px}
/* Дві пілюлі переносяться разом, а не поодинці */
.h1-pills{white-space:nowrap;display:inline-block}
@media (max-width:700px){
  .page-head.tight h1{font-size:21px}
  .page-head.tight h1 .pill{font-size:11px;padding:3px 9px;margin-left:4px}
}


/* ── Telegram: стан бота й пошук chat ID ─────────────────────────────────── */
.tg-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:13px}
.tg-bot a{font-weight:600;text-decoration:none;color:var(--green)}
.tg-bot em{font-style:normal;color:var(--muted)}
.tg-find{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.tg-found{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.tf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#FAF8F2;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.tf-n{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.tf-n b{font-size:13.5px}
.tf-n em{font-style:normal;font-size:11.5px;color:var(--muted)}
.tf code{font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 9px}
@media (max-width:520px){ .tf{gap:7px} .tf .btn{flex:1 1 100%;text-align:center} }

/* Скільки людей у ролі — лічильник біля назви */
.tg-chat .tg-cnt{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--moss-soft);color:var(--moss);font-style:normal;font-size:11px;font-weight:700}

.tg-find code,.hint code{background:#FAF8F2;border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:12px}


/* ── Шаблони повідомлень для Direct ──────────────────────────────────────── */
.dm-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0 4px;
  padding-top:14px;border-top:1px solid var(--line)}
.dm-row .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.dm-note{font-size:12.5px;color:var(--muted);margin-left:auto}
.dm-src{position:absolute;left:-9999px;width:1px;height:1px}
@media (max-width:520px){
  .dm-row .btn{flex:1 1 calc(50% - 4px);justify-content:center}
  .dm-note{margin-left:0;flex:1 1 100%}
}

/* Перелік підстановок над полями шаблонів */
.dm-vars{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 14px;padding:11px 13px;
  background:#FAF8F2;border:1px solid var(--line);border-radius:11px}
.dm-vars span{display:inline-flex;align-items:baseline;gap:6px;font-size:12px}
.dm-vars code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:11.5px}
.dm-vars em{font-style:normal;color:var(--muted)}
#dm_advance,#dm_rest{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6}


/* ── Редактор колажу «Атмосфера» ─────────────────────────────────────────── */
.mood-edit{display:flex;flex-direction:column;gap:9px}
.me-i{display:grid;grid-template-columns:64px 1fr auto;gap:11px;align-items:center;
  background:#FAF8F2;border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.me-ph{position:relative;display:block;width:64px;height:64px;border-radius:9px;overflow:hidden;
  cursor:pointer;background:var(--line);flex:0 0 auto}
.me-ph img{width:100%;height:100%;object-fit:cover;display:block}
.me-ph input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.me-ph span{position:absolute;left:0;right:0;bottom:0;padding:3px 0;text-align:center;
  font-size:9.5px;font-weight:600;color:#fff;background:rgba(43,51,39,.72)}
.me-ph.picked span{background:var(--moss)}
.me-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.me-tx input{padding:8px 11px;font-size:13.5px}
.me-ops{display:flex;flex-direction:column;gap:4px}
.me-ops button{width:30px;height:22px;border:1px solid var(--line);border-radius:7px;background:var(--card);
  color:var(--muted);font-size:12px;line-height:1;cursor:pointer;padding:0}
.me-ops button:hover{border-color:var(--moss);color:var(--green)}
.me-ops .rm{color:var(--red)}
.me-ops .rm:hover{border-color:var(--red);color:var(--red)}
@media (max-width:520px){
  /* На телефоні підписи стають окремим рядом на всю ширину картки: у колонці
     поруч зі стрілками поле було 194px і обрізало «Живий чебрець — не д…».
     Стрілки й хрестик ідуть рядом біля фото, цілі більшають до 44×34. */
  .me-i{grid-template-columns:56px 1fr;grid-template-areas:"ph ops" "tx tx";gap:8px 9px}
  .me-ph{grid-area:ph;width:56px;height:56px}
  .me-tx{grid-area:tx}
  .me-ops{grid-area:ops;flex-direction:row;justify-content:flex-end;align-items:center;gap:8px}
  .me-ops button{width:44px;height:34px;font-size:14px}
}

/* ── Додаткові гості: автопідрахунок у формі нової броні ───────────────────
   Блок з'являється, коли гостей більше, ніж місць у будиночку. */
.bn-extra{margin:4px 0 14px;padding:12px 14px;border:1px solid #E4D6B4;background:#FBF4E3;border-radius:11px}
.bn-extra-h{margin:0 0 8px;font-size:13.5px;color:var(--ink)}
.bn-extra-modes{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px}
.bn-extra-modes label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.bn-extra-modes input{width:16px;height:16px;accent-color:var(--moss);margin:0}
.bn-extra-calc{margin:0;font-size:12.5px;color:var(--ink-soft)}
.bn-svc-row.is-auto{border-color:#E4D6B4;background:#FDFAF2}
.auto-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);background:#F3E8CE;border-radius:999px;padding:2px 7px;margin-left:6px}
/* Той самий chat ID у кількох ролях — підказка, що дубля повідомлень не буде */
.tg-same{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:2px}
/* Смуга дій у формі рахунку: на телефоні вона була аж під реквізитами */
.inv-save{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  box-shadow:0 6px 20px rgba(38,45,32,.10)}
@media (min-width:901px){ .inv-save{position:static;background:none;border:0;padding:0;box-shadow:none} }

/* Смужка стрибків по місяцях у річному календарі — лише телефону */
.cy-jump{display:none}
@media (max-width:900px){
  .cy-jump{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;
    position:sticky;top:56px;z-index:5;background:var(--card)}
  .cy-jump::-webkit-scrollbar{display:none}
  .cy-jump a{flex:0 0 auto;padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;
    background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none}
  .cy-m{scroll-margin-top:110px}
}

/* Картка клієнта на телефоні: спершу дані (їх правлять), потім історія броней */
@media (max-width:900px){
  .cl-cols{display:flex;flex-direction:column}
  .cl-cols > *{min-width:0;width:100%}
  .cl-cols > .bk-side{order:-1}
}
/* «+N» біля кількості гостей — доплачені понад місткість */
.g-extra{font-style:normal;font-size:11px;font-weight:700;color:var(--gold-ink);margin-left:3px;vertical-align:2px}

/* На телефоні шапка «Броней» читається зверху вниз: назва → дії → фільтри,
   а пошук одразу під ними. Раніше чип «Фільтри» стояв між назвою й кнопками. */
@media (max-width:900px){
  .bk-head{align-items:stretch}
  .bk-head > div:first-child{order:0}
  .bk-head > .btns{order:1}
  .bk-head > .lf-row{order:2}
}
/* Назва місяця на Огляді — вхід у великий календар (кнопку прибрано) */
.cal-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line-2)}
.cal-link:hover{color:var(--moss);border-bottom-color:var(--moss)}
/* Дати в новій броні — кнопки, що ведуть до календаря (раніше мертві div-и) */
button.ro-day{width:100%;text-align:left;cursor:pointer;font:inherit}
button.ro-day:hover{border-color:var(--moss)}
.bn-cal.flash{animation:bnFlash .9s ease}
@keyframes bnFlash{0%{box-shadow:0 0 0 3px rgba(59,88,68,.35)}100%{box-shadow:0 0 0 0 rgba(59,88,68,0)}}

/* Картка послуги на телефоні: спершу фото (його й міняють найчастіше), потім опис */
@media (max-width:900px){
  .svc-page{display:flex;flex-direction:column}
  .svc-page > *{min-width:0;width:100%}
  .svc-page > div:nth-child(2){order:-1}
}

/* Плитки Огляду перебудовуються за шириною своєї колонки, а не вікна —
   правило живе поруч із .top-side (@container вище). */
.inv-sums i{font-style:normal;font-size:12.5px;color:var(--muted);display:block;margin-top:2px}

/* ── Кошик ─────────────────────────────────────────────────────────────── */
.tr-list { display: flex; flex-direction: column; gap: 10px }
.tr-row { display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff }
.tr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.tr-t { font-size: 15px }
.tr-n, .tr-when { color: var(--muted); font-size: 13px }
.tr-when { font-size: 12px }
.tr-warn { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 8px; padding: 4px 8px; font-size: 12px; margin-top: 3px }
.tr-act { display: flex; gap: 8px; flex: 0 0 auto }
.tr-act .btn { min-height: 40px }
.btn.ghost.danger { color: #b91c1c; border-color: #fecaca }
.btn.ghost.danger:hover { background: #fef2f2 }
@media (max-width: 700px) {
  .tr-row { flex-direction: column; align-items: stretch }
  .tr-act { justify-content: flex-end }
}

/* ── Аркуш на день (для друку) ──────────────────────────────────────────── */
.ds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; flex-wrap: wrap }
.ds-head h2 { margin: 0; font-size: 22px }
.ds-sub { color: var(--muted); font-size: 13px }
.ds-nav { display: flex; gap: 6px }
.ds-sec { margin: 0 0 18px }
.ds-sec h3 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px }
.ds-n { font-style: normal; font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 8px }
.ds-empty { color: var(--muted); margin: 0; font-size: 14px }
.ds-t { width: 100%; border-collapse: collapse; font-size: 14px }
.ds-t th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 4px 8px 6px }
.ds-t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top }
.ds-m { color: var(--muted); font-size: 12px; display: block }
.ds-note { display: block; font-size: 12px; margin-top: 2px }
.ds-foot { color: var(--muted); font-size: 12px; margin: 16px 0 0 }
/* Картки — тільки для телефона; на ноуті й у друку читається таблиця */
.ds-cards { display: none }
@media (max-width: 700px) {
  /* Таблиця в шість колонок вимагала 620px при екрані 328px: «Послуги» й
     «Позначки» лишались за кадром. На телефоні показуємо ті самі дані
     картками, таблиця ховається (у друку вона повертається). */
  .ds-cards { display: flex; flex-direction: column; gap: 8px }
  .day-sheet .ds-t { display: none }
  .ds-card { display: block; text-decoration: none; color: inherit; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px }
  .dc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
  .dc-h b { font-size: 15px }
  .dc-h span { font-size: 12.5px; color: var(--muted); white-space: nowrap }
  .dc-n { margin-top: 2px; font-size: 14px }
  .dc-n em { font-style: normal; color: var(--muted); font-size: 12.5px; display: block }
  .dc-d { font-size: 12.5px; color: var(--muted); margin-top: 2px }
  .dc-s { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px }
  .dc-s i { font-style: normal; font-size: 12px; background: var(--moss-soft); color: var(--ink);
    border-radius: 7px; padding: 3px 8px }
  .dc-m { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted) }
  .dc-debt { color: var(--gold-ink) }
  .dc-note { background: #fff8e7; border: 1px solid #f2e3bd; border-radius: 8px; padding: 4px 8px; color: var(--ink) }
  .day-sheet .ds-sec { overflow-x: auto }
  .ds-t { min-width: 620px }
  /* На 320px три кнопки гортання не вміщались поруч із датою — переносимо їх
     на свій рядок, а не звужуємо до нечитабельного. */
  .ds-head > div:first-child { flex: 1 1 100% }
  .ds-nav { flex: 1 1 100%; justify-content: flex-start }
}
@media print {
  /* Друк: лише аркуш. Меню, кнопки й підвал не потрібні на папері. */
  .no-print, header.top, .flash, .ds-cards { display: none !important }
  .day-sheet .ds-t { display: table !important }
  /* Папір білий, текст чорний: кольори тла в друку тільки їдять тонер,
     а приглушений сірий на принтері часто зникає зовсім. */
  body, .card, .day-sheet { background: #fff; color: #000 }
  .ds-m, .ds-empty, .ds-foot, .ds-t th, .ds-sub { color: #333 }
  .card, .day-sheet { border: 0; box-shadow: none; padding: 0; margin: 0 }
  .wrap { max-width: none; padding: 0 }
  .ds-sec { break-inside: avoid; page-break-inside: avoid }
  .ds-t td, .ds-t th { border-color: #999 }
  a { text-decoration: none; color: #000 }
}
/* Два часи розсилок поруч — на телефоні один під одним */
.tg-times { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap }
.tg-times .field { flex: 1 1 200px; min-width: 0 }
.tg-prev { margin-top: 12px }
.tg-prev > summary { cursor: pointer; color: var(--brand); font-size: 14px }
.tg-prev-b b { display: block; margin: 10px 0 4px; font-size: 13px }
.tg-prev pre { white-space: pre-wrap; word-break: break-word; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 }

/* ── Що нового ─────────────────────────────────────────────────────────── */
.wn-e { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line) }
.wn-e:last-child { border: 0; margin: 0; padding-bottom: 0 }
.wn-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.wn-h b { font-size: 17px }
.wn-h span { color: var(--muted); font-size: 13px }
.wn-l { margin: 10px 0 0; display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px }
.wn-l dt { font-weight: 600; font-size: 14px; min-width: 0 }
.wn-l dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; min-width: 0 }
@media (max-width: 700px) {
  .wn-l { grid-template-columns: 1fr; gap: 2px 0 }
  .wn-l dd { margin-bottom: 10px }
}
.nav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626; margin-left: 5px; vertical-align: 3px }

/* ── Пошук по всій CRM ─────────────────────────────────────────────────── */
.top-find { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 10px;
  padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; min-height: 36px }
.top-find:hover { background: rgba(255,255,255,.2) }
.top-find kbd { font: inherit; font-size: 11px; opacity: .7; border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px; padding: 0 5px; line-height: 1.5 }
.findbox { position: fixed; inset: 0; z-index: 90 }
.fb-veil { position: absolute; inset: 0; background: rgba(24,28,22,.45) }
.fb-win { position: relative; max-width: 620px; margin: 8vh auto 0; background: #fff;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden }
.fb-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line) }
.fb-in svg { color: var(--muted); flex: 0 0 auto }
.fb-in input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; background: none }
.fb-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 0 4px; min-height: 40px; min-width: 40px }
.fb-out { max-height: min(62vh, 520px); overflow-y: auto; padding: 6px }
.fb-hint { color: var(--muted); font-size: 13px; padding: 14px; margin: 0; line-height: 1.5 }
.fb-g { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: 10px 12px 4px }
.fb-r { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit }
.fb-r b { display: block; font-size: 14px; font-weight: 600 }
.fb-r span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fb-r.on, .fb-r:hover { background: var(--bg) }
.fb-r .hit { background: #fde68a; border-radius: 3px }
body.find-on { overflow: hidden }
@media (max-width: 900px) {
  /* У вузькій шапці лишається сама лупа: підпис і клавіша там не потрібні */
  .top-find span, .top-find kbd { display: none }
  .top-find { padding: 7px; min-width: 36px; justify-content: center }
}
@media (max-width: 700px) {
  .fb-win { margin: 0; max-width: none; border-radius: 0; height: 100% }
  .fb-out { max-height: calc(100% - 62px) }
}

/* ── Чек до витрати ────────────────────────────────────────────────────── */
.rc { display: inline-flex; align-items: center; gap: 8px }
.rc-th { display: block; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); flex: 0 0 auto }
.rc-th img { width: 100%; height: 100%; object-fit: cover; display: block }
.rc-add input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.rc-add label { cursor: pointer }

/* ── Тиждень: продовження броні ────────────────────────────────────────────
   Ніч у середині перебування не повторює всю картку: досить смуги кольору
   будиночка з іменем — «тут зайнято, це той самий гість». */
.cw-b.cont { padding: 6px 9px; background: color-mix(in srgb, var(--c) 8%, #fff); opacity: .92 }
.cw-b.cont .cn { font-size: 12.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block }
.cw-b.cont .go { font-size: 11px; color: var(--muted); display: block; margin-top: 1px }
/* Підказку про перетягування бачить лише той, у кого є миша */
@media (hover: none), (pointer: coarse) { .hover-only { display: none } }

/* ── Ціни за періодами ─────────────────────────────────────────────────── */
.wd-row { display: flex; gap: 6px; flex-wrap: wrap }
.wd { position: relative; cursor: pointer }
.wd input { position: absolute; opacity: 0; width: 1px; height: 1px }
.wd span { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff }
.wd.on span, .wd input:checked + span { background: var(--moss); color: #fff; border-color: var(--moss) }
.wd input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px }
.ss-list { display: flex; flex-direction: column; gap: 8px }
.ss-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff }
.ss-row.past { opacity: .55 }
.ss-row.now { border-color: var(--moss); box-shadow: inset 3px 0 0 var(--moss) }
.ss-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.ss-m b { font-size: 14.5px }
.ss-m span { font-size: 12.5px; color: var(--muted) }
.ss-tag { font-style: normal; font-size: 11px; color: var(--moss); border: 1px solid var(--moss);
  border-radius: 20px; padding: 1px 7px; margin-left: 4px }
.ss-p { flex: 0 0 auto; font-size: 15px }
@media (max-width: 700px) {
  /* Таблиця цін у три колонки не вміщалась на 320px — «як у будні» переноситься,
     а числа лишаються нерозривними. */
  .ss-row { flex-wrap: wrap }
  .card table.tbl td, .card table.tbl th { padding-left: 6px; padding-right: 6px }
  .card table.tbl td.r { white-space: normal }
}
/* Ціна будиночка в списку: `.svc-row .pr` має white-space:nowrap, і довший
   підпис «будні · вих. 5 500 ₴» розсував сторінку на 320px. Саме число
   лишається нерозривним, а підпис під ним переноситься. */
.svc-row .pr { min-width: 0 }
.svc-row .pr small { white-space: normal; display: block }

/* ── Календар на телефоні: до сітки було 493px першого екрана ─────────────
   Пояснення під заголовком, підпис кнопки «Списком» і зайві ряди панелі
   з'їдали більше, ніж сам календар. Тут вони згортаються — на ноуті все
   лишається як було. */
@media (max-width: 700px) {
  .ph-slim { gap: 8px; margin-bottom: 12px }
  .ph-slim > div > p { display: none }          /* підказку читають раз, місце займає завжди */
  .ph-slim h1 { font-size: 24px }
  .ph-slim .btns { gap: 6px }
  .ph-slim .btns .btn { padding: 9px 12px; font-size: 13.5px; min-height: 40px }

  .cal-bar { gap: 8px; margin-bottom: 10px }
  .cal-bar .tabs { gap: 4px }
  .cal-bar .tabs a { padding: 8px 12px; font-size: 13.5px; min-height: 40px;
    display: flex; align-items: center }
  /* Стрілки, назва періоду і «Сьогодні» — рівно один ряд */
  .cal-move { flex-wrap: nowrap; width: 100%; gap: 8px }
  .cal-move .cal-nav { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0 }
  .cal-title { flex: 1 1 auto; min-width: 0; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .cal-move .mv { flex: 0 0 auto }
  .cal-move .btn.sm { flex: 0 0 auto; padding: 8px 10px; font-size: 13px; min-height: 40px }
}
/* Панель чернетки: дві дії в рядку, на телефоні переносяться */
.draft-bar { flex-wrap: wrap; gap: 8px }
.draft-bar .lnk { min-height: 40px }
/* Дві кнопки-підстановки суми поруч; на вузькому — одна під одною */
.pay-quick { display: flex; gap: 8px; flex-wrap: wrap }
.pay-quick .btn { flex: 1 1 auto; min-width: 0 }
/* «аванс» у рядку боргу: підставляє суму, не вносить її */
.qp-adv { background: none; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted);
  font: inherit; font-size: 12.5px; padding: 0 10px; min-height: 44px; cursor: pointer; white-space: nowrap }
.qp-adv:hover { border-color: var(--moss); color: var(--moss); border-style: solid }

/* ── Найчастіші послуги під шапкою броні ───────────────────────────────── */
.quick-svc { margin: 0 0 18px }
.qs-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; align-items: center }
.qs-row form { display: contents }
.qs-row button { background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 0 13px; min-height: 44px; font: inherit; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink) }
.qs-row button:hover { border-color: var(--moss); background: var(--moss-soft) }
.qs-row button b { font-weight: 600; color: var(--muted) }
.qs-all { font-size: 12.5px; color: var(--muted); text-decoration: none; padding: 0 6px;
  min-height: 44px; display: inline-flex; align-items: center }
.qs-all:hover { color: var(--moss) }
#svcAll { scroll-margin-top: 76px }
/* Записка про гостя й покоївка в картці дня на Огляді */
.dr-note { margin-top: 6px; display: flex; flex-direction: column; gap: 2px }
.dn-c { font-size: 12.5px; color: var(--ink); background: #fff8e7; border: 1px solid #f2e3bd;
  border-radius: 8px; padding: 4px 8px }
.dn-m { font-size: 12px; color: var(--muted) }
/* Канали звʼязку просто в рядку шаблонів: копіювати й писати — поруч */
.dm-send { display: inline-flex; gap: 6px; flex-wrap: wrap }

/* ── Перенос броні кнопкою ─────────────────────────────────────────────── */
.shift-box { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff }
.shift-box > summary { cursor: pointer; padding: 12px 14px; font-size: 14px; min-height: 44px;
  display: flex; align-items: center; color: var(--ink) }
.shift-box[open] > summary { border-bottom: 1px solid var(--line) }
.shift-form { padding: 12px 14px 14px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap }
.shift-form .field { margin: 0; flex: 1 1 200px; min-width: 0 }
.shift-form .btn { flex: 0 0 auto; min-height: 44px }

/* ── Надходження й переплати у Фінансах ────────────────────────────────── */
.pm-other { font-style: normal; font-size: 11px; color: #9a3412; background: #fff7ed;
  border: 1px solid #fed7aa; border-radius: 20px; padding: 1px 7px; margin-left: 4px }
.over-warn { margin-top: 16px; border: 1px solid #fed7aa; background: #fff7ed;
  border-radius: 12px; padding: 12px 14px }
.over-warn b { color: #9a3412 }
.over-warn p { margin: 4px 0 8px; font-size: 13px; color: var(--muted) }
.over-warn ul { margin: 0; padding-left: 18px; font-size: 13.5px }
.over-warn li { margin-bottom: 3px }

/* ── Фільтри броней на телефоні: компактно ─────────────────────────────── */
/* Було: згорнутий рядок «Фільтри · діють» нічого не казав, а розгорнутий
   займав ~250px — по рядку на кожне поле. Тепер у згорнутому видно, ЩО діє,
   а розгорнутий тримається у три щільні ряди. */
.lf-what { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px }
.lf-clear { color: #b91c1c !important; border-color: #fecaca !important }
.lf-clear:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #b91c1c !important }
@media (max-width: 900px) {
  /* Пресети — найперші: ними користуються замість набирання дат */
  .lf-fold-body { gap: 8px }
  .lf-presets { order: -1; flex: 1 1 100%; gap: 6px }
  .lf-presets a { flex: 1 1 auto; text-align: center; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center }
  /* Підпис — НАД полем, а не поруч: у рядок «Дати з [поле]» на телефоні
     не влазить пара, і кожне поле займало власний ряд. Стовпчиком дві пари
     спокійно стають у два ряди навіть на 320px.
     min-width:0 обовʼязковий: нативне поле дати ширше за пів екрана і без
     нього розсуває всю сторінку. */
  .lf-fold-body > .lf-g { min-width: 0; flex-direction: column; align-items: stretch; gap: 3px }
  .lf-fold-body > .lf-g > label { font-size: 11.5px; color: var(--muted) }
  /* Дата словами стає в один рядок із підписом, а не окремим — інакше блок
     фільтрів виростає на цілий ряд там, де місце й так на вагу золота. */
  .lf-dates { flex: 1 1 calc(50% - 5px); display: grid;
    grid-template-columns: auto 1fr; grid-template-areas: "lab word" "inp inp"; gap: 2px 6px }
  .lf-dates > label { grid-area: lab }
  .lf-dates > .date-word { grid-area: word; text-align: right; margin: 0; align-self: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .lf-dates > input[type=date] { grid-area: inp; width: 100%; min-width: 0 }
  .lf-g select { width: 100%; min-width: 0 }
  /* Ці два блоки — ряди чипів, а не «підпис + поле»: колонковий напрямок
     від .lf-g робив з них стовпчик кнопок на всю ширину. */
  .lf-presets, .lf-pay { flex-direction: row !important; align-items: center }
  .lf-dates label { font-size: 12px }
  .lf-dates input[type=date] { padding: 8px; font-size: 13px }
  /* Гості й клієнт — теж парою, а не двома рядами на всю ширину */
  .lf-g:has(#f_guests) { flex: 1 1 calc(50% - 5px) }
  .lf-cs { flex: 1 1 calc(50% - 5px) }
  .lf-cs label { font-size: 12px }
  .lf-what { display: block; margin: 2px 0 0; font-size: 12px }
  .lf-fold > summary { align-items: flex-start; flex-direction: column; gap: 0; width: 100%;
    position: relative; padding-right: 34px }
  .lf-fold > summary::after { position: absolute; right: 14px; top: 12px }
}
@media (max-width: 380px) {
  /* На найвужчих екранах пари не вміщаються — кожне поле у свій ряд.
     І сам рядок мусить мати min-width:0: нативне поле дати ширше за 320px
     і інакше розсуває всю сторінку. */
  .lf-row, .lf-fold, .lf-fold-body { min-width: 0; max-width: 100% }
  .lf-presets a { padding: 0 8px; font-size: 12.5px }
}
/* Шапка «Броней» на телефоні: три кнопки в один ряд */
@media (max-width: 700px) {
  .wide-only { display: none }
  .bk-head .btns { flex-wrap: nowrap; gap: 6px; width: 100% }
  .bk-head .btns .btn { flex: 1 1 auto; min-width: 0; justify-content: center;
    padding: 10px 8px; font-size: 13.5px; white-space: nowrap }
  .bk-head .btns .bt-t { display: none }
}

/* ── «Актуальні / Минулі» переїхали у смугу фільтрів ───────────────────── */
/* На ноуті блок фільтрів більше не тягнеться на всю ширину — тоді вкладки
   стають поруч із пресетами, у вільне місце праворуч. На телефоні він
   лишається на всю ширину, а вкладки йдуть під ним окремим рядом. */
@media (min-width: 901px) {
  /* Скрипт переносить вкладки всередину блоку фільтрів — там вони стають
     у вільне місце після пресетів, у той самий ряд. */
  .lf-fold-body > .lf-tabs { flex: 0 0 auto; margin-left: 4px }
}
.lf-tabs { display: flex; gap: 6px }
@media (max-width: 900px) {
  .lf-tabs { flex: 1 1 100%; order: 2 }
  .lf-tabs a { flex: 1 1 0; text-align: center; justify-content: center }
}

/* ── Множинний вибір у фільтрах (Гостей) ──────────────────────────────── */
.ms { position: relative }
.ms > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff;
  font-size: 13.5px; min-height: 40px; white-space: nowrap }
.ms > summary::-webkit-details-marker { display: none }
.ms > summary::after { content: '▾'; font-size: 10px; color: var(--muted); margin-left: auto }
.ms[open] > summary { border-color: var(--moss) }
.ms[open] > summary::after { content: '▴' }
.ms-lbl { overflow: hidden; text-overflow: ellipsis }
.ms-box { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 180px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 6px;
  box-shadow: 0 12px 28px rgba(38,45,32,.16); display: flex; flex-direction: column; gap: 2px }
/* ⚠️ ГОЛОВНЕ ПРО <details>: браузер ховає вміст закритого блоку правилом із
   НИЗЬКОЮ вагою, тож будь-який наш `display: flex/block` на дитині його
   перебиває — і згорнуте меню чи згорнуті фільтри висипаються поверх сторінки
   (саме це було видно на телефоні: список «2 гості / 3 гості» і пункти меню
   «Ще» лежали на підсумках списку броней). Одне правило на весь продукт. */
details:not([open]) > *:not(summary) { display: none !important }
.ms-i { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px; min-height: 40px; margin: 0 }
.ms-i:hover { background: var(--bg) }
.ms-i input { width: 17px; height: 17px; accent-color: var(--moss); margin: 0; flex: 0 0 auto }
.ms-clear { margin-top: 4px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--muted); font: inherit; font-size: 13px; padding: 9px 10px 4px; cursor: pointer;
  text-align: left; min-height: 40px }
.ms-clear:hover { color: var(--moss) }
@media (max-width: 900px) {
  /* На телефоні випадайка притискається до лівого краю свого поля й не вилазить */
  .ms-box { left: 0; right: 0; min-width: 0 }
  .lf-guests .ms > summary { width: 100% }
}

/* ── Стан оплати у фільтрах і сортування колонок ───────────────────────── */
.lf-pay { display: flex; gap: 6px }
.lf-pay a { display: inline-flex; align-items: center; padding: 0 12px; min-height: 40px;
  border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--ink-soft);
  text-decoration: none; font-size: 13px; white-space: nowrap }
.lf-pay a:hover { border-color: var(--moss); color: var(--moss) }
.lf-pay a.on { background: var(--moss); border-color: var(--moss); color: #fff }
.tbl th.srt a { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent }
.tbl th.srt a:hover { color: var(--moss); border-bottom-color: var(--moss) }
.tbl th.srt.on a { color: var(--moss); font-weight: 700 }
@media (max-width: 900px) {
  .lf-pay { flex: 1 1 100%; order: 3; gap: 6px }
  .lf-pay a { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 12.5px }
  .lf-pay .lf-clear { flex: 0 0 auto }
}

/* ── Клієнти на телефоні: картки замість таблиці на шість колонок ──────── */
.cl-cards { display: none }
@media (max-width: 900px) {
  .cl-cards { display: flex; flex-direction: column; gap: 8px }
  .cl-table { display: none }
  .cl-card { background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 11px 13px; cursor: pointer }
  .cc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
  .cc-n { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none }
  .cc-debt { color: var(--gold-ink); white-space: nowrap; font-size: 14px }
  .cc-m { font-size: 12.5px; color: var(--muted); margin-top: 2px }
  .cc-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
  .cc-b { display: inline-flex; align-items: center; min-height: 40px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: 9px; font-size: 13px;
    color: var(--ink-soft); text-decoration: none; background: var(--bg) }
  .cc-b:hover { border-color: var(--moss); color: var(--moss) }
}

/* ── Позначка «гість приїхав» ──────────────────────────────────────────── */
.dr-arr { margin-top: 7px }
.arr { background: #fff; border: 1px dashed var(--line-2); border-radius: 9px;
  font: inherit; font-size: 12.5px; color: var(--muted); padding: 0 11px; min-height: 40px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.arr:hover { border-color: var(--moss); color: var(--moss); border-style: solid }
.arr.on { background: var(--moss-soft); border: 1px solid var(--moss); color: var(--green) }
.arr.on i { font-style: normal; color: var(--muted); font-size: 11.5px }
.ds-arr { display: flex; gap: 8px; flex-wrap: wrap }
.dc-arr { display: block; margin-top: 6px; font-size: 12px; color: var(--green) }

/* ── Історія цін будиночка ─────────────────────────────────────────────── */
.pl-box > summary { cursor: pointer; font-size: 13.5px; color: var(--muted); min-height: 40px;
  display: flex; align-items: center; gap: 7px }
.pl-box > summary i { font-style: normal; font-size: 11px; border: 1px solid var(--line);
  border-radius: 20px; padding: 0 7px }
.pl-box > summary:hover { color: var(--moss) }
.pl-list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px }
.pl-list li { font-size: 13px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap }
.pl-w { font-size: 11.5px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 1px 7px }
.pl-list em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: auto }

/* ── Шапка «Клієнтів»: порядок у випадайці, кнопки компактні ───────────── */
/* П'ять чипів «Порядок:» займали на телефоні два рядки, а міняють їх раз на
   місяць. Тепер це одна кнопка поруч із рештою — місце віддано карткам. */
.cl-btns { align-items: center; gap: 8px }
.cl-sort > summary { min-height: 40px; padding: 0 11px; font-size: 13px; color: var(--ink-soft) }
.cl-sort .ms-box { right: 0; left: auto; min-width: 200px }
.cl-sort .ms-i { text-decoration: none; color: var(--ink) }
.cl-sort .ms-i.on { background: var(--moss-soft); color: var(--green); font-weight: 600 }
.btn.sm { padding: 8px 12px; font-size: 13.5px; min-height: 40px }
@media (max-width: 700px) {
  .cl-btns { flex-wrap: nowrap; width: 100%; gap: 6px }
  .cl-btns > * { flex: 0 1 auto; min-width: 0 }
  .cl-sort { flex: 1 1 auto }
  .cl-sort > summary { width: 100% }
  .cl-btns .btn { white-space: nowrap; padding: 8px 10px }
  .cl-btns .bt-t { display: none }
}
/* Номер броні поруч з іменем: у списках трапляються тезки з однаковим телефоном */
.qp-id, .dr-id { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 500; margin-left: 6px }
/* Кнопка створення вимкнена, поки обрані ночі зайняті */
.bn-bar button[type=submit][disabled] { opacity: .5; cursor: not-allowed }
/* Дата словами під нативним полем: формат браузера буває «09/15/2026» */
.date-word { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 3px }
.lf-g .date-word { margin-top: 2px }
/* Хрестик скидання просто в полі пошуку: на телефоні кнопки поруч приховані */
.search .s-box { position: relative }
.s-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--muted); text-decoration: none; font-size: 20px; line-height: 1 }
.s-x:hover { background: var(--bg); color: var(--ink) }
.search .s-box input { padding-right: 44px }

@media (max-width: 900px) {
  /* Назва позиції окремим рядом: інакше в неї лишається смужка на пів слова.
     ⚠️ Кількість і ціна загорнуті в <label class="inv-f"> — саме їм і треба
     давати області, інакше вони автоматично створюють зайві колонки. */
  .inv-h { display: none }
  .inv-row { grid-template-columns: 74px 104px 1fr 34px;
    grid-template-areas: "nm nm nm nm" "qty price sum del"; gap: 6px 8px }
  .inv-row > input[name=item_name] { grid-area: nm; width: 100%; min-width: 0 }
  .inv-row > .inv-f:nth-of-type(1) { grid-area: qty }
  .inv-row > .inv-f:nth-of-type(2) { grid-area: price }
  .inv-row > .row-sum { grid-area: sum }
  .inv-row > .sl-x { grid-area: del }
}
/* Варіант послуги з вилкою цін: «Трансфер · мікроавтобус 600 ₴» */
.quick .q-v, .qs-row .q-v { font-style: normal; font-size: 12px; color: var(--muted) }
.quick .q-v::before, .qs-row .q-v::before { content: '· ' }

/* ── Шапка календаря: кнопки не мають стрибати між видами ──────────────── */
/* У річному виді підказка про перетягування не показується, текст стає
   коротшим — і «+ Нова бронь» переїжджала з лівого краю під заголовком
   на правий верхній кут. Тепер текст обмежений, а кнопки завжди праворуч. */
@media (min-width: 901px) {
  .ph-slim { flex-wrap: nowrap; align-items: flex-start }
  .ph-slim > div:first-child { flex: 1 1 auto; min-width: 0; max-width: 62ch }
  .ph-slim > .btns { flex: 0 0 auto; align-self: flex-start }
}
/* Розділи, які на широкому екрані вже стоять у смузі, у меню «Ще» не дублюються.
   До 900px смуга їх ховає — там вони в меню обовʼязкові. */
@media (min-width: 901px) { .more-menu a.only-wide-hide { display: none } }
/* «Сайт» і «Вийти» — не розділи CRM: відокремлюємо їх від решти меню */
.more-menu a.mm-sep { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line) }

/* Аватар працівника: ініціал стояв у лівому верхньому куті коробки 64×48 —
   виглядало як обрізане фото, а не як аватар. */
.svc-row .st-av { display: grid; place-items: center; font-size: 20px; font-weight: 600;
  color: var(--moss); background: var(--moss-soft); font-family: 'Cormorant Garamond', serif }

/* Поле всередині рядка не додає власного відступу: разом із gap рядка це давало
   між «Телефон» і «Instagram» більший розрив, ніж між рештою полів. */
.row > .field { margin-bottom: 0 }
.row { margin-bottom: 15px }

/* Рядок довідника — посилання: показуємо це стрілкою праворуч, а не лише
   курсором (на телефоні курсора немає взагалі). */
.svc-row { position: relative }
.svc-row::after { content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--line-2); font-size: 20px; line-height: 1; transition: color .15s }
.svc-row:hover::after { color: var(--moss) }
.svc-row .pr, .svc-row .ord { margin-right: 14px }

/* Огляд на телефоні: три кнопки в один ряд, привітання компактніше */
@media (max-width: 700px) {
  .dash-head .btns { flex-wrap: nowrap; width: 100%; gap: 6px }
  .dash-head .btns .btn { flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 10px 6px; font-size: 13px; white-space: nowrap }
}

/* Мітки «заїзд» / «остання ніч» — це стан броні, а не послуга: робимо їх
   контурними, щоб не плутались із чипами послуг у тій самій картці. */
.cw-b .in, .cw-b .out { background: transparent; border: 1px solid currentColor; letter-spacing: .04em }
.cw-b .in { color: #3F6B45 }
.cw-b .out { color: #8A4419 }
/* Блок «Прибрати з персоналу» — під лівою колонкою, тієї ж ширини, що й картка */
@media (min-width: 901px) { .danger-card { max-width: 764px } }

/* F130 — у смузі картки клієнта на 390px група `.bb-links` має `flex-wrap:nowrap` і тисне три чипи в один рядок 328px — номер `.b */
/* ── Контакти в картці клієнта на телефоні не ріжемо ─────────────────────── */
/* Група стояла nowrap і на 390px тиснула три кнопки в один рядок: номер
   показувався як «56726…» (81px тексту в 61px). Дозволяємо групі
   переноситись, а кнопці — бути не вужчою за власний вміст. */
@media(max-width:900px){
  .bb-links{flex-wrap:wrap;gap:8px}
  .bb-links .bb-tel{flex:1 1 auto;min-width:max-content}
}

/* F148 — на /admin/finance при 390px картка «Очікуємо оплату» починається на y=3872 з 4516 (пʼятий екран) — нижче графіка, розбив */
/* ── Фінанси на телефоні: боржники одразу під плитками ───────────────────── */
/* «Очікуємо оплату» стояла останньою — на 390px це y≈3900 з 4500 (пʼятий
   екран). Аналітику (рік, будиночки, за що гроші, надходження, витрати)
   лишаємо в тому ж порядку, просто нижче. Гроші, яких бракує, — найперші. */
/* Порядок блоків у Фінансах лишається як був: власник відмовився від
   перенесення боржників угору (це його рішення, не недогляд). */

/* F178 — рядок довідника `.svc-row` на 390px лишається трьома колонками (56px фото + 123px текст + 51px ціна), опис ламається на */
/* ── Рядок довідника на телефоні: два рівні замість трьох колонок ────────── */
/* Три колонки лишали назві 123px: опис ламався на чотири рядки, а мітка
   «на сайті» падала окремим рядком — рядок виростав до 184px (223px на 320).
   Тепер зверху фото й назва, знизу мітка ліворуч і ціна праворуч: 99px. */
@media(max-width:560px){
  .svc-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:8px}
  .svc-row .ph{flex:0 0 56px}
  .svc-row .nm{flex:1 1 120px}
  .svc-row .nm small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .svc-row .badges{flex:0 0 auto}
  .svc-row .pr{flex:0 0 auto;margin-left:auto;font-size:17px}
  .svc-row .pr small{display:inline;font-family:'Montserrat',sans-serif;
    font-size:12px;font-weight:500;color:var(--muted);margin-left:6px}
}

/* F180 — на /admin/services при 390px згорнутий блок «＋ Додати послугу» починається на y=1939 з 2051 — під усіма картками; на /ad */
/* ── Довідники на телефоні: «＋ Додати …» одразу під заголовком ──────────── */
/* Згорнутий блок додавання стояв під усім списком: на /admin/services це
   y=1939 з 2051. Він займає лише 80px у згорнутому вигляді, тож нагорі
   нікому не заважає. Клієнтів це не стосується — там свій порядок
   (.cl-page) і окрема кнопка в шапці. */
@media (max-width:900px){
  .grid.g2:has(.svc-list) > .card:has(> .exp-add){order:-1}
}

/* F201 — на /admin/settings при 390px «Примітка внизу рахунку» має clientHeight 78 при scrollHeight 94 (зрізаний останній рядок), */
/* ── Налаштування: текстові поля не ховають останній рядок ───────────────── */
/* `rows` рахує логічні рядки, а не перенесені: «Примітка внизу рахунку»
   показувала 78px при 94px вмісту й різала рядок навпіл, «Аванс» — 302 при 342.
   Де браузер уміє, поле росте під вміст (стеля 360px ≈ 18 рядків); де ні —
   лишається рівно як було, тож це нічого не ламає. */
#payee_lines,#bank_lines,#req_note,#dm_advance,#dm_rest{
  field-sizing:content;max-height:360px;
}

/* F058 — на 320px `.c-sum` має `white-space:normal`, і «18 275 ₴» стає двома рядками («18» / «275 ₴») — 2 картки з 5 у списку; ви */
/* Сума броні в мобільній картці списку рвалась на два рядки («18» / «275 ₴»):
   правило `.card table.tbl td.r{white-space:normal}` писалось для таблиці цін
   сезонів, але має більшу вагу й чіпляло всі праві комірки. Повертаємо
   нерозривність саме сумам у списку броней. */
@media (max-width:700px){
  .card table.tbl.bk-list td.c-sum{white-space:nowrap}
}

/* F063 — рядок «Грабарчук Андрій · +380960284636 1 бронь» переноситься у два рядки — 54px проти 36px у решти; до того ж `min-widt */
/* Випадайка клієнта у фільтрах списку: min-width:300px виносив панель за правий
   край (на 390px сторінка розтягувалась до 499px), а «імʼя · телефон  N броней»
   рвалось на два рядки (54px проти 36px). Тепер панель тримається правого краю
   поля, імʼя обрізається трикрапкою, лічильник — окремим стовпчиком праворуч. */
@media (max-width:700px){
  .lf-cs .cs-list{min-width:0;left:auto;right:0;width:min(300px,calc(100vw - 28px))}
}
.lf-cs .cs-i{position:relative;display:block;white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis;padding-right:78px}
.lf-cs .cs-i i{position:absolute;right:11px;top:9px;margin-left:0}

/* F074 — на 320px поля дат у `.bk-when .row4` по 123px, і рік обрізаний — видно «09/09/202», остання цифра ховається під іконкою */
/* Дати в картці броні на 320px: поле 123px обрізало рік — «09/13/202», остання
   цифра під іконкою пікера. Менші поля по боках і кегль 13,5px вміщають повну
   дату, а ряд лишається у два стовпчики: один стовпчик подовжив би блок
   зі 172px до 355px і відсунув усе, що нижче. */
@media(max-width:380px){
  .bk-when .row4 input[type=date]{padding-left:8px;padding-right:2px;font-size:13.5px}
}

/* F208 — На 1440 «Головний екран — заголовок і фото» стоїть на y=425, а «Головний екран — решта написів» — на y=2393 (1968px нижч */
/* F208 — «Головний екран» був розрізаний на дві картки в різних кінцях
   /admin/texts: заголовок і фото на y=425, решта написів на y=2393, а між ними
   картка колажу «Атмосфера» (1038px). Опускаємо колаж під сітку текстів —
   обидві половини «Головного екрана» стають одна під одною, а колаж опиняється
   поруч зі своїми написами «Відео і атмосфера». Порядок полів у формі й те, що
   надсилається на сервер, від цього не залежить. */
form[action="/admin/texts"]{display:flex;flex-direction:column}
form[action="/admin/texts"] > .card:has(#moodEdit){order:1}
form[action="/admin/texts"] > .savebar{order:2}

/* F274 — у картці броні селект «Будиночок» лишає під текст 108px при 390px і 73px при 320px, тоді як обране ««Липа» — 4 500 ₴» по */
/* F274 — у картці броні селект «Будиночок» на 390px має 108px під текст, якому треба 133px: обране ««Липа» — 4 500 ₴» зрізане */
/* Ряд «Заїзд · Виїзд · Будиночок · Гостей» на телефоні — два стовпчики по 158px.
   Датам цього досить, а назві будиночка з ціною — ні. Віддаємо будиночку весь
   рядок (дати лишаються поруч, як були): блок росте зі 170 до 250px, зате
   обране значення видно повністю — а саме воно міняє суму броні. */
@media (max-width: 520px) {
  .bk-when .row4 .field:has(> select#house_id) { grid-column: 1 / -1 }
}

/* F285 — у «Будиночках/Послугах» ціна набрана Cormorant 20px зі старостильними цифрами, а знака ₴ у unicode-range цього шрифту не */
/* F285 — ціни в довідниках набрані Cormorant зі старостильними цифрами («1» читається як «I»), а ₴ падає в системний шрифт і стоїть вище цифр */
/* Одне правило для грошей. Cormorant віддає старостильні цифри (у «1 950 ₴»
   одиниця схожа на «I», 9 і 5 провалюються під рядок), а ₴ у його unicode-range
   немає — символ бере системний шрифт і виглядає чужим. Великі підсумки лишаємо
   серифом, але з рядковими табличними цифрами; ціни в довідниках ведемо тим
   самим гротеском, що й суми в картці броні. */
.mny-big b, .total-line b, .bk-band b { font-variant-numeric: lining-nums tabular-nums }
.svc-row .pr { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums }
.svc-row .pr small { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px }
@media (max-width: 700px) { .svc-row .pr { font-size: 15px } }

/* F044 — На /admin при 390 px плитка «НОВІ БРОНІ 3 · створені за 7 днів» (y 1115) стоїть просто над секцією «Нові броні» (y 1395) */
/* ── Огляд на телефоні: без подвійних «Нових броней» ───────────────────────
   На вузькому екрані плитка-лічильник опиняється просто над списком тих самих
   броней (390px: плитка y≈1115, секція y≈1395) — лишаємо сам список, а решту
   плиток тримаємо парами: остання займає обидві колонки, тож «сироти» в
   другому ряду не буде. На ПК нічого не міняємо — там плитки стоять у правій
   колонці окремо від списку, і 2×2 / 4×1 лишаються як були. */
@media(max-width:760px){
  .top-side .tiles a.tile[href="/admin/bookings"]{display:none}
  .top-side .tiles > a.tile:last-child{grid-column:span 2}
}
/* Поточний місяць у річному виді — інакше його доводилось шукати очима */
.cy-m.now { box-shadow: inset 0 0 0 2px var(--moss); border-radius: 12px }
.cy-badge { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--moss); border-radius: 20px;
  padding: 1px 7px; margin-left: 6px; vertical-align: 2px }
/* Позначка «потрібне пояснення» — для послуг із майже однаковою назвою */
.svc-warn { font-style: normal; font-size: 10.5px; font-weight: 600; color: #9a3412;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 20px; padding: 1px 7px; margin-left: 6px }


/* Назва місяця в річному виді — це перехід у місячний вигляд, але виглядала
   як звичайний заголовок: ніхто не здогадувався клікнути. */
.cy-m h5 a { text-decoration: none; color: inherit; border-bottom: 1px dashed var(--line-2);
  padding-bottom: 1px; transition: color .15s, border-color .15s }
.cy-m h5 a:hover { color: var(--moss); border-bottom-color: var(--moss) }
.cy-m h5 a::after { content: ' →'; font-size: 11px; color: var(--line-2); vertical-align: 1px }
.cy-m h5 a:hover::after { color: var(--moss) }
/* Сума й крапка «не сплачено» в місячній клітинці — той самий набір даних,
   що й у тижневому вигляді */
.cm-b .cm-sum { font-style: normal; font-size: 10.5px; color: var(--muted); margin-left: 4px; white-space: nowrap }
.cm-b .cm-sum u { text-decoration: none; color: var(--gold-ink); font-weight: 700 }

/* ── Підрозділи Налаштувань на телефоні ────────────────────────────────── */
/* Шість пунктів у чотири ряди займали 134px, і разом із заголовком до першої
   картки лишалось 362px — майже пів екрана. Тепер це одна смуга з
   горизонтальним гортанням, як вкладки в застосунках. */
@media (max-width: 700px) {
  /* Без відʼємних полів: вони давали 4px горизонтального переповнення */
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 12px; padding: 0 0 10px; scroll-snap-type: x proximity }
  .subnav::-webkit-scrollbar { display: none }
  .subnav a { flex: 0 0 auto; padding: 8px 13px; font-size: 13.5px; scroll-snap-align: start }
  /* Заголовок сторінки дублює назву активної вкладки — на телефоні досить вкладки */
  .subnav + .page-head > div > h1 { font-size: 22px }
  .subnav + .page-head > div > p { display: none }
}
/* Час словами поруч із полем: браузер може показувати «07:30 AM» */
.time-word { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--muted) }
.tg-how > summary { cursor: pointer; font-size: 13.5px; color: var(--moss); min-height: 40px;
  display: flex; align-items: center }

/* ── Телефон гостя виглядає однаково скрізь ────────────────────────────── */
/* Було чотири різні вигляди на чотирьох екранах: пігулка в картці броні,
   звичайне посилання у списках і на Оплатах, кнопка в клієнтах. Лишаємо
   один спокійний вигляд-«чип» із ціллю пальця 40px там, де це окрема дія. */
.up-tel, .qp-tel {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--ink-soft); text-decoration: none; font-size: 12.5px; white-space: nowrap;
}
.up-tel:hover, .qp-tel:hover { border-color: var(--moss); color: var(--moss) }
@media (max-width: 700px) { .up-tel, .qp-tel { min-height: 40px; padding: 0 11px } }


/* Таблиця послуг у Фінансах на 320px не вміщала останню колонку «Частка» —
   вона лишалась за краєм, і про неї не здогадатись. Стискаємо відступи й
   ховаємо слово «Частка» за знаком «%»: чотири колонки вміщаються. */
@media (max-width: 380px) {
  .card .scroll table.tbl th, .card .scroll table.tbl td { padding-left: 5px; padding-right: 5px; font-size: 12.5px }
}
/* Короткі підписи для найвужчих екранів. ⚠️ Клас .wide-only тут не годиться:
   він уже вимикається на ≤700px заради кнопок у Бронях — потрібен свій. */
.narrow-only { display: none }
@media (max-width: 380px) { .narrow-only { display: inline } .hide-narrow { display: none } }


/* Стрілки порядку в довідниках: на телефоні вони забирали ширину в назви
   (30px + проміжки), а те саме можна виставити полем «Порядок показу»
   в самій картці. На вузькому екрані ховаємо їх. */
@media (max-width: 700px) { .svc-item > .ord { display: none } }
.svc-row .sm-lbl { display: flex; flex-direction: column; line-height: 1.2; font-size: 12px }
.svc-row .sm-lbl small { color: var(--muted); font-size: 11px }


/* Нова бронь на телефоні: «Клієнт» лежав третім екраном — після календаря,
   послуг і коментаря, хоча ім'я гостя питають найпершим. Піднімаємо його
   одразу за датами; на ноуті порядок колонок не змінюється. */
@media (max-width: 900px) {
  .bn-cols, .grid.g2:has(#clientSearch) { display: flex; flex-direction: column }
  .bn-cols > *:has(#clientSearch), .grid.g2:has(#clientSearch) > *:has(#clientSearch) { order: -1 }
}


/* ── Довідники: список на всю ширину, «＋ Додати …» смужкою під ним ───────── */
/* На ноуті права колонка була карткою з однією згорнутою кнопкою: 68px
   вмісту і ~570px порожнечі під нею, а список тулився в 234px. Ставимо
   одну колонку — список отримує всю ширину, блок додавання лишається
   згорнутою смужкою (на телефоні його, як і раніше, піднімає нагору
   правило .grid.g2:has(.svc-list)). */
.grid.g2.dir-page { grid-template-columns: 1fr }
.grid.g2.dir-page > .card:has(> .exp-add) { padding: 0; border: 0; background: transparent }


/* ── Фото будиночка: «прибрати» — кнопка в кутку, а не чекбокс 15px ──────── */
/* Пара «чекбокс + ×» займала 31×19px при нормі 44×44 і ніде не пояснювала,
   що робить; пояснення лежало нижче за всіма фото. */
.thumb { position: relative }
.thumb .th-x {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.thumb .th-x input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer }
.thumb .th-x span {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--red);
  font-size: 19px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.thumb .th-x em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.thumb .th-x input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px }
.thumb:has(.th-x input:checked) img { opacity: .35 }
.thumb:has(.th-x input:checked) { border-color: var(--red) }
.thumb .th-x input:checked + span { background: var(--red); color: #fff; border-color: var(--red) }
.thumb:has(.th-x input:checked) .t::after { content: 'приберемо при збереженні'; color: var(--red); font-size: 11.5px }


/* Попередження в підказці — тим самим червоним, що й решта небезпечних дій */
.hint.warn { color: var(--red); margin-top: 6px }
.slug-x { margin: 4px 0 14px }


/* ── Лічильник −/+ (кількість гостей) ────────────────────────────────────── */
/* Ставити 2 замість 3 гостей із телефона через цифрову клавіатуру довше, ніж
   тапнути «+». Поле лишається на місці — з ноутбука швидше вписати число. */
.num-step { display: flex; align-items: stretch; gap: 0; max-width: 200px }
.num-step button {
  width: 46px; min-height: 44px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.num-step button:first-child { border-radius: 10px 0 0 10px }
.num-step button:last-child { border-radius: 0 10px 10px 0 }
.num-step button:hover { background: var(--bg-2, #FAF8F2) }
.num-step input {
  flex: 1; min-width: 0; text-align: center; border-radius: 0; border-left: 0; border-right: 0;
  -moz-appearance: textfield;
}
.num-step input::-webkit-outer-spin-button,
.num-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }


/* ── Нова бронь на ноуті: права колонка тримає обидві короткі картки ─────── */
/* Було: «Клієнт» закінчувався на 752, а під ним ~290px порожнечі, бо «Аванс»
   лягав другим рядком під ліву картку. Тепер ліва (дати, послуги, коментар)
   тримає обидва рядки, а праворуч стоять «Клієнт» і під ним «Аванс». */
@media (min-width: 901px) {
  .bn-cols { align-items: start }
  .bn-cols > .card:nth-child(1) { grid-row: 1 / 3; grid-column: 1 }
  .bn-cols > .card:nth-child(2) { grid-column: 2; grid-row: 1 }
  .bn-cols > .card:nth-child(3) { grid-column: 2; grid-row: 2 }
}


/* ── Вкладки «Актуальні / Минулі» — під палець ───────────────────────────── */
/* 39px при нормі 44: половина перемикань списку промахувалась. Заразом
   вирівнюємо їх по висоті з полями фільтрів у тій самій смузі. */
.lf-tabs a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center }
@media (max-width: 900px) { .lf-tabs a { min-height: 44px } }

/* ── Пошук клієнта має виглядати як список ───────────────────────────────── */
/* Скрипт підміняє <select> текстовим полем, і разом зі стрілкою зникає
   єдина ознака, що звідти можна ВИБРАТИ, а не тільки набрати. */
#cs { position: relative }
#cs::after {
  content: ''; position: absolute; right: 12px; top: 21px; width: 7px; height: 7px;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
#cs:has(.cs-x:not([hidden]))::after { display: none }
#cs #clientSearch { padding-right: 28px }

/* ── Підсумок списку броней на телефоні ──────────────────────────────────── */
/* Підсумки живуть у заголовках колонок, а на телефоні таблиця стає картками —
   і разом із шапкою зникало «скільки броней і на яку суму». */
.bk-tot { display: none }
@media (max-width: 900px) {
  .bk-tot {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #FAF8F2;
    font-size: 13px; color: var(--soft);
  }
  .bk-tot b { color: var(--ink) }
  /* ⚠️ Не `.debt`: цей клас у Фінансах — картка боргу з рамкою й фоном, і в
     підсумку списку вона малювала рамку просто посеред фрази. */
  .bk-tot .bt-debt { color: var(--red) }
}


/* Чип «усі броні гостя» — заміна другому полю-фільтру над списком */
.cl-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13.5px }
.cl-chip b { background: #EDF1E7; color: var(--green); border-radius: 999px; padding: 6px 12px; font-size: 13px }
.cl-chip > a { color: var(--moss); text-decoration: none }
.cl-chip > a:hover { text-decoration: underline }
.cl-chip.ghost a { display: inline-flex; align-items: center; min-height: 36px }


/* Рахунок: один рядок стану замість трьох плиток і чипа в заголовку */
.ip-one { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px }
.ip-one .ip-sum { font-size: 24px; font-weight: 700 }
.ip-one .ip-st { font-size: 14px; color: var(--soft) }
.ip-one .ip-st.ok { color: var(--green) }
.ip-one .ip-st.part b, .ip-one .ip-st.no { color: var(--red) }
.ip-one .lnk { margin-left: auto }
@media (max-width: 520px) { .ip-one .lnk { margin-left: 0; flex: 1 1 100% } }


/* ── Новий рахунок: позиції на всю ширину, реквізити — згорнутий рядок ───── */
/* Було: форма позицій у 439px і 284px порожнечі під правою колонкою, хоча
   саме в назвах позицій не вистачало місця. */
.inv-editor { display: flex; flex-direction: column }
.inv-editor > * { width: 100%; min-width: 0 }
.inv-buyer > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; border: 1px dashed var(--line-2);
  border-radius: 10px; background: #FAF8F2; color: var(--soft); font-size: 14px; font-weight: 600;
}
.inv-buyer > summary::-webkit-details-marker { display: none }
.inv-buyer > summary::before { content: '＋ '; color: var(--muted) }
.inv-buyer[open] > summary::before { content: '– ' }
.inv-buyer .ib-sum i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 8px }
.inv-buyer[open] > .card { margin-top: 12px }
@media (min-width: 901px) {
  .inv-buyer[open] > .card { display: inline-block; vertical-align: top; width: calc(50% - 8px) }
  .inv-buyer[open] > .card + .card { margin-left: 12px }
}


/* ── Річний календар: підписи днів і симетрична сітка ────────────────────── */
/* Однобуквені «п в с ч п с н» не розрізнялись; тепер ті самі «ПН ВТ …», що й
   у місяці, а субота з неділею ще й іншим кольором. */
.cy-w span { text-transform: uppercase; letter-spacing: .04em }
.cy-w span.we { color: var(--ember, #BF6626) }
/* 12 місяців рівними рядами: auto-fit давав 5 у ряд і три порожні місця
   в останньому. 4 колонки на широкому, 3 — на середньому. */
@media (min-width: 1100px) { .cy { grid-template-columns: repeat(4, 1fr) } }
@media (min-width: 760px) and (max-width: 1099px) { .cy { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 481px) and (max-width: 759px) { .cy { grid-template-columns: repeat(2, 1fr) } }


/* ── Картка броні на ноуті: права колонка їде за прокруткою ──────────────── */
/* Вміст правої колонки закінчувався на 542px при висоті картки 1444 — понад
   900px порожнечі. Тепер «Послуги», «У цій броні» й «Рахунок» лишаються
   перед очима, поки гортаєш оплату й журнал. */
@media (min-width: 901px) {
  .bk-side-in { position: sticky; top: 68px }
}
.bk-side .bk-inv { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line) }


/* ── Картка клієнта: гроші окремо, чипи стану окремо ─────────────────────── */
/* «переплата +49 750 ₴» стояла всередині перенесеного рядка «нараховано …
   у середньому … за візит» і розривала фразу навпіл. */
.bb-sub .bs-l + .bs-l::before { content: ' · ' }
.bb-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px }
@media (max-width: 420px) {
  .bb-sub .bs-l { display: block }
  .bb-sub .bs-l + .bs-l::before { content: none }
}


/* Список клієнтів: невнесене — звичайним кольором, прострочене (гість уже
   виїхав) — червоним. Одне число, два стани, без окремої колонки. */
.c-debt .cl-overdue { color: var(--red) }
.c-debt .sub { display: block; font-size: 11.5px; color: var(--muted) }


/* ── Смуга фільтрів «Броней» на ноуті: РІВНО ОДИН рядок ──────────────────── */
/* Пʼять кнопок стану («Усі / Із боргом / Оплачені / Актуальні / Минулі»)
   замінила одна випадайка «Показувати», а «Календар» і «Експорт» сховані під
   «Ще» — і смуга вміщається в один ряд. Щоб він не рвався на вузьких ноутах,
   ряд не переноситься, а поля стискаються. */
@media (min-width: 901px) {
  .lf-fold-body { flex-wrap: nowrap }
  .lf-fold-body > .lf-g { min-width: 0 }
  .lf-fold-body > .lf-dates input[type=date] { min-width: 116px; flex: 1 1 auto }
  .lf-fold-body > .lf-guests { flex: 1 1 auto; min-width: 120px; max-width: 240px }
  .lf-fold-body > .lf-state { flex: 1 1 auto; min-width: 150px; max-width: 260px }
  .lf-fold-body > .lf-guests > .ms,
  .lf-fold-body > .lf-state > .ms { flex: 1 1 auto; min-width: 0 }
  .lf-fold-body > .lf-guests > .ms > summary,
  .lf-fold-body > .lf-state > .ms > summary { width: 100% }
  /* Довгий підпис випадайки не має розпирати ряд — ріжемо трикрапкою */
  .lf-fold-body .ms > summary .ms-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  /* «Ще» у шапці — тієї ж висоти, що й кнопки поруч */
  .bk-more > summary { min-height: 42px; padding: 0 16px }
}
.bk-more { position: relative }
.bk-more .ms-box { left: auto; right: 0; min-width: 240px }
@media (max-width: 900px) {
  /* На телефоні «Показувати» — усередині блоку «Фільтри», на всю ширину */
  .lf-fold-body > .lf-state { flex: 1 1 100% }
  .lf-fold-body > .lf-state > .ms { flex: 1 1 auto; min-width: 0 }
  .lf-fold-body > .lf-state > .ms > summary { width: 100%; min-height: 44px }
}
/* Підсумок списку: перше слово каже, що це підсумок, а не ще одна бронь */
.bk-tot .bt-k { color: var(--muted); font-weight: 600 }


/* Дії з рахунком у картці броні: «Виставити», «Аванс», «Доплата» в один ряд */
.inv-make { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.inv-make form { margin: 0 }


/* Квадратна кнопка самою піктограмою (експорт у шапці «Броней»).
   ⚠️ Без тексту всередині кнопка не має від чого взяти висоту, а в мобільній
   смузі кнопок вона ще й розтягується (`flex:1`) — тож і висоту, і ширину
   задаємо явно, і забороняємо рости. */
.btn.ico-only { width: 42px; min-width: 42px; height: 42px; padding: 0;
  flex: 0 0 auto; align-items: center; justify-content: center }
.btn.ico-only svg { margin: 0 }
@media (max-width: 900px) {
  /* height:auto + stretch — щоб квадратик стояв рівно з сусідніми кнопками
     (у них своя мобільна висота), а не на пару пікселів вище. */
  .bk-head .btns .btn.ico-only { width: 40px; min-width: 40px; height: auto;
    align-self: stretch; flex: 0 0 auto }
}