/* Grundlayout */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ECEFF1;
    color: #333;
    display: flex;
    min-height: 100vh;
}

button, .button {
    display: inline-block;
    background-color: #37474F;       /* Primärfarbe */
    color: #ffffff;                  /* Weiße Schrift */
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s; /* Transition für Hover-Effekt und Schatten */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);         /* Schattierung */
}

.button:hover {
    background-color: #5f6c72;       /* Hellere Farbe beim Hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);         /* Tieferer Schatten beim Hover */
}

table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

th {
    background-color: #37474F;
    color: #ffffff;
    padding: 5px 15px;
    text-align: left;
}

td {
    padding: 5px 15px;
    border: 1px solid #dddddd;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

/* Kompakte Tabelle (z.B. Logfile-Übersicht): weniger Padding, schmalere Spalten. */
.compact-table {
    font-size: 13px;
}
.compact-table th,
.compact-table td {
    padding: 3px 8px;
    white-space: nowrap;
}
.compact-table td.actions {
    white-space: nowrap;
}
.compact-table td.actions .button {
    margin-right: 4px;
}

/* Top-Navigation */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #37474F;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.top-nav .left-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-nav .brand {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}

.top-nav .left-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.top-nav .left-links a:hover {
    text-decoration: underline;
}

/* Layout für Seiteninhalt */
.content-wrapper {
    display: flex;
    width: 100%;
    margin-top: 60px; /* Abstand zur Top-Navigation */
}

.sidebar a {
    color:#333;
    text-decoration: none;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background-color: #ECEFF1;
    color: #000;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    height: calc(100vh - 60px); /* Höhe der Top-Navigation abziehen */
    position: fixed;
    top: 60px;
    left: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    padding: 15px 20px;
    cursor: pointer;
}

.sidebar ul li:hover {
    background-color: #ccc;
}

/* Hauptinhalt */
.main-content {
    margin-left: 250px;
    padding: 20px;
    flex-grow: 1;
    background-color: #ECEFF1;
    min-height: calc(100vh - 60px);
}

/* Beispielinhalt */
.main-content h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.main-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Login Page */
.login-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f6f8;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container für das Login-Formular */
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
}

.login-container h2 {
    color: #333333;
    margin-bottom: 20px;
    font-size: 24px;
}

/* Stil der Eingabefelder */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"],
.login-container input[type="number"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Button Stil */
.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #5f6bc1;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.login-container button:hover {
    background-color: #4a58a1;
}

/* Optional: Stil für kleine Hinweise/Links */
.login-container .forgot-password {
    margin-top: 15px;
    display: block;
    font-size: 14px;
    color: #5f6bc1;
    text-decoration: none;
}

.login-container .forgot-password:hover {
    text-decoration: underline;
}

/* Farben */
.ok {
    background-color: #4CAF70;
}
.warn {
    background-color: #FFB300;
}
.critical {
    background-color: #E53935;
}
.unknown {
    background-color: #9E9E9E;
}
/* Deaktivierte Projekte/Server in den Konfig-Listen dezent abblenden */
tr.inactive {
    opacity: 0.55;
}

/* Umschalter über einer Tabelle (z.B. Monitoring: alle vs. nur Probleme) */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;             /* Luft zur Tabelle — die Buttons werfen einen Schatten */
    font-size: 13px;
}
.filter-bar .button {
    background-color: #90A4AE;       /* nicht gewählt: gedämpft */
}
.filter-bar .button.selected {
    background-color: #37474F;       /* gewählt: Primärfarbe */
}
.filter-bar .hint {
    color: #607D8B;
}
.primary {
    background-color: #37474F;
}
.secondary {
    background-color: #ECEFF1;
}

/* Container für das gesamte Formular */
.form-container {
    max-width: 500px;
    /* margin: 0 auto; */
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Allgemeine Feld-Eigenschaften */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="submit"],
input[type="number"],
textarea,
select {
    /* width: 100%; */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}

/* Style für Submit-Button */
input[type="submit"] {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Fehlermeldungen */
.form-error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #dc3545;
}

input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.25);
}

/* Optional: Platzierung von Fehlermeldungen */
.form-error-message {
    color: #dc3545;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Responsivität für kleinere Bildschirme */
@media (max-width: 600px) {
    .form-container {
        padding: 15px;
    }

    input[type="submit"] {
        font-size: 16px;
        padding: 10px;
    }
}

/* Verlaufsspalte der Monitoring-Übersicht (Messgüte).
   Bewusst NICHT die Status-Farben (.ok/.warn/.critical) wiederverwendet:
   Grün und Rot bedeuten auf einer Monitoring-Seite Zustand, nicht Verdacht.
   Ein Verdacht bekommt deshalb eine eigene, zurückhaltende Auszeichnung. */
.compact-table td.quality {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #607D8B;
}

.compact-table td.quality.flagged {
    color: #37474F;
    font-weight: 600;
    border-left: 3px solid #90A4AE;
}

/* Legende unter der Monitoring-Tabelle.
   Erklärt die Spalte „Verlauf". Der Tooltip an der Zelle hilft nur dem, der
   ihn zufällig trifft — eine Zahl wie „2824/0" ist ohne Erklärung nicht
   selbsterklärend, und eine Kennzahl, die niemand liest, wirkt nicht. */
.table-legend {
    margin: 18px 0 8px;
    max-width: 900px;
    font-size: 13px;
    color: #546E7A;
    line-height: 1.5;
}

.table-legend p {
    margin: 0 0 8px;
}

.table-legend dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    align-items: baseline;
}

.table-legend dt {
    font-weight: 600;
    color: #37474F;
    white-space: nowrap;
}

.table-legend dd {
    margin: 0;
}

.table-legend code {
    background: #ECEFF1;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
    white-space: nowrap;
}

.table-legend .legend-why {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ECEFF1;
}

/* Auf schmalen Fenstern untereinander statt zweispaltig. */
@media (max-width: 800px) {
    .table-legend dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .table-legend dt {
        margin-top: 8px;
    }
}

/* Hinweis auf der Monitoring-Übersicht: abgelehnte Berichte ohne Zuordnung.
   Bewusst KEINE Status-Farbe (.critical) — das hier ist kein Zustand eines
   überwachten Systems, sondern ein Hinweis auf etwas, das in der Liste
   darunter fehlt. Deshalb eine eigene, deutlich sichtbare, aber neutrale
   Auszeichnung. */
.notice-unassigned {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 4px solid #FFA000;
    background: #FFF8E1;
    color: #5D4037;
    font-size: 13px;
    max-width: 900px;
}

.notice-unassigned a {
    margin-left: 6px;
    white-space: nowrap;
}

/* Quellenspalte der CSP-Whitelist.
   Eine Direktive hat leicht fünfzig erlaubte Quellen; mit dem nowrap der
   compact-table wuchs die Seite dadurch auf über 6000 px Breite und war
   nur noch seitwärts scrollend lesbar (gemessen an ComputaCenter). Diese
   eine Spalte darf deshalb umbrechen und ist in der Breite gedeckelt —
   der Rest der Tabelle bleibt kompakt. */
.compact-table td.sources {
    white-space: normal;
    max-width: 820px;
}

/* Eine Quelle je Zeile liest sich deutlich besser als eine durch Leerzeichen
   getrennte Wurst (Erich, 03.09.2026). Damit script-src mit 49 Quellen die
   Zeile nicht meterhoch macht, laeuft die Liste mehrspaltig — die Spalten
   entstehen nach verfuegbarer Breite, nicht in fester Zahl. */
.compact-table td.sources ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Die Breite MUSS hier stehen und nicht auf der Zelle: eine Tabellenzelle
       mit automatischer Breite schrumpft auf ihren Inhalt, und dann hat
       `columns` nichts zu verteilen — die Liste blieb einspaltig und die
       Seite 5949 px hoch (gemessen). Mit fester Breite auf der Liste selbst
       ergeben sich vier Spalten. */
    width: 800px;
    columns: 15em;
    column-gap: 24px;
}
.compact-table td.sources li {
    overflow-wrap: anywhere;
    line-height: 1.5;
    break-inside: avoid;
}