/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling with Sofia+sans font */
body {
    font-family: 'Sofia+sans', sans-serif;
    color: #000000;
    background-color: #f0f0f0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Form element styling */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="password"],
textarea {
    font-size: 12pt;
    padding:4px;
    border: 1px solid rgb(9, 100, 185);
}
textarea {
    width:100%;

}

/* Header styling */
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    width: 100%;
}

/* Add this to your styles.css */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Pushes logo to left and user-info to right */
    align-items: center; /* Vertically aligns items in the middle */
    padding: 10px 20px; /* Adjust padding as needed */
}

.logo {
    height: 50px; /* Or your desired logo height */
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info span {
    margin-right: 10px; /* Space between name and picture */
    font-weight: bold;
}

.user-picture {
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    border-radius: 50%; /* Makes it circular */
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.user-placeholder-icon {
    display: inline-block; /* Or flex, if you need more complex alignment */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc; /* Placeholder background */
    color: #333; /* Placeholder text color */
    text-align: center;
    line-height: 40px; /* Vertically center text if single line */
    font-size: 0.8em; /* Adjust as needed */
}


.text-logo {
    font-family: 'Sofia Sans', sans-serif; /* Or any font you prefer */
    font-size: 2.5em; /* Adjust size as needed */
    font-weight: bold;
    color: white; /* Adjust color as needed */
    border: 1px solid white;
    border-radius: 8px;
    padding: 4px;
    /* Add other styles like margin, padding, etc. */
}


/* Main content styling */
main {
    flex: 1;
    background-color: #e0e0e0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.content-section {
    background-color: #f4f4f4;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-section h2 {
    color: #000000;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid gray;
    display: flex; /* Allows aligning items on the same line */
    justify-content: space-between; /* Pushes h2 text to left and button to right */
    align-items: center; /* Vertically aligns text and button */
}
.content-section h3 {
    margin-bottom:8px;
}

.section-action-button {
    display: inline-block; /* Ensures padding and margin are applied correctly */
    padding: 8px 15px; /* Increased padding for better touch/click target and visual balance */
    border-radius: 5px; /* Makes it rounded */
    border: 1px solid #4068cb; /* Darker blue border, harmonizing with background */
    background-color: #5079eb; /* Original blue background */
    color: white; /* Explicitly black text for good contrast on blue */
    cursor: pointer;
    font-weight: bold;
    margin-left: 10px; /* Adds some space between the title and button */
    text-align: center;
    text-decoration: none; /* In case it's ever an <a> tag styled as a button */
}

.section-action-button:hover {
    background-color: #3a5db0; /* Darker blue on hover */
    color: #ffffff; /* White text for high contrast on darker blue */
    border-color: #2c4a8d; /* Even darker border on hover */
}

.content-section p {
    color: #443333;
    line-height: 1.3;
    margin-bottom: 0.75rem; /* Added space after paragraphs */
}

.content-section ul li {
    line-height: 1.3;
    margin-bottom: 0.75rem; /* Added space after paragraphs */
}

/* In Ihrer zentralen CSS-Datei (z.B. css/main.css oder css/style.css) */

.data-table {
    width: 100%;
    border-collapse: collapse; /* Entfernt doppelte Ränder zwischen Zellen */
    margin-top: 1em;          /* Etwas Abstand über der Tabelle */
    margin-bottom: 1em;       /* Etwas Abstand unter der Tabelle */
    font-size: 0.9em;         /* Etwas kleinere Schrift für Tabellendaten */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: ein leichter Schatten */
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;   /* Heller grauer Rand für Zellen */
    padding: 4px 4px;       /* Innenabstand der Zellen (oben/unten rechts/links) */
    text-align: left;         /* Text linksbündig ausrichten */
    vertical-align: top;      /* Vertikale Ausrichtung oben, falls Zellen unterschiedlich hoch sind */
}

.data-table th {
    background-color: #f2f2f2; /* Heller Grauton für Tabellenköpfe */
    color: #333;               /* Dunklere Schriftfarbe für Köpfe */
    font-weight: bold;         /* Fettschrift für Köpfe */
    white-space: nowrap;       /* Verhindert Umbruch in Kopfzeilen, falls gewünscht */
}

.data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra-Streifen für bessere Lesbarkeit (jede zweite Zeile) */
}

.data-table tbody tr:hover {
    background-color: #f1f1f1; /* Hintergrundfarbe beim Überfahren mit der Maus */
}

/* Optional: Spezifisches Styling für Aktionslinks innerhalb der Tabelle */
.data-table .actions {
    text-align: center; /* Aktionen zentrieren, falls gewünscht */
    white-space: nowrap;
}

.data-table .actions a {
    margin: 0 5px; /* Kleiner Abstand zwischen Aktionslinks */
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    /* Beispiel für Link-Styling */
    /* color: #007bff; */
    /* background-color: #e7f3ff; */
}

.data-table .actions a:hover {
    text-decoration: underline;
    /* background-color: #d0e7ff; */
}





.infobox {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9em;
}

.infobox p {
    margin: 0;
    padding: 0;
}

/* Keyframe-Animation für den Warnhinweis-Rahmen */
@keyframes pulse-warning-border {
    0% {
        border-color: #faebcc;
    }
    50% {
        border-color: #f3c678; /* Stärkerer Gold-/Orangeton */
    }
    100% {
        border-color: #faebcc;
    }
}

/* Keyframe-Animation für den Infohinweis-Hintergrund */
@keyframes pulse-info-background {
    0% {
        background-color: #d9edf7;
    }
    50% {
        background-color: #a9d7e9; /* Stärkerer, satterer Blauton */
    }
    100% {
        background-color: #d9edf7;
    }
}

.infobox-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    animation: pulse-warning-border 2s infinite ease-in-out; /* Animation anwenden */
}

.infobox-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    animation: pulse-info-background 2.5s infinite ease-in-out; /* Animation anwenden */
}

.infobox-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.infobox-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.section-icon {
    margin-right: 8px; /* Space between icon and text */
    vertical-align: middle; /* Align icon nicely with the text */
    /* font-size: 24px; */ /* Adjust size if needed, h2 font size might be enough */
    /* color: #333; */ /* Adjust color if needed */
}

.material-icons {padding-bottom:4px;}



/* Responsive sections that stack */
.responsive-section {
    flex: 1 1 300px;
    min-width: 0;
}

/* Full-width sections that never stack */
.full-width-section {
    flex: 0 0 100%;
    width: 100%;
}

/* Feature section styling for side-by-side divs */
.feature-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
    gap: 1.5rem; /* Space between feature items */
    margin-bottom: 1.5rem; /* Space below the container */
}

.feature-item {
    flex: 1 1 300px; /* Grow, shrink, basis of 300px. Allows items to take equal space and wrap. */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
    background-color: #ffffff; /* Optional: give items a background */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: add a subtle shadow */
}

.feature-item img {
    max-width: 100%; /* Make images responsive within their container */
    height: auto;
    margin-bottom: 0.75rem; /* Space between image and caption */
}

/* Styling for feature lists (ul/li) */
.feature-list {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
    margin-top: 1rem; /* Space above the list */
}

.feature-list-item {
    display: flex; /* Align icon and text */
    align-items: center; /* Vertically center icon and text */
    margin-bottom: 0.75rem; /* Space between list items */
    line-height: 1.6; /* Improve readability */
}

/* Replaced Font Awesome icon with a simple text bullet or styled span */
.feature-bullet {
    color: #27ae60; /* A nice green color for checkmarks */
    margin-right: 0.75rem; /* Space between icon and text */
    font-weight: bold;
}

/* Flash Message Styling */
.flash-message {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    width: 100%; /* Span full width within its container */
}

.flash-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.flash-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.flash-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
/* Footer styling */
footer {
    background-color: #2c3e50;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    width: 100%;
    position: relative;
    bottom: 0;
}
footer a {
    color: #ffffff;
    text-decoration: none;
}


/* Responsive design for responsive sections */
@media (max-width: 900px) {
    .responsive-section {
        flex: 1 1 45%;
    }
}

@media (max-width: 600px) {
    .responsive-section {
        flex: 1 1 100%;
    }
}

/* Responsive design for header on small screens */
@media (max-width: 400px) {
    .user-name,
    .user-balance {
        font-size: 1rem;
    }
    .user-icon {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}
@media screen and (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
}