/* ==================== COVERFORGE — CORRECTIONS CSS (OPTIONNEL) ==================== */
/* La plupart des correctifs sont intégrés dans style.css.
   Ce fichier contient uniquement les overrides nécessaires
   pour garantir le bon fonctionnement sur toutes les configurations. */

/* ===== FIX DÉFILEMENT GLOBAL (renforcé) ===== */
html, body { height: 100%; overflow: hidden; }
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.app-section { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.app-section.active { display: flex; }
.editor-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.editor-controls { overflow-y: auto; flex-shrink: 0; }
.details-panel { overflow-y: auto; flex-shrink: 0; }
.preview-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.preview-view { overflow-y: auto; flex: 1; }
.export-body { flex: 1; display: flex; overflow: hidden; }
.export-options-panel { overflow-y: auto; width: 380px; flex-shrink: 0; padding: 16px; border-right: 0.5px solid var(--border-light, rgba(200,146,42,0.12)); }
.export-preview-panel { flex: 1; overflow-y: auto; padding: 20px; }
.settings-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.library-body { flex: 1; overflow-y: auto; padding: 20px; }
.templates-body { flex: 1; overflow-y: auto; padding: 20px; }
.mockup-section-body { flex: 1; display: flex; overflow: hidden; }
.mockup-types-grid { overflow-y: auto; }
.mockup-main-preview { flex: 1; overflow-y: auto; position: relative; min-height: 400px; }
#active-mockup-display { width: 100%; min-height: 400px; position: relative; z-index: 1; }

/* ===== CORRECTIONS SPÉCIFIQUES ===== */

/* Empêcher les débordements sur mobile */
img, svg { max-width: 100%; height: auto; }

/* Forcer la visibilité des champs ISBN synchronisés */
.isbn-master, .isbn-sync { text-transform: uppercase; }

/* Amélioration de l'affichage des QR codes et barcodes */
.qrcode-target canvas, .qrcode-target img { width: 50px !important; height: 50px !important; }
.barcode-target canvas { max-width: 70px; }

/* ===== RESPONSIVE MOBILE (renfort) ===== */
@media (max-width: 768px) {
  /* Ajustement des mockups */
  #active-mockup-display { min-height: 300px; }
  #active-mockup-display > div { transform: scale(0.7); transform-origin: top center; }

  /* Réduction de la sidebar */
  :root { --sidebar-w: 56px; }
  .sidebar { width: var(--sidebar-w); }
  .logo-mark, .logo-sub, .nav-section,
  .nav-item span:not(.nav-icon), .nav-badge,
  .sidebar-recent, .sidebar-stats,
  .user-name, .user-plan { display: none !important; }
  .nav-item { justify-content: center; padding: 12px 0; }
  .sidebar-footer { padding: 8px; justify-content: center; }
  .user-chip { justify-content: center; }
  .btn-icon { display: none; }

  /* Topbar mobile */
  .topbar { padding: 8px 10px; height: auto; flex-wrap: wrap; }
  .book-title-input { font-size: 14px; width: 100%; }
  .topbar-meta, .plan-indicator { display: none; }
  .topbar-right .btn { padding: 5px 8px; font-size: 11px; }
  .topbar-right .btn-ghost:not(:last-child):not(:nth-last-child(2)) { display: none; }

  /* Colonne unique */
  .editor-body { flex-direction: column; }
  .editor-controls { width: 100% !important; max-height: 45vh; border-right: none; border-bottom: 0.5px solid var(--border-light); }
  .preview-center { min-height: 350px; }
  .details-panel { width: 100% !important; max-height: 50vh; border-left: none; border-top: 0.5px solid var(--border-light); }

  /* Couverture */
  .cover-front { width: 160px !important; height: 228px !important; }

  /* Mockups */
  .mockup-types-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 200px; }
  .mockup-card .mockup-preview { height: 80px; }
  .mockup-upload-section { grid-column: 1 / -1; }

  /* Export */
  .export-options-panel { width: 100%; }
  .exp-prev-thumb { width: 90px; height: 128px; }

  /* Plans */
  .plan-cards-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cover-front { width: 140px !important; height: 200px !important; }
  .mockup-types-grid { grid-template-columns: repeat(2, 1fr); max-height: 260px; }
  .editor-controls { max-height: 40vh; }
}

/* ===== FIN DES CORRECTIONS ===== */