/* 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; }


/* 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;
    }
    .title{
      margin:18px auto 20px;
      max-width:900px;
      font-size: clamp(1.25rem, 2.4vw + .6rem, 1.2rem);
      font-weight:600;
    }
    .subtitle{
      margin:0 auto 24px;
      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 34px;
    }
    .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:18px 18px 20px;
      text-align:left;
      box-shadow: var(--shadow);
      transition: transform .12s ease, box-shadow .2s ease;
      min-height: 160px;
    }
    .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;
      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 */
  }
}