/* ──────────────────────────────────────────────────────────────────
 * vm_responsive.css — Fas 2c
 * Responsivitet för 3 typiska skärmstorlekar:
 *   10" manöverpanel  (upp till 1199 px, touch-optimerat, stora knappar)
 *   15" operatörsvy    (1200–1919 px, standardlayout)
 *   32" väggvisning    (≥ 1920 px, glest, stor typsnitt, 2-kolumn)
 *
 * Dessa regler komplementerar befintliga teman — de ändrar inga färger,
 * bara spacing/typografi/tryckytor. Ingen klass behövs; klickar direkt
 * på storlek i DOM.
 * ──────────────────────────────────────────────────────────────── */

/* ══════════ 10" MANÖVERPANEL ══════════ */
@media (max-width: 1199px) {
  :root {
    --tap-min: 56px;     /* minsta tryckyta (Apple HIG = 44, vi är snällare) */
    --font-base: 15px;
    --pad-comfort: 14px;
  }

  body { font-size: var(--font-base); }

  /* Större knappar i larm-vyn — tumvänliga */
  .al-btn,
  .al-btn.primary,
  .fv-btn,
  .fe-btn,
  .fc-btn,
  .rl-card,
  .dd-floor-btn {
    min-height: var(--tap-min);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: .84rem;
  }

  /* Dropdowns tumvänliga */
  .al-pick, .dd-sel, .fe-inp {
    min-height: 46px;
    font-size: .86rem;
    padding: 8px 12px;
  }

  /* Modaler får större stopp-yta */
  .al-modal { width: min(92vw, 420px); padding: 24px; }
  .al-modal input { min-height: 50px; font-size: 1rem; }
  .al-modal-actions .al-btn { min-height: 52px; padding: 10px 22px; }

  /* Drilldown stage måste få hela bredden */
  .dd-grid { grid-template-columns: 1fr; }
  .dd-sidepanel { order: 2; }

  /* Fasad-editor: flytta sidopanelen under */
  .fe-grid { grid-template-columns: 1fr; }

  /* Topbar-compression */
  .rl-hero { padding: 24px 22px; }
  .rl-name { font-size: 1.25rem; }
}

/* ══════════ 15" OPERATÖRSVY (default, ingen override) ══════════ */
/* Standard-layout används — inga media queries behövs här. */

/* ══════════ 32" VÄGGVISNING ══════════ */
@media (min-width: 1920px) {
  :root {
    --font-base: 17px;
    --pad-comfort: 24px;
  }

  body { font-size: var(--font-base); }

  /* Större containers */
  .al-wrap, .dd-wrap, .fe-wrap, .fv-wrap, .fc-wrap, .rl-wrap {
    max-width: 1800px;
  }

  /* 2-kolumner för larm-paneler på bred skärm */
  .al-grid {
    grid-template-columns: 2fr 1fr;
    gap: 26px;
  }

  .dd-grid { grid-template-columns: 1fr 440px; gap: 24px; }

  /* Större aktiv-larm-badges */
  .dd-num, .dd-active-num { width: 36px; height: 36px; font-size: .95rem; }

  /* Fasad-hotspots större */
  .fv-hotspot { min-width: 52px; min-height: 52px; font-size: .92rem; }

  /* Större drilldown-stage */
  .dd-stage { min-height: 800px; }
  .dd-map { max-height: 80vh; }

  /* Typografi — tydligare för väggskärm */
  .al-title, .dd-title, .fe-title, .fv-title, .fc-title, .rl-name {
    font-size: 1.5rem;
  }
  .al-p-title, .dd-panel-title, .fe-p-title {
    font-size: .84rem;
  }

  /* Rol-landing får större grid */
  .rl-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
  .rl-hero { padding: 48px 56px; }
  .rl-name { font-size: 2rem; }
}

/* ══════════ Skrivs över av touch-tema om aktivt ══════════ */
/* Touch-temat (tidomat-touch) sätter redan större typografi och padding
 * globalt. Reglerna ovan förstärker bara där touch inte är aktivt. */