/* ========================================
   THEME LSF - Thème unifié pour FileServer
   ======================================== */

/* Variables globales */
@import "styles-variables.css";

/* Composants Vaadin de base */
@import 'vaadin-components/vaadin-app-layout.css';
@import 'vaadin-components/vaadin-button.css';
@import 'vaadin-components/vaadin-checkbox.css';
@import 'vaadin-components/vaadin-combo-box.css';
@import 'vaadin-components/vaadin-grid.css';
@import 'vaadin-components/vaadin-details.css';
@import 'vaadin-components/vaadin-menu-bar.css';
@import 'vaadin-components/vaadin-notification-card.css';
@import 'vaadin-components/vaadin-password-field-button.css';
@import 'vaadin-components/vaadin-dialog.css';
@import 'vaadin-components/vaadin-tabs.css';
@import 'vaadin-components/vaadin-icon.css';
@import 'vaadin-components/vaadin-tooltip.css';
@import 'vaadin-components/vaadin-listbox.css';

/* Composants de base */
@import "components/screen.css";
@import "components/layout.css";
@import "components/mobile.css";

/* Override des composants Vaadin */
@import "components-override.css";

/* Components personnalisés */
@import "components/user-management-panel.css";
@import "components/notification-banner.css";

/* Layouts */
@import "layouts/main-layout.css";

/* Écrans */
@import "screens/administration-users-view.css";
@import "screens/administration-credits-view.css";
@import "screens/administration-prestations-view.css";
@import "screens/administration-vehicle-engines-view.css";

@import "screens/gestion-demandes-view.css";
@import "screens/chat-view.css";
@import "screens/gestion-sav-view.css";
@import "screens/ticket-detail-view.css";

@import "screens/stats-mens-view.css";
@import "screens/stats-global-view.css";

@import "screens/login-view.css";
@import "screens/main-view.css";
@import "screens/new-file-request-view.css";
@import "screens/buy-view.css";

@import "dialog/log-level-change-dialog.css";

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 800px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Afficher la toolbar sur mobile mais en format colonne */
    .main-container .hide-on-mobile {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
        height: auto !important;
    }

    .main-container .hide-on-mobile vaadin-menu-bar,
    .main-container .hide-on-mobile vaadin-horizontal-layout,
    .main-container .hide-on-mobile vaadin-checkbox {
        width: 100% !important;
        margin-bottom: 5px;
    }

    .main-container .hide-on-mobile vaadin-checkbox {
        margin-left: 0 !important;
        padding: 10px 0;
    }

    .main-container {
        padding: 10px !important;
        border-radius: 0 !important;
        border: none !important;
        margin-top: 0 !important;
    }
    
    h2 {
        font-size: 22px !important;
    }

    /* Grilles adaptatives */
    vaadin-grid {
        font-size: 13px !important;
        --lumo-size-m: 3rem; /* Agrandir les lignes pour faciliter le toucher sur mobile */
    }

    /* Permettre le scroll horizontal sur les grilles au lieu de tout cacher */
    .dark-grid {
        overflow-x: auto !important;
        max-width: 100vw !important;
    }

    /* Amélioration visuelle des colonnes persistantes */
    .grid-col-license-plate {
        font-weight: bold;
        color: var(--lsf-primary);
        min-width: 120px !important;
    }

    /* S'assurer que les en-têtes et filtres ne sont pas tronqués */
    vaadin-grid-cell-content {
        white-space: normal !important;
        overflow: visible !important;
    }
}

@media (max-width: 1100px) {
    .hide-on-tablet {
        display: none !important;
    }

    /* Afficher la toolbar sur tablette */
    .main-container .hide-on-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .dark-grid {
        font-size: 13px !important;
    }
}

@media (min-width: 801px) {
    .show-only-mobile {
        display: none !important;
    }
}

/* Grille Responsive */
@media (max-width: 800px) {
    .dark-grid {
        font-size: 12px;
    }
    
    /* Cacher les colonnes non essentielles sur mobile */
    .grid-col-priority-low {
        display: none !important;
    }

    /* Adapter les cartes d'achat */
    .buy-view div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Adapter le simulateur de prix */
    .buy-view h3 {
        font-size: 20px !important;
    }

    /* Adapter le chat sur mobile */
    .chat-view .main-container {
        padding: 10px !important;
    }
    
    .chat-view h2 {
        display: none; /* Titre souvent redondant avec le header sur mobile */
    }

    /* Adapter le titre des demandes sur mobile */
    .new-file-request-view h2 {
        font-size: 18px !important;
        margin-top: 10px !important;
    }

    /* Écrans Login/Registration */
    .login-main-container {
        flex-direction: column !important;
    }

    .login-box {
        width: 100% !important;
        max-width: none !important;
        padding: 20px !important;
    }

    /* Adapter les boutons sur mobile */
    vaadin-button {
        max-width: 100% !important;
    }

    /* Forcer les boutons de connexion à la ligne sur mobile */
    .home-header, .cta-section vaadin-horizontal-layout, .login-main-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    /* Header optimization for mobile */
    .main-header {
        padding: 0 5px !important;
        gap: 5px !important;
    }

    .main-header .position-logo {
        max-height: 40px !important;
        margin: 0 !important;
    }

    .main-header .header-toggle {
        margin: 0 !important;
        min-width: 36px !important;
    }

    .main-header .user-info-layout {
        padding: 4px 6px !important;
    }

    .main-header .credits-layout {
        padding: 4px 8px !important;
    }

    .main-header .header-button {
        min-width: 36px !important;
        padding: 0 !important;
    }

    .tuning-time-badge, .status-badge-open, .status-badge-closed {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    .credits-value, .show-only-mobile {
        font-size: 12px !important;
    }

    /* Tablet optimization: allow some elements to be visible but compact */
    @media (min-width: 801px) and (max-width: 1100px) {
        .main-header {
            padding: 0 10px !important;
        }
        
        .main-header .position-logo {
            max-height: 50px !important;
        }
    }
    
    .cta-section vaadin-horizontal-layout {
        width: 100% !important;
    }

    .home-header .modern-button, 
    .home-header .modern-button-primary,
    .cta-section vaadin-button,
    .home-header .language-selector {
        width: 100% !important;
        margin: 0 !important;
    }

    .home-header span:empty {
        display: none !important;
    }

    /* Adapter les champs de texte sur mobile */
    vaadin-text-field, vaadin-password-field, vaadin-integer-field, vaadin-combo-box, vaadin-select, vaadin-date-picker {
        width: 100% !important;
    }
}

/* ========================================
   VARIABLES DE COULEURS
   ======================================== */
:root {
    --lsf-color-light-base       : 255, 255, 255;
    --lsf-color-light-shade      : 6, 6, 6;
    --lsf-color-light-tint       : 5, 150, 105;

    --lsf-color-dark-base        : 6, 6, 6;
    --lsf-color-dark-shade       : 5, 150, 105;
    --lsf-color-dark-text        : 207, 203, 199;

    --lsf-test-color-light-base  : rgb(255, 255, 255);
    --lsf-test-color-light-shade : #060606;
    --lsf-test-color-light-tint  : #4FE802;

    --lsf-test-color-dark-base   : #060606;
    --lsf-test-color-dark-shade  : #4FE802;
    --lsf-test-color-dark-text   : rgb(191, 185, 177);

    --lsf-color-error            : #e6b0aa;
    --lsf-color-warn             : #fad7a0;
}

/* ========================================
   THEME LUMO - Configuration de base
   ======================================== */
html {
    --lumo-font-family                                     : "Roboto Mono", monospace;

    --lumo-border-radius                                   : 0.125em;

    --lumo-line-height-xs                                  : 1.1;
    --lumo-line-height-s                                   : 1.2;
    --lumo-line-height-m                                   : 1.4;

    --lumo-size-xs                                         : 1.5rem;
    --lumo-size-s                                          : 1.75rem;
    --lumo-size-m                                          : 2rem;
    --lumo-size-l                                          : 2.5rem;
    --lumo-size-xl                                         : 3rem;

    --lumo-space-xs                                        : 0.1875rem;
    --lumo-space-s                                         : 0.3125rem;
    --lumo-space-m                                         : 0.625rem;
    --lumo-space-l                                         : 1.25rem;
    --lumo-space-xl                                        : 1.875rem;

    --lumo-font-size-xxs                                   : .75rem;
    --lumo-font-size-xs                                    : .8125rem;
    --lumo-font-size-s                                     : .875rem;
    --lumo-font-size-m                                     : .875rem;
    --lumo-font-size                                       : 1rem;
    --lumo-font-size-l                                     : 1.125rem;
    --lumo-font-size-xl                                    : 1.375rem;
    --lumo-font-size-xxl                                   : 1.75rem;
    --lumo-font-size-xxxl                                  : 2.5rem;

    --lumo-shade-5pct                                      : rgba(var(--lsf-color-light-shade), 0.05);
    --lumo-shade-10pct                                     : rgba(var(--lsf-color-light-shade), 0.1);
    --lumo-shade-20pct                                     : rgba(var(--lsf-color-light-shade), 0.2);
    --lumo-shade-30pct                                     : rgba(var(--lsf-color-light-shade), 0.3);
    --lumo-shade-40pct                                     : rgba(var(--lsf-color-light-shade), 0.4);
    --lumo-shade-50pct                                     : rgba(var(--lsf-color-light-shade), 0.5);
    --lumo-shade-60pct                                     : rgba(var(--lsf-color-light-shade), 0.6);
    --lumo-shade-70pct                                     : rgba(var(--lsf-color-light-shade), 0.7);
    --lumo-shade-80pct                                     : rgba(var(--lsf-color-light-shade), 0.8);
    --lumo-shade-90pct                                     : rgba(var(--lsf-color-light-shade), 0.9);
    --lumo-shade                                           : rgb(var(--lsf-color-light-shade));

    --lumo-tint-5pct                                       : rgba(var(--lsf-color-light-tint), 0.05);
    --lumo-tint-10pct                                      : rgba(var(--lsf-color-light-tint), 0.1);
    --lumo-tint-20pct                                      : rgba(var(--lsf-color-light-tint), 0.2);
    --lumo-tint-30pct                                      : rgba(var(--lsf-color-light-tint), 0.3);
    --lumo-tint-40pct                                      : rgba(var(--lsf-color-light-tint), 0.4);
    --lumo-tint-50pct                                      : rgba(var(--lsf-color-light-tint), 0.5);
    --lumo-tint-60pct                                      : rgba(var(--lsf-color-light-tint), 0.6);
    --lumo-tint-70pct                                      : rgba(var(--lsf-color-light-tint), 0.7);
    --lumo-tint-80pct                                      : rgba(var(--lsf-color-light-tint), 0.8);
    --lumo-tint-90pct                                      : rgba(var(--lsf-color-light-tint), 0.9);
    --lumo-tint                                            : rgb(var(--lsf-color-light-tint));

    --lumo-primary-color-10pct                             : rgba(var(--lsf-color-light-tint), 0.1);
    --lumo-primary-color-50pct                             : rgba(var(--lsf-color-light-tint), 0.5);
    --lumo-primary-color                                   : rgb(var(--lsf-color-light-tint));

    --lumo-primary-text-color                              : rgb(var(--lsf-color-light-tint));
    --lumo-base-color                                      : rgb(var(--lsf-color-light-base));

    --darkreader-bg--lumo-tint-5pct                        : rgba(var(--lsf-color-dark-shade), 0.05);
    --darkreader-bg--lumo-tint-10pct                       : rgba(var(--lsf-color-dark-shade), 0.1);
    --darkreader-bg--lumo-tint-20pct                       : rgba(var(--lsf-color-dark-shade), 0.2);
    --darkreader-bg--lumo-tint-30pct                       : rgba(var(--lsf-color-dark-shade), 0.3);
    --darkreader-bg--lumo-tint-40pct                       : rgba(var(--lsf-color-dark-shade), 0.4);
    --darkreader-bg--lumo-tint-50pct                       : rgba(var(--lsf-color-dark-shade), 0.5);
    --darkreader-bg--lumo-tint-60pct                       : rgba(var(--lsf-color-dark-shade), 0.6);
    --darkreader-bg--lumo-tint-70pct                       : rgba(var(--lsf-color-dark-shade), 0.7);
    --darkreader-bg--lumo-tint-80pct                       : rgba(var(--lsf-color-dark-shade), 0.8);
    --darkreader-bg--lumo-tint-90pct                       : rgba(var(--lsf-color-dark-shade), 0.9);
    --darkreader-bg--lumo-tint                             : rgb(var(--lsf-color-dark-shade));

    --darkreader-bg--lumo-shade-5pct                       : rgba(var(--lsf-color-dark-shade), 0.05);
    --darkreader-bg--lumo-shade-10pct                      : rgba(var(--lsf-color-dark-shade), 0.1);
    --darkreader-bg--lumo-shade-20pct                      : rgba(var(--lsf-color-dark-shade), 0.2);
    --darkreader-bg--lumo-shade-30pct                      : rgba(var(--lsf-color-dark-shade), 0.3);
    --darkreader-bg--lumo-shade-40pct                      : rgba(var(--lsf-color-dark-shade), 0.4);
    --darkreader-bg--lumo-shade-50pct                      : rgba(var(--lsf-color-dark-shade), 0.5);
    --darkreader-bg--lumo-shade-60pct                      : rgba(var(--lsf-color-dark-shade), 0.6);
    --darkreader-bg--lumo-shade-70pct                      : rgba(var(--lsf-color-dark-shade), 0.7);
    --darkreader-bg--lumo-shade-80pct                      : rgba(var(--lsf-color-dark-shade), 0.8);
    --darkreader-bg--lumo-shade-90pct                      : rgba(var(--lsf-color-dark-shade), 0.9);
    --darkreader-bg--lumo-shade                            : rgb(var(--lsf-color-dark-shade));

    --darkreader-bg--lumo-primary-color-10pct              : rgba(var(--lsf-color-dark-shade), 0.1);
    --darkreader-bg--lumo-primary-color-50pct              : rgba(var(--lsf-color-dark-shade), 0.5);
    --darkreader-bg--lumo-primary-color                    : rgb(var(--lsf-color-dark-shade));

    --darkreader-text--lumo-primary-color                  : rgb(var(--lsf-color-dark-shade));
    --darkreader-text--lumo-shade                          : rgb(var(--lsf-color-dark-text));
    --darkreader-text--lumo-secondary-text-color           : var(var(--lsf-color-dark-text));
    --darkreader-text--lumo-required-field-indicator-color : var(var(--lsf-color-dark-text));
    --darkreader-text--lumo-header-text-color              : var(var(--lsf-color-dark-text));
}

/* ========================================
   THEME LUMO SOMBRE
   ======================================== */
[theme~="dark"] {
    --lumo-shade-5pct           : rgba(var(--lsf-color-dark-shade), 0.05);
    --lumo-shade-10pct          : rgba(var(--lsf-color-dark-shade), 0.1);
    --lumo-shade-20pct          : rgba(var(--lsf-color-dark-shade), 0.2);
    --lumo-shade-30pct          : rgba(var(--lsf-color-dark-shade), 0.3);
    --lumo-shade-40pct          : rgba(var(--lsf-color-dark-shade), 0.4);
    --lumo-shade-50pct          : rgba(var(--lsf-color-dark-shade), 0.5);
    --lumo-shade-60pct          : rgba(var(--lsf-color-dark-shade), 0.6);
    --lumo-shade-70pct          : rgba(var(--lsf-color-dark-shade), 0.7);
    --lumo-shade-80pct          : rgba(var(--lsf-color-dark-shade), 0.8);
    --lumo-shade-90pct          : rgba(var(--lsf-color-dark-shade), 0.9);
    --lumo-shade                : rgb(var(--lsf-color-dark-shade));

    --lumo-primary-color-10pct  : rgba(var(--lsf-color-dark-shade), 0.1);
    --lumo-primary-color-50pct  : rgba(var(--lsf-color-dark-shade), 0.5);
    --lumo-primary-color        : rgb(var(--lsf-color-dark-shade));

    --lumo-disabled-text-color  : rgb(var(--lsf-color-dark-text));
    --lumo-primary-text-color   : rgb(var(--lsf-color-dark-shade));
    --lumo-secondary-text-color : var(--lumo-tint-70pct);
    --lumo-base-color           : rgb(var(--lsf-color-dark-base));
}

/* ========================================
   STYLES GLOBAUX
   ======================================== */
* {
    box-sizing  : border-box;
    font-family : "Roboto Mono", monospace;
    font-size   : 14px;
}

body {
	background: url("https://pepstuning.com/BACKGROUND.JPG") center center / cover no-repeat fixed;
}

/* Application globale des polices */
html, body {
    font-family: var(--lsf-font-primary) !important;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--lsf-font-heading) !important;
    font-weight: 700;
}

h2 {
    font-size     : var(--lumo-font-size-xxl);
    margin-top    : 0.5em;
    margin-bottom : 0.25em;
}

h4 {
	text-decoration: underline solid var(--lumo-primary-color);
    font-size     : var(--lumo-font-size-xxl);
    margin-top    : 0.5em;
    margin-bottom : 0.5em;
}

thead {
	font-weight: bold;
	font-size: 14px;
}

em {
	background-color: #E9B72C;
	font-weight: bold;
}

/* Boutons et éléments interactifs */
vaadin-button {
    font-family: var(--lsf-font-primary) !important;
}

/* Menu de navigation */
.main-header {
    font-family: var(--lsf-font-primary) !important;
}

/* Texte du menu */
.main-drawer vaadin-button {
    font-family: var(--lsf-font-primary) !important;
}

/* ========================================
   CLASSES UTILITAIRES
   ======================================== */
.label-info {
	font-weight: bold;
	font-style: italic;
	width: 100%;
 	padding: var(--lumo-space-m);
  	border: 1px solid #eee;
    border-bottom: 1px solid var(--lsf-test-color-light-tint);
}

.version-ok {
	background-color: #4CD24C;
	font-weight: bold;
}

.version-ko {
	background-color: #E9B72C;
	font-weight: bold;
}

.version-empty {
	background-color: transparent;
}

.bus-red {
	color: rgba(249, 12, 12, 0.43);
}

.bus-freeze {
	color: rgb(0, 210, 210);
}

.bus-red-freeze {
	color: radial-gradient(circle, rgba(0, 210, 210,1) 18%, rgba(249,12,12,1) 84%);
}

.labelhight {
  font-size: 48px;
  font-weight: bold;
  background-color: #ffffff00;
}

.titre {
	text-align: center;
	width: 100%;
}

.sous-titre {
	text-decoration: solid var(--lumo-primary-color);
    font-size     : var(--lumo-font-size-l);
    margin-top    : 3em;
    margin-bottom : 0.5em;
}

.color-picker {
	display: inline-block;
	width: 20%;
	font-family : "Roboto Mono", monospace !important;
    font-size   : 14px;
}

.wysiwyg {
	background-color: #FEFEE2;
	box-shadow : 10px 5px 5px var(--lsf-test-color-dark-text);
	margin-bottom: 10px;
}

.tuilenormale {
	padding: 30px;
	width: 30vh;
	border: 1px solid lightgrey;
	border-radius: 3px;
	align-items: center;
}

/* Classe pour le texte stylé avec largeur et alignement */
.styled-text-wrapper {
    width: 100%;
    text-align: left;
    line-height: 1.6;
}

/* ========================================
   COMPOSANTS VAADIN
   ======================================== */
vaadin-menu-bar vaadin-icon {
	height	 : 20px !important;
	font-size: 20px  !important;
}

vaadin-menu-bar-button {
	background-color: var(--lsf-test-color-dark-base);
	color			: white;
	height			: 20px;
}

vaadin-menu-bar-item {
    font-size  : 14px !important;
}

vaadin-menu-bar-overlay::part(overlay) {
    background : var(--lumo-base-color) !important;
    color      : white;
}

/* Sous menu */
.menu-item-sub {
    background-color : var(--lumo-primary-color) !important;
    color            : var(--lumo-base-color);
    margin           : 0.5rem 0.75rem;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes flash {
    0% {
        opacity : 1;
    }
    50% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* ========================================
   COMPOSANTS MODERNES
   ======================================== */

/* Modern Card */
.modern-card {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(0, 217, 163, 0.3);
    border-radius: 16px;
    padding: var(--spacing-xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modern-card:hover {
    border-color: rgba(0, 217, 163, 0.5);
    box-shadow: 0 8px 30px rgba(0, 217, 163, 0.3);
    transform: translateY(-2px);
}

/* Modern Button */
.modern-button {
    background: rgba(0, 217, 163, 0.1) !important;
    border: 1px solid rgba(0, 217, 163, 0.5) !important;
    color: #00D9A3 !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.modern-button:hover {
    background: rgba(0, 217, 163, 0.2) !important;
    border-color: #00D9A3 !important;
    box-shadow: 0 4px 15px rgba(0, 217, 163, 0.4) !important;
    transform: translateY(-2px) !important;
}

.modern-button-primary {
    background: linear-gradient(135deg, #00D9A3 0%, #00FFC6 100%) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(0, 217, 163, 0.3) !important;
    transition: all 0.3s ease !important;
}

.modern-button-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 217, 163, 0.5) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* Modern Input */
.modern-input input,
.modern-input textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(0, 217, 163, 0.2) !important;
    border-radius: 12px !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.modern-input input:focus,
.modern-input textarea:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #00D9A3 !important;
    box-shadow: 0 0 0 4px rgba(0, 217, 163, 0.1) !important;
}

.modern-input input::placeholder,
.modern-input textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Modern Login Field */
.modern-login-field {
    margin-bottom: 16px;
}

.modern-login-field input,
.modern-login-field textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(0, 217, 163, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: white !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.modern-login-field input:focus,
.modern-login-field textarea:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #00D9A3 !important;
    box-shadow: 0 0 0 4px rgba(0, 217, 163, 0.1) !important;
    outline: none !important;
}

.modern-login-field label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* Language Selector */
.language-selector-login {
    gap: 8px;
    margin-bottom: 20px;
}

.lang-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.lang-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 217, 163, 0.5) !important;
    color: #00D9A3 !important;
}

.lang-button.lang-active {
    background: rgba(0, 217, 163, 0.2) !important;
    border-color: #00D9A3 !important;
    color: #00D9A3 !important;
    font-weight: bold !important;
}

/* Signup Prompt */
.signup-prompt {
    text-align: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.signup-link {
    color: #00D9A3 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.signup-link:hover {
    text-decoration: underline !important;
    color: #00FFC6 !important;
}

/* Login Title */
.login-title {
    color: #00D9A3 !important;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(0, 217, 163, 0.3);
    font-size: 28px !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .login-main-container {
        flex-direction: column !important;
    }
    
    .login-left-panel,
    .login-right-panel {
        width: 100% !important;
        min-height: 50vh;
    }
    
    .login-right-panel {
        display: none; /* Masquer l'image sur tablette */
    }
}

@media (max-width: 768px) {
    .modern-card {
        padding: var(--spacing-md);
    }
    
    .modern-button,
    .modern-button-primary {
        width: 100%;
        justify-content: center;
    }
    
    .modern-login-field input,
    .modern-login-field textarea {
        font-size: 16px !important; /* Évite le zoom sur iOS */
    }
    
    .hero-section {
        padding: 60px 20px !important;
    }
    
    .hero-section h1 {
        font-size: 36px !important;
    }
    
    .hero-section h2 {
        font-size: 20px !important;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background: rgba(0, 217, 163, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(0, 217, 163, 0.3);
    color: white;
}