/* Default CSS for layout structure */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Standard font for readability */
    background-color: #f8f9fa; /* Light background for contrast */
    color: #333; /* Standard text color */
    display: flex;
    flex-direction: column; /* Ensures header, main, and footer are stacked */
    min-height: 100vh; /* Full viewport height */
}

.header {
    background-color: #343a40; /* Dark background for header */
    color: #ffffff; /* White text for contrast */
    padding: 1rem; /* Adds spacing inside header */
    text-align: center; /* Centers the header text */
}

/* Main Container */
.main-container {
    display: flex;
    flex-direction: row; /* Sidebar und Main-Inhalt nebeneinander darstellen */
    margin-left: 0; /* Kein unnötiger äußerer Abstand */
    padding-left: 0; /* Entfernt zusätzliches Einrücken */
}

/* Sidebar */
.sidebar {
    background-color: #495057; /* Dunkleres Sidebar-Hintergrund */
    color: #ffffff; /* Weiße Schriftfarbe */
    width: 250px; /* Feste Breite der Sidebar */
    padding: 1rem; /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box; /* Padding wird zur Breite addiert */
    position: fixed; /* Die Sidebar bleibt fixiert */
    height: 100vh; /* Volle Höhe für die Sidebar */
    top: 0; /* Positioniert die Sidebar oben */
    left: 0; /* Positioniert die Sidebar am linken Rand */
    overflow-y: auto; /* Ermöglicht Scrollen, falls der Inhalt länger ist */
}

.main {
    flex: 1; /* Nimmt den restlichen Platz ein */
    background-color: #ffffff; /* Weißer Hintergrund */
    padding: 20px; /* Interner Abstand für besseren Lesekomfort */
    box-sizing: border-box; /* Padding in die Gesamtbreite inkludieren */
    margin-left: 250px; /* Platzhalter für die Sidebar, damit der Main-Bereich nicht darunter verschwindet */
    line-height: 1.6; /* Bessere Lesbarkeit */
    text-align: left; /* Linksbündige Textausrichtung */
}

/* Footer improvements */
.footer {
    background-color: #343a40; /* Matches the header color */
    color: #ffffff; /* White text for contrast */
    text-align: center; /* Centers footer content */
    padding: 1rem; /* Spacing inside the footer */
    margin-top: auto; /* Pushes the footer to the bottom of the viewport */
    width: 100%; /* Full width for footer */
    clear: both; /* Makes sure footer is at the bottom */
    position: fixed; /* Fixes the footer to the bottom */
    bottom: 0; /* Ensures footer is always at the bottom */
    left: 0; /* Aligns to the left edge of the page */
}

/* Links styling */
.sidebar a, .header a, .footer a {
    color: #adb5bd; /* Light gray links */
    text-decoration: none; /* Removes underline */
    display: block; /* Makes link block-level for full width */
    margin: 0.5rem 0; /* Vertical spacing between links */
}

.sidebar a:hover, .header a:hover, .footer a:hover {
    color: #ffffff; /* Changes to white when hovered */
}

/* Section Improvements for Main Content */
section {
    padding: 15px 0; /* Padding within each section */
    margin-bottom: 20px; /* Space between sections */
    border-bottom: 1px solid #ddd; /* Light border to visually separate sections */
}

h1, h2, h3 {
    margin-top: 30px; /* Margin above headings */
    margin-bottom: 15px; /* Margin below headings */
    font-weight: bold; /* Ensures headings stand out */
}

.main-container p {
    margin-bottom: 20px; /* Margin below paragraphs for better spacing */
}

/* Modal styling */
.modal-content {
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input, 
.form-group textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
}

.checkbox-group {
    grid-column: span 2;
    display: flex;
    align-items: center;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}

button[type="button"] {
    background-color: #6c757d;
}

button:hover {
    background-color: #0056b3;
}

button[type="button"]:hover {
    background-color: #5a6268;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Stacks sidebar and main vertically */
        margin: 15px; /* Adjusted margin for small screens */
    }

    .sidebar {
        width: 100%; /* Full width for small screens */
        height: auto;
        position: relative; /* Relative positioning for better stacking */
    }

    .main {
        margin-left: 0; /* Resets margin */
    }

    .footer {
        width: 100%; /* Full width */
        margin-left: 0; /* Aligns with main content */
        position: relative; /* Moves footer to relative position for small screens */
    }
}