/* =====================================================================
   mobile.css – geteilte Handy-Regeln für alle CRM-Seiten.
   Wird in jeder public/*.html als LETZTES Stylesheet eingebunden
   (nav.js schiebt es nach dem Nachladen von v3.css wieder ans Ende),
   damit gleich spezifische Seitenregeln überschrieben werden.

   Regel: alles hier steht in @media (max-width: 768px) bzw. 640px.
   Der Desktop bleibt dadurch unverändert.
   Neue Klassen tragen das Präfix m-.

   Bausteine für spätere Etappen:
   - .m-scrollrow / [data-m-scroll]  -> beliebige Leiste einzeilig wischbar
   - .m-scroll                       -> Wrapper um breite Tabellen (wischen + Rand-Verlauf)
   - table[data-m-cards]             -> Tabelle wird unter 641px zu Karten (mobile.js setzt Labels)
   - .m-stack                        -> beliebiges Raster/Flex mobil einspaltig
   - .m-hide / .m-only               -> mobil ausblenden / nur mobil zeigen
   ===================================================================== */

.m-only {
  display: none !important;
}

@media (max-width: 768px) {
  .m-only {
    display: revert !important;
  }

  .m-hide {
    display: none !important;
  }

  /* ---------- Seitenkopf: Titel eigene Zeile, Aktionen darunter ---------- */
  .page-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .page-header > h1:first-child,
  .page-header > h2:first-child,
  .page-header > div:first-child:has(> h1, > h2) {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Direkte Knöpfe neben dem Titel: füllen die Zeile (1–2 = volle Breite, mehr = umbrechen) */
  .page-header > h1:first-child ~ .btn,
  .page-header > h1:first-child ~ a.btn,
  .page-header > div:first-child:has(> h1) ~ .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Aktions-Container neben dem Titel */
  .page-header > h1:first-child ~ div,
  .page-header > div:first-child:has(> h1) ~ div {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 0;
  }

  .page-header > h1:first-child ~ div > .btn,
  .page-header > h1:first-child ~ div > button,
  .page-header > div:first-child:has(> h1) ~ div > .btn,
  .page-header > div:first-child:has(> h1) ~ div > button {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Breadcrumb-Kopf (Zurück-Link zuerst, z. B. Kundenprofil): Aktionen in eigene Zeile */
  .page-header > a:first-child ~ div[style*="margin-left:auto"] {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0 !important;
  }

  /* Trennstrich weg, aktueller Seitenname nimmt die restliche Zeile */
  .page-header > a:first-child + span:not([id]) {
    display: none;
  }

  .page-header > a:first-child ~ span[id] {
    flex: 1 1 0;
    min-width: 0;
  }

  .page-header > a:first-child ~ div[style*="margin-left:auto"] > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .page-header > a:first-child ~ div[style*="margin-left:auto"] > select {
    flex: 1 1 140px;
    width: auto !important;
  }

  .v3-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* ---------- Wischbare Leisten (Tabs, Chips, Segmente) ---------- */
  .filter-tabs,
  .v3-segmented,
  .segmented,
  .fc-tabs,
  #ap-phase-nav,
  .ap-subtabs,
  .modal-tabs,
  .m-scrollrow,
  [data-m-scroll] {
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
  }

  .filter-tabs::-webkit-scrollbar,
  .v3-segmented::-webkit-scrollbar,
  .segmented::-webkit-scrollbar,
  .fc-tabs::-webkit-scrollbar,
  #ap-phase-nav::-webkit-scrollbar,
  .ap-subtabs::-webkit-scrollbar,
  .modal-tabs::-webkit-scrollbar,
  .m-scrollrow::-webkit-scrollbar,
  [data-m-scroll]::-webkit-scrollbar,
  .m-scroll::-webkit-scrollbar {
    display: none;
  }

  .filter-tabs > *,
  .v3-segmented > *,
  .segmented > *,
  .fc-tabs > *,
  #ap-phase-nav > *,
  #ap-phase-nav .ap-phase-btn,
  .ap-subtabs > *,
  .modal-tabs > *,
  .m-scrollrow > *,
  [data-m-scroll] > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Phasen-Leiste Autopilot: innerer Rahmen (Inline-Styles aus autopilot-shell.js) */
  #ap-phase-nav > div {
    flex-wrap: nowrap !important;
  }

  .v3-segmented,
  .segmented {
    display: flex;
    width: max-content;
  }

  /* Breite Tabellen, die wischen statt Karten werden sollen */
  .m-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* Rand-Verlauf: zeigt, auf welcher Seite noch Inhalt liegt (Klassen setzt mobile.js) */
  .m-fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .m-fade-l {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }

  .m-fade-l.m-fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }

  /* ---------- Tippflächen ---------- */
  .btn-sm,
  .btn-xs,
  .v3-btn,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    min-height: 40px;
  }

  .btn-sm,
  .btn-xs {
    padding: 8px 12px;
    font-size: 13px;
  }

  .filter-tab,
  .v3-segment,
  .segment,
  .fc-tab,
  .ap-subtab,
  .modal-tab,
  #ap-phase-nav .ap-phase-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  .filter-tab,
  .v3-segment,
  .segment {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
  }

  .icon-btn,
  .sidebar-icon-btn,
  .vertrag-icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Eingaben: mind. 40 px hoch, 16 px Schrift (verhindert iOS-Zoom beim Fokus) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select {
    min-height: 40px;
  }

  /* ---------- Schrift-Untergrenze (geteilte Klassen) ---------- */
  .page-header p,
  .stat-card-label,
  .stat-card-sub,
  .form-label,
  .form-group label,
  .v3-kpi-label,
  .v3-section-label,
  .v3-header-subtitle,
  .v3-pipeline-title,
  .v3-stage-legend-item,
  .v3-task-time,
  .v3-task-sub,
  .v3-activity-meta,
  .v3-funnel-kicker,
  .v3-kanban-col-meta,
  .v3-deal-card-contact,
  .v3-card-meta-line,
  .v3-card-value,
  .v3-card-next,
  .v3-card-alert,
  .v3-add-card,
  .v3-stage-step,
  .v3-note-actions,
  .v3-timeline-meta,
  .v3-side-card-title,
  .k-card-company,
  .k-card-meta,
  .stage-opt-btn,
  .v3-text-10,
  .v3-text-105,
  .v3-text-11,
  .v3-text-115 {
    font-size: 12px;
  }

  /* Kleine Etiketten (Badges, Tabellenköpfe): Untergrenze 11 px */
  .status-badge,
  .badge,
  .v3-pill,
  .v3-card-tag,
  .v3-card-owner,
  .k-col-count,
  .v3-table-head,
  .client-table th,
  .pay-table th,
  .v3-table th,
  .seo-table th,
  .as-table th,
  .st-table th,
  .caller-table th {
    font-size: 11px;
  }

  /* ---------- Raster: zweispaltige Hüllen werden einspaltig ---------- */
  .settings-shell,
  .settings-grid,
  .m-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .m-stack:not([style*="grid"]) {
    flex-direction: column;
  }

  .settings-subnav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-subnav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav-btn {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }

  /* ---------- Modale Dialoge: Blatt von unten, volle Breite ---------- */
  .modal-overlay {
    align-items: flex-end !important;
    padding: env(safe-area-inset-top) 0 0 !important;
  }

  .modal-overlay > .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top) - 16px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - 16px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }

  /* Knopfleiste bleibt am unteren Rand des Blatts erreichbar */
  .modal > .modal-footer,
  .modal > .modal-foot {
    position: sticky;
    bottom: calc(-20px - env(safe-area-inset-bottom));
    z-index: 2;
    flex-wrap: wrap;
    margin: 18px -18px calc(-20px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-surface, var(--surface));
    border-top: 1px solid var(--border);
  }

  .modal > .modal-footer > .btn,
  .modal > .modal-footer > button,
  .modal > .modal-foot > .btn,
  .modal > .modal-foot > button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }

  .modal .modal-tabs {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =====================================================================
   Tabellen als Karten (table[data-m-cards], Labels setzt mobile.js)
   Vorbild: Karten-Ansicht in vertraege.html.
   ===================================================================== */
@media (max-width: 640px) {
  table[data-m-cards],
  table[data-m-cards] > tbody,
  table[data-m-cards] > tbody > tr,
  table[data-m-cards] > tbody > tr > td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }

  table[data-m-cards] {
    border-collapse: separate;
  }

  table[data-m-cards] > thead {
    display: none;
  }

  table[data-m-cards] > tbody > tr {
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    background: var(--bg-surface, var(--surface));
  }

  table[data-m-cards] > tbody > tr:hover > td {
    background: transparent;
  }

  table[data-m-cards] > tbody > tr > td {
    position: relative;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--divider, var(--border)) !important;
    text-align: right;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  table[data-m-cards] > tbody > tr > td:last-child {
    border-bottom: 0 !important;
  }

  /* Label links, Wert rechts */
  table[data-m-cards] > tbody > tr > td[data-label] {
    min-height: 40px;
    padding-left: calc(40% + 12px) !important;
  }

  table[data-m-cards] > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 12px;
    width: 40%;
    overflow: hidden;
    color: var(--text-4, var(--muted));
    font-family: var(--font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  /* Erste Zelle = Kartentitel (volle Breite, ohne Label) */
  table[data-m-cards] > tbody > tr > td:first-child {
    padding: 12px !important;
    text-align: left;
    font-weight: 600;
    background: var(--bg-hover, transparent);
  }

  table[data-m-cards] > tbody > tr > td:first-child::before {
    content: none;
  }

  /* Zellen ohne Überschrift (Aktionen, Ladehinweis): volle Breite, linksbündig */
  table[data-m-cards] > tbody > tr > td:not([data-label]):not(:first-child) {
    text-align: left;
  }

  /* Aktionszelle (nur Knöpfe): Knöpfe teilen sich die Breite */
  table[data-m-cards] > tbody > tr > td:not([data-label]):not(:first-child):has(> .btn, > button) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  table[data-m-cards] > tbody > tr > td:not([data-label]):not(:first-child) > :is(.btn, button) {
    flex: 1 1 auto;
    justify-content: center;
  }

  table[data-m-cards] > tbody > tr > td:not([data-label]):empty {
    display: none;
  }

  table[data-m-cards] > tbody > tr > td:not([data-label]) .btn,
  table[data-m-cards] > tbody > tr > td:not([data-label]) button {
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Einzelne Zeile ohne Spalten (z. B. "Wird geladen…") nicht als Karte rahmen */
  table[data-m-cards] > tbody > tr:has(> td[colspan]:only-child) {
    border: 0;
    background: transparent;
  }

  table[data-m-cards] > tbody > tr > td[colspan]:only-child {
    background: transparent;
  }
}

/* Toolbar-Zeilen (Ärzte, Follow-up): am Handy Höhe nach Inhalt statt fester Höhe */
@media (max-width: 768px) {
  .v3-toolbar { flex: 0 0 auto; height: auto; }
}