/* ==========================================================================
   Globale Modal, Alert & Action Bar Styles (KI Beratungsassistent)
   ========================================================================== */

/* Basis-Overlay für alle Modals */
.ki-modal-overlay {
    display: none;
    position: fixed;
    z-index: 99998;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    
    /* NEU: Touch-Scrolling für das Overlay selbst zulassen, falls nötig */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Zentriertes Layout für Alerts und kleine Modals */
.ki-modal-overlay.flex-center {
    /*  display: flex; Sicherstellen, dass Flex aktiv ist, wenn diese Klasse genutzt wird */
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

/* Basis-Box für den Inhalt */
.ki-modal-box {
    background-color: #fff;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 5% auto; /* Standard-Abstand nach oben */
    
    /* NEU: Flex-Layout für die Box, damit der Header bleibt und der Body scrollt */
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Verhindert, dass das Modal unten aus dem Bild rutscht */
    overflow: hidden; /* Hält die runden Ecken sauber, das Scrollen übernimmt der Body */
}

/* Margin-Reset, wenn das Modal über Flexbox zentriert wird */
.ki-modal-overlay.flex-center .ki-modal-box {
    margin: 0;
    max-height: 90vh; /* Bei zentrierten Alerts etwas mehr Platz erlauben */
}

/* Modal Größen */
.ki-modal-lg { max-width: 1000px; }
.ki-modal-md { max-width: 800px; }
.ki-modal-sm { max-width: 420px; }

/* ==========================================================================
   Farb-Themes (Rahmen, Header, Buttons)
   ========================================================================== */

/* Standard (Marineblau) - Für Merklisten */
.ki-theme-default { border: 2px solid #003366; }
.ki-theme-default .ki-modal-header { background-color: #003366; border-bottom: 3px solid #001a33; color: #fff; }
.ki-theme-default .ki-alert-btn { background-color: #003366; }

/* Success (Grün) */
.ki-theme-success { border: 2px solid #1e7e34; }
.ki-theme-success .ki-modal-header { background-color: #28a745; border-bottom: 3px solid #1e7e34; color: #fff; }
.ki-theme-success .ki-alert-btn { background-color: #28a745; }

/* Warning (Orange) */
.ki-theme-warning { border: 2px solid #e2620b; }
.ki-theme-warning .ki-modal-header { background-color: #fd7e14; border-bottom: 3px solid #e2620b; color: #fff; }
.ki-theme-warning .ki-alert-btn { background-color: #fd7e14; }

/* Error (Rot) */
.ki-theme-error { border: 2px solid #bd2130; }
.ki-theme-error .ki-modal-header { background-color: #dc3545; border-bottom: 3px solid #bd2130; color: #fff; }
.ki-theme-error .ki-alert-btn { background-color: #dc3545; }

/* ==========================================================================
   Innere Struktur
   ========================================================================== */

/* Header */
.ki-modal-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Verhindert, dass der Header beim Scrollen gequetscht wird */
}

.ki-modal-title {
    margin: 0;
    font-size: 20px;
    color: inherit; /* Erbt von Theme */
}

/* Schließen-X */
.ki-modal-close {
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    color: inherit;
}

/* Body / Content-Bereich */
.ki-modal-body {
    padding: 20px;
    
    /* NEU: Hier passiert die Magie für Touchscreens und Trackpads */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* Erlaubt vertikales Wischen auf Touch-Geräten */
    overscroll-behavior: contain; /* Stoppt das Scrollen der Seite im Hintergrund */
    flex-grow: 1; /* Füllt den restlichen Platz in der modal-box */
    min-height: 0; /* Verhindert Flexbox-Bugs in Safari/Firefox */
}

/* Spezifische Alert-Bereiche */
.ki-alert-message {
    padding: 25px 20px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.ki-alert-footer {
    padding: 10px 20px 20px;
    text-align: right;
    flex-shrink: 0;
}

.ki-alert-btn {
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

/* Zusätzliches UI im Modal */
.ki-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ki-modal-select {
    font-size: 15px;
    padding: 5px;
    border-radius: 4px;
    border: none;
}

/* ==========================================================================
   Schwebende Fußzeile (Action Bar)
   ========================================================================== */
.ki-floating-footer {
    position: fixed;
    bottom: 5px; 
    
    /* "Insel"-Zentrierung */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px); 
    max-width: 1200px; 
    
    /* Optik: Glas-Effekt */    
    background-color: rgba(255, 255, 255, 0.75) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid #003366; /* Angepasst an das Default-Marineblau */
    border-radius: 8px; 
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
    padding: 15px 20px;
    z-index: 9999;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Versteckt die Leiste komplett, wenn die Seite ausgedruckt wird */
@media print {
    .ki-floating-footer { display: none !important; }
    div[style*="height: 100px"] { display: none !important; }
}
/* Ende der schwebenden Fußzeile bzw Action Bar für die Job-Aktionen */