/* Waqtly CRM: mobiele weergave v3 (26 sep 2026). Alleen actief onder 900px, desktop blijft ongewijzigd. */
.mob-bar, .mob-backdrop { display: none; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* Balk bovenaan: menuknop, logo, paginatitel, CRM-status */
  .mob-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 300;
    padding: 0 10px 0 6px; background: #141414; border-bottom: 1px solid #2a2a2a;
  }
  .mob-bar img { height: 24px; width: auto; }
  .mob-bar .mob-title { color: #f0f0f0; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 19px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-bar .mob-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; flex-shrink: 0; }
  .mob-bar .mob-dot.off { background: #8b3a3a; box-shadow: none; }
  .mob-menu {
    width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent;
    color: #eee; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .mob-menu svg { width: 24px; height: 24px; }
  .mob-menu:active { background: #2a2a2a; }

  /* Zijmenu wordt een lade die van links inschuift */
  .sidebar {
    position: fixed !important; top: 52px !important; left: 0 !important; bottom: 0 !important;
    width: min(280px, 85vw) !important; height: auto !important; z-index: 250 !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    transform: translateX(-105%); transition: transform .22s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .5);
  }
  body.mob-nav-open .sidebar { transform: none; }
  .sidebar-header { padding-top: 14px !important; padding-bottom: 14px !important; }
  .nav-item { min-height: 46px; font-size: 14px; }
  .sidebar-footer { display: flex; gap: 8px; align-items: center; }
  .sidebar-footer .lang-switch { margin: 0; }
  .sidebar-footer #logout-btn { flex: 1; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }

  .mob-backdrop {
    display: block; position: fixed; inset: 52px 0 0 0; z-index: 240;
    background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.mob-nav-open .mob-backdrop { opacity: 1; pointer-events: auto; }
  body.mob-nav-open { overflow: hidden; }

  /* Inhoud: volle breedte, ruimte voor de balk; de desktop-topbalk gaat weg (titel staat al in de balk) */
  .main { margin-left: 0 !important; padding-top: 52px !important; min-height: auto !important; }
  .topbar { display: none !important; }
  .content { padding: 14px 12px 70px !important; }
  .content h1, .page h1 { font-size: 22px !important; }
  .card { padding: 16px 14px !important; }
  .card-header { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .card-header .btn-group { flex-wrap: wrap !important; }
  .card-header .btn-group .btn { flex: 1 1 auto; justify-content: center; }
  .card-title { font-size: 18px; }

  /* Knoppen groot genoeg voor een duim */
  .btn { min-height: 42px !important; padding: 9px 14px !important; font-size: 11px !important; }
  .btn-sm { min-height: 40px !important; }
  .qx { width: 40px; height: 40px; }
  input, select, textarea { font-size: 16px !important; } /* voorkomt inzoomen op iPhone */

  /* Tegels: twee naast elkaar, een derde over de volle breedte */
  .content :has(> .stat-card) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card:nth-child(3):last-child { grid-column: 1 / -1; }
  .stat-card { padding: 16px 12px !important; }
  .stat-value { font-size: 34px !important; }
  .stat-label { font-size: 11px !important; }
  .content :has(> .module-card) { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .card, .module-card, .status-panel { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .status-panel-header { flex-wrap: wrap !important; gap: 8px !important; }
  .status-panel-header .btn-group { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .status-panel-header .btn-group .btn { justify-content: center; }

  /* Ahadith: per taal 2 kolommen, export 3 kolommen, taaltabs scrollen */
  .hadith-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .export-grid { grid-template-columns: 1fr 1fr !important; }
  .export-grid .btn { white-space: normal; }
  .act-grid2 > .card, .act-grid4 > .card, .rec-grid > .rc { min-width: 0; }
  .lang-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .lang-tab { padding: 8px 12px !important; min-height: 40px; display: inline-flex; align-items: center; flex-shrink: 0; }
  .input-row { grid-template-columns: 1fr !important; display: grid; gap: 10px; }

  /* Zoekrijen onder elkaar, knop vol breed (Moskeeën, Podcasts, Muazzin, Reciteurs, Speaker) */
  .search-box, .sp-row, .toolbar { flex-direction: column !important; gap: 8px !important; }
  .search-box input, .search-box select, .search-box .btn, .sp-row input, .sp-row .btn, .toolbar input, .toolbar .btn { width: 100% !important; min-width: 0 !important; box-sizing: border-box; justify-content: center; }
  .row2 { flex-direction: column; gap: 0; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; padding: 12px 6px !important; }

  /* Reciteurs: kaarten in één kolom, zoekresultaten gestapeld */
  .rec-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rc-actions .btn { padding: 10px 6px !important; font-size: 11px !important; }
  .result-item { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .result-main { min-width: 0; }
  .result-name, .result-meta { overflow-wrap: anywhere; }
  .styles { width: 100%; }
  .styles .btn { flex: 1 1 45%; justify-content: center; }
  .qrow { gap: 8px; }
  .qrow .qname { flex: 1 1 0; min-width: 0; }
  .qrow .btn { padding: 8px 10px !important; }

  /* Live activiteit */
  .act-grid4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .act-grid2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .act-val { font-size: 26px !important; }

  /* Tabellen: eenvoudige lijsten stapelen, brede tabellen zijwaarts scrollen */
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; }
  .table-wrap.stack table { min-width: 0; width: 100%; }
  .table-wrap.stack thead { display: none; }
  .table-wrap.stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table-wrap.stack td { display: inline-block; border: 0 !important; padding: 2px 8px 2px 0 !important; }
  .table-wrap.stack td:first-child { display: block; font-weight: 500; padding-bottom: 4px !important; }

  /* Speaker-import */
  #sp2-result > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* Meldingen */
  .toast-wrap { bottom: 16px; width: calc(100% - 24px); }
  .toast { width: 100%; box-sizing: border-box; }
  .modal { padding: 18px; }
  .modal .modal-btns { flex-direction: column; }

  /* Moskeeën-import */
  .row2-btn { flex-direction: column !important; align-items: stretch; }
  .row2-btn .btn { width: 100%; }
  .mrow { flex-wrap: wrap !important; }
  .mrow .n { flex: 1 1 100% !important; }
  .mrow .btn { flex: 1 !important; }
  .mrow .btn.qx { flex: 0 0 42px !important; }
  .check .l { flex-direction: column; gap: 2px; }
  .check .l b { text-align: left; }

  /* Inlogscherm */
  .login-wrap { width: auto !important; max-width: 100% !important; margin: 32px 16px !important; }
  .login-card { width: auto !important; }
}