/* styles.css */

/* reduce the padding on the navigation added by bootstrap */
.navbar-brand {
    margin-inline-end: 0.3rem; /* Or use margin-right for LTR specific */
}

.settings-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}
.settings-buttons .btn {
    min-width: 180px;
}

@media (max-width: 576px) {
    .settings-buttons {
    flex-direction: column;
    align-items: center;
    }
    .settings-buttons .btn {
    width: 100%;
    max-width: 300px;
    }
}

.gradient-blue {
    background: linear-gradient(135deg, #0b3d91, #1e90ff);
    color: white;
}

.gradient-green {
    background: linear-gradient(135deg, #28a745, #88e38d);
    color: white;
}

.gradient-purple {
    background: linear-gradient(135deg, #6f42c1, #b083ff);
    color: white;
}

.card-title, .card-text {
    color: white;
}

.card-title-black {
    color: black;
}


.trainer-card-title, .trainer-card-text {
    color: black;
}


.card-body a.btn {
    margin-top: 10px;
}

.card.gradient-blue,
.card.gradient-green,
.card.gradient-purple {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 12px;
}


.list-group-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.95rem;
}

.card-body {
    padding-top: 0.5rem;
    /* padding-bottom: 0.5rem; */
}

.legal-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0b3d91;
}

.avatar-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #0b3d91, #5b8cff);
}

.trainer-row { display:flex; align-items:center; gap:.75rem; }
.amount-right { font-variant-numeric: tabular-nums; }

.gradient-green {
    background-image: linear-gradient(to bottom right, #004d40, #00796b); /* Darker green to slightly lighter green */
}

.red-gradient {
    background-image: linear-gradient(to bottom right, #853246, #ce5366);   
}

.grey-gradient {
    background-image: linear-gradient(to bottom right, #a0a0a0, #e0e0e0);   
}

    .table td, .table th { vertical-align: middle; }
    .badge-wrap .badge { margin-right:.25rem; margin-bottom:.25rem; }
    .sticky-actions { position: sticky; bottom:0; background:#fff; padding-top:.5rem; }
    .form-control, .form-select { min-height: 38px; }

    /* Full-width workouts area using flexbox */
    .workout-scroll-area {
      max-height: 410px;
      overflow: auto;
      border: 1px solid #e9ecef;
      border-radius: .375rem;
      padding: .75rem;
      background: #f5f5f5;

      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1rem; /* row gap / column gap */
    }
    
    .workout-scroll-area .form-check {
      flex: 1 1 calc(25% - 1rem); /* 4 across on lg+ */
      min-width: 180px;            /* keeps labels readable */
    }
    @media (max-width: 992px) {    /* md */
      .workout-scroll-area .form-check { flex-basis: calc(33.333% - 1rem); }
    }
    @media (max-width: 768px) {    /* sm */
      .workout-scroll-area .form-check { flex-basis: calc(50% - 1rem); }
    }
    @media (max-width: 480px) {    /* xs */
      .workout-scroll-area .form-check { flex-basis: 100%; min-width: 0; }
    }





/* Pastel Theme for Dashboard Cards */
.card-progress {
  background-color: #ffe0b2; /* light pastel orange */
}

.card-strength {
  background-color: #c8e6c9; /* light pastel green */
}

.card-cardio {
  background-color: #bbdefb; /* light pastel blue */
}

.card-nutrition {
  background-color: #f8bbd0; /* light pastel pink */
}

.card-trainercalendar {
  background-color: #e2cbf7; /* light pastel pink */
}

.card-clientcalendar {
  background-color: #e2cbf7; /* light pastel pink */
}


/* Make the whole card clickable */
.card-link {
  display: block;
  color: #000 !important;
  text-decoration: none;
}

.card-link:hover {
  filter: brightness(0.97);
  transform: translateY(-2px);
  transition: all 0.18s ease-in-out;
}

.card-link .card-title,
.card-link .card-text {
  color: #000 !important;
}

.bi-whatsapp {
  color: #25D366;
}

.table td, .table th { vertical-align: middle; }
.badge-wrap .badge { margin-right:.25rem; margin-bottom:.25rem; }
.sticky-actions { position: sticky; bottom:0; background:#fff; padding-top:.5rem; }
.form-control, .form-select { min-height: 38px; }

/* Full-width workouts area using flexbox */
.scroll-area {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #e9ecef;
  border-radius: .375rem;
  padding: .75rem;
  background: #fff;

  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem; /* row gap / column gap */
}
.scroll-area .form-check {
  flex: 1 1 calc(25% - 1rem); /* 4 across on lg+ */
  min-width: 180px;
}
@media (max-width: 992px) { .scroll-area .form-check { flex-basis: calc(33.333% - 1rem); } }
@media (max-width: 768px) { .scroll-area .form-check { flex-basis: calc(50% - 1rem); } }
@media (max-width: 480px) { .scroll-area .form-check { flex-basis: 100%; min-width: 0; } }


.card-header.small { font-size: .95rem; }
.table td, .table th { vertical-align: middle; }

/* Totals polish */
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0b3d91, #5b8cff);
}
.trainer-row { display:flex; align-items:center; gap:.75rem; }
.amount-right { font-variant-numeric: tabular-nums; }

mark {
  background: #fff3e0;         /* pastel peach */
  color: #0b3d91;              /* your navy */
  padding: 0 .12em;
  border-radius: .2rem;
}

/* Trainer Card Styling */
.trainer-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .trainer-card img {
    width: 90px;
    height: 90px;
  }
}

/* Ensure long text (emails, phone numbers) wrap */
.break-words {
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* Section header colors */
.card-header.active-header {
  background-color: #d1fae5;  /* light green */
  color: #065f46;             /* dark green text */
  font-weight: 600;
}

.card-header.pending-header {
  background-color: #fef3c7;  /* light yellow */
  color: #92400e;             /* dark amber text */
  font-weight: 600;
}

.card-header.inactive-header {
  background-color: #fee2e2;  /* light red */
  color: #991b1b;             /* dark red text */
  font-weight: 600;
}


/* === FitTrak Font Unifier === */
:root {
  --ft-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Apply everywhere, once */
html, body {
  font-family: var(--ft-font);
}

/* Ensure components inherit it (kills stray overrides) */
.card, .navbar, .dropdown-menu, .form-control, .btn, .alert, .badge,
.table, .list-group, .offcanvas, .modal, .toast {
  font-family: inherit !important;
}

/* Headings + labels consistent weight */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }
.label { font-weight: 600; color: #374151; } /* same look on both pages */

/* Optional: normalize paragraph spacing inside cards */
.card p { margin-bottom: .5rem; }

/* Headers for the trainer list background */
.status-active   { background:#d1fae5; } /* green-100 */
.status-pending  { background:#fef3c7; } /* amber-100 */
.status-inactive { background:#e5e7eb; } /* gray-200 */
.status-cancel   { background:#fee2e2; } /* red-100 */
.status-declined { background:#ede9fe; } /* violet-100 */


/* keep headings + labels consistent everywhere */
.card-header h5 { font-weight: 600; margin: 0; }
.label { font-weight: 600; color: #374151; }

/* normalize paragraph spacing inside cards */
.card p { margin-bottom: .5rem; }

/* make section headers and counts uniform */
.section-count { opacity: .85; font-weight: 600; }

/* Equal-width small action buttons */
.btn-eq {
  width: 4.5rem;        /* ~104px: tidy, not too wide */
  text-align: center;   /* center labels */
  white-space: nowrap;  /* avoid wrapping */
}

/* (optional) On very small screens, let them wrap nicely */
@media (max-width: 420px) {
  .btn-eq { width: 4rem; } /* a hair narrower on tiny phones */
}

.btn .emoji { line-height: 1; display: inline-block; }


:root { --primary-udst:#0b3d91; }
.btn-primary, .btn-outline-primary:hover, .btn-primary:disabled {
  background-color: var(--primary-udst) !important; border-color: var(--primary-udst) !important;
}

.btn-outline-primary { color: var(--primary-udst); border-color: var(--primary-udst); }
.page-header { display:flex; align-items:center; gap:.75rem; }
.template-preview { max-height:160px; overflow:auto; border:1px solid #eee; padding:.5rem; background:#fafafa; }


.badge-active { background:#28a745; }
.badge-inactive { background:#dc3444; }

.btn-primary { background-color:#0b3d91; border-color:#0b3d91; }
.btn-primary:hover, .btn-primary:focus { background-color:#082f78; border-color:#082f78; }

.navbar { background-color:#0b3d91 !important; }

/* btn classes added for trainer calendar view, but chanage all because of classes / skips CSS above */
.btn { border:none; padding:8px 12px; border-radius:10px; background:#e9eef7; color:var(--brand); cursor:pointer; font-weight:600; }
.btn:hover { filter: brightness(0.96); }
.btn-primary { background:var(--brand); color:#fff; }
.btn-ghost { background:transparent; color:var(--brand); border:1px solid var(--brand); }


/* added for gymulate */

    :root{
      --brand:#0b3d91;
      --brand-ink:#072a64;
      --ink:#1d2735;
      --muted:#6b7686;
      --card:#ffffff;
      --bg:#f6f8fb;
      --ring:rgba(11,61,145,.35);
      --radius:16px;
      --shadow:0 10px 30px rgba(13, 38, 76, .08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink); background: radial-gradient(1000px 700px at 10% -10%, #e9f0ff 0%, transparent 60%),
                                      radial-gradient(1000px 700px at 110% 10%, #eef5ff 0%, transparent 60%),
                                      var(--bg);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.45;
    }

    /* Header */
    .header{
      width:100%;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:transparent;
    }
    .brand img{
      display:block;
      height:76px; /* keep your logo intact, just set a stable height */
      width:auto;
      object-fit:contain;
    }

    /* Hero */
    .hero{
      max-width:1100px;
      margin:12px auto 0;
      padding:0 18px 28px;
      text-align:center;
    }
    .eyebrow{
      display:inline-block;
      font-size:1rem;
      color:var(--muted);
      letter-spacing:.3px;
      padding:8px 14px;
      font-weight:500;
    }

    /* tighten space between logo and subtitle */
    .header { margin-bottom: 0px; padding-bottom: 0; }

    /* remove inline-image baseline gap and any extra padding */
    .header .brand { line-height: 0; padding: 0px 0; }
    .header .brand img { display: block; margin: 0 auto; }

    /* if your .hero has top padding, trim it */
    .hero { padding-top: 0px; }

    .title{
      margin:10px auto 30px;
      max-width:900px;
      font-size: clamp(1.25rem, 2.4vw + .6rem, 1.2rem);
      font-weight:600;
    }
    .subtitle{
      margin:0 auto 4px;
      max-width:820px;
      color:var(--muted);
      font-size:1.05rem;
    }



    /* CTA buttons */
    .cta-row{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
      margin: 10px 0 20px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 18px;
      border-radius:12px;
      font-weight:600;
      text-decoration:none;
      border:1px solid transparent;
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
      will-change: transform;
    }
    .btn:focus-visible{ outline:none; box-shadow:0 0 0 6px var(--ring) }
    .btn:hover{ transform: translateY(-1px) }

    .primary{
      background:var(--brand);
      color:#fff;
      box-shadow: 0 8px 18px rgba(11,61,145,.25);
    }
    .primary:hover{ background:var(--brand-ink) }

    .ghost{
      background:#fff;
      color:var(--brand);
      border-color:rgba(11,61,145,.25);
    }
    .ghost:hover{
      background:#f3f7ff;
      border-color:var(--brand);
    }

    /* Feature cards */
    .features{
      display:grid;
      grid-template-columns: 1fr;
      gap:16px;
      margin: 0 auto;
      max-width:1100px;
    }
    @media (min-width:720px){
      .features{ grid-template-columns: repeat(3, 1fr) }
    }
    .card{
      background:var(--card);
      border:1px solid #e8eef6;
      border-radius: var(--radius);
      padding:15px 15px 15px;
      text-align:left;
      box-shadow: var(--shadow);
      transition: transform .12s ease, box-shadow .2s ease;
      min-height: 130px;
    }
    .card:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(13,38,76,.12) }
    .card h3{
      margin:0 0 8px;
      font-size:1.1rem;
      display:flex; align-items:center; gap:8px;
    }
    .card p{ margin:0; color:var(--muted) }
    .card .icon{
      font-size:1.15rem; line-height:1;
    }

    /* “For Gyms & Clubs” section anchor target */
    #create-group{
      scroll-margin-top: 90px;
    }

    /* Footer */
    .footer{
      padding:22px 18px;
      margin-bottom:20px;
      text-align:center;
      color:var(--muted);
      font-size:.95rem;
    }

    /* Respect users who prefer less motion */
    @media (prefers-reduced-motion: reduce){
      .btn, .card{ transition:none }
      .btn:hover, .card:hover{ transform:none }
    }


    /* Base: keep buttons on one line */
.cta-row {
  display: flex;
  align-items: center;
  gap: 8px;                /* space between buttons */
  flex-wrap: nowrap;       /* don't wrap to next line */
  overflow-x: auto;        /* allow side-scroll on small screens */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;     /* room for hidden scrollbar */
}
.cta-row a.btn { 
  flex: 0 0 auto;          /* prevent shrinking */
  white-space: nowrap;     /* keep labels on one line */
}

/* Optional: hide scrollbar visuals */
.cta-row { scrollbar-width: none; }
.cta-row::-webkit-scrollbar { display: none; }

/* If you prefer *no scroll*, shrink buttons on very small screens */
@media (max-width: 420px) {
  .cta-row a.btn {
    font-size: 0.9rem;
    padding: 8px 10px;     /* tighter padding */
  }
}

/* === Canonical button sizing (global) === */

:root {
  --btn-height: 36px;   /* uniform height */
  --btn-px: 12px;       /* compact horizontal padding */
  --btn-radius: 10px;   /* keep your current rounded look */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 0 var(--btn-px);   /* no extra vertical padding */
  border-radius: var(--btn-radius);
  line-height: 1.2;
}


.flash-bell {animation:flash 1s infinite alternate;transform-origin:top center; color:#fff !important; }
@keyframes flash{from{opacity:.6;transform:rotate(-8deg)}to{opacity:1;transform:rotate(8deg)}}


/* --- Large switch (desktop defaults) --- */
.form-switch.gx-switch-lg { padding-left: 3.6rem; }           /* room for bigger knob */
.form-switch.gx-switch-lg .form-check-input{
  width: 3rem;
  height: 1.6rem;
  border-radius: 2rem;
}
.form-switch.gx-switch-lg .form-check-input:checked{
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Remove global top offset on label inside this component */
.form-switch.gx-switch-lg .form-check-label{ margin-top: 5px; margin-left:5px ; }

/* --- Mobile fix: turn the switch row into flex, kill Bootstrap offsets --- */
@media (max-width: 576px){
  .form-switch.gx-switch-lg{
    display: flex;
    align-items: center;            /* keeps label vertically centered next to switch */
    gap: .6rem;
    padding-left: 0;                /* remove the big left padding */
  }
  .form-switch.gx-switch-lg .form-check-input{
    float: none;                    /* stop Bootstrap from floating it */
    margin: 0;                      /* remove negative/side margins */
    position: static;               /* avoid absolute-ish offsetting */
    flex: 0 0 auto;
  }
  .form-switch.gx-switch-lg .form-check-label{
    margin: 0;                      /* no manual nudge */
    line-height: 1.25;              /* better for two-line labels */
    flex: 1 1 auto;                 /* let label wrap naturally */
  }
}


/* === My Info: label/value alignment (compact, consistent) === */
.kv.row{ --bs-gutter-y: .25rem; }                  /* tighter vertical spacing */

/* Each line: label + value */
.kv .d-flex{
  align-items: flex-start;                         /* top-align; fixes multi-line Bio */
  gap: 0;                                          /* no extra flex gap */
}

/* Label cell (first child) */
.kv .d-flex > :first-child{
  width: 100px;                                    /* narrower label column */
  margin-right: 5px !important;                   /* <= 30px total gap (12px here) */
  font-weight: 700;
  color: #111827;
  flex: 0 0 auto;
}

/* Slightly wider on large screens but still compact */
@media (min-width: 992px){
  .kv .d-flex > :first-child{
    width: 130px;
    margin-right: 14px !important;                 /* still well under 30px */
  }
}

/* Value cell */
.kv .d-flex > :nth-child(2){
  flex: 1 1 auto;
  min-width: 0;
  color: #111827;
  line-height: 1.45;
  word-break: break-word;                          /* long links won’t overflow */
}

/* Optional: link look inside value */
.kv .d-flex > :nth-child(2) a{
  color: var(--brand);
  text-decoration: none;
}
.kv .d-flex > :nth-child(2) a:hover{
  text-decoration: underline;
}

/* Trainer Marketplace: compact action buttons (scoped) */
.tm-actions .btn-eq{
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.tm-actions .btn-primary.btn-eq{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.tm-actions .btn-outline-primary.btn-eq{
  background-color: #fff !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}


/* === FAQ Catalog (add to gymulate-style.css) ============================== */

/* Make long answers preserve line breaks and wrap cleanly */
/* FAQ Catalog */
.faq-message { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Column widths */
#faqTable thead th.faq-col-title   { width: 260px; }
#faqTable thead th.faq-col-added   { width: 200px; }
#faqTable thead th.faq-col-date    { width: 160px; }
#faqTable thead th.faq-col-actions { width: 160px; }

/* Simple action row + table overflow wrapper */
.tm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.table-wrap { overflow: auto; }

#faqTable tbody td { vertical-align: top; }
#reorderList .list-group-item.dragging { opacity: 0.6; }

/* START - in-person and online training for the marketplace */
/* Grid: full, responsive, no sideways scroll */
.workout-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:.5rem .75rem;
  width:100%;
}
@media (max-width: 576px){
  .workout-grid{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}
.workout-box{ padding:.4rem; overflow-x:hidden; }
.workout-item{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border:1px solid var(--border);
  border-radius:10px; background:#fff; max-width:100%;
}

/* Mode tools & badges */
.mode-tools{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.mode-tools .count-badge{
  display:inline-block; padding:.15rem .6rem; border-radius:999px;
  background:#f1f5f9; border:1px solid #e2e8f0; font-size:.8rem;
}
.mode-tools a{ font-size:.85rem; text-decoration:underline; cursor:pointer; }
.mode-preview{ font-size:.9rem; color:#6b7280; margin-top:.25rem; }


.app-card{ border:1px solid var(--border); border-radius:18px; box-shadow:0 10px 22px rgba(0,0,0,.06); }
.avatar{ width:140px; height:140px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.kv .key{ width:160px; color:#6b7280; }
.consent{ border:1px solid #fee2e2; background:#fff7f7; color:#991b1b; border-radius:10px; padding:.65rem .75rem; }

/* Workout chips – responsive and mobile friendly */
.workout-box{ padding:.4rem; overflow-x:hidden; }
.workout-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:.5rem .75rem; width:100%; }
.workout-item{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border:1px solid var(--border); border-radius:10px; background:#fff; max-width:100%; }
@media (max-width:576px){
  .workout-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Buttons */

.tm-actions .btn-eq{ min-width:140px; }

.gx-switch-lg .form-check-input{ width:2.75rem; height:1.4rem; }
.section-subtle{ background:#ffffff; border:1px dashed var(--border); border-radius:12px; padding:.75rem; }

/* Mode tools & badges */
.mode-tools{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.mode-tools .count-badge{ display:inline-block; padding:.15rem .6rem; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; font-size:.8rem; }
.mode-tools a{ font-size:.85rem; text-decoration:underline; cursor:pointer; }
.mode-preview{ font-size:.9rem; color:#6b7280; margin-top:.25rem; }

/* END - in-person and online training for the marketplace */


@media (max-width: 576px) {
  #trainerPrivacyBody .row.border.rounded { padding: .5rem .75rem; }
  #trainerPrivacyBody .trainer-row + .trainer-row { margin-top: .5rem; }

}