/* Enray on top of Unikit.
   Unikit ships with #557ef8; we keep #8280FD because the marketing site and the
   phone app already run on it, and one brand blue across three surfaces is
   worth more than matching a template's default. */

/* ---- Type ------------------------------------------------------------- */
@font-face { font-family: "Glonimove"; src: url("/fonts/Glonimove-Medium.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "Glonimove"; src: url("/fonts/Glonimove-SemiBold.woff2") format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "Glonimove"; src: url("/fonts/Glonimove-Bold.woff2") format("woff2");
             font-weight: 700; font-display: swap; }
@font-face { font-family: "Glonimove"; src: url("/fonts/Glonimove-ExtraBold.woff2") format("woff2");
             font-weight: 800; font-display: swap; }
@font-face { font-family: "JUSTSans"; src: url("/fonts/JUSTSans-Light.woff2") format("woff2");
             font-weight: 300; font-display: swap; }
@font-face { font-family: "JUSTSans"; src: url("/fonts/JUSTSans-Regular.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "JUSTSans"; src: url("/fonts/JUSTSans-Medium.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "JUSTSans"; src: url("/fonts/JUSTSans-SemiBold.woff2") format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "JUSTSans"; src: url("/fonts/JUSTSans-Bold.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

:root {
  --enray-blue: #8280FD;
  --enray-blue-strong: #5B58E0;
  --enray-blue-ink: #4A47C7;
  --enray-blue-wash: #E9E7FF;
  --bs-primary: #8280FD;
  --bs-primary-rgb: 130, 128, 253;
}

body, .btn, .form-control, .form-select, .table, input, select, textarea {
  font-family: "JUSTSans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6, .page-title, .card-title, .kpi-value, .menu-label {
  font-family: "Glonimove", "JUSTSans", system-ui, sans-serif;
  letter-spacing: -0.005em;
}
/* A card header that carries a sentence, not a name. */
.card-title.card-note {
  font-family: "JUSTSans", system-ui, sans-serif;
  text-transform: none; font-weight: 400; font-size: 14px; color: #8d93a1;
}

/* ---- Brand colour over Unikit's ---------------------------------------- */
.btn-primary, .bg-primary { background-color: var(--enray-blue-strong) !important; border-color: var(--enray-blue-strong) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--enray-blue-ink) !important; border-color: var(--enray-blue-ink) !important; }
.btn-outline-primary { color: var(--enray-blue-strong); border-color: var(--enray-blue-strong); }
.btn-outline-primary:hover { background-color: var(--enray-blue-strong); border-color: var(--enray-blue-strong); }
.text-primary { color: var(--enray-blue-strong) !important; }
a { color: var(--enray-blue-strong); }
a:hover { color: var(--enray-blue-ink); }
.form-control:focus, .form-select:focus {
  border-color: var(--enray-blue); box-shadow: 0 0 0 .15rem rgba(130,128,253,.2);
}

/* Sidebar active state */
.left-sidebar .navbar-nav .nav-item .nav-link.active,
.left-sidebar .navbar-nav .nav-item .nav-link:hover { color: var(--enray-blue-strong); }
.left-sidebar .navbar-nav .nav-item .nav-link.active { background: var(--enray-blue-wash); }

.brand .logo .brand-mark { max-height: 30px; width: auto; object-fit: contain; }

.enray-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--enray-blue-wash); color: var(--enray-blue-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex: 0 0 40px;
}
.enray-avatar.sm { width: 34px; height: 34px; flex: 0 0 34px; font-size: 13px; }

.sidebar-user-pro { padding: 14px 20px; border-bottom: 1px solid #e8ebf3; }
.topbar .page-title { font-size: 18px; }

/* ---- Topbar and content spacing ----------------------------------------
   Unikit ships .page-content-tab with `padding: 0 8px 52px` under a fixed
   60px topbar, so the first row of every page touched the topbar edge. And
   .button-menu-mobile is a 60px-wide box around a 20px icon, which left the
   toggle floating in dead space away from the page title.
   ---------------------------------------------------------------------- */
.page-wrapper .page-content-tab { padding-top: 24px; padding-left: 12px; padding-right: 12px; }

/* The li is already a flex item; making it a flex container too drops the
   whitespace text nodes around the button, which were padding the toggle out
   by ~16px and pushing the page title away from it. */
.navbar-custom .topbar-nav:not(.float-end) { gap: 10px; }
.navbar-custom .topbar-nav:not(.float-end) > li { display: flex; align-items: center; }
/* 16px lines the toggle's box up with the left edge of the content below it. */
.navbar-custom .topbar-nav li:first-child { margin-left: 16px; }
.navbar-custom .nav-link.button-menu-mobile {
  width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background-color .15s ease, color .15s ease;
}
.navbar-custom .nav-link.button-menu-mobile:hover,
.navbar-custom .nav-link.button-menu-mobile:focus-visible { background-color: var(--enray-blue-wash); color: var(--enray-blue-ink) !important; }

/* ---- KPI tiles ---------------------------------------------------------
   Every row of tiles reads as one band: labels on a baseline, numbers on the
   next, sub-lines on the last. Two lines are reserved for the label -- that is
   what holds the values on a shared baseline when one label wraps. The sub
   line needs no such reservation: nothing sits below it, and .h-100 already
   levels the cards. The column carries the gutter because an .h-100 card's
   own margin falls outside it.
   ---------------------------------------------------------------------- */
.kpi-col { margin-bottom: 24px; }
.kpi-col > .card { margin-bottom: 0; height: 100%; }
.card-col { margin-bottom: 24px; }
.card-col > .card { margin-bottom: 0; }

.kpi-card .card-body { display: flex; align-items: flex-start; gap: 14px; padding: 20px; }
.kpi-icon {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.kpi-text { min-width: 0; flex: 1 1 auto; }
.kpi-label, .kpi-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kpi-label {
  margin: 0 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8d93a1; line-height: 1.35; min-height: 2.7em;
}
.kpi-value { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #303e67; word-break: break-word; }
.kpi-sub { margin: 2px 0 0; font-size: 12px; color: #8d93a1; line-height: 1.35; }
a.kpi-link { text-decoration: none; display: block; height: 100%; }
a.kpi-link:hover .card { box-shadow: 0 4px 20px rgba(130,128,253,.16); }

.kpi-icon.tone-primary { background: #E9E7FF; color: #4A47C7; }
.kpi-icon.tone-success { background: #D8F5E7; color: #12855A; }
.kpi-icon.tone-warning { background: #FFF1D6; color: #B5760A; }
.kpi-icon.tone-danger  { background: #FFE2E3; color: #C2333A; }
.kpi-icon.tone-info    { background: #DCEEFF; color: #1666B8; }

/* ---- Tables and badges ------------------------------------------------- */
.table thead th {
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
  color: #8d93a1; font-weight: 700; border-bottom: 1px solid #e8ebf3;
}
.table td { vertical-align: middle; }
.badge.light { font-weight: 600; }
.badge-primary   { background: #E9E7FF; color: #4A47C7; }
.badge-success   { background: #D8F5E7; color: #12855A; }
.badge-warning   { background: #FFF1D6; color: #B5760A; }
.badge-danger    { background: #FFE2E3; color: #C2333A; }
.badge-secondary { background: #ECEFF5; color: #5B6478; }
.badge-info      { background: #DCEEFF; color: #1666B8; }

.btn-xs { padding: .2rem .45rem; font-size: .75rem; line-height: 1.4; border-radius: 6px; }
.sharp { width: 30px; height: 30px; padding: 0; display: inline-flex;
         align-items: center; justify-content: center; }

@media print {
  .left-sidebar, .topbar, .footer { display: none !important; }
  .page-content-tab { margin-left: 0 !important; padding-top: 0 !important; }
}

/* Unikit draws the sidebar's collapse chevron with Line Awesome. We ship only
   Tabler, so point it at Tabler's chevron — otherwise it renders as a box. */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
  font-family: "tabler-icons" !important;
  content: "";
  font-weight: 400;
}
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ---- Dashboard greeting band -------------------------------------------
   A photograph behind the brand gradient. Deliberately a band, not a page
   background: everything on it is display copy, so nothing has to be read
   through the image. */
.dash-hero {
  border: 0;
  background-image: linear-gradient(100deg, rgba(74,71,199,.94), rgba(18,21,28,.80)),
                    url("/img/gym/studio-wide.webp");
  background-size: cover;
  background-position: center 40%;
}
.dash-hero .card-body { padding: 28px 30px; }
.dash-hero h2 { color: #fff; font-size: 24px; margin: 0; }
.dash-hero p  { color: rgba(255,255,255,.78); font-size: 14px; }
.dash-hero .btn-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.dash-hero .btn-light:hover { background: rgba(255,255,255,.24); color: #fff; }

/* An empty list is a better place for a picture than a full one — but it is
   still a hint, not the subject. Small, centred, stacked above the message. */
.empty-art {
  display: block; margin: 0 auto 18px;
  width: 92px; height: 92px; object-fit: cover;
  border-radius: 50%; opacity: .35;
}

/* ---- Page header -------------------------------------------------------
   The page's name used to live only in the 60px topbar, and every page
   invented its own way of saying where you were -- a record count here, an
   instruction sentence there, a bare Back button somewhere else. One shape
   now: trail, name, optional note, actions on the right. */
.page-head { margin-bottom: 20px; }
.page-heading {
  font-family: "Glonimove", "JUSTSans", system-ui, sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: #303e67; margin: 0;
}
.page-note { font-size: 13px; color: #8d93a1; margin-top: 4px; max-width: 70ch; }
.page-head .breadcrumb { font-size: 12px; margin: 0; }
.page-head .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #b7bcc9; }
.page-head .breadcrumb-item a { color: #8d93a1; text-decoration: none; }
.page-head .breadcrumb-item a:hover { color: var(--enray-blue-strong); }
.page-head .breadcrumb-item.active { color: #5b6478; }

/* A one-word KPI label reserved two lines, which left a band of dead space
   across nine pages. .h-100 already levels the cards; the clamp still caps a
   long one at two lines. */
.kpi-label { min-height: 0; }

/* ---- Forms -------------------------------------------------------------- */
.form-section { border-top: 1px solid #eef0f5; padding-top: 18px; margin-bottom: 14px; }
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section-title {
  font-family: "Glonimove", "JUSTSans", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: #303e67; margin: 0;
}
.form-section-note { font-size: 12.5px; color: #8d93a1; margin: 2px 0 0; }
/* The save failed because of one field; say so at that field, not only in a
   banner above thirteen of them. */
.field-error { font-size: 12.5px; color: #c2333a; margin-top: 4px; }
.form-control.is-invalid { border-color: #e5484d; }
.input-group > .form-control.is-invalid { border-color: #e5484d; }
.input-group-text { background: #f6f7fb; color: #5b6478; font-weight: 600; }

/* ---- Features page ------------------------------------------------------ */
.feature-row { padding: 18px 0; margin: 0; }
.feature-name {
  font-family: "Glonimove", "JUSTSans", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: #303e67;
}

/* ---- Topbar search ------------------------------------------------------
   Fifty destinations behind nine accordions needed one way in. */
.nav-search { position: relative; }
.nav-search .form-control { width: 260px; max-width: 40vw; }
.nav-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1100;
  background: #fff; border: 1px solid #e8ebf3; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,18,24,.12); overflow: hidden; display: none;
  max-height: 60vh; overflow-y: auto;
}
.nav-search-results.show { display: block; }
.nav-search-results a { display: block; padding: 9px 14px; text-decoration: none; color: #303e67; font-size: 14px; }
.nav-search-results a:hover, .nav-search-results a.active { background: var(--enray-blue-wash); }
.nav-search-results .hit-group { display: block; font-size: 11px; color: #8d93a1; }
.nav-search-empty { padding: 12px 14px; font-size: 13px; color: #8d93a1; }

/* ---- Small screens ------------------------------------------------------
   The theme's own responsive menu lives in unikit/js/app.js, which this
   console never loads -- so below 1024px the 260px sidebar simply sat on top
   of the page and the hamburger toggled a class with no rules behind it. The
   sidebar is off-canvas here and slides in over a backdrop. */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16,18,24,.45); opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
@media (max-width: 1023.98px) {
  /* The theme sets z-index: 5 on the sidebar below 1024px, which put it UNDER
     the backdrop (1000): on a phone the open menu sat beneath its own overlay
     and every tap hit the overlay instead of a menu item. Keep it on top. */
  .left-sidebar { transform: translateX(-100%); transition: transform .22s ease; z-index: 1010 !important; }
  body.sidebar-enable .left-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(16,18,24,.2); }
  body.sidebar-enable .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.sidebar-enable { overflow: hidden; }
  .page-wrapper .page-content-tab { width: 100% !important; margin-left: 0 !important; }
  .navbar-custom { margin-left: 0 !important; }
  .nav-search .form-control { width: 150px; }
}
@media (min-width: 1024px) {
  /* Never leave a stuck backdrop behind after a resize. */
  .sidebar-backdrop { display: none; }
}

/* Between 1024px and 1339px the theme reserves only 60px for the sidebar,
   because its own app.js was meant to shrink the menu to an icon rail at those
   widths. This console never loads that script, so the menu stays 260px wide
   and the page was sliding underneath it — the left 200px of every screen,
   covered, on any small laptop. Reserve what the sidebar actually occupies. */
@media (min-width: 1024px) and (max-width: 1339.98px) {
  .page-wrapper .page-content-tab { width: calc(100% - 260px); }
  .topbar .navbar-custom { margin-left: 260px; }
}

/* ----------------------------------------------------------------------
   Dashboard, after the Fitova template (licensed via Envato Elements):
   stat cards with meters, a next-class feature card, growth and revenue
   panels, transactions and completed workouts. Enray purple on the
   console's light theme. Everything is scoped under .fx.
   ---------------------------------------------------------------------- */
.fx { --fx-ink: #303e67; --fx-muted: #8d93a1; --fx-line: #ECEEF5; --fx-wash: #F3F2FF; }

.fx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.fx-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--enray-blue-ink); }
.fx-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--fx-ink); letter-spacing: -.3px; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.fx-card {
  display: block; background: #fff; border: 1px solid var(--fx-line); border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(48,62,103,.04), 0 8px 24px rgba(48,62,103,.05);
}
.fx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.fx-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--fx-ink); }
.fx-chip { font-size: 12px; font-weight: 600; color: var(--enray-blue-ink); background: var(--enray-blue-wash); padding: 5px 12px; border-radius: 999px; }
.fx-link { font-size: 13px; font-weight: 600; color: var(--enray-blue-ink); text-decoration: none; }
.fx-link:hover { text-decoration: underline; }
.fx-lbl { font-size: 13px; color: var(--fx-muted); font-weight: 500; }
.fx-empty { color: var(--fx-muted); font-size: 14px; margin: 8px 0 16px; }
.fx-note { color: var(--fx-muted); font-size: 12px; margin: 12px 0 0; line-height: 1.45; }

/* Top row: four stats and the next-class card. */
.fx-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 20px; margin-bottom: 24px; }
@media (max-width: 1399.98px) { .fx-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-top .fx-feature { grid-column: 1 / -1; } }
@media (max-width: 575.98px)  { .fx-top { grid-template-columns: minmax(0, 1fr); } }

.fx-stat { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.fx-stat:hover { box-shadow: 0 10px 28px rgba(130,128,253,.18); transform: translateY(-1px); }
.fx-stat-top { display: flex; align-items: flex-start; gap: 12px; }
.fx-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; color: var(--enray-blue-ink); background: var(--enray-blue-wash); }
.fx-num { font-size: 26px; font-weight: 800; color: var(--fx-ink); line-height: 1.1; letter-spacing: -.4px; word-break: break-word; }
.fx-stat .fx-lbl { margin-top: 2px; }
.fx-meter { position: relative; height: 10px; border-radius: 999px; background: #EEEEFB; margin: 18px 0 10px; }
.fx-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #B9B8FF, var(--enray-blue) 55%, var(--enray-blue-strong)); min-width: 10px; }
.fx-meter > span::after { content: ""; position: absolute; right: -2px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); border-radius: 50%; background: #fff; border: 3px solid var(--enray-blue-strong); box-shadow: 0 2px 6px rgba(91,88,224,.35); }
.fx-sub { font-size: 12.5px; color: var(--fx-muted); }
.fx-up { color: #12855A; font-weight: 700; }
.fx-down { color: #C2333A; font-weight: 700; }

.fx-feature {
  color: #fff; border: 0; display: flex; flex-direction: column; min-height: 168px;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(130,128,253,.55), transparent 65%),
    linear-gradient(145deg, #1B1F2E, #12151C);
}
.fx-feature-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B9B8FF; }
.fx-feature-title { margin: 8px 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
.fx-feature-meta { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); }
.fx-feature-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-feature-cap { font-size: 12.5px; color: rgba(255,255,255,.75); }
.fx-feature-btn { font-size: 13px; font-weight: 700; color: #fff; background: var(--enray-blue); padding: 8px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.fx-feature-btn:hover { background: var(--enray-blue-strong); color: #fff; }

/* Membership growth. */
.fx-growth { display: flex; gap: 22px; align-items: stretch; }
.fx-growth-side { flex: 0 0 170px; }
.fx-growth-chart { flex: 1 1 auto; min-width: 0; }
.fx-big { font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--fx-ink); letter-spacing: -1px; margin: 4px 0 10px; }
@media (max-width: 767.98px) { .fx-growth { flex-direction: column; } .fx-growth-side { flex: none; } }

/* Revenue overview. */
.fx-gauge-caption { text-align: center; font-size: 13px; color: var(--fx-muted); margin: -6px 0 16px; }
.fx-gauge-caption strong { color: var(--fx-ink); }
.fx-rev-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); margin-bottom: 14px; }
.fx-rev-num { font-size: 22px; font-weight: 800; color: var(--fx-ink); }
.fx-pkg-head { margin-bottom: 10px; }
.fx-pkg { display: grid; grid-template-columns: minmax(0, 1fr) 1.4fr 28px; align-items: center; gap: 12px; margin-bottom: 10px; }
.fx-pkg-name { font-size: 13.5px; color: var(--fx-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pkg-count { font-size: 13px; font-weight: 700; color: var(--fx-ink); text-align: right; }
/* Segmented bar, after the template's package meter. */
.fx-seg { position: relative; height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, #E7E6FA 0 4px, transparent 4px 7px); }
.fx-seg > span { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--enray-blue) 0 4px, transparent 4px 7px); border-radius: 4px; }

/* Tables and pills. */
.fx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.fx-table th { font-size: 12px; font-weight: 600; color: var(--fx-muted); text-transform: none; background: var(--fx-wash); padding: 10px 12px; white-space: nowrap; }
.fx-table th:first-child { border-radius: 10px 0 0 10px; }
.fx-table th:last-child { border-radius: 0 10px 10px 0; }
.fx-table td { padding: 12px; border-bottom: 1px solid var(--fx-line); color: var(--fx-ink); white-space: nowrap; vertical-align: middle; }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table tbody tr:hover td { background: #FAFAFF; }
.fx-table a { color: var(--fx-ink); text-decoration: none; font-weight: 600; }
.fx-table a:hover { color: var(--enray-blue-ink); }
.fx-ref { color: var(--enray-blue-ink) !important; }
.fx-amt { font-weight: 700; }
.fx-person { display: flex; align-items: center; gap: 10px; }
.fx-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--enray-blue-ink); background: var(--enray-blue-wash); flex: 0 0 auto; }
.fx-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.fx-pill-ok    { background: #D8F5E7; color: #12855A; }
.fx-pill-warn  { background: #FFF1D6; color: #9A6408; }
.fx-pill-bad   { background: #FFE2E3; color: #C2333A; }
.fx-pill-muted { background: #EEF0F5; color: #5b6275; }

/* Completed workouts. */
.fx-workout { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fx-line); text-decoration: none; color: inherit; }
.fx-workout:last-child { border-bottom: 0; }
.fx-workout:hover .fx-workout-name { color: var(--enray-blue-ink); }
.fx-workout-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(145deg, var(--enray-blue), var(--enray-blue-strong)); }
.fx-workout-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fx-workout-name { font-size: 14px; font-weight: 700; color: var(--fx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-workout-meta { font-size: 12px; color: var(--fx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-workout-date { font-size: 12px; color: var(--fx-muted); white-space: nowrap; }
.fx-done { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #12855A; border: 2px solid #12855A; }
/* The radial gauge draws a 220-degree arc but reserves a full circle's height;
   clip the unused bottom so the caption sits under the arc. */
#paid-gauge { height: 190px; min-height: 0 !important; overflow: hidden; }

/* Small stat tiles used on profile pages (coach profile). */
.fx-mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.fx-mini-stats .fx-card { padding: 16px 18px; }
.fx-mini-stats .fx-num { font-size: 24px; margin-top: 4px; }
.fx-warn-text { color: #9A6408 !important; }
@media (max-width: 767.98px) { .fx-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Front desk check-in: sized for a tablet at the door. */
.fx-desk-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--fx-line, #ECEEF5); border-radius: 16px; padding: 8px 8px 8px 18px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(48,62,103,.05); }
.fx-desk-search i { font-size: 22px; color: #8d93a1; }
.fx-desk-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font-size: 20px; padding: 10px 4px; background: transparent; }
.fx-desk-search .btn { font-size: 16px; padding: 10px 22px; border-radius: 12px; }
.fx-desk-flash { font-size: 16px; border-radius: 14px; }
.fx-desk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fx-line, #ECEEF5); }
.fx-desk-row:last-child { border-bottom: 0; }
.fx-desk-name { font-size: 16px; font-weight: 700; color: var(--fx-ink, #303e67); text-decoration: none; }
.fx-desk-btn { min-height: 48px; min-width: 150px; font-size: 16px; font-weight: 700; border-radius: 12px; white-space: nowrap; }
.fx-avatar-lg { width: 44px; height: 44px; font-size: 14px; }
.min-w-0 { min-width: 0; }
@media (max-width: 575.98px) { .fx-desk-row { flex-direction: column; align-items: stretch; } .fx-desk-btn { width: 100%; } }

/* Class calendar: one column per day; stacks to a list on narrow screens. */
.fx-cal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.fx-cal-day { background: #fff; border: 1px solid var(--fx-line, #ECEEF5); border-radius: 16px; padding: 12px; min-height: 180px; }
.fx-cal-day.is-today { border-color: var(--enray-blue); box-shadow: 0 0 0 3px var(--enray-blue-wash); }
.fx-cal-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.fx-cal-dow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8d93a1; }
.fx-cal-date { font-size: 20px; font-weight: 800; color: var(--fx-ink, #303e67); }
.is-today .fx-cal-dow, .is-today .fx-cal-date { color: var(--enray-blue-ink); }
.fx-cal-empty { font-size: 12px; color: #aeb3c0; margin: 0; }
.fx-cal-class { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 12px; background: var(--enray-blue-wash); margin-bottom: 8px; text-decoration: none; color: var(--fx-ink, #303e67); border-left: 3px solid var(--enray-blue); }
.fx-cal-class:hover { background: #DEDCFF; }
.fx-cal-class.is-canceled { background: #F3F4F7; border-left-color: #c3c7d1; color: #8d93a1; }
.fx-cal-class.is-canceled .fx-cal-name { text-decoration: line-through; }
.fx-cal-time { font-size: 11.5px; font-weight: 700; color: var(--enray-blue-ink); }
.fx-cal-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.fx-cal-coach { font-size: 11.5px; color: #6b7182; }
.fx-cal-cap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #5b6275; margin-top: 3px; }
.fx-cal-bar { flex: 1 1 auto; height: 5px; border-radius: 999px; background: rgba(130,128,253,.25); overflow: hidden; }
.fx-cal-bar > span { display: block; height: 100%; background: var(--enray-blue-strong); }
@media (max-width: 1199.98px) {
  .fx-cal { grid-template-columns: minmax(0, 1fr); }
  .fx-cal-day { min-height: 0; }
}

/* Class roster. */
.fx-roster-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fx-roster-add select { flex: 1 1 260px; max-width: 420px; }
.fx-roster-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.fx-roster-actions form { margin: 0; }
.fx-sub .fx-pill { margin-right: 4px; }

/* Report period picker. */
.fx-range { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #fff; border: 1px solid #ECEEF5; border-radius: 12px; margin-bottom: 20px; }
.fx-range a { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #5b6275; text-decoration: none; }
.fx-range a:hover { background: #F3F2FF; color: var(--enray-blue-ink); }
.fx-range a.is-active { background: var(--enray-blue); color: #fff; }

/* Forum moderation. Bodies keep their line breaks. */
.fx-forum-snippet { margin: 6px 0 0; font-size: 13px; color: #5b6275; }
.fx-forum-body { white-space: pre-wrap; font-size: 14px; color: var(--fx-ink, #303e67); margin: 0 0 14px; line-height: 1.55; }

/* ======================================================================
   Fitova skin for every console page.

   The dashboard was redesigned after the Fitova template; this carries the
   same look to the rest of the console by restyling the shared building
   blocks (cards, tables, buttons, fields, badges, alerts, KPI tiles) rather
   than rewriting each page. Scoped to the console's content area, so the
   login screen and the public pages are untouched.
   ====================================================================== */
.page-content-tab { background: #F4F5FA; }

/* Cards */
.page-content-tab .card {
  border: 1px solid #ECEEF5; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(48,62,103,.04), 0 8px 24px rgba(48,62,103,.05);
  overflow: visible;
}
.page-content-tab .card-header {
  background: transparent; border-bottom: 1px solid #F0F1F6;
  padding: 18px 22px; border-radius: 18px 18px 0 0;
}
.page-content-tab .card-title {
  font-size: 16px; font-weight: 700; color: #303e67;
  text-transform: none; letter-spacing: 0; margin: 0;
}
.page-content-tab .card-body { padding: 20px 22px; }
.page-content-tab .card-footer { background: transparent; border-top: 1px solid #F0F1F6; border-radius: 0 0 18px 18px; }

/* Tables: a soft header bar, roomy rows, text that stays on one line */
.page-content-tab .table { border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.page-content-tab .table > thead > tr > th {
  background: #F3F2FF; color: #7b8194; font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0; border: 0; padding: 11px 14px; white-space: nowrap;
}
.page-content-tab .table > thead > tr > th:first-child { border-radius: 10px 0 0 10px; }
.page-content-tab .table > thead > tr > th:last-child { border-radius: 0 10px 10px 0; }
.page-content-tab .table > tbody > tr > td {
  border-top: 0; border-bottom: 1px solid #ECEEF5; padding: 13px 14px;
  vertical-align: middle; color: #303e67; white-space: nowrap; background: transparent;
}
.page-content-tab .table > tbody > tr:last-child > td { border-bottom: 0; }
.page-content-tab .table > tbody > tr:hover > td { background: #FAFAFF; }
.page-content-tab .table a.text-reset strong, .page-content-tab .table strong { font-weight: 700; }

/* Row actions: soft icon buttons instead of solid squares */
.page-content-tab .table .btn-xs.sharp {
  width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 10px; font-size: 15px; border: 0;
}
.page-content-tab .table .btn-primary.btn-xs.sharp { background: #E9E7FF; color: #4A47C7; }
.page-content-tab .table .btn-primary.btn-xs.sharp:hover { background: #8280FD; color: #fff; }
.page-content-tab .table .btn-danger.btn-xs.sharp { background: #FFE2E3; color: #C2333A; }
.page-content-tab .table .btn-danger.btn-xs.sharp:hover { background: #C2333A; color: #fff; }

/* Buttons */
.page-content-tab .btn { border-radius: 10px; font-weight: 600; }
.page-content-tab .btn-sm, .page-content-tab .btn-xs { border-radius: 9px; }
.page-content-tab .btn-light { background: #fff; border: 1px solid #E3E5EE; color: #303e67; }
.page-content-tab .btn-light:hover { background: #F3F2FF; border-color: #D6D4FF; color: #4A47C7; }
.page-content-tab .btn-primary { background: var(--enray-blue-strong); border-color: var(--enray-blue-strong); }
.page-content-tab .btn-primary:hover { background: var(--enray-blue-ink); border-color: var(--enray-blue-ink); }

/* Fields */
.page-content-tab .form-control, .page-content-tab .form-select {
  border-radius: 10px; border: 1px solid #E3E5EE; background-color: #FBFBFE; min-height: 42px; color: #303e67;
}
.page-content-tab .form-control-sm, .page-content-tab .form-select-sm { min-height: 34px; border-radius: 9px; }
.page-content-tab textarea.form-control { min-height: 0; }
.page-content-tab .form-control:focus, .page-content-tab .form-select:focus {
  border-color: #8280FD; box-shadow: 0 0 0 3px #E9E7FF; background-color: #fff;
}
.page-content-tab .form-label { font-weight: 600; color: #303e67; font-size: 13px; margin-bottom: 6px; }
.page-content-tab .input-group-text { border-radius: 10px 0 0 10px; background: #F3F2FF; border-color: #E3E5EE; color: #4A47C7; font-weight: 700; }
.page-content-tab .input-group > .form-control { border-radius: 0 10px 10px 0; }

/* Badges: rounded pills, readable case */
.page-content-tab .badge { border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 11.5px; letter-spacing: 0; text-transform: none; }

/* Alerts */
.page-content-tab .alert { border-radius: 14px; border: 0; }
.page-content-tab .alert-success { background: #D8F5E7; color: #0d6b47; }
.page-content-tab .alert-danger  { background: #FFE2E3; color: #9b1c23; }
.page-content-tab .alert-warning { background: #FFF1D6; color: #7a5105; }
.page-content-tab .alert-info    { background: #E9E7FF; color: #4A47C7; }

/* KPI tiles (partials/kpi-grid) and the member overview tiles */
.page-content-tab .kpi-icon { border-radius: 12px; }
.page-content-tab .kpi-label { text-transform: none; letter-spacing: 0; font-weight: 600; }
.page-content-tab .mo-tile { border-radius: 14px; }

/* Pagination and tabs */
.page-content-tab .page-link { border-radius: 9px !important; margin: 0 2px; border-color: #E3E5EE; color: #4A47C7; }
.page-content-tab .page-item.active .page-link { background: var(--enray-blue-strong); border-color: var(--enray-blue-strong); color: #fff; }
.page-content-tab .nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 600; }

/* Lists keep their row actions in view: when a list is wider than the card
   and scrolls sideways, the Actions column stays pinned to the right edge. */
.page-content-tab .fx-list-table > thead > tr > th:last-child,
.page-content-tab .fx-list-table > tbody > tr > td:last-child {
  position: sticky; right: 0; z-index: 1;
}
.page-content-tab .fx-list-table > tbody > tr > td:last-child { background: #fff; box-shadow: -10px 0 12px -10px rgba(48,62,103,.18); }
.page-content-tab .fx-list-table > tbody > tr:hover > td:last-child { background: #FAFAFF; }
.page-content-tab .fx-list-table > thead > tr > th:last-child { background: #F3F2FF; }
.page-content-tab hr { border-color: #ECEEF5; opacity: 1; }

/* A figure never breaks across lines ("$2,50" / "2.00"); on a narrow tile it
   gets smaller instead. The tile's label and sub-line may still wrap. */
.kpi-value { word-break: normal; overflow-wrap: normal; white-space: nowrap; font-size: clamp(1.05rem, 1.9vw, 1.5rem); }
.fx-num { word-break: normal; white-space: nowrap; font-size: clamp(1.15rem, 2vw, 26px); }