/* ═══════════════════════════════════════════
   HOSTEL OS — Professional UI v2
   ═══════════════════════════════════════════ */

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

body {
  background: #f1f5f9;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 12px;
}
.header-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.logo-text {
  font-weight: 700; font-size: 15px;
  color: #0f172a; letter-spacing: -0.3px;
}
.desktop-nav {
  display: none; align-items: center; gap: 2px; margin-left: 12px;
}
@media (min-width: 640px) { .desktop-nav { display: flex; } }

.nav-link {
  padding: 6px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: #64748b;
  text-decoration: none; transition: all .15s;
  white-space: nowrap;
}
.nav-link:hover { background: #f8fafc; color: #1e293b; }
.nav-link.active { background: #eef2ff; color: #4338ca; font-weight: 600; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px; min-width: 160px; z-index: 50;
}
.dropdown-item {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; color: #374151; text-decoration: none;
}
.dropdown-item:hover { background: #f8fafc; }

.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.user-badge {
  align-items: center; gap: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 20px; padding: 4px 12px 4px 8px;
  font-size: 12.5px; font-weight: 500; color: #475569;
}
.user-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #22c55e; flex-shrink: 0;
}
.btn-ghost {
  display: flex; align-items: center;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid #e2e8f0; font-size: 13px;
  color: #64748b; text-decoration: none; font-weight: 500;
}
.btn-ghost:hover { background: #f8fafc; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: #475569;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: #f1f5f9; }

/* ── Mobile Sheet ────────────────────────── */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px);
}
.mobile-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
.sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: #cbd5e1; margin: 12px auto 4px;
}
.sheet-title {
  padding: 10px 20px 14px;
  font-size: 16px; font-weight: 700; color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 8px;
}
.sheet-role {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  background: #4f46e5; padding: 2px 8px; border-radius: 20px;
}
.sheet-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; font-size: 15px; font-weight: 500;
  color: #1e293b; text-decoration: none;
  border: none; background: transparent; width: 100%; cursor: pointer;
}
.sheet-item:hover { background: #f8fafc; }
.sheet-item-danger { color: #dc2626; }
.sheet-item-danger:hover { background: #fef2f2; }
.sheet-icon { font-size: 18px; width: 24px; text-align: center; }

/* ── Main Content ────────────────────────── */
.main-content {
  max-width: 1280px; margin: 0 auto;
  padding: 20px 16px calc(80px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  .main-content { padding-bottom: 24px; }
}

/* ── Bottom Nav ──────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
}
.bn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px; min-height: 56px;
  text-decoration: none; color: #94a3b8;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  border: none; background: transparent; cursor: pointer;
  transition: color .15s;
}
.bn-item:active { opacity: .7; }
.bn-icon { width: 22px; height: 22px; }
.bn-label { font-size: 10px; }
.bn-active { color: #4f46e5; }
.bn-active .bn-icon { stroke-width: 2.25; }

/* ── Page titles ────────────────────────── */
.page-title {
  font-size: 20px; font-weight: 700;
  color: #0f172a; letter-spacing: -0.4px;
}
.page-subtitle {
  font-size: 13px; color: #94a3b8; margin-top: 2px;
}

/* ── Stat cards (Today) ─────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 20px;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: #fff; border-radius: 16px;
  padding: 16px; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
.stat-card.departures::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.stat-card.arrivals::before   { background: linear-gradient(90deg, #22c55e, #16a34a); }
.stat-card.buses::before      { background: linear-gradient(90deg, #818cf8, #4f46e5); }
.stat-card.free::before       { background: linear-gradient(90deg, #94a3b8, #64748b); }
.stat-number {
  font-size: 32px; font-weight: 800;
  letter-spacing: -1px; line-height: 1; margin-bottom: 4px;
}
.stat-label {
  font-size: 12px; font-weight: 500; color: #94a3b8;
}

/* ── Section cards ──────────────────────── */
.section-card {
  background: #fff; border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden; margin-bottom: 12px;
}
.section-header {
  padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
  font-size: 14px; font-weight: 600; color: #0f172a;
  display: flex; align-items: center; justify-content: space-between;
}
.section-count {
  font-size: 12px; font-weight: 600;
  background: #f1f5f9; color: #64748b;
  padding: 2px 8px; border-radius: 20px;
}

/* ── List rows ──────────────────────────── */
.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 13.5px;
  border-bottom: 1px solid #f8fafc;
}
.list-row:last-child { border-bottom: none; }
.list-name { font-weight: 500; color: #1e293b; flex: 1; min-width: 0; }
.list-meta { font-size: 12px; color: #94a3b8; white-space: nowrap; }

/* ── Status badges ──────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; white-space: nowrap;
}
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-amber  { background: #fef3c7; color: #b45309; }
.badge-indigo { background: #e0e7ff; color: #4338ca; }
.badge-gray   { background: #f1f5f9; color: #64748b; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Apt card (beds board) ──────────────── */
[data-apt] {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 0;
}
[data-apt] button.w-full {
  min-height: 52px; padding: 12px 16px;
}
[data-apt] .px-4.pb-4 { padding: 12px 16px 16px; }

/* ── Chip (bed button) ──────────────────── */
.chip {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-size: 12.5px; font-weight: 500; line-height: 1;
  min-height: 34px; transition: all .1s;
}
.chip:active { transform: scale(.96); }
.chip-free     { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.chip-occupied { color: #b91c1c; background: #fff1f2; border-color: #fecdd3; }
.chip-soon     { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.chip:hover    { filter: brightness(.96); }
.dot { border-radius: 50%; flex: none; width: 7px; height: 7px; display: inline-block; }

/* ── Input ──────────────────────────────── */
.inp {
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 10px; outline: none;
  width: 100%; height: 44px; padding: 0 12px;
  font-size: 14px; color: #0f172a;
}
.inp:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.lbl { color: #64748b; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; display: block; }

/* ── Buttons ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  transition: all .12s; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); opacity: .9; }
.btn-primary  { background: #4f46e5; color: #fff; }
.btn-primary:hover  { background: #4338ca; }
.btn-success  { background: #16a34a; color: #fff; }
.btn-success:hover  { background: #15803d; }
.btn-warning  { background: #f59e0b; color: #fff; }
.btn-warning:hover  { background: #d97706; }
.btn-danger   { background: #ef4444; color: #fff; }
.btn-danger:hover   { background: #dc2626; }
.btn-dark     { background: #1e293b; color: #fff; }
.btn-dark:hover     { background: #0f172a; }
.btn-outline  { background: transparent; color: #374151; border: 1.5px solid #e2e8f0; }
.btn-outline:hover  { background: #f8fafc; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* ── Door card ──────────────────────────── */
.door-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.door-code { font-size: 18px; font-weight: 700; color: #0f172a; }
.door-name { font-size: 12.5px; color: #94a3b8; margin-top: 1px; }
.lock-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; margin: 12px 0;
}
.lock-locked  { background: #f0fdf4; color: #15803d; }
.lock-open    { background: #fffbeb; color: #b45309; }
.lock-jammed  { background: #fef2f2; color: #dc2626; }
.lock-unknown { background: #f8fafc; color: #94a3b8; }
.door-actions { display: flex; gap: 8px; }

/* ── Usterka card ───────────────────────── */
.usterka-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.usterka-apt  { font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
.usterka-desc { font-size: 14px; color: #374151; line-height: 1.55; margin: 8px 0; }
.usterka-meta { font-size: 12px; color: #94a3b8; }
.usterka-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }

/* ── Filter bar ─────────────────────────── */
.filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 14px; border-radius: 20px;
  font-size: 13px; font-weight: 500; border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: all .12s;
}
.filter-btn:hover { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }
.filter-btn.active-filter { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 600; }
.filter-btn.active-new    { background: #fef2f2; border-color: #fca5a5; color: #dc2626; font-weight: 600; }
.filter-btn.active-wip    { background: #fffbeb; border-color: #fcd34d; color: #d97706; font-weight: 600; }
.filter-btn.active-done   { background: #f0fdf4; border-color: #86efac; color: #15803d; font-weight: 600; }

/* ── HTMX loading ───────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .7s linear infinite; }

/* ── Login page ─────────────────────────── */
.login-wrap {
  min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 24px 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #faf5ff 100%);
}
.login-card {
  background: #fff; border-radius: 20px;
  border: 1px solid #e2e8f0; padding: 36px 32px;
  width: 100%; max-width: 380px;
  box-shadow: 0 8px 32px rgba(79,70,229,0.1);
}

/* ── Empty state ────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 24px; color: #94a3b8;
}
.empty-icon { font-size: 44px; margin-bottom: 12px; opacity: .6; }
.empty-text { font-size: 15px; font-weight: 500; color: #64748b; }

/* ── Modal ──────────────────────────────── */
#modal .modal-bg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,23,42,0.45); backdrop-filter: blur(3px);
}
#modal .modal-box {
  position: fixed; z-index: 61;
  bottom: 0; left: 0; right: 0;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.16);
}
@media (min-width: 640px) {
  #modal .modal-box {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    width: 480px; max-height: 90dvh;
  }
}
#modal .modal-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: #cbd5e1; margin: 12px auto 0;
}
#modal .modal-header {
  padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
  font-size: 16px; font-weight: 700; color: #0f172a;
}

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════
   HOSTEL OS — UI v3 (polish + feedback)
   dopisane 2026-07-03 (nocne usprawnienia)
   ═══════════════════════════════════════════ */

/* ── Globalny top loading bar (htmx) ─────── */
#nprog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 9999; background: linear-gradient(90deg,#6366f1,#a855f7);
  box-shadow: 0 0 10px rgba(99,102,241,.6);
  transition: width .2s ease, opacity .3s ease; opacity: 0; pointer-events: none;
}
#nprog.on { opacity: 1; }

/* ── Płynne przejścia stron (View Transitions) ── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .18s; }
}

/* ── Karty: hover-lift + płynność ────────── */
@media (hover:hover) {
  .stat-card, .section-card, [data-apt], .door-card, .usterka-card {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  }
  .stat-card:hover, .door-card:hover, .usterka-card:hover {
    box-shadow: 0 6px 20px rgba(15,23,42,.09);
    transform: translateY(-2px);
    border-color: #dbeafe;
  }
  [data-apt]:hover { box-shadow: 0 4px 16px rgba(15,23,42,.07); }
}

/* ── Fokus dostępny (klawiatura) ─────────── */
a:focus-visible, button:focus-visible, .chip:focus-visible, .filter-btn:focus-visible, .inp:focus-visible {
  outline: 2px solid #6366f1; outline-offset: 2px;
}

/* ── Klikalne wiersze list (Dziś) ────────── */
.list-row.clickable { cursor: pointer; transition: background .12s; }
.list-row.clickable:hover { background: #f8fafc; }
.list-row.clickable:active { background: #f1f5f9; }

/* ── Kopiowalny PIN ──────────────────────── */
.pin-copy {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; cursor: pointer; user-select: all;
  border: none; background: #e0e7ff; color: #4338ca;
  padding: 3px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
}
.pin-copy:active { transform: scale(.94); }

/* ── Toast (feedback po akcjach) ─────────── */
#toasts {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 10000;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
@media (min-width:640px){ #toasts { bottom: 24px; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  background: #0f172a; color: #fff; padding: 11px 16px;
  border-radius: 12px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  animation: toastin .22s cubic-bezier(.2,.8,.2,1);
}
.toast.ok  { background: #15803d; }
.toast.err { background: #b91c1c; }
.toast.warn{ background: #b45309; }
.toast .tclose { margin-left: 4px; opacity:.7; cursor:pointer; background:none;border:none;color:#fff;font-size:15px; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastout { to { transform: translateY(10px); opacity: 0; } }
.toast.out { animation: toastout .2s forwards; }

/* ── Nawigacja: badge licznika (np. usterki) ── */
.nav-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 5px;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  background: #ef4444; color: #fff; border-radius: 20px;
}
.bn-badge {
  position:absolute; top: 6px; left: calc(50% + 6px);
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align:center;
  background: #ef4444; color: #fff; border-radius: 20px;
}
.bn-item { position: relative; }

/* ── Skeleton (ładowanie modala) ─────────── */
.skel { background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Drobny polish przycisków/filtrów ────── */
.btn { transition: transform .1s, background .12s, box-shadow .12s; }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(79,70,229,.28); }
.chip { transition: transform .1s, filter .12s, border-color .12s; }
.chip:focus-visible { filter: brightness(.97); }

/* ── Bezpieczne wygaszenie na starcie ────── */
.fade-in { animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════
   HOSTEL OS — MOTYW "BUBBLE" v4 (2026-07-03)
   Miękki, zaokrąglony, kolorowe bąble ikon.
   Dopisane na końcu → przesłania wcześniejsze reguły.
   ═══════════════════════════════════════════ */
:root{
  --bbl-primary:#6366f1; --bbl-primary2:#8b5cf6; --bbl-primary-ink:#4c3bcf;
  --bbl-emerald:#10b981; --bbl-amber:#f59e0b; --bbl-rose:#f43f5e; --bbl-sky:#3b82f6;
  --bbl-ink:#1a1f33; --bbl-muted:#6b7396; --bbl-faint:#9aa2c2; --bbl-line:#eef0f8;
  --bbl-shadow:0 14px 34px -12px rgba(79,70,229,.20), 0 3px 10px rgba(20,20,50,.05);
  --bbl-shadow-sm:0 6px 16px -8px rgba(79,70,229,.18), 0 1px 3px rgba(20,20,50,.05);
  --bbl-rcard:24px;
}

/* ── Tło z delikatnym gradientem ── */
body{
  background:
    radial-gradient(120% 80% at 10% -10%, #e2e2fb 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, #f4e6fb 0%, transparent 50%),
    linear-gradient(165deg,#eaecfb 0%,#f3eefb 50%,#f6f4fd 100%) fixed;
  color:var(--bbl-ink);
}

/* ── Header / nav ── */
.app-header{ background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.6); }
.logo-mark{ border-radius:13px; background:linear-gradient(140deg,var(--bbl-primary),var(--bbl-primary2)); box-shadow:0 8px 18px -4px rgba(99,102,241,.55); }
.nav-link{ border-radius:12px; font-weight:600; color:var(--bbl-muted); }
.nav-link.active{ background:linear-gradient(140deg,#eef0ff,#f3ecfe); color:var(--bbl-primary-ink); box-shadow:inset 0 0 0 1px rgba(99,102,241,.14); }
.user-badge{ border-radius:999px; box-shadow:var(--bbl-shadow-sm); border-color:var(--bbl-line); }
.bottom-nav{ background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(1.3); border-top:1px solid rgba(255,255,255,.6); }
.bn-active{ color:var(--bbl-primary); }

/* ── Karty ── */
.stat-card, .section-card, .door-card, .usterka-card, [data-apt], .login-card{
  border:none; border-radius:var(--bbl-rcard); box-shadow:var(--bbl-shadow);
}
.section-card, [data-apt]{ overflow:hidden; }

/* ── Bąble ikon (stat + sekcje) ── */
.stat-bub{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; margin-bottom:11px; }
.stat-bub svg{ width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sec-bub{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex:none; }
.sec-bub svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.b-amber{ background:linear-gradient(140deg,#fbbf24,#f97316); box-shadow:0 8px 18px -5px rgba(249,115,22,.5); }
.b-emer { background:linear-gradient(140deg,#34d399,#10b981); box-shadow:0 8px 18px -5px rgba(16,185,129,.5); }
.b-indi { background:linear-gradient(140deg,#818cf8,#6366f1); box-shadow:0 8px 18px -5px rgba(99,102,241,.5); }
.b-slate{ background:linear-gradient(140deg,#94a3b8,#64748b); box-shadow:0 8px 18px -5px rgba(100,116,139,.45); }
.b-sky  { background:linear-gradient(140deg,#60a5fa,#3b82f6); box-shadow:0 8px 18px -5px rgba(59,130,246,.5); }
.b-rose { background:linear-gradient(140deg,#fb7185,#f43f5e); box-shadow:0 8px 18px -5px rgba(244,63,94,.5); }

/* stat card: chowamy dawny pasek akcentu (bąbel go zastępuje) */
.stat-card::before{ display:none; }
.stat-card{ padding:16px; }
.stat-number{ letter-spacing:-1.2px; }
.section-header{ gap:10px; }
.section-header .section-count{ margin-left:auto; }

/* ── Chipy łóżek jako miękkie bąble ── */
.chip{ border-radius:15px; padding:8px 12px; font-weight:700; }
.chip-free    { background:#e7f8f1; color:#047857; border-color:transparent; }
.chip-occupied{ background:#fdeef1; color:#be123c; border-color:transparent; }
.chip-soon    { background:#fdf3e2; color:#b45309; border-color:transparent; }
.chip:hover{ filter:none; transform:translateY(-1px); }

/* ── Filtry jako pigułki ── */
.filter-btn{ border-radius:999px; font-weight:700; box-shadow:var(--bbl-shadow-sm); border-color:var(--bbl-line); }
.filter-btn.active-filter{ background:linear-gradient(140deg,var(--bbl-primary),var(--bbl-primary2)); border-color:transparent; box-shadow:0 8px 18px -6px rgba(99,102,241,.5); }

/* ── Wyszukiwarka i inputy ── */
.inp{ border-radius:14px; border:1px solid var(--bbl-line); box-shadow:var(--bbl-shadow-sm); }
#q{ border-radius:999px; }

/* ── Przyciski / badge / occupancy ── */
.btn{ border-radius:14px; }
.btn-primary{ background:linear-gradient(140deg,var(--bbl-primary),var(--bbl-primary2)); box-shadow:0 8px 18px -6px rgba(99,102,241,.5); }
.btn-primary:hover{ background:linear-gradient(140deg,#5457ec,#7c46f0); }
.badge{ border-radius:999px; font-weight:700; }
.pin-copy{ background:linear-gradient(140deg,#eef0ff,#efeafe); box-shadow:inset 0 0 0 1px rgba(99,102,241,.16); }

/* occupancy pill w karcie apt (Tailwind-owe klasy z szablonu) */
[data-apt] .ml-auto.text-xs{ border-radius:999px !important; font-weight:800; }

/* ── Modale / login: zaokrąglenia ── */
#modal .modal-box{ border-radius:24px 24px 0 0; }
@media (min-width:640px){ #modal .modal-box{ border-radius:24px; } }
.login-card{ border-radius:26px; box-shadow:0 18px 50px -12px rgba(99,102,241,.25); }

/* ── Toast: gradientowe ── */
.toast{ border-radius:16px; }
.toast.ok{ background:linear-gradient(140deg,#059669,#10b981); }
.toast.err{ background:linear-gradient(140deg,#e11d48,#f43f5e); }
.toast.warn{ background:linear-gradient(140deg,#d97706,#f59e0b); }

/* ── Wiersze list: więcej oddechu ── */
.list-row{ padding:12px 18px; }
.list-name{ font-weight:600; }

/* ═══════════════════════════════════════════
   HOSTEL OS — MOTYW CIEMNY (przełącznik) v5
   Aktywny gdy <html class="dark">. 2026-07-03.
   ═══════════════════════════════════════════ */
html.dark{ color-scheme:dark; }
html.dark body{
  color:#eef0fb;
  background:
    radial-gradient(90% 60% at 8% -8%, rgba(129,140,248,.28) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(167,139,250,.24) 0%, transparent 52%),
    radial-gradient(70% 60% at 90% 100%, rgba(52,211,153,.10) 0%, transparent 60%),
    linear-gradient(165deg,#0d0f1e 0%,#141733 55%,#1a1430 100%) fixed;
}

/* Header / nav / bottom */
html.dark .app-header{ background:rgba(16,18,36,.6); border-bottom:1px solid rgba(255,255,255,.07); }
html.dark .bottom-nav{ background:rgba(16,18,36,.72); border-top:1px solid rgba(255,255,255,.07); }
html.dark .logo-text{ color:#eef0fb; }
html.dark .logo-mark{ box-shadow:0 0 22px rgba(129,140,248,.7); }
html.dark .nav-link{ color:#a3a9cf; }
html.dark .nav-link:hover{ background:rgba(255,255,255,.05); color:#eef0fb; }
html.dark .nav-link.active{ background:rgba(129,140,248,.16); color:#c7cbff; box-shadow:inset 0 0 0 1px rgba(129,140,248,.3); }
html.dark .user-badge{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#c2c8e8; }
html.dark .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.1); color:#a3a9cf; }
html.dark .btn-ghost:hover{ background:rgba(255,255,255,.06); }
html.dark .icon-btn{ color:#c2c8e8; }
html.dark .icon-btn:hover{ background:rgba(255,255,255,.06); }
html.dark .bn-item{ color:#7f86ad; }
html.dark .bn-active{ color:#a5b0ff; }
html.dark .dropdown{ background:#1d2138; border-color:rgba(255,255,255,.08); }
html.dark .dropdown-item{ color:#c2c8e8; }
html.dark .dropdown-item:hover{ background:rgba(255,255,255,.06); }

/* Karty (glass) */
html.dark .stat-card, html.dark .section-card, html.dark .door-card,
html.dark .usterka-card, html.dark [data-apt], html.dark .login-card{
  background:rgba(30,34,58,.72); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
}
html.dark .page-title, html.dark .stat-number, html.dark .door-code,
html.dark .usterka-apt{ color:#eef0fb; }
html.dark .page-subtitle, html.dark .stat-label, html.dark .door-name,
html.dark .usterka-meta, html.dark .list-meta{ color:#7f86ad; }
html.dark .list-name{ color:#dfe3f5; }
html.dark .usterka-desc{ color:#c2c8e8; }
html.dark .section-header{ color:#eef0fb; border-bottom-color:rgba(255,255,255,.06); }
html.dark .section-count{ background:rgba(255,255,255,.06); color:#a3a9cf; }
html.dark .list-row{ border-top-color:rgba(255,255,255,.06); border-bottom-color:rgba(255,255,255,.06); }
html.dark .usterka-actions{ border-top-color:rgba(255,255,255,.08); }

/* Bąble — mocniejszy glow w dark */
html.dark .b-amber{ box-shadow:0 0 22px rgba(251,146,60,.6); }
html.dark .b-emer { box-shadow:0 0 22px rgba(52,211,153,.55); }
html.dark .b-indi { box-shadow:0 0 22px rgba(129,140,248,.65); }
html.dark .b-slate{ box-shadow:0 0 18px rgba(148,163,184,.4); }

/* Chipy łóżek — neon */
html.dark .chip-free    { background:rgba(52,211,153,.14); color:#6ee7b7; }
html.dark .chip-occupied{ background:rgba(251,113,133,.14); color:#fda4af; }
html.dark .chip-soon    { background:rgba(251,191,36,.14); color:#fcd34d; }
html.dark .chip{ border-color:rgba(255,255,255,.06); }

/* Filtry / inputy */
html.dark .filter-btn{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#a3a9cf; box-shadow:none; }
html.dark .filter-btn:hover{ background:rgba(129,140,248,.12); color:#c7cbff; border-color:rgba(129,140,248,.3); }
html.dark .filter-btn.active-filter{ color:#fff; box-shadow:0 0 20px rgba(129,140,248,.5); }
html.dark .inp{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); color:#eef0fb; box-shadow:none; }
html.dark .inp::placeholder{ color:#6f76a3; }
html.dark .inp:focus{ border-color:#818cf8; box-shadow:0 0 0 3px rgba(129,140,248,.25); }
html.dark .lbl{ color:#a3a9cf; }

/* Badge / occupancy / status */
html.dark .badge-gray{ background:rgba(255,255,255,.07); color:#b8bee0; }
html.dark .badge-green{ background:rgba(52,211,153,.16); color:#6ee7b7; }
html.dark .badge-red{ background:rgba(251,113,133,.16); color:#fda4af; }
html.dark .badge-amber{ background:rgba(251,191,36,.16); color:#fcd34d; }
html.dark .badge-indigo{ background:rgba(129,140,248,.18); color:#c7cbff; }
html.dark .lock-locked{ background:rgba(52,211,153,.13); color:#6ee7b7; }
html.dark .lock-open{ background:rgba(251,191,36,.13); color:#fcd34d; }
html.dark .lock-jammed{ background:rgba(251,113,133,.13); color:#fda4af; }
html.dark .lock-unknown{ background:rgba(255,255,255,.06); color:#a3a9cf; }
html.dark .empty-text{ color:#a3a9cf; }

/* Modale / login */
html.dark #modal .modal-box{ background:#1d2138; color:#eef0fb; box-shadow:0 -8px 40px rgba(0,0,0,.6); }
html.dark #modal .modal-header{ color:#eef0fb; border-bottom-color:rgba(255,255,255,.08); }
html.dark #modal .modal-handle{ background:rgba(255,255,255,.2); }

/* ── Override klas Tailwind w modałach (bg-white, slate) ── */
html.dark .bg-white{ background:#1d2138 !important; }
html.dark .bg-slate-50, html.dark .bg-slate-100{ background:rgba(255,255,255,.05) !important; }
html.dark .bg-gray-50{ background:rgba(255,255,255,.05) !important; }
html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-gray-900{ color:#eef0fb !important; }
html.dark .text-slate-700, html.dark .text-slate-600{ color:#c2c8e8 !important; }
html.dark .text-slate-500, html.dark .text-slate-400{ color:#8a91b8 !important; }
html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-gray-200{ border-color:rgba(255,255,255,.1) !important; }
html.dark .bg-slate-900\/40{ background:rgba(0,0,0,.6) !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover{ background:rgba(255,255,255,.06) !important; }

/* Przełącznik motywu */
.theme-toggle{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--bbl-line,#eef0f8);
  background:#fff; color:#475569; display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--bbl-shadow-sm,0 6px 16px -8px rgba(79,70,229,.18)); flex:none;
}
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ic-moon{ display:block; } .theme-toggle .ic-sun{ display:none; }
html.dark .theme-toggle{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fcd34d; box-shadow:none; }
html.dark .theme-toggle .ic-moon{ display:none; } html.dark .theme-toggle .ic-sun{ display:block; }
.sheet-item .ic-sun{ display:none; } html.dark .sheet-item .ic-moon{ display:none; } html.dark .sheet-item .ic-sun{ display:inline; }

/* ── Poprawka ciemnego: kolorowe plakietki Tailwind (agencje, przyciski w oknach) ── */
html.dark .bg-blue-50,  html.dark .bg-sky-50,   html.dark .bg-sky-100  { background:rgba(59,130,246,.18) !important; }
html.dark .bg-indigo-50,html.dark .bg-indigo-100{ background:rgba(129,140,248,.18) !important; }
html.dark .bg-violet-50,html.dark .bg-violet-100,html.dark .bg-purple-100{ background:rgba(167,139,250,.18) !important; }
html.dark .bg-green-50, html.dark .bg-green-100, html.dark .bg-emerald-50{ background:rgba(52,211,153,.16) !important; }
html.dark .bg-red-50,   html.dark .bg-rose-50,   html.dark .bg-red-100  { background:rgba(251,113,133,.16) !important; }
html.dark .bg-amber-50, html.dark .bg-amber-100, html.dark .bg-yellow-50{ background:rgba(251,191,36,.16) !important; }

html.dark .text-blue-600,  html.dark .text-blue-700,  html.dark .text-blue-800,
html.dark .text-sky-600,   html.dark .text-sky-700,   html.dark .text-sky-800  { color:#93c5fd !important; }
html.dark .text-indigo-600,html.dark .text-indigo-700,html.dark .text-indigo-800{ color:#c7cbff !important; }
html.dark .text-violet-600,html.dark .text-violet-700,html.dark .text-violet-800,
html.dark .text-purple-700,html.dark .text-purple-800{ color:#ddd6fe !important; }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800,
html.dark .text-emerald-700{ color:#6ee7b7 !important; }
html.dark .text-red-600,   html.dark .text-red-700,   html.dark .text-rose-700 { color:#fda4af !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-yellow-700{ color:#fcd34d !important; }

/* obramowania kolorowe */
html.dark .border-blue-200,  html.dark .border-sky-200   { border-color:rgba(59,130,246,.35) !important; }
html.dark .border-amber-200, html.dark .border-yellow-200{ border-color:rgba(251,191,36,.35) !important; }
html.dark .border-red-200,   html.dark .border-rose-200  { border-color:rgba(251,113,133,.35) !important; }
html.dark .border-green-200, html.dark .border-emerald-200{ border-color:rgba(52,211,153,.35) !important; }

/* przyciski hover w oknach (kolorowe) w dark */
html.dark .hover\:bg-indigo-200:hover{ background:rgba(129,140,248,.28) !important; }
html.dark .hover\:bg-green-200:hover { background:rgba(52,211,153,.26) !important; }
html.dark .hover\:bg-violet-200:hover{ background:rgba(167,139,250,.26) !important; }
html.dark .hover\:bg-sky-200:hover   { background:rgba(59,130,246,.26) !important; }

/* ── Ciemny: natywne pola select + opcje (agencje itp.) ── */
html.dark select.inp, html.dark select{ background:#242942 !important; color:#eef0fb !important; }
html.dark select.inp:focus, html.dark select:focus{ border-color:#818cf8 !important; }
html.dark select option, html.dark option, html.dark optgroup{ background:#1d2138 !important; color:#eef0fb !important; }
/* natywne inputy/textarea w oknach, na wypadek Tailwind-owych klas */
html.dark input.inp, html.dark textarea.inp{ background:rgba(255,255,255,.05) !important; color:#eef0fb !important; }
html.dark input[type=text], html.dark input[type=tel], html.dark input[type=number],
html.dark input[type=date], html.dark input[type=password], html.dark textarea{
  color-scheme:dark;
}