/* BOOKING DARK MODE — toggle-vezérelt, fix sötét paletta */
:root[data-theme="dark"] {
  --bg: #0f172a !important;
  --surface: #1e293b !important;
  --surface-2: #334155 !important;
  --text: #f1f5f9 !important;
  --muted: #94a3b8 !important;
  --border: #334155 !important;
}
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .bk-card,
html[data-theme="dark"] .tile { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .choice { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] input:not([type=range]):not([type=submit]):not([type=button]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] [id$="Modal"] > div,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .login-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .tb,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .room-col,
html[data-theme="dark"] .vtabs,
html[data-theme="dark"] .day-btn,
html[data-theme="dark"] .mday { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .trow,
html[data-theme="dark"] .trow.hr { border-color: var(--border) !important; }
/* 2026-08-31 (B142): OSZTALY NELKULI GOMB. Ha egy gomb csak hatteret kap a
   temabol (pl. inline background:var(--surface)) es szint nem, a bongeszo
   sajat alapertelmezese marad: FEKETE. Vilagos modban ez rendben volt,
   sotet modban fekete betu lett a sotet gombon (merve: 1.44, 13 helyen).
   Csak az OSZTALY NELKULI gombokra all - azoknak nincs sajat szin-szabalyuk,
   amit felulirhatnank -, es nem !important, tehat minden sajat szin nyer. */
html[data-theme="dark"] button:not([class]) { color: var(--text); }
html[data-theme="dark"] .vt { color: var(--muted) !important; }
html[data-theme="dark"] .vt.on { background: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .plabel,
html[data-theme="dark"] .tl-label { color: var(--muted) !important; }
html[data-theme="dark"] .bk.confirmed { background: var(--surface-2) !important; }
html[data-theme="dark"] .table-wrap table th { background: var(--surface-2) !important; color: var(--muted) !important; }
html[data-theme="dark"] .table-wrap table tr:hover td { background: var(--surface-2) !important; }
html[data-theme="dark"] #bk-brand-header { background: var(--surface) !important; border-color: var(--border) !important; }

/* Toggle gomb stílusa */
.bk-dark-toggle {
  background: transparent;
  color: var(--shell-fg, #fff);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 14px; cursor: pointer;
  margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.bk-dark-toggle:hover { background: rgba(255,255,255,0.15); }

/* Onboarding oldal */
html[data-theme="dark"] .ob-card,
html[data-theme="dark"] .ob-step {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ob-link-box {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .ob-card a,
html[data-theme="dark"] .ob-step a { color: var(--primary) !important; }

/* Sotet gomb mindig a jobb szelre, minden oldalon egysegesen */
.shell-right #bkDarkToggle, .shell-right #darkToggleBtn { order:999; }