/* "Gym dark" for the client portal and the Coach, Sales and Partner apps: always on (Amr, 4-5 Oct 2026).
   Loaded by _portal_shell / _coach_shell / _sales_shell / _partner_shell.html after style.css.
   Same colours as the Training tab (app/static/training/athlete-gym.css). Only applies under <html class="gym">.
   Most portal styles use the --am-* names, so swapping them does most of the work:
   --am-white = card, --am-gray-100 = page, --am-black = main text, --am-gray-700 = grey text. */
:root.gym{
  --am-white:#242932;
  --am-black:#f4f5f7;
  --am-gray-100:#1a1e25;
  --am-gray-200:#2e343e;
  --am-gray-300:#3a414c;
  --am-gray-500:#6f7684;
  --am-gray-600:#868d9b;
  --am-dark-red:#ff6b70;
  --am-gray-700:#959cab;
  --am-dark-orange:#f7a440;
  --shadow:0 0 0 1px #2c323c;
  /* text colours that read on the dark cards (4.5:1+): red text, green text; brand red stays for button fills */
  --am-red-text:#ff6b70;
  --am-green:#3fc173;
  color-scheme:dark;
  scroll-padding-bottom:116px; /* a focused item never hides under the bottom tab bar */
}
.gym body{background:#1a1e25;color:#f4f5f7}
/* main logo, writing turned white for dark (made from MainLogo-01.png) */
.gym .portal-header img{content:url("/static/img/MainLogo-01-dark.png")}
.gym a[aria-label^="Back to"]{background:#2e343e!important}
.gym .bottom-tabs{background:#111418;border-top-color:#2c323c}
.gym .bottom-tabs a{color:#959cab}
.gym .bottom-tabs a.active{color:#fff}
.gym .bottom-tabs a.active svg{color:var(--am-red)}

/* Chat tab, middle of every app bar (Amr 19 Oct: "shown clearly"). Unread: red count on the icon.
   Outside chat screens the nav has .tabs-raised: a raised round red button (Amr picked Look 2). */
.bottom-tabs .tab-ico{position:relative;display:inline-flex}
:root{--tabs-raise:32px} /* how far the raised Chat button sticks up above the bar: floating bars and pop-ups sit above it */
:root:not(:has(.bottom-tabs.tabs-raised)){--tabs-raise:0px} /* chat screens, partner app, pages with no bar */

.bottom-tabs .tab-chat .tab-badge{top:-8px;right:-13px;background:#d81920;box-shadow:0 0 0 2px #111418;font-size:12px;font-weight:700;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box}
.bottom-tabs.tabs-raised{overflow:visible}
.bottom-tabs.tabs-raised .tab-chat .tab-ico{width:56px;height:56px;margin-top:-34px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--am-red);box-shadow:0 0 0 4px #111418,0 6px 16px rgba(227,30,36,.35)}
.gym .bottom-tabs.tabs-raised .tab-chat svg,.gym .bottom-tabs.tabs-raised .tab-chat.active svg{color:#fff;width:26px;height:26px}
.bottom-tabs.tabs-raised .tab-chat.active::before{display:none}
.gym .bottom-tabs.tabs-raised .tab-chat{color:#fff}
.bottom-tabs.tabs-raised .tab-chat .tab-badge{top:-4px;right:-6px;background:#fff!important;color:#c5161c}
.bottom-tabs.tabs-raised .tab-chat.active .tab-ico{box-shadow:0 0 0 4px #111418,0 0 0 6px #fff}
.bottom-tabs.tabs-raised .tab-chat:focus-visible{outline:none}
.bottom-tabs.tabs-raised .tab-chat:focus-visible .tab-ico{outline:2px solid #fff;outline-offset:4px}

/* big dark cards stay dark (they used black → would turn light) */
.gym .portal-hero{background:linear-gradient(135deg,#111418 35%,#4a1c21)!important;box-shadow:0 0 0 1px #2c323c}
.gym .portal-hero h1{color:#fff}.gym .portal-hero p{color:#959cab}
.gym .btn{background:#2e343e;color:#f4f5f7}
.gym .btn-primary{background:var(--am-red-btn);color:#fff}
.gym .btn-outline{background:transparent;color:#f4f5f7;border-color:#3a414c}
.gym .day-pill.selected{background:#f4f5f7;color:#1a1e25}
.gym .day-pill.selected .dow{color:#3a414c}
.gym .filter-pill select{background:#2e343e}

/* typing boxes */
.gym input:not([type=checkbox]):not([type=radio]):not([type=range]),.gym select,.gym textarea{background:#1a1e25;color:#f4f5f7;border-color:#3a414c}
.gym input::placeholder,.gym textarea::placeholder{color:#6f7684}


/* Places built as "black box, white text" must stay dark (the swap above would flip them) */
.gym [style*="background:var(--am-black)"],.gym [style*="background: var(--am-black)"]{background:#111418!important}
.gym [style*="color:var(--am-white)"],.gym [style*="color: var(--am-white)"]{color:#fff!important}
.gym .pass-header,.gym .webshop-cart-bar,.gym .purchase-thumb-count,.gym .tile-edit-bar,
.gym .avatar-placeholder,.gym .gs-card-thumb,.gym .lightbox-overlay .lightbox-close{background-color:#111418;color:#fff}
.gym .btn-danger,.gym .pass-footer,.gym .service-card-body{color:#fff}
.gym .type-pill.selected,.gym .period-pill.active,.gym .calendar-grid .cal-day.selected{background:#f4f5f7;color:#1a1e25}
/* the QR code stays black on white so the front-desk scanner reads it */
.gym .pass-body img{background:#fff;padding:10px;border-radius:12px}

/* badges whose text colour is too dark for the dark page (Coach / Sales / Partner apps use them a lot) */
.gym .badge-amber{color:#f7a440}
.gym .badge-blue{background:rgba(96,145,255,.16);color:#8fb2ff}
.gym .badge-dark-red{background:rgba(237,28,36,.16);color:#ff7a7f}
.gym .badge-green,.gym .status-ok{color:#3fc173}
.gym .badge-gray{background:#2e343e}
/* Thumbnails without a photo set background-color:var(--am-black) inline, which is light in the dark theme
   (white letter on a white square). A photo still shows: it's a background-image on top of this colour. */
.gym .gs-card-thumb{background-color:#111418 !important;color:#fff}

/* ---- readable on dark (UI audit 2026-10-05) ---- */
/* links and red text: the brand red is 3.3:1 on these cards; this lighter red is 5.3:1 */
/* (no blanket ".gym a" colour: home tiles and cards are links too, and they must keep their own white labels.
   Plain text links already get the readable red through --am-red-text in style.css.) */
.gym [style*="color:var(--am-red)"]:not([style*="background-color:var(--am-red)"]):not([style*="background-color: var(--am-red)"]),
.gym [style*="color: var(--am-red)"]:not([style*="background-color:var(--am-red)"]):not([style*="background-color: var(--am-red)"]){color:var(--am-red-text)!important}
.gym .tab-btn.active{color:#f4f5f7}
.gym .badge-red{background:rgba(237,28,36,.18);color:#ff7a7f}
.gym .status-err{background:rgba(237,28,36,.16);color:#ff8a8e}
.gym .status-warn{background:rgba(247,164,64,.16);color:#f7c27a}
/* one clear focus ring on dark */
.gym :focus-visible{outline:2px solid #f4f5f7;outline-offset:2px}
.gym input:focus,.gym select:focus,.gym textarea:focus{border-color:#f4f5f7;outline:none}
.gym input:focus-visible,.gym select:focus-visible,.gym textarea:focus-visible{outline:2px solid #f4f5f7;outline-offset:1px}
/* white text written as var(--am-white) on red pills turns dark here: keep it white */
.gym .type-pill.selected[style*="--am-red"],.gym .day-pill.selected[style*="--am-red"]{color:#fff}

/* ---- UI audit 2026-10-06 (client portal) ---- */
/* main red button: same red as the Training tab's, white text 5.15:1 */
:root.gym{--am-red-btn:#d81920}

/* ---- UI fix round 2 (2026-10-06, client portal) ---- */
/* back arrow and the Charts / Table switch: 44 px tap targets */
.gym .app-back{width:44px;height:44px}
.gym .as-seg.hx-switch a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
/* nothing under 12 px */
.gym .day-pill .dow,.gym .service-card-type{font-size:12px}

/* ---- Header logo, same in all 4 apps (Amr, 2026-10-06, option 1) ----
   The A mark (a real cropped image, logo-mark.png) beside "ATHLETIC MISSION" in Anton on one line.
   The mark is about twice the height of the capitals so its thin strokes still read strong. */
.app-logo{justify-self:center;display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 4px;color:var(--am-black);text-decoration:none}
.app-logo:hover{text-decoration:none}
.app-mark{flex:none;display:block;width:38px;height:34px;background:url("/static/img/logo-mark.png") no-repeat center/contain}
.app-word{font-family:var(--font-display);font-size:18px;line-height:1;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:var(--am-black)}