/* =====================================================
   Pannello: Bootstrap con il tema scuro (data-bs-theme="dark")
   Qui cambiamo solo i colori per farli uguali al sito.
   ===================================================== */
[data-bs-theme="dark"] {
  --bs-body-bg: #0b0f17;
  --bs-body-color: #cbd5e1;
  --bs-tertiary-bg: #131a26;
  --bs-border-color: #243042;
  --bs-primary: #22d3ee;
  --bs-primary-rgb: 34, 211, 238;
  --bs-link-color: #22d3ee;
  --bs-link-color-rgb: 34, 211, 238;
  --bs-link-hover-color: #67e8f9;
  --bs-link-hover-color-rgb: 103, 232, 249;
}

.barra {
  background: rgba(11, 15, 23, .9);
  backdrop-filter: blur(8px);
}

/* Pulsante principale color ciano, con il testo scuro */
.btn-primary {
  --bs-btn-bg: #22d3ee;
  --bs-btn-border-color: #22d3ee;
  --bs-btn-color: #0b0f17;
  --bs-btn-hover-bg: #67e8f9;
  --bs-btn-hover-border-color: #67e8f9;
  --bs-btn-hover-color: #0b0f17;
  --bs-btn-active-bg: #06b6d4;
  --bs-btn-active-color: #0b0f17;
  --bs-btn-disabled-bg: #22d3ee;
  --bs-btn-disabled-border-color: #22d3ee;
  --bs-btn-disabled-color: #0b0f17;
  font-weight: 600;
}

.card {
  --bs-card-bg: #131a26;
}

.form-check-input:checked {
  background-color: #22d3ee;
  border-color: #22d3ee;
}

.form-control:focus,
.form-select:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 .25rem rgba(34, 211, 238, .2);
}

/* Etichette Film (ciano) e Serie TV (viola), come nel sito */
.badge-film { background: #22d3ee; color: #0b0f17; }
.badge-serie { background: #8b5cf6; color: #fff; }

/* Poster piccoli nella tabella e nei risultati */
.poster-mini {
  width: 46px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .4rem;
  background: #243042;
}
.poster-risultato {
  width: 92px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .5rem;
  background: #243042;
}

/* La copertina nella pagina Modifica: proporzione 2:3 come un vero poster */
.copertina {
  width: 220px;
  max-width: 60vw;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .75rem;
  background: #243042;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Le stelle del voto personale */
.stelle input { display: none; }
.stelle { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.stelle label { font-size: 1.6rem; color: #475569; cursor: pointer; line-height: 1; }
.stelle input:checked ~ label,
.stelle label:hover,
.stelle label:hover ~ label { color: #fbbf24; }

/* Pagina di accesso */
.pagina-login {
  background:
    radial-gradient(circle at 20% 10%, rgba(34, 211, 238, .25), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(139, 92, 246, .25), transparent 40%),
    #0b0f17;
}

/* Striscia della demo */
.demo-striscia { background: #3b2f05; color: #fde68a; }
.demo-striscia a { color: #fde68a; font-weight: 600; }
.demo-striscia code { color: #fff; }