@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Fira+Sans+Condensed:ital,wght@0,600;0,700;0,800;1,700&display=swap');

/* =========================================
   1. GLOBAL SETUP & DTHA BRAND PALETTE
   ========================================= */
:root {
  --font-base: 'Barlow', sans-serif;
  --font-display: 'Fira Sans Condensed', sans-serif;
  --color-bg: #ffffff;
  --color-teal: #4aa8b1;
  --color-teal-mid: #46858b;
  --color-teal-dark: #436265;
  --color-text: #3f3f3f;
  --color-red: #c0392b;

  --cursor-puck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><ellipse cx='14' cy='17' rx='11' ry='5.5' fill='%23111111'/><path d='M3 11 L3 17 A 11 5.5 0 0 0 25 17 L 25 11 Z' fill='%23222222'/><ellipse cx='14' cy='11' rx='11' ry='5.5' fill='%233f3f3f'/><ellipse cx='14' cy='11' rx='9' ry='4.2' fill='%231f1f1f'/><ellipse cx='14' cy='11' rx='3.5' ry='1.5' fill='%234aa8b1'/></svg>") 14 11, auto;
  --cursor-puck-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><ellipse cx='14' cy='17' rx='11' ry='5.5' fill='%230a0a0a'/><path d='M3 11 L3 17 A 11 5.5 0 0 0 25 17 L 25 11 Z' fill='%23181818'/><ellipse cx='14' cy='11' rx='11' ry='5.5' fill='%234aa8b1'/><ellipse cx='14' cy='11' rx='9' ry='4.2' fill='%23202020'/><ellipse cx='14' cy='11' rx='4' ry='1.8' fill='%234aa8b1'/></svg>") 14 11, pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: var(--cursor-puck) !important;
}

[hidden] {
  display: none !important;
}

a,
button,
input,
textarea,
select,
option,
label,
summary,
[role="button"] {
  cursor: var(--cursor-puck-hover) !important;
}

/* Desktop Window Lock: Zero Scrolling on Desktop */
html,
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
}

/* =========================================
   2. 45 BPM ATHLETE HEART RATE CIRCLES
   ========================================= */
.pulse-circles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-core {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-teal);
  opacity: 0.35;
  animation: athleteHeartbeat 1.3333s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  will-change: transform, opacity;
  animation: expandFromCenter 8s linear infinite;
}

@keyframes athleteHeartbeat {
  0% { transform: scale(0.85); opacity: 0.45; }
  18% { transform: scale(1.45); opacity: 0.75; }
  32% { transform: scale(1.05); opacity: 0.5; }
  48% { transform: scale(1.25); opacity: 0.65; }
  100% { transform: scale(0.85); opacity: 0.45; }
}

@keyframes expandFromCenter {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  6% { opacity: 0.32; }
  75% { opacity: 0.12; }
  100% { transform: translate(-50%, -50%) scale(115); opacity: 0; }
}

/* =========================================
   3. PORTAL HEADER (WITH LOG OUT BUTTON)
   ========================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(74, 168, 177, 0.22);
}

.nav-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 25px;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}

.nav-logo {
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 4px 8px rgba(74, 168, 177, 0.28));
  transition: transform 0.25s ease;
}

.nav-brand:hover .nav-logo {
  transform: scale(1.05);
}

.nav-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1;
  text-shadow:
    0 1px 0 #2c2c2c,
    0 1.5px 0 #1c1c1c,
    0 2px 4px rgba(0, 0, 0, 0.18);
}

.portal-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.portal-user-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 8px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(74, 168, 177, 0.35);
  box-shadow: 0 4px 12px rgba(63, 63, 63, 0.08);
  user-select: none;
}

.portal-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 60%, var(--color-teal-dark) 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(74, 168, 177, 0.3);
  flex-shrink: 0;
}

.portal-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.portal-user-label {
  font-family: var(--font-base);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-mid);
}

.portal-user-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.portal-header-logout-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(67, 98, 101, 0.32);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(63, 63, 63, 0.07);
  transition: all 0.2s ease;
}

.portal-header-logout-btn:hover {
  background: var(--color-red);
  color: #ffffff;
  border-color: var(--color-red);
  box-shadow: 0 6px 16px rgba(192, 57, 43, 0.28);
  transform: translateY(-1px);
}

/* =========================================
   4. PORTAL GRID (TOP & BOTTOM ALIGNED, NO SCROLL)
   ========================================= */
.portal-layout {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  height: calc(100vh - 90px);
  margin: 90px auto 0;
  padding: 22px 48px;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 36px;
  align-items: stretch;
}

.portal-left-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.glass-box {
  position: relative;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(74, 168, 177, 0.34);
  border-radius: 20px;
  box-shadow:
    0 16px 36px rgba(63, 63, 63, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* =========================================
   5. LEFT BOX 1: PROFILE PICTURE, STATUS & MEMBER BADGE
   ========================================= */
.profile-summary-box {
  padding: 18px 20px;
}

.profile-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(74, 168, 177, 0.22);
}

.profile-avatar-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(74, 168, 177, 0.16));
  border: 2px solid rgba(74, 168, 177, 0.45);
  box-shadow: 0 8px 18px rgba(67, 98, 101, 0.14);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-img.is-logo-fallback {
  width: 74%;
  height: 74%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.profile-avatar-upload {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: rgba(63, 63, 63, 0.78);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 3px 0;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.profile-avatar-wrap:hover .profile-avatar-upload {
  opacity: 1;
}

.profile-avatar-upload:hover {
  background: var(--color-teal-dark);
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.profile-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-teal-mid);
}

.profile-name {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Side-by-Side Status Badge + Member/Non-Member Badge */
.account-status-wrap {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.status-badge,
.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 30px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.is-active {
  background: rgba(39, 174, 96, 0.14);
  color: #1e8449;
  border: 1px solid rgba(39, 174, 96, 0.35);
}

.status-badge.is-incomplete {
  background: rgba(230, 126, 34, 0.15);
  color: #b95804;
  border: 1px solid rgba(230, 126, 34, 0.38);
}

.status-badge.is-suspended {
  background: rgba(192, 57, 43, 0.14);
  color: #a93226;
  border: 1px solid rgba(192, 57, 43, 0.35);
}

.status-badge.is-canceled {
  background: rgba(63, 63, 63, 0.12);
  color: #555555;
  border: 1px solid rgba(63, 63, 63, 0.28);
}

/* Member vs Non-Member Badge Right Beside Status */
.member-badge.is-member {
  background: rgba(74, 168, 177, 0.18);
  color: var(--color-teal-dark);
  border: 1px solid rgba(74, 168, 177, 0.45);
}

.member-badge.is-non-member {
  background: rgba(63, 63, 63, 0.09);
  color: #555555;
  border: 1px solid rgba(63, 63, 63, 0.25);
}

.profile-contact-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(74, 168, 177, 0.22);
}

.profile-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
}

.contact-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
  flex-shrink: 0;
}

.contact-value {
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-wallet-box {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(74, 168, 177, 0.14) 0%, rgba(67, 98, 101, 0.08) 100%);
  border: 1px solid rgba(74, 168, 177, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-wallet-box.is-negative {
  background: rgba(192, 57, 43, 0.1);
  border-color: rgba(192, 57, 43, 0.4);
}

.wallet-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-teal-dark);
}

.wallet-rate-tag {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.75);
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid rgba(74, 168, 177, 0.3);
}

.wallet-balance-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.wallet-credits {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.wallet-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.profile-wallet-box.is-negative .wallet-number,
.profile-wallet-box.is-negative .wallet-cad-equiv {
  color: #a93226;
}

.wallet-unit {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-teal-mid);
}

.wallet-cad-equiv {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-teal-dark);
}

/* Admin DTHA Stats Box (Replaces Wallet for Admins) */
.admin-dtha-stats-box {
  background: linear-gradient(135deg, rgba(47, 62, 70, 0.12) 0%, rgba(74, 168, 177, 0.1) 100%);
  border-color: rgba(47, 62, 70, 0.3);
}

.admin-stats-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.admin-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
}

.admin-stat-label {
  font-weight: 700;
  color: var(--color-teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* =========================================
   6. LEFT BOX 2: PORTAL NAVIGATION MENU
   ========================================= */
.portal-menu-box {
  padding: 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.portal-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(74, 168, 177, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.portal-menu-link:hover {
  background: rgba(74, 168, 177, 0.12);
  border-color: rgba(74, 168, 177, 0.28);
  color: var(--color-teal-dark);
}

.portal-menu-link:hover .menu-indicator {
  background: var(--color-teal);
}

.portal-menu-link.is-active {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 65%, var(--color-teal-dark) 100%);
  color: #ffffff;
  border-color: var(--color-teal-dark);
  box-shadow: 0 6px 14px rgba(74, 168, 177, 0.28);
}

.portal-menu-link.is-active .menu-indicator {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.portal-menu-spacer {
  height: 14px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.portal-menu-spacer::after {
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 168, 177, 0.42), transparent);
}

/* =========================================
   7. RIGHT COLUMN: DYNAMIC WORKSPACE BOX
   ========================================= */
.portal-workspace-box {
  padding: 20px 26px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workspace-view {
  display: none;
  height: 100%;
  position: relative;
}

.workspace-view.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  animation: fadeWorkspace 0.22s ease;
}

/* Keeps Client Players Overview, Quote Band, and Updates spaced exactly as 3 direct flex items */
.dashboard-client-top-wrap:not([hidden]) {
  display: contents;
}

@keyframes fadeWorkspace {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.workspace-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workspace-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.workspace-eyebrow {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-teal-mid);
  margin-bottom: 2px;
}

.workspace-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  line-height: 1;
}

.workspace-link-btn {
  background: none;
  border: none;
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: color 0.2s ease;
}

.workspace-link-btn:hover {
  color: var(--color-teal);
}

.btn-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.92em;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-0.5px);
}

.workspace-quote-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0;
  flex-shrink: 0;
}

.workspace-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(74, 168, 177, 0.1), rgba(74, 168, 177, 0.45), rgba(74, 168, 177, 0.1));
}

.workspace-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-teal-dark);
  text-align: center;
  line-height: 1.3;
  padding: 0 16px;
}

/* =========================================
   8. DASHBOARD (CLIENT & ADMIN SEARCH / INSPECTOR)
   ========================================= */
.dashboard-players-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.player-profile-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(74, 168, 177, 0.32);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(63, 63, 63, 0.05);
}

.player-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(74, 168, 177, 0.2);
}

.player-slot-tag {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-teal-mid);
}

.player-card-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  line-height: 1.1;
}

.player-category-pill {
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(74, 168, 177, 0.15);
  border: 1px solid rgba(74, 168, 177, 0.35);
  color: var(--color-teal-dark);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.player-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}

.player-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.meta-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
}

.meta-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-profile-card.is-empty-slot {
  background: rgba(255, 255, 255, 0.42);
  border: 1.5px dashed rgba(74, 168, 177, 0.42);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  gap: 5px;
}

.empty-slot-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
}

.empty-slot-sub {
  font-size: 0.76rem;
  color: var(--color-text);
  opacity: 0.75;
  max-width: 260px;
  margin-bottom: 2px;
}

/* Admin Search & Profile Inspector Styles */
.dashboard-admin-top-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.admin-search-row-wrap {
  position: relative;
  width: 100%;
}

.admin-search-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search-input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 38px;
  border-radius: 12px;
  border: 1.5px solid rgba(74, 168, 177, 0.45);
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--font-base);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
  outline: none;
  box-shadow: 0 4px 12px rgba(63, 63, 63, 0.05);
}

.admin-search-input:focus {
  border-color: var(--color-teal);
}

.admin-search-row-wrap .filter-icon {
  position: absolute;
  left: 12px;
  font-size: 1.05rem;
  color: var(--color-teal-dark);
}

.admin-search-clear-btn {
  position: absolute;
  right: 12px;
  border: none;
  background: none;
  font-size: 1.3rem;
  font-weight: 800;
  color: #7f8c8d;
}

.admin-search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1.5px solid var(--color-teal);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(35, 48, 50, 0.2);
  z-index: 150;
  list-style: none;
}

.admin-search-result-item {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-base);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
}

.admin-search-result-item:hover {
  background: rgba(74, 168, 177, 0.15);
  color: var(--color-teal-dark);
}

.admin-no-account-banner {
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(74, 168, 177, 0.4);
  border-radius: 14px;
  padding: 14px 18px;
}

.admin-banner-sub {
  font-size: 0.8rem;
  line-height: 1.42;
  color: var(--color-text);
  margin-top: 4px;
  opacity: 0.85;
}

.admin-inspected-account {
  background: rgba(255, 255, 255, 0.86);
  border: 1.5px solid var(--color-teal);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(74, 168, 177, 0.12);
}

.admin-inspected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74, 168, 177, 0.22);
}

.admin-inspected-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-inspected-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-status-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-status-feedback {
  font-size: 0.74rem;
  font-weight: 800;
  color: #1e8449;
}

.admin-status-toggle-btn {
  padding: 5px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.admin-status-toggle-btn.is-set-active {
  background: rgba(39, 174, 96, 0.16);
  color: #1e8449;
  border-color: rgba(39, 174, 96, 0.4);
}

.admin-status-toggle-btn.is-set-active:hover {
  background: #27ae60;
  color: #ffffff;
}

.admin-status-toggle-btn.is-set-suspended {
  background: rgba(192, 57, 43, 0.14);
  color: var(--color-red);
  border-color: rgba(192, 57, 43, 0.35);
}

.admin-status-toggle-btn.is-set-suspended:hover {
  background: var(--color-red);
  color: #ffffff;
}

/* =========================================
   9. DASHBOARD BOTTOM: UPDATES & NEWS
   ========================================= */
.updates-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.updates-table-wrap {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 14px;
  overflow: hidden;
}

.updates-table-head,
.update-row {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1.8fr 96px;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
}

.updates-table-head {
  background: rgba(74, 168, 177, 0.12);
  border-bottom: 1px solid rgba(74, 168, 177, 0.25);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-dark);
}

.updates-table-body {
  display: flex;
  flex-direction: column;
}

.update-row {
  border-bottom: 1px solid rgba(74, 168, 177, 0.14);
  font-size: 0.84rem;
  transition: background 0.18s ease;
}

.update-row:last-child {
  border-bottom: none;
}

.update-row:hover {
  background: rgba(74, 168, 177, 0.06);
}

.update-player {
  font-weight: 800;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.update-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5c6b6d;
  white-space: nowrap;
}

.update-subject {
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subject-color-black { color: var(--color-text); }
.subject-color-teal { color: var(--color-teal); }
.subject-color-red { color: var(--color-red); }

.col-action {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.update-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid var(--color-teal-dark);
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 8px rgba(74, 168, 177, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.update-view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(74, 168, 177, 0.32);
}

/* Admin Feed Edit / Delete Action Buttons */
.admin-row-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(67, 98, 101, 0.35);
  background: #ffffff;
  color: var(--color-text);
  font-weight: 800;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-row-action-btn.is-delete:hover {
  background: var(--color-red);
  color: #ffffff;
  border-color: var(--color-red);
}

.admin-row-action-btn.is-edit:hover {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal);
}

.updates-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
}

.pagination-info {
  font-size: 0.75rem;
  color: var(--color-teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid rgba(74, 168, 177, 0.35);
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font-base);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text);
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled),
.page-btn.is-active {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}

/* =========================================
   10. 3D BUTTONS, ADMIN MODALS & US-LETTER PDF MODAL
   ========================================= */
.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-teal-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-portal {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 100%);
  color: #ffffff;
  box-shadow: 0 4px 0 var(--color-teal-dark), 0 8px 16px rgba(74, 168, 177, 0.28);
}

.btn-inquiry {
  background: #ffffff;
  color: var(--color-text);
  border-color: rgba(67, 98, 101, 0.35);
  box-shadow: 0 4px 0 var(--color-teal-dark), 0 8px 16px rgba(63, 63, 63, 0.1);
}

.btn-3d:hover { transform: translateY(-1px); }
.btn-3d:active { transform: translateY(2px); }

.btn-header-portal-style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid #2d494c;
  background: linear-gradient(180deg, var(--color-teal) 0%, var(--color-teal-mid) 55%, var(--color-teal-dark) 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 4px 0 #2b4447,
    0 8px 18px rgba(67, 98, 101, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-header-portal-style:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #2b4447, 0 12px 22px rgba(67, 98, 101, 0.38);
}

/* Admin Circle Icon Buttons (+ and Pen) */
.admin-icon-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-circle-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal-dark);
  background: #ffffff;
  color: var(--color-teal-dark);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.admin-circle-icon-btn:hover,
.admin-circle-icon-btn.is-active {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal-dark);
}

.admin-circle-icon-btn.is-plus-btn {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 100%);
  color: #ffffff;
  font-size: 1.15rem;
}

/* Admin Feed & Session Modal Forms */
.admin-modal-wide {
  max-width: 540px !important;
}

.admin-modal-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.admin-modal-form .pi-input {
  height: 36px;
  font-size: 0.84rem;
}

.admin-two-col-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-file-input {
  padding-top: 5px !important;
}

.admin-file-hint {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-teal-dark);
}

.admin-form-error {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-red);
  min-height: 1.1em;
}

/* Unified US-Letter Modal Viewer */
.letter-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.letter-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.letter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 39, 41, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.us-letter-modal-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 790px;
  max-height: 94vh;
  overflow-y: auto;
  background: rgba(242, 247, 248, 0.98);
  border: 1px solid rgba(74, 168, 177, 0.45);
  border-radius: 18px;
  padding: 20px 26px 26px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32);
}

.us-letter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 42px;
}

.us-letter-format-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
}

.us-letter-page {
  width: 100%;
  max-width: 720px;
  min-height: 932px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(67, 98, 101, 0.25);
  border-radius: 4px;
  padding: 44px 48px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.letter-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(63, 63, 63, 0.1);
  color: var(--color-text);
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.letter-modal-close:hover {
  background: var(--color-teal);
  color: #ffffff;
}

.letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-teal);
}

.letter-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.letter-logo {
  height: 52px;
  width: auto;
  mix-blend-mode: multiply;
}

.letter-academy-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.letter-academy-sub {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-mid);
}

.letter-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.letter-doc-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(74, 168, 177, 0.15);
  color: var(--color-teal-dark);
}

.letter-date {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
}

.letter-recipient-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 24px;
  padding: 12px 16px;
  background: #f6fafa;
  border-left: 4px solid var(--color-teal-dark);
  border-radius: 6px;
  font-size: 0.9rem;
}

.recipient-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
  margin-right: 6px;
}

.letter-body {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.letter-footer-signoff {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(67, 98, 101, 0.18);
}

.signoff-line {
  width: 190px;
  height: 1.5px;
  background: var(--color-text);
  margin-bottom: 8px;
}

.signoff-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-text);
}

.signoff-org {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-teal-dark);
}

.letter-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================
   11. SCHEDULE & BOOKING (3-DAY VIEW, ROSTER MODAL)
   ========================================= */
#view-schedule.workspace-view.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  overflow: hidden;
}

.schedule-calendar-section {
  flex: 0 0 66%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.schedule-toolbar-left,
.schedule-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-nav-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(74, 168, 177, 0.45);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-teal-dark);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.cal-nav-arrow:hover {
  background: var(--color-teal);
  color: #ffffff;
  border-color: var(--color-teal-dark);
}

.schedule-filter-dropdown {
  position: relative;
}

.schedule-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(74, 168, 177, 0.45);
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-base);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0 3px 10px rgba(63, 63, 63, 0.06);
}

.filter-icon {
  color: var(--color-teal-dark);
  font-size: 0.95rem;
}

.filter-caret {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-teal-dark);
}

.schedule-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(74, 168, 177, 0.4);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 30px rgba(35, 48, 50, 0.16);
  z-index: 120;
  display: none;
}

.schedule-filter-dropdown.is-open .schedule-filter-menu {
  display: block;
}

.filter-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-base);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.filter-option:hover,
.filter-option.is-selected {
  background: rgba(74, 168, 177, 0.14);
  color: var(--color-teal-dark);
}

.color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-blue   { background: #1e62d0; }
.dot-green  { background: #1f8b4c; }
.dot-orange { background: #d96b14; }
.dot-yellow { background: #d4a017; }
.dot-grey   { background: #5c6770; }

.schedule-date-range-label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal-dark);
  min-width: 165px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.calendar-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(67, 98, 101, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.calendar-header-grid {
  display: grid;
  grid-template-columns: 86px repeat(3, minmax(0, 1fr));
  background: #2f3e46;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.cal-head-cell {
  padding: 8px 10px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cal-head-cell:last-child {
  border-right: none;
}

.cal-head-cell.is-today {
  background: linear-gradient(180deg, rgba(74, 168, 177, 0.38) 0%, rgba(47, 62, 70, 0.9) 100%);
}

.cal-head-day {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-head-date {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}

.calendar-body-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.calendar-body-scroll::-webkit-scrollbar { width: 6px; }
.calendar-body-scroll::-webkit-scrollbar-thumb {
  background: rgba(67, 98, 101, 0.35);
  border-radius: 10px;
}

.calendar-hour-row {
  display: grid;
  grid-template-columns: 86px repeat(3, minmax(0, 1fr));
  min-height: 104px;
  border-bottom: 1px solid rgba(67, 98, 101, 0.14);
}

.calendar-hour-row:last-child {
  border-bottom: none;
}

.cal-time-cell {
  background: #f1f6f6;
  border-right: 1px solid rgba(67, 98, 101, 0.18);
  padding: 8px 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #526366;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.2;
}

.cal-day-slot {
  border-right: 1px solid rgba(67, 98, 101, 0.14);
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: stretch;
  background: rgba(244, 249, 249, 0.45);
}

.cal-day-slot:last-child {
  border-right: none;
}

.cal-session-card {
  position: relative;
  border-radius: 8px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  min-width: 0;
  overflow: hidden;
}

.cal-session-card.type-on-ice { background: linear-gradient(145deg, #1b64d8 0%, #14499e 100%); }
.cal-session-card.type-dryland { background: linear-gradient(145deg, #1f9653 0%, #156e3c 100%); }
.cal-session-card.type-shooting { background: linear-gradient(145deg, #e66c12 0%, #bd5204 100%); }
.cal-session-card.type-stickhandling { background: linear-gradient(145deg, #f07d1a 0%, #c95f06 100%); }
.cal-session-card.type-video { background: linear-gradient(145deg, #ebc026 0%, #c99c0e 100%); color: #262626; }
.cal-session-card.type-combine { background: linear-gradient(145deg, #64707a 0%, #465058 100%); }

.session-type-trigger {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-underline-offset: 2px;
}

.cal-session-card.type-video .session-type-trigger {
  text-decoration-color: rgba(0, 0, 0, 0.45);
}

.session-type-trigger:hover { opacity: 0.88; }

.session-card-focus {
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.18;
  margin-top: 2px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.session-card-venue {
  font-size: 0.63rem;
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-book-btn {
  margin-top: 3px;
  width: 100%;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.94);
  color: #1f2d30;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, transform 0.15s ease;
}

.session-book-btn:hover:not(:disabled) {
  background: #ffffff;
  transform: translateY(-1px);
}

.session-book-btn.is-booked {
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  border-color: transparent;
}

.session-info-popover {
  position: absolute;
  z-index: 2200;
  width: 280px;
  background: #ffffff;
  border: 1.5px solid var(--color-teal);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.session-info-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.popover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.popover-type-badge {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(74, 168, 177, 0.16);
  color: var(--color-teal-dark);
}

.popover-close-btn {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
}

.popover-focus-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 4px;
}

.popover-desc-text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 8px;
}

.popover-meta-footer {
  padding-top: 6px;
  border-top: 1px solid rgba(74, 168, 177, 0.22);
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-teal-dark);
}

.schedule-upcoming-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(74, 168, 177, 0.28);
}

.upcoming-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.upcoming-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}

.upcoming-policy-note {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-teal-dark);
}

.upcoming-booked-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.upcoming-booked-item {
  display: grid;
  grid-template-columns: 165px 1.1fr 1.2fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(74, 168, 177, 0.28);
  font-size: 0.8rem;
}

.upcoming-time-badge {
  font-weight: 800;
  color: var(--color-teal-dark);
  font-size: 0.76rem;
}

.upcoming-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--color-text);
}

.upcoming-focus {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-venue {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a696b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-cancel-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(192, 57, 43, 0.35);
  background: rgba(192, 57, 43, 0.08);
  color: var(--color-red);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.upcoming-cancel-btn:hover {
  background: var(--color-red);
  color: #ffffff;
}

.upcoming-empty {
  padding: 14px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #5c6b6d;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  border: 1px dashed rgba(74, 168, 177, 0.35);
}

.schedule-modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.schedule-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.schedule-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 48, 50, 0.58);
  backdrop-filter: blur(6px);
}

.schedule-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid rgba(74, 168, 177, 0.4);
  border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.schedule-modal-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 12px;
}

.book-modal-summary {
  background: #f4f9fa;
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.book-policy-box {
  background: rgba(230, 126, 34, 0.11);
  border-left: 4px solid #e67e22;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 12px;
}

.book-negative-warning {
  background: rgba(192, 57, 43, 0.12);
  border: 1px solid rgba(192, 57, 43, 0.45);
  border-left: 4px solid var(--color-red);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #922b21;
  font-weight: 700;
  margin-bottom: 14px;
}

.schedule-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Admin Roster Modal Styles */
.admin-roster-modal-card {
  max-width: 600px !important;
}

.admin-roster-meta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  margin-bottom: 12px;
}

.admin-roster-section {
  background: #f9fbfb;
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}

.admin-roster-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(74, 168, 177, 0.14);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
}

.admin-roster-players-list {
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-roster-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(74, 168, 177, 0.12);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-roster-row:last-child {
  border-bottom: none;
}

.admin-roster-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.admin-stat-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-stat-box-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  border-bottom: 1px solid rgba(74, 168, 177, 0.2);
  padding-bottom: 4px;
}

.admin-stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-stat-line.is-total {
  border-top: 1px dashed rgba(74, 168, 177, 0.3);
  padding-top: 3px;
  font-weight: 800;
  color: var(--color-teal-dark);
}

.admin-cancel-session-btn {
  margin-right: auto;
}

/* =========================================
   12. TESTS & EVALUATIONS BLURRED SCREEN
   ========================================= */
.evaluations-background-mockup {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  opacity: 0.45;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.eval-dummy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  flex: 1;
}

.eval-dummy-card {
  background: rgba(74, 168, 177, 0.12);
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 16px;
}

.inactive-lock-card.is-neutral-empty {
  border-color: var(--color-teal);
}

/* =========================================
   13. WALLET & BILLING
   ========================================= */
#view-wallet.workspace-view.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.wallet-topup-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.stripe-secure-badge {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(74, 168, 177, 0.14);
  border: 1px solid rgba(74, 168, 177, 0.35);
  color: var(--color-teal-dark);
}

.wallet-purchase-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.05fr;
  gap: 18px;
  align-items: stretch;
}

.wallet-packages-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.credit-packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
}

.credit-pkg-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(74, 168, 177, 0.32);
  border-radius: 14px;
  padding: 12px 16px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  text-align: left;
  font-family: var(--font-base);
  transition: all 0.18s ease;
}

.credit-pkg-card:hover {
  border-color: var(--color-teal);
  transform: translateY(-1px);
}

.credit-pkg-card.is-selected {
  background: linear-gradient(145deg, rgba(74, 168, 177, 0.18) 0%, rgba(255, 255, 255, 0.96) 100%);
  border-color: var(--color-teal-dark);
  box-shadow: 0 6px 16px rgba(74, 168, 177, 0.22);
}

.pkg-tag {
  font-family: var(--font-base);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-mid);
}

.pkg-credits {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}

.pkg-credits small {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}

.pkg-price {
  font-family: var(--font-base);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--color-teal-dark);
}

.pkg-price small {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5c6b6d;
}

.wallet-nonrefundable-disclaimer {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5c6b6d;
  padding-left: 2px;
}

.stripe-checkout-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(74, 168, 177, 0.36);
  border-radius: 16px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
}

.custom-credit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.custom-credit-field label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
}

.custom-credit-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-credit-input-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 105px 0 12px;
  border-radius: 9px;
  border: 1.5px solid rgba(67, 98, 101, 0.3);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-text);
  outline: none;
}

.custom-credit-input-wrap input:focus {
  border-color: var(--color-teal);
}

.input-unit-tag {
  position: absolute;
  right: 12px;
  font-family: var(--font-base);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-teal-mid);
  pointer-events: none;
}

.checkout-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px dashed rgba(74, 168, 177, 0.35);
  border-bottom: 1px dashed rgba(74, 168, 177, 0.35);
  font-size: 0.8rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  color: var(--color-text);
  font-weight: 600;
}

.summary-line.is-total {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-teal-dark);
  padding-top: 2px;
}

.stripe-pay-btn { width: 100%; }

.wallet-center-toast {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 6px;
  animation: fadeWorkspace 0.2s ease;
}

.toast-check-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(39, 174, 96, 0.16);
  color: #1e8449;
  border: 1.5px solid rgba(39, 174, 96, 0.45);
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
}

.toast-sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-teal-dark);
}

.wallet-invoices-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.invoices-table-head,
.invoice-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.95fr 0.95fr 0.8fr 105px;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
}

.invoices-table-head {
  background: rgba(74, 168, 177, 0.12);
  border-bottom: 1px solid rgba(74, 168, 177, 0.25);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-dark);
}

.invoice-row {
  border-bottom: 1px solid rgba(74, 168, 177, 0.14);
  font-size: 0.82rem;
}

.invoice-row:last-child { border-bottom: none; }

.invoice-id {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.invoice-credits { font-weight: 800; color: var(--color-teal-dark); }
.invoice-amount { font-weight: 800; color: var(--color-text); }

.invoice-paid-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(39, 174, 96, 0.14);
  color: #1e8449;
  border: 1px solid rgba(39, 174, 96, 0.32);
  width: fit-content;
}

.invoice-totals-table {
  margin-top: 18px;
  border-top: 2px solid var(--color-teal);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-size: 0.9rem;
}

.invoice-totals-row {
  display: flex;
  justify-content: space-between;
  width: 260px;
}

.invoice-totals-row.is-grand {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-teal-dark);
  border-top: 1px solid rgba(74, 168, 177, 0.3);
  padding-top: 6px;
}

/* =========================================
   14. SESSIONS OVERVIEW (4-COLUMN GUIDE)
   ========================================= */
#view-sessions.workspace-view.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  overflow: hidden;
}

.sessions-helper-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  background: rgba(74, 168, 177, 0.14);
  border: 1px solid rgba(74, 168, 177, 0.32);
  padding: 5px 12px;
  border-radius: 20px;
}

.sessions-columns-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.session-pillar-box {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(74, 168, 177, 0.3);
  border-radius: 16px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(63, 63, 63, 0.05);
  min-height: 0;
}

.pillar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(74, 168, 177, 0.2);
  flex-shrink: 0;
}

.pillar-color-bar {
  width: 5px;
  height: 30px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pillar-green .pillar-color-bar  { background: #1f8b4c; }
.pillar-orange .pillar-color-bar { background: #d96b14; }
.pillar-blue .pillar-color-bar   { background: #1e62d0; }
.pillar-grey .pillar-color-bar   { background: #5c6770; }

.pillar-eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-mid);
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  line-height: 1.1;
}

.pillar-items-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discipline-item-btn {
  width: 100%;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(67, 98, 101, 0.18);
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  transition: all 0.18s ease;
}

.discipline-name {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.discipline-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-teal-mid);
  opacity: 0.75;
  transform: translateY(-0.5px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.discipline-item-btn:hover {
  border-color: var(--color-teal);
  background: #ffffff;
  transform: translateX(2px);
}

.discipline-item-btn:hover .discipline-arrow {
  transform: translate(2px, -0.5px);
  opacity: 1;
}

.discipline-item-btn.is-active {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-mid) 100%);
  border-color: var(--color-teal-dark);
  box-shadow: 0 5px 12px rgba(74, 168, 177, 0.28);
}

.discipline-item-btn.is-active .discipline-name,
.discipline-item-btn.is-active .discipline-arrow {
  color: #ffffff;
  opacity: 1;
}

.session-definition-panel {
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 249, 250, 0.94) 100%);
  border: 1.5px solid rgba(74, 168, 177, 0.45);
  border-radius: 16px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: center;
}

.definition-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.definition-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.def-category-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 10px;
  border-radius: 20px;
  color: #ffffff;
  background: #1f8b4c;
}
.def-category-badge.badge-green  { background: #1f8b4c; }
.def-category-badge.badge-orange { background: #d96b14; }
.def-category-badge.badge-yellow { background: #c99c0e; }
.def-category-badge.badge-blue   { background: #1e62d0; }
.def-category-badge.badge-grey   { background: #5c6770; }

.def-item-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
}

.def-item-description {
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--color-text);
}

.definition-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid rgba(74, 168, 177, 0.3);
}

.def-transfer-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.def-transfer-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-dark);
}

.def-transfer-text {
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--color-text);
}

/* =========================================
   15. PLAYERS INFORMATION (UNIFIED CARDS & DOB CALENDAR)
   ========================================= */
#view-player-info.workspace-view.is-active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}

#view-player-info.workspace-view.is-active::-webkit-scrollbar { width: 5px; }
#view-player-info.workspace-view.is-active::-webkit-scrollbar-thumb {
  background: rgba(67, 98, 101, 0.28);
  border-radius: 8px;
}

.player-info-header { flex-shrink: 0; }
.player-edit-controls { display: flex; align-items: center; gap: 12px; }

.editing-mode-pill {
  display: none;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(39, 174, 96, 0.15);
  color: #1e8449;
  border: 1px solid rgba(39, 174, 96, 0.4);
}

#view-player-info.is-editing .editing-mode-pill {
  display: inline-flex;
  align-items: center;
}

.player-save-feedback { font-size: 0.74rem; font-weight: 800; color: var(--color-teal-dark); }
.player-save-feedback.is-error { color: var(--color-red); }

.pen-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--color-teal-dark);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.pen-edit-btn:hover { background: var(--color-teal); color: #ffffff; }

#view-player-info.is-editing .pen-edit-btn {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  color: #ffffff;
  border-color: #196f3d;
}

.pi-column-card {
  border-radius: 14px;
  padding: 10px 14px;
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pi-column-card.is-locked-surface {
  background: rgba(226, 238, 240, 0.72);
  border: 1.5px solid rgba(67, 98, 101, 0.24);
}

#view-player-info.is-editing .pi-column-card.is-locked-surface {
  background: #ffffff;
  border-color: var(--color-teal);
  box-shadow: 0 8px 20px rgba(74, 168, 177, 0.15);
}

.pi-column-card.is-medical-alert,
#view-player-info.is-editing .pi-column-card.is-medical-alert {
  background: rgba(243, 156, 18, 0.12) !important;
  border: 2px solid #e67e22 !important;
  box-shadow: 0 6px 18px rgba(230, 126, 34, 0.16) !important;
}

.pi-alert-wrap { display: inline-flex; align-items: center; gap: 6px; }

.high-alert-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e67e22;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.med-alert-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d35400;
  background: #e67e22;
  color: #ffffff;
  font-family: var(--font-base);
  font-size: 0.74rem;
  font-weight: 800;
  font-style: normal !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.med-alert-info-btn:hover { background: #d35400; transform: scale(1.08); }

.pi-players-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(67, 98, 101, 0.16);
}

.pi-card-header-right { display: flex; align-items: center; gap: 8px; }

.pi-slot-label {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal-dark);
}

.pi-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.pi-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.pi-field label,
.pi-med-header label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-teal-dark);
}

.pi-input {
  width: 100%;
  height: 29px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(67, 98, 101, 0.25);
  background: #ffffff;
  font-family: var(--font-base);
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--color-text);
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pi-input:disabled {
  background: rgba(213, 227, 230, 0.65);
  color: #46575a;
  border-color: rgba(67, 98, 101, 0.18);
}

#view-player-info.is-editing .pi-input:not(:disabled) {
  background: #ffffff;
  border-color: rgba(74, 168, 177, 0.65);
}

.pi-integrated-medical {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(67, 98, 101, 0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pi-med-textarea {
  height: 54px;
  padding: 6px 9px;
  resize: none;
  line-height: 1.35;
}

.portal-select-wrap,
.portal-dob-wrap {
  position: relative;
  width: 100%;
}

.portal-select-trigger,
.portal-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.picker-Shared-icon { font-size: 0.7rem; color: var(--color-teal-dark); }

.portal-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  list-style: none;
  background: #ffffff;
  border: 1.5px solid var(--color-teal);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 12px 26px rgba(35, 48, 50, 0.18);
  z-index: 300;
  display: none;
}

.portal-select-wrap.is-open .portal-select-menu { display: block; }

.portal-select-option {
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-base);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.portal-select-option:hover,
.portal-select-option.is-selected {
  background: rgba(74, 168, 177, 0.16);
  color: var(--color-teal-dark);
}

.portal-dob-popover {
  position: absolute;
  z-index: 2500;
  width: 260px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--color-teal);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 38px rgba(35, 48, 50, 0.24);
  display: none;
}

.portal-dob-popover.is-open { display: block; }

.dob-cal-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.dob-cal-select {
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(74, 168, 177, 0.45);
  background: #f4fafa;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-teal-dark);
}

.dob-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-teal-mid);
  margin-bottom: 4px;
}

.dob-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dob-day-btn {
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-base);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text);
}

.dob-day-btn:hover { background: rgba(74, 168, 177, 0.18); color: var(--color-teal-dark); }
.dob-day-btn.is-selected { background: var(--color-teal); color: #ffffff; }

.p2-empty-state {
  height: 100%;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.p2-empty-text { font-size: 0.78rem; font-weight: 600; color: #556669; }

.p2-remove-btn {
  border: none;
  background: rgba(192, 57, 43, 0.12);
  color: var(--color-red);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
}

.ec-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ec-warning-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(230, 126, 34, 0.16);
  color: #b95804;
  border: 1px solid rgba(230, 126, 34, 0.4);
}

.ec-add-contact-btn {
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-teal-dark);
  background: rgba(74, 168, 177, 0.15);
  color: var(--color-teal-dark);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ec-add-contact-btn:hover { background: var(--color-teal); color: #ffffff; }

.pi-ec-row-top {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr 1.55fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.pi-ec-row-address {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 0.65fr 0.85fr;
  gap: 8px;
}

.ec-secondary-block {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(67, 98, 101, 0.25);
}

.ec-sub-header { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; }

.pi-agreements-card { padding: 9px 18px; }

.pi-agreements-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pi-agreement-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.pi-checkbox { width: 15px; height: 15px; accent-color: var(--color-teal-dark); flex-shrink: 0; }

.pi-doc-link {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-base);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-teal-dark);
  text-decoration: underline;
}

.pi-doc-link:hover { color: var(--color-teal); }

.med-modal-body-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 18px;
}

/* =========================================
   16. INACTIVE & SUSPENDED BLUR LOCK OVERLAYS
   ========================================= */
.workspace-view.is-inactive-locked > *:not(.inactive-lock-overlay),
.workspace-view.is-suspended-locked > *:not(.inactive-lock-overlay) {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  opacity: 0.52;
}

.inactive-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.inactive-lock-card {
  max-width: 460px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #e67e22;
  border-radius: 18px;
  padding: 26px 28px;
  text-align: center;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.inactive-lock-card.is-suspended-card {
  border-color: var(--color-red);
  background: rgba(255, 248, 248, 0.97);
}

.inactive-lock-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
}

.inactive-lock-text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 6px;
}

/* =========================================
   17. US-LETTER PRINT MEDIA QUERY
   ========================================= */
@page { size: letter portrait; margin: 0.4in; }

@media print {
  body * { visibility: hidden; }
  #letter-modal, #printable-letter-sheet, #printable-letter-sheet * { visibility: visible; }
  #letter-modal { position: absolute; inset: 0; padding: 0; background: #ffffff; }
  .letter-modal-backdrop, .letter-modal-close, .us-letter-toolbar { display: none !important; }
  .us-letter-modal-frame, .us-letter-page {
    box-shadow: none !important; border: none !important; padding: 0 !important; max-width: 100% !important; min-height: auto !important;
  }
}

/* =========================================
   18. MULTI-PLAYER BOOKING SELECTOR & DYNAMIC CALENDAR COLS
   ========================================= */
.book-player-selector {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(74, 168, 177, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.book-player-selector-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal-dark);
}

.book-player-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(74, 168, 177, 0.35);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.book-player-option:hover:not(.is-already-booked) {
  border-color: var(--color-teal);
  background: rgba(74, 168, 177, 0.06);
}

.book-player-option.is-already-booked {
  opacity: 0.6;
  background: rgba(63, 63, 63, 0.05);
}

.book-player-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.book-player-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-teal-dark);
}

.book-player-slot-pill {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(74, 168, 177, 0.15);
  color: var(--color-teal-dark);
}

.upcoming-player-name-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(74, 168, 177, 0.16);
  color: var(--color-teal-dark);
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 4px;
}

/* Dynamic 2-Day (Tablet) and 1-Day (Phone) Calendar Grid Columns */
.calendar-header-grid[data-days="2"],
.calendar-body-scroll[data-days="2"] .calendar-hour-row {
  grid-template-columns: 74px repeat(2, minmax(0, 1fr)) !important;
}

.calendar-header-grid[data-days="1"],
.calendar-body-scroll[data-days="1"] .calendar-hour-row {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}


/* =========================================
   19. TABLET & PHONE BREAKPOINTS (<= 1024px ONLY)
   ========================================= */

@media (hover: none), (pointer: coarse) {
  *, *::before, *::after {
    cursor: auto !important;
  }
  a, button, input, textarea, select, option, label, summary, [role="button"] {
    cursor: pointer !important;
  }
}

/* -----------------------------------------
   A. TABLETS & SMALL LAPTOPS (<= 1024px)
   ----------------------------------------- */
@media (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .nav-container {
    padding: 0 clamp(14px, 3.5vw, 28px) !important;
  }

  /* CRITICAL: minmax(0, 1fr) prevents children from stretching the page wider than the screen */
  .portal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    margin-top: 90px !important;
    padding: 18px clamp(12px, 3vw, 28px) 44px !important;
    gap: 20px !important;
    overflow-x: hidden !important;
  }

  .portal-left-column,
  .portal-workspace-box,
  .workspace-view,
  .workspace-block,
  .glass-box {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .portal-left-column {
    height: auto !important;
    gap: 16px !important;
  }

  /* Compact 3-Column Navigation Bar on Tablets */
  .portal-menu-box {
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .portal-menu-list {
    display: contents !important;
  }

  .portal-menu-list[hidden],
  .portal-menu-item[hidden] {
    display: none !important;
  }

  .portal-menu-spacer {
    display: none !important;
  }

  .portal-menu-link {
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  /* Unlock Workspace Container & All Views on Tablet/Mobile */
  .portal-workspace-box {
    height: auto !important;
    overflow: visible !important;
    padding: 18px !important;
  }

  .workspace-view.is-active,
  #view-schedule.workspace-view.is-active,
  #view-wallet.workspace-view.is-active,
  #view-sessions.workspace-view.is-active,
  #view-player-info.workspace-view.is-active {
    height: auto !important;
    overflow: visible !important;
    gap: 20px !important;
  }

  /* Fix Tests & Evaluations + Inactive/Suspended Overlay Overflow */
  #view-evaluations.workspace-view.is-active {
    min-height: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 12px 0 !important;
  }

  #view-evaluations .evaluations-background-mockup {
    position: absolute !important;
    inset: 10px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #view-evaluations .eval-dummy-grid {
    grid-template-columns: 1fr !important;
  }

  #view-evaluations .inactive-lock-overlay {
    position: relative !important;
    inset: auto !important;
    padding: 12px 6px !important;
    width: 100% !important;
  }

  .workspace-view.is-inactive-locked,
  .workspace-view.is-suspended-locked {
    min-height: 360px !important;
    overflow: hidden !important;
  }

  .inactive-lock-overlay {
    padding: 14px !important;
  }

  .inactive-lock-card {
    width: 100% !important;
    max-width: 420px !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;
  }

  /* Schedule & Calendar on Tablet (2-Day View) */
  .schedule-calendar-section {
    flex: none !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .calendar-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .calendar-body-scroll {
    max-height: 440px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-hour-row.is-empty-hour {
    min-height: 44px !important;
  }

  .calendar-hour-row.is-empty-hour .cal-time-cell {
    align-items: center !important;
    padding: 4px 6px !important;
  }

  .cal-day-slot {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) !important;
  }

  .upcoming-booked-list {
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* Sessions Overview on Tablet (2x2 Pillar Grid + Stacked Definition Card) */
  .sessions-columns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .session-definition-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .definition-side {
    padding-left: 0 !important;
    padding-top: 12px !important;
    border-left: none !important;
    border-top: 1px dashed rgba(74, 168, 177, 0.35) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }

  /* Wallet & Players Information on Tablet */
  .wallet-purchase-grid,
  .pi-players-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .pi-ec-row-top,
  .pi-ec-row-address {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .pi-agreements-grid {
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
  }
}

/* -----------------------------------------
   B. LARGE PHONES & PORTRAIT TABLETS (<= 768px)
   ----------------------------------------- */
@media (max-width: 768px) {
  .nav-brand {
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .nav-title {
    font-size: clamp(0.92rem, 3.5vw, 1.25rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .portal-user-label {
    display: none !important;
  }

  .portal-user-pill {
    padding: 4px 10px 4px 5px !important;
    gap: 6px !important;
  }

  .portal-user-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }

  .portal-user-name {
    font-size: 0.85rem !important;
  }

  .portal-header-logout-btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.76rem !important;
  }

  .portal-workspace-box {
    padding: 14px !important;
  }

  .workspace-header-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .sessions-helper-pill {
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .dashboard-players-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-inspected-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .admin-status-controls {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Dashboard Updates Table -> Mobile Card Rows */
  .updates-table-head {
    display: none !important;
  }

  .update-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
    padding: 12px !important;
  }

  .update-subject {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
  }

  /* Schedule Toolbar Stacked Cleanly */
  .schedule-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .schedule-toolbar-left {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .schedule-filter-dropdown {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .schedule-filter-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .schedule-filter-menu {
    width: 100% !important;
  }

  .schedule-toolbar-right {
    width: 100% !important;
    justify-content: space-between !important;
    background: rgba(74, 168, 177, 0.09) !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(74, 168, 177, 0.28) !important;
  }

  .schedule-date-range-label {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 0.92rem !important;
  }

  /* Upcoming Booked Sessions -> Mobile Cards */
  .upcoming-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .upcoming-booked-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
    padding: 12px !important;
  }

  .upcoming-time-badge {
    grid-column: 1 / 2 !important;
    font-size: 0.76rem !important;
  }

  .upcoming-type-tag {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
  }

  .upcoming-focus {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    font-size: 0.82rem !important;
  }

  .upcoming-venue {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
  }

  .upcoming-cancel-btn,
  .upcoming-booked-item .update-view-btn {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    align-self: center !important;
    padding: 5px 11px !important;
  }

  /* Wallet Invoices Table -> Clean Mobile Receipt Cards */
  .invoices-table-head {
    display: none !important;
  }

  .invoice-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 10px !important;
    padding: 12px !important;
    align-items: center !important;
  }

  .invoice-id {
    grid-column: 1 / 2 !important;
    font-size: 0.9rem !important;
  }

  .invoice-row > span:nth-child(5) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    justify-self: end !important;
  }

  .invoice-row .update-date {
    grid-column: 1 / 2 !important;
    font-size: 0.75rem !important;
  }

  .invoice-credits {
    grid-column: 1 / 2 !important;
    font-size: 0.8rem !important;
  }

  .invoice-amount {
    grid-column: 1 / 2 !important;
    font-size: 0.86rem !important;
  }

  .invoice-row .col-action {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 5 !important;
    align-self: end !important;
  }

  /* Modals & US-Letter Viewer on Mobile */
  .letter-modal,
  .schedule-modal {
    padding: 10px !important;
  }

  .us-letter-modal-frame {
    padding: 14px 12px !important;
    max-height: 92vh !important;
  }

  .us-letter-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-right: 38px !important;
  }

  .letter-modal-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .letter-modal-actions .btn-3d {
    flex: 1 !important;
    min-width: 110px !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
  }

  .us-letter-page {
    padding: 20px 16px !important;
    min-height: auto !important;
  }

  .letter-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .letter-meta {
    align-items: flex-start !important;
  }

  .invoice-totals-row {
    width: 100% !important;
    max-width: 260px !important;
  }

  .schedule-modal-card {
    padding: 18px 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .admin-roster-stats-grid,
  .admin-two-col-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* -----------------------------------------
   C. PHONES (<= 640px) — 1-DAY CALENDAR & COMPACT UI
   ----------------------------------------- */
@media (max-width: 640px) {
  .navbar {
    height: 68px !important;
  }

  .nav-container {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .nav-brand {
    gap: 8px !important;
  }

  .nav-logo {
    height: 36px !important;
  }

  .nav-title {
    font-size: clamp(0.84rem, 3.6vw, 1.05rem) !important;
  }

  .portal-layout {
    margin-top: 68px !important;
    padding: 12px 10px 32px !important;
    gap: 14px !important;
  }

  /* 2-Column Navigation Tile Grid on Phones */
  .portal-menu-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .portal-menu-link {
    padding: 9px 10px !important;
    font-size: 0.78rem !important;
    gap: 7px !important;
  }

  /* 1-Day Calendar View on Phones */
  .calendar-header-grid,
  .calendar-body-scroll .calendar-hour-row {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  .calendar-body-scroll {
    max-height: 400px !important;
  }

  .calendar-hour-row {
    min-height: 92px !important;
  }

  .calendar-hour-row.is-empty-hour {
    min-height: 40px !important;
  }

  .cal-time-cell {
    font-size: 0.65rem !important;
    padding: 6px 4px !important;
  }

  .cal-day-slot {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .session-info-popover {
    width: calc(100% - 20px) !important;
    max-width: 280px !important;
  }

  /* Sessions Overview: 1 Column Pillars with 2-Column Discipline Buttons */
  .sessions-columns-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .pillar-items-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .discipline-item-btn {
    padding: 8px 10px !important;
    min-width: 0 !important;
  }

  .discipline-name {
    font-size: 0.75rem !important;
  }

  .definition-title-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .def-item-title {
    font-size: 1.1rem !important;
  }

  .definition-side {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .definition-side .btn-header-portal-style {
    width: 100% !important;
  }

  /* Wallet Credit Packages & Checkout Panel on Phones */
  .credit-packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .credit-pkg-card {
    padding: 10px 12px !important;
    min-height: 76px !important;
    min-width: 0 !important;
  }

  .pkg-credits {
    font-size: 1.18rem !important;
  }

  .pkg-credits small {
    font-size: 0.72rem !important;
  }

  .pkg-price {
    font-size: 0.76rem !important;
  }

  .stripe-checkout-panel {
    padding: 14px !important;
  }

  .stripe-pay-btn {
    font-size: 0.88rem !important;
    padding: 12px 14px !important;
  }

  /* Players Information Form Fields Stack Cleanly on Phones */
  .player-info-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .player-edit-controls {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .pen-edit-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .pi-fields-grid,
  .pi-ec-row-top,
  .pi-ec-row-address {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .pi-input {
    height: 36px !important;
    font-size: 0.85rem !important;
  }

  .pi-agreements-grid {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .pi-agreement-item {
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .updates-pagination {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .pagination-controls {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* -----------------------------------------
   D. SMALL PHONES (<= 480px)
   ----------------------------------------- */
@media (max-width: 480px) {
  .portal-user-info {
    display: none !important;
  }

  .portal-user-pill {
    padding: 4px !important;
  }

  .inactive-lock-title {
    font-size: 1.18rem !important;
  }

  .inactive-lock-text {
    font-size: 0.8rem !important;
  }

  .schedule-modal-actions {
    flex-direction: column-reverse !important;
  }

  .schedule-modal-actions .btn-3d {
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  .portal-menu-box,
  .credit-packages-grid,
  .pillar-items-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}