/* css/style.css - v1.41 - Scrollbar-Optimierung für bessere Sichtbarkeit */

/* === Grundlegende Layout-Stile === */
html {
    font-size: 14px;
}

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }

/* === Scrollbar-Styling für bessere Sichtbarkeit === */
/* Webkit-basierte Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6); /* slate-600 mit Transparenz */
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, 0.8); /* Dunkler beim Hover */
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, 0.6) transparent;
}

/* Alternative: Scrollbar komplett verstecken aber Scroll-Funktionalität beibehalten */
.scrollbar-hidden {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hidden::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}

.app-container {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 320px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Vertikales Scrollen für die gesamte Sidebar */
    background-color: #1e293b; /* slate-800 */
    border-right: 1px solid #334155; /* slate-700 */
    padding: 1rem 1.5rem 1rem 1.5rem; /* Gleichmäßiges Padding */
    box-sizing: border-box;
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}

.main-content {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    padding: 1.5rem 2rem 1.5rem 1.5rem; /* Mehr Padding rechts für Scrollbar-Platz */
    background-color: #0f172a; /* slate-900 */
    box-sizing: border-box;
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.main-content::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}

/* === Hauptinhalt Grid Layout === */
#mainGridContainer {
    display: grid;
    gap: 1.5rem;
    height: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

@media (min-width: 768px) {
  #mainGridContainer {
     grid-template-columns: 1fr 1fr;
  }
  #mainGridContainer > .column-section:nth-child(3) {
     grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  #mainGridContainer {
     grid-template-columns: 1fr minmax(380px, auto) 2fr;
     grid-template-rows: 1fr;
  }
  #mainGridContainer > .column-section:nth-child(3) {
     grid-column: auto;
  }
}

/* === Stil für die Spalten-Container (.column-section) === */
.column-section {
    background-color: #1e293b; /* slate-800 */
    padding: 1rem 2rem 1rem 1.5rem; /* Mehr Padding rechts für bessere Sichtbarkeit */
    border-radius: 0.5rem;
    border: 1px solid #334155; /* slate-700 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Wichtig für internes Scrolling */
    box-sizing: border-box;
}

/* === Container für dynamischen Inhalt (Listen, Korrekturen) === */
#planUebersichtBereich,
#indesignUebersichtBereich,
#korrekturenSpalte {
    flex-grow: 1;
    overflow-y: auto; /* Vertikales Scrollen für die gesamte Spalte */
    display: flex;
    flex-direction: column;
    min-height: 50px;
    margin-bottom: 0.5rem;
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#planUebersichtBereich::-webkit-scrollbar,
#indesignUebersichtBereich::-webkit-scrollbar,
#korrekturenSpalte::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}

/* Stile für die Listen selbst (innerhalb der Übersicht-Container) */
#planUebersichtBereich ul,
#indesignUebersichtBereich ul {
    list-style: none; padding: 0; margin: 0;
    font-size: 0.75rem; /* 10.5px */
    line-height: 1.5; color: #d1d5db;
    width: 100%;
}
#planUebersichtBereich ul li,
#indesignUebersichtBereich ul li {
    align-items: baseline; padding: 3px 0; border-bottom: 1px solid #334155; /* slate-700 */
}
/* Entferne den unteren Rand für alle Summary-Rows und letzte Listenelemente */
#planUebersichtBereich ul li:last-child,
#indesignUebersichtBereich ul li:last-child {
    border-bottom: none;
}
/* Spezifische Summary-Rows behalten ihre eigenen Ränder (siehe unten) */
#planUebersichtBereich ul li.plan-katalog-summary-row,
#planUebersichtBereich ul li.plan-flugblatt-summary-row,
#planUebersichtBereich ul li.plan-final-summary-styling {
    border-bottom: none; /* Verhindert doppelte Linien */
}


/* Standardtext für leere Listen (innerhalb der Übersicht-Container) */
#planUebersichtBereich > p,
#indesignUebersichtBereich > p {
    color: #9ca3af; /* gray-400 */
    padding: 0.75rem;
    font-style: italic;
    font-size: 0.75rem; /* 10.5px */
    text-align: center;
    margin: auto;
}


/* === Suchfeld-Container & Clear Button === */
/* Container (sowohl in Sidebar als auch Hauptbereich) */
.relative, .search-container {
    position: relative; /* Sicherstellen, dass die Positionierung relativ ist */
}
/* Allgemeine Klasse für Sucheingabefelder mit Clear Button */
.search-input-with-clear {
    width: 100%;
    background-color: #334155; /* slate-700 */
    border: 1px solid #475569; /* slate-600 */
    color: #e5e7eb; /* gray-200 */
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Padding rechts für Button, links normal */
    border-radius: 0.375rem;
    font-size: 0.875rem; /* 12.25px */
    line-height: 1.5; /* Standard Line-Height */
    height: 2.5rem; /* Feste Höhe */
    box-sizing: border-box; /* Wichtig für feste Höhe */
    vertical-align: middle; /* Hilft bei der Ausrichtung */
}
.search-input-with-clear::placeholder { color: #9ca3af; /* gray-400 */ }
.search-input-with-clear:focus {
    outline: none;
    border-color: #6366f1; /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}
.search-input-with-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clear Button (Kreis mit SVG Icon) */
.clear-button {
    position: absolute;
    top: 50%; /* Vertikal auf 50% setzen */
    right: 0.5rem; /* Abstand vom rechten Rand */
    transform: translateY(-50%); /* Nach oben verschieben um die Hälfte der eigenen Höhe */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des SVG */
    justify-content: center; /* Horizontale Zentrierung des SVG */
    width: 1.75rem;  /* Breite des Buttons */
    height: 1.75rem; /* Höhe des Buttons */
    background-color: #475569; /* slate-600 */
    border: none;
    border-radius: 50%; /* Kreisförmig */
    color: #cbd5e1; /* slate-300 - Standardfarbe für SVG */
    cursor: pointer;
    padding: 0; /* Kein internes Padding nötig bei flex-Zentrierung */
    opacity: 0.7;
    transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
/* SVG Styling innerhalb des Buttons wird durch Tailwind Klassen (w-5 h-5) und 'currentColor' geregelt */

.clear-button:hover, .clear-button:focus {
    background-color: #64748b; /* slate-500 */
    color: #ffffff; /* Weiß für SVG im Hover-Zustand */
    opacity: 1;
    outline: none;
}
.clear-button.hidden {
    display: none;
}

/* === Responsive Anpassungen für Sidebar und Mobile === */
@media (max-width: 767px) {
    .app-container { flex-direction: column; height: auto; overflow-y: auto; }
    html, body { height: auto; overflow-y: auto; }
    .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #334155; margin-bottom: 1rem; padding: 1rem; }
    .main-content { height: auto; overflow-y: visible; padding: 1rem; }
    #mainGridContainer { height: auto; }
    #mainGridContainer > .column-section:nth-child(n) { grid-column: auto; }
    #planUebersichtBereich,
    #indesignUebersichtBereich,
    #korrekturenSpalte { max-height: 300px; flex-grow: 0; }
    .column-section { padding: 1rem; margin-bottom: 1rem; }
    .button-container-bottom { position: static; margin-top: 1rem; } /* Angepasst */
}


/* === Bestehende Detail-Stile (Tabellen, Farben etc.) === */

/* Container für Tabellen in der Korrektur-Spalte */
#korrekturenSpalte .table-container {
    overflow-x: auto; /* Horizontales Scrollen aktivieren */
    border: 1px solid #475569; /* slate-600 */
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    background-color: #1e293b; /* slate-800 */
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#korrekturenSpalte .table-container::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}
/* Spezifische Ränder für Fehler-Container */
#korrekturenSpalte .table-container.border-red-700 { border-color: #b91c1c; } /* Dunkleres Rot */
#korrekturenSpalte .table-container.border-yellow-700 { border-color: #a16207; } /* Dunkleres Gelb/Orange */
#korrekturenSpalte .table-container.border-purple-700 { border-color: #6b21a8; } /* Dunkleres Lila */
/* Rahmenfarbe für Seitenzahlfehler-Container entfernt, da Container entfernt wurde */
/* #korrekturenSpalte .table-container.border-pink-700 { border-color: #be185d; } */


/* Tabellenstile (innerhalb #korrekturenSpalte) */
#korrekturenSpalte table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* Feste Tabellenlayout */
}
#korrekturenSpalte th, #korrekturenSpalte td {
    border: 1px solid #475569; /* slate-600 */
    padding: 4px 8px; /* Etwas weniger Padding für kleinere Schriftgröße */
    text-align: left;
    vertical-align: top;
    font-size: 0.75rem; /* Kleinere Schriftgröße (10.5px) */
    color: #d1d5db; /* gray-300 */
}

/* NEU: Spezifische Spaltenbreiten für bessere Ausrichtung */
/* Seite Spalte - schmal für max 3 Ziffern */
#korrekturenSpalte table th:first-child,
#korrekturenSpalte table td:first-child {
    width: 60px;
    text-align: left;
}

/* Gruppe/Nr. Spalte - schmal für max 20 Zeichen */
#korrekturenSpalte table th:nth-child(2),
#korrekturenSpalte table td:nth-child(2) {
    width: 120px;
    text-align: left;
}

/* Modell Spalte - breiter für Produktnamen */
#korrekturenSpalte table th:nth-child(3),
#korrekturenSpalte table td:nth-child(3) {
    width: auto;
    min-width: 180px;
    text-align: left;
}

/* Status Spalte - für Tags wie [Formatabweichung] */
#korrekturenSpalte table th:nth-child(4),
#korrekturenSpalte table td:nth-child(4) {
    width: 140px;
    text-align: center;
}

/* Format Spalte - rechts ausgerichtet */
#korrekturenSpalte table th:nth-child(5),
#korrekturenSpalte table td:nth-child(5) {
    width: 80px;
    text-align: right;
}

/* Plan Seite Spalte (nur bei SORTIERT) - rechts ausgerichtet */
#korrekturenSpalte table th:nth-child(6),
#korrekturenSpalte table td:nth-child(6) {
    width: 80px;
    text-align: right;
}

/* Grund Spalten für andere Tabellen - mit anderen Spalten ausgerichtet */
#korrekturenSpalte .entfernen-table th:nth-child(4),
#korrekturenSpalte .entfernen-table td:nth-child(4) {
    width: auto;
    text-align: left;
}

/* Spezielle Ausrichtung für Seitenzahl-Abweichungen Tabelle */
#korrekturenSpalte .seitenzahlAbweichungen-table th:nth-child(3),
#korrekturenSpalte .seitenzahlAbweichungen-table td:nth-child(3),
#korrekturenSpalte .seitenzahlAbweichungen-table th:nth-child(4),
#korrekturenSpalte .seitenzahlAbweichungen-table td:nth-child(4),
#korrekturenSpalte .seitenzahlAbweichungen-table th:nth-child(5),
#korrekturenSpalte .seitenzahlAbweichungen-table td:nth-child(5) {
    width: 80px;
    text-align: right;
}
#korrekturenSpalte th {
    background-color: #1e293b; /* slate-800 */
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af; /* gray-400 */
    position: sticky; /* Kopfzeile fixieren */
    top: 0;
    z-index: 10;
}

/* Tabelle selbst innerhalb des Containers */
#korrekturenSpalte .table-container table { margin-bottom: 0; border: none; }
/* Entferne doppelte Ränder innerhalb der Tabelle */
#korrekturenSpalte .table-container th,
#korrekturenSpalte .table-container td { border-left: none; border-right: none; border-top: none;}
#korrekturenSpalte .table-container tr:not(:last-child) td { border-bottom: 1px solid #475569; } /* Nur untere Linie für Zellen */
#korrekturenSpalte .table-container tr:last-child td { border-bottom: none; } /* Keine untere Linie für letzte Zeile */
#korrekturenSpalte .table-container th { border-bottom: 1px solid #475569; } /* Untere Linie für Header */


/* Gesamt-Zeile */
#korrekturenSpalte .total-row td {
    font-weight: bold;
    background-color: #334155; /* slate-700 */
    color: #e5e7eb; /* gray-200 */
    font-size: 0.8rem; /* Etwas größer als normale Zellen */
    border-top: 2px solid #475569 !important; /* Wichtiger oberer Rand */
    border-bottom: none !important; /* Kein unterer Rand */
}

/* Standardtext (z.B. "Keine Einträge...") */
#korrekturenSpalte .standard-text {
    color: #9ca3af; padding: 0.75rem; font-style: italic;
    font-size: 0.75rem; /* Kleinere Schriftgröße */
    background-color: #1e293b; border-radius: 0.375rem; border: 1px dashed #475569;
}

/* Zeilenhervorhebungen (innerhalb #korrekturenSpalte) */
#korrekturenSpalte tr[class*="-row"] td { color: #d1d5db; } /* Standard Textfarbe */

/* Standard Fehler (Format, etc.) und Duplikate/Konflikte */
#korrekturenSpalte tr.fehlerPlan-row:not(.identische-daten-zeile):not(.konfig-fehler-zeile),
#korrekturenSpalte tr.duplikat-row { background-color: rgba(127, 29, 29, 0.3); } /* Transparenteres Rot */
#korrekturenSpalte tr.fehlerPlan-row:not(.identische-daten-zeile):not(.konfig-fehler-zeile) td,
#korrekturenSpalte tr.duplikat-row td { color: #fecaca; border-color: rgba(127, 29, 29, 0.5); } /* Hellerer Text, transparenterer Rand */
#korrekturenSpalte tr.duplikat-row td.font-bold { color: #fda4af; font-weight: 700; } /* Hervorgehobener Text bei Konflikten */

/* Speziell für Zeilen mit identischen Daten */
#korrekturenSpalte tr.identische-daten-zeile { background-color: rgba(120, 53, 15, 0.3); } /* Transparenteres Orange/Braun */
#korrekturenSpalte tr.identische-daten-zeile td { color: #fef3c7; border-color: rgba(146, 64, 14, 0.5); } /* Hellerer Text, transparenterer Rand */
#korrekturenSpalte tr.identische-daten-zeile td.identische-daten-wert { font-style: italic; color: #fcd34d; } /* Hervorhebung der Detail-Spalte */
#korrekturenSpalte tr.identische-daten-zeile td span.font-semibold.text-yellow-300, /* Typ-Spalte */
#korrekturenSpalte tr.identische-daten-zeile td.font-semibold.text-yellow-300 { /* Direkte Zellenformatierung */
    color: #fde047 !important; /* Helleres Gelb für bessere Lesbarkeit */
}

/* Speziell für Konfigurationsfehler-Zeilen */
#korrekturenSpalte tr.konfig-fehler-zeile { background-color: rgba(88, 28, 135, 0.3); } /* Transparenteres Lila */
#korrekturenSpalte tr.konfig-fehler-zeile td { color: #f3e8ff; border-color: rgba(107, 33, 168, 0.5); } /* Hellerer Text, transparenterer Rand */
#korrekturenSpalte tr.konfig-fehler-zeile td span.font-semibold.text-purple-300, /* Typ-Spalte */
#korrekturenSpalte tr.konfig-fehler-zeile td.font-semibold.text-purple-300 { /* Direkte Zellenformatierung */
     color: #d8b4fe !important; /* Helleres Lila */
}

/* Andere Zeilentypen */
#korrekturenSpalte tr.korrekt-row.doppelseite-row { background-color: rgba(30, 58, 138, 0.3); } /* Transparenteres Blau */
#korrekturenSpalte tr.korrekt-row.doppelseite-row td { border-color: rgba(30, 64, 175, 0.5); color: #bfdbfe; }
#korrekturenSpalte tr.entfernen-row.flugblatt-row { background-color: rgba(124, 45, 18, 0.3); } /* Transparenteres Dunkelorange */
#korrekturenSpalte tr.entfernen-row.flugblatt-row td { border-color: rgba(154, 52, 18, 0.5); color: #fed7aa; }
#korrekturenSpalte tr.entfernen-row.flugblatt-row td:last-child { color: #fdba74; font-weight: 500; }
#korrekturenSpalte tr.korrekt-row.format-abweichung-zeile { background-color: rgba(153, 27, 27, 0.3); } /* Transparenteres Dunkelrot */
#korrekturenSpalte tr.korrekt-row.format-abweichung-zeile td { color: #fee2e2; font-weight: 600; border-color: rgba(185, 28, 28, 0.5); }


/* Wortumbruch für bestimmte Spalten in Korrekturen-Tabellen */
#korrekturenSpalte td.break-words {
    white-space: normal !important; /* Erzwinge normalen Zeilenumbruch */
    word-break: break-word; /* Stelle sicher, dass lange Wörter umbrechen */
    vertical-align: top; /* Stelle sicher, dass der Text oben beginnt */
}


/* Hinweise in Sidebar */
.sidebar .hinweis { font-size: 0.875rem; color: #9ca3af; margin-top: 0.5rem; }

/* --- InDesign Übersicht Liste Ausrichtung --- */
#indesignUebersichtBereich ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 10px;
}
#indesignUebersichtBereich ul li span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Span für Seite + Nummer / Fehlertext */
#indesignUebersichtBereich ul li span:first-child {
    flex-grow: 1;
    text-align: left;
    padding-right: 5px;
}
/* Span für Fehler-Tag (Fehlt in Plan) */
#indesignUebersichtBereich ul li span.fehler-tag-container {
    flex-shrink: 0; /* Nicht schrumpfen */
    text-align: right;
    margin-left: auto; /* Verschiebt es nach rechts, wenn Platz ist */
    padding-left: 5px; /* Abstand zum vorherigen Element */
}
/* Span für Format / Format N/A */
#indesignUebersichtBereich ul li span:last-child:not(.fehler-tag-container) { /* Stelle sicher, dass es nicht den Fehler-Tag überschreibt */
    flex-shrink: 0;
    text-align: right;
    font-family: monospace;
    color: #6b7280; /* gray-500 */
    padding-left: 5px;
}


/* Styling für Seite und Produktnummern innerhalb des ersten Spans */
#indesignUebersichtBereich ul li span:first-child .seite-text {
    color: #e5e7eb; /* gray-200 */
    font-weight: 500;
    margin-right: 5px;
}
#indesignUebersichtBereich ul li span:first-child .nummern-text {
    color: #9ca3af; /* gray-400 */
    font-size: 0.7rem;
}
/* NEU: Styling für "FEHLER: Datei nicht gefunden" in InDesign Übersicht */
#indesignUebersichtBereich ul li .datei-text-id {
    color: #cbd5e1; /* slate-300, oder eine andere passende Farbe */
    font-style: italic;
    margin-left: 5px;
    margin-right: 5px;
}
#indesignUebersichtBereich ul li .fehler-text-rot {
    color: #f87171 !important; /* red-400, passend zum .fehler-tag */
    font-weight: bold;
}
#indesignUebersichtBereich ul li .format-text-id-fehler {
    flex-shrink: 0;
    text-align: right;
    font-family: monospace;
    color: #9ca3af; /* gray-400, wie normale Formate */
    padding-left: 5px;
}


/* --- Plan Übersicht Liste Ausrichtung (Unverändert) --- */
#planUebersichtBereich ul li {
    display: flex; justify-content: space-between;
}
#planUebersichtBereich ul li span:last-child {
    min-width: 120px; text-align: right; font-family: monospace; color: #9ca3af; white-space: nowrap; padding-left: 2px; padding-right: 5px; flex-shrink: 0;
}
#planUebersichtBereich ul li span:first-child {
    flex-grow: 1; padding-right: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #e5e7eb; font-weight: 500;
}

/* Styling für Plan-Übersicht Gesamt-Zeilen */
.plan-katalog-summary-row, .plan-flugblatt-summary-row, .plan-final-summary-styling {
    padding-top: 6px;
    margin-top: 6px;
    text-align: right;
    font-weight: 600; /* Semibold */
    font-size: 0.8rem; /* Kleiner als Standardlisten */
    color: #e5e7eb; /* gray-200 */
    display: block; /* Block-Level für volle Breite */
    border-top: 1px solid #334155; /* Dünne Linie für Trennung */
}
.plan-katalog-summary-row .font-mono, .plan-flugblatt-summary-row .font-mono, .plan-final-summary-styling .font-mono {
    font-family: monospace;
    margin-left: 4px;
    color: #cbd5e1; /* slate-300 */
}
.plan-final-summary-styling {
    border-top: 3px double #475569; /* slate-600 */
}


/* === Status Texte Farben & CSS Klassen für Übersicht & Korrekt-Tabelle === */
/* Hinzufügen von !important, um Tailwind-Überschreibungen zu verhindern */
.flugblatt-markierung { color: #fb923c !important; font-weight: 600; font-size: 0.7rem; margin-left: 4px; } /* Orange */
.titel-tag { color: #4ade80 !important; font-weight: 600; margin-left: 4px; } /* Original Grün (green-400) */
.rueckseite-tag { color: #4ade80 !important; font-weight: 600; margin-left: 4px; } /* Original Grün (green-400) */
.fehler-tag { color: #ef4444 !important; font-weight: 700; margin-left: 4px; } /* Kräftiges Rot (red-500) für Formatabweichung etc. */
.doppel-tag { color: #93c5fd !important; font-weight: 600; margin-left: 4px; } /* Blau (blue-300) */

/* NEU: Titel und Rückseite Positionsprüfung */
.titel-tag-korrekt { color: #22c55e !important; font-weight: 600; margin-left: 4px; } /* Grün für korrekte Position */
.titel-tag-fehler { color: #ef4444 !important; font-weight: 700; margin-left: 4px; } /* Rot für falsche Position */
.rueckseite-tag-korrekt { color: #22c55e !important; font-weight: 600; margin-left: 4px; } /* Grün für korrekte Position */
.rueckseite-tag-fehler { color: #ef4444 !important; font-weight: 700; margin-left: 4px; } /* Rot für falsche Position */
.seitenzahl-fehler-tag { color: #f472b6 !important; font-weight: 700; margin-left: 4px; } /* NEU: Pink/Magenta (pink-400/500) für Seitenzahlfehler */
.flugblatt-tag { color: #ef4444 !important; font-weight: 700; margin-left: 4px; background-color: rgba(239, 68, 68, 0.1); padding: 2px 4px; border-radius: 3px; } /* NEU: Rot für Flugblatt-Hinweis */


/* Farben für Korrektur-Tabellen-Titel & Typen (bleiben wie sie waren, !important war hier schon teilweise) */
.text-purple-400 { color: #c084fc !important; }
.text-green-400 { color: #4ade80 !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-red-400 { color: #f87171 !important; }
.text-red-500 { color: #ef4444 !important; }
.text-blue-300 { color: #93c5fd !important; } /* Korrigiert von text-blue-400 zu text-blue-300 für Konsistenz, falls verwendet */
.text-blue-400 { color: #60a5fa !important; } /* Behalte blau-400, falls spezifisch benötigt */
.text-orange-400 { color: #fb923c !important; }
.text-yellow-300 { color: #fde047 !important; }
.text-yellow-400 { color: #facc15 !important; }
.text-purple-300 { color: #d8b4fe !important; }
.text-pink-400 { color: #f472b6 !important; }

#korrekturenSpalte .fix-seite-text { font-weight: 700; color: #f87171; }

/* Globale Elemente */
.spinner.hidden { display: none; }
#globalFehlerBereich.hidden { display: none; }
.erfolgsmeldung-overlay {
    position: fixed; top: 15%; left: 50%; transform: translateX(-50%);
    background-color: #166534; color: #dcfce7; padding: 1rem 1.5rem;
    border-radius: 0.375rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    font-size: 1rem; font-weight: 500; border: 1px solid #15803d;
}
.erfolgsmeldung-overlay.show { opacity: 1; visibility: visible; }

/* Padding für Total-Zeilen in Korrekturen */
div#entfernenTotal { padding-right: 0px; }
div#hinzufuegenTotal { padding-right: 0px; }

/* === Spalten vertikale Ausrichtung === */
/* Hinzuzufügende Seiten, Korrekte Seiten und Leere Seiten Tabellen-Spalten-Ausrichtung */

/* Hinzuzufügende Seiten Tabellen-Spalten-Ausrichtung */
#hinzufuegenAnzeige .table-container table th:nth-child(1), /* Hinzuzufügende Seiten - Seite */
#hinzufuegenAnzeige .table-container table td:nth-child(1) {
    width: 40px;
    text-align: center;
}

#hinzufuegenAnzeige .table-container table th:nth-child(2), /* Hinzuzufügende Seiten - Gruppe/Nr. */
#hinzufuegenAnzeige .table-container table td:nth-child(2) {
    width: 60px;
}

#hinzufuegenAnzeige .table-container table th:nth-child(3), /* Hinzuzufügende Seiten - Modell */
#hinzufuegenAnzeige .table-container table td:nth-child(3) {
    width: 160px;
}

#hinzufuegenAnzeige .table-container table th:nth-child(4), /* Hinzuzufügende Seiten - Format */
#hinzufuegenAnzeige .table-container table td:nth-child(4) {
    width: 80px;
    text-align: right;
}

/* Korrekte Seiten táblázat oszlopainak igazítása */
#korrektAnzeige .table-container table th:nth-child(1), /* Korrekte Seiten - Seite */
#korrektAnzeige .table-container table td:nth-child(1) {
    width: 40px;
    text-align: center;
}

#korrektAnzeige .table-container table th:nth-child(2), /* Korrekte Seiten - Gruppe/Nr. */
#korrektAnzeige .table-container table td:nth-child(2) {
    width: 60px;
}

#korrektAnzeige .table-container table th:nth-child(3), /* Korrekte Seiten - Modell */
#korrektAnzeige .table-container table td:nth-child(3) {
    width: 90px;
}

#korrektAnzeige .table-container table th:nth-child(4), /* Korrekte Seiten - Status */
#korrektAnzeige .table-container table td:nth-child(4) {
    width: 70px;
    text-align: center;
}

#korrektAnzeige .table-container table th:nth-child(5), /* Korrekte Seiten - Format */
#korrektAnzeige .table-container table td:nth-child(5) {
    width: 80px;
    text-align: right;
}

/* Leere Seiten táblázat oszlopainak igazítása */
#leereSeitenAnzeige .table-container table th:nth-child(1), /* Leere Seiten - Seite */
#leereSeitenAnzeige .table-container table td:nth-child(1) {
    width: 40px;
    text-align: center;
}

#leereSeitenAnzeige .table-container table th:nth-child(2), /* Leere Seiten - Gruppe/Nr. */
#leereSeitenAnzeige .table-container table td:nth-child(2) {
    width: 60px;
}

#leereSeitenAnzeige .table-container table th:nth-child(3), /* Leere Seiten - Modell */
#leereSeitenAnzeige .table-container table td:nth-child(3) {
    width: 160px;
}

#leereSeitenAnzeige .table-container table th:nth-child(4), /* Leere Seiten - Format */
#leereSeitenAnzeige .table-container table td:nth-child(4) {
    width: 80px;
    text-align: right;
}

/* Zu entfernende Seiten táblázat oszlopainak igazítása */
#entfernenAnzeige .table-container table th:nth-child(1), /* Zu entfernende Seiten - Seite */
#entfernenAnzeige .table-container table td:nth-child(1) {
    width: 40px;
    text-align: center;
}

#entfernenAnzeige .table-container table th:nth-child(2), /* Zu entfernende Seiten - Gruppe/Nr. */
#entfernenAnzeige .table-container table td:nth-child(2) {
    width: 60px;
}

#entfernenAnzeige .table-container table th:nth-child(3), /* Zu entfernende Seiten - Modell */
#entfernenAnzeige .table-container table td:nth-child(3) {
    width: 90px;
}

#entfernenAnzeige .table-container table th:nth-child(4), /* Zu entfernende Seiten - Grund */
#entfernenAnzeige .table-container table td:nth-child(4) {
    width: 70px;
    text-align: center;
}

#entfernenAnzeige .table-container table th:nth-child(5), /* Zu entfernende Seiten - Format */
#entfernenAnzeige .table-container table td:nth-child(5) {
    width: 80px;
    text-align: right;
}

/* Gesamt-Werte rechts ausrichten */
#korrekturenSpalte .total-row td:last-child {
    text-align: right;
    padding-right: 15px;
}

/* Reset & Hilfe Button Container Styling */
.button-container-bottom {
   margin-top: auto; /* Schiebt Container nach unten */
   padding-top: 1rem; /* Platz über dem ersten Button */
   border-top: 1px solid #334155; /* Trennlinie */
}

/* Stellt sicher, dass der Fehlerbereich immer unter dem Hilfe-Button bleibt */

/* Sicherstellen, dass der flex-grow Spacer funktioniert */
.sidebar > .flex-grow {
    flex-grow: 1;
}

/* === Sidebar Suchergebnis-Box === */
#katalogSucheErgebnis {
    overflow-x: auto; /* Horizontales Scrollen hinzufügen */
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#katalogSucheErgebnis::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}

/* Liste innerhalb der Suchergebnis-Box */
#katalogSucheErgebnis ul {
    padding-left: 0;
    list-style: none;
}

/* Listenelemente in Suchergebnissen */
#katalogSucheErgebnis ul li {
    font-size: 0.75rem; /* text-xs */
    line-height: 1.4;
    color: #d1d5db; /* gray-300 */
    border-bottom: 1px solid rgba(71, 85, 105, 0.5); /* slate-600/50 */
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#katalogSucheErgebnis ul li:last-child {
     border-bottom: none;
     margin-bottom: 0;
}


/* Platzhaltertext in Suchergebnissen */
#katalogSucheErgebnis p.text-gray-500,
#katalogSucheErgebnis p.text-yellow-400,
#katalogSucheErgebnis p.text-red-400 {
     font-size: 0.75rem;
     padding: 0.25rem;
}

/* === Modal Styles === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.8); /* Dunkleres slate-900 Overlay mit Transparenz */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1rem; /* Padding für kleine Bildschirme */
}
.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}
.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: #1e293b; /* slate-800 */
    padding: 1.5rem 2rem 2rem 2rem; /* Mehr Platz unten */
    border-radius: 0.5rem;
    border: 1px solid #334155; /* slate-700 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 960px; /* Maximale Breite */
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay:not(.hidden) .modal {
    transform: scale(1);
}


.modal-schliessen-button {
    position: absolute;
    top: 0.5rem; /* Etwas höher */
    right: 0.5rem; /* Etwas weiter rein */
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #9ca3af; /* gray-400 */
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-schliessen-button:hover {
    color: #f3f4f6; /* gray-100 */
    background-color: #334155; /* slate-700 */
}

.modal-inhalt {
    /* max-h und overflow-y im HTML hinzugefügt */
    /* Scrollbar verstecken für bessere Sichtbarkeit */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.modal-inhalt::-webkit-scrollbar {
    display: none;  /* Safari und Chrome */
}
.modal-inhalt h3 {
    border-bottom: 1px solid #334155; /* slate-700 */
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;
    color: #93c5fd; /* Helleres Blau für Titel */
}
.modal-inhalt ul, .modal-inhalt ol {
    padding-left: 1.5rem; /* Einrückung für Listen */
    margin-bottom: 1rem; /* Abstand zwischen Listenblöcken */
}
.modal-inhalt li {
    margin-bottom: 0.25rem;
}
.modal-inhalt strong {
    color: #e5e7eb; /* gray-200 - Heller für Hervorhebungen */
}
.modal-inhalt .list-circle {
    list-style-type: circle;
}
.modal-inhalt .list-\[\'\-\_\'\] { /* Unverändert, für Kompatibilität, falls in der Readme/Hilfe genutzt */
     list-style-type: '- '; /* Einfacher Bindestrich */
}

/* === NEU v1.3.0: Phase-Indikator Stile === */
.phase-indikator {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    transition: all 0.2s ease;
}

.phase-indikator.sortiert {
    background-color: #065f46; /* green-800 */
    color: #10b981; /* green-500 */
    border-color: #10b981;
}

.phase-indikator.unsortiert {
    background-color: #7c2d12; /* orange-800 */
    color: #f97316; /* orange-500 */
    border-color: #f97316;
}

/* === NEU v1.3.0: Seitenzahl-Abweichung Tabellen-Stile === */
#korrekturenSpalte .table-container.border-orange-700 {
    border-color: #c2410c; /* orange-700 */
}