/* ═══════════════════════════════════════════════
   MOBILE FIXES - globális override 
   minden template-en érvényes
   ═══════════════════════════════════════════════ */

/* Bármely elem ami túlnyúlik a viewporton, ne csináljon horizontal scrollt a body-n */
html, body { max-width: 100%; overflow-x: hidden; }

/* ─── TABLET és MOBIL (≤ 1024px) ─── */
@media (max-width: 1024px) {
  /* Brand DNA és más wide modálok */
  [style*="max-width:1300px"], [style*="max-width: 1300px"],
  [style*="max-width:1280px"], [style*="max-width: 1280px"],
  [style*="max-width:1440px"], [style*="max-width: 1440px"] {
    max-width: 95vw !important;
  }
  /* Split screen Brand DNA modal */
  #brandDnaModal > div { 
    flex-direction: column !important;
    height: auto !important;
    max-height: 95vh;
  }
  #brandDnaModal > div > div:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: 50vh;
  }
}

/* ─── MOBIL (≤ 768px) ─── */
@media (max-width: 768px) {
  /* Header tördelés mobile-on: shell ne lapoljon át */
  .shell {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 56px;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .shell-left, .shell-right {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .shell-btn {
    padding: 4px 9px !important;
    font-size: 11px !important;
  }
  .shell-logo-text { font-size: 14px !important; }
  .shell-logo-sub { font-size: 8px !important; letter-spacing: 1px !important; }

  /* Grid layouts összeesnek 1 oszlopra */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Modálok teljes szélességig */
  [style*="max-width:1024px"], [style*="max-width: 1024px"],
  [style*="max-width:800px"], [style*="max-width: 800px"],
  [style*="max-width:720px"], [style*="max-width: 720px"],
  [style*="max-width:760px"], [style*="max-width: 760px"],
  [style*="max-width:640px"], [style*="max-width: 640px"],
  [style*="max-width:600px"], [style*="max-width: 600px"],
  [style*="max-width:580px"], [style*="max-width: 580px"],
  [style*="max-width:560px"], [style*="max-width: 560px"],
  [style*="max-width:520px"], [style*="max-width: 520px"] {
    max-width: 95vw !important;
  }
  
  /* Inline fix width touch-elem (input, button) ne nyúljon túl */
  input[style*="width:90"], input[style*="width:70"] {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Táblázatok: horizontális scroll automatikusan */
  table, .tbl, .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  
  /* Wizard step indikátor mobilra kompakt */
  .step-progress, [class*="step-prog"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  /* Nav tabok ne lógjanak ki */
  .nav-tabs, .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap !important;
  }
  
  /* Padding csökkentés a card-okon */
  .card, .step-card, .bk-card {
    padding: 16px !important;
  }
  
  /* Modal padding redukció */
  [id$="Modal"] > div { padding: 16px !important; }
  
  /* Quill email szerkesztő toolbar wrap */
  .ql-toolbar { flex-wrap: wrap !important; }
  
  /* Brand DNA preview iframe mobile: nem fér el split — alul jelenik */
  #bdnIframe { min-height: 350px; }
}

/* ─── KIS MOBIL (≤ 480px) ─── */
@media (max-width: 480px) {
  /* Általános font-size kisebb */
  body { font-size: 13px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }
  
  /* Button-ok min-height a touch-hez */
  button, .btn, .btn-primary, .btn-secondary, .btn-small {
    min-height: 36px;
  }
  
  /* Input-ok touch-friendly */
  input, select, textarea { font-size: 14px !important; }
  
  /* Card extra kompakt */
  .card, .step-card { padding: 12px !important; }
  
  /* Modal title kisebb */
  [id$="Modal"] h2, [id$="Modal"] h3 { font-size: 16px !important; }
}

/* ─── TELJES KIKAPCSOLÁS BIZONYOS HELYEKEN ─── */
/* Az overview heti grid SAJÁT mobile branch-csel rendelkezik, nem kell felülírni */
@media (max-width: 768px) {
  #wrap [style*="grid-template-columns:52px"] { all: revert; }
}

/* ─── DARK MODE ─── */
html[data-theme="dark"] {
  /* Booking landing & wizard */
  body { background: var(--shell-bg) !important; color: var(--bg) !important; }
  .step-card, .bk-card, .card, .wiz-container, #wizContainer,
  [class*="step-card"], [id*="wizStep"] {
    background: var(--shell-bg) !important;
    border-color: var(--text) !important;
    color: var(--bg) !important;
  }
  input:not([type=range]), select, textarea {
    background: var(--shell-bg) !important;
    border-color: var(--text) !important;
    color: var(--bg) !important;
  }
  .step-progress-bar, .progress-bar-bg {
    background: var(--text) !important;
  }
  /* Admin panel */
  .table-wrap table th { background: var(--shell-bg) !important; color: var(--muted) !important; }
  .table-wrap table tr:hover td { background: var(--shell-bg) !important; }
  #bk-brand-header { background: var(--shell-bg) !important; border-color: var(--text) !important; }
  /* Modals */
  [id$="Modal"] > div, .modal-box {
    background: var(--shell-bg) !important;
    border-color: var(--text) !important;
    color: var(--bg) !important;
  }
}

/* ─── 2026-08-31 (B143): KETOSZLOPOS RACS TELEFONON EGY OSZLOP ───
   A Beallitasok > Foglalasi lepesek ket oszlopa 300 pixeles dobozban 546 pixel
   tartalmat vitt, es a kartya levagta (overflow:hidden): a het "Beallitasok"
   gomb telefonon SEMMILYEN uton nem volt elerheto. Nevesitett osztaly, hogy a
   javitas ne terjedjen ki mas ketoszlopos racsokra - a B142 tanulsaga szerint a
   globalis javitas tobbet ronthat, mint amennyit javit. */
@media (max-width: 768px) {
  .bk-2osz { grid-template-columns: 1fr !important; }
}