:root {
    /* Color Variables */
    --main-color: 25, 25, 25;
    --grey: 75, 75, 75;
    --light-grey: 125, 125, 125;
    --signal-color: 227, 6, 19;
    --white: 255, 255, 255;

    --text-standard-color: rgba(var(--main-color)1.0);
    --text-signal-color: rgba(var(--signal-color)1.0);

    /* Text Variables */
    --hero-text: "hero-text", system-ui, sans-serif;
    --navigation-text: "navigation-text", system-ui, sans-serif;
    --heading-text: "heading-text", system-ui, sans-serif;
    --text-light: "text-light", system-ui, sans-serif;
    --text-regular: "text-regular", system-ui, sans-serif;
    --text-bold: "text-bold", system-ui, sans-serif;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--text-regular) !important;
    color: var(--text-standard-color);
    font-size: 1rem;
    background-color: rgb(50, 50, 50) !important;
}

h1 {
    font-family: var(--hero-text) !important;
    color: rgb(var(--grey), 1.0) !important;
    font-size: 2rem !important;
}

h2 {
    margin-bottom: 20px;
    font-family: var(--hero-text) !important;
    text-transform: uppercase !important;
    color: rgb(var(--white), 1.0) !important;
    text-align: center !important;
    font-size: 2rem;
}

/* Header-Stile */
header {
    background-color: rgba(var(--white), 1.0);
    border-bottom: 1px solid rgba(var(--white), 1.0);;
}

header img {
    height: 40px;
    margin-right: 10px;
}

#controlbar {
    background-color: rgba(75, 75, 75, 1.0);
}

/* Monat- und Jahresangabe */
#monat-jahr {
    font-size: 1.5rem;
    color: rgba(var(--white), 1.0);
}

@media screen and (max-width: 1200px) {
    #monat-jahr {
        width: 100%;
        text-align: right;
        margin: 0px !important;
    }
}

/* Suchleiste */
#container-search {
    width: 500px !important;
}

#searchInput {
    font-size: 16px;
    border-radius: 4px 0px 0px 4px !important;
}

#clearSearch {
    border-radius: 0px 4px 4px 0px !important;
    background-color: rgba(var(--white), 1.0) !important;
}

#clearSearch:hover {
    background-color: rgba(var(--white), 0.75) !important;
}

/* Stil für die Suchleiste */
.search-section {
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    #container-search {
        display: none;
    }
}

/* Dropdown-Menü im Header */
header .dropdown {
    margin-right: 20px;
}

.dropdown-menu a {
    font-size: 1rem !important;
}

.monatsnavigation a,
.monatsnavigation button {
    padding: 5px 10px 5px 10px !important;
    font-size: 16px !important;
}

@media screen and (max-width: 1400px) {
    #container-search {
        width: 300px !important;
    }
}

@media screen and (max-width: 1200px) {
    .container-search {
        width: 300px !important;
    }
}

/* Stil für klickbare Mitarbeiterzellen */
.mitarbeiter-clickable {
    cursor: pointer !important;
}

.highlight-project td {
    background-color: rgb(193, 255, 162) !important;
    position: relative;
    z-index: 99 !important;
}

@media screen and (max-width: 1200px) {
    .monatsnavigation {
        width: 100%;
    }

    /* Standardmäßig (Bildschirmbreite < 1200px): Nur Icons anzeigen, Text ausblenden */
    .monatsnavigation .button-text {
        display: none;
    }

    .monatsnavigation .btn i {
        display: inline-block;
    }
}

/* Ab Bildschirmbreite von 1200px: Nur Text anzeigen, Icons ausblenden */
@media screen and (min-width: 1200px) {
    .monatsnavigation .button-text {
        display: inline;
    }

    .monatsnavigation .btn i {
        display: none;
    }

    /* Optional: Anpassung der Button-Größe und Ausrichtung */
    .monatsnavigation .btn {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 5px 10px;
    }
}

/* Grundlegende Tabellenstile */
table {
    width: 100%;
    margin: 0px !important;
    table-layout: fixed;
    border-collapse: collapse;
    overflow: hidden;
    font-size: 0.875rem;
}

thead {
    font-family: var(--text-bold);
}

tbody {
    height: 1rem;
    line-height: 1rem;
}

th,
td {
    width: 50px;
    border: 1px solid rgba(var(--main-color)1.0);
    text-align: center;
    padding: 5px;
    overflow: visible;
}

/* Erste Spalte auf 200px setzen */
th:first-child,
td:first-child {
    width: 150px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* Zweite Spalte auf 200px setzen */
th:nth-child(2),
td:nth-child(2) {
    width: 180px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* Zweite Spalte auf 200px setzen */
th:nth-child(2),
td:nth-child(2) {
    width: 180px;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* Zellen ab der dritten Spalte (Tage des Monats) */
th:nth-child(n+3),
td:nth-child(n+3) {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Formatierung für die Labels in der ersten Spalte */
td:first-child {
    font-family: var(--text-bold);
}

/* Stil für die bearbeitbaren Zellen */
.editable-cell,
.editable-cell-mitarbeiter,
.editable-cell-hotel,
.editable-cell-urlaub {
    cursor: pointer;
}

.editable-cell select,
.editable-cell-mitarbeiter select,
.editable-cell-hotel select,
.editable-cell-fahrzeug select {
    width: 100%;
    box-sizing: border-box;
    height: 20px !important;
}

/* Hover-Effekt für bearbeitbare Zellen */
.editable-cell:hover,
.editable-cell-mitarbeiter:hover,
.editable-cell-hotel:hover,
.editable-cell-fahrzeug:hover,
.editable-cell-urlaub:hover {
    background-color: rgb(145, 200, 240) !important;
}

/* Stil für die Aktions-Icons */
.action-icon {
    margin-left: 10px;
    color: rgba(var(--main-color)1.0);
    text-decoration: none;
    vertical-align: middle;
}

.action-icon:hover {
    color: darkblue;
}

/* Größe der SVG-Icons */
.action-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Stil für die Trennlinie unter jedem Projekt */
.separator-row td {
    height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    border-bottom: 2px solid rgba(180, 180, 180, 1.0) !important;
    /* Schwarze Trennlinie */
}

/* Farben für alternierende Projekthintergründe */
.bg-project-1 {
    background-color: rgba(250, 250, 250, 1.0) !important;
}

.bg-project-2 {
    background-color: rgba(240, 240, 240, 1.0) !important;
}

.table {
    --bs-table-bg: unset !important;
}

/* Stil für die Zeitraum-Zellen */
.zeitraum-cell {
    background-color: lightblue !important;
    overflow: visible !important;
    word-wrap: break-word;
}

/* Modal-Stile */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    /* Could be more or less, depending on screen size */
    border-radius: 8px;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
}

.modal-select {
    width: 100%;
    overflow-y: auto;
    margin-bottom: 15px;
}

.modal-buttons {
    text-align: right;
}

.modal-buttons button {
    padding: 8px 16px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-buttons .save-button {
    background-color: #28a745;
    color: white;
}

.modal-buttons .cancel-button {
    background-color: #dc3545;
    color: white;
}

/* Optional: Anpassung der Modal-Größe */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
    }
}

/* Mitarbeiter-Tabelle Styling */
.mitarbeiter-table h2 {
    margin: 30px 0px 15px 0px;
}

.mitarbeiter-table .table {
    margin-bottom: 0;
}

.mitarbeiter-table th,
.mitarbeiter-table td {
    text-align: center;
    vertical-align: middle;
}

.table-responsive {
    background-color: rgba(200, 200, 200, 1.0) !important;
}

.mitarbeiter-table .table {
    margin-bottom: 0;
}

.mitarbeiter-table th,
.mitarbeiter-table td {
    text-align: center;
    vertical-align: middle;
    padding: 8px;
}

.mitarbeiter-table th:first-child,
.mitarbeiter-table td:first-child {
    text-align: left;
    /* Mitarbeitername linksbündig */
}

.mitarbeiter-table th:nth-child(2),
.mitarbeiter-table td:nth-child(2) {
    text-align: center;
    /* Kürzel zentrieren */
}

/* Roter Rahmen für Mitarbeiter mit mehreren Projekten an einem Tag */
.mitarbeiter-table .multiple-projects {
    box-shadow: inset 0 0 0 2px rgb(var(--signal-color)) !important;
}

/* Hintergrundfarben für die verschiedenen Zellentypen */
.cell-arbeitsschritte {
    background-color: #e0ffe0 !important;
    /* Hellgrün */
}

.cell-mitarbeiter {
    background-color: #e0f0ff !important;
    /* Hellblau */
}

.cell-hotel {
    background-color: #fff0e0 !important;
    /* Hellorange */
}

.cell-fahrzeug {
    background-color: #f0e0ff !important;
    /* Helllila */
}

/* Urlaub-Styling */
.urlaub-row {
    background-color: rgba(245, 245, 245, 0.8) !important;
}

.urlaub-header {
    background-color: rgba(235, 235, 235, 0.9) !important;
    font-weight: bold;
    color: #666;
    border: 1px solid rgb(200, 200, 200) !important;
}

.urlaub-cell {
    background-color: rgb(235, 235, 235) !important;
    color: #333;
    border: 1px solid rgb(200, 200, 200) !important;
}

.urlaub-cell:not(:empty) {
    background-color: rgba(255, 200, 200, 0.8) !important;
    color: #000;
    font-weight: bold;
}

.urlaub-collision:not(:empty) {
    background-color: rgba(var(--signal-color), 1.0) !important; /* Signal Rot */
    color: white !important;
    font-weight: bold !important;
}

/* Tabelle */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(220, 220, 220, 1.0)
}

#liste-mitarbeiter tr td:first-child,
#liste-mitarbeiter tr th:first-child {
    width: 50px !important;
}

#liste-mitarbeiter tbody tr {
    background-color: rgba(220, 220, 220, 1.0) !important;
}

.projekte-table {
    margin: 0px 20px 20px 20px;
}

.mitarbeiter-table>h3,
.event-table>h3 {
    text-align: center;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
}

/* Für Firefox */
.projekte-table {
    scrollbar-width: none;
    /* Versteckt die Scrollbar */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

/* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
.projekte-table::-webkit-scrollbar {
    display: none !important;
    /* Versteckt die Scrollbar */
}

.weekend-header {
    color: red !important;
}

#header-projekte {
    position: sticky;
    top: 0;
    overflow-x: hidden;
    z-index: 1000;
}

#title-mitarbeiter,
#title-projekte {
    margin: 15px 0px 15px 0px;
}

/* Login */
.container-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding-top: 10%;
}

.login-box {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background-color: rgba(var(--white), 1.0);
    border-radius: 8px;
}

.hidden {
    display: none;
}

/* Projektübersicht */
#form-projektuebersicht label {
    color: rgba(var(--white), 1.0);
}

#auswertungen th:first-child,
#auswertungen td:first-child,
#auswertungen th:nth-child(2),
#auswertungen td:nth-child(2) {
    width: 50px;
}

#auswertungen thead th {
    background-color: rgba(var(--light-grey), 1.0);
    color: rgba(var(--white), 1.0) !important;
}

/* Zoom-Steuerung */
.zoom-controls {
    background-color: rgba(50, 50, 50, 0.8);
    border-top: 1px solid rgba(80, 80, 80, 0.5);
    border-bottom: 1px solid rgba(80, 80, 80, 0.5);
}

.zoom-btn.active {
    background-color: rgba(var(--signal-color), 0.8) !important;
    border-color: rgba(var(--signal-color), 1.0) !important;
    color: white !important;
}

/* Zoom-Klassen für das gesamte Fenster */
.zoom-80 {
    zoom: 0.8;
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 125%;
    height: 125%;
    overflow-x: hidden;
    position: fixed;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.8);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin: 0 0;
}

.zoom-90 {
    zoom: 0.9;
    transform: scale(0.9);
    transform-origin: 0 0;
    width: 111.11%;
    height: 111.11%;
    overflow-x: hidden;
    position: fixed;
    -moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.9);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: 0 0;

}

/* Anpassungen für den Container bei verschiedenen Zoom-Stufen */
.zoom-80 .container-fluid,
.zoom-90 .container-fluid {
    min-height: 100% !important;
    overflow: auto;
}

/* Anpassungen für die Scrollbars bei verschiedenen Zoom-Stufen */
.zoom-80::-webkit-scrollbar,
.zoom-90::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.zoom-80::-webkit-scrollbar-thumb,
.zoom-90::-webkit-scrollbar-thumb {
    background-color: rgba(var(--signal-color), 0.5);
    border-radius: 4px;
}

.zoom-80::-webkit-scrollbar-track,
.zoom-90::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.3);
}

/* Firefox-spezifische Scrollbar-Anpassungen */
.zoom-80,
.zoom-90 {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--signal-color), 0.5) rgba(50, 50, 50, 0.3);
}

/* Anpassungen für die sticky-top Elemente bei verschiedenen Zoom-Stufen */
.zoom-80 .sticky-top,
.zoom-90 .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Transition für sanfte Zoom-Änderungen */
body {
    transition: transform 0.3s ease-in-out;
}

/* CSS für die Statusanzeigen */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}
.status-warning {
    background-color: orange;
}
.status-success {
    background-color: green;
}

.current-day {
    border: 2px solid #0d6efd !important;
}