/* ============================================================
   DocVault Desktop — Ergänzung für schmale Fenster
   Handys nutzen die eigene Mobil-Oberfläche (m.html).
   Diese Regeln hier greifen nur, wenn die Desktop-Ansicht in
   einem schmalen Fenster läuft (verkleinertes Browserfenster
   oder bewusst gewählte Desktop-Ansicht am Tablet).
   ============================================================ */

@media (max-width: 860px) {
  .auth-card { width: 90vw; padding: 28px 20px; }

  .app-layout { flex-direction: column; height: 100dvh; }

  .sidebar {
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: env(safe-area-inset-top, 0) 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sidebar-logo { padding: 6px 8px; flex-shrink: 0; }
  .logo-text .text { font-size: 14px; }
  .logo-sub { display: none; }
  .nav-section { display: none; }
  .nav-item {
    flex-shrink: 0;
    margin: 3px 2px;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-item .icon { font-size: 14px; width: auto; }
  .sidebar-bottom {
    margin-top: 0;
    margin-left: auto;
    border-top: none;
    display: flex;
    padding: 0 4px;
    flex-shrink: 0;
  }

  .main-content { padding-top: 8px; overflow-y: auto; }
  .content-header { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  .content-title { font-size: 16px; }
  .content-body { padding: 12px; }
  .doc-toolbar { padding: 8px 12px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
  .modal { width: 94vw; padding: 16px; max-height: 92vh; }
  .modal-wide { width: 94vw; }
  .doc-item { padding: 10px; flex-wrap: wrap; }
  .doc-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
  .btn { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 480px) {
  .auth-card { padding: 24px 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}