:root {
  --primary-color: #F6EEDB;
  --secondary-color: #333;
  --background-color: #457895;
  --border-radius: 8px;
  --font-family: 'Arial', sans-serif;
}

/* === STILE GENERALE === */
body {
  margin: 0;
  font-family: var(--font-family);
  /* background: url('../images/sfondo_login.png') no-repeat center center fixed;
  background-size: cover; */
  background-color: #f6eedb; /* bianco panna */
  min-height: 100vh;
  overflow-x: hidden;
}


.modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }


/* === CONTAINER LOGIN / SIGNUP === */
.login-container, .signup-container {
  display: flex;
  max-width: 900px;
  width: 100%;
  background-color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.login-left, .signup-left, .login-right, .signup-right {
  width: 50%;
  min-height: 500px;
  padding: 60px 30px;
  box-sizing: border-box;
}

.login-left, .signup-left {
  background-color: var(--primary-color);
  color: var(--background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-left .logo, .signup-left .logo {
  width: 200px;
  max-width: 80%;
  margin-bottom: 30px;
}

.login-right, .signup-right {
  background-color: var(--background-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === FORM GENERALI === */
.login-form {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}

.login-form input,
.form-control {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
  color: var(--background-color);
  border: none;
}

::placeholder {
  color: var(--background-color);
}

.login-form button,
.btn-primary {
  padding: 10px;
  background-color: var(--primary-color);
  color: var(--background-color);
  border: none;
  border-radius: var(--border-radius);
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.login-form button:hover,
.btn-primary:hover {
  background-color: #e0d6c1;
  border-color: #e0d6c1;
}

/* === BOTTONI OUTLINE === */
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: var(--primary-color);
  color: var(--background-color);
}

/* === SOCIAL LOGIN E LINK === */
.social-login {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.social-btn {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: var(--border-radius);
  transition: background-color 0.3s ease;
}

.social-btn:hover {
  background-color: #e0d6c1;
}

.login-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  margin-top: 10px;
}

.login-links a, .signup-right a {
  color: var(--primary-color) !important;
  text-decoration: underline;
  font-size: 0.9em;
}

/* === ERRORI === */
.text-danger {
  font-size: 0.9em;
  color: #ffdddd;
}

/* === CHECKBOX === */
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* === SEZIONI FORM === */
.form-section.d-none {
  display: none;
}

.form-section {
  opacity: 0;
  display: none;
  transition: opacity 0.4s ease-in-out;
}

.form-section.active {
  display: block;
  opacity: 1;
}

/* === TOOLTIP === */
.bi-info-circle {
  font-size: 1rem;
  color: var(--primary-color) !important;
  cursor: pointer;
}

/* === DARK MODE === */
body.dark {
  background-color: #1a1a1a;
  background-image: none;
  color: #f0f0f0;
}

body.dark .login-container,
body.dark .signup-container,
body.dark .login-left,
body.dark .signup-left,
body.dark .login-right,
body.dark .signup-right {
  background-color: #2a2a2a;
  color: #f0f0f0;
}

body.dark .form-control,
body.dark .login-form input {
  background-color: #444;
  color: #f0f0f0;
}

body.dark .form-control::placeholder {
  color: #ccc;
}

body.dark .btn-primary,
body.dark .social-btn {
  background-color: #666;
  color: #fff;
}

body.dark .btn-primary:hover,
body.dark .social-btn:hover {
  background-color: #888;
}

/* === DARK TOGGLE === */
.dark-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.dark-toggle .toggle {
  width: 40px;
  height: 20px;
  border-radius: 999px;
  background-color: #ccc;
  position: relative;
  transition: background-color 0.3s ease;
}

.dark-toggle .toggle::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.dark-toggle.active .toggle {
  background-color: #444;
}

.dark-toggle.active .toggle::before {
  transform: translateX(20px);
}

/* === HEADER === */
.top-header {
  background-color: var(--primary-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  height: 10px;
  padding: 4px 12px;
}

body.dark .top-header {
  background-color: #2a2a2a;
  border-bottom: 1px solid #444;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
  .login-container,
  .signup-container {
    flex-direction: column;
    width: 95vw;
    max-width: 100%;
    margin: 20px auto;
  }

  .login-left,
  .signup-left,
  .login-right,
  .signup-right {
    width: 100%;
    padding: 30px 20px;
    min-height: auto;
  }

  .login-left .logo,
  .signup-left .logo {
    width: 140px;
    margin-bottom: 20px;
  }

  .login-form {
    max-width: 100%;
  }

  .login-form input,
  .login-form button,
  .social-btn {
    width: 100%;
  }

  /* Nascondi la sidebar nel layout principale */
  .sidebar {
  display: none !important;
}

  /* Sidebar visibile solo dentro offcanvas mobile */
  .offcanvas-body .sidebar {
    display: flex !important;
    flex-direction: column;
    height: auto;
    padding: 1rem;
    border: 2px solid #50C878; /* Verde smeraldo, visto che lo ami 😉 */
    border-radius: 8px; /* opzionale, per angoli arrotondati */
    background-color: #2e2e2e; /* grigio scuro */
    color: #ffffff; /* opzionale: per testo ben leggibile */
  }

  /* Nascondi la colonna suggerimenti (home_feed_right) */
  .home-feed-right {
    display: none !important;
  }
}


/* === EXTRA === */
.text-purple {
  color: rebeccapurple;
}

.btn-request-trainer {
  background-color: #fff3cd;
  color: #856404;
  border: 2px solid #ffeeba;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-request-trainer:hover {
  background-color: #ffeeba;
  color: #000;
}

.fade-in {
  opacity: 0;
  display: block;
  animation: fadeInAnim 0.3s forwards;
}

.fade-out {
  opacity: 1;
  display: block;
  animation: fadeOutAnim 0.3s forwards;
}

@keyframes fadeInAnim {
  to {
    opacity: 1;
  }
}

@keyframes fadeOutAnim {
  to {
    opacity: 0;
  }
}

.sidebar-mobile {
  background-color: var(--primary-color);
  padding: 1rem;
  border-top: 1px solid #ddd;
}

/* Suggeriti mobile offcanvas */
.suggested-mobile-list {
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 4px;
}

.suggested-mobile-list .card {
  border-radius: 10px;
}

.suggested-mobile-list .card-body {
  padding: 10px;
}

.suggested-mobile-list img {
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.suggested-mobile-list h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.suggested-mobile-list p {
  margin: 0;
  font-size: 0.85rem;
}

.suggested-mobile-list .badge {
  font-size: 0.7rem;
  padding: 4px 6px;
}
/* Offcanvas fullscreen mobile per commenti */
.offcanvas-comments-full {
  height: 92vh !important;
  max-height: 92vh !important;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

/* Scroll interno fluido */
.offcanvas-comments-full .offcanvas-body {
  overflow-y: auto;
  padding-bottom: 80px; /* spazio per evitare taglio finale */
}

/* Drag handle opzionale stile app */
.offcanvas-comments-full::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  background: #ccc;
  border-radius: 3px;
  margin: 8px auto -4px auto;
}

.offcanvas-comment-form textarea {
  resize: none;
}
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background-color: #198754;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  display: none;
}
.toast.show {
  display: block;
}

@media (max-width: 768px) {
  .login-container, .signup-container {
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-width: 100%;
    margin: 0;
  }

  .login-left, .signup-left {
    width: 100%;
    height: 40%;
    padding: 20px;
    justify-content: center;
  }

  .login-right, .signup-right {
    width: 100%;
    height: 60%;
    padding: 20px;
    justify-content: start;
    align-items: center;
  }

  .login-form {
    max-width: 100%;
  }

  .login-form input,
  .login-form button,
  .social-btn {
    width: 100%;
    font-size: 1rem;
  }

  .login-links {
    flex-direction: column;
    gap: 8px;
  }

  .login-left .logo {
    width: 120px;
    margin-bottom: 10px;
  }

  .login-left h2 {
    font-size: 1.1rem;
  }

  body {
    padding: 0;
  }
}

  .custom-info-icon {
    color: #ffb700 !important;
  }

  .form-check-input.custom-check:checked {
    background-color: #ffb700;
    border-color: #ffb700;
  }

  .form-check-input.custom-check {
    border-color: #ffb700;
  }

.select2-selection__rendered::after {
  content: "Cerca...";
  color: #6c757d;
  margin-left: 4px;
  opacity: 0.7;
  font-size: 0.9em;
}

.select2-selection__rendered.has-value::after {
  display: none;
}

.select2-container--bootstrap-5 .select2-dropdown {
  width: auto !important;
  min-width: 250px !important; /* oppure qualsiasi larghezza minima desiderata */
  max-width: 100% !important;
  white-space: nowrap; /* impedisce l'andata a capo */
}


.button-group-responsive .btn {
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.button-group-responsive .btn i {
  font-size: 1.1rem;
  vertical-align: middle;
}

@media (max-width: 576px) {
  .button-group-responsive {
    flex-direction: column;
    width: 100%;
  }

  .button-group-responsive .btn {
    width: 100%;
    justify-content: center;
  }
}


/* === SIDEBAR DESKTOP PERSONALIZZATA === */
.sidebar {
  background-color: #2f2f2f !important; /* grigio antracite */
  color: #f1f1f1; /* grigio chiarissimo per migliorare il contrasto */
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  line-height: 1.5;
}
/* alternativa in esecuzione scheda da mobile */
@media (max-width: 768px) {
  .list-group-item select.form-select-sm {
    width: 100% !important;
    margin-top: 0.5rem;
  }

  .list-group-item small.text-muted {
    display: block;
  }
}

/* separazione colori in esecuzione esericzi */
.list-group .list-group-item:nth-child(odd) {
  background-color: #f1f7ff;
}

.list-group .list-group-item:nth-child(even) {
  background-color: #ffffff;
}

.list-group .list-group-item {
  border-bottom: 1px solid #dee2e6;
}

/* modale creazione esercizi selezione immagini in db */
.exercise-card:hover {
  box-shadow: 0 0 0 2px #007bff33;
  transition: box-shadow 0.2s ease;
}

.media-item.selected {
  border: 2px solid #0d6efd !important; /* blu bootstrap */
  box-shadow: 0 0 0 2px #0d6efd66;
  position: relative;
}

.media-item.selected::after {
  content: '✅';
  position: absolute;
  top: 5px;
  right: 5px;
  background: white;
  border-radius: 50%;
  font-size: 1rem;
  padding: 0.2em 0.3em;
  z-index: 10;
  color: #0d6efd;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.sortable-ghost {
  opacity: 0.6;
  background: #f0f0f0;
  border: 2px dashed #aaa;
}

.drag-handle {
  cursor: grab; /* 👋 cursore da desktop */
  user-select: none;
}
@media (hover: none) {
  .drag-handle {
    cursor: default; /* 📱 su mobile nessun cursore speciale */
  }
}