/* ═══════════════════════════════════════════════════════════════
   OpusWebcam V2.0 - Layout Fixes
   Fichier: layout-fixes.css
   Description: Corrections pour que le contenu s'adapte correctement
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   CORRECTION DU LAYOUT PRINCIPAL
   ─────────────────────────────────────────────────────────────── */

/* Reset de la hauteur de l'app container */
.app-container {
    min-height: 100vh;
    height: auto;
}

/* Main content flexible */
.main-content {
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

/* Content section qui s'adapte au contenu */
.content-section {
    flex: initial !important;
    min-height: auto !important;
    height: auto !important;
    margin-bottom: var(--space-xl);
}

/* Tab content flexible */
.tab-content {
    min-height: 0;
    height: auto;
}

.tab-pane {
    min-height: auto;
    height: auto;
}

/* ───────────────────────────────────────────────────────────────
   SECTIONS SPÉCIFIQUES
   ─────────────────────────────────────────────────────────────── */

/* Validation */
#tab-validation {
    padding-bottom: var(--space-2xl);
}

#validationCon {
    min-height: 200px;
    margin-bottom: var(--space-xl);
}

/* Inventaire */
#tab-inventory {
    padding-bottom: var(--space-2xl);
}

#inventoryCon {
    min-height: 200px;
    margin-bottom: var(--space-xl);
}

/* Valeurs */
#tab-values {
    padding-bottom: var(--space-2xl);
}

#valuesCon {
    min-height: 200px;
    margin-bottom: var(--space-xl);
}

/* Statistiques */
#tab-stats {
    padding-bottom: var(--space-2xl);
}

.dashboard-container {
    margin-bottom: var(--space-xl);
}

/* ───────────────────────────────────────────────────────────────
   GRILLES ADAPTATIVES
   ─────────────────────────────────────────────────────────────── */

/* Grille de validation qui s'adapte */
.validation-card-compare,
.validation-card {
    margin-bottom: var(--space-md);
}

/* Grille d'inventaire qui s'adapte */
.inventory-grid {
    padding-bottom: var(--space-xl);
}

.inventory-table-container {
    margin-bottom: var(--space-xl);
}

/* Liste d'objets qui s'adapte */
.inventory-objects-list {
    padding-bottom: var(--space-xl);
}

/* ───────────────────────────────────────────────────────────────
   EMPTY STATES
   ─────────────────────────────────────────────────────────────── */

.empty-state {
    padding: var(--space-2xl);
    min-height: 300px;
}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE FIXES
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .main-content {
        padding-bottom: var(--space-2xl);
    }
    
    .content-section {
        margin-bottom: var(--space-lg);
    }
}

/* ───────────────────────────────────────────────────────────────
   SCROLLBAR STYLE
   ─────────────────────────────────────────────────────────────── */

/* S'assurer que le scrollbar fonctionne bien */
.main-content::-webkit-scrollbar {
    width: 8px;
}

.main-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}