/* ============================= */
/* Allgemeines Layout & Farben   */
/* ============================= */

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.logout-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ============================= */
/* Große und auffällige Zahlen   */
/* ============================= */
.big-number {
    font-size: 1.25rem;  /* Größere Schriftgröße */
    font-weight: bold;  /* Fett */
    color: #333;        /* Dunkle Farbe für bessere Lesbarkeit */
    margin: 0;
}

/* ============================= */
/* Karten-Design (Allgemein)     */
/* ============================= */
.card {
    border: 1px solid #e0e0e0; /* Dezente Umrandung */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Hover-Effekt */
}

/* 🌟 Sektionstitel */
.section-title {
    font-weight: bold;
    color: #343a40;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* 📊 Statistikkarten */
.stat-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    min-height: 100px;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 🎨 Icon-Bereich */
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 15px;
    font-size: 1.5rem;
}

/* 📄 Inhalt der Statistik-Karten */
.stat-content h6 {
    font-weight: 600;
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem; /* Kleinere Schriftgröße für alle Titel */
}

/* 🎯 Spezielle Anpassung für "Ältester Token" und "Neuester Token" */
.stat-token-title {
    font-size: 0.8rem; /* Noch kleinere Schrift für bessere mobile Darstellung */
    white-space: nowrap; /* Verhindert Umbrüche */
}

/* 📱 Mobile Optimierung */
@media (max-width: 576px) {
    /* Zwei Spalten für Token-Daten */
    .stat-token {
        flex: 0 0 50%; /* Jeweils 50% Breite */
        max-width: 50%;
    }

    .stat-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stat-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Kleinere Schriftgröße für Zahlen */
    .stat-content .big-number {
        font-size: 1.2rem;
    }
}

/* 🎨 Abwechselnde Hintergrundfarben für Listenelemente */
.list-group-item:nth-child(odd) {
    background-color: #f8f9fa; /* Hellgrau für ungerade Zeilen */
}

.list-group-item:nth-child(even) {
    background-color: #ffffff; /* Weiß für gerade Zeilen */
}

/* 📱 Mobile Ansicht: Gleichmäßige Darstellung */
@media (max-width: 576px) {
    .list-group-item {
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* 🎨 Abwechselnde Farben für die Listeneinträge */
.list-group-item:nth-child(odd) .d-flex.flex-column.flex-md-row {
    background-color: #ffffff; /* Hellgrau für ungerade Zeilen */
}

.list-group-item:nth-child(even) .d-flex.flex-column.flex-md-row {
    background-color: #f8f9fa; /* Weiß für gerade Zeilen */
}

/* ✨ Optimierung des Hauptcontainers */
.d-flex.flex-column.flex-md-row {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sanfter Schatten */
    transition: transform 0.2s ease-in-out;
}

/* 📱 Mobile Optimierung */
@media (max-width: 576px) {
    .d-flex.flex-column.flex-md-row {
        padding: 10px;
    }
}

/* ============================= */
/* Design für Statistiktabellen */
/* ============================= */

/* 📊 Tabellenstruktur nur für Bayes- und DB-Statistiken */
#bayes-stats-table, 
#db-stats-table {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Tabellenkopf für beide Tabellen */
#bayes-stats-table thead th, 
#db-stats-table thead th {
    background-color: #343a40 !important;  /* Dunkler Hintergrund */
    color: #ffffff !important;             /* Weiße Schrift */
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px;
}

/* Tabelleninhalt für beide Tabellen */
#bayes-stats-table tbody td, 
#db-stats-table tbody td {
    padding: 15px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 🏷️ Badge-Design nur für Statistiken */
#bayes-stats-table .badge, 
#db-stats-table .badge {
    font-size: 1rem;
    padding: 10px 15px;
    border-radius: 10px;
}

/* 📱 Mobil: Tabellen sauber und kompakt darstellen */
@media (max-width: 576px) {
    /* 🗂️ Tabellenstruktur vereinheitlichen */
    #bayes-stats-table, 
    #db-stats-table {
        font-size: 0.8em;               /* Kleinere Schriftgröße für bessere Übersicht */
        margin-bottom: 0 !important;    /* Kein unnötiger Abstand */
        padding-bottom: 0 !important;
        border: none !important;
        box-shadow: none !important;    /* Keine Schatten */
        width: 100%;                   /* Volle Breite ausnutzen */
    }

    /* 🚫 Letzte Zeile ohne zusätzliche Abstände */
    #bayes-stats-table tr:last-child, 
    #db-stats-table tr:last-child {
        margin-bottom: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* 📏 Kompakte Zeilen mit leichter Abrundung */
    #bayes-stats-table tbody tr, 
    #db-stats-table tbody tr {
        margin-bottom: 10px;
        padding-bottom: 0;
        border-radius: 8px;
        background-color: #f9f9f9;  /* Leicht abgesetzter Hintergrund */
    }

    /* ❌ Leere Zellen ausblenden */
    #bayes-stats-table td:empty, 
    #db-stats-table td:empty {
        display: none;
    }

    /* 🛑 Entferne äußere Ränder */
    .table-responsive {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    /* 🔲 Keine unnötigen Ränder */
    .table {
        border-collapse: collapse;
        border: none;
    }

    /* 🔄 Abgerundete Ecken nur an der Tabelle */
    #bayes-stats-table, 
    #db-stats-table {
        border-radius: 12px;
        overflow: hidden;
    }

    /* 🕵️‍♂️ Spalten ausblenden (z.B. Ältester/Neuester Token) */
    .hide-mobile {
        display: none !important;
    }

    /* 📌 Überschriften (Icons & Text) sichtbar und kleiner */
    #bayes-stats-table thead th i,
    #db-stats-table thead th i {
        font-size: 0.8rem !important; /* Kleinere Icons */
        margin-right: 4px; /* Weniger Abstand zum Text */
    }

    /* 🏷️ Beschriftungen einfügen */
    #bayes-stats-table td::before,
    #db-stats-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        color: #6c757d;
        margin-bottom: 5px;
    }

    /* 📏 Badges anpassen */
    #bayes-stats-table .badge, 
    #db-stats-table .badge {
        font-size: 0.8rem !important; /* Kleinere Badges */
        padding: 6px 10px;
    }
}

/* ============================= */
/* Spam-Details-Tabelle */
/* ============================= */

/* 📊 Stil für die Spam-Details-Tabelle */
.spam-details-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* 🏷️ Kopfzeile mit dunklem Hintergrund */
.spam-details-table thead th {
    background-color: #343a40;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
}

/* 📝 Tabelleninhalt */
.spam-details-table tbody td:first-child,
.spam-details-table thead th:first-child {
    white-space: nowrap;   /* Kein Umbruch */
    width: 1%;             /* Passt sich dem Inhalt an */
    max-width: none;       /* Keine Begrenzung */
    text-align: left;      /* Linksbündig für bessere Lesbarkeit */
    padding-left: 15px;    /* Etwas mehr Abstand */
}

/* 🖱️ Hover-Effekt */
.spam-details-table tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.3s ease-in-out;
}

/* 🎨 Score-Zellen farbig */
.spam-details-table .score-cell {
    font-weight: bold;
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
}

/* ✂️ Text-Kürzung */
.spam-details-table .truncate-text {
    white-space: normal; /* Zeilenumbruch zulassen */
    overflow: visible;
    text-overflow: unset;
}

/* 📱 Optimierte Darstellung der Spam-Details-Tabelle auf mobilen Geräten */
@media (max-width: 576px) {
    /* 🛑 Kopfzeile ausblenden */
    .spam-details-table thead {
        display: none;
    }

    /* 📦 Tabellenstruktur für mobile Ansicht */
    .spam-details-table,
    .spam-details-table tbody,
    .spam-details-table tr,
    .spam-details-table td {
        display: block;
        width: 100%;  /* Jede Zelle nutzt 100% der Breite */
        box-sizing: border-box;
    }

    /* 📝 Jede Tabellenzeile als Box gestalten */
    .spam-details-table tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #dee2e6;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 10px;
        border-radius: 8px;
        background-color: #fff;
    }

    /* 🏷️ Dynamische Labels für jede Zelle */
    .spam-details-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        color: #6c757d;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    /* 📏 Einheitliche Zellendarstellung */
    .spam-details-table td {
        font-size: 0.9rem;
        text-align: left;
        padding: 8px 15px;
        border: none;
        width: 100%; /* Wichtig: Jede Spalte füllt die Breite */
    }

    /* 🚫 Vollständiges Entfernen versteckter Spalten */
    .spam-details-table .d-none,
    .spam-details-table .d-md-table-cell {
        display: none !important;
    }

    /* 🎨 Farbliche Hervorhebung für Score-Zellen */
    .spam-details-table .score-cell {
        font-weight: bold;
        border-radius: 5px;
        padding: 8px 12px;
        text-align: center;
        font-size: 1rem;
        width: 100%;  /* Score-Zellen ebenfalls auf volle Breite */
    }

    /* ✂️ Optimierte Text-Kürzung */
    .spam-details-table .truncate-text {
        white-space: normal;         /* Zeilenumbruch zulassen */
        overflow: visible;           /* Kein abgeschnittener Text */
        text-overflow: unset;        /* Keine Ellipsen (...) */
        background-color: #ffffff !important;  /* 💡 Weißer Hintergrund */
        padding-left: 0 !important;  /* Kein zusätzliches Padding */
        margin: 0 !important;        /* Kein zusätzlicher Abstand */
        border: none !important;     /* Keine Ränder */
        width: 100% !important;      /* Volle Breite */
        box-shadow: none !important; /* Keine Schatten */
    }
}

/* Kompaktere Karten */
.card h6 i {
    margin-right: 5px;
}

.card button {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
}

/* ============================= */
/* Navigation & Tabs             */
/* ============================= */

.nav-tabs .nav-link {
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    background-color: #007bff;
    color: #fff;
    border: none;
}

/* ============================= */
/* Modal-Optimierung             */
/* ============================= */

.modal-lg {
    max-width: 80%;
}

.modal-footer {
    justify-content: space-between;
}

/* ============================= */
/* Tabellen und Listen           */
/* ============================= */

.list-group-item {
    border: 1px solid #dee2e6;
}

.truncate-text {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .truncate-text {
        max-width: 80px;
    }
}

/* ============================= */
/* Iframes - Responsive Design   */
/* ============================= */

.iframe-container {
    width: 100%;
    overflow: hidden;
}

.responsive-iframe {
    width: 100%;
    height: 600px;
    border: none;
}

@media (max-width: 576px) {
    .iframe-container {
        width: 100vw;
        height: calc(600px * 0.6);
        overflow: hidden;
        position: relative;
    }

    .responsive-iframe {
        width: 125%;
        height: 600px;
        transform: scale(0.55);
        transform-origin: top left;
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ============================= */
/* Buttons - Einheitliche Größen */
/* ============================= */

.d-flex.gap-2 button,
form.d-flex.gap-2 button {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover-Effekte für Buttons */
.btn-warning:hover {
    background-color: #e0a800;
    color: #fff;
}

.btn-danger:hover {
    background-color: #c82333;
    color: #fff;
}

/* ============================= */
/* Action Buttons (Desktop/Mobil)*/
/* ============================= */

/* Desktop */
@media (min-width: 577px) {
    .action-buttons-container {
        align-items: flex-end;
    }

    .action-buttons,
    .info-buttons {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Mobil */
@media (max-width: 576px) {
    .action-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        width: 100%;
    }

    .action-buttons-container .badge {
        align-self: center !important;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .action-buttons,
    .info-buttons {
        flex-direction: row;
        justify-content: center !important;
        gap: 0.5rem;
    }

    .subject-dynamic-truncate {
        max-width: 100%;
    }
}

/* ============================= */
/* Betreff dynamisch kürzen      */
/* ============================= */

/* 📝 Betreff dynamisch kürzen */
.subject-dynamic-truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: bold;
}

/* 🌟 Kopfzeilen-Container */
.header-container {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
}

/* 🖼️ SVG-Logo-Stil */
.header-logo {
    width: 140px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

/* 📱 Mobile Ansicht: Logo kleiner skalieren */
@media (max-width: 576px) {
    .header-logo {
        width: 40px;  /* Kleinere Breite für mobile Geräte */
        height: auto;
    }
}

/* 🖥️ Tablet-Ansicht */
@media (min-width: 577px) and (max-width: 992px) {
    .header-logo {
        width: 80px;  /* Mittelgroß für Tablets */
        height: auto;
    }
}

/* 📝 Titel */
.header-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #0d6efd;
}

/* 👤 Benutzerinfo-Badge */
.user-info .badge {
    font-size: 0.9rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 30px;
    padding: 8px 15px;
}

@media (max-width: 576px) {
    .header-logo {
      max-height: 80px; /* Sicherstellen, dass das Logo auf Mobilgeräten groß genug ist */
    }
    /* Falls nötig, können Sie hier auch Abstände für den Benutzerbereich anpassen */
    .user-info {
      margin-right: 10px;
    }
  }

  
/* 🚪 Logout-Button */
.btn-outline-danger {
    border-radius: 30px;
    padding: 8px 16px;
    transition: all 0.3s ease-in-out;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    color: #ffffff;
}


@media (max-width: 576px) {
    /* Blendet beispielsweise die 4. Spalte (Empfänger) aus */
    #emailsTable th:nth-child(4),
    #emailsTable td:nth-child(4) {
        display: none;
    }
    
    /* Sie können auch andere Spalten oder Inhalte anpassen */
    #emailsTable th, #emailsTable td {
        font-size: 0.8rem;
        padding: 6px;
    }
}

@media (max-width: 576px) {
    #emailsTable th,
    #emailsTable td {
        font-size: 0.8rem;
        padding: 4px;
    }
}