/* Police personnalisée Inter */
@import url("https://rsms.me/inter/inter.css");

/* Configuration du thème : Orange + Mode Sombre + Base Neutre */
:root {
    /* Couleur primaire orange pour le thème */
    --tblr-primary: #FF5C00;
    --tblr-primary-rgb: 255, 92, 0;
    
    /* Base Neutral (gris neutres) */
    --tblr-gray-50: #fafafa;
    --tblr-gray-100: #f5f5f5;
    --tblr-gray-200: #e5e5e5;
    --tblr-gray-300: #d4d4d4;
    --tblr-gray-400: #a3a3a3;
    --tblr-gray-500: #737373;
    --tblr-gray-600: #525252;
    --tblr-gray-700: #404040;
    --tblr-gray-800: #262626;
    --tblr-gray-900: #171717;
    
    /* Personnalisation des rayons de bordure */
    --tblr-border-radius: 0.375rem;
    --tblr-border-radius-sm: 0.25rem;
    --tblr-border-radius-lg: 0.5rem;
}

/* Séparateurs visibles en mode sombre */
hr {
    margin: 2rem 0;
    border: none;
    height: 1px;
    background-color: var(--tblr-border-color, rgba(255, 255, 255, 0.1));
    opacity: 0.6;
}

/* Style pour les sous-titres */
.subheader {
    font-size: .625rem;
}

/* Bords moins arrondis pour les drapeaux */
.flag {
    border-radius: 0.125rem !important;
}

/* Style pour le bouton favoris/coeur */
.btn-favorite {
    border: none;
    background: none;
    color: #6c757d;
    padding: 0.25rem;
    transition: color 0.3s ease;
}

.btn-favorite:hover,
.btn-favorite.active {
    color: #e74c3c;
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
}

.image-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

/* Zone upload — compatible dark */
.image-upload-zone {
    border: 2px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
    background-color: var(--tblr-card-bg);
    color: var(--tblr-body-color);
}

.image-upload-zone:hover {
    border-color: var(--tblr-primary);
}

.image-upload-zone.dragover {
    border-color: var(--tblr-primary);
    background-color: rgba(var(--tblr-primary-rgb), .08);
}

.product-image-item {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.product-image-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

.product-image-item .btn-delete {
    position: absolute;
    top: 5px;
    right: 5px;
}

.product-image-item .badge-primary-image {
    position: absolute;
    top: 5px;
    left: 5px;
}

/* ──────────────────────────────────────────────
   Arbre Catégories — thème dark natif Tabler
   ────────────────────────────────────────────── */

.category-node { margin-bottom: 2px; }

/* Indentation automatique selon la profondeur */
.category-node .category-node { margin-left: 1.5rem; }

.cat-card {
    background-color: var(--tblr-card-bg);
    border-color: var(--tblr-border-color);
    margin-bottom: 0 !important;
}

.cat-card-header {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    background-color: var(--tblr-card-bg);
    border-bottom: 1px solid var(--tblr-border-color);
    min-height: 44px;
    gap: .5rem;
}

/* Racine : léger accent de fond */
.cat-header-root {
    background-color: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-card-bg));
    border-left: 3px solid var(--tblr-primary);
}

/* Niveau 2 */
.cat-header-sub {
    border-left: 3px solid var(--tblr-blue);
}

/* Niveau 3+ */
.cat-header-deep {
    border-left: 3px solid var(--tblr-secondary);
}

/* Hover générique */
.cat-card-header[role="button"]:hover {
    background-color: var(--tblr-active-bg);
    cursor: pointer;
}

/* Flèche rotative */
.cat-arrow {
    display: inline-flex;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.cat-arrow-open { transform: rotate(90deg); }

/* Collapse animé — sans Bootstrap, sans librairie externe */
.cat-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.cat-collapse.cat-open {
    max-height: 4000px; /* valeur suffisamment grande pour tout contenu */
}

/* Conteneur enfants */
.cat-children {
    padding: .375rem .375rem .375rem .5rem;
    background-color: rgba(0,0,0,.08);
    border-top: 1px solid var(--tblr-border-color);
}

/* Boutons d'action — visibles au hover */
.cat-actions {
    opacity: 0;
    transition: opacity .15s;
    gap: 2px;
}
.cat-card-header:hover .cat-actions { opacity: 1; }

/* Sur mobile : toujours visible */
@media (max-width: 767px) {
    .cat-actions { opacity: 1; }
}

.cat-label { font-size: .875rem; }
.cat-emoji { font-size: 1rem; line-height: 1; }

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ========================================
   FIX GLOBAL — SCROLL TOUTES LES MODALS
   Cause racine : <form> entre .modal-content et .modal-body
   brise le layout flex → le form doit aussi être flex:1
   ======================================== */

/* Conteneur modal : overflow scroll pour que le dialog puisse défiler */
.modal.show {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Dialog : height explicite pour que modal-content puisse faire height:100% */
.modal-dialog-scrollable {
    height:     calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    margin:     20px auto;
}

/* Contenu : flex colonne, taille fixe */
.modal-dialog-scrollable .modal-content {
    height:         100%;
    max-height:     100%;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* ⚠️  CORRECTIF CLÉ : <form> wrappant .modal-body + .modal-footer
       doit être flex:1 pour ne pas écraser la hauteur disponible */
.modal-dialog-scrollable .modal-content > form {
    flex:           1 1 auto;
    min-height:     0;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* Header fixe */
.modal-dialog-scrollable .modal-header {
    flex-shrink: 0;
}

/* Footer fixe (peut être enfant direct de .modal-content OU de form) */
.modal-dialog-scrollable .modal-footer,
.modal-dialog-scrollable form .modal-footer {
    flex-shrink: 0;
}

/* Body scrollable — prend tout l'espace restant */
.modal-dialog-scrollable .modal-body,
.modal-dialog-scrollable form .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex:       1 1 auto;
    min-height: 0;
}

/* ========================================
   DRAG & DROP — Catégories (SortableJS)
   ======================================== */

.drag-handle {
    cursor:      grab;
    opacity:     0.35;
    padding:     2px 5px;
    font-size:   1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition:  opacity .15s;
}
.drag-handle:hover  { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

/* Élément fantôme pendant le drag */
.sortable-ghost {
    opacity:    0.35;
    background: var(--tblr-primary-lt) !important;
    border:     1px dashed var(--tblr-primary) !important;
}

/* Indicateur pendant le drag */
.sortable-drag { box-shadow: 0 4px 16px rgba(0,0,0,.4); }