/**
 * Design-Fixes für ZEMM Desktop UI
 * Behebt Layout-Probleme basierend auf Feedback vom 10.11.2025
 */

/*
 * Problem 1: Reiter zu weit unten - Abstand zur Kopfleiste reduzieren
 */
body:not([data-theme='legacy']) .app-breadcrumb {
  margin-bottom: var(--space-2); /* Reduziert von größerem Wert */
}

body:not([data-theme='legacy']) .app-main {
  padding-top: var(--space-2); /* Weniger Abstand oben */
}

body:not([data-theme='legacy']) #toptabs {
  padding: var(--space-1) 0 var(--space-2) 0; /* Kompakterer Abstand */
  margin-top: 0;
}

/*
 * Problem 2: Tab-Content Sichtbarkeit
 * Tabs müssen sichtbar sein und direkt unter den Reitern starten
 */
body:not([data-theme='legacy']) #content > div[id^='tab'] {
  display: block !important; /* KRITISCH: Überschreibt JavaScript inline display:none */
  visibility: visible !important; /* KRITISCH: Sichtbarkeits-Override */
  position: relative !important; /* KRITISCH: Layout-Fix */
  width: 100%;
  padding: 0.5rem; /* REDUZIERT */
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: 0; /* KEIN Abstand nach unten */
}

/* Nur der aktive Tab wird angezeigt */
body:not([data-theme='legacy']) #content > div[id^='tab']:not(.tab-active) {
  display: none !important;
}

/*
 * Problem 3: Checkboxen vor Textfeldern statt vor Labels
 * Formular-Layout verbessern
 */
body:not([data-theme='legacy']) table.fbi-form td {
  vertical-align: top;
  padding: var(--space-1) var(--space-2);
}

/* Checkbox sollte vor dem Label sein */
body:not([data-theme='legacy']) table.fbi-form input[type='checkbox'] {
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* Textfelder sichtbar machen - keine "..." mehr */
body:not([data-theme='legacy']) table.fbi-form input[type='text'],
body:not([data-theme='legacy']) table.fbi-form input[type='number'],
body:not([data-theme='legacy']) table.fbi-form input[type='date'],
body:not([data-theme='legacy']) table.fbi-form select,
body:not([data-theme='legacy']) table.fbi-form textarea {
  min-width: 200px;
  max-width: 100%;
  width: auto;
  display: inline-block;
  visibility: visible;
}

/* Tabellenspalten nicht zu eng */
body:not([data-theme='legacy']) table.fbi-form {
  table-layout: auto;
  width: 100%;
}

body:not([data-theme='legacy']) table.fbi-form td:first-child {
  min-width: 150px;
  width: auto;
  white-space: nowrap;
}

body:not([data-theme='legacy']) table.fbi-form td:last-child {
  width: auto;
  min-width: 250px;
}

/*
 * Problem 4: Footer überdeckt Content + Scrolling
 */
body:not([data-theme='legacy']) #content,
body:not([data-theme='legacy']) #loginScreen {
  overflow-y: auto !important;
  overflow-x: auto !important;
  max-height: calc(100vh - 180px) !important; /* REDUZIERT */
  padding-bottom: 1rem !important; /* REDUZIERT */
}

body:not([data-theme='legacy']) .app-main__viewport {
  overflow: visible;
}

body:not([data-theme='legacy']) .page-content {
  overflow: visible;
  min-height: auto;
}

/* Footer kompakter machen */
body:not([data-theme='legacy']) .ct-footer {
  padding: var(--space-2) var(--space-3);
  min-height: auto;
}

body:not([data-theme='legacy']) .app-shell__footer {
  padding: var(--space-2) 0;
  min-height: auto;
}

body:not([data-theme='legacy']) DIV#buttons {
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
}

/*
 * Problem 5: Hauptmenü Hover-Text linksbündig
 */
body:not([data-theme='legacy']) .ct-header__nav-item .ct-tooltip,
body:not([data-theme='legacy']) .app-header .tooltip-content,
body:not([data-theme='legacy']) .main-nav__submenu {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Navigation Submenu linksbündig */
body:not([data-theme='legacy']) .nav-submenu,
body:not([data-theme='legacy']) .ct-header__submenu,
body:not([data-theme='legacy']) .main-nav__submenu {
  text-align: left;
}

body:not([data-theme='legacy']) .nav-submenu li,
body:not([data-theme='legacy']) .ct-header__submenu li,
body:not([data-theme='legacy']) .main-nav__submenu li {
  text-align: left;
  justify-content: flex-start;
}

body:not([data-theme='legacy']) .nav-submenu a,
body:not([data-theme='legacy']) .ct-header__submenu a,
body:not([data-theme='legacy']) .main-nav__submenu a {
  text-align: left;
  justify-content: flex-start;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/*
 * Generelle Verbesserungen für Lesbarkeit
 */

/* Tabellen in Tabs sollten responsive sein */
body:not([data-theme='legacy']) #content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

body:not([data-theme='legacy']) #content table thead {
  display: table-header-group;
}

body:not([data-theme='legacy']) #content table tbody {
  display: table-row-group;
}

/* Scrollbare Container */
body:not([data-theme='legacy']) .scrollable-content {
  overflow: auto !important;
  max-width: 100%;
}