/* ================================================================
   NIS2 Tracker – Responsive CSS
   Einheitliche Breakpoints:
     768px  Tablet
     480px  Mobile
     360px  Kleine Smartphones (Edge-Cases)
   ================================================================ */


/* ────────────────────────────────────────────────
   TABLET  ≤ 768px
   ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  nav { padding: .85rem 4%; }
  main { padding: 1.5rem 4%; }

  /* Tab-Navigation horizontal scrollbar statt Overflow */
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-link { white-space: nowrap; }

  /* Fortschrittsbalken (org.php) – volle Breite im Stack */
  .summary-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .summary-bar .progress-bar-bg { min-width: 100%; }

  /* BSI-Infocard – 2 Spalten statt auto-fill */
  .bsi-card { grid-template-columns: 1fr 1fr; }

  /* Stammdaten-Formulare – Padding reduziern */
  .form-card { padding: 1.4rem 1.2rem; }

  /* Konto-Seite – section padding */
  .section { padding: 1.4rem 1.4rem; }
}


/* ────────────────────────────────────────────────
   MOBILE  ≤ 480px
   ──────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Navigation ── */
  nav { padding: .7rem 4%; gap: .5rem; }

  /* Logos verkleinern */
  .logo-solvist { height: 18px; }
  .logo-nis2    { height: 26px; }

  /* NIS2-Logo rechts in nav-user ausblenden – spart Platz */
  .nav-user .logo-nis2 { display: none; }

  /* nav-right: "← Übersicht"-Link ausblenden, Schrift kleiner */
  .nav-right { gap: .8rem; font-size: .8rem; }
  .nav-right a.nav-back-link { display: none; }

  /* nav-user: Schrift kleiner */
  .nav-user { gap: .8rem; font-size: .8rem; }

  /* ── Typografie ── */
  .page-header h1,
  .org-header h1 { font-size: 1.3rem; }

  .page-header p,
  .org-meta      { font-size: .82rem; }

  /* ── main / Layout ── */
  main { padding: 1.2rem 4%; }

  /* ── Dashboard – Org-Grid ── */
  /* auto-fill könnte auf 320px-Phones noch 2 Karten nebeneinander versuchen */
  .org-grid { grid-template-columns: 1fr; }

  /* Header-Bereich: Button unter Titel */
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .header-actions .btn-add {
    width: 100%;
    justify-content: center;
  }

  /* ── Konto-Seite ── */
  .section { padding: 1.1rem 1rem; }

  /* E-Mail + Wert untereinander statt nebeneinander */
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }

  /* ── Statistik-Karten (tasks.php) ── */
  .stat-card .val { font-size: 1.4rem; }

  /* ── Fortschritt (org.php) ── */
  .summary-pct { font-size: 2rem; }
  .summary-stats { gap: 1rem; }

  /* ── BSI-Infocard – 1 Spalte ── */
  .bsi-card { grid-template-columns: 1fr; }

  /* ── Maßnahmen – Status-Select & Buttons ── */
  .measure-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  .status-select { min-width: 100%; width: 100%; }

  /* Touch-Targets vergrößern (vorher ~24px) */
  .btn-detail,
  .btn-detail-toggle {
    padding: .45rem .65rem;
    font-size: .8rem;
    min-height: 36px;
  }

  /* ── Dokumente ── */
  /* Doc-Meta (Dateigröße + Datum) auf sehr kleinen Screens ausblenden */
  .doc-meta { display: none; }
  .doc-item { flex-wrap: wrap; }

  /* ── Formulare (org_new / org_edit) ── */
  .form-card { padding: 1.1rem 1rem; }

  /* ── Task-Zeilen ── */
  .task-badges { gap: .3rem; }
  .task-top    { gap: .5rem; }
}


/* ────────────────────────────────────────────────
   KLEINE SMARTPHONES  ≤ 360px
   ──────────────────────────────────────────────── */
@media (max-width: 360px) {

  nav { padding: .6rem 3.5%; }
  main { padding: 1rem 3.5%; }

  /* Logo-Divider ausblenden, Logo noch etwas kleiner */
  .logo-solvist  { height: 16px; }
  .logo-divider  { display: none; }

  /* h1 weiter reduzieren */
  .page-header h1,
  .org-header h1 { font-size: 1.15rem; }

  /* section padding minimal */
  .section { padding: .9rem .85rem; }

  /* Karten-Padding */
  .org-card { padding: 1.1rem; }
  .measure  { padding: .8rem 1rem; }
  .task-row { padding: .8rem 1rem; }

  /* Stat-Karte */
  .stat-card { padding: .8rem .9rem; }
  .stat-card .val { font-size: 1.25rem; }
}