/*
 * library.css — V8.0
 * Styles de l'écran bibliothèque, upload, toast, spinners, vignettes.
 * Requiert base.css chargé en premier (utilise les variables CSS de :root).
 */

/* ── Écran bibliothèque ──────────────────────────────────────────────────── */
#libraryScreen {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
#libraryScreen.active { display: flex; }

/* Header de la bibliothèque : recherche + boutons */
.lib-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.lib-search {
  position: relative;
  flex: 1;
  min-width: 0;
}
.lib-search input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 7px 14px 7px 34px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
.lib-search input:focus { border-color: var(--accent); }
.lib-search input::placeholder { color: var(--muted); }
.lib-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}
.lib-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Bouton mode hors-ligne uniquement */
.lib-cache-only-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  min-width: 44px;
}
.lib-cache-only-btn:hover { border-color: var(--accent); color: var(--accent); }
.lib-cache-only-btn.active {
  background: rgba(61,207,142,.15);
  color: var(--ok);
  border-color: var(--ok);
}

/* Boutons refresh En cours / nouveaux livres */
.lib-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  min-width: 44px;
}
.lib-refresh-btn:hover  { border-color: var(--accent); color: var(--accent); }
.lib-refresh-btn:active { transform: scale(.94); }
.lib-refresh-btn.spinning { animation: lib-spin .7s linear infinite; }
@keyframes lib-spin { to { transform: rotate(360deg); } }

/* Bouton upload */
.lib-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.lib-upload-btn:hover   { background: var(--accent2); }
.lib-upload-btn:active  { transform: scale(.97); }
.lib-upload-btn:disabled { opacity: .55; cursor: default; }

/* Bouton scan code-barres */
.lib-scan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  min-width: 44px;
}
.lib-scan-btn:hover  { border-color: var(--accent); color: var(--accent); }
.lib-scan-btn:active { transform: scale(.94); }

/* ── Modal scan code-barres ──────────────────────────────────────────────
   Réutilise .modal-overlay/.open (styles inline dans index.src.html, requis
   avant chargement de base.css pour le login modal) — seul le contenu
   .barcode-modal est défini ici. */
.barcode-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 380px;
  max-width: 92vw;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.barcode-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.barcode-modal-header h2 {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  margin: 0;
}
.barcode-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.barcode-close-btn:hover { color: var(--text); }
.barcode-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.barcode-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.barcode-scan-frame {
  position: absolute;
  inset: 22% 10%;
  border: 2px dashed rgba(255,255,255,.6);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.barcode-status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  min-height: 16px;
}
.barcode-result {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  text-align: center;
}
.barcode-result-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.barcode-result-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
  margin: 4px 0 10px;
}
.barcode-result-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.barcode-copy-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.barcode-copy-btn:hover { background: var(--accent2); }
.barcode-google-btn {
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.barcode-google-btn:hover { border-color: var(--accent); color: var(--accent); }
.barcode-manual-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}
.barcode-manual-toggle:hover { color: var(--accent2); }
.barcode-manual-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.barcode-manual-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}
.barcode-manual-form input:focus { border-color: var(--accent); }
.barcode-manual-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.barcode-manual-submit:hover { background: var(--accent2); }

/* Toast notification */
.lib-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.lib-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lib-toast.success { border-color: var(--ok);  }
.lib-toast.error   { border-color: var(--err); }
.lib-toast.info    { border-color: var(--accent); }

/* Corps de la bibliothèque */
.lib-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

/* Titres de sections (En cours / Bibliothèque) */
.lib-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.lib-section-title.lib-section-reading {
  color: var(--accent);
  border-bottom-color: rgba(91,142,240,.3);
}
/* Séparateur horizontal entre sections */
.lib-section-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 0 28px;
  opacity: .5;
}

/* Grille de vignettes */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* Vignette livre */
.lib-book {
  cursor: pointer;
  touch-action: manipulation; /* supprime le délai 300ms tap iOS */
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  animation: bookIn .25s ease both;
  position: relative; /* pour les boutons absolus delete/cache */
}
@keyframes bookIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* hover uniquement sur appareils avec pointeur (évite le double-tap iOS) */
@media (hover: hover) {
  .lib-book:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(91,142,240,.15);
  }
}
.lib-book:active { transform: scale(.98); }

/* Zone image couverture */
.lib-book-cover {
  width: 100%;
  aspect-ratio: 2/3;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lib-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder quand pas de couverture */
.lib-book-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  width: 100%;
  height: 100%;
}
.lib-book-cover-placeholder .ph-icon { font-size: 28px; opacity: .35; }
.lib-book-cover-placeholder .ph-title {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
  font-family: var(--font-serif);
  font-style: italic;
  word-break: break-word;
}

/* Barre de progression sur vignette */
.lib-book-progress {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  flex-shrink: 0;
}
.lib-book-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0a840, #f06840);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(240,104,64,.6);
}

/* Infos texte sous la vignette */
.lib-book-info {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  min-height: 72px;
}
.lib-book-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.lib-book-author {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* États vides et chargement */
.lib-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.lib-empty-icon { font-size: 40px; margin-bottom: 12px; }
.lib-empty-text { font-size: 14px; }
.lib-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* Masquer la bibliothèque en mode lecture */
body.reading-mode #libraryScreen { display: none !important; }

/* ── Bouton suppression vignette (admin uniquement) ──────────────────────── */
/* Toujours visible (opacity: 1 fixe) — auparavant révélé seulement au survol
   souris (opacity: 0 par défaut, hover: 1), ce qui le rendait invisible en
   permanence sur tout appareil où le hover ne se déclenche pas comme prévu
   (tactile, mais aussi certains écrans desktop). Le survol ne fait plus
   qu'accentuer visuellement (scale + couleur), il ne conditionne plus la
   visibilité de base. */
.lib-book-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(240,96,96,.85);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .15s, transform .1s;
}
@media (hover: hover) {
  .lib-book-delete:hover { transform: scale(1.15); background: rgba(240,96,96,1); }
}

/* ── Bouton cache offline sur vignettes ──────────────────────────────────── */
/* Toujours visible, même logique que .lib-book-delete ci-dessus. */
.lib-book-cache {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 10;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Fond quasi opaque + bordure marquée : à .7 d'opacité, la couleur de la
     couverture en dessous délavait le cercle (gris terne, variable selon le
     livre) — même traitement que .lib-book-delete (cercle plein, lisible
     quelle que soit la couverture derrière). */
  background: rgba(20,22,26,.92);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .15s, background .15s;
}
@media (hover: hover) {
  .lib-book-cache:hover { background: rgba(91,142,240,.8); color: #fff; border-color: var(--accent); }
}
.lib-book-cache.cached {
  opacity: 1;
  background: rgba(61,207,142,.85);
  color: #fff;
  border-color: var(--ok);
}
.lib-book-cache.cached:hover { background: rgba(61,207,142,1); }

/* ── Spinners ────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner global plein écran (chargement bibliothèque, upload…) */
#globalSpinner {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(14,15,17,.6);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
#globalSpinner.active { display: flex; }
#globalSpinner .gs-ring {
  width: 72px;
  height: 72px;
  border: 5px solid rgba(91,142,240,.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
#globalSpinner .gs-label {
  font-size: 14px;
  color: var(--text);
  opacity: .7;
  font-family: var(--font-ui);
}

/* Overlay chargement overlay sur le cover screen */
#coverLoadingOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(245,240,232,.82);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
}
#coverLoadingOverlay.active { display: flex; }
#coverLoadingOverlay .cl-ring {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(91,142,240,.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
#coverLoadingOverlay .cl-label {
  font-size: 13px;
  color: #374151;
  font-family: var(--font-ui);
}
#coverLoadingOverlay .cl-size {
  font-size: 11px;
  color: #9ca3af;
  font-family: var(--font-mono);
}

/* Spinner de sync (recalage inter-device) */
.sync-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(91,142,240,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.sync-label {
  font-size: 13px;
  color: var(--text);
  opacity: .85;
  font-family: var(--font-ui);
}

/* ── Responsive bibliothèque ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .lib-body { padding: 12px; }
  .lib-search { min-width: 0; }
  /* Masquer le texte du bouton upload sur mobile — garder juste l'icône */
  .lib-upload-btn .upload-label { display: none; }
  .lib-upload-btn { padding: 7px 13px; font-size: 18px; flex-shrink: 0; }
  .lib-cache-only-btn { padding: 7px 10px; font-size: 12px; }
}