/* MSC5Labs – Mobile/Responsive Overrides
 * Greift bei Viewport ≤ 768px (Tablet hochkant + Phone).
 * Strong selectors, weil viele Pages Inline-Styles nutzen.
 * ─────────────────────────────────────────────────────────── */

/* iOS: Auto-Zoom auf Inputs verhindern (≥16px font-size) */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Auf Mobile: flex-bodies (Login, 2FA, change_password etc.) nicht mehr center-justifyen,
 * damit Cards bei viel Inhalt nicht gequetscht werden und scrollbar bleiben.
 * Auf Block-Bodies haben flex-Properties keine Wirkung — also ungefährlich. */
@media (max-width: 900px) {
  body {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
}

/* ── Phone & kleines Tablet ────────────────────────────────── */
@media (max-width: 900px) {

  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { -webkit-text-size-adjust: 100% !important; }
  *, *::before, *::after { max-width: 100vw; }

  /* HEADER — flex-wrap, kompakt, kein fixer Hero */
  header,
  .header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px !important;
    z-index: 100 !important;
  }
  /* Body-Padding-Reset (Compensation für fixed-Header entfällt, da nun sticky) */
  body { padding-top: 0 !important; }
  .h-left, .h-brand { gap: 8px !important; min-width: 0; flex: 1 1 auto; }
  .h-left .h-title strong, .h-brand strong { font-size: .82rem !important; }
  .h-left .h-title span { font-size: .62rem !important; }
  .logo, .h-brand img, header img { height: 32px !important; width: auto !important; }
  .h-right { gap: 6px !important; flex-wrap: wrap; justify-content: flex-end; }
  .h-right > *, .h-right a, .h-right span, .h-right button {
    font-size: .68rem !important;
    padding: 4px 8px !important;
  }
  .h-badge { font-size: .58rem !important; padding: 2px 6px !important; }
  .btn-start { padding: 6px 12px !important; font-size: .72rem !important; }

  /* HAUPT-CONTAINER – schmalere Padding */
  .main, .page, .grid-section, .section-divider {
    padding: 12px !important;
    max-width: 100% !important;
  }
  .grid-section { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 16px !important; }

  /* Admin/GRC/SOC/Compliance: Sidebar einklappen */
  .admin-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .admin-nav {
    position: static !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 6px !important;
  }
  .admin-nav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 7px 10px !important;
    font-size: .74rem !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
  }
  .admin-nav a.active { border-bottom-color: #3d84f7 !important; border-left: none !important; }
  .admin-nav-section { display: none !important; }

  /* Sticky Page-Header an Mobile anpassen */
  .admin-page-header { position: static !important; padding: 8px 0 !important; margin-bottom: 12px !important; }
  .admin-page-header h1 { font-size: 1.1rem !important; }

  /* CARDS */
  .card { margin-bottom: 14px !important; border-radius: 10px !important; }
  .card-head { padding: 12px 14px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .card-head h2 { font-size: .82rem !important; }
  .card-body { padding: 14px !important; }

  /* TABELLEN: horizontal scrollbar Wrapper, Mindestbreite damit Spalten lesbar bleiben */
  .user-table-wrap,
  .table-wrap,
  .card-body table,
  .card table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: .76rem !important; }
  table th, table td { padding: 6px 8px !important; white-space: nowrap; }
  /* Erlaube Wrap für lange Textspalten — typisch Beschreibungen */
  table td.wrap, table .wrap-cell { white-space: normal !important; }

  /* Buttons */
  .btn { padding: 8px 12px !important; font-size: .78rem !important; }
  .btn-sm { padding: 4px 8px !important; font-size: .68rem !important; }

  /* Forms */
  .field { margin-bottom: 10px !important; }
  .field input, .field select, .field textarea, input[type=text], input[type=password], input[type=email], textarea, select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Modals/Overlays */
  .modal, .modal-content, [class*="modal"] {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    margin: 8px !important;
  }

  /* Pre/Code */
  pre, code, .codeblock {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100% !important;
    font-size: .72rem !important;
  }

  /* INDEX.PHP – Card-Grid 1-spaltig auf Phone, keine Equal-Height-Streckung */
  body.wide-layout .grid,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }
  /* Wide-Layout primary-Card spannt sonst 2 Spalten — auf 1-spaltigem Mobile entfernen */
  body.wide-layout .card.primary,
  .card.primary { grid-column: auto !important; }
  /* Wide-Layout grid-section Padding auf Mobile reduzieren */
  body.wide-layout .grid-section,
  body.wide-layout .section-divider {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Karten sollen sich an Inhalt ausrichten, nicht ganzhöhig stretchen */
  .card { align-self: start !important; height: auto !important; }
  .card-sub { flex: 0 1 auto !important; }
  .card-actions { margin-top: 4px !important; }
  .card-actions .btn,
  .card-actions a,
  .card-actions button { flex: 1 1 auto !important; min-width: 0 !important; }
  .intro-title { font-size: 1.25rem !important; line-height: 1.25 !important; }
  .intro-sub { font-size: .82rem !important; }

  /* Ticker: smaller */
  .ticker-bar { height: 30px !important; }
  .ticker-label { padding: 0 10px 0 12px !important; font-size: .58rem !important; }
  .ticker-item { font-size: .72rem !important; padding-right: 18px !important; }

  /* LOGIN */
  body > .card,
  .card.flash-red, .card.flash-green {
    max-width: 100% !important;
    padding: 22px 16px !important;
    border-radius: 12px !important;
  }
  .brand { margin-bottom: 18px !important; }
  .brand img { max-height: 120px !important; height: auto !important; }
  /* Binary-Rain & Particles auf Mobile abschalten — CPU-/GPU-Last + Verzerrung */
  #binary-canvas, .scanline, .particles, .particle {
    display: none !important;
  }

  /* CHANGELOG */
  .entry { padding: 14px 16px !important; }
  .ver-head { gap: 8px !important; }
  .head-stick { padding: 14px 0 10px !important; }
  .search-row { flex-direction: column !important; align-items: stretch !important; }
  .search-input { width: 100% !important; }

  /* Footer */
  footer { padding: 12px !important; font-size: .68rem !important; flex-direction: column !important; gap: 6px !important; text-align: center !important; }

  /* Allgemein: lange Wörter umbrechen */
  body { word-break: break-word; }

  /* Touch-Targets minimum 36px */
  a, button, .btn { min-height: 36px; }
  .btn-sm, table .btn { min-height: 28px; }

  /* Floating action / FAB Bereiche */
  .fab, [class*="floating"] { right: 12px !important; bottom: 12px !important; }
}

/* ── Tablet Hochkant / Phone Querformat (600-900px) ─────────
 * Für Geräte >600px erlauben wir 2-spaltige Cards, damit Querformat-
 * Phones (iPhone Landscape ~844px) nicht eine einsame Spalte zeigen
 * mit halbleerem Bildschirm. */
@media (min-width: 600px) and (max-width: 900px) {
  body.wide-layout .grid,
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.wide-layout .card.primary,
  .card.primary { grid-column: span 2 !important; }
}

/* ── Sehr schmale Phones (<= 380px) ────────────────────────── */
@media (max-width: 380px) {
  .h-right .h-badge,
  .h-right span[class*="version"] { display: none !important; }
  .logo, .h-brand img, header img { height: 28px !important; }
  .main, .page { padding: 8px !important; }
  table { font-size: .72rem !important; }
}

/* ── Touch-Hover entfernen (Touch-Geräte) ──────────────────── */
@media (hover: none) and (pointer: coarse) {
  *:hover { transition: none !important; }
}