/* Ореховый фон (как настоящая доска) — своя тема, отдельная от других проектов */
:root{
  --bg:#4A2E18; --surface:#6B4226; --surface-2:#5A3B1E;
  --text:#F3E4C8; --text-dim:#C9AD85; --rule:#8B5A2B;
  --steel:#B08968; --accent:#D9A66B; --danger:#D97A5A; --warn:#D9A66B; --ok:#8FBF7F; --info:#8FB3D9;
}
@media (prefers-color-scheme: dark) {}
:root:not([data-theme="dark"]){
  --bg:#4A2E18; --surface:#6B4226; --surface-2:#5A3B1E;
  --text:#F3E4C8; --text-dim:#C9AD85; --rule:#8B5A2B;
  --steel:#B08968; --accent:#D9A66B; --danger:#D97A5A; --warn:#D9A66B; --ok:#8FBF7F;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* без этого .row и label (display:flex) перебивали атрибут hidden */
body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',system-ui,sans-serif; }
h1,h2,h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0 0 .5rem; }
.eyebrow{ font-family:var(--font-mono,monospace); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin:0 0 .4rem; }
.dim{ color:var(--text-dim); }

.wrap{ max-width:1100px; margin:0 auto; padding:1.4rem; }
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; border-bottom:1px solid var(--rule); }
.tab{ background:none; border:none; color:var(--text-dim); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem; padding:.6rem 1rem; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active{ color:var(--text); border-bottom-color:var(--steel); }
@media (max-width:480px){ .tabs{ gap:.1rem; } .tab{ padding:.6rem .45rem; font-size:.8rem; } }

.btn{ font-family:'Oswald',sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; background:var(--surface); color:var(--text); border:1px solid var(--steel); border-radius:4px; padding:.5rem .9rem; cursor:pointer; }
.btn:hover{ background:var(--steel); color:var(--surface); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#3D2814; }
.btn-accent:hover{ background:var(--steel); border-color:var(--steel); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule); font-size:.88rem; }
th{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; color:var(--text-dim); }
tr.clickable{ cursor:pointer; }
tr.clickable:hover{ background:var(--surface-2); }

.badge{ font-family:'Oswald',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; padding:.2rem .5rem; border-radius:3px; display:inline-block; }
.badge-ACTIVE{ background:color-mix(in srgb, var(--ok) 20%, transparent); color:var(--ok); }
.badge-EXPIRING{ background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn); }
.badge-EXPIRED{ background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger); }
.badge-NONE{ background:var(--surface-2); color:var(--text-dim); }
/* Долг и «без оплаты» — не зелёные: чек «закрыт», но денег в кассе нет, это должно быть видно сразу. */
.badge-debt{ background:color-mix(in srgb, var(--danger) 22%, transparent); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 55%, transparent); }
.badge-gift{ background:color-mix(in srgb, var(--info) 22%, transparent); color:var(--info); border:1px solid color-mix(in srgb, var(--info) 55%, transparent); }
.badge-manual{ background:transparent; color:var(--warn); border:1px dashed var(--warn); }

.card{ background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--text-dim); margin-bottom:.6rem; }
input, select, textarea{ font-family:inherit; font-size:.9rem; background:var(--surface-2); color:var(--text); border:1px solid var(--rule); border-radius:4px; padding:.5rem .6rem; }
.row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.row > label{ flex:1 1 140px; margin-bottom:0; }

dialog{ background:var(--surface); color:var(--text); border:1px solid var(--rule); border-radius:8px; padding:1.4rem; max-width:560px; width:92vw; }
dialog::backdrop{ background:rgba(0,0,0,.5); }
@media (pointer:fine){ dialog > :first-child{ cursor:move; user-select:none; } } /* за заголовок окно двигается мышью */

.set-row{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:.4rem; margin-bottom:.4rem; align-items:center; }
.records-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.record-tile{ background:var(--surface-2); border:1px solid var(--rule); border-radius:6px; padding:.6rem .8rem; min-width:140px; }
.record-tile .lift{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.72rem; color:var(--steel); }
.record-tile .weight{ font-size:1.3rem; font-weight:600; }
.record-tile .meta{ font-size:.68rem; color:var(--text-dim); }

/* Карточка брони: слева баня (оплата, время), справа бар — на широком экране без прокрутки одной длинной колонкой. */
#bookingDetailDialog{ max-width:1180px; width:96vw; padding:1rem 1.2rem; }
#bookingDetailDialog .card{ padding:.8rem 1rem; margin-bottom:0; }
#bookingDetailDialog p{ margin:.3rem 0; }
.bd-columns{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.bd-col{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.bd-bar-buttons{ max-height:42vh; overflow-y:auto; }
@media (max-width:820px){
  .bd-columns{ grid-template-columns:1fr; }
  .bd-bar-buttons{ max-height:260px; }
}

#debtsList > .card{ margin-bottom:0; }

/* Свой цвет у каждой бани — ЕДИНСТВЕННОЕ место соответствия «баня → цвет» (список броней, карточка, ведомость смены,
   выбор бани, кабинет директора). Цвет — дополнение к названию, не замена. Оттенки выбраны вне цветов статусов:
   зелёный — оплачено, янтарный — открыт/предупреждение, красно-оранжевый — долг, голубой — без оплаты.
   ponytail: новая баня, добавленная директором, получает id-UUID и остаётся без цвета (нейтральная полоса) — добавить строку сюда. */
.room-r1{ --room:#4FD1C1; } /* Баня 1 — бирюзовый */
.room-r2{ --room:#B89CFF; } /* Баня 2 — фиолетовый */
.room-r3{ --room:#F28AD8; } /* Баня 3 — малиново-розовый */
.room-mark{ border-left:5px solid var(--room, var(--rule)) !important; }
.room-tint{ background:color-mix(in srgb, var(--room, transparent) 11%, transparent); }
.room-tag{ display:inline-block; font-family:'Oswald',sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; padding:.12rem .5rem; border-radius:3px; white-space:nowrap;
  color:var(--room, var(--text)); background:color-mix(in srgb, var(--room, var(--steel)) 18%, transparent); border:1px solid color-mix(in srgb, var(--room, var(--steel)) 65%, transparent); }
#bookingDetailDialog.room-mark{ background:color-mix(in srgb, var(--room, var(--surface)) 9%, var(--surface)); }
#fRoom option[class^="room-"]{ color:var(--room); }

/* Сообщение об ошибке поверх всего (в том числе поверх открытых окон). */
.toast{ position:fixed; inset:auto auto 1.2rem 50%; transform:translateX(-50%); margin:0; max-width:min(92vw,520px); background:var(--danger); color:#2b1508; border:0; padding:.7rem 1rem; border-radius:6px; font-size:.9rem; box-shadow:0 4px 14px rgba(0,0,0,.4); }

/* Длинные таблицы (бар, расходы) на узком экране прокручиваются внутри своего блока, а не расширяют страницу. */
#productList, #expenseList, #auditList{ overflow-x:auto; }

/* Список броней на телефоне — карточки, а не таблица со сдвигом вбок. */
@media (max-width:640px){
  table.bk thead{ display:none; }
  table.bk, table.bk tbody, table.bk tr, table.bk td{ display:block; width:100%; }
  table.bk tr{ background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:.5rem .8rem; margin-bottom:.7rem; }
  table.bk td{ display:flex; justify-content:space-between; gap:.8rem; border:0; padding:.25rem 0; text-align:right; }
  table.bk td::before{ content:attr(data-label); color:var(--text-dim); text-align:left; flex:0 0 auto; }
  table.bk tr.room-tint{ background:color-mix(in srgb, var(--room, transparent) 11%, var(--surface)); }
  table.bk td.hide-sm{ display:none; }
  table.bk td.actions{ justify-content:flex-end; padding-top:.5rem; }
  table.bk td.actions::before{ content:none; }
}

.demo-note{ border-color:var(--accent); margin:.6rem 0 1rem; line-height:1.5; }