/* ============================================================
   MONARCH HOARD — COMPONENTS
   I pezzi che esistono SIA nel sito SIA nell'app,
   scritti una volta sola.
   ------------------------------------------------------------
   DOVE VA:  static/css/components.css

   COME SI CARICA: SEMPRE dopo tokens.css e PRIMA di
   site.css / style.css.

       1. tokens.css       <- i colori
       2. components.css   <- questo file
       3. site.css oppure style.css

   ------------------------------------------------------------
   IL PRINCIPIO

   Qui dentro non c'e' NESSUN colore scritto a mano.
   Ci sono solo --accent, --bg, --text, --border...

   Il risultato e' che un bottone e' un bottone: stessa forma,
   stessa altezza, stessa animazione. Diventa blu nel sito e
   viola nell'app da solo, perche' prende il colore dal tema
   scelto sul <body>.

   ------------------------------------------------------------
   NON SERVE TOCCARE L'HTML

   I nomi di classe che usi gia' restano tutti validi.
   Dove sito e app chiamavano in modo diverso la stessa cosa,
   qui i due nomi vengono elencati insieme.

   Esempio: il bottone principale si chiama .btn--primary nel
   sito e .overlay-action-btn nell'app. Sono la stessa cosa:
   d'ora in poi li disegna la stessa regola.
   ============================================================ */


/* ============================================================
   1. BOTTONI
   ------------------------------------------------------------
   Nel sito:  .btn .btn--primary .btn--ghost
   Nell'app:  .overlay-action-btn .set-toggle-btn .close-btn
              .game-ctrl-btn .action-filter-btn .mh-wide-btn
              .settings-choice .csv-example-btn

   Sono tutte varianti di due soli bottoni veri:
   uno PIENO (azione principale) e uno VUOTO (azione secondaria).
   ============================================================ */

/* --- Lo scheletro comune a tutti --- */
.btn,
.overlay-action-btn,
.set-toggle-btn,
.game-ctrl-btn,
.action-filter-btn,
.close-btn,
.mh-wide-btn,
.settings-choice,
.admin-btn,
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(5, 4, 14, 0.82);
  color: var(--text);
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

/* --- Misure: alte e comode da toccare col dito --- */
.btn,
.overlay-action-btn,
.set-toggle-btn,
.game-ctrl-btn,
.action-filter-btn {
  height: var(--h-control);
  padding: 0 26px;
  font-size: .8rem;
}

.pager__btn,
.mh-wide-btn,
.settings-choice {
  height: var(--h-control-sm);
  padding: 0 16px;
  font-size: .72rem;
}

/* --- Stato normale: passaggio del mouse --- */
.btn:hover,
.overlay-action-btn:hover,
.set-toggle-btn:hover,
.game-ctrl-btn:hover:not(:disabled),
.action-filter-btn:hover,
.mh-wide-btn:hover,
.settings-choice:hover,
.pager__btn:hover:not(:disabled) {
  color: #ffffff;
  background: var(--bg-elevated);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.06), var(--glow);
}

/* --- Bottone PIENO: l'azione principale della schermata --- */
.btn--primary,
.overlay-action-btn,
.mh-wide-btn:hover,
.settings-choice.active {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: #ffffff;
}

.btn--primary:hover,
.overlay-action-btn:hover,
.settings-choice.active {
  background: rgba(var(--accent-rgb), 0.34);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45);
}

/* --- Bottone VUOTO: azione secondaria, annulla, chiudi --- */
.btn--ghost,
.admin-btn--ghost {
  background: rgba(5, 8, 20, 0.82);
  color: var(--text);
  border-color: var(--border);
}

/* --- Bottone ROSSO: elimina, esci, azioni irreversibili --- */
.game-ctrl-btn.danger,
.settings-danger-btn,
.slot-actions-delete,
.admin-btn--elimina,
.logout-btn,
.sidebar-logout-link {
  color: #ff8fa3;
  border-color: rgba(255, 77, 109, 0.35);
  background: rgba(255, 77, 109, 0.10);
}

.game-ctrl-btn.danger:hover:not(:disabled),
.settings-danger-btn:hover,
.slot-actions-delete:hover,
.admin-btn--elimina:hover:not(:disabled),
.logout-btn:hover,
.sidebar-logout-link:hover {
  color: #ffffff;
  background: rgba(255, 77, 109, 0.28);
  border-color: rgba(255, 77, 109, 0.85);
  box-shadow: 0 0 18px rgba(255, 77, 109, 0.40);
  transform: translateY(-1px);
}

/* --- Bottone VERDE: salva, conferma --- */
.admin-btn--salva {
  border-color: rgba(77, 255, 155, 0.65);
  background: rgba(77, 255, 155, 0.18);
  color: #ffffff;
}

.admin-btn--salva:hover:not(:disabled) {
  background: rgba(77, 255, 155, 0.32);
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(77, 255, 155, 0.42);
}

/* --- Bottone spento: non si puo' premere --- */
.btn:disabled,
.overlay-action-btn:disabled,
.game-ctrl-btn:disabled,
.pager__btn:disabled,
.admin-btn:disabled,
.set-toggle-btn:disabled {
  opacity: .38;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}


/* ============================================================
   2. CHIP E BOTTONI DEI FILTRI
   ------------------------------------------------------------
   Nel sito:  .filter-btn          (pillole sopra la vetrina)
   Nell'app:  .filter-chip         (dentro ai menu a tendina)

   Stessa identica cosa: una pillola che si accende quando e'
   selezionata.
   ============================================================ */
.filter-btn,
.filter-chip {
  display: inline-block;
  box-sizing: border-box;
  padding: .48rem 1.1rem;
  margin: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .79rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition);
}

.filter-chip {
  margin: 4px;
  font-size: .78rem;
}

.filter-btn:hover,
.filter-chip:hover {
  color: #ffffff;
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.60);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.26);
}

/* --- Selezionato --- */
.filter-btn.is-active,
.filter-chip.active {
  color: #ffffff;
  background: rgba(var(--accent-rgb), 0.28);
  border-color: var(--accent-soft);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.40);
}

/* --- Etichetta grigia davanti a un gruppo di filtri --- */
.filters-label {
  font-family: var(--font-title);
  font-size: .6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: .3rem;
}


/* ============================================================
   3. CAMPI DI TESTO
   ------------------------------------------------------------
   Nel sito:  .search-input
   Nell'app:  .search-input .settings-input .mod__input
              .grading-input .notes-input .qty-input

   font-size 16px sui campi alti: impedisce a iPhone di
   ingrandire la pagina quando tocchi il campo.
   ============================================================ */
.search-input,
.settings-input,
.mod__input,
.grading-input,
.grading-select,
.notes-input,
.admin-bar__input,
.dropdown-button {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--h-control);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(5, 4, 14, 0.82);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: .92rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.notes-input,
.mod__area {
  padding: 10px 14px;
  line-height: 1.5;
  resize: vertical;
}

.search-input::placeholder,
.settings-input::placeholder,
.mod__input::placeholder,
.notes-input::placeholder {
  color: var(--text-dim);
}

/* --- Campo attivo: si illumina --- */
.search-input:focus,
.settings-input:focus,
.mod__input:focus,
.grading-input:focus,
.grading-select:focus,
.notes-input:focus,
.admin-bar__input:focus,
.qty-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.22);
}

.settings-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}


/* ============================================================
   4. MENU A TENDINA
   ------------------------------------------------------------
   Usato nell'app per rarita', set, ordinamento e lingua.
   Nel sito per il selettore lingua.
   ============================================================ */
.dropdown-filter {
  position: relative;
}

.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: auto;
  padding: 0 18px;
  font-family: var(--font-title);
  font-size: .82rem;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  max-width: 92vw;
  padding: 12px;
  z-index: 9999;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(var(--accent-rgb), 0.16);
}

.dropdown-content.open {
  display: block;
}

/* --- Riga in fondo al menu: "seleziona tutto / deseleziona" --- */
.dropdown-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
}

.dropdown-action {
  flex: 1;
  background: none;
  border: none;
  padding: 10px;
  color: var(--accent-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
}

.dropdown-action:hover {
  background: rgba(var(--accent-rgb), 0.10);
  color: #ffffff;
}


/* ============================================================
   5. BADGE
   ------------------------------------------------------------
   Le pillole colorate sopra alle carte.

   Nel sito:  .card-item__badge   (rarita')
              .card-item__graded  (gradazione)
              .card-item__status  (disponibile / venduta)
   Nell'app:  .collection-card-rarity
              .grading-badge
              .duplicate-badge

   Erano scritte due volte con codice diverso: qui c'e' una
   sola forma, e cambia solo il colore.
   ============================================================ */

/* --- Forma comune a tutti i badge --- */
.card-item__badge,
.card-item__graded,
.card-item__status,
.collection-card-rarity,
.grading-badge,
.duplicate-badge,
.grade-badge,
.tipo-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(5, 8, 18, 0.88);
  color: var(--text-muted);
  font-family: var(--font-title);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* --- Badge RARITA': prende il colore del tema --- */
.card-item__badge {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: linear-gradient(135deg,
              rgba(var(--accent-rgb), 0.35),
              rgba(var(--accent-rgb), 0.75));
  color: #ffffff;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45),
              inset 0 0 8px rgba(255, 255, 255, 0.12);
}

/* --- Badge DOPPIONI (app): stesso aspetto della rarita' --- */
.duplicate-badge {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: linear-gradient(135deg,
              rgba(var(--accent-rgb), 0.35),
              rgba(var(--accent-rgb), 0.75));
  color: #ffffff;
  font-family: var(--font-body);
  font-size: .72rem;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45),
              inset 0 0 8px rgba(255, 255, 255, 0.12);
}

/* --- Badge GRADAZIONE: sempre dorato, in entrambi i mondi --- */
.card-item__graded,
.grade-badge {
  border-color: rgba(255, 209, 102, 0.7);
  background: linear-gradient(135deg,
              rgba(90, 62, 8, 0.95),
              rgba(160, 118, 22, 0.92));
  color: #fff6de;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
}

/* --- Badge STATO: verde disponibile, rosso venduta --- */
.card-item__status.is-available,
.details__status.is-available {
  color: var(--success);
  border-color: rgba(77, 255, 155, 0.55);
  box-shadow: 0 0 12px rgba(77, 255, 155, 0.30);
}

.card-item__status.is-sold,
.details__status.is-sold {
  color: var(--danger);
  border-color: rgba(255, 77, 109, 0.55);
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.30);
}


/* ============================================================
   6. NOTIFICHE (TOAST)
   ------------------------------------------------------------
   Il messaggino che compare in alto a destra.
   Esisteva SOLO nell'app: da qui in poi funziona anche nel
   sito, senza scrivere altro CSS.
   ============================================================ */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 280px;
  max-width: 380px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: .82rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(var(--accent-rgb), 0.35);
  pointer-events: auto;
  animation: toast-in 0.3s ease-out;
}

.toast.toast-success {
  border-color: rgba(77, 255, 155, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(77, 255, 155, 0.35);
}

.toast.toast-error {
  border-color: rgba(255, 77, 109, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(255, 77, 109, 0.35);
}

.toast.toast-out {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}


/* ============================================================
   7. MODALE — LO SCHELETRO
   ------------------------------------------------------------
   Sfondo scuro, riquadro centrale, bottone di chiusura.
   Il CONTENUTO resta specifico di ogni pagina: qui c'e' solo
   la scatola.

   Nel sito:  .modal .modal__box .modal__close
   Nell'app:  .modal .modal-content .close-btn
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 5, 12, 0.86);
  backdrop-filter: blur(6px);
}

/* Il sito usa .is-open, l'app usa .open: valgono entrambe */
.modal.is-open,
.modal.open {
  display: flex;
}

/* Con la modale aperta la pagina sotto non scorre piu' */
body.modal-open,
body:has(.modal.open),
body:has(.modal.is-open) {
  overflow: hidden;
}

.modal__box,
.modal-content {
  position: relative;
  box-sizing: border-box;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  box-shadow: inset 0 0 34px rgba(var(--accent-rgb), 0.08),
              0 30px 70px rgba(0, 0, 0, 0.65);
  animation: modal-in .25s ease-out;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.6) transparent;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Bottone di chiusura tondo in alto a destra --- */
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(5, 8, 18, 0.9);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
}

.modal__close:hover {
  color: #ffffff;
  border-color: var(--danger);
  background: rgba(255, 77, 109, 0.22);
  box-shadow: 0 0 16px rgba(255, 77, 109, 0.4);
}

/* --- Barra delle scorrimento in tema --- */
.modal__box::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal__box::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal__box::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius-pill);
}

.modal__box::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.75);
}


/* ============================================================
   8. PAGINAZIONE
   ------------------------------------------------------------
   Esiste solo nella vetrina, ma e' un componente a se':
   il giorno che serve anche nell'app, e' gia' pronto.
   ============================================================ */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 34px;
}

.pager__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}

.pager__num {
  min-width: 40px;
  height: var(--h-control-sm);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.pager__num:hover {
  color: #ffffff;
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.60);
}

.pager__num.is-active {
  color: #ffffff;
  background: rgba(var(--accent-rgb), 0.30);
  border-color: var(--accent-soft);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.40);
}

.pager__dots {
  color: var(--text-dim);
  padding: 0 .2rem;
}


/* ============================================================
   9. STATO VUOTO
   ------------------------------------------------------------
   "Nessun risultato", "Wishlist vuota", "Nessuna carta".
   Erano tre stili diversi: adesso e' uno.
   ============================================================ */
.empty-state,
.mh-empty-message,
.lb-empty,
.lb-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-title);
  font-size: .8rem;
  letter-spacing: 1px;
  padding: 60px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(5, 8, 18, 0.4);
}

/* Dentro ai pannelli della dashboard il riquadro tratteggiato
   e' di troppo: basta il testo. */
.mh-panel .mh-empty-message,
.lb-panel .lb-empty,
.lb-panel .lb-loading {
  border: none;
  background: none;
  padding: 40px 22px;
}


/* ============================================================
   10. CONTATORE DEI RISULTATI
   ------------------------------------------------------------
   "12-24 di 340" sopra alla griglia.
   ============================================================ */
.results-counter {
  text-align: center;
  font-family: var(--font-title);
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 26px;
  min-height: 1em;
}

.results-counter b,
.results-counter .counter-highlight {
  color: var(--accent-soft);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}


/* ============================================================
   11. PANNELLO
   ------------------------------------------------------------
   Il riquadro scuro con bordo e bagliore: e' il mattone di
   tutte le schermate, dal sito alla dashboard.

   Nel sito:  .panel
   Nell'app:  .mh-panel .settings-card .lb-panel
   ============================================================ */
.panel,
.mh-panel,
.settings-card,
.lb-panel {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.06), var(--shadow);
  overflow: hidden;
}

.panel {
  padding: 28px;
  transition: transform var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
}

.panel:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.10),
              var(--shadow), var(--glow);
}


/* ============================================================
   12. TITOLO DI SEZIONE
   ------------------------------------------------------------
   Nel sito:  .eyebrow
   Nell'app:  .mh-panel-title .settings-card-title
   ============================================================ */
.eyebrow,
.mh-panel-title,
.settings-card-title {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}

.eyebrow {
  font-size: .68rem;
  letter-spacing: 4px;
  margin-bottom: .7rem;
}

.mh-panel-title,
.settings-card-title {
  display: block;
  font-size: .9rem;
  letter-spacing: 5px;
  color: #efe7ff;
  margin-bottom: 22px;
}


/* ============================================================
   13. CLASSI DI SERVIZIO
   ============================================================ */
.hidden { display: none !important; }
.center { text-align: center; }
.text-muted { color: var(--text-muted); }