/* =============================================================================
   Consulting OS — Responsive Layer
   ----------------------------------------------------------------------------
   Single-Source der mobilen Anpassungen. Alle anderen CSS-Files definieren
   den Desktop-Default; hier werden Mobile/Tablet-Anpassungen drüber gelegt.

   Breakpoints:
     - mobile/touch : ≤ 900px (Drawer aktiv — deckt Smartphones inkl. Landscape + iPad Portrait ab)
     - tablet       : 901–1199px (Sidebar fix, aber 2-Spalten-Grids)
     - wide         : ≥ 1200px (Default Desktop)
   ============================================================================= */


/* =============================================================================
   1) WIEDERVERWENDBARE DETAIL-GRID-KLASSEN
      (ersetzen hartcodierte inline-grid-template-columns Styles)
   ============================================================================= */
.detail-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.detail-grid--1-1   { grid-template-columns: 1fr 1fr; }
.detail-grid--1-1-2 { grid-template-columns: 1fr 1.2fr; }
.detail-grid--1-2   { grid-template-columns: 1fr 2fr; }


/* =============================================================================
   2) MOBILE NAV — Hamburger-Button + Mobile-Brand (default versteckt)
   ============================================================================= */
.topbar__mobile-brand {
  display: none;
}

.mobile-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 120ms ease;
}
.mobile-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Backdrop für Drawer-Sidebar */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdrop-fade-in 160ms ease-out;
}
@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* =============================================================================
   TABLET (≤ 1023px) — Kanban 3 Spalten + horiz. Scroll, Dashboard 2 Spalten
   ============================================================================= */
@media (min-width: 901px) and (max-width: 1199px) {
  .kanban-board {
    grid-template-columns: repeat(6, 240px);
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
  }
  .kanban-col {
    scroll-snap-align: start;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .finance-summary__card--net {
    grid-column: 1 / -1;
  }

  .form-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .meta-row {
    grid-template-columns: 160px 1fr;
  }

  .detail-grid--1-2 {
    grid-template-columns: 1fr;
  }

  .doc-filters {
    grid-template-columns: 1fr 1fr;
  }
  .doc-filters > *:last-child {
    grid-column: 1 / -1;
  }
}


/* =============================================================================
   MOBILE (≤ 767px) — Drawer-Sidebar, alle Grids 1-Spalter,
                       Tables → Card-Stack, Fullscreen-Dialoge
   ============================================================================= */
@media (max-width: 900px) {

  /* --------------------------------------------------------------------------
     2.1) Layout-Shell
     -------------------------------------------------------------------------- */
  :root {
    --topbar-h: 56px;
    --sidebar-w: 280px;
  }

  body {
    /* Drawer-Mode: keine Body-Sperre nötig wenn Sidebar Off-Canvas ist */
    user-select: text; /* Touch-Selektion auf Mobile freigeben */
    overflow-x: hidden;  /* Horizontaler Overflow-Guard auf Mobile */
  }
  html {
    overflow-x: hidden;
  }

  .app-body {
    position: relative;
  }

  /* iOS Touch-Scroll glatt */
  .main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Hamburger zeigen */
  .mobile-nav-btn {
    display: inline-flex;
  }

  /* Mac-Traffic-Light-Spacer auf Mobile weg (kein Webview-Fenster) */
  .topbar__spacer-mac {
    display: none;
  }

  /* Topbar kompakt: Hamburger + Brand + Stoppuhr rechts.
     Safe-Area-Top: im PWA-Modus (Homescreen) rendert die App unter den Notch —
     ohne Inset rutscht der Hamburger hinter die Status-Bar. */
  .topbar {
    padding: env(safe-area-inset-top) calc(0.75rem + env(safe-area-inset-right)) 0 calc(0.75rem + env(safe-area-inset-left));
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    gap: 0.5rem;
  }
  .topbar__search,
  .topbar__flex {
    display: none;
  }
  /* Stoppuhr ans rechte Ende */
  .topbar__stopwatch {
    margin-left: auto;
  }
  /* Mobile Brand-Titel mittig */
  .topbar__mobile-brand {
    display: block;
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Stoppuhr auf Mobile: nur Icon + Zeit, kein Kontext-Label */
  .topbar__stopwatch {
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
  }
  .topbar__stopwatch-context {
    display: none;
  }

  /* --------------------------------------------------------------------------
     2.2) Sidebar als Off-Canvas-Drawer
     -------------------------------------------------------------------------- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
  }
  .app-shell[data-drawer-open="true"] .sidebar {
    transform: translateX(0);
  }
  .app-shell[data-drawer-open="true"] .sidebar-backdrop {
    display: block;
  }

  /* Brand-Logo in Drawer mit Safe-Area-Top (im PWA-Mode unter Notch) */
  .sidebar__brand {
    padding: calc(1rem + env(safe-area-inset-top)) 1.25rem 0.75rem;
  }

  /* Sidebar-Footer mit Safe-Area-Bottom */
  .sidebar__footer {
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  /* Nav-Items größer für Touch */
  .nav-item {
    padding: 0.875rem 1rem 0.875rem 1.125rem;
    font-size: 15px;
    min-height: 44px;
  }
  .nav-item__icon {
    width: 20px;
    height: 20px;
  }

  /* --------------------------------------------------------------------------
     2.3) Main: Padding + Safe-Areas (Landscape-Notch links/rechts)
     -------------------------------------------------------------------------- */
  .main__inner {
    padding:
      1rem
      calc(0.875rem + env(safe-area-inset-right))
      calc(5rem + env(safe-area-inset-bottom))
      calc(0.875rem + env(safe-area-inset-left));
    max-width: 100%;
  }

  /* --------------------------------------------------------------------------
     2.4) Headings + Module-Header kompakter
     -------------------------------------------------------------------------- */
  :root {
    --fs-h1: 20px;
    --fs-h2: 16px;
  }
  .module-header {
    margin-bottom: 1rem;
    gap: 0.625rem;
  }
  .module-header__icon {
    width: 36px;
    height: 36px;
  }

  /* --------------------------------------------------------------------------
     2.5) Grids ALL → 1 Spalte
     -------------------------------------------------------------------------- */
  .form-grid--2col,
  .form-grid--3col {
    grid-template-columns: 1fr;
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .kpi-card {
    padding: 1rem;
  }
  .kpi-card__value {
    font-size: 26px;
  }

  .finance-summary {
    grid-template-columns: 1fr;
  }
  .finance-summary__card--net {
    grid-column: auto;
  }
  .finance-summary__value {
    font-size: 24px;
  }
  .finance-summary__card {
    padding: 1rem;
  }

  .dashboard__two-col {
    grid-template-columns: 1fr;
  }

  .detail-grid--1-1,
  .detail-grid--1-1-2,
  .detail-grid--1-2 {
    grid-template-columns: 1fr;
  }

  .meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 0.5rem 0;
  }
  .meta-row__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
  }

  .doc-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  /* --------------------------------------------------------------------------
     2.6) List-Toolbar
     -------------------------------------------------------------------------- */
  .list-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .list-toolbar__left {
    flex: 1;
    min-width: 0;
  }

  /* --------------------------------------------------------------------------
     2.7) Tabellen → Card-Stack
          - <table class="data-table"> bleibt strukturell erhalten
          - Auf Mobile als Stack mit data-label-Attribut pro <td>
          - Innerhalb eines Dialogs nicht stacken (dort eigene Layouts).
     -------------------------------------------------------------------------- */
  /* Scope auf .main → Dialoge (in document.body angeflanscht) bleiben unangetastet */
  .main .data-table,
  .main .data-table thead,
  .main .data-table tbody,
  .main .data-table tr,
  .main .data-table th,
  .main .data-table td {
    display: block;
    width: 100%;
  }
  .main .data-table thead {
    /* Header-Reihe komplett ausblenden — Labels kommen aus data-label */
    position: absolute;
    left: -9999px;
    top: -9999px;
  }
  .main .data-table tbody tr {
    margin-bottom: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
  }
  .main .data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }
  .main .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .main .data-table tbody td {
    padding: 0.375rem 0;
    border: none;
    text-align: left !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    min-height: 28px;
  }
  .main .data-table tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    min-width: 80px;
  }
  /* Primärspalte: volle Breite + Überschriftsstil */
  .main .data-table tbody td[data-primary="true"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-bottom: 0.625rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    font-weight: 500;
  }
  .main .data-table tbody td[data-primary="true"]::before {
    display: none;
  }
  .main .data-table tbody td.numeric {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
    justify-content: flex-end;
  }
  .main .data-table tbody td.numeric::before {
    margin-right: auto;
    text-align: left;
  }
  .main .data-table__cell-actions {
    justify-content: flex-end;
  }

  /* --------------------------------------------------------------------------
     2.8) Buttons + Touch-Targets (iOS HIG: ≥ 44×44)
     -------------------------------------------------------------------------- */
  .btn {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
  }
  .icon-btn {
    width: 44px;
    height: 44px;
  }
  .tab-btn {
    min-height: 40px;
    padding: 0.5rem 0.875rem;
    font-size: 13px;
  }
  /* Klick-Fläche auf Card-Stack-Action-Buttons großzügig */
  .main .data-table tbody td .data-table__cell-actions .icon-btn {
    width: 40px;
    height: 40px;
  }
  .tab-bar {
    width: 100%;
    overflow-x: auto;
  }

  /* --------------------------------------------------------------------------
     2.9) Dialoge fullscreen (Sheet-Style)
     -------------------------------------------------------------------------- */
  .dialog-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .dialog,
  .dialog--wide,
  .dialog--confirm {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: dialog-slide-up 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes dialog-slide-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .dialog__body {
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .dialog__header {
    padding: 0.875rem 1rem;
    position: relative;
  }
  .dialog__header::before {
    /* Drag-Handle visuell */
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.20);
  }
  .dialog__footer {
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .dialog__footer .btn {
    flex: 1;
    min-width: 0;
  }
  .dialog__footer-spread {
    flex: 0 0 100%;
    margin-right: 0;
    margin-bottom: 0.25rem;
    text-align: center;
  }

  /* Inputs auf Touch: größere Mindesthöhe und 16px (vermeidet iOS Auto-Zoom) */
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px;
    padding: 0.625rem 0.75rem;
    min-height: 44px;
  }
  .form-textarea {
    min-height: 5rem;
  }
  .form-select {
    background-position: right 0.5rem center;
  }

  /* --------------------------------------------------------------------------
     2.10) FAB unten links anpassen, damit es Inhalt nicht verdeckt
     -------------------------------------------------------------------------- */
  #feedback-fab {
    bottom: calc(1rem + env(safe-area-inset-bottom));
    right: 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 11px;
  }
  .feedback-fab__label {
    /* Label auf Mobile weg → kompakter Pill mit Icon + Badge */
    display: none;
  }

  /* Toast unten zentriert */
  .toast-error,
  .toast-stack {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  /* --------------------------------------------------------------------------
     2.11) Kanban-Board horizontal scrollen
     -------------------------------------------------------------------------- */
  .kanban-board {
    grid-template-columns: repeat(6, 75vw);
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .kanban-col {
    scroll-snap-align: start;
  }

  /* --------------------------------------------------------------------------
     2.12) Drop-Zone für Dokumente kompakter
     -------------------------------------------------------------------------- */
  .doc-dropzone {
    padding: 1rem;
    font-size: 12px;
  }

  /* --------------------------------------------------------------------------
     2.13) Element-Picker-Hint kompakt + safer top
     -------------------------------------------------------------------------- */
  .feedback-picker__hint {
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 0.75rem;
    right: 0.75rem;
    transform: none;
    text-align: center;
    font-size: 11px;
  }
  /* Stopwatch im Topbar weg falls Platzmangel - Inhalt clamp */
  .topbar__stopwatch-value {
    font-size: 11px;
  }

  /* Detail-Header-Buttons untereinander: ganze Action-Row unter Titel.
     Greift für beide Patterns: explizite .module-header__actions UND
     direkte .btn-Geschwister von .module-header (häufig in *-list.js). */
  .module-header {
    flex-wrap: wrap;
  }
  .module-header__actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .module-header__actions .btn,
  .module-header > .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    font-size: 12px;
    padding: 0.5rem 0.625rem;
  }
  .module-header > .btn {
    flex-basis: 100%;
  }
}


/* =============================================================================
   3) WIDE TWEAKS (≥ 1440px) — etwas mehr Atemraum
   ============================================================================= */
@media (min-width: 1440px) {
  .main__inner {
    padding: 2rem;
  }
}


/* =============================================================================
   4) Reduced Motion respect
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}