/* F.R.I.D.A.Y. Vault: Mobilkorrekturen für den Web-Tresor.
   Der Web-Tresor stellt Filterleiste und Liste nebeneinander; auf einem Handydisplay
   bleiben der Filterleiste rund 60 px. Die Regeln greifen über die Angular-Selektoren,
   nicht über Tailwind-Klassen (die Klassennamen wechseln mit jedem Upstream-Build). */

@media (max-width: 820px) {
  div:has(> app-vault-filter) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
  }
  app-vault-filter,
  div:has(> app-vault-filter) > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  app-vault-filter {
    border-bottom: 1px solid var(--fv-divider, #2b5268);
    padding-bottom: 10px;
    max-height: 46vh;
    overflow-y: auto;
  }
  app-vault-onboarding [class*="tw-flex"]:not([class*="flex-col"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  app-vault-onboarding [class*="tw-flex"] > * {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  bit-table table {
    display: block;
    overflow-x: auto;
  }
}