/* css/forms.css ou à ajouter à css/guild.css */

/* Styles généraux pour les sections de gestion */
.guild-management-section.card {
    background-color: #2e2e2e; /* Correspond au style de carte du profil */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.guild-management-section.card h2 {
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #4CAF50; /* Vert Titre */
    font-size: 1.5em;
}

/* Style pour les formulaires à l'intérieur des sections */
.styled-form .form-group {
    margin-bottom: 20px; /* Espace entre les groupes de champs */
}

.styled-form label,
.styled-form .form-group > label { /* Cible les labels directs d'un form-group */
    display: block; /* Chaque label sur sa propre ligne */
    font-weight: bold;
    color: #e0e0e0; /* Texte de label un peu plus clair */
    margin-bottom: 8px; /* Espace entre le label et son champ */
}

.styled-form input[type="text"],
.styled-form input[type="number"],
.styled-form input[type="file"],
.styled-form select,
.styled-form textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: #1e1e1e; /* Fond plus sombre pour les champs */
    border: 1px solid #555;
    color: #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Pour que padding et border n'ajoutent pas à la largeur */
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.styled-form input[type="text"]:focus,
.styled-form input[type="number"]:focus,
.styled-form input[type="file"]:focus,
.styled-form select:focus,
.styled-form textarea:focus {
    border-color: #4CAF50; /* Bordure verte au focus */
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3); /* Ombre externe douce */
    outline: none;
}

.styled-form textarea {
    min-height: 80px; /* Hauteur minimale pour les textareas */
    resize: vertical; /* Permettre le redimensionnement vertical */
}

/* Style pour les messages d'aide <small> */
.styled-form .form-group small {
    display: block; /* Sur sa propre ligne, en dessous du champ */
    font-size: 0.85em;
    color: #aaa;
    margin-top: 6px; /* Espace par rapport au champ au-dessus */
    font-style: italic; /* En italique comme demandé */
}

/* Checkbox et son label */
.styled-form .form-group input[type="checkbox"] {
    width: auto; /* Ne pas prendre toute la largeur */
    margin-right: 8px;
    vertical-align: middle;
}
.styled-form .form-group label.checkbox-label {
    display: inline; /* Pour que le label soit à côté de la checkbox */
    font-weight: normal; /* Moins gras que les labels de champ principaux */
    color: #ccc;
}

/* Actions du formulaire (boutons) */
.styled-form .form-actions {
    margin-top: 25px;
    text-align: right; /* Aligner les boutons à droite */
}

/* Réutiliser .papel-pass-button pour la cohérence ou créer .guild-form-button */
/* Si vous utilisez .papel-pass-button, assurez-vous qu'il est bien stylé */
.styled-form .papel-pass-button.primary { /* Ou .guild-form-button.primary */
    /* Styles déjà définis (fond vert, etc.) */
}

/* Galerie de bannières prédéfinies (placeholder) */
.predefined-banners-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #555;
    border-radius: 4px;
    min-height: 50px; /* Pour voir la bordure même si vide */
}
.predefined-banners-gallery .banner-thumbnail { /* Pour chaque miniature de bannière */
    width: 150px; /* Exemple */
    height: 50px;  /* Exemple */
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.predefined-banners-gallery .banner-thumbnail:hover,
.predefined-banners-gallery .banner-thumbnail.selected {
    border-color: #4CAF50; /* Surligner au survol ou si sélectionné */
}

/* Style pour la bannière actuelle dans la section de gestion */
.guild-management-section img[alt="Bannière actuelle"] {
    max-width: 50%; /* S'adapte à la largeur de la carte */
    height: auto;
    max-height: 120px; /* Limiter la hauteur pour ne pas prendre trop de place */
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #444;
    margin-top: 10px;
    margin-bottom: 15px;
	margin: 10px auto;
	
}

/* Retirer les flèches des champs input de type number pour Webkit (Chrome, Safari, Edge) */
.styled-form input[type="number"]::-webkit-outer-spin-button,
.styled-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Assure qu'aucun espace n'est laissé par les flèches */
	
}

/* Retirer les flèches des champs input de type number pour Firefox */
.styled-form input[type="number"] {
    -moz-appearance: textfield; /* Fait ressembler le champ à un champ texte normal */
}

/* Dans guild.css ou forms.css */
.styled-form input[type="file"] {
    border: 1px solid #555;
    background-color: #3a3a3a;
    color: #ccc;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    /* Pour essayer de le faire ressembler un peu plus à un bouton */
    /* Cela dépendra beaucoup du navigateur */
}
.styled-form input[type="file"]::-webkit-file-upload-button { /* Pour Chrome/Edge/Opera */
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 10px;
}
.styled-form input[type="file"]::file-selector-button { /* Standard, support Firefox */
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 10px;
}

/* ... autres styles de guild.css ... */

.current-banner-preview { /* Pour la bannière actuelle affichée */
    max-width: 400px; /* Ajustez */
    max-height: 120px;
    display: block;
    margin-top: 5px;
    border: 1px solid #555;
    object-fit: cover; /* Pour bien remplir sans déformer */
}

.predefined-banners-gallery {
    display: flex;
    flex-wrap: wrap; /* Les bannières passent à la ligne si pas assez de place */
    gap: 10px; /* Espace entre les miniatures */
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #252525; /* Fond légèrement différent pour la galerie */
}

.banner-radio-label {
    display: flex;
    flex-direction: column; /* Image au-dessus du nom/radio */
    align-items: center;
    cursor: pointer;
    padding: 5px;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    border-radius: 4px;
    transition: border-color 0.2s;
}

.banner-radio-label:hover {
    border-color: #555;
}

.banner-radio-label input[type="radio"] {
    margin-bottom: 5px; /* Espace entre le radio et l'image */
}

/* Style quand le radio est coché (via JS ou CSS :checked + sibling) */
.banner-radio-label input[type="radio"]:checked + .banner-thumbnail-radio + span {
    /* On pourrait styler le span ou le label entier */
}
.banner-radio-label input[type="radio"]:checked ~ img.banner-thumbnail-radio {
    border: 2px solid #4CAF50; /* Bordure verte pour la miniature sélectionnée */
    box-shadow: 0 0 8px #4CAF50;
}


.banner-thumbnail-radio {
    width: 150px; /* Taille des miniatures */
    height: 40px;  /* Ajustez pour le ratio de vos bannières */
    object-fit: cover; /* Pour bien remplir sans déformer */
    border-radius: 3px;
    margin-bottom: 5px;
}

.banner-radio-label span { /* Pour le nom du fichier sous la miniature */
    font-size: 0.8em;
    color: #aaa;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guild-level-select-group .level-select-wrapper {
    display: flex;
    align-items: center;
}
.level-icon-preview {
    width: 108px; /* Ajustez la taille */
    height: 30px;
    margin-right: 8px;
    object-fit: contain;
    vertical-align: middle; /* S'assurer qu'elle est alignée avec le select */
}
.guild-level-select-dropdown {
    flex-grow: 1; /* Pour que le select prenne la place restante */
    /* Styles existants pour votre select */
    padding: 8px; 
    border: 1px solid #555; 
    background-color: #333; 
    color: #ccc; 
    border-radius: 4px; 
}

/* Cache le bouton radio actuel, mais il reste fonctionnel */
.visually-hidden-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Empêche toute interaction directe avec le radio caché */
}

/* Style pour le label qui contient l'image, le rendant cliquable */
.banner-radio-label {
    display: inline-block; /* Ou block, selon votre layout de galerie */
    margin: 5px;
    padding: 5px;
    border: 2px solid transparent; /* Bordure initiale transparente */
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-align: center; /* Pour centrer le nom du fichier sous l'image */
}

.banner-thumbnail-radio { /* L'image elle-même */
    display: block; /* Pour que la marge auto fonctionne si besoin */
    max-width: 150px; /* Ajustez la taille des miniatures */
    height: auto; /* Ajustez la hauteur ou laissez auto */
    min-height: 50px; /* Pour une taille minimale */
    border: 1px solid #555;
    border-radius: 4px;
    margin-bottom: 5px; /* Espace avant le nom du fichier */
}

.banner-filename-display { /* Pour le nom des bannières prédéfinies */
    font-size: 0.8em;
    color: #ccc;
    display: block; /* Sous l'image */
}

/* Style lorsque le radio (caché) associé est coché, appliqué au label parent */
.banner-radio-label input[type="radio"]:checked + img,
.banner-radio-label img.selected { /* 'selected' est ajoutée via PHP pour l'item actif au chargement */
    border-color: #4CAF50; /* Couleur de sélection */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.7);
}

/* Effet de survol sur le label */
.banner-radio-label:hover img {
    border-color: #666;
    transform: scale(1.03);
}

/* CSS pour la galerie (si vous voulez un affichage en grille) */
.predefined-banners-gallery {
    display: flex;
    flex-wrap: wrap; /* Passe à la ligne si pas assez de place */
    gap: 10px; /* Espace entre les labels/images */
    justify-content: center; /* Centrer les items si la ligne n'est pas pleine */
    margin-bottom: 15px;
}

.predefined-assets-gallery,
.custom-assets-gallery { /* Concerne les galeries de bannières et de logos */
    display: flex;
    flex-wrap: wrap; /* Permet aux items de passer à la ligne */
    gap: 10px;       /* Espace entre les items */
    /* justify-content: flex-start; Aligner au début par défaut */
	justify-content: center; /* Aligner au début par défaut */
    padding: 10px 0;
    border: 1px solid #4a4a4a; /* Optionnel: pour délimiter la galerie */
    border-radius: 4px;
    background-color: #2f2f2f; /* Léger fond pour la galerie */
    max-height: 300px; /* Limiter la hauteur et ajouter un scroll vertical si trop d'items */
    overflow-y: auto;
}

.asset-radio-label { /* Pour chaque item dans la galerie (bannière ou logo) */
    display: flex; /* Aligner l'image et le nom (si présent) */
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 5px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    background-color: #383838;
    transition: border-color 0.2s, transform 0.2s;
    width: 160px; /* Largeur fixe pour chaque miniature */
}
.asset-radio-label:hover img {
     transform: scale(1.05);
}

.asset-thumbnail-radio { /* Les images dans les galeries */
    max-width: 150px;   /* Ajustez */
    max-height: 80px;  /* Ajustez pour la hauteur des miniatures de bannière/logo */
    min-height: 50px;
    object-fit: contain; /* ou cover, selon l'effet voulu */
    border: 1px solid #555;
    border-radius: 4px;
    margin-bottom: 5px;
    background-color: #222; /* Fond si image transparente */
}

.asset-filename-display { /* Pour les noms des logos/bannières prédéfinis */
    font-size: 0.8em;
    color: #ccc;
    display: block;
    margin-top: 3px;
    word-break: break-all; /* Pour couper les noms longs */
    max-width: 140px; /* Éviter que le texte ne dépasse trop */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-thumbnail-radio.selected, /* Classe PHP pour l'élément actif au chargement */
.asset-radio-label input[type="radio"]:checked + .asset-thumbnail-radio { /* Pour l'élément sur lequel on vient de cliquer */
    border: 1px solid #4CAF50; /* Vert de sélection, ajustez */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
}


/* Style pour la preview du grand logo ACTUEL sur la page de gestion */
.current-large-logo-preview {
    display: block; /* Pour que margin auto fonctionne et pour contrôler la taille */
    max-width: 250px;  /* Définissez la largeur maximale souhaitée pour la preview */
    max-height: 150px; /* Définissez la hauteur maximale souhaitée */
    width: auto;       /* Conserver les proportions si l'image est plus petite */
    height: auto;      /* Conserver les proportions */
    object-fit: contain; /* S'assure que toute l'image est visible, peut laisser des espaces vides */
                         /* Utilisez 'cover' si vous voulez remplir l'espace quitte à rogner */
    margin: 10px auto; /* Centrer l'image si elle est plus petite que max-width */
    border: 1px solid #555;
    background-color: #222; /* Fond si l'image a des transparences */
    border-radius: 4px;
}

/* Style pour le placeholder du grand logo (lettre) sur la page de gestion */
.guild-logo-large-default.manage-preview {
    width: 200px;  /* Largeur du placeholder */
    height: 120px; /* Hauteur du placeholder */
    background-color: #2c2c2c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin: 10px auto; /* Centrer */
    border: 1px solid #444;
    text-align: center;
    color: #555;
}
.guild-logo-large-default.manage-preview span {
    font-size: 3.5em; /* Grande lettre */
    font-weight: bold;
}

/* ========================================================== */
/* === CORRECTIF D'URGENCE POUR LABEL D'UPLOAD MANAGE GUILD === */
/* ========================================================== */

/* On cible spécifiquement les labels pour les inputs de fichier
   UNIQUEMENT dans les sections de la page de gestion de guilde. */

.guild-management-section form label[for="new_emblem_file"],
.guild-management-section form label[for="custom_banner_file"],
.guild-management-section form label[for="custom_large_logo_file"] {
    
    /* On force l'affichage en bloc pour lui donner des dimensions */
    display: block; 
    width: fit-content; /* S'adapte à la largeur du texte */
    
    /* Style de bouton simple et propre */
    padding: 8px 16px;
    background-color: #2ecc71;
    color: #fff;
    border: 1px solid #666;
    border-radius: 6px;
    cursor: pointer;
    
    /* Transition pour l'effet de survol */
    transition: background-color 0.2s ease;
    
    /* On ajoute de l'espace en dessous */
    margin-bottom: 10px; 
}

.guild-management-section form label[for="new_emblem_file"]:hover,
.guild-management-section form label[for="custom_banner_file"]:hover,
.guild-management-section form label[for="custom_large_logo_file"]:hover {
	transition: background-color 0.2s ease;
    background-color: #27ae60;
}

/* On s'assure que l'input de fichier original reste invisible */
.guild-management-section input[type="file"] {
    /* Il doit être présent dans le DOM mais pas visible */
    /* Cette technique est très robuste */
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    z-index: -1;
}
/* Styles pour la section d'upload d'emblème reconstruite */
.current-emblem-display {
    padding-bottom: 15px;
}
.upload-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 15px 0;
}
.upload-control {
    flex-shrink: 0; /* Empêche cette colonne de rétrécir */
}
.upload-info {
    flex-grow: 1; /* Permet à cette colonne de prendre l'espace restant */
}

/* Le label/bouton d'upload (comme votre image) */
label.file-upload-button {
    display: block; /* Prend toute la largeur de sa colonne */
    text-align: center;
    background-color: #4a4a4a;
    border: 1px solid #5a5a5a;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}
label.file-upload-button:hover {
    background-color: #585858;
}

/* La boîte de prévisualisation */
.image-preview-box {
    margin-top: 15px;
    width: 150px; /* Largeur fixe pour la prévisualisation */
    height: 150px;
    border: 2px dashed #ffd800;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: #333;
}
.image-preview-box img {
    max-width: 100%;
    max-height: 100%;
}

/* Le nom du fichier */
.file-name-display-bold {
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

/* Input de fichier caché (logique inchangée) */
.hidden-file-input {
    width: 0.1px; height: 0.1px; opacity: 0;
    overflow: hidden; position: absolute; z-index: -1;
}