/*
 * ===================================================================
 * Stile für die MILEHA AiContent Einstellungsseite
 * ===================================================================
 */

/* Container für die gesamte Einstellungsseite */
.mileha-aicontent-container {
    max-width: 790px;
}

/* Stil für die deaktivierte API-Box, wenn der Disclaimer nicht akzeptiert wurde */
#mileha-api-box.is-disabled {
    opacity: 0.6;
    pointer-events: none; /* Verhindert Klicks auf den Inhalt */
}

/* Allgemeine Box für die API-Einstellungen */
.mileha-aicontent-box {
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 1px 20px 20px 20px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

/* Spezielle Box für den Disclaimer mit bedingter Umrandung */
.disclaimer-box {
    background-color: #fff; 
    margin-top: 30px;      
    margin-bottom: 30px;   
    padding: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
}

.disclaimer-box.is-unaccepted { border-color: #d63638; }
.disclaimer-box.is-accepted { border-color: #46b450; }

/* Hinweistext unter dem API-Schlüsselfeld */
.api-key-description {
    font-style: italic;
    opacity: 0.9;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.api-key-description .dashicons-info-outline {
    margin-right: 15px;
    flex-shrink: 0;
}

/* Abstand für die separaten Speicherbuttons */
form .mileha-aicontent-box input[name="submit-api"],
form .disclaimer-box input[name="submit-disclaimer"] {
    margin-top: 30px;
}

/*
 * ===================================================================
 * Stile für die API-Schlüssel Validierung & Feldzustände
 * ===================================================================
 */

/* Passt die Tabellenzelle an, um Flexbox für die Ausrichtung zu verwenden */
.api-key-cell {
    display: flex;
    align-items: center;
}

/* Das API-Schlüsselfeld */
.api-key-input {
    width: 400px;
}

/* Stil für farbige Umrandung bei Validierung */
.api-key-input.api-key-error {
    border-color: #d63638;
}

.api-key-input.api-key-success {
    border-color: #46b450;
}

/* Stil, damit 'readonly' Felder deaktiviert aussehen */
input[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* Container für das Status-Icon (Spinner, Haken, X) */
.api-key-status-container {
    margin-left: 5px; /* Reduzierter Abstand, da es jetzt das zweite Icon ist */
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Stile für die verschiedenen Zustände */
.api-key-status-container.success .dashicons {
    color: #46b450;
    font-size: 20px;
}
.api-key-status-container.error .dashicons {
    color: #d63638;
    font-size: 20px;
}
.api-key-status-container.loading .dashicons {
    color: #888;
}

/* CSS-Animation für den Lade-Spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}

/*
 * ===================================================================
 * Stile für die API-Schlüssel Sichtbarkeit
 * ===================================================================
 */

/* Container für das Auge-Icon zum Ein-/Ausblenden */
.api-key-visibility-container {
    margin-left: 10px; /* Hauptabstand, da es jetzt das erste Icon ist */
    display: none; /* Standardmäßig ausgeblendet */
    align-items: center;
    justify-content: center;
}

/* Stellt sicher, dass der Container angezeigt wird, wenn er die Klasse 'is-visible' hat */
.api-key-visibility-container.is-visible {
    display: inline-flex;
}

/* Das Auge-Icon selbst */
.api-key-visibility-container .dashicons-visibility {
    cursor: pointer;
    color: #888;
}

.api-key-visibility-container .dashicons-visibility:hover {
    color: #000;
}