/**
 * SYSTÈME DE FORMULAIRES UNIFIÉ - IMMOPOCKET
 * Compatible AUTH (login/register) ET PAGES CONNECTÉES
 * Version 2025 - Design moderne avec floating labels
 */

/* ========================================
   VARIABLES FORMULAIRES
   ======================================== */
:root {
    /* Couleurs formulaires - Utilise les variables de main.css */
    --form-bg: var(--bg-secondary, #ffffff);
    --form-border: var(--border-color, #e2e8f0);
    --form-border-focus: var(--primary-color, #447CAC);
    --form-border-error: var(--error-color, #ef4444);
    --form-border-success: var(--success-color, #10b981);

    /* Textes formulaires */
    --form-text: var(--text-primary, #1e293b);
    --form-text-light: var(--text-secondary, #64748b);
    --form-text-muted: var(--text-muted, #94a3b8);
    --form-text-placeholder: var(--text-muted, #94a3b8);

    /* Ombres */
    --form-shadow-focus: 0 0 0 4px rgba(68, 124, 172, 0.1);
    --form-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
    --form-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ========================================
   GRILLE DE FORMULAIRE
   ======================================== */
.form-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr; /* Mobile par défaut */
}

/* Desktop : 2 colonnes par défaut */
@media (min-width: 769px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid.three-cols {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.form-grid.two-cols {
    grid-template-columns: 1fr 1fr;
}

.form-grid.three-cols {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Grille spéciale pour les filtres : 5 colonnes en desktop */
.form-grid.filters-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 769px) {
    .form-grid.filters-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1400px) {
    .form-grid.filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .form-grid.filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid.two-cols,
    .form-grid.three-cols,
    .form-grid.filters-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   FILTRES AVANCÉS
   ======================================== */
.btn-advanced-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    margin-top: 1rem;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-advanced-filters:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.btn-advanced-filters .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.btn-advanced-filters.active .toggle-icon {
    transform: rotate(180deg);
}

.advanced-filters-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   GROUPES DE CHAMPS
   ======================================== */
.form-group,
.auth-form .form-group {
    position: relative;
    margin-bottom: 1rem;
}

/* Espacement réduit dans les modales */
.modal-overlay .form-group,
.modal-container .form-group,
.modal-body .form-group {
    margin-bottom: 0.75rem;
}

.modal-overlay .form-row,
.modal-container .form-row,
.modal-body .form-row {
    margin-bottom: 0.5rem;
}

.modal-overlay .form-section,
.modal-container .form-section,
.modal-body .form-section {
    margin-bottom: 1.25rem;
}

/* ========================================
   SYSTÈME D'INPUT UNIFIÉ
   Supporte .input-wrapper (auth) ET .input-with-icon (pages connectées)
   ======================================== */

/* Wrapper pour input avec icône */
.input-wrapper,
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--form-bg);
    border: 2px solid var(--form-border);
    border-radius: clamp(8px, 1vw, 12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Icône dans l'input - Position et style (enfant direct uniquement) */
.input-wrapper > i,
.input-with-icon > i {
    position: absolute;
    left: 16px;
    color: var(--form-text-muted);
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

/* Inputs et selects dans les wrappers - AVEC floating label */
.input-wrapper > input,
.input-wrapper > select {
    width: 100%;
    padding: 20px 16px 8px 48px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--form-text);
    outline: none;
    transition: all 0.3s ease;
    z-index: 2;
    box-sizing: border-box;
    min-height: 44px;
}

/* Inputs et selects dans wrappers - AVEC label statique (padding uniforme) */
.form-group > .form-label + .input-wrapper input,
.form-group > .form-label + .input-wrapper select,
.form-group > .form-label + .input-wrapper .form-input,
.form-group > .form-label + .input-wrapper .form-select,
.input-with-icon input,
.input-with-icon select,
.input-with-icon .form-input,
.input-with-icon .form-select {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--form-text);
    outline: none;
    transition: all 0.3s ease;
    z-index: 2;
    box-sizing: border-box;
    min-height: 44px;
}

.input-wrapper select,
.input-with-icon select,
.input-wrapper .form-select,
.input-with-icon .form-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 3rem;
}

/* ========================================
   LABELS STATIQUES (pour pages connectées)
   Label AVANT .input-wrapper - Priorité maximale
   ======================================== */
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--form-text);
    margin-bottom: 0.5rem;
    display: block;
    position: static !important;
    transform: none !important;
    background: transparent;
    left: auto !important;
    top: auto !important;
}

.form-label .required {
    color: var(--form-border-error);
    margin-left: 2px;
}

/* ========================================
   FLOATING LABELS (pour auth uniquement)
   Label DANS .input-wrapper
   ======================================== */
.input-wrapper > label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--form-text-muted);
    font-size: 1rem;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    background: transparent;
    padding: 0 4px;
}

/* Label floats when input is focused or filled */
.input-wrapper > input:focus ~ label,
.input-wrapper > input:not(:placeholder-shown) ~ label,
.input-wrapper > select:focus ~ label,
.input-wrapper > select:valid ~ label,
.form-group.has-value .input-wrapper > label {
    top: 8px;
    transform: translateY(0);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--form-border-focus);
    left: 48px;
}

/* Placeholder visible pour labels statiques, caché pour floating labels */
.input-wrapper > input::placeholder {
    opacity: 0;
    transition: opacity 0.3s;
}

.input-wrapper > input:focus::placeholder {
    opacity: 0.5;
}

/* Si le label est statique (AVANT .input-wrapper), le placeholder est visible */
.form-group > .form-label + .input-wrapper input::placeholder,
.form-group > .form-label + .input-with-icon input::placeholder,
.input-with-icon input::placeholder {
    opacity: 1;
}

/* ========================================
   ÉTATS : FOCUS, VALID, ERROR
   ======================================== */

/* Focus state - Modern glow effect */
.input-wrapper:focus-within,
.input-with-icon:focus-within {
    border-color: var(--form-border-focus);
    box-shadow: var(--form-shadow-focus);
    background: var(--bg-primary, #f8fafc);
}

.input-wrapper:focus-within > i,
.input-with-icon:focus-within > i {
    color: var(--form-border-focus);
    transform: translateY(-50%) scale(1.05);
}

/* Valid state */
.input-wrapper.valid,
.input-with-icon.valid,
.form-group.success .input-wrapper,
.form-group.success .input-with-icon {
    border-color: var(--form-border-success);
}

.input-wrapper.valid > i,
.input-with-icon.valid > i,
.form-group.success > i {
    color: var(--form-border-success);
}

.input-wrapper.valid::after,
.form-group.success .input-wrapper::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    color: var(--form-border-success);
    font-size: 1rem;
    animation: checkmark 0.3s ease;
}

@keyframes checkmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Error state */
.input-wrapper.error,
.input-with-icon.error,
.form-group.error .input-wrapper,
.form-group.error .input-with-icon,
.form-group.error .form-input,
.form-group.error .form-select {
    border-color: var(--form-border-error);
    box-shadow: var(--form-shadow-error);
    animation: shake 0.3s;
}

.input-wrapper.error > i,
.input-with-icon.error > i,
.form-group.error > i {
    color: var(--form-border-error);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* Messages d'erreur */
.error-message {
    color: var(--form-border-error);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========================================
   INPUTS STANDALONE (sans wrapper)
   ======================================== */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--form-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--form-bg);
    color: var(--form-text);
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-height: 44px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: var(--form-shadow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--form-text-placeholder);
}

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

/* ========================================
   PASSWORD TOGGLE
   ======================================== */
.password-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--form-text-light);
    cursor: pointer;
    font-size: 1.125rem;
    transition: all 0.15s ease;
    z-index: 4;
    padding: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.password-toggle:hover {
    color: var(--form-text);
}

/* ========================================
   FORM ROWS (lignes de formulaire)
   ======================================== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-row.single {
    grid-template-columns: 1fr;
}

.form-row.three-cols {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .form-row,
    .form-row.three-cols {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section {
    margin-bottom: 2rem;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--form-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section-title i {
    color: var(--form-border-focus);
}

/* ========================================
   FORM ACTIONS (boutons)
   ======================================== */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--form-border);
}

.form-actions .btn {
    min-width: 120px;
}

@media (max-width: 640px) {
    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ========================================
   CHECKBOXES ET RADIOS MODERNES
   ======================================== */
.form-checkbox,
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input[type="checkbox"],
.checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--form-border-focus);
}

.form-checkbox span,
.checkbox-wrapper span {
    font-size: 0.875rem;
    color: var(--form-text);
}

/* ========================================
   STYLES SPÉCIFIQUES BAUX (options colorées)
   ======================================== */
select#paiement-bail option[data-statut="actif"] {
    color: #059669;
    font-weight: 500;
}

select#paiement-bail option[data-statut="a-venir"] {
    color: #3b82f6;
}

select#paiement-bail option[data-statut="preavis"],
select#paiement-bail option[data-statut="en_cours_resiliation"] {
    color: #f59e0b;
}

select#paiement-bail option[data-statut="resilie"],
select#paiement-bail option[data-statut="termine"] {
    color: #6b7280;
    font-style: italic;
}

select#paiement-bail option[data-statut="brouillon"],
select#paiement-bail option[data-statut="attente_signature"] {
    color: #8b5cf6;
}

/* Classes dynamiques appliquées au select en fonction du bail sélectionné */
select#paiement-bail.statut-actif {
    border-left: 3px solid #059669;
    background-color: #f0fdf4;
}

select#paiement-bail.statut-a-venir {
    border-left: 3px solid #3b82f6;
    background-color: #eff6ff;
}

select#paiement-bail.statut-preavis,
select#paiement-bail.statut-en-cours-resiliation {
    border-left: 3px solid #f59e0b;
    background-color: #fffbeb;
}

select#paiement-bail.statut-resilie,
select#paiement-bail.statut-termine {
    border-left: 3px solid #6b7280;
    background-color: #f9fafb;
}

select#paiement-bail.statut-brouillon,
select#paiement-bail.statut-attente-signature {
    border-left: 3px solid #8b5cf6;
    background-color: #faf5ff;
}

/* ========================================
   UTILITAIRES
   ======================================== */
.hidden {
    display: none !important;
}

.show:not(.modern-modal-overlay) {
    display: block !important;
}

.required {
    color: var(--form-border-error);
}

/* ========================================
   CHECKBOXES ACQUISITION - Financement
   AJOUT 28/11/2025
   ======================================== */
.acquisition-checkbox-group {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color, #447CAC);
}

.acquisition-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.acquisition-checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.acquisition-checkbox-content {
    flex: 1;
}

.acquisition-checkbox-title {
    font-weight: 500;
    color: #1f2937;
    display: block;
    margin-bottom: 0.25rem;
}

.acquisition-checkbox-description {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ========================================
   UTILITY CLASSES - Acquisition Page
   AJOUT 28/11/2025 - Refactoring inline styles
   ======================================== */

/* Input helper text - répété 9+ fois dans asset_acquisition */
.input-helper {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.input-helper-hidden {
    display: none;
    color: #6b7280;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Spacing utilities */
.ml-8 {
    margin-left: 8px;
}

.mt-15 {
    margin-top: 1.5rem;
}

.mt-10 {
    margin-top: 1rem;
}

.mt-075 {
    margin-top: 0.75rem;
}

/* Display utilities */
.hidden {
    display: none;
}

.flex-end-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Visibility */
.invisible {
    visibility: hidden;
}

/* KPI info button positioning */
.kpi-info-btn-spaced {
    margin-left: 8px;
}

/* Modal subtitle text */
.modal-subtitle-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Investissement footer summary */
.investissement-footer {
    padding: 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1rem;
}

.investissement-separator {
    margin: 0 0.5rem;
}

.investissement-highlight {
    color: #ec4899;
}

/* Total cost container */
.acq-total-cost-mt {
    margin-top: 1.5rem;
}

/* Différé section - Blue gradient box */
.differe-container {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 8px;
    border: 1px solid #93c5fd;
}

.differe-flex-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.differe-checkbox {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.differe-content {
    flex: 1;
}

.differe-label {
    cursor: pointer;
    margin-bottom: 0.25rem;
    display: block;
    font-weight: 600;
    color: #1e40af;
}

.differe-icon {
    margin-right: 0.5rem;
}

.differe-info-text {
    font-size: 0.8rem;
    color: #3b82f6;
    margin: 0;
    line-height: 1.5;
}

.differe-help-box {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #4b5563;
}

.differe-help-box p {
    margin: 0 0 0.5rem 0;
}

.differe-help-box p:last-child {
    margin: 0;
}

/* Required field asterisk */
.text-required {
    color: #ef4444;
}

/* Full width field */
.full-width {
    width: 100%;
}

/* ========================================
   ÉTATS DE VALIDATION INLINE
   ======================================== */

/* État erreur */
.form-group.has-error .input-wrapper,
.form-group.has-error .input-with-icon {
    border-color: var(--form-border-error);
    box-shadow: var(--form-shadow-error);
}

.form-group.has-error .input-wrapper > i,
.form-group.has-error .input-with-icon > i {
    color: var(--form-border-error);
}

.form-group.has-error .form-label {
    color: var(--form-border-error);
}

/* État succès */
.form-group.has-success .input-wrapper,
.form-group.has-success .input-with-icon {
    border-color: var(--form-border-success);
}

.form-group.has-success .input-wrapper > i,
.form-group.has-success .input-with-icon > i {
    color: var(--form-border-success);
}

/* Message d'erreur sous le champ */
.field-error {
    color: var(--form-border-error);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    animation: slideInError 0.2s ease;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}