/* Pelle RobyOne per la pagina dello strumento.
   Lo strumento vive dentro una cornice nella pagina /joypadtest/ del sito: qui
   dentro non ci vanno ne' barra in alto ne' pie' di pagina, quelli li mette il
   sito. Colori e carattere sono quelli di css/style.css del sito, ricopiati a
   mano perche' questa pagina non puo' caricare il CSS del sito (Bootstrap e
   Materialize insieme si pestano i piedi). */

@import url("inter/inter.css");

:root,
[data-bs-theme="light"] {
  /* Gli stessi valori di :root in /css/style.css */
  --ry-primary:      #A00000;
  --ry-primary-dark: #6E0000;
  --ry-primary-light:#C41010;
  --ry-accent:       #CC2200;
  --ry-text:         #1A0000;
  --ry-text-muted:   #5A2020;
  --ry-border:       rgba(200,60,60,0.30);
  --ry-title:        #1565C0;   /* il blu dei titoli di pagina del sito */

  /* Bootstrap, riportato sui colori di casa */
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color: var(--ry-text);
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--ry-primary);
  --bs-link-hover-color: var(--ry-primary-dark);
  --bs-primary: var(--ry-primary);
  --bs-primary-rgb: 160, 0, 0;
  --bs-border-color: var(--ry-border);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 20px;
}

html, body {
  background: transparent;      /* la cornice sta dentro una card bianca del sito */
  font-family: var(--bs-body-font-family);
  color: var(--ry-text);
}

body { padding: 0; }
.container.p-2 { padding-left: 0 !important; padding-right: 0 !important; }

/* Bottoni: il rosso di casa, non il blu di Bootstrap */
.btn-primary,
.btn-danger {
  --bs-btn-bg: var(--ry-primary);
  --bs-btn-border-color: var(--ry-primary);
  --bs-btn-hover-bg: var(--ry-primary-dark);
  --bs-btn-hover-border-color: var(--ry-primary-dark);
  --bs-btn-active-bg: var(--ry-primary-dark);
  --bs-btn-active-border-color: var(--ry-primary-dark);
  --bs-btn-disabled-bg: #c08080;
  --bs-btn-disabled-border-color: #c08080;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--ry-primary);
  --bs-btn-border-color: var(--ry-primary);
  --bs-btn-hover-bg: var(--ry-primary);
  --bs-btn-hover-border-color: var(--ry-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ry-primary-dark);
  --bs-btn-active-border-color: var(--ry-primary-dark);
  font-weight: 600;
}
.btn { border-radius: 10px; }

/* Il bottone Connetti e' l'azione principale della pagina: si deve vedere */
#btnconnect {
  --bs-btn-bg: var(--ry-primary);
  --bs-btn-border-color: var(--ry-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ry-primary-dark);
  --bs-btn-hover-border-color: var(--ry-primary-dark);
  --bs-btn-hover-color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 20px;
}

/* Riquadri */
.card {
  border-radius: 14px;
  border: 1px solid #e6dede;
  box-shadow: 0 2px 10px rgba(110, 0, 0, .06);
}
.card-header {
  background: #fbf5f5;
  border-bottom: 1px solid #efe2e2;
  font-weight: 700;
  color: var(--ry-primary-dark);
}

/* Linguette: sottolineatura rossa invece del bordo grigio di Bootstrap */
.nav-tabs { border-bottom: 2px solid #efe2e2; }
.nav-tabs .nav-link {
  color: var(--ry-text-muted);
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
}
.nav-tabs .nav-link:hover { border-bottom-color: #e8b4b4; }
.nav-tabs .nav-link.active {
  color: var(--ry-primary);
  background: transparent;
  border-bottom-color: var(--ry-primary);
}

/* I riquadri di avviso dell'originale usavano il colore dei link: qui diventano
   due avvisi distinti, uno informativo e uno commerciale. */
#missinghid > .container > div,
#aboutdrift .mb-4:not(.ry-cta) {
  border-color: var(--ry-border) !important;
  color: var(--ry-text) !important;
  background: #fdf7f7 !important;
}
#missinghid i, #aboutdrift i { color: var(--ry-primary); }

.ry-cta {
  border-color: var(--ry-primary) !important;
  background: linear-gradient(135deg, #FFF3F3 0%, #FFE3E3 100%) !important;
}
.ry-cta b { color: var(--ry-primary-dark); }

/* Barra degli strumenti in alto (domande frequenti + lingua): leggera, perche'
   la barra vera del sito sta appena sopra la cornice. */
.ry-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding: 2px 0 10px;
  font-size: .9rem;
}
.ry-toolbar a { color: var(--ry-text-muted); text-decoration: none; }
.ry-toolbar a:hover { color: var(--ry-primary); text-decoration: underline; }

/* Crediti a fondo pagina: niente piu' barra fissa, il pie' di pagina e' quello
   del sito, sotto la cornice. */
.ry-credits {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid #efe2e2;
  font-size: .8rem;
  color: #8A5050;
}
.ry-credits a { color: #8A5050; }

/* Riquadri modali (benvenuto, domande frequenti, prova rapida) */
.modal-content { border-radius: 16px; border: none; }
.modal-header { border-bottom: 1px solid #efe2e2; }
.modal-footer { border-top: 1px solid #efe2e2; }
.modal-title { color: var(--ry-primary-dark); font-weight: 700; }
.accordion-button:not(.collapsed) {
  color: var(--ry-primary-dark);
  background-color: #fdf3f3;
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--ry-border); }

/* Il canvas degli analogici resta leggibile su fondo chiaro */
#stickCanvas { background: #fdfbfb; border-radius: 10px; }