/* styles/tools/styletext.css */
/* Styles pour le composant de stylisation de texte */

/* Nouvelle mise en page */
.styletext-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--styletext-gap, var(--spacing-md));
    padding: var(--styletext-padding, var(--spacing-md));
    max-width: 1200px;
    margin: 0 auto;
}

/* Configuration pour la mise en page horizontale sur grands écrans */
@media (min-width: 1200px) {
    .styletext-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "input output"
            "styles styles";
    }
    
    .styletext-input-area {
        grid-area: input;
    }
    
    .styletext-output-area {
        grid-area: output;
    }
    
    .styletext-styles-area {
        grid-area: styles;
    }
    
    /* Alternative pour un écran très large */
    @media (min-width: 1600px) {
        .styletext-layout {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas:
                "input styles output";
            gap: var(--spacing-lg);
        }
        
        .styletext-input-area, 
        .styletext-output-area {
            max-height: 60vh;
        }
        
        .styletext-styles-area {
            overflow-y: auto;
            max-height: 60vh;
        }
    }
}

/* Configuration pour la mise en page tablette */
@media (min-width: 992px) and (max-width: 1199px) {
    .styletext-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "input output"
            "styles styles";
    }
    
    .styletext-input-area {
        grid-area: input;
    }
    
    .styletext-output-area {
        grid-area: output;
    }
    
    .styletext-styles-area {
        grid-area: styles;
    }
}

.styletext-textarea, 
.styletext-output {
    width: 100%;
    min-height: var(--styletext-min-height, 200px);
    padding: var(--styletext-padding, var(--spacing-md));
    border: 1px solid var(--med-gray, #ccc);
    border-radius: var(--styletext-border-radius, var(--border-radius));
    font-size: var(--styletext-font-size, 1rem);
    line-height: var(--styletext-line-height, 1.5);
    transition: var(--styletext-transition, all 0.3s ease);
    resize: vertical;
}

.styletext-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--styletext-shadow-sm, 0 0 0 3px rgba(66, 133, 244, 0.2));
}

.styletext-output {
    background-color: var(--light-gray, #f8f9fa);
}

.input-controls,
.output-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.character-count {
    color: var(--dark-gray, #555);
    font-size: 0.875rem;
}

.input-actions {
    display: flex;
    gap: 0.5rem;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--med-gray);
    border-radius: var(--styletext-border-radius);
    background: var(--white);
    color: var(--dark-gray);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--styletext-transition);
}

.control-btn:hover {
    background-color: var(--light-gray);
    color: var(--text-color);
}

.primary-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--styletext-border-radius);
    background: var(--primary-color);
    color: var(--white);
    font-weight: 500;
    cursor: pointer;
    transition: var(--styletext-transition);
}

.primary-btn:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.area-title {
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--light-gray);
}

.style-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--styletext-grid-item-size), 1fr));
    gap: var(--styletext-padding);
}

.style-item {
    position: relative;
    cursor: pointer;
}

.style-item input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.style-item-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: var(--styletext-padding) 0.5rem;
    border: 2px solid var(--med-gray);
    border-radius: var(--styletext-border-radius);
    transition: var(--styletext-transition);
    height: 100%;
}

.style-item:hover .style-item-content {
    border-color: var(--primary-color);
    background-color: var(--styletext-bg-hover);
}

.style-item input[type="radio"]:checked + .style-item-content {
    border-color: var(--primary-color);
    background-color: var(--styletext-bg-active);
    box-shadow: var(--styletext-shadow-md);
}

.style-preview {
    font-size: var(--styletext-preview-font-size);
    margin-bottom: 0.75rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-name {
    font-size: var(--styletext-name-font-size);
    color: var(--text-color);
    text-align: center;
}

/* Animation du changement de style */
@keyframes highlight {
    0% { background-color: var(--light-gray); }
    50% { background-color: rgba(66, 133, 244, 0.2); }
    100% { background-color: var(--light-gray); }
}

.style-changed {
    animation: highlight var(--styletext-animation-duration) ease;
}

/* Toast notifications */
.styletext-toast {
    position: fixed;
    bottom: var(--styletext-toast-bottom);
    right: var(--styletext-toast-right);
    padding: 10px 20px;
    border-radius: var(--styletext-border-radius);
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.styletext-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.styletext-toast.success {
    background-color: var(--success-color);
}

.styletext-toast.error {
    background-color: var(--error-color);
}

.styletext-toast.info {
    background-color: var(--primary-color);
}

/* Garder les anciens styles pour la compatibilité */
.styletext-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--styletext-gap);
    width: 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .styletext-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "input output"
            "style-options style-options";
        gap: 2rem;
    }
}

/* Section d'entrée */
.input-section {
    grid-area: input;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.textarea-container {
    position: relative;
    width: 100%;
}

.styletext-textarea {
    width: 100%;
    min-height: 150px;
    padding: var(--styletext-padding);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: var(--styletext-font-size);
    line-height: var(--styletext-line-height);
    resize: vertical;
    transition: border-color 0.2s ease;
}

.styletext-textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.text-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.character-count {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.25rem;
}

.limit-exceeded {
    color: var(--danger-color);
    font-weight: 500;
}

/* Options de style */
.style-options {
    grid-area: style-options;
    display: block !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

/* Onglets de style */
.style-tabs {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    background-color: transparent !important;
}

.tab-button {
    flex: 1 !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.tab-button.active {
    color: var(--primary-color) !important;
    border-bottom: 3px solid var(--primary-color) !important;
    background-color: transparent !important;
}

.tab-pane {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.tab-pane.active {
    display: block !important;
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* Boutons de style */
.style-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--styletext-grid-item-size), 1fr));
    gap: var(--styletext-padding);
    margin-bottom: 1rem;
    padding: var(--styletext-padding);
    border-radius: 8px;
    background: rgba(var(--primary-color-rgb), 0.05);
}

.style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: var(--styletext-padding);
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.style-btn:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.style-btn.active {
    border-color: var(--primary-color);
    background-color: #f0f8ff;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.style-preview {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-name {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    text-align: center;
}

/* Historique */
.history-container {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.history-item:hover {
    border-color: var(--primary-color);
}

.empty-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-history i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.history-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* Section de sortie */
.output-section {
    grid-area: output;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.output-container {
    position: relative;
    width: 100%;
}

/* Indication du style actif */
.active-style-display {
    position: absolute;
    top: -1.75rem;
    right: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    z-index: 1;
}

.styletext-output {
    width: 100%;
    min-height: 120px;
    padding: var(--styletext-padding);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.3s ease;
}

/* Animation lors du changement de style */
.styletext-output.style-changed {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
}

.styletext-output.processing {
    background-image: linear-gradient(90deg, var(--card-bg) 25%, var(--border-color) 50%, var(--card-bg) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.output-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.styletext-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--primary-color);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.styletext-button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.styletext-button:active {
    transform: translateY(0);
}

.styletext-button.copied {
    background: var(--success-color);
}

.styletext-button i {
    font-size: var(--styletext-font-size);
}

/* Toast notifications */
.styletext-toast {
    position: fixed;
    bottom: var(--styletext-toast-bottom);
    right: var(--styletext-toast-right);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

.styletext-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.styletext-toast.success {
    background-color: #28a745;
}

.styletext-toast.error {
    background-color: #dc3545;
}

.styletext-toast.info {
    background-color: #17a2b8;
}

.styletext-toast i {
    font-size: var(--styletext-font-size);
}

/* Améliorations pour la grille du styliseur de texte */

.styletext-container-enhanced {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    gap: 2rem;
}

.input-section-enhanced,
.style-options-enhanced,
.output-section-enhanced {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.input-section-enhanced h3,
.style-options-enhanced h3,
.output-section-enhanced h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.1);
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-section-enhanced h3 i,
.style-options-enhanced h3 i,
.output-section-enhanced h3 i {
    color: var(--primary-color);
}

/* Grille améliorée pour les boutons de style */
.style-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--styletext-padding);
    margin: var(--styletext-padding) 0;
    padding: var(--styletext-padding);
    border-radius: 10px;
    background-color: #f8f9fa;
}

.style-btn-enhanced {
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--styletext-padding);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.style-btn-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.style-btn-enhanced.active {
    border: 2px solid var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

.style-btn-enhanced .style-preview {
    font-size: 1.3rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.style-btn-enhanced .style-name {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    text-align: center;
}

/* Onglets améliorés */
.style-tabs-enhanced {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
    background-color: transparent;
}

.style-tabs-enhanced .tab-button {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 500;
    color: #64748b;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.style-tabs-enhanced .tab-button:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.05);
}

.style-tabs-enhanced .tab-button.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    font-weight: 600;
}

.style-tabs-enhanced .tab-button i {
    font-size: var(--styletext-font-size);
}

/* Conteneur d'historique amélioré */
.history-container-enhanced {
    padding: var(--styletext-padding);
    background-color: #f8f9fa;
    border-radius: 10px;
    max-height: 350px;
}

/* Conteneur de sortie amélioré */
.styletext-output-enhanced {
    width: 100%;
    min-height: 160px;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #f8f9fa;
    font-size: 1.2rem;
    line-height: 1.6;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.styletext-output-enhanced:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

/* Bouton amélioré */
.output-controls .styletext-button {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--primary-color);
}

.output-controls .styletext-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Zones de texte côte à côte et onglets en bas */

/* Amélioration des zones texte */
.input-section-enhanced,
.output-section-enhanced {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Faire que les zones de texte prennent tout l'espace disponible */
.textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.styletext-textarea,
.styletext-output-enhanced {
    flex: 1;
    min-height: 220px !important;
}

/* Section de styles en bas */
.style-options-enhanced {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-top: 2rem;
}

/* Ajustement des boutons de style */
.style-grid-enhanced {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 1.25rem !important;
}

/* Transition plus fluide lors du changement de structure */
@media (max-width: 991px) {
    .styletext-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "input"
            "output"
            "style-options";
    }
    
    .input-section-enhanced,
    .output-section-enhanced {
        margin-bottom: 1.5rem;
    }
}

/* Mettre en valeur la zone active */
.styletext-textarea:focus,
.styletext-output-enhanced:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

/* Style de conteneur flexible */
.styletext-container-enhanced {
    display: grid;
    gap: 2rem;
    padding: 2rem !important;
}

/* Animation pour la transition entre les onglets */
.tab-pane {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
    display: none !important;
}

.tab-pane.active {
    opacity: 1;
    height: auto;
    overflow: visible;
    display: block !important;
}

/* Indicateur de style actif */
.active-style-display {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: bold;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s, transform 0.3s;
    display: inline-block;
}

.active-style-display.show {
    opacity: 1;
    transform: translateY(0);
}

/* Stylisation des onglets */
.styletext-tabs {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    padding: 4px;
}

.styletext-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    color: #495057;
}

.styletext-tab:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

.styletext-tab.active {
    opacity: 1;
    border-bottom-color: var(--primary-color, #007bff);
    font-weight: bold;
    color: var(--primary-color, #007bff);
    background-color: white;
    border-radius: 6px 6px 0 0;
}

/* Style des éléments d'historique */
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    transition: all 0.2s;
}

.history-item:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.history-content {
    flex: 1;
    margin-right: 10px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.history-style {
    font-weight: bold;
    color: var(--primary-color);
}

.history-date {
    color: #6c757d;
}

.history-text {
    word-break: break-word;
    font-size: 0.95rem;
}

.history-actions {
    display: flex;
    gap: 5px;
}

.btn-reuse, .btn-delete {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-reuse {
    color: var(--primary-color);
}

.btn-delete {
    color: #dc3545;
}

.btn-reuse:hover, .btn-delete:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Ajout du support pour le mode sombre */
[data-theme="dark"] .styletext-textarea, 
[data-theme="dark"] .styletext-output {
    background-color: var(--form-input-bg);
    color: var(--form-input-text);
    border-color: var(--form-input-border);
}

[data-theme="dark"] .styletext-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: var(--styletext-shadow-sm);
}

[data-theme="dark"] .control-btn {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .control-btn:hover {
    background-color: var(--button-hover-bg);
    color: var(--text-color);
}

[data-theme="dark"] .primary-btn {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

[data-theme="dark"] .primary-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5);
}

[data-theme="dark"] .area-title {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .style-item-content {
    border-color: var(--border-color);
    background-color: var(--card-bg);
}

[data-theme="dark"] .style-item:hover .style-item-content {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

[data-theme="dark"] .style-item input[type="radio"]:checked + .style-item-content {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.2);
    box-shadow: 0 0 0 1px var(--primary-color);
}

[data-theme="dark"] .style-name {
    color: var(--text-color);
}

/* Support pour l'historique en mode sombre */
[data-theme="dark"] .history-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .history-item:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .history-date {
    color: var(--text-secondary);
}

[data-theme="dark"] .history-text {
    color: var(--text-color);
}

[data-theme="dark"] .empty-history {
    color: var(--text-muted);
}

[data-theme="dark"] .styletext-button {
    background: var(--primary-color);
    color: var(--text-on-primary);
}

[data-theme="dark"] .styletext-button:hover {
    background: var(--primary-hover);
}

[data-theme="dark"] .styletext-button.copied {
    background: var(--success-color);
}

[data-theme="dark"] .styletext-output.style-changed {
    background-color: rgba(var(--primary-color-rgb), 0.15);
    border-color: var(--primary-color);
}

[data-theme="dark"] .styletext-output.processing {
    background-image: linear-gradient(90deg, var(--card-bg) 25%, var(--button-hover-bg) 50%, var(--card-bg) 75%);
}

[data-theme="dark"] .tab-button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .tab-button:hover {
    background-color: var(--button-hover-bg);
}

[data-theme="dark"] .tab-button.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}

[data-theme="dark"] .style-btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .style-btn:hover {
    background-color: var(--button-hover-bg);
}

[data-theme="dark"] .style-btn.active {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.2);
}

[data-theme="dark"] .btn-reuse {
    color: var(--primary-color);
}

[data-theme="dark"] .btn-delete {
    color: var(--error-color);
}

[data-theme="dark"] .btn-reuse:hover, 
[data-theme="dark"] .btn-delete:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .active-style-display {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.15);
}

@keyframes darkLoading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

[data-theme="dark"] .styletext-output.processing {
    animation: darkLoading 1.5s infinite;
}

/* Mise en page horizontale pour le styliseur de texte */
.styletext-horizontal-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "input"
        "output"
        "styles";
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .styletext-horizontal-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "input output"
            "styles styles";
    }
    
    .styletext-input-area {
        grid-area: input;
    }
    
    .styletext-output-area {
        grid-area: output;
    }
    
    .styletext-styles-area {
        grid-area: styles;
    }
}