/* taskpane.css - Styles pour le panneau de tâches BetterMyText avec support des thèmes */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Utilisation de couleurs adaptatives */
    color: var(--neutralPrimaryColor, #333333);
    background-color: var(--neutralLighterColor, #f4f4f4);
}

/* Support des thèmes Office UI Fabric */
:root {
    /* Thème clair par défaut */
    --themePrimaryColor: #2b88d8;
    --themeLighterColor: #eff6fc;
    --themeLightColor: #deecf9;
    --themeTertiaryColor: #71afe5;
    --themeSecondaryColor: #2b88d8;
    --themeDarkAltColor: #106ebe;
    --themeDarkColor: #005a9e;
    --themeDarkerColor: #004578;
    
    --neutralLighterColor: #f4f4f4;
    --neutralLightColor: #eaeaea;
    --neutralQuaternaryColor: #d0d0d0;
    --neutralTertiaryColor: #c8c8c8;
    --neutralSecondaryColor: #666666;
    --neutralPrimaryColor: #333333;
    --neutralDarkColor: #212121;
    
    --errorColor: #a80000;
    --warningColor: #d83b01;
    --successColor: #107c10;
}

/* Adaptation du thème sombre via media query */
@media (prefers-color-scheme: dark) {
    :root {
        --themePrimaryColor: #4aa0eb;
        --themeLighterColor: #2a2a2a;
        --themeLightColor: #3b3b3b;
        --themeTertiaryColor: #3b82be;
        --themeSecondaryColor: #2b88d8;
        --themeDarkAltColor: #6cb8f6;
        --themeDarkColor: #82c7ff;
        --themeDarkerColor: #a6d8ff;
        
        --neutralLighterColor: #2d2d2d;
        --neutralLightColor: #323232;
        --neutralQuaternaryColor: #3d3d3d;
        --neutralTertiaryColor: #595959;
        --neutralSecondaryColor: #d0d0d0;
        --neutralPrimaryColor: #ffffff;
        --neutralDarkColor: #f4f4f4;
        
        --errorColor: #f1707b;
        --warningColor: #ff8c66;
        --successColor: #57d957;
    }
}

/* Utilisation d'une classe spécifique pour le thème sombre (l'API Office peut l'ajouter) */
.ms-Fabric.is-dark, .ms-dark-theme {
    --themePrimaryColor: #4aa0eb;
    --themeLighterColor: #2a2a2a;
    --themeLightColor: #3b3b3b;
    --themeTertiaryColor: #3b82be;
    --themeSecondaryColor: #2b88d8;
    --themeDarkAltColor: #6cb8f6;
    --themeDarkColor: #82c7ff;
    --themeDarkerColor: #a6d8ff;
    
    --neutralLighterColor: #2d2d2d;
    --neutralLightColor: #323232;
    --neutralQuaternaryColor: #3d3d3d;
    --neutralTertiaryColor: #595959;
    --neutralSecondaryColor: #d0d0d0;
    --neutralPrimaryColor: #ffffff;
    --neutralDarkColor: #f4f4f4;
     
    --errorColor: #f1707b;
    --warningColor: #ff8c66;
    --successColor: #57d957;
}

ul {
    margin: 0;
    padding: 0;
}

.ms-welcome__header {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--themePrimaryColor);
    color: white;
}

.ms-welcome__header h1 {
    margin-top: 10px;
    margin-bottom: 0;
    color: white;
}

.ms-welcome__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: var(--neutralLighterColor);
    color: var(--neutralPrimaryColor);
}

.ms-welcome__features {
    width: 100%;
    max-width: 500px;
}

#text-selection-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

#style-selection {
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--neutralSecondaryColor);
}

.ms-Dropdown {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid var(--neutralTertiaryColor);
    border-radius: 2px;
    background-color: var(--neutralLighterColor);
    color: var(--neutralPrimaryColor);
}

.text-box {
    width: 100%;
    min-height: 100px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--neutralTertiaryColor);
    border-radius: 4px;
    overflow-y: auto;
    background-color: var(--neutralLightColor);
    color: var(--neutralPrimaryColor);
}

.button-row {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

.ms-Button {
    margin: 5px;
    padding: 5px 20px;
    background-color: var(--neutralLightColor);
    color: var(--neutralPrimaryColor);
    border: 1px solid var(--neutralTertiaryColor);
}

.ms-Button--primary {
    background-color: var(--themePrimaryColor);
    color: white;
    border: none;
}

.ms-Button:hover {
    background-color: var(--neutralQuaternaryColor);
}

.ms-Button--primary:hover {
    background-color: var(--themeDarkAltColor);
}

#improve-again-button {
    margin-top: 15px;
    width: 100%;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--neutralTertiaryColor);
    width: 100%;
    color: var(--neutralSecondaryColor);
}

#error-section {
    margin: 15px 0;
    padding: 10px;
    background-color: rgba(168, 0, 0, 0.1);
    border-left: 4px solid var(--errorColor);
    display: none;
    color: var(--errorColor);
}

#loading-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

#api-key-section {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid var(--neutralTertiaryColor);
    border-radius: 4px;
    background-color: var(--neutralLightColor);
}

#api-key-input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid var(--neutralTertiaryColor);
    border-radius: 2px;
    background-color: var(--neutralLighterColor);
    color: var(--neutralPrimaryColor);
}

#save-api-key {
    margin-top: 10px;
    width: 100%;
}

/* Ajustements pour améliorer la visibilité des éléments spécifiques */
h2, h3 {
    color: var(--themePrimaryColor);
}

#original-text {
    border-left: 3px solid var(--neutralSecondaryColor);
}

#improved-text {
    border-left: 3px solid var(--themePrimaryColor);
}

/* Styles pour la compatibilité avec les lecteurs d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}