/* Grundlegende Schriftart */
body, html {
    font-family: 'Manrope', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: var(--color-text-dark);
    background: linear-gradient(135deg, var(--color-bg-main), var(--color-bg-grad2));
}

h1 {
  font-weight: 800;
}
h2 {
  font-weight: 600;
}
h5 {
  font-weight: 400;
}

/* Farbvariablen */
:root {
  --color-text-light: #eeeeee;
  --color-text-dark: #222831;
  --color-primary: #4a90e2;
  --color-bg-hover: #393e46;
  --color-bg-dark: #222831;
  --color-bg-darker: #15191f;
  --color-range-accent: #444444;
  --color-btn-tp-bg: #000000;
  --color-btn-tp-bg-hover: #873922;
  --color-light-border: #e0e0e0;

  /* Main Design */
  --color-bg-main: #FFFCF9;
  --color-bg-grad1: #FFFCF9;
  --color-bg-grad2: #B8AEA6;
  --color-bg-grad3: #807671;
  /*--color-bg-accent1: #2E5085;
  --color-bg-accent1-grad: #26426E;*/

  --color-bg-accent1: #1A3840;
  --color-bg-accent1-grad: #224144;
  --color-bg-accent1-hover: #152F33;
  --color-bg-accent2: #000000;

  --topbar-height: 54px;
  --sidebar-width: 240px;

}

.btn-accent3
{
      background: var(--color-bg-main);
}

/* ------- /\ Sidebar /\ ------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: linear-gradient(135deg, var(--color-bg-grad1), var(--color-bg-grad2));
  color: var(--color-bg-accent2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1040;
  box-shadow: 0px 0 12px rgba(0, 0, 0, 0.2);
  padding: 1.5rem 0 1.2rem 0;
  transition: transform 0.3s ease;
}
.sidebar.collapse:not(.show) {
  transform: translateX(-100%);
  margin-left: 0 !important;
}

.coaching_model {
    position: relative;
    left: 45px;
    top: 110px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-text-light);
    border-radius: 3px;
    background-color: var(--color-bg-accent2) !important;
}

.coaching_sport {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--color-bg-accent2);
}

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1010;
  display: none;
}


/* Sidebar Bottom */
.sidebar-bottom {
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
}

/* Logo */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-bg-hover);
}

.sidebar.show ~ .sidebar-overlay {
  display: block;
}

.sidebar-bottom .footer-links{
    text-align: center;
    font-size: 10px;
    color: var(--color-text-dark);
    font-weight: 600;
}

.sidebar-bottom .footer-links a{
    color: var(--color-text-dark);
    font-weight: 600;
    text-decoration: none;
    margin: 0px 3px 0px 3px;
}

@media (min-width: 950px) {
  .sidebar {
    transform: translateX(0);
  }
  #sidebarMenu {
    display: block !important;
    transform: none !important;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

/* --- Mobile sidebar: scrollable menu + sticky footer (verhindert Überlappung) --- */
@media (max-width: 950px) {
  /* leicht breitere Offcanvas-Ansicht, Touch-Scroll aktivieren */
  .sidebar {
    width: 280px;
    max-width: 90%;
    padding-top: 0;
    z-index: 1060;
    height: 100%;
  }

  .profile-btn {
    margin-top: 0px !important;
    width: 100%;
    margin-right: 0;
}
.coaching_model {
    position: relative;
    left: 45px;
    top: 110px;
    font-size: 20px !important;
    border-radius: 3px;
}

  /* Der erste direkte div-Knoten innerhalb der Sidebar enthält das Menü.
     Er wird flexibel, nimmt verbleibende Höhe ein und wird scrollable. */
  .sidebar > div:first-child {
    flex: 1 1 auto;
    min-height: 0; /* wichtig, damit overflow funktioniert im Flex-Container */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 88px; /* Platz für das sticky Logo am Ende */
  }

  /* Footer-Logo am Ende sticky (bleibt sichtbar, überlappt nicht) */
  .sidebar-bottom {
    position: sticky;
    bottom: env(safe-area-inset-bottom);
    z-index: 1060;
    padding: 0;
    margin-top: 8px;
    margin-bottom: -30px;
    border-top: 1px solid rgba(0,0,0,0.05);
  }

  .sidebar .sidebar-bottom .logo img {
    height: 30px;
    display: block;
    margin-top: 10px;
    margin-bottom: 0px;
  }

  /* Overlay sichtbar, wenn Sidebar geöffnet ist (JS fügt .show hinzu) */
  .sidebar-overlay {
    display: none;
  }

  .sidebar.show ~ .sidebar-overlay {
    display: block;
    position: fixed;
    z-index: 1040;
    background: rgba(0,0,0,0.38);
    backdrop-filter: blur(1px);
  }

  /* Verhindert, dass der Body hinter der offenen Sidebar scrollt
     (HTML/JS: optional body.sidebar-open setzen) */
  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* ------- \/ Sidebar \/ ------- */

/* ------- /\ Topbar /\ ------- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-main);
    display: flex;
    align-items: center;
    padding: 0 1.0rem;
    z-index: 1020;
    height: var(--topbar-height);
    overflow: hidden;
    box-shadow: 0px 0 12px rgba(0, 0, 0, 0.2);
}

.btn-menu-topbar {
    visibility: hidden;
}

.logo-topbar {
    visibility: hidden;
    }

@media (max-width: 950px) {
        .hide-on-mobile {
        display: none !important;
    }
        .btn-menu-topbar {
        visibility: visible;
    }
        .logo-topbar {
        visibility: visible;
        margin-top: 7px;
    }
}
/* ------- \/ Topbar \/ ------- */


.row.mb-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
/* Hauptinhalt */
main.content {
  margin-top: 80px;
  padding: 0 2.2rem;
}


@media (min-width: 950px) {
  main.content {
    margin-left: 300px;
  }
  .flash-message {
    left: 0;
  }
  .hide-on-desktop {
    display: none !important;
  }
}

/* Tabellenspaltenbreiten */
.col-70px { width: 70px; }
.col-120px { width: 120px; }
.col-200px { width: 200px; }
.col-date { width: 150px; }
.col-check { width: 120px; }
.col-day_small { width: 120px; }

@media (max-width: 950px) {
  input.form-control,
  .form-control-sm {
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
  }
  label.custom-radio {
    font-size: 0.85rem;
    margin-right: 0.2rem;
  }
  .input-group-text {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
  }
  input[type="range"] {
    height: 20px;
  }
  label {
    font-size: 0.9rem;
  }
  .form-select {
      font-size: 0.85rem;
  }
  table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.5rem;
    border-spacing: 0;
  }
  /* Angepasste Spaltenbreiten für Mobile */
  .col-70px { width: 50px !important; margin: 0; }
  .col-120px { width: 80px; margin: 0; }
  .col-200px { width: 50px; margin: 0; }
  .col-check { width: 40px !important; margin: 0; }
  .col-date { width: 60px; margin: 0; }
  .col-day_small { width: 45px; margin: 0; }
}

/* Tabelle */
table {
  table-layout: fixed;
  width: 100%;
  background-color: transparent !important; /* überschreibt Bootstrap */
  border-collapse: collapse; /* optional, für saubere Grenzen */
}

.table thead th,
.table tbody td {
  background-color: transparent;
}

/* Menü Elemente */
.menu-list .btn-sidebar,
.btn-profile,
.btn-dashboard,
.btn-dashboard-accent {
    width: 90%;
    text-align: left;
    padding: 0.75rem 1.5rem;
    margin-left: 5%;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
    color: var(--color-bg-accent2);
    background: none;
    border: none;
    transition: background-color 0.2s;
    transition: background 0.18s, color 0.2s;
    cursor: pointer;
    white-space: nowrap;
}

/* Sidebar Button Hover */
.menu-list .btn-sidebar:hover {
  background-color: var(--color-bg-grad3);
  color: var(--color-bg-accent2);
}

/* Menü Elemente */
.btn-dashboard-accent {
  background: linear-gradient(135deg, var(--color-bg-accent1) 0%, var(--color-bg-accent1-grad) 100%);
  margin-bottom: 10px;
  color: var(--color-text-light);
  margin-left: 0;
  text-align: center;
}

.btn-dashboard {
  background: var(--color-bg-accent2);
  padding-left: 1rem;
  margin-bottom: 10px;
  color: var(--color-text-light);
  margin-left: 0;
}

.btn-dashboard-small {
  background: var(--color-bg-accent2);
  color: var(--color-text-light);
  margin-left: 0;
  width: auto; 
  height: 40px; 
  padding: 7px 16px 0 16px;
  font-size: 16px;
}

.btn-dashboard-small-accent {
  background: linear-gradient(135deg, var(--color-bg-accent1) 0%, var(--color-bg-accent1-grad) 100%);
  color: var(--color-text-light);
  text-align: center;
  width: auto; 
  height: 40px;
  padding: 7px 16px 0 16px;
  font-size: 16px;
}

.btn-dashboard-accent:hover {
  background: linear-gradient(135deg, var(--color-bg-accent1-hover) 0%, var(--color-bg-accent1-hover) 100%);
  color: var(--color-text-light);
}

.btn-dashboard-small:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.btn-dashboard-small-accent:hover {
  background: linear-gradient(135deg, var(--color-bg-accent1-grad) 0%, var(--color-bg-accent1-hover) 100%);
  color: var(--color-text-light);
}

.btn-dashboard:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}



/* TrainingPeaks Button */
.menu-list .btn-sidebar-tp {
  width: 90%;
  background-color: var(--color-btn-tp-bg);
  border: none;
  color: var(--color-bg-accent2);
  text-align: center;
  margin: 0 0 10px 5%;
  padding: 13px 0;
  border-radius: 5px;
  font-weight: 600;
  transition: background 0.18s, color 0.2s;
  cursor: pointer;
}
.menu-list .btn-sidebar-tp:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

/* Logout Link */
.logout-link {
  color: var(--color-bg-accent2);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.06rem;
  cursor: pointer;
}
.logout-link:hover {
  text-decoration: underline;
}

/* Flash Nachricht */
.flash-message {
  position: fixed;
  top: 54px;
  left: 240px;
  right: 0;
  z-index: 1015;
  margin: 0;
  border-radius: 0;
}

/* Links mit Margin */
.mt-2 a,
.mt-1 a {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mt-2 a {
  color: #333333 !important;
}
.mt-2 a:hover {
  color: #555555 !important;
  text-decoration: underline;
}

.mt-1 a {
  color: var(--color-text-light) !important;
}
.mt-1 a:hover {
  color: #c4c4c4 !important;
  text-decoration: underline;
}

/* Custom Radio Buttons */
.custom-radio {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-right: 20px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  vertical-align: middle;
}
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.custom-radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.custom-radio:hover input ~ .checkmark {
  background-color: #ccc;
}
.custom-radio input:checked ~ .checkmark {
  background-color: var(--color-primary);
}
.custom-radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.custom-radio input:checked ~ .checkmark:after {
  display: block;
}

/* Range Input Farbe */
input[type=range] {
  accent-color: var(--color-range-accent);
}

/* Checkbox Fehlerzustand */
.checkbox-error {
  outline: 2px solid red !important;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}

.card, .card_static{
    border-radius: 6px;
    border: none;
    background: white;
    animation: fade 0.3s ease-in-out;
    box-shadow: 0px 6px 15px rgba(0,0,0,0.1);
}

/* Slider Styles für Trainings-Tutorial */
.slider-container {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
}

.slide {
  display: none;
  animation: fade 0.2s ease-in-out;
}

.slide.active {
  display: block;
  margin-bottom: 50px;
}

@keyframes fade {
  from {opacity: 0.4;} 
  to {opacity: 1;}
}

.info-badge {
    font-size: 1rem;
    padding: 0.8rem 0.8rem;
    background-color: #222831;
}
    
.form-control:read-only {
    background-color: #f8f9fa;
    cursor: default;
}
    
.form-control:read-only:focus {
    background-color: #f8f9fa;
    border-color: #ced4da;
    box-shadow: none;
}
@media (max-width: 1550px) {
    .row.mb-0 > [class^="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width: 950px) {
    .info-badge {
        font-size: 0.7rem;
    }
}

.profile-btn {
    width: auto;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    margin-bottom: 15px;
    margin-top: -30px;
    transition: background 0.18s, color 0.2s;
    align-self: flex-start;
}
.profile-img {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    min-height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
    border-radius: 50%;
    margin-top: 0;
    object-fit: cover;
}
.profile-name {
    margin-top: 15px;
    margin-bottom: 0;
    line-height: 28px;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-bg-accent2);
    text-align: center;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-btn:hover {
  background-color: var(--color-bg-grad3);
  color: var(--color-bg-accent2);
}