/* ──────────────────────────────────────────────────────────────
   Shared responsive styles — Tankstellen Monitor
   Included by all pages. Desktop (>768px) is untouched.
   ────────────────────────────────────────────────────────────── */

/* ── Hamburger button (hidden on desktop) ── */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 7px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border, #dde1e7);
  border-radius: 6px;
  flex-shrink: 0;
}
.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text, #111827);
  border-radius: 1px;
}

/* ── Mobile nav backdrop ── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 998;
}
.mobile-nav-overlay.open { display: block; }

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Show hamburger ── */
  .mobile-menu-btn { display: flex; }

  /* ── Layout: sidebar off-canvas ── */
  .layout {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 240px !important;
    height: 100vh !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.2) !important;
    transition: left .25s ease !important;
    padding-top: 56px !important;
  }
  .sidebar.mobile-open { left: 0 !important; }

  /* ── Header ── */
  header { padding: 10px 14px !important; }
  header h1 { font-size: 14px !important; }
  .header-right { gap: 6px !important; font-size: 11px !important; }
  #hdr-stats { display: none !important; }

  /* ── Content ── */
  .content { padding: 10px 12px !important; }
  .main    { padding: 10px 12px !important; }

  /* ── Cards ── */
  .card-header { padding: 10px 14px !important; flex-wrap: wrap; gap: 6px; }
  .card-body   { padding: 12px 14px !important; }
  .section     { padding: 14px 14px !important; }

  /* ── Two-column layouts → single ── */
  .two-col   { grid-template-columns: 1fr !important; }
  .drop-grid { grid-template-columns: 1fr !important; }
  .grid-2    { grid-template-columns: 1fr !important; }

  /* ── Hero (home.html) ── */
  .hero          { padding: 20px 16px !important; }
  .hero h1       { font-size: 18px !important; }
  .hero p        { font-size: 13px !important; margin-bottom: 16px !important; }
  .hero-stats    { grid-template-columns: 1fr 1fr !important; }
  .stat-val      { font-size: 20px !important; }

  /* ── Analysis stat cards → 2 columns ── */
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Analysis form ── */
  #analyse-controls-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #analyse-controls-header input[type="date"] {
    min-width: 130px;
    flex: 1 1 130px;
  }
  #analyse-presets-bar { padding: 6px 12px !important; gap: 4px !important; }

  /* ── Analyse state bars ── */
  #analyse-new-bar { flex-wrap: wrap; gap: 6px !important; }
  #busy-banner { font-size: 12px !important; padding: 8px 12px !important; }

  /* ── Log box ── */
  .log-box { max-height: 120px !important; font-size: 11px !important; }

  /* ── Tables ── */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead th  { font-size: 10px !important; padding: 7px 8px !important; }
  tbody td  { padding: 7px 8px !important; font-size: 12px !important; }

  /* ── Bar chart ── */
  .bar-label { width: 72px !important; font-size: 11px !important; }

  /* ── Charts ── */
  .chart-wrap { height: 160px !important; }

  /* ── Fuel pills ── */
  .fuel-pills { gap: 12px !important; }
  .fuel-pill .fp-val { font-size: 18px !important; }

  /* ── Result meta ── */
  .result-meta { flex-wrap: wrap; gap: 6px !important; padding: 6px 14px !important; }

  /* ── Station detail modal (index.html) → full-screen ── */
  #station-modal { padding: 0 !important; }
  #station-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── Export PNG modal → bottom sheet on mobile ── */
  #modal-export-png { align-items: flex-end !important; padding: 0 !important; }
  #modal-export-png > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* ── Station page: stat cards → 2 col ── */
  .st-stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Footer ── */
  .site-footer { padding: 12px 14px !important; gap: 10px !important; font-size: 11px !important; }
}