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