/* classic-layout.css - Wird nur aktiv, wenn body.classic-layout gesetzt ist */

/* Im klassischen Layout wird der Wrapper zu einem Flex-Container,
   der die Seitenleiste und den Hauptinhalt nebeneinander anordnet. */
   body.classic-layout .main-wrapper {
    display: flex;
    align-items: flex-start; /* Stellt sicher, dass die Spalten oben beginnen */
    gap: var(--space-6);
  }
  
  /* Die Filterleiste wird zur linken Seitenleiste mit fester Breite.
     'position: sticky' sorgt dafür, dass sie beim Scrollen sichtbar bleibt. */
  body.classic-layout .filter-panel {
    width: 380px;
    flex-shrink: 0; /* Verhindert, dass die Seitenleiste schrumpft */
    position: sticky;
    top: 20px; 
    max-height: calc(100vh - 40px); /* Verhindert, dass die Leiste aus dem Fenster ragt */
    overflow-y: auto; /* Fügt eine Scrollbar hinzu, falls der Inhalt zu lang ist */
  }
  
  /* Wrapper für Tabelle und Paginierung */
  body.classic-layout .table-area-wrapper {
    flex-grow: 1;
    width: calc(100% - 380px - var(--space-6)); /* Nimmt den Rest der Breite ein */
    display: flex;
    flex-direction: column;
  }
  
  /* Die Tabelle nimmt den verfügbaren Platz im neuen Wrapper ein. */
  body.classic-layout .responsive-table {
    flex-grow: 1;
    width: 100%; 
    max-height: none;
    overflow: visible;
  }
  
  /* Kleinere Anpassungen für eine bessere Darstellung im klassischen Layout */
  body.classic-layout .results-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  body.classic-layout .action-buttons {
    justify-content: flex-start;
  }
  
  body.classic-layout .header-flex {
    margin-bottom: var(--space-6);
  }
  
  /* KORREKTUR: Erzwingt ein einspaltiges Layout für alle Filter in der Classic-Ansicht */
  body.classic-layout .filter-row {
      grid-template-columns: 1fr;
  }
  
  
  /* Responsivität: Auf kleineren Bildschirmen (Tablets/Handys) wird das
     klassische Layout wieder zu einem einspaltigen Layout wie das moderne. */
  @media (max-width: 1024px) {
    body.classic-layout .main-wrapper {
      display: block; /* Layout wieder untereinander anordnen */
    }
  
    body.classic-layout .filter-panel {
      width: 100%;
      position: static; /* Sticky-Positionierung aufheben */
      margin-bottom: var(--space-6);
      max-height: none;
    }
  
    body.classic-layout .table-area-wrapper {
      width: 100%;
    }
  
    body.classic-layout .responsive-table {
      width: 100%;
      overflow: auto;
    }
  
    /* Auf Tablets werden die Filter wieder im Grid angezeigt, wie in der Modern-Ansicht */
    body.classic-layout .filter-row:first-child {
      grid-template-columns: repeat(2, 1fr);
    }
  
    body.classic-layout .filter-row:last-child {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (max-width: 768px) {
      /* Auf sehr kleinen Bildschirmen werden auch die Detail-Filter untereinander gestapelt */
      body.classic-layout .filter-row:last-child {
          grid-template-columns: repeat(2, 1fr);
      }
  }
  
  
  /* Stellt sicher, dass die Tabellenüberschriften im klassischen Layout haften bleiben. */
  body.classic-layout .responsive-table th {
    position: -webkit-sticky; /* Für Safari-Browser */
    position: sticky;
    top: 0;
    z-index: 2; /* Stellt sicher, dass die Überschriften über dem Tabelleninhalt liegen */
  }