/* This file may be used for providing additional customizations to the Trestle
 * admin. It will be automatically included within all admin pages.
 *
 * For organizational purposes, you may wish to define your customizations
 * within individual partials in this folder and they'll be required below.
 *

*/

/* Container pour centrer le toggle */
.toggle-container {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Style principal du toggle - reproduit le design DaisyUI */
.toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   width: 3rem;
   height: 1.5rem;
   border-radius: 9999px;
   background-color: #e5e7eb;
   /* gray-200 */
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border: 2px solid transparent;
   padding: 2px;
   /* Ajout de padding pour centrer le cercle */
}

/* État activé du toggle */
.toggle:has(.toggle-checkbox:checked) {
   background-color: #10b981;
   /* green-500 pour success */
   border-color: #10b981;
}

/* Cache la checkbox native */
.toggle-checkbox {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
}

/* Cercle mobile du toggle avec icône */
.toggle::before {
   content: '✕';
   position: absolute;
   top: 0px;
   left: 0px;
   width: calc(1.5rem - 4px);
   /* Ajustement pour le padding */
   height: calc(1.5rem - 4px);
   border-radius: 50%;
   background-color: white;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   font-weight: bold;
   color: #ef4444;
   /* red-500 pour la croix */
}

/* Position et icône du cercle quand activé */
.toggle:has(.toggle-checkbox:checked)::before {
   content: '✓';
   transform: translateX(calc(3rem - 1.5rem));
   /* Déplacement exact */
   color: #10b981;
   /* green-500 pour le tick */
}

/* Masquer les SVG externes (on utilise les icônes dans le cercle) */
.toggle svg {
   display: none;
}

/* État hover */
.toggle:hover {
   box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* État focus */
.toggle:has(.toggle-checkbox:focus) {
   outline: 2px solid #10b981;
   outline-offset: 2px;
}

/* État disabled */
.toggle:has(.toggle-checkbox:disabled) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

/* Animation de pulsation lors du clic */
.toggle:active::before {
   transform: scale(0.95);
}

.toggle:has(.toggle-checkbox:checked):active::before {
   transform: translateX(calc(3rem - 1.5rem)) scale(0.95);
}

/* Animation de rotation pour les icônes */
.toggle::before {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Styles pour le formulaire de génération d'articles IA */
.ai-generator-form {
   max-width: 800px;
   margin: 0 auto;
   padding: 20px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-generator-form h2 {
   color: #2c3e50;
   margin-bottom: 20px;
   font-size: 24px;
   font-weight: 600;
   text-align: center;
}

.ai-generator-form h3 {
   color: #34495e;
   margin: 25px 0 15px 0;
   font-size: 18px;
   font-weight: 500;
   border-bottom: 2px solid #3498db;
   padding-bottom: 5px;
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
   color: #2c3e50;
}

.form-group input[type="text"],
.form-group textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
   transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
   outline: none;
   border-color: #3498db;
   box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.form-group textarea {
   min-height: 100px;
   resize: vertical;
}

.btn-primary {
   background-color: #3498db;
   color: white;
   padding: 12px 24px;
   border: none;
   border-radius: 4px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.3s ease;
   margin-right: 10px;
}

.btn-primary:hover {
   background-color: #2980b9;
}

.btn-success {
   background-color: #27ae60;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   margin: 5px;
}

.btn-success:hover {
   background-color: #229954;
}

.titles-container {
   margin-top: 20px;
   padding: 15px;
   background-color: #f8f9fa;
   border-radius: 4px;
   border: 1px solid #e9ecef;
}

.title-option {
   display: block;
   padding: 10px;
   margin: 5px 0;
   background-color: white;
   border: 1px solid #ddd;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.title-option:hover {
   background-color: #e3f2fd;
   border-color: #3498db;
}

.title-option.selected {
   background-color: #3498db;
   color: white;
   border-color: #2980b9;
}

.loading {
   text-align: center;
   padding: 20px;
   color: #7f8c8d;
}

.error-message {
   background-color: #f8d7da;
   color: #721c24;
   padding: 12px;
   border-radius: 4px;
   border: 1px solid #f5c6cb;
   margin: 10px 0;
}

.success-message {
   background-color: #d4edda;
   color: #155724;
   padding: 12px;
   border-radius: 4px;
   border: 1px solid #c3e6cb;
   margin: 10px 0;
}

/* Responsive design */
@media (max-width: 768px) {
   .ai-generator-form {
      margin: 10px;
      padding: 15px;
   }

   .ai-generator-form h2 {
      font-size: 20px;
   }

   .btn-primary {
      width: 100%;
      margin-bottom: 10px;
   }
}

/* Styles supplémentaires pour le formulaire IA */
.form-section {
   margin-bottom: 10px;
   padding: 20px;
   background-color: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
}

.form-actions {
   text-align: center;
   margin: 20px 0;
}

.titles-section {
   margin-top: 30px;
   padding: 20px;
   background-color: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
}

.titles-list {
   margin: 15px 0;
}

.result-section {
   margin-top: 20px;
}

/* Animation pour les boutons */
.btn-primary:disabled,
.btn-success:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* Animation pour la sélection de titres */
.title-option {
   transition: all 0.2s ease;
   transform: translateY(0);
}

.title-option:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */