/**
 * Mobile / Touch – Ergänzungen für Admin, Portal, Login, Legal, PDF-Vorschau
 * Breakpoints: 900px (Tablet/Phone), 640px (Phone), 480px (schmal)
 */

@media (max-width: 900px) {
  /* iOS: kein Auto-Zoom bei Fokus */
  input,
  select,
  textarea,
  .field-input {
    font-size: 16px;
  }

  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 38px;
  }

  .btn-ghost,
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* ─── Seitenkopf & Toolbar ─── */
  .page-header-enhanced.page-header--compact h1 {
    font-size: 1.15rem;
  }

  .page-toolbar,
  .contacts-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
  }

  .page-toolbar::-webkit-scrollbar,
  .contacts-toolbar::-webkit-scrollbar {
    display: none;
  }

  .page-toolbar .btn,
  .contacts-toolbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .page-toolbar-actions,
  .contacts-toolbar-actions {
    margin-left: 0;
    flex: 0 0 auto;
  }

  .page-toolbar-actions form,
  .contacts-toolbar-actions form {
    display: inline-flex;
  }

  /* ─── Filter-Tabs (Rechnungen, Angebote …) ─── */
  .filter-tabs {
    flex-wrap: nowrap;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-tabs a {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
  }

  /* ─── Tabellen ─── */
  .card > .table-wrap::before,
  .settings-card > .table-wrap::before {
    content: '← Wischen für alle Spalten →';
    display: block;
    font-size: 0.72rem;
    color: var(--accent);
    padding: 0.35rem 0.75rem;
    margin: 0.5rem 0.85rem 0;
    text-align: center;
    background: var(--accent-soft);
    border: none;
    border-radius: 999px;
    width: fit-content;
    max-width: calc(100% - 1.7rem);
    position: static;
  }

  .table-wrap {
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .list-table th,
  .list-table td,
  .data-table th,
  .data-table td {
    vertical-align: top;
  }

  .card > .table-wrap .list-table thead th,
  .table-wrap .list-table thead th,
  .table-wrap .data-table thead th {
    position: sticky;
    top: calc(var(--topbar-h, 56px) + 2.1rem);
    z-index: 5;
    background: #f8faf9;
    box-shadow: 0 1px 0 var(--border-light);
  }

  /* Filter-Tabs beim Scrollen unter der Topbar fixieren */
  .list-card > .filter-tabs,
  .card > .filter-tabs {
    position: sticky;
    top: var(--topbar-h, 56px);
    z-index: 45;
    background: var(--surface, #fff);
    box-shadow: 0 1px 0 var(--border-light);
  }

  .list-table {
    min-width: 640px;
  }

  .list-table th,
  .list-table td {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
  }

  .card > .table-wrap .list-table th:first-child,
  .card > .table-wrap .list-table td:first-child {
    padding-left: 0.85rem;
  }

  .list-table td.actions,
  .list-table .col-actions {
    min-width: 0;
    vertical-align: middle;
  }

  .invoice-list-table .row-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    max-width: 11rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .invoice-list-table .row-actions::-webkit-scrollbar {
    display: none;
  }

  .list-table .table-action,
  .list-table .inline-action-form {
    display: inline-flex;
    width: auto;
    margin: 0 0 0 0.25rem;
  }

  .list-table .inline-action-form .table-action {
    width: auto;
    text-align: center;
    margin: 0;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
  }

  .list-table .table-action {
    display: inline-flex;
    text-align: center;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
  }

  .table-scroll-hint {
    display: none;
  }

  /* Hinweis über ::before auf .table-wrap */

  /* ─── Karten & Formulare ─── */
  .card-head {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  .card-pad {
    padding: 1rem;
  }

  .card-head .search-box {
    width: 100%;
    margin: 0;
  }

  .card-head .search-box input {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .form-actions .btn,
  .form-actions a.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .field-with-action {
    flex-direction: column;
    align-items: stretch;
  }

  .field-with-action .btn {
    width: 100%;
  }

  .period-toolbar,
  .period-toolbar--wide {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .period-toolbar label,
  .period-toolbar--wide label {
    width: 100%;
  }

  .period-toolbar input,
  .period-toolbar select,
  .period-toolbar--wide input,
  .period-toolbar--wide select {
    width: 100%;
  }

  .period-toolbar .btn,
  .period-toolbar a.btn {
    width: 100%;
    justify-content: center;
  }

  /* ─── Dashboard ─── */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .quick-action-btn {
    justify-content: center;
    text-align: center;
    min-height: 44px;
    font-size: 0.82rem;
    padding: 0.65rem 0.5rem;
  }

  .hint-stack .hint {
    font-size: 0.85rem;
  }

  /* ─── Beleg-Banner ─── */
  .doc-status-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.75rem 1rem;
  }

  .doc-status-banner-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* ─── Admin ─── */
  .admin-page-shell {
    max-width: 100%;
  }

  .admin-tab-intro {
    flex-direction: column;
    padding: 1rem;
    gap: 0.85rem;
  }

  .admin-tab-chips {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .admin-tab-chips::-webkit-scrollbar {
    display: none;
  }

  .admin-tab-chip {
    flex: 0 0 auto;
  }

  .admin-check-row {
    align-items: flex-start;
  }

  .dup-group-card {
    padding: 0.85rem;
    overflow: hidden;
  }

  .dup-group-head {
    word-break: break-word;
    font-size: 0.88rem;
  }

  .dup-group-card .btn {
    width: 100%;
  }

  /* ─── Banking ─── */
  .bank-grid,
  .bank-connect-grid,
  .bank-match-grid {
    grid-template-columns: 1fr;
  }

  .bank-popular-chips,
  .bank-country-chips {
    flex-wrap: wrap;
  }

  .bank-inst-results {
    max-height: 280px;
  }

  .bank-inst-item {
    min-height: 48px;
  }

  .bank-live-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .bank-live-actions .btn,
  .bank-live-actions a.btn {
    width: 100%;
    justify-content: center;
  }

  .bank-tx-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bank-tx-actions .btn {
    width: 100%;
  }

  /* ─── System / Health / Update ─── */
  .sys-log-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .sys-log-summary-actions {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .sys-log-summary-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
  }

  .sys-check-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .sys-improve-grid,
  .roadmap-list {
    grid-template-columns: 1fr;
  }

  /* ─── Kontakte ─── */
  .contact-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .contact-new-details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .contacts-table .col-email {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ─── Rechnungs-Editor Sidebar ─── */
  .invoice-actions .btn-block {
    min-height: 44px;
  }

  .invoice-summary-card .summary-total {
    font-size: 1.05rem;
  }

  .reminder-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .reminder-action-row .btn,
  .reminder-action-row form {
    width: 100%;
  }

  .reminder-send-form {
    width: 100%;
  }

  .quote-links-box input {
    font-size: 14px;
  }

  /* ─── Produkte, Nutzer, Journal ─── */
  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .journal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* ─── Steuerberater / Export ─── */
  .steuer-export-grid,
  .export-options {
    grid-template-columns: 1fr;
  }

  /* ─── Cron ─── */
  .cron-url-copy {
    font-size: 0.72rem;
  }

  .cron-form-actions {
    flex-direction: column;
  }

  .cron-form-actions .btn {
    width: 100%;
  }

  /* ─── Alerts & Badges ─── */
  .alert {
    font-size: 0.88rem;
    padding: 0.75rem 0.85rem;
  }

  .empty-state {
    padding: 2rem 1rem;
  }

  .panel-grid,
  .feature-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }

  .kpi-row {
    grid-template-columns: 1fr;
  }

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

  .sys-log-summary-actions .btn {
    flex: 1 1 100%;
  }

  .page-header-actions .btn {
    min-width: 100%;
  }

  .list-table {
    min-width: 580px;
  }

  .cell-doc {
    flex-wrap: wrap;
  }

  .public-welcome {
    flex-direction: column;
    padding: 1rem;
  }

  .portal-download-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .portal-download-actions .public-btn {
    width: 100%;
    justify-content: center;
  }

  .public-doc-pay-form {
    grid-column: 1 / -1;
    width: 100%;
  }

  .public-doc-pay-form .public-btn {
    width: 100%;
  }

  .public-footer-legal {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .content {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .topbar-title {
    max-width: 42vw;
  }

  .filter-tabs a {
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
  }

  .mobile-invoice-bar,
  .mobile-action-bar {
    flex-wrap: wrap;
  }

  .mobile-invoice-bar .btn,
  .mobile-action-bar .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/* Dunkelmodus – Mobile */
@media (max-width: 900px) {
  html.theme-dark .card > .table-wrap::before,
  html.theme-dark .table-scroll-hint {
    background: var(--surface-elevated);
    border-color: var(--border);
    color: var(--muted);
  }

  html.theme-dark .card > .table-wrap .list-table thead th,
  html.theme-dark .table-wrap .list-table thead th,
  html.theme-dark .table-wrap .data-table thead th {
    background: var(--surface-elevated);
    box-shadow: 0 1px 0 var(--border);
  }

  html.theme-dark .list-card > .filter-tabs,
  html.theme-dark .card > .filter-tabs {
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border);
  }
}