/* ═══════════════════════════════════════════════════════════════════════════
   Hive — Mobile & Tablet (Simon 13.08.2026)

   Zentrale Responsive-Schicht für ALLE vier Tools (Deals, Hours, Invoice,
   Admin) + Hub. Wird als LETZTES CSS geladen, damit die Overrides greifen.
   Desktop-Layout bleibt unberührt — alles hier steht in @media-Blöcken.

   Breakpoints:
     ≤ 900px  → Phone/Tablet-Hochkant: Sidebar wird Off-Canvas-Drawer (Burger)
     ≤ 640px  → Phone: kompaktere Toolbar, Slide-Over/Modal fast Vollbild
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── iOS: Safe-Area (Notch / Home-Indicator) ───────────────────────────────── */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .hv-toolbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .hv-content { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .hv-sidebar { padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* ═══ ≤900px — Sidebar als Off-Canvas-Drawer ═══════════════════════════════ */
@media (max-width: 900px) {

  /* Drawer: liegt über dem Inhalt, kommt von links rein */
  .hv-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 240px;
    max-width: 82vw;
    z-index: 70;                 /* über Slide-Overs (50) und Modals (60) */
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(0,0,0,0.14);
    overflow-y: auto;
  }
  body.hv-nav-open .hv-sidebar { transform: translateX(0); }

  /* Abdunkelnder Hintergrund hinter dem Drawer */
  .hv-nav-backdrop {
    position: fixed; inset: 0;
    z-index: 69;
    background: rgba(0,0,0,0.38);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  body.hv-nav-open .hv-nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Burger-Button (wird von hive-mobile.js in die Toolbar gehängt) */
  .hv-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-left: -8px;
    flex-shrink: 0;
    border: none; background: transparent;
    color: var(--text); cursor: pointer;
    border-radius: 8px;
  }
  .hv-burger:active { background: rgba(0,0,0,0.06); }
  .hv-burger svg { width: 20px; height: 20px; }

  /* Seiten ohne Toolbar (Hours/Invoice/Admin): Burger schwebt oben links */
  .hv-burger--float {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    /* bewusst UNTER Slide-Overs (50) und Modals (60): sobald ein Detail offen
       ist, soll der Burger verschwinden statt den Header zu überlagern */
    z-index: 40;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  /* Platz schaffen, damit der Float-Burger nichts überdeckt */
  body.hv-no-toolbar .hv-content { padding-top: 58px; }

  /* Hauptbereich nimmt die volle Breite (Sidebar ist ja ausgeklinkt) */
  .hv-main { width: 100%; }
  .hv-content { padding: 14px 14px; }

  /* Toolbar: Burger links, Titel daneben, Rest darf umbrechen */
  .hv-toolbar { height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 14px; gap: 8px; }
  .hv-toolbar-title { font-size: 15px; }

  /* Touch-Targets: alles klickbare mind. 38px hoch */
  .hv-btn-new, .btn-secondary, .btn-primary { height: 38px; padding: 0 14px; font-size: 13px; }
  .hv-sb-item { padding: 11px 14px; font-size: 14px; }
  .field-input { font-size: 16px; }   /* <16px löst auf iOS Auto-Zoom aus */
  select.field-input, input.field-input, textarea.field-input { min-height: 40px; }

  /* Modals: fast Vollbild, unten angedockt wirkt auf dem Phone natürlicher */
  .modal-card { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 14px; }
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal-body { padding: 14px 16px; }
  .modal-hdr { padding: 14px 16px 10px; }
  .modal-footer { padding: 10px 16px; }

  /* Slide-Over (Deal-/Company-/Contact-Detail): volle Breite */
  #slideover, #co-so, #ct-so { width: 100% !important; max-width: 100% !important; }

  /* Tabellen bleiben scrollbar statt zu quetschen */
  .hv-table-scroll { -webkit-overflow-scrolling: touch; }
  .hv-table { font-size: 12.5px; }
  .hv-table th, .hv-table td { padding: 10px 12px; }

  /* Kanban-Board horizontal wischbar */
  #view-pipeline { -webkit-overflow-scrolling: touch; padding: 12px; }

  /* Bug-Button etwas höher, damit er nicht auf dem Home-Indicator klebt */
  #bug-report-fab { bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ═══ ≤640px — Phone-Feinschliff ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .hv-content { padding: 12px 10px; }
  .hv-toolbar-sub { display: none; }          /* Untertitel kostet nur Platz */
  .hv-search input { width: 100%; }
  .hv-search { flex: 1 1 100%; }
  .hv-table th, .hv-table td { padding: 9px 10px; }

  /* Suchfelder/Filterzeilen brechen sauber um statt zu überlaufen */
  .hv-toolbar > * { min-width: 0; }
}

/* ═══ Tablet quer (901–1200px): nur etwas kompakter ════════════════════════ */
@media (min-width: 901px) and (max-width: 1200px) {
  .hv-content { padding: 16px 16px; }
  .hv-sidebar { width: 176px; }
}

/* ═══ Standalone (vom Homescreen gestartet) ════════════════════════════════ */
@media (display-mode: standalone) {
  /* Kein Browser-UI → oben etwas Luft für die Statusleiste */
  .hv-toolbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .hv-sidebar { padding-top: max(16px, env(safe-area-inset-top)); }
  /* Slide-Overs, Modals und Lead-Detail liegen fixed über allem — ohne Safe-Area
     kollidiert ihr Header mit Uhr/Batterie (Simon, Bug #4, 07.09.2026) */
  #slideover, #co-so, #ct-so, #lead-detail-overlay > *, #modal-company > *, #modal-office > * {
    padding-top: env(safe-area-inset-top);
  }
  .modal-bg { padding-top: env(safe-area-inset-top); }
}

/* ── Hub-Startseite: Kacheln untereinander statt nebeneinander ────────────── */
@media (max-width: 900px) {
  .hub-grid, .tools-grid, [class*="grid-cols-"] { grid-template-columns: 1fr !important; }
  .hub-wrap, .hub-inner { padding: 18px 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Teil 2 — Überlauf-Notausgang, iOS-Höhen, Formulare, Touch
   (nach vollständiger Inventur ergänzt, 13.08.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── iOS: 100vh rechnet die URL-Leiste mit → unten wird abgeschnitten.
      dvh ist die dynamische Variante. Gilt auf allen Größen. ─────────────── */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  .hv-app { height: 100dvh; }
}

@media (max-width: 900px) {

  /* ── Notausgang gegen abgeschnittene Inhalte ──────────────────────────────
     Die Shell klemmt alles mit overflow:hidden fest (body, .hv-app, .hv-main,
     und deals.html überschreibt .hv-content sogar auf hidden). Auf schmalen
     Viewports muss der Inhalt scrollen dürfen, sonst ist er unerreichbar. */
  body, .hv-app { overflow: visible; height: auto; min-height: 100dvh; }
  .hv-main { overflow: visible; }
  .hv-content { overflow: auto !important; -webkit-overflow-scrolling: touch; }

  /* Sidebar-Drawer braucht die volle Höhe unabhängig vom Body */
  .hv-sidebar { height: 100dvh; }

  /* ── Formulare: zweispaltige Raster werden einspaltig ────────────────────
     Betrifft Tailwind-Grids (grid-cols-2) und inline gesetzte 1fr-1fr-Raster
     in Modals/Slide-Overs quer durch alle Tools. */
  .grid-cols-2, .sm\:grid-cols-2, .md\:grid-cols-2,
  .modal-body .grid, .modal-card .grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,"],
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns: repeat(3,"] { grid-template-columns: 1fr !important; }
  /* Karten-Raster: Track darf nie breiter als der Container sein */
  [style*="minmax(280px"], [style*="minmax(260px"], [style*="minmax(240px"] {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) !important;
  }

  /* ── Feste Modal-Breiten (Hours/Invoice/Auth/Login) ─────────────────────── */
  .entry-modal, .modal-card, .auth-modal {
    width: min(94vw, 560px) !important;
    max-width: 94vw !important;
  }
  .entry-modal { overflow: auto !important; max-height: 90dvh; }

  /* ── Filter-/Toolbar-Zeilen dürfen umbrechen statt zu überlaufen ────────── */
  .hv-toolbar, .week-nav, .quick-add, .inv-filters, .hours-filters { flex-wrap: wrap; }
  .hv-search-input, .hv-search input { width: 100% !important; max-width: 100%; }

  /* ── Tab-Leisten horizontal wischbar (Invoice-Tabs, Slide-Over-Tabs) ────── */
  .inv-tabs, .so-tabs, #slideover > .flex, #co-so > .flex, #ct-so > .flex {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .inv-tabs::-webkit-scrollbar, .so-tabs::-webkit-scrollbar { display: none; }
  .so-tab, .inv-tab { flex: 0 0 auto !important; }

  /* ── Wochenraster (Hours) darf scrollen statt abgeschnitten zu werden ───── */
  .week-grid { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .week-grid-head, .week-grid-row { grid-template-columns: 96px repeat(7, minmax(64px, 1fr)) !important; }
  .week-label { min-width: 96px !important; }

  /* ── Roadshow-Tabelle war geclippt (wrap hatte overflow:hidden) ─────────── */
  .roadshows-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── Globale Suche klebte an fixen 210px/340px ──────────────────────────── */
  #global-search-results {
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
  }

  /* ── Slide-Over-Innenleben ──────────────────────────────────────────────── */
  .so-insp-header, .so-act-row { flex-wrap: wrap; }
  .erow-key, .drow-key { width: auto !important; min-width: 84px; }
  .drow-val { max-width: none !important; }
  .fin-row { flex-wrap: wrap; gap: 8px; }
  .fin-cell { flex: 1 1 45% !important; }
  .so-stage-names { display: none; }        /* Mini-Labels sind <9px — unlesbar */
}

/* ── Touch-Targets: greift auf ALLEN Touch-Geräten, auch iPad Landscape ──── */
@media (pointer: coarse) {
  .hv-btn-new, .btn-secondary, .btn-primary, .hv-row-btn, .so-act-btn,
  .btn-detail-small, .hv-seg-btn, .day-btn, .week-nav-btn, .inv-tab {
    min-height: 40px;
  }
  .hv-btn-icon-delete, .btn-rumor-delete, .btn-icon-delete, .so-close-btn,
  #btn-privacy, .picker-action, .btn-rumor-lead, .btn-rumor-advisor-pick {
    min-width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hv-sb-item { min-height: 42px; }
  .toggle { width: 40px; height: 24px; }
  .toggle-slider::before { height: 18px; width: 18px; }
  .toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
  /* iOS zoomt bei Fokus, wenn die Schrift < 16px ist */
  input, select, textarea, .field-input, .rumors-input { font-size: 16px !important; }
  .hv-table--dense td { padding: 6px 8px; }
}

/* ── Hub-Startseite (Wabenraster braucht 448px) ───────────────────────────── */
@media (max-width: 520px) {
  .hub-row:last-child { margin-left: 0 !important; }
  .hub-row { flex-wrap: wrap; justify-content: center; }
  .hub-tile { width: 132px !important; height: 148px !important; }
  body { overflow: auto !important; }
}

/* ── Kontext-Hinweise: auf Mobile zeigt „Seitenleiste" ins Leere ──────────── */
.hint-mobile { display: none; }
@media (max-width: 900px) {
  .hint-desktop { display: none; }
  .hint-mobile  { display: inline; }
}