/* ==========================================================================
   JobAssist - Action-Bar Styles (action-bar.css)
   ========================================================================== */

/* 1. Die schwebende Haupt-Leiste (Floating Glassmorphism mit türkisem Akzent) */
.jobassist-actionbar {
    /* Positionierung */
    position: fixed;
    bottom: 10px; /* Ein klein wenig mehr Abstand wirkt oft noch luftiger */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 1200px;
    z-index: 999;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.8); /* Etwas deckender für besseren Kontrast zum Rand */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    /* 🔥 Der gewünschte türkise Rand */
    border: 1.5px solid #00bfa6; 
    
    /* Ein subtiler Schatten, der leicht die Farbe des Randes aufnimmt */
    box-shadow: 0 8px 32px rgba(0, 191, 166, 0.15);

    /* Layout */
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px; /* Etwas kompakter in der Höhe */
    border-radius: 14px; /* Schön abgerundet */
    gap: 15px; 
    box-sizing: border-box;
}

.jobassist-actionbar-info {
    font-weight: bold;
    color: #2c3e50;
}

.jobassist-actionbar-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 2. Die Buttons in der Leiste */
.jobassist-actionbar-buttons .jobassist-btn {
    padding: 8px 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    font-weight: 600;
    margin: 0;
}

.jobassist-actionbar-buttons .jobassist-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #bdc3c7 !important;
    color: #ffffff !important;
    border-color: #bdc3c7 !important;
    box-shadow: none;
}

.button-separator {
    color: #ddd;
    margin: 0 5px;
}

/* ==========================================================================
   3. Das Export Drop-Up Menü (Katz-und-Maus Fix)
   ========================================================================== */
.ja-dropdown { 
    position: relative; 
    display: inline-block; 
}

/* 🔥 DER TRICK: Eine unsichtbare Brücke, damit die Maus nicht ins Leere fällt */
.ja-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 15px;     
    z-index: 99;
}

.ja-dropdown-content {
    display: none;
    position: absolute;
    color: black;
    bottom: calc(100% + 5px); /* Knapp über dem Button */
    right: 0; /* WICHTIG: Klappt nach links auf, damit es nie über den rechten Rand ragt! */
    background-color: #ffffff;
    min-width: 240px; /* Etwas breiter für die Texte */
    box-shadow: 0px -4px 20px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 8px;
    overflow: hidden;
    border: 1.3px solid turquoise;
}

.ja-dropdown:hover .ja-dropdown-content { 
    display: flex; 
    flex-direction: column; 
}

/* Wenn Button inaktiv, dann klappt auch nichts auf */
.ja-dropdown:has(button:disabled):hover .ja-dropdown-content {
    display: none;
}

/* Die Buttons IM Menü */
.ja-dropdown-content button {
    background: transparent; 
    border: none; 
    padding: 12px 16px; 
    text-align: left; 
    cursor: pointer; 
    width: 100%; 
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 500;
    transition: background 0.2s;
    border-bottom: 1px solid #f5f5f5;
}

.ja-dropdown-content button:last-child {
    border-bottom: none;
}

.ja-dropdown-content button:hover { 
    background-color: #f0fdfc; 
    color: #00bfa6;
}

/* 🔥 Modus-Steuerung (Toggling) */
.jobassist-actionbar.mode-search .show-in-saved { display: none !important; }
.jobassist-actionbar.mode-saved .show-in-search { display: none !important; }

/* Überschreibe das inline display: none, wenn die Bar aktiv ist */
.jobassist-actionbar.is-active { display: flex !important; }

/* Container für die Ausrichtung */
.ja-dashboard-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* Die rote Notification-Pille */
.ja-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #d63638; /* Das kräftige WordPress-Rot */
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
    font-family: Arial, sans-serif;
    line-height: 1;
}

/* Der geniale Pulse-Effekt (Sanftes Herzklopfen) */
.ja-pulse {
    animation: ja-pulse-animation 2s infinite;
}

@keyframes ja-pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(214, 54, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(214, 54, 56, 0);
    }
}



/* ==========================================================================
   4. Mobile Optimierung (Handy-Ansicht)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Leiste andocken und Platz maximieren */
    .jobassist-actionbar {
        width: 90%;
        bottom: 0;
        border-radius: 15px 15px 0 0; /* Nur noch oben abgerundet (App-Style) */
        padding: 12px 15px 18px 15px; /* Unten minimal mehr Platz für die Daumen */
        gap: 8px;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }

    /* 2. Info-Text kompakt in eine eigene Zeile zentrieren */
    .jobassist-actionbar-info {
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    /* 3. Buttons engmaschiger und flexibler packen */
    .jobassist-actionbar-buttons {
        width: 100%;
        justify-content: center;
        gap: 6px;
    }

    .jobassist-actionbar-buttons .jobassist-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem;
        flex-grow: 1; /* Buttons dehnen sich intelligent aus */
    }

    /* Trennstriche auf dem Handy ausblenden (spart massiv Platz) */
    .button-separator {
        display: none;
    }

    /* 4. Dropdown auf dem Handy perfekt zentrieren, damit es nicht aus dem Bild ragt */
    .ja-dropdown {
        flex-grow: 1; 
        display: flex;
    }
    .ja-dropdown > button {
        width: 100%;
    }
    .ja-dropdown-content {
        right: auto;
        left: 50%;
        transform: translateX(-50%); 
        min-width: 220px;
    }

    /* 5. Genug Platz am Seitenende lassen, damit man den letzten Job noch sieht */
    #jobassist-results {
        padding-bottom: 180px; 
    }
}

/* 🔥 DER TASTATUR-TRICK */
/* Wenn die Bildschirmhöhe unter 500px fällt (Tastatur ist offen oder Querformat), 
   blenden wir die Bar komplett aus, damit das Suchformular bedienbar bleibt! */
@media (max-width: 768px) and (max-height: 500px) {
    .jobassist-actionbar {
        display: none !important;
    }
}