/*
 * Fallwerk – Layout (mobile-first)
 * Breakpoints (verbindlich, nur hier verwendet): 640px, 1024px, 1440px.
 */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto auto 1fr auto;
}

/* Kopfzeile */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.brand__name {
  display: block;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  color: var(--color-primary);
}

.brand__tagline {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.app-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.user-info {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.protected-lock-action {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* Navigation */
.sidebar {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border-bottom: var(--border-width) solid var(--color-border);
}

.nav-collapsible .sidebar:not(.is-open) {
  display: none;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--target-min-size);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  border-radius: var(--radius-control);
}

a.nav-item {
  color: var(--color-link);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
}

a.nav-item[aria-current="page"] {
  color: var(--color-nav-current-fg);
  background: var(--color-nav-current-bg);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.nav-item[aria-disabled="true"] {
  cursor: not-allowed;
}

.nav-item__hint {
  font-size: var(--font-size-small);
}

/*
 * Hauptbereich (feste Rasterzeile, auch wenn die Navigation eingeklappt ist) und zentraler Inhaltsrahmen.
 * Der Hauptbereich selbst wächst mit dem Fenster; den Inhalt begrenzt der Rahmen (.view-frame) auf eine der drei Breitenstufen und
 * zentriert ihn. Statusleiste, Hinweise und Ansicht stehen im selben Rahmen und teilen so dieselben Ausrichtungslinien.
 * Standard ist die Arbeitsbreite; schmal und breit setzt data-layout am Ansichtsrahmen (Zuordnung: layoutOf in modules/akten/index.js).
 */
.main {
  --view-width: var(--layout-width-work);
  grid-row: 3;
  width: 100%;
  min-width: 0;
  padding: var(--space-5) var(--space-4);
}

.main:has(> [data-layout="narrow"]) {
  --view-width: var(--layout-width-narrow);
}

.main:has(> [data-layout="wide"]) {
  --view-width: var(--layout-width-wide);
}

.view-frame {
  width: 100%;
  max-width: var(--view-width);
  margin-inline: auto;
}

.page-intro {
  display: grid;
  gap: var(--space-3);
  max-width: var(--reading-max-width);
  margin-bottom: var(--space-5);
}

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-card);
}

.section {
  display: grid;
  gap: var(--space-4);
}

/* Statusbereich (Laden, Erfolg, Fehler) – Zustand nie nur über Farbe */
.status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid currentcolor;
  border-radius: var(--radius-surface);
}

.status--loading {
  color: var(--color-info);
  background: var(--color-info-soft);
}

.status--success {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.status--error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.status__symbol,
.status__text {
  font-weight: var(--font-weight-strong);
}

.status__detail {
  grid-column: 2;
  color: var(--color-text);
}

.status .button {
  grid-column: 2;
  justify-self: start;
}

/* Fußbereich */
.app-footer {
  grid-row: 4;
  padding: var(--space-4);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
}

/* Tablet: reduzierte Navigation als Leiste, zwei Spalten */
@media (min-width: 640px) {
  .menu-toggle {
    display: none !important;
  }

  .nav-collapsible .sidebar:not(.is-open) {
    display: block;
  }

  .app-header,
  .sidebar,
  .app-footer {
    padding-inline: var(--space-5);
  }

  .nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .main {
    padding: var(--space-6) var(--space-5);
  }

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

/* Desktop: feste linke Navigation, drei Spalten */
@media (min-width: 1024px) {
  .app {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .app-header {
    grid-column: 1 / -1;
  }

  .sidebar {
    padding-block: var(--space-5);
    border-bottom: 0;
    border-right: var(--border-width) solid var(--color-border);
  }

  .nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .sidebar {
    grid-row: 2;
    grid-column: 1;
  }

  .main {
    grid-row: 2;
    grid-column: 2;
  }

  .app-footer {
    grid-row: 3;
    grid-column: 1 / -1;
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Große Bildschirme: mehr Luft */
@media (min-width: 1440px) {
  .main {
    padding: var(--space-7) var(--space-6);
  }
}