/**
 * main.css
 *
 * Globale Styles für das Doss-Kartell Panel.
 * Definiert das Darkmode-Theme und das Grundlayout.
 */

/* CSS-Variablen für einfaches Theming */
:root {
    --color-background: #1a1a2e; /* Dunkles Blau-Lila */
    --color-surface: #16213e;    /* Etwas hellere Oberfläche für Karten etc. */
    --color-primary: #4c2a85;    /* Dunkles Lila */
    --color-accent: #00f5d4;     /* Türkis */
    --color-text: #e0e0e0;       /* Helles Grau für Text */
    --color-text-muted: #a9a9a9; /* Gedämpfter Text */
    --color-border: #2a3b5f;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Globale Resets und Body-Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    line-height: 1.6;
    font-size: 16px;
}

/* Layout-Container */
.page-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-accent);
}
.sidebar-header h1 {
    font-size: 1.5rem;
    margin-left: 10px;
    display: inline;
}

.main-nav ul {
    list-style: none;
    padding: 15px 0;
}

.main-nav li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.main-nav li a:hover, .main-nav li a.active {
    background-color: var(--color-primary);
    color: #fff;
}

.main-nav li a i {
    width: 30px;
    font-size: 1.1rem;
    text-align: center;
    margin-right: 10px;
}

.nav-separator {
    height: 1px;
    background-color: var(--color-border);
    margin: 15px 20px;
}

.sidebar-footer {
    margin-top: auto;
    padding: 15px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-info {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}
.user-info i {
    margin-right: 8px;
}

.logout-button {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s;
}
.logout-button:hover {
    color: var(--color-accent);
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

main {
    padding: 30px;
    flex-grow: 1;
}

.page-footer {
    text-align: center;
    padding: 15px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

h1, h2, h3 {
    color: #fff;
    margin-bottom: 1rem;
}


/* Auth-Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.auth-box {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.auth-header {
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-accent);
}
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}
.auth-footer a {
    color: var(--color-accent);
    text-decoration: none;
}

/* Formulare */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 4px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: opacity 0.2s;
}
.btn:hover { opacity: 0.9; }
.btn-primary { background-color: var(--color-primary); }
.btn-secondary { background-color: #6c757d; }
.btn-success { background-color: #28a745; }
.btn-danger { background-color: #dc3545; }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

/* Nachrichten/Notices */
.notice { padding: 15px; margin-bottom: 20px; border-radius: 4px; border: 1px solid; }
.notice.info { background-color: #17a2b820; border-color: #17a2b8; }
.notice.success { background-color: #28a74520; border-color: #28a745; }
.notice.error { background-color: #dc354520; border-color: #dc3545; }

/* Datentabellen */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.data-table thead th { background-color: var(--color-surface); }
.data-table tbody tr:hover { background-color: #ffffff0a; }

/* Status-Badges */
.status-badge { padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; }
.status-active { background-color: #28a745; color: #fff; }
.status-inactive { background-color: #6c757d; color: #fff; }
.status-banned { background-color: #dc3545; color: #fff; }


/* Allgemeine Formular-Box für Module */
.form-box {
    background-color: var(--color-surface);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-top: 20px;
}

/* Platzierung des "Neue Rolle erstellen"-Buttons */
.page-actions {
    margin-bottom: 20px;
    text-align: right; /* Oder float: right; wenn es andere Elemente links gibt */
}
.page-actions .btn i {
    margin-right: 8px;
}

/* Berechtigungs-Grid für Rollenbearbeitung */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsives Grid */
    gap: 15px;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.permission-item {
    background-color: var(--color-background);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
}

.permission-item input[type="checkbox"] {
    appearance: none; /* Standard-Checkbox ausblenden */
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0; /* Verhindert Schrumpfen bei langen Labels */
}

.permission-item input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.permission-item input[type="checkbox"]:checked::after {
    content: '\2713'; /* Unicode-Häkchen */
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.permission-item label {
    font-weight: bold;
    cursor: pointer;
    flex-grow: 1;
    color: var(--color-text); /* Ensure label text is visible */
}

.permission-item label i {
    display: block;
    font-weight: normal;
    font-size: 0.85em;
    color: var(--color-text-muted);
}


/* Ergänzung für Dashboard */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card {
    background-color: var(--color-surface);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-in-out;
}
.kpi-card:hover {
    transform: translateY(-5px);
}

.kpi-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.kpi-label {
    font-size: 1rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-label i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.dashboard-section {
    margin-bottom: 30px;
    background-color: var(--color-surface);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.dashboard-section h2 {
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.logbook-list {
    list-style: none;
    padding: 0;
}
.logbook-list li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border);
}
.logbook-list li:last-child {
    border-bottom: none;
}
.logbook-list li strong {
    color: var(--color-accent);
}
.logbook-list li small {
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 5px;
}
.no-entries {
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px;
}


/* Layout */
.dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

/* Interaktives Chart-Widget */
.chart-controls {
    margin-bottom: 15px;
}
.chart-controls .btn.active {
    background-color: var(--color-accent);
    color: var(--color-background);
}
#dashboardChart {
    max-height: 350px;
}

/* Allgemeine Widget-Listen */
.widget-list {
    list-style: none;
    padding: 0;
}
.widget-list li {
    display: flex;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px dashed var(--color-border);
}
.widget-list li:last-child {
    border-bottom: none;
}
.widget-list li strong {
    color: var(--color-text);
}
.widget-list li small {
    color: var(--color-text-muted);
    display: block;
    font-weight: normal;
    margin-top: 2px;
}

/* Spezifische Styles für Transaktionsliste */
.tx-type {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}
.tx-type.sale {
    background-color: rgba(0, 245, 212, 0.2);
    color: var(--color-accent);
}
.tx-type.purchase {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}


/* Ergänzungen für das neue Dashboard-Layout */

.analysis-preview {
    background: linear-gradient(135deg, var(--color-primary), #3a1c6a);
    text-align: center;
}
.analysis-preview h2 {
    color: var(--color-accent);
}
.analysis-preview p {
    color: var(--color-text);
    margin: 15px 0;
}
.btn-block {
    display: block;
    width: 100%;
    margin-top: 20px;
}
.btn-block i {
    margin-right: 8px;
}

/* Transaktionsliste mit Werten */
.widget-list li .tx-text {
    flex-grow: 1;
}
.widget-list li .tx-value {
    font-weight: bold;
    font-family: monospace;
    font-size: 1.1em;
}


/* Ergänzungen für /assets/css/main.css für das Charts-Modul */

.tab-navigation, .timeframe-filter {
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
}

.tab-navigation .btn, .timeframe-filter .btn {
    padding: 8px 15px;
    font-size: 0.9em;
}

.chart-area {
    background-color: var(--color-surface);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}
.chart-area h2 {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.chart-area canvas {
    max-height: 400px; /* Einheitliche Höhe für Charts */
    width: 100% !important; /* Wichtig für Responsiveness */
    height: auto !important;
    margin-bottom: 30px;
}
.no-data {
    color: var(--color-text-muted);
    text-align: center;
    padding: 50px;
}



/* Ergänzungen für das Warehouse-Modul */

.warehouse-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% für Artikel, 25% für Kategorien */
    gap: 30px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch bei schmalen Bildschirmen */
    gap: 15px; /* Abstand zwischen den Filter-Elementen */
    margin-bottom: 20px;
    align-items: center;
}
.filter-bar .form-group {
    margin-bottom: 0; /* Entfernt den Standard-Abstand in der Leiste */
}
.filter-bar input[type="text"], .filter-bar select {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.category-section {
    background-color: var(--color-surface);
    padding: 20px;
    border-radius: 8px;
}
.category-section h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}
.category-section .widget-list li {
    justify-content: space-between;
}
.category-section .actions-cell {
    white-space: nowrap;
}

/* Verhindert, dass die Zelle mit den Aktionen umbricht */
.data-table .actions-cell {
    white-space: nowrap;
}



/* Ergänzungen für das Finance-Modul */

.tx-type-sale { color: var(--color-accent); }
.tx-type-purchase { color: #dc3545; }


/* Form Control allgemeiner (für Textareas) */
.form-control {
    width: 100%;
    padding: 10px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 4px;
    box-sizing: border-box; /* Wichtig für korrekte Breite */
}
.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.1rem rgba(0, 245, 212, 0.25);
}

/* Rabatt-Gruppe */
.discount-group .discount-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}
.discount-group .discount-inputs select,
.discount-group .discount-inputs input[type="number"] {
    flex: 1; /* Macht Inputs flexibel */
    min-width: 0; /* Erlaubt Schrumpfung */
}
.discount-group .discount-inputs input[type="number"] {
    max-width: 120px; /* Begrenzt die Breite des Zahleneingabefeldes */
}

/* Preis-Anzeige-Gruppe */
.price-display-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsiv, min 200px breite Spalten */
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(76, 42, 133, 0.3); /* Leicht dunklerer Hintergrund */
    border-radius: 8px;
    border: 1px solid var(--color-primary);
}
.price-display-group .form-group label {
    font-size: 0.9em;
    color: var(--color-text-muted);
}
.price-display-group .form-group input[type="text"] {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-text);
    background-color: transparent;
    border: none;
    padding: 5px 0;
}

/* Gewinn/Verlust Warnungen */
.profit-success { color: #28a745 !important; } /* Grün für Gewinn */
.loss-warning { color: #dc3545 !important; } /* Rot für Verlust */
.neutral-warning { color: #ffc107 !important; } /* Gelb für Nullgewinn */
.stock-warning {
    border: 2px solid #dc3545 !important; /* Roter Rand für Bestandswarnung */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* Anpassung der Aktionszelle in der Tabelle */
.data-table .actions-cell {
    white-space: nowrap;
}
.data-table .actions-cell .btn {
    margin: 2px;
}

.warning-text {
    font-size: 0.9em;
    color: #dc3545;
    font-weight: bold;
    margin-left: 10px;
    vertical-align: middle;
}


/* Ergänzungen für /assets/css/main.css für das Verwarnsystem */

.permissions-groups-container {
    margin-top: 20px;
}

.permission-group {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* Verhindert, dass Kinder über den Rand gehen */
}

/* Neuer Header für die Gruppe für besseres Styling */
.permission-group-header {
    background-color: var(--color-surface); /* Gleiche Farbe wie der Hintergrund der Seite */
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.permission-group-header label {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1.1em;
    margin-left: 10px;
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
}

/* Styling für die Master-Checkbox */
.permission-group-header input[type="checkbox"].select-all-group {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.permission-group-header input[type="checkbox"].select-all-group:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.permission-group-header input[type="checkbox"].select-all-group:checked::after {
    content: '\2713'; /* Häkchen */
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.permissions-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}

/* Stile für Logistik-Status */
.status-badge.status-pending { background-color: #ffc107; color: #333; } /* Gelb */
.status-badge.status-in_progress { background-color: #17a2b8; color: #fff; } /* Blau */
.status-badge.status-completed { background-color: #28a745; color: #fff; } /* Grün */
.status-badge.status-cancelled { background-color: #6c757d; color: #fff; } /* Grau */

/* Stile für die intuitive Zeiteingabe im Fuhrpark */
.duration-input-group {
    display: flex;
    gap: 10px;
}
.duration-input-group .duration-amount {
    flex-grow: 1; /* Nimmt mehr Platz ein */
}
.duration-input-group .duration-unit {
    flex-shrink: 0; /* Verhindert das Schrumpfen */
}
.duration-presets {
    margin-top: 8px;
    display: flex;
    gap: 5px;
}
.btn-xs {
    padding: 3px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.btn-xs:hover {
    background-color: var(--color-primary);
}

/* Verbesserte Anordnung für Mietoptionen in vehicles.php */

/* Stellt sicher, dass der Inhalt in den Tabellenzellen vertikal zentriert ist */
table.data-table tbody tr td {
    vertical-align: middle;
}

/* Container für die Dauer-Eingabe in der neuen Mietoption-Zeile */
.new-option-row .duration-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap; /* Wichtig: Erlaubt Zeilenumbruch bei schmalen Bildschirmen */
}

/* Eingabefeld für die Dauer (Zahl) */
.new-option-row .duration-amount {
    flex: 1 1 80px; /* Flexibel, aber mit einer Basisbreite von 80px */
    min-width: 60px; /* Verhindert, dass es zu klein wird */
}

/* Dropdown für die Zeiteinheit (Minuten, Stunden, etc.) */
.new-option-row .duration-unit {
    flex: 1 1 120px; /* Flexibel, aber mit einer Basisbreite von 120px */
    min-width: 100px; /* Verhindert, dass es zu schmal wird */
}

/* Container für die Preset-Buttons */
.new-option-row .duration-presets {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Preset-Buttons Styling */
.new-option-row .btn-xs {
    padding: 3px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Button-Text */
}

.new-option-row .btn-xs:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
}


.item-row.price-display-group {
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
    margin-top: 15px;
    align-items: center; /* Zentriert alle Elemente vertikal */
}
.item-row.price-display-group:first-child {
    border-top: none; /* Entfernt den Rand bei der ersten Zeile */
    margin-top: 0;
    padding-top: 0;
}

/* Styling für den Löschen-Button, damit er klein und unauffällig ist */
.item-row .remove-item-btn {
    align-self: center; /* Zentriert sich selbst vertikal */
    margin-left: 10px;
}

/* Visuell ansprechendere Anzeige für den Gesamtwert */
.total-value-display {
    text-align: right;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary);
    border-top: 2px solid var(--color-primary);
    padding-top: 10px;
    margin-top: 15px;
}


/* --- Verbessertes Design für das Partner-Notiz-Modul --- */

/* Versteckt das Formular standardmäßig */
.hidden {
    display: none;
}

/* Container für alle Notizen */
.notes-container {
    margin-top: 20px;
}

/* Einzelne Notiz-Karte */
.note-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Kopfzeile der Notiz */
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.note-meta {
    font-size: 0.9em;
    color: var(--color-text-muted);
}
.note-meta span {
    margin-right: 15px;
}

/* Aktionen in der Kopfzeile (Sichtbarkeit, Löschen) */
.note-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.visibility-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* Inhalt der Notiz */
.note-content {
    line-height: 1.6;
}

/* Kleiner Button-Stil (falls noch nicht vorhanden) */
.btn-xs {
    padding: 3px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
}


.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    margin-top: 30px;
}

.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.tab-link:hover {
    color: var(--color-text);
}

.tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-pane {
    display: none; /* Alle Tabs sind standardmäßig ausgeblendet */
}

.tab-pane.active {
    display: block; /* Nur der aktive Tab wird angezeigt */
}

/* --- Styling für das operative Logbuch --- */
.logbook-container {
    margin-top: 20px;
}
.log-entry-card {
    background-color: var(--color-surface);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden; /* Stellt sicher, dass die Border-Left nicht übersteht */
}
.log-entry-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-light);
    background-color: var(--color-surface-soft);
}
.log-entry-header h3 {
    margin: 0 0 10px 0;
}
.log-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9em;
    color: var(--color-text-muted);
}
.log-entry-category {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
}
.log-entry-content {
    padding: 20px;
    line-height: 1.6;
}
.log-entry-actions {
    padding: 0 20px 15px 20px;
    text-align: right;
}

/* Farbige Kategorien */
.category-info .log-entry-category { background-color: #17a2b8; } /* Blau */
.category-schichtuebergabe .log-entry-category { background-color: #6c757d; } /* Grau */
.category-vorfall .log-entry-category { background-color: #dc3545; } /* Rot */
.category-besprechung .log-entry-category { background-color: #007bff; } /* Dunkelblau */
.category-wichtig .log-entry-category { background-color: #ffc107; color: #212529; } /* Gelb */

.color-preview {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
    margin-right: 5px;
}

.sub-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Abstand zwischen den Links */
    margin-top: -10px; /* Rückt näher an die Haupt-Buttons heran */
    margin-bottom: 20px;
    padding-left: 5px; /* Leichte Einrückung für Hierarchie */
}

.sub-page-actions a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--color-text-muted);
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 20px; /* Pillen-Form */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.sub-page-actions a:hover {
    color: var(--color-primary);
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Spezielles Styling für Checkbox-Gruppen im Formular --- */

.form-group .checkbox-label {
    display: flex;         /* Nutzt Flexbox für die interne Ausrichtung */
    align-items: center;   /* Zentriert Checkbox und Text vertikal */
    gap: 10px;             /* Schafft einen sauberen Abstand */
    padding-top: 30px;     /* Schiebt die Gruppe nach unten auf eine Linie mit anderen Inputs */
    margin-bottom: 0;      /* Entfernt unnötigen Abstand */
    font-weight: normal;   /* Standard für Label-Text neben Checkboxen */
    cursor: pointer;
    width: fit-content;    /* WICHTIG: Verhindert, dass sich das Label ausdehnt */
}

.form-group .checkbox-label input[type="checkbox"] {
    /* Optional: Passt die Größe der Checkbox an */
    width: 16px;
    height: 16px;
}

/* --- Partner-Portal Neugestaltung --- */
.partner-header {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
.partner-type-container {
    background-color: var(--color-primary-soft);
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-block;
}
.contact-person-container {
    font-size: 1em;
    color: var(--color-text-muted);
}
.portal-section {
    width: 100%;
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--color-surface);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.section-header h2 {
    margin: 0;
    font-size: 1.4em;
}
.view-all-btn {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
}
.view-all-btn:hover {
    text-decoration: underline;
}

/* ============================================= */
/* == Operations-Kalkulator Ergebnis-Styling == */
/* ============================================= */

.op-results-container {
    margin-top: 2rem;
    border-top: 2px solid var(--color-border);
    padding-top: 1.5rem;
}

/* Container für die Zusammenfassungen */
.op-summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Styling für die einzelnen Zusammenfassungs-Boxen */
.op-summary-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background-color: var(--color-background-light);
}
.op-summary-list h4 {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 1.1em;
}
.op-summary-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.op-summary-list li {
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
}
.op-summary-list .item-quantity {
    font-weight: bold;
    color: var(--color-primary);
}

/* Styling für die neue, strukturierte Produktions-Analyse */
.op-production-analysis h4 {
    margin-bottom: 1rem;
}
.op-production-analysis ul {
    list-style-type: none;
    padding-left: 0;
}
.op-production-analysis ul ul {
    padding-left: 2rem; /* Einrückung für Abhängigkeiten */
}
.op-production-analysis li {
    background-color: var(--color-background);
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.op-production-analysis .route-header {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
}
.op-production-analysis .details-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
    font-size: 0.9em;
}