/* ============================================================
   responsive-enhance.css — targeted mobile/tablet refinements
   Loaded AFTER main.css; overrides only where needed.
   Scope: Calendar (Google-style), Projekte, Finance, Topbar polish
   ============================================================ */

.show-on-mobile { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   0. GLOBAL MOBILE POLISH — safe area, touch, overflow
   ───────────────────────────────────────────────────────────── */

html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  /* Respect iOS notch / home indicator */
  .topbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .main-content,
  .page-content {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* No horizontal page-wide scroll — common mobile bug.
     Use overflow-x: clip (fallback: hidden) — clip doesn't create a
     scroll container, which prevents iOS Safari from blocking
     vertical scrolling when children overflow horizontally. */
  html, body { overflow-x: hidden; }
  @supports (overflow: clip) {
    html, body { overflow-x: clip; }
  }

  /* Touch-friendly minimum sizes for interactive elements */
  .btn-sm, .tab-btn, .row-menu-btn, .team-cal-item {
    min-height: 36px;
  }

  /* Topbar actions: let Sync/label buttons collapse gracefully */
  .topbar-actions {
    gap: 6px !important;
  }
  .topbar-actions .btn { padding: 6px 10px; font-size: 12.5px; }
  .topbar-actions .btn-sm { padding: 5px 9px; font-size: 12px; }

  /* Hide verbose labels in topbar via utility class */
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: inline-block !important; }
}

/* Sidebar backdrop for mobile drawer (invisible overlay that
   dismisses the sidebar when tapped).  The .sidebar.open class
   is already toggled by existing JS. */
@media (max-width: 767px) {
  .sidebar::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: -1;
  }
  .sidebar.open::after {
    opacity: 1;
    pointer-events: auto;
    /* Place the backdrop BEHIND the actual sidebar content */
    left: 100%;
    width: 100vw;
  }
}

/* ─────────────────────────────────────────────────────────────
   1. CALENDAR — Google-Kalender-Style on Mobile
   ───────────────────────────────────────────────────────────── */

/* TABLET (≤1024px): sidebar collapses BELOW the grid, not to the side */
@media (max-width: 1024px) and (min-width: 768px) {
  .calendar-layout {
    grid-template-columns: 1fr !important;
  }
  /* Sidebar becomes a horizontal filter strip */
  .calendar-sidebar {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px !important;
    position: static !important;
  }
  .calendar-sidebar > .card {
    flex: 1 1 240px;
    margin-top: 0 !important;
  }
}

/* MOBILE (≤767px): full agenda-style layout */
@media (max-width: 767px) {

  /* --- Layout: single column, filters collapsible --- */
  .calendar-layout {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
    width: 100%;
  }
  .calendar-main,
  .calendar-sidebar { width: 100%; min-width: 0; }
  /* Force FC internals to full width on mobile — prevents narrow list view
     when the container is measured before layout settles. */
  #calendar,
  .fc, .fc .fc-view-harness, .fc .fc-scrollgrid,
  .fc .fc-list, .fc .fc-list-table { width: 100% !important; }

  .calendar-sidebar {
    order: 2;                  /* filters AFTER the calendar */
    flex-direction: column !important;
    gap: 10px !important;
    position: static !important;
  }
  .calendar-sidebar > .card { margin-top: 0 !important; }

  /* Filter cards: compact collapsed-by-default feel */
  .calendar-sidebar .card-header {
    padding: 8px 12px !important;
    cursor: pointer;
  }
  .calendar-sidebar .card-body {
    padding: 8px 12px 10px !important;
  }

  /* Team list: horizontal scrolling chips, Google-like */
  .team-cal-list {
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .team-cal-list::-webkit-scrollbar { display: none; }
  .team-cal-item {
    flex-shrink: 0;
    padding: 6px 10px !important;
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: 12px !important;
  }
  .team-cal-item .team-cal-name {
    max-width: 90px;
    font-size: 12px;
  }
  .team-cal-item .team-cal-check {
    display: none;               /* the avatar opacity conveys state */
  }
  .team-cal-item.team-cal-active,
  .team-cal-item.team-cal-self {
    background: var(--accent-light);
    border-color: var(--accent);
  }

  /* --- FullCalendar toolbar: stack cleanly --- */
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .fc .fc-toolbar-title {
    font-size: 15px !important;
    text-align: center;
    order: -1;                   /* title always on top */
  }
  .fc .fc-button {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
  .fc .fc-prev-button.fc-button,
  .fc .fc-next-button.fc-button {
    width: 32px !important;
    height: 32px !important;
  }

  /* Hide the "Heute" (today) button label spelling — keep a compact dot */
  .fc .fc-today-button { padding: 5px 10px !important; }

  /* --- Calendar grid: agenda-friendly density --- */
  .calendar-main > div {
    padding: 10px 8px 8px !important;
    border-radius: 10px !important;
  }

  /* Month view: compact day cells */
  .fc .fc-daygrid-day-number {
    font-size: 11px !important;
    padding: 3px 4px !important;
  }
  .fc .fc-day-today .fc-daygrid-day-number {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
  .fc .fc-col-header-cell-cushion {
    font-size: 9.5px !important;
    padding: 6px 2px !important;
  }

  /* Events: compact dots-first like Google Calendar mobile */
  .fc .fc-event {
    font-size: 10.5px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }
  .fc .fc-event-time { display: none; }  /* time hidden in cramped cells */
  .fc .fc-daygrid-event-harness { margin-bottom: 1px; }

  /* --- Default mobile view: LIST (agenda) --- */
  /* FullCalendar exposes list views via button names listWeek/listMonth.
     We can't change the JS default from here, but we can make list view
     feel native when the user selects it. */
  .fc .fc-list-event-time,
  .fc .fc-list-event-title a { font-size: 12.5px !important; }
  .fc .fc-list-day-cushion { padding: 6px 12px !important; }

  /* Time grid: slimmer slot height to fit screens */
  .fc .fc-timegrid-slot { height: 22px !important; }
  .fc .fc-timegrid-slot-label { font-size: 9.5px !important; }

  /* View toggle: keep both buttons but shrink */
  .view-toggle-btn {
    min-width: 80px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }

  /* "Heute" (today) sidebar card: limit height */
  #todayEventsList {
    max-height: 180px;
    overflow-y: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   2. PROJEKTE — detail tabs & header polish
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Project header stacks with breathing room */
  .project-detail-header {
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 10px;
  }
  .project-detail-title {
    font-size: 20px !important;
    line-height: 1.2;
  }
  .project-detail-meta {
    flex-wrap: wrap;
    gap: 6px !important;
    font-size: 12px;
  }
  .project-detail-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .project-detail-actions .btn {
    flex: 1 1 auto;
    min-height: 38px;
    justify-content: center;
  }

  /* Tab bars: fade-edge hint that there's more to scroll */
  .tab-bar,
  .proj-tab-bar,
  .prod-tab-bar {
    position: relative;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn,
  .proj-tab-btn,
  .prod-tab-btn {
    white-space: nowrap;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    min-height: 40px;
  }

  /* Kalkulation tables: horizontal scroll with sticky first col */
  .kal-wrap,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
  }

  /* Page header on project lists */
  .section-header,
  .page-header {
    gap: 10px !important;
  }
  .section-header h1,
  .section-header h2,
  .page-header h1 {
    font-size: 20px !important;
    line-height: 1.25;
  }

  /* Project list cards: tighter padding, stacked meta */
  .project-list-item {
    padding: 12px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .project-list-progress {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
  }
  .progress-bar-wrap { flex: 1; width: auto !important; }

  /* KPI tiles: tighter on mobile */
  .kpi-card { padding: 12px 14px !important; }
  .kpi-label { font-size: 10.5px !important; }
  .kpi-value { font-size: 22px !important; }
}

/* ─────────────────────────────────────────────────────────────
   3. FINANCE — supplements the existing .fin-compact approach
   (main.css already handles fin-card overflow-x and column hiding)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Row-menu dropdown: ensure it's not clipped by fin-card overflow.
     main.css sets .fin-card overflow-x:auto — the JS-positioned
     position:fixed dropdown is fine, but guard the z-index. */
  .row-menu-dd { z-index: 1050 !important; }

  /* Invoice number column gets a slightly beefier tap target */
  .fin-tbl td:first-child a { min-height: 28px; display: inline-block; }

  /* Make fin-search sit below the filter pills and span full width.
     Previously margin-left:auto + non-wrapping flex form pushed the
     "Suchen" button off the right edge on narrow screens. */
  .fin-search {
    margin: 6px 0 0 0 !important;
    width: 100%;
  }
  .fin-search form {
    flex: 1 1 auto;
    flex-wrap: wrap;
    width: 100%;
  }
  .fin-search input[type="text"],
  .fin-search input[name="q"] {
    flex: 1 1 140px;
    min-width: 0;
    width: auto;
  }

  /* Invoice detail Positionen table: hide "Einheit" on mobile to avoid
     horizontal overflow; the unit is usually implicit (Std/Tag/Stk) and
     saving the column width makes Menge/Einzelpreis/Gesamt readable. */
  .fin-tbl.fin-lineitems th:nth-child(3),
  .fin-tbl.fin-lineitems td:nth-child(3) { display: none; }
  .fin-tbl.fin-lineitems { min-width: 0; }
  .fin-tbl.fin-lineitems th,
  .fin-tbl.fin-lineitems td { padding: 0.55rem 0.7rem; }
  .fin-tbl.fin-lineitems th { font-size: 0.55rem; }
  .fin-tbl.fin-lineitems td { font-size: 0.75rem; }
  .fin-tbl.fin-lineitems .fin-n { font-size: 0.8rem; }
}

/* ─────────────────────────────────────────────────────────────
   4. GENERIC TABLES — horizontal scroll fallback
   Tables NOT explicitly handled above get a scroll container.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Any plain <table> that isn't wrapped already — wrap the parent
     card if needed. Falls back gracefully. */
  .card > table,
  .page-content > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Modal sheet styles come from main.css — we only tighten padding */
  .modal-body  { padding: 14px !important; }
  .modal-header { padding: 12px 14px !important; }
}

/* ─────────────────────────────────────────────────────────────
   5. DARK-MODE + REDUCED-MOTION REFINEMENTS
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. iPad / tablet specifics (768–1024px)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Project detail: actions wrap below the header at this size */
  .project-detail-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  /* Dashboard split: force 1 col below 900px already done in main */
  .calendar-layout { gap: 14px !important; }

  /* Finance tables stay tabular but tighter */
  .fin-tbl th,
  .fin-tbl td { padding: 8px 12px !important; font-size: 12.5px !important; }
}

/* ─────────────────────────────────────────────────────────────
   7. PRINT — carry over for invoice detail PDFs
   ───────────────────────────────────────────────────────────── */

@media print {
  .sidebar, .topbar, .topbar-actions, .fin-filter-bar,
  .tab-bar, .proj-tab-bar, .prod-tab-bar,
  .skip-link, #page-progress { display: none !important; }
  .app-layout { display: block !important; }
  .main-wrapper { margin: 0 !important; }
  .main-content, .page-content { padding: 0 !important; }
  .fin-card { border: none !important; box-shadow: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   8. MOBILE APP-FEEL POLISH (≤767px)
   Consolidated pass so every page feels native on phones:
   - two-column detail grids stack
   - all forms become full-width card stacks
   - inputs get 16px font so iOS doesn't zoom
   - tables inside cards scroll horizontally with momentum
   - sticky action bars / FABs respect safe-area
   - list-row patterns get card treatment
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ─── 8.1 Page padding + breathing room ─────────────────── */
  .main-content { padding: 10px 14px !important; }
  .page-content { padding: 14px !important; }

  /* Typography scale */
  .page-title    { font-size: 16px !important; font-weight: 600; }
  h1             { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
  h2             { font-size: 17px; line-height: 1.25; }
  h3             { font-size: 14px; line-height: 1.3; }

  /* ─── 8.2 Stack every inline 2-column detail grid ───────── */
  /* Matches inline styles like:
     display:grid;grid-template-columns:1fr 280px
     display:grid;grid-template-columns:1fr 296px
     ...etc. Broad attribute selector with !important overrides
     the element's inline style. */
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 284px"],
  [style*="grid-template-columns:1fr 296px"],
  [style*="grid-template-columns:1fr 272px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns: 1fr 284px"],
  [style*="grid-template-columns: 1fr 296px"],
  [style*="grid-template-columns: 1fr 272px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 1fr 400px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Classed finance/invoice form sidebars — stack too */
  .inv-grid, .quote-grid, .po-grid,
  .recurring-grid, .detail-2col,
  [class*="__with-sidebar"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── 8.3 Form inputs: native mobile sizing ─────────────── */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  select,
  textarea,
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;  /* prevents iOS input-focus zoom */
    min-height: 42px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  textarea { min-height: 80px; }

  /* Invoice/quote/PO form row grids → stack */
  .inv-row, .inv-row-2, .inv-row-3, .inv-row-4,
  .form-grid, .form-row,
  [class*="field-row"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Label-above-input */
  .form-group label,
  .form-group .form-label {
    font-size: 12px;
    margin-bottom: 4px;
  }

  /* Date/time inline pairs stay side-by-side but shrink */
  .form-row-inline { flex-wrap: wrap; gap: 8px; }

  /* ─── 8.4 Buttons + primary CTAs ────────────────────────── */
  .btn, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary {
    font-size: 13.5px;
  }
  .btn-sm { font-size: 12.5px; min-height: 36px; padding: 7px 12px; }

  /* Form action bars stick to bottom with safe-area */
  .form-actions, .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    z-index: 10;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .form-actions .btn,
  .modal-footer .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }

  /* ─── 8.5 Filter bars + search forms ────────────────────── */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filter-form {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
  }
  .filter-form .search-input,
  .filter-form .form-input,
  .filter-form .form-select,
  .filter-form .filter-select {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .filter-form .search-input { flex-basis: 100% !important; }
  .filter-form .btn { flex: 0 0 auto; }
  .view-toggle { margin-left: auto; }

  /* ─── 8.6 Tab bars: scroll with momentum, no scrollbar ──── */
  .tab-bar, .proj-tab-bar, .prod-tab-bar, .subnav {
    overflow-x: auto !important;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .tab-bar::-webkit-scrollbar,
  .proj-tab-bar::-webkit-scrollbar,
  .prod-tab-bar::-webkit-scrollbar,
  .subnav::-webkit-scrollbar { display: none; }

  /* ─── 8.7 Cards: softer, tighter on mobile ──────────────── */
  .card {
    border-radius: 12px;
  }
  .card-header { padding: 10px 14px; }
  .card-body   { padding: 12px 14px; }

  /* Grids of cards — collapse to 1 column at 480 and below */
  .stu-grid,
  .social-accounts-grid,
  .team-grid,
  .dokumente-grid,
  .studios-grid,
  .clients-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─── 8.8 Tables: momentum scroll + subtle edge fade ────── */
  .fin-card,
  .stu-list-wrap,
  .data-table-wrap,
  .kalpl-wrap,
  .kal-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Make generic wide tables that live inside .card or direct
     under .page-content horizontally scrollable (not vertical). */
  .card > .data-table,
  .card > table,
  .page-content > table,
  .table-responsive > table {
    display: table;
    width: 100%;
    min-width: 520px;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  /* Shrink inline min-width totals tables */
  table[style*="min-width:240px"],
  table[style*="min-width: 240px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ─── 8.9 Detail pages: hero headers that feel native ──── */
  .th-hero,
  .project-detail-header,
  .page-hero {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .th-hero-kpis { width: 100%; justify-content: space-between; }
  .th-hero-kpis .th-kpi-value { font-size: 15px; }
  .th-hero-kpis .th-kpi-label { font-size: 10px; }

  /* ─── 8.10 Lists that should feel like iOS rows ─────────── */
  .list-item-row,
  .kanban-card,
  .task-row,
  .deal-row,
  .stu-card,
  .project-list-item {
    border-radius: 12px !important;
  }
  .list-item-row:active,
  .kanban-card:active,
  .task-row:active,
  .stu-card:active,
  .project-list-item:active,
  .project-card:active,
  .card-link:active {
    transform: scale(0.99);
    transition: transform .08s ease;
  }

  /* ─── 8.11 Topbar polish: compact, no overflow ──────────── */
  .topbar {
    height: 48px;
    gap: 6px !important;
  }
  .topbar-actions .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 34px;
  }
  .topbar-actions .btn-primary svg { display: none; }
  /* Hide second-tier topbar labels */
  .topbar-actions .btn .btn-label-long { display: none; }

  /* ─── 8.12 Sticky elements respect safe-area + bottom nav ─ */
  .sticky-bottom,
  .bottom-sheet-cta {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* ─── 8.13 Scrollbars: hide on touch devices ────────────── */
  * { scrollbar-width: thin; }
  *::-webkit-scrollbar { width: 0; height: 0; }

  /* ─── 8.14 Kill inline width constraints commonly used ──── */
  [style*="width:280px"]:not(img):not(svg):not(video),
  [style*="width: 280px"]:not(img):not(svg):not(video),
  [style*="width:296px"]:not(img):not(svg):not(video),
  [style*="width: 296px"]:not(img):not(svg):not(video),
  [style*="width:340px"]:not(img):not(svg):not(video),
  [style*="width: 340px"]:not(img):not(svg):not(video),
  [style*="width:400px"]:not(img):not(svg):not(video),
  [style*="width: 400px"]:not(img):not(svg):not(video) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── 8.15 Chart containers: fill width, cap height ─────── */
  canvas,
  .chart-wrap,
  .chart-container {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ─── 8.16 Images and media: never overflow ─────────────── */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* ─── 8.17 Share/action popovers: full-width sheets ─────── */
  .sp-panel,
  .row-menu-dd,
  .dropdown-menu,
  .popover {
    max-width: calc(100vw - 24px) !important;
  }

  /* ─── 8.18 Touch feedback for all interactive rows ──────── */
  a, button, [role="button"], .clickable {
    -webkit-tap-highlight-color: transparent;
  }
  .tap-highlight:active {
    background: var(--surface-hover) !important;
  }

  /* ─── 8.19 KPI tiles feel like widgets ──────────────────── */
  .kpi-grid { gap: 8px !important; }
  .kpi-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .kpi-value { font-size: 20px !important; line-height: 1.1; }
  .kpi-label { font-size: 10.5px !important; }

  /* ─── 8.20 Hide desktop-only "Export"/"PDF" verbose labels  */
  .hide-on-mobile,
  .desktop-only { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   9. PHONE (≤480px) — extra-small refinements
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .page-content { padding: 12px !important; }
  .card-header { padding: 10px 12px; }
  .card-body   { padding: 10px 12px; }
  .page-title  { font-size: 15px !important; }

  /* Force single-column for all auto-fit grids */
  [style*="repeat(auto-fill"],
  [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* Even tighter KPI tiles */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }

  /* Fin-tbl: if still too wide, compress base padding */
  .fin-tbl th, .fin-tbl td { padding: 0.55rem 0.6rem; }
}

/* ═════════════════════════════════════════════════════════════
   10. MOBILE APP-FEEL — FINAL POLISH PASS
   Native-app experience: safe areas, sticky topbar, proper
   bottom-nav spacing, table→card flow, full-screen forms,
   thumb-zone CTAs, momentum scrolling everywhere.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ─── 10.1 Viewport + safe-area ─────────────────────────── */
  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;  /* kill rubber-band white flash */
  }

  /* Use dynamic viewport so the layout doesn't jump when the
     iOS/Android URL bar collapses on scroll. */
  .app-layout {
    min-height: 100dvh;
  }

  /* ─── 10.2 Topbar: sticky, blurred, 56px for comfortable
     thumb reach. Reposition hamburger visually left-most. ── */
  .topbar {
    height: 52px !important;
    padding: 0 14px !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    height: calc(52px + env(safe-area-inset-top, 0)) !important;
    gap: 10px !important;
    /* Stronger blur for true glass feel */
    background: rgba(247,247,248,0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }
  [data-theme="dark"] .topbar {
    background: rgba(17,17,19,0.72) !important;
  }

  .topbar-hamburger {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  .topbar-hamburger svg { width: 20px !important; height: 20px !important; }

  .page-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    flex: 1;
    text-align: left;
    margin: 0;
  }

  /* Notif bell + bug-report icon: keep tight */
  .topbar-actions .btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* Hide the separate "sidebar-toggle" (legacy) on mobile */
  .sidebar-toggle { display: none !important; }

  /* ─── 10.3 Sidebar drawer: full-height, soft shadow ────── */
  .sidebar {
    width: min(280px, 82vw) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,.22);
    border-right: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  /* Scrim: darker, works even without JS-added .active */
  .sidebar-overlay {
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Nav items in drawer: proper touch height + pill bg */
  .sidebar .nav-item {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    margin: 1px 8px !important;
    font-size: 14px !important;
  }
  .sidebar .nav-item.active {
    background: var(--accent-light);
    color: var(--accent);
  }
  .sidebar .nav-section-label {
    padding: 14px 16px 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em;
  }
  .sidebar .sidebar-user {
    padding: 12px 14px !important;
    min-height: 56px;
  }

  /* ─── 10.4 Main content: bottom spacing for nav bar ────── */
  .main-wrapper {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)) !important;
    margin-left: 0 !important;
  }
  .main-content {
    padding: 12px 14px 18px !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* ─── 10.5 Mobile bottom-nav: refined app look ─────────── */
  .mobile-bottom-nav {
    height: 62px !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
    background: rgba(247,247,248,0.78) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    /* Subtle top border and soft shadow for depth */
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 0 rgba(0,0,0,.02), 0 -8px 24px -12px rgba(0,0,0,.08);
  }
  [data-theme="dark"] .mobile-bottom-nav {
    background: rgba(17,17,19,0.78) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.04), 0 -8px 24px -12px rgba(0,0,0,.5);
  }
  .mbn-item {
    position: relative;
    padding: 6px 4px 5px !important;
    font-size: 10.5px !important;
    transition: color .15s ease, transform .12s ease;
  }
  .mbn-item svg {
    width: 22px !important;
    height: 22px !important;
    transition: transform .18s cubic-bezier(.3,1.4,.5,1);
  }
  .mbn-item.active {
    color: var(--accent) !important;
  }
  .mbn-item.active svg {
    stroke-width: 2.2;
    transform: translateY(-1px);
  }
  /* Active indicator dot below icon */
  .mbn-item.active::after {
    content: '';
    position: absolute;
    bottom: max(3px, env(safe-area-inset-bottom, 0));
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }
  .mbn-item:active { transform: scale(0.93); }

  /* Hide breadcrumb + theme-toggle on mobile (moved to drawer) */
  .topbar-breadcrumb { display: none !important; }
  .theme-toggle { display: none !important; }

  /* ─── 10.6 Page headers: app-style hero ─────────────────── */
  .page-header,
  .section-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px;
  }
  .page-header h1,
  .section-header h1,
  .section-header h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .page-header-subtitle,
  .section-header-sub {
    font-size: 13px !important;
    color: var(--text-3);
  }
  .page-header-actions {
    display: flex !important;
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }
  .page-header-actions .btn {
    flex: 1 1 auto;
    min-height: 42px;
    font-size: 13.5px;
  }
  .page-header-actions .btn-primary {
    flex: 1 1 100%;
    order: -1;
  }

  /* ─── 10.7 KPI grids → 2 columns with bigger feel ──────── */
  .kpi-grid,
  .stats-grid,
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    min-height: 72px;
  }
  .kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1 !important;
  }
  .kpi-label {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 4px;
  }

  /* ─── 10.8 List / project rows feel tappable ───────────── */
  .project-list-item,
  .list-item-row,
  .tk-task-row,
  .stu-card,
  .deal-row,
  .contact-row,
  .client-row,
  .talent-row {
    min-height: 64px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    position: relative;
  }
  .project-list-item:active,
  .list-item-row:active,
  .tk-task-row:active,
  .stu-card:active,
  .deal-row:active {
    transform: scale(0.992);
    background: var(--surface-hover) !important;
  }

  /* Row chevron for "drill-in" affordance */
  .project-list-item::after,
  .list-item-row.is-link::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-top: 1.6px solid var(--text-3);
    border-right: 1.6px solid var(--text-3);
    transform: rotate(45deg);
    flex-shrink: 0;
    align-self: center;
    opacity: .5;
  }

  /* ─── 10.9 Generic wide tables → card-stack on phone ───── */
  /* Tables in cards: horizontal scroll with snap + shadow hint */
  .card > .table-responsive,
  .card > div[class*="scroll"],
  .fin-card,
  .data-table-wrap,
  .kalpl-wrap,
  .kal-wrap {
    position: relative;
    scroll-snap-type: x proximity;
  }
  /* Right-edge fade to hint "more" */
  .table-responsive::after,
  .fin-card::after {
    content: '';
    position: sticky;
    right: 0; top: 0; bottom: 0;
    width: 18px;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    float: right;
    margin-top: -100%;
    height: 100%;
  }

  /* ─── 10.10 Forms: full-width, thumb-zone submit ──────── */
  form .form-group,
  form .form-field {
    margin-bottom: 12px !important;
  }
  form .form-label,
  form label:not(.switch):not(.checkbox) {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--text-2);
    margin-bottom: 5px !important;
    display: block;
  }
  /* 16px input prevents iOS zoom. Already declared; enforce. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
  select, textarea {
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
  }

  /* Form-submit bars pinned near bottom nav (safe area aware) */
  .form-submit-bar,
  .sticky-form-footer {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom, 0));
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    z-index: 60;
  }
  .form-submit-bar .btn { flex: 1 1 auto; min-height: 44px; }

  /* ─── 10.11 Modals: bottom-sheet with drag handle ─────── */
  .modal, .modal-sm, .modal-lg {
    max-height: calc(92dvh - env(safe-area-inset-top, 0)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Bug-report modal: full-width on phone */
  #bug-modal > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    align-self: flex-end;
    animation: _sheet-up .22s cubic-bezier(.32,1,.32,1) both;
  }
  #bug-modal {
    align-items: flex-end !important;
  }

  /* ─── 10.12 Filter/search bars: compact app chips ─────── */
  .filter-bar,
  .tk-bar,
  .fin-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .filter-form,
  .fin-search form {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .filter-form input[type="text"],
  .filter-form input[type="search"],
  .fin-search input[type="text"] {
    grid-column: 1 / -1;
  }
  .filter-form .form-select,
  .filter-form select { min-width: 0 !important; }
  .filter-form .btn,
  .fin-search .btn {
    grid-column: auto;
    min-height: 38px;
  }

  /* Segmented scope toggles (Aufgaben: Alle/Aktiv/Archiv) */
  .tk-scope,
  .vt-toggle,
  .segmented {
    width: 100%;
  }
  .tk-scope .tk-scope-btn {
    flex: 1;
    text-align: center;
    padding: 9px 8px !important;
    font-size: 11px !important;
  }

  /* ─── 10.13 Tab bars: momentum horizontal scroll + edge fade ── */
  .tab-bar,
  .proj-tab-bar,
  .prod-tab-bar,
  .subnav,
  .th-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px;
    /* Glass underline */
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg);
    position: sticky;
    top: calc(52px + env(safe-area-inset-top, 0));
    z-index: 40;
  }
  .tab-bar::after,
  .proj-tab-bar::after,
  .prod-tab-bar::after {
    content: '';
    min-width: 14px;
    flex: 0 0 auto;
  }
  .tab-btn,
  .proj-tab-btn,
  .prod-tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
    min-width: auto !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent !important;
  }
  .tab-btn.active,
  .proj-tab-btn.active,
  .prod-tab-btn.active {
    border-bottom-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* ─── 10.14 Detail hero: compact app-style header ───────── */
  .project-detail-header,
  .th-hero,
  .page-hero {
    padding: 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }
  .project-detail-title,
  .th-hero-title,
  .page-hero-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
  }
  .project-detail-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    width: 100%;
  }
  .project-detail-actions .btn {
    flex: 1 1 calc(50% - 3px);
    min-height: 40px;
    font-size: 13px;
  }
  .project-detail-actions .btn-primary {
    flex: 1 1 100%;
  }

  /* ─── 10.15 Tables: ensure readable text, clean borders ── */
  table {
    font-size: 13px !important;
  }
  table th {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* ─── 10.16 Dashboard-specific card tuning ──────────────── */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dashboard-col-main,
  .dashboard-col-side { gap: 12px !important; }

  /* ─── 10.17 Calendar: full agenda + compact chrome ──────── */
  .calendar-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .calendar-main > div:first-child {
    border-radius: 12px !important;
    padding: 8px !important;
  }
  /* Ensure the FullCalendar "Heute" button has room */
  .fc .fc-today-button { font-size: 11px !important; }

  /* ─── 10.18 Charts/cards in grids: single column ────────── */
  [style*="grid-template-columns:repeat"],
  .charts-grid,
  .content-grid,
  .two-col,
  [class*="col-2"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─── 10.19 iOS-style "pull-to-refresh" affordance kill
     (prevents accidental refresh while scrolling tables) ── */
  .no-pull-refresh {
    overscroll-behavior: contain;
  }

  /* ─── 10.20 Notifications panel: bottom-sheet ───────────── */
  .notif-panel {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom, 0)) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.2);
    overflow-y: auto;
  }
  .notif-panel::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    margin: 6px auto 10px;
    border-radius: 2px;
    background: var(--border-dark);
  }

  /* ─── 10.21 "More" (hamburger) button inside bottom nav ── */
  .mbn-menu {
    color: var(--text-3);
  }

  /* ─── 10.22 Scrollbars: hide everywhere on touch ────────── */
  *::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
  * { scrollbar-width: none !important; }

  /* ─── 10.23 Prevent layout shift from sticky toolbars ──── */
  .sticky-col,
  [class*="sticky"]:not(.topbar):not(.mobile-bottom-nav):not(.form-submit-bar):not(.sticky-form-footer) {
    position: static !important;
  }

  /* ─── 10.24 Native-feel active states for any card-link ─ */
  a.card,
  a[class*="-card"],
  a[class*="row"] {
    -webkit-tap-highlight-color: transparent;
  }
  a.card:active,
  a[class*="-card"]:active {
    transform: scale(0.994);
    transition: transform .08s ease;
  }

  /* ─── 10.25 Hide typical "Export", "Drucken" verbose labels
     on phones where topbar is cramped ─────────────────────── */
  .topbar-actions .btn:not(.btn-icon) span.label-long,
  .topbar-actions .btn:not(.btn-icon) .btn-label-long,
  .topbar-actions .btn.hide-label-mobile span {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   11. LANDSCAPE phone / narrow width — reduce vertical padding
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { height: 44px !important; }
  .main-content { padding-top: 8px !important; padding-bottom: 8px !important; }
  .mobile-bottom-nav { height: 50px !important; }
  .main-wrapper {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0)) !important;
  }
  .mbn-item svg { width: 18px !important; height: 18px !important; }
  .mbn-item span { font-size: 9.5px !important; }
}

/* ═════════════════════════════════════════════════════════════
   12. "PWA installed" refinements — when running as standalone
   iOS/Android adds env(safe-area-inset-top) we want to respect.
   ═════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .topbar {
    padding-top: env(safe-area-inset-top) !important;
    height: calc(var(--topbar-h, 52px) + env(safe-area-inset-top)) !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   13. Skeleton shimmer — subtle loading state
   ═════════════════════════════════════════════════════════════ */
@keyframes _shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface-hover) 50%,
    var(--surface) 100%);
  background-size: 200% 100%;
  animation: _shimmer 1.4s linear infinite;
  border-radius: 8px;
}

/* ═════════════════════════════════════════════════════════════
   13b. Pipeline board — horizontal swipe kanban on phone
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pipeline-board {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    margin-left: -14px;
    margin-right: -14px;
    padding: 4px 14px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .pipeline-col {
    flex: 0 0 82vw;
    max-width: 320px;
    scroll-snap-align: start;
    min-height: auto !important;
    border-radius: 14px !important;
  }
  .pipeline-col-header { padding: 12px 14px !important; }
  .pipeline-col-body   { padding: 10px !important; max-height: 60vh; overflow-y: auto; }
  .pipeline-card {
    border-radius: 10px !important;
    padding: 12px !important;
  }
  .pipeline-card:active { transform: scale(.994); transition: transform .1s ease; }

  /* Kanban view in project detail: horizontal swipe too */
  .kanban-board {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    margin-left: -14px;
    margin-right: -14px;
    padding: 4px 14px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    flex: 0 0 82vw;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Inline-defined grid repeat for kanban → flex */
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   14. MOBILE: responsive data-table → card conversion
   Add class "mobile-card-table" to any <table> you want to
   stack on phones. Uses data-label attr for the column label.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  table.mobile-card-table,
  table.mobile-card-table thead,
  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td {
    display: block;
    width: 100%;
  }
  table.mobile-card-table thead {
    position: absolute;
    left: -9999px;
  }
  table.mobile-card-table tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--surface);
  }
  table.mobile-card-table td {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
    padding: 5px 0;
    border: none !important;
    font-size: 13px;
    align-items: center;
  }
  table.mobile-card-table td::before {
    content: attr(data-label);
    font-family: 'Geist Mono', monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    font-weight: 600;
  }
  table.mobile-card-table td:first-child {
    font-weight: 600;
    padding-top: 2px;
  }
}

/* ═════════════════════════════════════════════════════════════
   15. MOBILE FORMS — Finance Edit UIs
   Shared by invoice_form.html, quote_form.html, po_form.html,
   recurring_form.html — all use the .inv-* class vocabulary.
   Line-items table → stacked card per row with inline grid for
   qty/unit/price, big total + always-visible delete below.
   Sticky bottom submit bar above bottom-nav.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Page chrome */
  body:has(.inv-grid) .main-content { padding: 0 !important; }

  .inv-grid {
    gap: 0 !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Card rhythm: edge-to-edge cards with gaps */
  .inv-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 8px !important;
  }
  .inv-card-head { padding: 12px 14px !important; }
  .inv-card-body { padding: 14px !important; }

  /* All inline row grids stack */
  .inv-row-2,
  .inv-row-3,
  .inv-row-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Line items: kill table, use block cards ── */
  .inv-items-wrap {
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .inv-items-table,
  .inv-items-table thead,
  .inv-items-table tbody,
  .inv-items-table tr,
  .inv-items-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .inv-items-table thead,
  .inv-items-table colgroup { display: none !important; }

  .inv-items-table tbody tr.inv-item-row {
    position: relative;
    padding: 12px 14px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface);
  }
  .inv-items-table tbody tr.inv-item-row:hover {
    background: var(--surface) !important;
  }
  .inv-items-table td {
    padding: 0 !important;
    border: none !important;
    width: auto !important;
  }
  .inv-items-table td:first-child,
  .inv-items-table td:last-child { padding: 0 !important; }

  /* Row 1: description (full width) */
  .inv-items-table tr.inv-item-row td:nth-child(1) {
    display: block !important;
    margin-bottom: 10px;
  }
  .inv-items-table tr.inv-item-row td:nth-child(1) input[type=text] {
    font-size: 15px !important;
    padding: 10px 12px !important;
    min-height: 44px;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    border-radius: 10px !important;
    margin-bottom: 6px;
    width: 100% !important;
  }
  .inv-items-table tr.inv-item-row td:nth-child(1) .inv-item-note {
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 36px;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  /* Row 2: qty + unit side-by-side; price full-width below */
  .inv-items-table tr.inv-item-row td:nth-child(2),
  .inv-items-table tr.inv-item-row td:nth-child(3) {
    display: inline-block !important;
    width: calc(50% - 4px) !important;
    vertical-align: top;
  }
  .inv-items-table tr.inv-item-row td:nth-child(2) { margin-right: 8px; }
  .inv-items-table tr.inv-item-row td:nth-child(4) {
    display: block !important;
    width: 100% !important;
    margin-top: 8px;
  }

  /* Micro-labels above small inputs */
  .inv-items-table tr.inv-item-row td:nth-child(2)::before { content: 'Menge'; }
  .inv-items-table tr.inv-item-row td:nth-child(3)::before { content: 'Einheit'; }
  .inv-items-table tr.inv-item-row td:nth-child(4)::before { content: 'Einzelpreis'; }
  .inv-items-table tr.inv-item-row td:nth-child(2)::before,
  .inv-items-table tr.inv-item-row td:nth-child(3)::before,
  .inv-items-table tr.inv-item-row td:nth-child(4)::before {
    display: block;
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-bottom: 4px;
  }
  .inv-items-table tr.inv-item-row td:nth-child(2) input,
  .inv-items-table tr.inv-item-row td:nth-child(3) input,
  .inv-items-table tr.inv-item-row td:nth-child(4) input {
    font-size: 16px !important;
    padding: 10px 12px !important;
    min-height: 44px;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    border-radius: 10px !important;
    width: 100% !important;
    text-align: right !important;
  }
  .inv-items-table tr.inv-item-row td:nth-child(3) input {
    text-align: left !important;
  }
  /* Einzelpreis input: show € suffix via pseudo-label */
  .inv-items-table tr.inv-item-row td:nth-child(4) {
    position: relative;
  }
  .inv-items-table tr.inv-item-row td:nth-child(4)::after {
    content: '€';
    position: absolute;
    right: 14px;
    bottom: 11px;
    font-size: 14px;
    color: var(--text-3);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .inv-items-table tr.inv-item-row td:nth-child(4) input {
    padding-right: 28px !important;
  }

  /* Row 3: total + delete, dashed separator */
  .inv-items-table tr.inv-item-row td.item-total {
    display: inline-block !important;
    width: calc(100% - 50px) !important;
    margin-top: 10px;
    padding-top: 10px !important;
    border-top: 1px dashed var(--border) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: left !important;
    vertical-align: middle;
  }
  .inv-items-table tr.inv-item-row td.item-total::before {
    content: 'Gesamt ';
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-right: 6px;
  }
  .inv-items-table tr.inv-item-row td:last-child {
    display: inline-block !important;
    width: 42px !important;
    margin-top: 10px;
    padding-top: 10px !important;
    border-top: 1px dashed var(--border) !important;
    vertical-align: middle;
    text-align: right;
  }

  /* Delete button always visible on mobile */
  .inv-items-table .inv-del-btn {
    opacity: 1 !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(239,68,68,.08);
    color: #ef4444 !important;
    border-radius: 10px;
  }

  /* Hide drag handles (no touch DnD) */
  .inv-drag-handle,
  .inv-section-drag { display: none !important; }

  /* ── Section rows ── */
  .inv-items-table tr.inv-section-row {
    padding: 8px 0 !important;
    background: var(--bg-2) !important;
  }
  .inv-items-table tr.inv-section-row td {
    display: block !important;
    padding: 8px 14px !important;
    background: var(--bg-2) !important;
  }
  .inv-items-table tr.inv-section-row .inv-section-title {
    font-size: 15px !important;
    min-height: 40px;
    padding: 6px 10px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    width: 100%;
  }

  /* Section subtotal */
  .inv-items-table tr.inv-section-subtotal {
    padding: 10px 14px !important;
    background: var(--bg-2) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .inv-items-table tr.inv-section-subtotal td {
    display: inline !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
  }
  .inv-items-table tr.inv-section-subtotal td:last-child {
    display: none !important;
  }
  .inv-items-table tr.inv-section-subtotal td.item-total {
    font-size: 15px !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: auto !important;
    margin-left: auto;
  }
  .inv-items-table tr.inv-section-subtotal td.item-total::before {
    content: '';
    margin: 0;
  }

  /* Add-row bar */
  .inv-add-bar {
    padding: 12px 14px !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .inv-add-bar .inv-product-sel {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 10px;
  }
  .inv-add-bar .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    font-size: 13.5px !important;
  }

  /* Totals row */
  .inv-totals {
    padding: 14px !important;
    justify-content: stretch !important;
  }
  .inv-totals-inner { width: 100%; min-width: 0 !important; }
  .inv-totals-row { font-size: 14px !important; }
  .inv-totals-row.gross { font-size: 1.1rem !important; }

  /* Entity picker (client/project) */
  .entity-picker-trigger {
    font-size: 15px !important;
    padding: 11px 12px !important;
    min-height: 44px;
    border-radius: 10px !important;
  }
  .entity-picker-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    top: 70px !important;
    max-height: 70vh;
  }

  /* Card inputs: 16px for iOS */
  .inv-card-body select,
  .inv-card-body input[type=text],
  .inv-card-body input[type=date],
  .inv-card-body input[type=number],
  .inv-notes {
    font-size: 16px !important;
    padding: 11px 12px !important;
    min-height: 44px;
    border-radius: 10px !important;
  }
  .inv-notes { min-height: 84px; }

  /* Summary card: static, full-width, above bottom submit */
  .inv-summary-card {
    position: static !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    margin: 8px 12px 90px !important;
  }
  .inv-summary-head { padding: 12px 14px !important; }
  .inv-summary-body { padding: 14px !important; }
  .inv-summary-gross {
    font-size: 1.9rem !important;
    margin-bottom: 12px !important;
  }
  .inv-summary-total-label {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .inv-summary-line { font-size: 13px !important; }
  .inv-summary-breakdown { gap: 6px !important; padding-top: 10px !important; }

  /* ── Sticky bottom submit bar ── */
  .inv-submit-bar {
    position: fixed !important;
    left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom, 0));
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    /* Leave ~58px on the right for the chat FAB (we also push it up via JS,
       but keep a bit of breathing room in case the FAB is wider) */
    padding-right: 12px !important;
    background: rgba(247,247,248,.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border);
    margin: 0 !important;
    z-index: 80;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  [data-theme="dark"] .inv-submit-bar {
    background: rgba(17,17,19,.94);
  }
  .inv-submit-bar .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px !important;
    font-size: 14px !important;
    padding: 11px 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Vorschau + Abbrechen: both collapse to icon-only 46px square */
  .inv-submit-bar .btn-outline,
  .inv-submit-bar .btn-ghost {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    overflow: hidden;
    position: relative;
    color: transparent !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Draw an "X" for ghost buttons that lack an SVG (Abbrechen) */
  .inv-submit-bar .btn-ghost:not(:has(svg))::before,
  .inv-submit-bar .btn-ghost:not(:has(svg))::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 2px;
    background: var(--text-2);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .inv-submit-bar .btn-ghost:not(:has(svg))::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .inv-submit-bar .btn-outline svg,
  .inv-submit-bar .btn-ghost svg {
    font-size: 14px;
    margin: 0 !important;
    stroke: var(--text-2) !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Card step badges */
  .inv-step { width: 20px !important; height: 20px !important; font-size: 10px !important; }
  .inv-card-title { font-size: 11px !important; letter-spacing: .1em !important; }

  /* Kill inline 18px spacers */
  .inv-card [style*="height:18px"],
  .inv-card [style*="height: 18px"] { display: none !important; }

  /* Push last card content above the fixed submit bar */
  form:has(.inv-submit-bar) { padding-bottom: 80px; }
}

/* Tiny phones */
@media (max-width: 380px) {
  .inv-add-bar .btn {
    font-size: 12.5px !important;
    padding: 10px 8px !important;
  }
  .inv-items-table tbody tr.inv-item-row { padding: 10px 12px !important; }
}

/* ═════════════════════════════════════════════════════════════
   16. FINANCE — invoice_detail / quote_detail / po_detail
   Lineitem-Tabellen lesen mit fixen th-Breiten (110px) auf Mobile
   die ganze Tabelle so breit, dass horizontaler Scroll entsteht.
   Auf <=480px die Spaltenbreiten freigeben + Padding straffen.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fin-tbl.fin-lineitems th[style*="width:110px"],
  .fin-tbl.fin-lineitems th[style*="width: 110px"],
  .fin-tbl.fin-lineitems th[style*="width:80px"],
  .fin-tbl.fin-lineitems th[style*="width: 80px"],
  .fin-tbl.fin-lineitems th[style*="width:70px"],
  .fin-tbl.fin-lineitems th[style*="width: 70px"] {
    width: auto !important;
  }
  .fin-tbl.fin-lineitems th,
  .fin-tbl.fin-lineitems td { padding: 0.5rem 0.55rem !important; }
}

/* ═════════════════════════════════════════════════════════════
   17. MODALS — auf Phones <=480px immer full-width Bottom-Sheet
   Viele Modals nutzen inline max-width:520/560/460/420.
   Ohne Override ragen Inhalte raus oder Margin macht es zu eng.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Generic catch: any modal-overlay child with inline max-width */
  .modal-overlay > .modal,
  .modal-overlay > div[style*="max-width"] {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    align-self: flex-end;
    max-height: 92dvh;
    overflow-y: auto;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-overlay > .modal .modal-header,
  .modal-overlay > div[style*="max-width"] > .modal-header {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    border-bottom: 1px solid var(--border);
  }

  /* Inline-styled "panels" with explicit max-width inside content (not modals)
     should also expand to fit narrow viewport. */
  .hub-tab-panel > div[style*="max-width:460px"],
  .hub-tab-panel > div[style*="max-width: 460px"],
  .hub-tab-panel > div[style*="max-width:520px"],
  .hub-tab-panel > div[style*="max-width: 520px"] {
    max-width: 100% !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   18. ADMIN + FINANCE TABLES — generische Mobile-Polish
   .adm-table (admin/users, roles, shares), .bv-table (budgets),
   .fc-table (forecast) haben kein eigenes Mobile-Styling.
   Wrap in scrollbares Container-Pattern + Padding straffen.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .adm-table-wrap,
  .bv-table-wrap,
  .fc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .adm-table,
  .bv-table,
  .fc-table {
    font-size: 12px;
    min-width: 520px;
  }
  .adm-table thead th,
  .adm-table tbody td,
  .bv-table thead th,
  .bv-table tbody td,
  .fc-table thead th,
  .fc-table tbody td {
    padding: 7px 8px !important;
  }
  /* Falls Tabellen direkt unter .card oder .page-content stehen ohne
     Wrapper, dann eigenständig scrollbar machen */
  .card > .adm-table,
  .card > .bv-table,
  .card > .fc-table,
  .page-content > .adm-table,
  .page-content > .bv-table,
  .page-content > .fc-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═════════════════════════════════════════════════════════════
   19. AUTH — Login + Profile (MFA, Magic Link, Aktivieren)
   .auth-card hat 40px Padding + max-width 420 — auf <=480px
   tighter machen damit Inputs nicht eingeengt sind.
   MFA-Forms: side-by-side Input+Button bricht — als Stack.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .auth-page { padding: 12px; align-items: flex-start; padding-top: max(40px, env(safe-area-inset-top, 0)); }
  .auth-card { padding: 24px 20px; border-radius: 14px; }
  .auth-logo { margin-bottom: 18px; }
  .auth-title { font-size: 18px; }
  .auth-sub   { font-size: 13px; margin-bottom: 18px; }

  /* MFA password+button-Forms: stacken statt nebeneinander */
  .mfa-pwd-input {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Profile-Page-spezifische inline flex-Forms zum Stacken bringen */
  form[style*="display:inline-flex"][style*="gap:8px"][style*="align-items:center"] {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }
  form[style*="display:inline-flex"][style*="gap:8px"][style*="align-items:center"] > .btn {
    width: 100%;
    justify-content: center;
  }
}