@use 'toggle';

// Variables de couleurs (à ajuster selon les couleurs de votre plugin)
$primary-color: #0073aa; // Bleu WordPress/couleur principale de votre plugin
$secondary-color: #f1f1f1; // Couleur secondaire
$accent-color: #46b450; // Couleur d'accent (vert succès)
$border-color: #ddd;
$text-color: #444;

.wrap {
    margin: 20px 0;

    h1 {
        color: $primary-color;
        padding-bottom: 10px;
        border-bottom: 1px solid $border-color;
    }
}

#import_form,
#export_form,
#export_form_zip {
    width: 95%;
    margin-bottom: 30px;
    background-color: white;
    border: 1px solid $border-color;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .form-table {
        table-layout: fixed;
        width: 100%;

        th {
            width: 120px;
            font-weight: 600;
            color: $text-color;
            vertical-align: middle;
        }

        td {
            padding: 15px 10px;
            vertical-align: middle;

            #form_export_id,
            #import_json_file,
            #logs_export_id {
                width: 100%;
                padding: 8px;
                border: 1px solid $border-color;
                border-radius: 4px;
            }

            p {
                margin: 0 10px 0 0;
                line-height: 2;
            }
        }

        input[type="submit"] {
            background-color: $primary-color;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
                background-color: darken($primary-color, 10%);
            }
        }

        #start_date_logs_export,
        #end_date_logs_export {
            padding: 7px 10px;
            border: 1px solid $border-color;
            border-radius: 4px;
        }
    }
}

#export_form_zip {
    tr[style="display: flex; flex-direction: row"] {
        align-items: center;

        td[style="display: flex"] {
            align-items: center;
        }
    }
}

// Style pour les messages d'erreur
.notice-error {
    border-left: 4px solid #dc3232;
    background-color: #fef7f7;
    padding: 8px 12px;
    margin: 10px 0;
}

// Amélioration du style des cases à cocher
#export_config_crm.styled-checkbox {
    + label {
        position: relative;
        cursor: pointer;
        padding: 0;
    }

    &:checked {
        background-color: $accent-color;
    }
}

// Styles spécifiques pour les liens de téléchargement
#download_export_json,
#download_export_zip {
    display: none;
}