/* ============================================================
   book-detail.css — Modal scheda libro
   Dipende da style.css per le variabili globali.
   Gestisce #modal-book-detail e tutti i suoi componenti:
   header, progress, date, stelle, note, edizione, azioni.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ── Token semantici locali ────────────────────────────────── */
/* Alias delle variabili globali con nomi interni al modal.
   Nessun colore ridefinito — tutto punta a style.css. */
:root {
  --bd-bg:           var(--cream);
  --bd-surface:      var(--bg-card);
  --bd-border:       var(--sand);
  --bd-border-light: rgba(182, 156, 133, 0.4);
  --bd-text:         var(--forest);
  --bd-muted:        var(--earth);
  --bd-accent:       var(--moss);
  --bd-accent-soft:  rgba(140, 145, 108, 0.15);
  --bd-star-off:     var(--sand);
  --bd-star-on:      var(--earth);
  --bd-serif:        'Lora', Georgia, serif;
  --bd-sans:         var(--font-body);
  --bd-radius:       14px;
  --bd-radius-sm:    8px;
  --bd-ease:         .2s ease;
}

/* ── Backdrop ──────────────────────────────────────────────── */
/* Il backdrop scorre il modal, non il body */
#modal-book-detail {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px; overflow: hidden;
}
#modal-book-detail.hidden { display: none; }

/* ── Contenitore modal ─────────────────────────────────────── */
.bd-modal {
  background-image: url('../assets/img/dettaglio-chiaro.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--bd-radius);
  box-shadow: 0 12px 48px rgba(105, 114, 84, 0.2);
  width: 100%; max-width: 340px;
  aspect-ratio: 1352 / 1920;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; /* corpo scorre, azioni fisse in basso */
  overflow: hidden; position: relative;
  animation: bdSlideIn .26s cubic-bezier(.22,1,.36,1) both;
}
[data-theme="night"] .bd-modal {
  background-image: url('../assets/img/dettaglio-scuro.jpg');
  /* Un unico colore per tutto il testo nel tema notte: niente più mix
     di toni diversi (alcuni quasi invisibili) — solo #E0A94F ovunque. */
  --bd-text:        #E0A94F;
  --bd-muted:       #E0A94F;
  --bd-accent:      #E0A94F;
  --bd-star-on:     #E0A94F;
  --bd-star-off:    rgba(224, 169, 79, .3); /* stessa tinta, più tenue: distingue le stelle vuote da quelle piene */
}
[data-theme="night"] .bd-section-label,
[data-theme="night"] .bd-field-label,
[data-theme="night"] .bd-char-count,
[data-theme="night"] .bd-edition-autofill,
[data-theme="night"] .bd-status-read,
[data-theme="night"] .bd-status-reading,
[data-theme="night"] .bd-status-want_to_read { color: #E0A94F; }

[data-theme="night"] .bd-review-textarea::placeholder,
[data-theme="night"] .bd-notes-textarea::placeholder { color: #E0A94F; opacity: .5; }

@keyframes bdSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Corpo scorrevole con scrollbar sottile */
.bd-modal-body {
  flex: 1 1 auto; overflow-y: auto;
  padding-bottom: 14px;
  clip-path: inset(8.663% 0 0 0); /* nasconde il contenuto scrollato oltre il bordo superiore del riquadro bianco */
  scrollbar-width: thin; scrollbar-color: var(--bd-border) transparent;
}
.bd-modal-body::-webkit-scrollbar       { width: 4px; }
/* Scorrimento orizzontale solo da PC: su smartphone/touch lo nascondiamo */
@media (pointer: coarse) {
  .bd-modal-body { overflow-x: hidden; }
}
.bd-modal-body::-webkit-scrollbar-track { background: transparent; }
.bd-modal-body::-webkit-scrollbar-thumb { background: var(--bd-border); border-radius: 99px; }

/* ── Spinner di caricamento ────────────────────────────────── */
.bd-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--bd-border);
  border-top-color: var(--bd-accent);
  border-radius: 50%;
  animation: bdSpin .7s linear infinite;
}
@keyframes bdSpin { to { transform: rotate(360deg); } }

/* ── Header: copertina + titolo + pillole ──────────────────── */
.bd-header {
  display: flex; gap: 16px;
  padding: 13.32% 9.91% 4px 12.06%;
  background: transparent;
  border-bottom: none;
}

/* Copertina */
.bd-cover {
  width: 88px; height: 130px; display: block;
  object-fit: cover; border-radius: 7px;
  box-shadow: 4px 8px 22px rgba(105, 114, 84, 0.2);
}

.bd-cover-wrap { position: relative; flex-shrink: 0; margin-left: 22px; align-self: flex-start; }

/* Overlay upload copertina — appare all'hover sulla copertina */
.bd-cover-upload-btn {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.5); color: #fff;
  text-align: center; font-size: 1rem; padding: 4px 0;
  cursor: pointer; display: block;
  border-radius: 0 0 7px 7px;
  opacity: 0; transition: opacity var(--bd-ease);
}
.bd-cover-wrap:hover .bd-cover-upload-btn { opacity: 1; }

/* Pulsante × rimozione copertina — top-right sull'immagine */
.bd-cover-remove-btn {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,.55); color: #fff;
  border: none; border-radius: 50%;
  font-size: .65rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--bd-ease);
}
.bd-cover-wrap:hover .bd-cover-remove-btn { opacity: 1; }

/* Badge stato lettura sovrapposto alla copertina */
.bd-status-badge {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 4px; white-space: nowrap;
  background: var(--bd-bg); border: none; border-bottom: 1.5px solid currentColor;
}
.bd-status-read         { color: var(--forest); }
.bd-status-reading      { color: var(--earth);  }
.bd-status-want_to_read { color: var(--moss);   }

/* Info testuale header */
.bd-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.bd-title       { font-family: var(--bd-serif); font-size: .92rem; font-weight: 400; color: var(--bd-muted); margin: 0; line-height: 1; padding-bottom: 2px; border-bottom: 1.5px solid var(--bd-border); }
.bd-title::before  { content: "Titolo: "; font-weight: 400; color: var(--bd-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.bd-author      { font-family: var(--bd-serif); font-size: .92rem; font-style: italic; font-weight: 400; color: var(--bd-muted); margin: 0; line-height: 1; padding-bottom: 2px; border-bottom: 1.5px solid var(--bd-border); }
.bd-author::before { content: "Autore: "; font-style: normal; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }

/* Pillole metadati (editore, anno, pagine, lingua, formato) */
.bd-pub-pills { display: none; }
.bd-pub-pill {
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  color: var(--bd-muted); background: transparent;
  border: none; border-radius: 0; padding: 0;
  font-family: var(--bd-serif); font-style: italic;
}
.bd-pub-pill:not(:last-child)::after { content: '·'; margin-left: 8px; color: var(--bd-border); font-style: normal; }

/* Riga serie e acquisizione */
.bd-series      { display: none; }
.bd-series-icon { color: var(--bd-accent); }
.bd-acquisition { display: flex; align-items: center; gap: 5px; font-size: .81rem; color: var(--bd-muted); }

/* ── Sezione generica ──────────────────────────────────────── */
.bd-section { padding: 4px 9.91% 4px 12.06%; border-bottom: none; }
.bd-progress-section { margin-top: 0; }
.bd-review-section   { margin-top: 0; }

/* Label sezione (in maiuscolo, sopra al contenuto) */
.bd-section-label {
  display: block; margin-bottom: 4px;
  font-size: .69rem; font-weight: 600;
  color: var(--earth); text-transform: uppercase; letter-spacing: .08em;
}
/* Label campo singolo */
.bd-field-label {
  display: block; margin-bottom: 1px;
  font-size: .69rem; font-weight: 500;
  color: var(--earth); text-transform: uppercase; letter-spacing: .05em;
}

/* ── Input e select interni al modal ───────────────────────── */
/* Stile base condiviso — evita ripetizioni tra tipi di input */
.bd-text-input,
.bd-select-input,
.bd-page-input,
.bd-date-input {
  border: none; border-bottom: 1.5px solid var(--bd-border); border-radius: 0;
  font-size: .87rem; font-family: var(--bd-serif); line-height: 1;
  color: var(--bd-text); background: transparent;
  transition: border-color var(--bd-ease), background var(--bd-ease);
}
.bd-text-input:focus,
.bd-select-input:focus,
.bd-page-input:focus,
.bd-date-input:focus { outline: none; border-bottom-color: var(--bd-accent); }

/* Larghezza piena per text e select */
.bd-text-input,
.bd-select-input { width: 100%; padding: 2px 2px; box-sizing: border-box; }

/* Input pagine: compact e senza frecce numeriche */
.bd-page-input {
  width: 52px; padding: 2px 2px; text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bd-page-input::-webkit-inner-spin-button,
.bd-page-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bd-page-input[readonly] { background: transparent; color: var(--bd-muted); cursor: default; }

/* Input data: larghezza piena */
.bd-date-input { width: 100%; padding: 2px 2px; box-sizing: border-box; }

/* ── Progress bar lettura ──────────────────────────────────── */
.bd-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.bd-progress-header .bd-section-label {
  font-weight: 500; letter-spacing: .05em; /* come STATO */
}
.bd-progress-header .bd-section-label::after { content: ':'; }
.bd-progress-pages  { display: flex; align-items: center; gap: 4px; font-size: .87rem; }
.bd-page-sep        { color: var(--bd-muted); }

.bd-bar-track { height: 3px; background: var(--bd-border); border-radius: 0; overflow: hidden; }
.bd-bar-fill  {
  height: 100%; min-width: 2px;
  background: var(--bd-accent);
  border-radius: 0;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.bd-bar-pct { font-size: .71rem; font-weight: 500; color: var(--bd-muted); text-align: right; margin-top: 4px; }

/* ── Date lettura ──────────────────────────────────────────── */
.bd-dates-row  { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.bd-date-field {
  flex: 1; display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding-bottom: 2px; border-bottom: 1.5px solid var(--bd-border);
}
.bd-date-field .bd-field-label {
  display: inline; margin-bottom: 0; white-space: nowrap;
}
.bd-date-field .bd-field-label::after { content: ':'; }
.bd-date-field .bd-date-input { flex: 1; width: auto; border-bottom: none; padding: 2px 2px; }
.bd-date-arrow { display: none; }
.bd-duration   { margin: 4px 0 0; font-size: .81rem; color: var(--bd-muted); font-style: italic; min-height: 1.1em; }

/* ── Stato lettura + scaffale ──────────────────────────────── */
.bd-status-section { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding-top: 20px; }
.bd-status-group    {
  display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1;
  padding-bottom: 2px; padding-right: 6px; border-bottom: 1.5px solid var(--bd-border);
}
.bd-status-group .bd-field-label {
  display: inline; margin-bottom: 0; white-space: nowrap;
}
.bd-status-group .bd-field-label::after { content: ':'; }
.bd-shelf-group     { display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex: 0 0 auto; padding-bottom: 1px; border-bottom: 1.5px solid var(--bd-border); }
.bd-shelf-group .bd-field-label {
  display: inline; margin-bottom: 0; white-space: nowrap;
  font-family: var(--bd-serif); font-size: .75rem; /* come TITOLO:/AUTORE: */
}
.bd-shelf-group .bd-field-label::after { content: ':'; }
.bd-shelf-group .bd-select-input {
  flex: 0 1 auto; width: auto; max-width: 130px;
  border-bottom: none; padding: 0 2px 0 0; margin: 0;
  font-size: .92rem; line-height: 1.1; /* come il valore di Titolo/Autore */
}
.bd-status-btns    { display: flex; gap: 6px; flex-wrap: wrap; }

.bd-status-btn {
  font-family: var(--bd-serif); font-size: .85rem; line-height: 1;
  padding: 2px 2px; border-radius: 0;
  border: none;
  background: transparent; color: var(--bd-muted);
  cursor: pointer; transition: all var(--bd-ease);
}
.bd-status-btn:hover  { color: var(--bd-accent); }
.bd-status-btn.active { color: var(--bd-accent); font-weight: 600; }


/* ── Recensione ────────────────────────────────────────────── */
.bd-review-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 2px; padding-right: 6px; border-bottom: 1.5px solid var(--bd-border); margin-bottom: 4px;
}
.bd-review-header .bd-section-label {
  font-weight: 500; letter-spacing: .05em; /* come STATO */
}
.bd-review-header .bd-section-label::after { content: ':'; }

.bd-stars       { display: flex; gap: 3px; cursor: pointer; transform: translateY(-3px); }
.bd-star        { font-size: 1.5rem; color: var(--bd-star-off); user-select: none; line-height: 1; transition: color .12s ease, transform .1s ease; }
.bd-star:hover  { transform: scale(1.18); }
.bd-star.active { color: var(--bd-star-on); }

/* ── Textarea condivisa (recensione e note) ────────────────── */
.bd-review-textarea,
.bd-notes-textarea {
  width: 100%; box-sizing: border-box; display: block;
  min-height: 80px; margin-top: 4px; padding: 2px 2px;
  background: transparent; color: var(--bd-text);
  border: none; border-bottom: 1.5px solid var(--bd-border);
  font-family: var(--bd-serif);
  transition: border-color var(--bd-ease);
}
.bd-review-textarea::placeholder,
.bd-notes-textarea::placeholder { color: var(--sand); opacity: .8; }
.bd-review-textarea:focus,
.bd-notes-textarea:focus        { outline: none; border-color: var(--bd-accent); }

/* Anteprima markdown — stesso aspetto della textarea, appare al blur */
.bd-md-preview {
  display: none;
  width: 100%; box-sizing: border-box;
  min-height: 80px; padding: 2px 2px; margin-top: 4px;
  background: transparent; color: var(--bd-text);
  border: none; border-bottom: 1.5px solid var(--bd-border); border-radius: 0;
  font-size: .9rem; font-family: var(--bd-serif);
  line-height: 1.5; cursor: text;
}
.bd-md-preview p         { margin: .3em 0; }
.bd-md-preview strong    { font-weight: 700; }
.bd-md-preview em        { font-style: italic; }
.bd-md-preview ul,
.bd-md-preview ol        { padding-left: 1.4em; margin: .3em 0; }
.bd-md-preview blockquote {
  border-left: 3px solid var(--bd-border); margin: .4em 0;
  padding-left: .8em; color: var(--bd-muted); font-style: italic;
}
.bd-md-preview code {
  background: rgba(140,145,108,.2); padding: 1px 5px;
  border-radius: 4px; font-family: monospace; font-size: .85em;
}

.bd-notes-section { background: transparent; }
.bd-notes-section > .bd-section-label {
  display: inline-block; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--bd-border); margin-bottom: 4px;
  font-weight: 500; letter-spacing: .05em; /* come STATO */
}
.bd-notes-section > .bd-section-label::after { content: ':'; }
.bd-char-count    { text-align: right; font-size: .7rem; color: var(--earth); margin: 2px 0 0; }

/* ── Campi extra (serie, acquisizione) ─────────────────────── */
.bd-extra-row            { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bd-extra-row:last-child { margin-bottom: 0; }
.bd-field-group          { display: flex; flex-direction: column; }
.bd-field-grow           { flex: 1; min-width: 120px; }
.bd-field-small          { width: 90px; }
.bd-field-full           { width: 100%; }

/* ── Dettagli edizione ─────────────────────────────────────── */
.bd-edition-head           { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bd-edition-summary-static { margin-bottom: 12px; }
.bd-edition-autofill       { font-size: .72rem; color: var(--forest); font-weight: 500; transition: opacity .3s; }
.bd-edition-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }

/* Riga ISBN con pulsante "Cerca" inline */
.bd-isbn-row                { display: flex; gap: 8px; align-items: stretch; }
.bd-isbn-row .bd-text-input { flex: 1; }
.bd-isbn-fetch-btn {
  font-family: var(--bd-sans); font-size: .8rem; font-weight: 500;
  padding: 0 14px; white-space: nowrap; flex-shrink: 0;
  border: 1.5px solid var(--bd-accent); border-radius: var(--bd-radius-sm);
  background: var(--bd-accent-soft); color: var(--bd-accent);
  cursor: pointer; transition: all var(--bd-ease);
}
.bd-isbn-fetch-btn:hover { background: var(--bd-accent); color: #fff; }

/* Flash verde al completamento autofill ISBN */
@keyframes bdAutofill {
  0%   { background: #f0f4ef; border-color: var(--forest); }
  100% { background: var(--bd-bg); border-color: var(--bd-border); }
}
.bd-autofilled { animation: bdAutofill 2s ease forwards; }

/* ── Barra azioni fissa in basso ───────────────────────────── */
/* Fuori da .bd-modal-body: non scorre con il contenuto */
.bd-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  height: 8.02%; box-sizing: border-box;
  padding: 0 9.91% 0 12.06%;
  background: transparent; border: none;
  flex-shrink: 0;
}
.bd-actions-left { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* I tre bottoni della barra (Rimuovi, Sposta, Salva) hanno forma identica */
.bd-actions .btn-danger-sm,
.bd-actions .btn-confirm,
.bd-actions .btn-move {
  font-family: var(--bd-serif); font-size: .72rem; font-weight: 500;
  padding: 4px 10px; height: 27px; line-height: 1;
  border-radius: 4px; border: 1.5px solid var(--sand);
  background: transparent; color: var(--earth);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  transition: all var(--bd-ease);
}
.bd-actions .btn-danger-sm img,
.bd-actions .btn-move img { width: 1rem !important; height: 1rem !important; }

.bd-actions .btn-move:hover       { border-color: var(--forest); color: var(--forest); background: var(--bd-accent-soft); }
.bd-actions .btn-danger-sm        { border-color: var(--red); color: var(--red); }
.bd-actions .btn-danger-sm:hover  { background: rgba(166,68,68,.08); border-color: var(--red); }
.bd-actions .btn-confirm          { background: var(--forest); border-color: var(--forest); color: var(--cream); font-weight: 600; }
.bd-actions .btn-confirm:hover    { background: var(--moss); border-color: var(--moss); }
.bd-actions .btn-confirm:disabled { opacity: .55; cursor: not-allowed; }

/* ── Stat card filtro attivo ───────────────────────────────── */
.stat-card--active              { background: var(--bd-accent-soft) !important; box-shadow: inset 0 0 0 2px var(--bd-accent); transform: scale(1.03); }
.stat-card--active .stat-number { color: var(--bd-accent); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 360px) {
  #modal-book-detail { padding: 12px 8px; }
}