/* ═══════════════════════════════════════════════════════════════════════
   style.css  –  Skazka Resort Booking System
   Admin UI: cards, tables, forms, sidebar — resort palette, responsive.
═══════════════════════════════════════════════════════════════════════ */

/* ── RESET & VARIABLES ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Море / пляж (глубина + пена) */
  --sea-950:     #0a1628;
  --sea-900:     #0c2744;
  --sea-800:     #0c4a6e;
  --sea-700:     #0369a1;
  --sea-600:     #0284c7;
  --sea-400:     #38bdf8;
  --sea-200:     #bae6fd;
  --sea-foam:    #e0f2fe;
  --sand-100:    #f0f9ff;

  --wood-950:    #0a1628;
  --wood-900:    #0c2744;
  --wood-800:    #164e63;
  --wood-700:    #155e75;
  --wood-600:    #0e7490;
  --wood-ring:   rgba(56,189,248,.35);
  --amber-500:   #38bdf8;
  --amber-400:   #7dd3fc;
  --amber-300:   #bae6fd;
  --pine-700:    #0e7490;
  --pine-600:    #0891b2;

  --bg:          #ecf6fb;
  --bg-pattern:  radial-gradient(ellipse 110% 80% at 100% -10%, rgba(14,165,233,.12), transparent 52%),
                 radial-gradient(ellipse 90% 60% at 0% 100%, rgba(56,189,248,.1), transparent 48%),
                 radial-gradient(ellipse 70% 50% at 70% 60%, rgba(125,211,252,.08), transparent 55%);
  --sidebar-bg:  var(--sea-800);
  --sidebar-w:   240px;
  /* Одна линия с шапкой страницы (Главная и т.д.): отступы и мин. высота ряда */
  --app-header-pt: 20px;
  --app-header-pb: 14px;
  --app-header-row-min-h: 5.35rem;
  --card-bg:     #ffffff;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --text-muted:  #64748b;
  --primary:     #2563eb;
  --primary-dk:  #1d4ed8;
  --primary-soft:rgba(37,99,235,.12);
  --danger:      #dc2626;
  --success:     #15803d;
  --warning:     #d97706;
  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 1px 3px rgba(15,23,42,.06), 0 12px 40px rgba(15,23,42,.08);
  --shadow-sm:   0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.06);
  --ring:        0 0 0 3px rgba(37,99,235,.18);

  /* Status colours */
  --status-booked:       #1d4ed8;
  --status-booked-bg:    #eff6ff;
  --status-checkedin:    #15803d;
  --status-checkedin-bg: #ecfdf3;
  --status-checkedout:   #64748b;
  --status-checkedout-bg:#f1f5f9;
  --status-cancelled:    #dc2626;
  --status-cancelled-bg: #fef2f2;
}

html, body {
  height: 100%;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-pattern);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.hidden { display: none !important; }

/* ── SCROLLBARS (thin, elegant) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════════════════ */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(125,211,252,.35), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(14,165,233,.2), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(6,182,212,.18), transparent 45%),
    linear-gradient(168deg, #042f4b 0%, var(--sea-800) 28%, #075985 55%, #0c4a6e 78%, #164e63 100%);
}
.login-card {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: clamp(36px, 5vw, 48px) clamp(28px, 4vw, 40px);
  width: 100%; max-width: 400px;
  box-shadow: 0 28px 90px rgba(8,47,73,.35), 0 0 0 1px rgba(125,211,252,.25) inset;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.login-brand-row .login-brand-title { margin: 0; }
.login-brand-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em 0.85em;
  font-size: clamp(1.28rem, 4vw, 1.55rem);
  font-weight: 600;
  color: var(--sea-800);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.05;
}
.login-brand-word {
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.login-tagline {
  color: var(--text-muted);
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.login-form .form-group { margin-bottom: 18px; }
.login-form label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 13px; color: var(--text-muted); }
.login-form input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.login-form input:hover { border-color: #cbd5e1; }
.login-form input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.login-error {
  background: var(--status-cancelled-bg); color: var(--danger); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; border: 1px solid rgba(220,38,38,.15);
}
.btn-block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════════════════════ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background-color: var(--sea-900);
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 3px),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(125,211,252,.04) 40px, rgba(125,211,252,.04) 41px),
    linear-gradient(175deg, #0e4a6b 0%, var(--sea-800) 38%, var(--sea-900) 70%, var(--sea-950) 100%);
  display: flex; flex-direction: column; flex-shrink: 0;
  overflow-y: auto;
  box-shadow: 6px 0 32px rgba(8,47,73,.4);
}
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-header-pt) 12px var(--app-header-pb);
  min-height: var(--app-header-row-min-h);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(14,165,233,.22);
  box-shadow: 0 4px 20px rgba(8,47,73,.12);
  position: relative;
}
.sidebar-brand { min-width: 0; width: 100%; text-align: center; }
.sidebar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45em 0.7em;
  line-height: 1.1;
  filter: drop-shadow(0 3px 8px rgba(0,20,40,.45));
}
.sidebar-title-word {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(0.875rem, 0.35rem + 0.55vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 38%, #bae6fd 72%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e0f2fe;
}
@supports not (background-clip: text) {
  .sidebar-title-word {
    -webkit-text-fill-color: unset;
    color: #f0f9ff;
    background: none;
    text-shadow:
      0 1px 0 rgba(255,255,255,.4),
      0 -1px 1px rgba(0,25,50,.55),
      0 2px 6px rgba(0,15,35,.5),
      0 0 18px rgba(125,211,252,.4);
  }
}
.sidebar-nav { padding: 16px 10px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: rgba(253,248,243,.58); font-size: 13.5px; font-weight: 500;
  transition: background .2s, color .2s, transform .15s, border-color .2s;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
}
.nav-item:hover {
  background: rgba(255,255,255,.06); color: #fdf8f3;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(56,189,248,.22), rgba(56,189,248,.08));
  color: #fff;
  border-left-color: var(--sea-400);
  box-shadow: 0 4px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-icon { font-size: 17px; opacity: .92; filter: saturate(1.05); }


.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(125,211,252,.12);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.2), transparent);
}
.admin-info { flex: 1; overflow: hidden; }
.admin-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sea-400), var(--sea-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(8,47,73,.45), inset 0 1px 0 rgba(255,255,255,.25);
  border: 1px solid rgba(125,211,252,.4);
}
.admin-name  { font-weight: 600; color: #f0f9ff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-role  { color: rgba(186,230,253,.55); font-size: 12px; }
.btn-logout {
  background: rgba(0,0,0,.12); border: 1px solid rgba(125,211,252,.25); border-radius: 8px;
  color: rgba(224,242,254,.75); padding: 6px 10px; font-size: 16px;
  transition: all .2s;
}
.btn-logout:hover { background: rgba(56,189,248,.15); color: #fff; border-color: var(--sea-400); }

/* ── MAIN CONTENT ────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  container-type: inline-size;
  container-name: main;
}
#view-container {
  --view-pad-x: clamp(16px, 3vw, 32px);
  padding: 0 var(--view-pad-x) 40px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* ── PAGE HEADER ─────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  position: sticky; top: 0; z-index: 90;
  background: rgba(236,246,251,.94);
  backdrop-filter: blur(12px);
  padding: var(--app-header-pt) 0 var(--app-header-pb);
  min-height: var(--app-header-row-min-h);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(14,165,233,.22);
  box-shadow: 0 4px 20px rgba(8,47,73,.12);
}
/* Фон шапки на всю ширину колонки main (вплотную к сайдбару и правому краю) */
#view-container > .page-header {
  box-sizing: border-box;
  padding: var(--app-header-pt) var(--view-pad-x) var(--app-header-pb);
}
@supports (width: 1cqi) {
  #view-container > .page-header {
    width: 100cqi;
    max-width: none;
    margin-left: calc((100% - 100cqi) / 2);
    margin-right: calc((100% - 100cqi) / 2);
  }
}
@supports not (width: 1cqi) {
  #view-container > .page-header {
    margin-left: calc(-1 * var(--view-pad-x));
    margin-right: calc(-1 * var(--view-pad-x));
  }
}
/* Когда page-header внутри sticky-header-block — убираем его собственный sticky */
.sticky-header-block .page-header {
  position: static;
  border-bottom: none;
  box-shadow: none;
  padding-bottom: 8px;
  margin-bottom: 0;
}
#view-container > .sticky-header-block .page-header {
  padding: 0 0 8px;
}
/* Единый sticky-блок для Журнала/Номеров: шапка + вкладки + фильтры */
.sticky-header-block {
  position: sticky; top: 0; z-index: 90;
  background: rgba(236,246,251,.94);
  backdrop-filter: blur(12px);
  padding: 20px 0 0;
  border-bottom: 1px solid rgba(14,165,233,.12);
  box-shadow: 0 4px 24px rgba(8,47,73,.06);
  margin-bottom: 24px;
}
#view-container > .sticky-header-block {
  box-sizing: border-box;
  padding: 20px var(--view-pad-x) 0;
}
@supports (width: 1cqi) {
  #view-container > .sticky-header-block {
    width: 100cqi;
    max-width: none;
    margin-left: calc((100% - 100cqi) / 2);
    margin-right: calc((100% - 100cqi) / 2);
  }
}
@supports not (width: 1cqi) {
  #view-container > .sticky-header-block {
    margin-left: calc(-1 * var(--view-pad-x));
    margin-right: calc(-1 * var(--view-pad-x));
  }
}
.page-title { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--sea-800); }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Первый блок контента после шапки (Главная, Календарь, Цены, Браслеты, Отчёты, Сотрудники…) */
#view-container > .page-header + * {
  margin-top: clamp(18px, 2.5vw, 28px);
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS & STAT TILES
═══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .25s, border-color .2s;
}
.card:hover { box-shadow: var(--shadow); border-color: #cbd5e1; }
.card-header {
  padding: 18px 24px; font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
  letter-spacing: 0.02em;
}
.card-body { padding: 22px 24px; }

.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 28px;
}
.stat-tile {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #cbd5e1;
}
.stat-icon { font-size: 36px; line-height: 1; }
.stat-value { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat-label { color: var(--text-muted); font-size: 12px; margin-top: 6px; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   BANYA SCHEDULE MODAL
══════════════════════════════════════════════════════════════════════ */

/* Сетка слотов */
.banya-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.banya-slot {
  border-radius: 10px; padding: 10px 8px; text-align: center;
  cursor: default; transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent;
}
.banya-slot-free {
  background: #e8f5e9; border-color: #81c784; cursor: pointer;
}
.banya-slot-free:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.banya-slot-selected { background: #c8e6c9; border-color: #388e3c !important; box-shadow: 0 0 0 3px rgba(56,142,60,.25); }
/* Забронировано (синий) */
.banya-slot-booked {
  background: #e3f2fd; border-color: #64b5f6;
}
.banya-slot-booked:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(33,150,243,.2); }
.banya-slot-booked .banya-slot-time  { color: #1565c0; }
.banya-slot-booked .banya-slot-guest { color: #1565c0; }
.banya-slot-booked .banya-slot-until { color: #1976d2; font-weight:600; }

/* Заселён / сейчас в бане (красный) */
.banya-slot-checkedin {
  background: #ffebee; border-color: #ef9a9a;
}
.banya-slot-checkedin:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(229,57,53,.2); }
.banya-slot-checkedin .banya-slot-time  { color: #c62828; }
.banya-slot-checkedin .banya-slot-guest { color: #c62828; }
.banya-slot-checkedin .banya-slot-until { color: #e53935; font-weight:600; }

/* Завершён (серый) */
.banya-slot-done {
  background: #f5f5f5; border-color: #ccc; opacity: 0.6;
}
.banya-slot-done:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.banya-slot-done .banya-slot-time  { color: #999; }
.banya-slot-done .banya-slot-guest { color: #999; }
.banya-slot-done .banya-slot-until { color: #aaa; font-weight:600; }

/* Старый busy — оставляем для совместимости */
.banya-slot-busy {
  background: #ffebee; border-color: #ef9a9a;
}
.banya-slot-time   { font-size: 15px; font-weight: 700; }
.banya-slot-label  { font-size: 11px; color: #388e3c; margin-top: 2px; }
.banya-slot-guest  { font-size: 11px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banya-slot-until  { font-size: 10px; margin-top: 1px; }

/* Журнал */
.banya-journal { display: flex; flex-direction: column; gap: 8px; }
.banya-journal-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--card-bg);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .2s;
}
.banya-journal-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}
.banya-journal-time {
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px; font-size: 16px; font-weight: 700; color: var(--primary);
}
.banya-journal-info { flex: 1; }
.banya-journal-name { font-weight: 600; font-size: 14px; }
.banya-journal-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Форма быстрой записи */
.banya-book-form-wrap {
  margin-top: 20px; padding: 18px 20px;
  background: #f0f7ff; border-radius: 12px;
  border: 2px solid var(--primary);
}

/* ── Banya carousel tile ─────────────────────────────────────────── */
.banya-carousel-tile { overflow: hidden; }
.banya-carousel {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: 4px; width: 100%;
  scrollbar-width: none;
}
.banya-carousel::-webkit-scrollbar { display: none; }
.banya-card {
  min-width: 140px; max-width: 140px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  flex-shrink: 0;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.banya-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(37,99,235,.12);
  transform: translateY(-1px);
}
.banya-card-room  { font-size: 18px; font-weight: 700; color: var(--primary); }
.banya-card-name  { font-size: 12px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banya-card-dates { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.banya-card-ham   { font-size: 11px; color: var(--success); margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 600; border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s, transform .12s;
  white-space: nowrap; line-height: 1;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary   { background: linear-gradient(180deg, #3b82f6 0%, var(--primary) 100%); color: #fff; border-color: var(--primary-dk); }
.btn-primary:hover { background: var(--primary-dk); border-color: #1e40af; box-shadow: 0 6px 20px rgba(37,99,235,.35); }
.btn-secondary { background: var(--card-bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f8fafc; border-color: #94a3b8; box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.btn-danger    { background: var(--card-bg); color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: var(--status-cancelled-bg); border-color: var(--danger); }
.btn-success   { background: linear-gradient(180deg, #22c55e 0%, var(--success) 100%); color: #fff; border-color: #166534; }
.btn-success:hover { background: #166534; box-shadow: 0 6px 20px rgba(21,128,61,.35); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 7px 8px; border-radius: var(--radius-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   STATUS BADGES
═══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.02em;
}
.badge-booked      { background: var(--status-booked-bg);      color: var(--status-booked);      }
.badge-checked-in  { background: var(--status-checkedin-bg);   color: var(--status-checkedin);   }
.badge-checked-out { background: var(--status-checkedout-bg);  color: var(--status-checkedout);  }
.badge-cancelled   { background: var(--status-cancelled-bg);   color: var(--status-cancelled);   }
.badge-available   { background: #e8f5e9; color: #2e7d32; }
.badge-maintenance { background: #fff8e1; color: #f57c00; }

/* ═══════════════════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 13px 18px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
tbody td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:nth-child(even) { background: rgba(248,250,252,.6); }
tbody tr:hover { background: var(--primary-soft); }
tbody tr:last-child td { border-bottom: none; }
.td-actions { display: flex; gap: 6px; }
.td-nowrap { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-bar input,
.filter-bar select {
  padding: 8px 13px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); outline: none; background: #fff;
  transition: border-color .15s, box-shadow .15s;
  height: 38px; font-size: 13.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.search-input { min-width: 240px; }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 1000; padding: 20px 16px; overflow-y: auto;
  animation: modalFadeIn .2s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  background: var(--card-bg); border-radius: 18px; width: 700px; max-width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 25px 90px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  margin: auto 0;
  border: 1px solid rgba(255,255,255,.12);
  animation: modalPop .28s cubic-bezier(.34,1.2,.64,1);
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Узкий вариант для beach-modal */
.modal.modal-narrow { width: 420px; }
/* Широкий вариант для banya-modal */
.modal.modal-xl { width: 900px; max-width: 98vw; }
.modal-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2 { font-size: 18px; font-weight: 700; }
.modal-close {
  background: none; border: none; font-size: 18px;
  color: var(--text-muted); padding: 4px 8px; border-radius: 6px;
}
.modal-close { transition: background .2s, color .2s; }
.modal-close:hover { background: var(--primary-soft); color: var(--primary); }
.modal-close:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.modal-body { padding: 20px 24px; overflow-y: visible; }
.modal-footer {
  padding: 14px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  flex-shrink: 0;
}

/* ── FORM ────────────────────────────────────────────────────────────── */
.form-section {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px 20px; margin-bottom: 18px; position: relative;
  background: rgba(248,250,252,.5);
  transition: border-color .2s;
}
.form-section:focus-within { border-color: #cbd5e1; }
.form-section legend {
  font-weight: 600; font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 0 8px; margin-left: -4px;
}
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; font-weight: 600; font-size: 12.5px;
  margin-bottom: 5px; color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); outline: none; transition: border .2s, box-shadow .2s;
  background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.form-group textarea { resize: vertical; }
.form-group small { color: var(--text-muted); font-size: 11px; }
.discount-row { display: flex; gap: 8px; }
.discount-row select { flex: 0 0 80px; }
.discount-row input  { flex: 1; }
.form-error {
  background: #ffebee; color: var(--danger); border-radius: 7px;
  padding: 10px 14px; font-size: 13px; margin-top: 10px;
}

/* ── PRICE SUMMARY ───────────────────────────────────────────────────── */
.price-summary-group { justify-content: center; }
.price-summary {
  background: var(--bg); border-radius: var(--radius-sm); padding: 14px 18px;
  border: 1px solid var(--border); min-width: 180px;
}
.price-row {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 5px;
}
.price-row:last-child { margin-bottom: 0; }
.price-total { font-weight: 700; font-size: 15px; padding-top: 6px;
               border-top: 1px solid var(--border); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   CALENDAR VIEW
═══════════════════════════════════════════════════════════════════════ */
.calendar-controls {
  display: flex; gap: 10px; align-items: center; margin-bottom: 18px;
  flex-wrap: wrap;
}
.cal-nav { display: flex; gap: 6px; }

/* Date range picker */
.cal-range-picker {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px;
  height: 36px;
}
.cal-range-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.cal-range-picker input[type="date"] {
  border: none; outline: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--text);
  padding: 0 2px; cursor: pointer;
  font-family: inherit; height: 100%;
}

/* Calendar container scrolls both axes; sticky works relative to this box */
.calendar-wrap {
  overflow: auto;
  max-height: calc(100vh - 210px);
  max-height: calc(100dvh - 210px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: box-shadow .2s;
}
.calendar-wrap:hover { box-shadow: var(--shadow); }
.calendar-grid {
  display: grid;
  background: var(--card-bg);
  min-width: max-content;
}

/* Sticky row header column */
.cal-room-col {
  position: sticky; left: 0; background: var(--card-bg); z-index: 5;
}
.cal-header-row {
  display: contents;
}
/* ── Calendar double-header ───────────────────────────────────────────────── */

/* Row 1: month band — sticks to top, inner label sticks to left */
.cal-head-month-band {
  position: sticky; top: 0; z-index: 10;
  background: var(--sidebar-bg);
  border-bottom: 1px solid rgba(255,255,255,.13);
  border-right: 1px solid rgba(255,255,255,.08);
  height: 28px;
  /* no overflow:hidden — needed so inner sticky label can work */
}
/* Month transition: left border to clearly separate months */
.cal-head-month-band--new {
  border-left: 2px solid rgba(255,255,255,.3);
}
/* Inner label — sticks at left:155px (past НОМЕР col) so it stays readable while scrolling */
.cal-head-month-label {
  position: sticky; left: 155px;
  display: inline-flex; align-items: center; height: 28px;
  padding: 0 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  white-space: nowrap; pointer-events: none;
}

/* Corner cell: sticks top-left, spans both header rows */
.cal-head-room {
  position: sticky; top: 0; left: 0; z-index: 22;
  background: var(--sidebar-bg); color: rgba(255,255,255,.55);
  padding: 0 14px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  border-right: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center;
}

/* Row 2: individual date cells — sticky below the month band */
.cal-head-date {
  position: sticky; top: 28px; z-index: 9;
  background: var(--card-bg);
  padding: 5px 4px; text-align: center;
  font-size: 11px; font-weight: 600;
  border-bottom: 2px solid var(--border); border-right: 1px solid #edf0f5;
  min-width: 42px; white-space: nowrap; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.cal-head-date.today { background: #e3f2fd; color: var(--primary); }
/* KZ weekends (Fri + Sat) shown in red */
.cal-head-date.weekend { background: #ffebee !important; color: #c62828 !important; font-weight: 700; }

/* Zone label cell (col 1) — always sticky at left */
.cal-zone-label {
  position: sticky; left: 0; z-index: 6;
  background: var(--sidebar-bg); color: rgba(255,255,255,.65);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; padding: 6px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-right: 1px solid rgba(255,255,255,.08);
}
/* Zone fill cell (cols 2…end) — just dark background, no content */
.cal-zone-fill {
  background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Room rows */
.cal-row { display: contents; }
.cal-room-label {
  position: sticky; left: 0; background: var(--card-bg); z-index: 4;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); white-space: nowrap;
  cursor: default; min-width: 140px;
}
.cal-room-label:hover { background: #f7f9fc; }
.cal-room-num { font-weight: 700; font-size: 13px; }
.cal-room-info { font-size: 11px; color: var(--text-muted); }

.cal-cell {
  border-bottom: 1px solid var(--border); border-right: 1px solid #edf0f5;
  min-width: 42px; height: 44px; position: relative;
  cursor: pointer; transition: background .1s;
}
.cal-cell:hover { background: #f0f7ff; }
.cal-cell.today { background: #f0f7ff; }
/* KZ weekends (Fri + Sat) — light red tint on cells */
.cal-cell.weekend { background: #fff5f5; }

/* Booking bar inside cell */
.cal-booking {
  position: absolute; inset: 4px 2px; border-radius: 5px;
  display: flex; align-items: center; padding: 0 6px;
  font-size: 11px; font-weight: 600; overflow: hidden;
  white-space: nowrap; cursor: pointer; z-index: 2;
  transition: filter .15s;
}
.cal-booking:hover { filter: brightness(.92); }
.cal-booking.booked      { background: var(--status-booked-bg);      color: var(--status-booked);      border-left: 3px solid var(--status-booked); }
.cal-booking.checked-in  { background: var(--status-checkedin-bg);   color: var(--status-checkedin);   border-left: 3px solid var(--status-checkedin); }
.cal-booking.checked-out { background: var(--status-checkedout-bg);  color: var(--status-checkedout);  border-left: 3px solid var(--status-checkedout); }
.cal-booking.cancelled   { background: var(--status-cancelled-bg);   color: var(--status-cancelled);   border-left: 3px solid var(--status-cancelled); }


/* ═══════════════════════════════════════════════════════════════════════
   ROOMS VIEW
═══════════════════════════════════════════════════════════════════════ */
.rooms-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.room-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px; cursor: pointer;
  transition: transform .18s, box-shadow .18s; position: relative;
  border: 1px solid var(--border);
  border-top: 4px solid transparent;
}
.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cbd5e1; }
/* Available rooms — green tint */
.room-card.available {
  border-top-color: #43a047;
  background: linear-gradient(160deg, #e8f5e9 0%, #fff 55%);
}
/* Checked-in rooms — red tint */
.room-card.checked-in {
  border-top-color: #e53935;
  background: linear-gradient(160deg, #ffebee 0%, #fff 55%);
}
/* Booked (not yet checked in) — blue tint */
.room-card.occupied {
  border-top-color: var(--status-booked);
  background: linear-gradient(160deg, #e3f2fd 0%, #fff 55%);
}
.room-card.maintenance { border-top-color: var(--warning); }

.room-number { font-size: 22px; font-weight: 800; color: var(--text); }
.room-meta   { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.room-price  { font-size: 13px; font-weight: 600; margin-top: 8px; color: var(--primary); }
.room-zone-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--bg); border-radius: 5px; padding: 2px 7px;
  font-size: 10px; font-weight: 700; color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════════════ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dashboard-grid .full-width { grid-column: 1 / -1; }
.arrival-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.arrival-item:hover { background: var(--primary-soft); }
.arrival-item:last-child { border-bottom: none; }
.arrival-room {
  font-weight: 700; font-size: 15px; min-width: 60px;
}
.arrival-guest { flex: 1; }
.arrival-name  { font-weight: 600; }
.arrival-dates { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.empty-state   { color: var(--text-muted); font-size: 13px; padding: 16px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
  padding: 12px 20px; border-radius: 8px; color: #fff;
  font-weight: 600; font-size: 13.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); min-width: 220px;
  animation: slideIn .25s ease;
}
.toast-success { background: #2e7d32; }
.toast-error   { background: #c62828; }
.toast-info    { background: #1565c0; }
.toast-warning { background: #e65100; }
@keyframes slideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING VIEW
═══════════════════════════════════════════════════════════════════════ */
.pricing-form {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 22px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.pricing-form:hover { box-shadow: var(--shadow); border-color: #cbd5e1; }
.pricing-form h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

/* ── DAY-FILTER CHIPS (Rooms view) ───────────────────────────────────── */
.day-filter-chips {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.chip {
  padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card-bg); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .12s, box-shadow .2s;
  color: var(--text);
}
.chip:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,.12); }
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 14px rgba(37,99,235,.25); }
.chip:active { transform: scale(0.97); }

/* ── LOADING ─────────────────────────────────────────────────────────── */
.loading {
  display: flex; align-items: center; justify-content: center;
  padding: 60px; color: var(--text-muted); gap: 12px; font-size: 15px;
}
.spinner {
  width: 22px; height: 22px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .dashboard-grid { gap: 18px; }
}

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

@media (max-width: 900px) {
  .sidebar { width: 72px; }
  .sidebar-brand,
  .nav-item span:not(.nav-icon),
  .admin-info, .admin-name, .admin-role { display: none; }
  .sidebar-logo { justify-content: center; padding-left: 8px; padding-right: 8px; }
  .nav-item { justify-content: center; padding: 11px 10px; }
  #view-container { --view-pad-x: 14px; padding: 0 var(--view-pad-x) 24px; max-width: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .page-actions { flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .modal { width: min(96vw, 700px); max-height: 92vh; }
  .modal.modal-xl { width: min(98vw, 900px); }
  .modal-body { padding: 16px 18px; }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-tile { padding: 16px 18px; }
  thead th, tbody td { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 500px) {
  .sidebar { display: none; }
  #view-container { --view-pad-x: 10px; padding: 0 var(--view-pad-x) 20px; }
  .stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-tile { padding: 14px 16px; }
  .stat-value { font-size: 1.65rem; }
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; }
  .page-header .page-actions { width: 100%; }
  .page-actions .btn { width: 100%; justify-content: center; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { width: 100%; min-height: 44px; }
  .search-input { min-width: 0; width: 100%; }
  .table-wrap { font-size: 12px; border-radius: var(--radius-sm); }
  #toast-container {
    left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom));
    align-items: stretch;
  }
  .toast {
    min-width: 0; width: 100%;
    animation: toastSlideUp .28s ease;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
  }
  @keyframes toastSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .login-card { padding: 32px 24px; }
  .banya-slots-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
}

/* ── Ползунок оплаты ─────────────────────────────────────────────────────── */
/* ── Обёртка ползунка: трек + текст рядом ─────────────────────────────── */
.pay-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Трек (сам ползунок) */
.pay-toggle {
  display: inline-block;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: #f87171;
  position: relative;
  flex-shrink: 0;
  transition: background .25s;
  cursor: pointer;
}
.pay-toggle.is-paid { background: #22c55e; }

/* Бегунок (::before) */
.pay-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: left .25s;
}
.pay-toggle.is-paid::before { left: 25px; }

/* Скрытый checkbox */
.pay-toggle input[type=checkbox] { display: none; }

/* Текст рядом */
.pay-toggle-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}