/* ==========================================================================
   /assets/css/ma_shared.css
   MatchAid — Shared Styles (GoDaddy)

   SECTIONS
   ─────────────────────────────────────────────────────────────────────────
    1.  Design Tokens (:root)
    2.  Base / Reset
    3.  App Shell Layout
    4.  Chrome — Header
    5.  Chrome — Footer Shell & Status Line
    6.  Chrome — Bottom Nav (Desktop Icon Bar)
    7.  Chrome — Footer Action Bar (Save / Cancel)
    8.  Chrome — Mobile Nav Hub (Navigate Button + Tray)
    9.  Multi-Panel Layout
   10.  Overlay Family (Drawer + Modal)
   11.  Actions Menu (deprecated shell + active maModal variant)
   12.  Cards
   13.  Pills & Chips
   14.  Buttons
   15.  Form Fields
   16.  Date Badge & Calendar
   17.  List Rows
   18.  Admin Picker
   19.  Misc (Empty State, Tab Panels)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {

  /* --- Typography --- */
  --fontFamilyBase: "Montserrat", Arial, sans-serif;
  --inputTextSize: 16px;
  --labelTextSize: 15px;

  /* --- Brand colors --- */
  --brandPrimary: #07432A;
  --brandSecondary: #3F7652;
  --brandColor3: #0066CC;
  --brandAccent: #0b5fff; /* 24a0ed or #0b5fff or 0066CC */
  --brandPrimaryText: #ffffff;
  --brandPrimaryTextMuted: rgba(255,255,255,.78);
  --brandSecondaryText: #ffffff;
  --danger: #c62828;
  --warn: #f6d365;
  --success: #0aa45c;

  /* --- Surfaces --- */
  --brandPrimaryBg: rgba(7,67,42,.08);
  --brandSecondaryBg: #ffffff;
  --surfaceApp: #f7f7f7;
  --surfaceChrome: #ffffff;

  /* Common ink/surface aliases (so components don't hardcode colors) */
  --bg: var(--surfaceChrome);
  --surface: var(--surfaceChrome);
  --ink: #111111;
  --mutedText: #3a3a3a;
  --border: var(--borderSubtle);

  /* --- Borders & shadows --- */
  --borderSubtle: rgba(0,0,0,.12);
  --shadowSubtle: 0 1px 0 rgba(0,0,0,.06);

  /* --- Spacing --- */
  --spaceSm: 6px;
  --spaceMd: 10px;

  /* --- Interaction --- */
  --pressedBg: rgba(0,0,0,.06);

  /* --- Radii --- */
  --controlRadius: 14px;
  --radiusMd: 10px;
  --radiusSq: 6px;
  --radiusLg: 12px;

  /* --- Controls --- */
  --controlBorder: var(--borderSubtle);

  /* --- Chrome Header --- */
  --chromePad: 10px;
  --chromeGap: 10px;
  --chromeHdrBg: #18422F;
  --chromeHdrBtnBg: #FFFFFF;
  --chromeHdrBtnText: var(--brandPrimary);
  --chromeHdrBtnBorder: rgba(0,0,0,.22);
  --chromeBg: var(--surfaceChrome);
  --chromeBorder: var(--borderSubtle);
  --chromeShadow: var(--shadowSubtle);
  --chromeTitleText: #FFFFFF;
  --chromeSubtitleText: rgba(255,255,255,.82);
  --chromeTitleSize: 18px;
  --chromeSubtitleSize: 12px;
  --chromeBtnFontSize: 18px;

  /* --- Chrome Status Line --- */
  --chromeStatusHeight: 24px;
  --chromeStatusPadY: 2px;
  --chromeStatusFontSize: 13px;
  --statusInfoBg: #ffffff;
  --statusInfoText: #1f2a37;
  --statusSuccessBg: var(--success);
  --statusSuccessText: #ffffff;
  --statusWarnBg: var(--warn);
  --statusWarnText: #111111;
  --statusDangerBg: var(--danger);
  --statusDangerText: #ffffff;

  /* --- Bottom Nav (icon bar) --- */
  --tabBarHeight: 56px;
  --tabBarBg: #ffffff;
  --tabItemText: #4b5563;
  --tabItemActiveText: var(--brandAccent);
  --tabItemFontSize: 11px;
  --navIconSize: 18px;

  /* --- Buttons --- */
  --btnHeight: 34px;
  --btnPadX: 12px;
  --btnRadius: var(--controlRadius);
  --btnBorder: var(--controlBorder);
  --btnFontSize: var(--fieldValueSize);
  --btnFontWeight: 800;
  --btnBg: var(--bg);
  --btnText: var(--ink);
  --btnPrimaryBg: var(--bg);
  --btnPrimaryText: var(--ink);
  --btnPrimaryBorder: var(--btnBorder);
  --btnSecondaryBg: var(--brandColor3);
  --btnSecondaryText: var(--brandPrimaryText);
  --btnSecondaryBorder: color-mix(in srgb, var(--brandSecondary) 70%, black);
  --btnLinkText: var(--brandAccent);
  --btnHoverBg: rgba(0,0,0,.04);
  --btnPressedBg: var(--pressedBg);

  /* --- Footer action bar (Save / Cancel) --- */
  --btnCancelBg: #e5e7eb;
  --btnCancelText: var(--ink);
  --btnCancelBorder: rgba(0, 0, 0, .18);
  --btnSaveBg: var(--brandAccent);
  --btnSaveText: #ffffff;
  --btnSaveBorder: color-mix(in srgb, var(--brandAccent) 70%, black);
  --ftrActionsPad: 10px;
  --ftrActionsGap: 10px;
  --ftrActionsBtnH: 44px;
  --ftrActionsBtnW: 200px;

  /* --- Pills / Chips --- */
  --pillRadius: 12px;
  --pillPadX: 10px;
  --pillPadY: 6px;
  --pillBg: rgba(0,0,0,.06);
  --pillText: var(--ink);
  --pillLabelText: var(--mutedText);
  --pillLabelSize: 10px;
  --pillValueSize: 12px;
  --pillValueWeight: 900;
  --pillMinHeight: 34px;
  --pillTitleSize: 11px;

  /* Choice chips */
  --choiceChipRadius: 12px;
  --choiceChipBorder: var(--controlBorder);
  --choiceChipBg: var(--surface);
  --choiceChipText: var(--ink);
  --choiceChipSelectedBg: var(--segmentSelectedBg);
  --choiceChipSelectedText: var(--segmentSelectedText);
  --choiceChipSelectedBorder: color-mix(in srgb, var(--segmentSelectedBg) 55%, black);

  /* Segmented controls */
  --chipHeight: 34px;
  --chipLabelSize: 12px;
  --chipLabelWeight: 800;
  --segmentSelectedBg: #F1D7B7;
  --segmentSelectedText: var(--ink);
  --segRadius: var(--controlRadius);
  --segBorder: var(--controlBorder);
  --segBg: var(--surface);
  --segBtnHeight: var(--chipHeight);
  --segBtnFontSize: 13px;
  --segBtnWeight: 800;
  --segBtnText: var(--mutedText);
  --segActiveBg: var(--segmentSelectedBg);
  --segActiveText: var(--segmentSelectedText);

  /* --- Overlays & Modals --- */
  --overlayBg: rgba(0,0,0,.35);
  --overlayZ: 99990;
  --overlayBgDim: var(--overlayBg);
  --overlayBlur: 2px;
  --modalSurface: var(--surfaceChrome);
  --modalMaxW: 520px;
  --modalMaxH: 88dvh;
  --modalViewportGap: 40px;
  --modalRadius: 18px;
  --modalShadow: 0 14px 34px rgba(0,0,0,.18);
  --modalHeaderBg: var(--brandSecondary);
  --modalHeaderText: var(--brandSecondaryText);
  --drawerRadius: var(--controlRadius);
  --drawerMaxW: 720px;
  --drawerTopRadius: 18px;
  --drawerMaxH: var(--modalMaxH);

  /* --- Panels --- */
  --panelGap: 8px;
  --panelPad: 8px;
  --panelBg: var(--bg);
  --panelBorder: var(--border);
  --panelRadius: 14px;
  --panelShadow: 0 1px 0 rgba(0,0,0,.02);
  --panelHdrBg: var(--panelBg);
  --panelHdrText: var(--ink);
  --panelHdrBorder: var(--panelBorder);
  --panelControlsBg: color-mix(in srgb, var(--panelBg) 96%, black);
  --panelControlsBorder: var(--panelBorder);
  --panelFtrBg: var(--panelBg);
  --panelFtrBorder: var(--panelBorder);

  /* --- Cards --- */
  --cardBg: var(--panelBg);
  --cardBorder: var(--panelBorder);
  --cardRadius: var(--panelRadius);
  --cardShadow: var(--panelShadow);
  --cardsGap: 6px;
  --cardPad: 8px;
  --cardHdrPadY: 8px;
  --cardHdrPadX: 10px;
  --cardHdrBg: var(--cardBg);
  --cardHdrText: var(--ink);
  --cardHdrBorder: var(--cardBorder);
  --cardTitleSize: 13px;
  --cardActionSize: 34px;
  --cardActionRadius: 10px;
  --cardActionBg: transparent;
  --cardActionHoverBg: rgba(0,0,0,.04);
  --cardActionPressedBg: var(--pressedBg);
  --cardActionText: var(--btnLinkText);
  --cardActionGap: 6px;

  /* --- Page control area --- */
  --ControlAreaBg: color-mix(in srgb, var(--panelBg) 88%, black);
  --ControlAreaBorder: rgba(0,0,0,0.18);

  /* --- Misc typography tokens --- */
  --fieldValueSize: 13px;
  --fieldValueSublineSize: 12px;

  /* --- Date badge --- */
  --datebadgeTopBg: #E6D39A;
  --datebadgeTopText: #111111;
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

html, body {
  font-family: var(--fontFamilyBase);
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--surfaceApp);
  overflow-x: hidden;
}

/* Fix for iOS zoom on focus — inputs must be at least 16px */
input,
select,
textarea {
  font-size: var(--inputTextSize, 16px) !important;
}


/* ==========================================================================
   3. APP SHELL LAYOUT
   ========================================================================== */

.maPage {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--spaceMd);
  display: block;
  flex-direction: column;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.maPage--multi {
  padding: var(--spaceMd);
}

.maControlArea {
  flex: 0 0 auto;
  padding: var(--spaceMd);
  margin: 0 var(--spaceMd) var(--spaceMd) var(--spaceMd);
  background: var(--ControlAreaBg);
  border: 1px solid var(--ControlAreaBorder);
  border-radius: var(--radiusLg);
}

/* Prevent underlying page scroll when an overlay is open */
.maOverlayOpen .maPage {
  overflow: hidden;
}

.maOverlayOpen body {
  width: 100vw;
  overflow-x: hidden;
  position: relative;
}


/* ==========================================================================
   4. CHROME — HEADER
   ========================================================================== */

.maChrome__hdr {
  background: var(--chromeHdrBg);
  border-bottom: 1px solid var(--chromeBorder);
  box-shadow: var(--chromeShadow);
  padding: var(--chromePad);
}

.maChrome__hdrRow {
  display: flex;
  align-items: center;
  gap: var(--chromeGap);
}

.maChrome__hdrLeft,
.maChrome__hdrRight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.maChrome__hdrBtn {
  height: 34px;
  min-width: 72px;
  padding: 0 10px;
  border-radius: var(--radiusMd);
  background: var(--chromeHdrBtnBg);
  color: var(--chromeHdrBtnText);
  border: 1px solid var(--chromeHdrBtnBorder);
  font-family: var(--fontFamilyBase);
  font-weight: 700;
  font-size: var(--btnFontSize);
  cursor: pointer;
  user-select: none;
}

.maChrome__hdrBtn:active {
  transform: scale(.98);
}

.maChrome__brand {
  width: 48px;
  height: 48px;
  border-radius: var(--radiusMd);
  background: var(--brandPrimaryBg);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

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

.maChrome__titles {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.maChrome__title {
  font-family: var(--fontFamilyBase);
  font-weight: 700;
  color: var(--chromeTitleText);
  font-size: var(--chromeTitleSize);
  line-height: 1.2;
}

.maChrome__subtitle {
  font-family: var(--fontFamilyBase);
  color: var(--chromeSubtitleText);
  font-size: var(--chromeSubtitleSize);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3rd header line (matches subtitle feel) */
.maChrome__subtitle2 {
  font-family: var(--fontFamilyBase);
  color: var(--chromeSubtitleText);
  font-size: var(--chromeSubtitleSize);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}


/* ==========================================================================
   5. CHROME — FOOTER SHELL & STATUS LINE
   ========================================================================== */

.maChrome__ftr {
  background: var(--chromeBg);
  border-top: 1px solid var(--chromeBorder);
  padding-bottom: 8px;
}

.maChrome__status {
  font-family: var(--fontFamilyBase);
  min-height: var(--chromeStatusHeight, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--chromeStatusPadY, 2px) var(--spaceMd);
  font-size: var(--chromeStatusFontSize);
  line-height: 1.15;
  text-align: center;
  border-bottom: 1px solid var(--chromeBorder);
  user-select: none;
}

/* Status variants (driven by MA.setStatus → status-* classes) */
.maChrome__status.status-info {
  background: var(--statusInfoBg, #e9eef5);
  color: var(--statusInfoText, #1f2a37);
}

.maChrome__status.status-success {
  background: var(--statusSuccessBg, #e7f7ee);
  color: var(--statusSuccessText, #0f5132);
}

.maChrome__status.status-warn {
  background: var(--statusWarnBg, #fff7db);
  color: var(--statusWarnText, #664d03);
}

.maChrome__status.status-danger {
  background: var(--statusDangerBg, #fde7ea);
  color: var(--statusDangerText, #842029);
}


/* ==========================================================================
   6. CHROME — BOTTOM NAV (DESKTOP ICON BAR)
   ========================================================================== */

.maChrome__bottomNav {
  height: var(--tabBarHeight, 56px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--tabBarBg);
}

/* Each nav button: icon stacked over label */
.maNavBtn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  margin: 0;
  border: 1px solid var(--controlBorder);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  color: var(--tabItemText);
}

.maNavIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--navIconSize);
  line-height: 1;
}

.maNavLabel {
  font-size: var(--tabItemFontSize);
  line-height: 1.1;
  letter-spacing: .2px;
  white-space: nowrap;
}

.maNavBtn:active {
  transform: scale(.98);
  background: rgba(0,0,0,.06);
}

.maNavBtn:disabled {
  opacity: .55;
  transform: none;
  background: transparent;
  cursor: default;
}

.maNavBtn.is-active {
  color: var(--tabItemActiveText);
}

/* iOS-style active indicator line */
.maNavBtn.is-active::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  margin-top: 2px;
  background: var(--tabItemActiveText);
}

/* Compact mode: 1–2 visible items centered */
.maChrome__bottomNav.is-compact {
  justify-content: center;
  gap: 18px;
}

.maChrome__bottomNav.is-compact .maNavBtn {
  flex: 0 0 auto;
  min-width: 74px;
}


/* ==========================================================================
   7. CHROME — FOOTER ACTION BAR (SAVE / CANCEL)
   ========================================================================== */

/* Optional page action slot — hidden by default, shown by MA.chrome.setActions */
.maChrome__pageAction {
  padding: 8px 10px;
  border-bottom: 1px solid var(--chromeBorder);
  display: flex;
  justify-content: center;
  background: var(--chromeBg);
}

.maChrome__pageActionBtn {
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 1.5px dashed var(--borderSubtle);
  border-radius: var(--controlRadius);
  color: var(--mutedText);
  font-family: var(--fontFamilyBase);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  letter-spacing: .2px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.maChrome__pageActionBtn:active {
  background: var(--pressedBg);
  transform: scale(.99);
}

@media (min-width: 600px) {
  .maChrome__pageActionBtn {
    width: 280px;
  }
}

/* Footer action bar shell */
.maChrome__ftrActions {
  display: none;              /* hidden until footer--actions mode active */
  align-items: center;
  padding: var(--ftrActionsPad, 10px);
  gap: var(--ftrActionsGap, 10px);
  background: var(--chromeBg);
  flex-direction: row;
  justify-content: stretch;
}

/* Footer in actions mode: show bar, hide nav */
.maChrome__ftr--actions .maChrome__ftrActions {
  display: flex;
}

.maChrome__ftr--actions .maChrome__bottomNav {
  display: none;
}

/* Shared footer button base */
.maFtrBtn {
  flex: 1 1 0;
  min-height: var(--ftrActionsBtnH, 44px);
  border-radius: var(--controlRadius);
  font-family: var(--fontFamilyBase);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .1s ease;
  white-space: nowrap;
}

.maFtrBtn:active {
  transform: scale(.98);
  filter: brightness(.96);
}

.maFtrBtn:disabled,
.maFtrBtn.is-disabled {
  opacity: .50;
  cursor: default;
  transform: none;
  filter: none;
}

.maFtrBtn--save {
  background: var(--btnSaveBg, var(--brandAccent));
  color: var(--btnSaveText, #ffffff);
  border-color: var(--btnSaveBorder, color-mix(in srgb, var(--brandAccent) 70%, black));
}

.maFtrBtn--cancel {
  background: var(--btnCancelBg, #e5e7eb);
  color: var(--btnCancelText, var(--ink));
  border-color: var(--btnCancelBorder, rgba(0, 0, 0, .18));
}

/* Tablet + desktop (≥600px): right-justified, fixed width */
@media (min-width: 600px) {
  .maChrome__ftrActions {
    justify-content: flex-end;
  }

  .maFtrBtn {
    flex: 0 0 var(--ftrActionsBtnW, 200px);
  }
}


/* ==========================================================================
   8. CHROME — MOBILE NAV HUB (NAVIGATE BUTTON + TRAY)
   Controls:
     - Navigate button  (.maChrome__navHub)
     - Hub tray overlay (.maChrome__hubTray)
   On mobile (≤600px) the icon bar is hidden and the Navigate button takes
   its place in the footer. Tapping it slides up the hub tray, which is
   populated by MA.chrome.setBottomNav() at page boot.
   The Save/Cancel overlay hides both the icon bar and Navigate button via
   the existing .maChrome__ftr--actions class toggle.
   ========================================================================== */

/* Navigate button container — hidden by default (desktop).
   Sits inside .maChrome__bottomNav as a flex child, so it stretches
   to fill the full nav width and height on mobile. */
.maChrome__navHub {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;      /* fill the nav's full width */
  align-self: stretch; /* fill the nav's full height */
}

.maChrome__navHubBtn {
  display: flex;
  align-items: center;
  width: 75%;
  justify-content: center;
  gap: 8px;
  background: var(--brandAccent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  min-height: 44px;
  padding: 0 28px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.maChrome__navHubBtn:active {
  opacity: 0.85;
}

.maChrome__navHubIcon {
  font-size: 16px;
  line-height: 1;
}

.maChrome__navHubLabel {
  font-size: 16px;
  line-height: 1;
}

/* Hub tray overlay — always in DOM, toggled via [hidden] + .is-open */
.maChrome__hubTray {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

/* [hidden] keeps it out of the accessibility tree.
   JS removes [hidden] before animating open so transitions fire. */
.maChrome__hubTray[hidden] {
  display: none;
}

.maChrome__hubTray.is-open {
  pointer-events: all;
}

/* Backdrop */
.maChrome__hubBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  cursor: pointer;
}

.maChrome__hubTray.is-open .maChrome__hubBackdrop {
  background: rgba(0, 0, 0, 0.50);
}

/* Sheet */
.maChrome__hubSheet {
  position: relative;
  background: #fff;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.maChrome__hubTray.is-open .maChrome__hubSheet {
  transform: translateY(0);
}

/* Drag handle */
.maChrome__hubHandle {
  width: 36px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}

/* Header row */
.maChrome__hubHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 8px;
  border-bottom: 0.5px solid #eee;
  flex-shrink: 0;
}

.maChrome__hubTitle {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.maChrome__hubClose {
  background: #f0efe8;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.maChrome__hubClose:active {
  opacity: 0.7;
}

/* Scrollable row area */
.maChrome__hubScroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px 16px;
  flex: 1;
}

.maChrome__hubScroll::after {
  content: "";
  display: block;
  height: 8px;
}

/* Hub tray nav rows (injected by setBottomNav) */
.maHubRow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #f5f5f0;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}

.maHubRow:active {
  background: #e8e8e0;
}

.maHubRow.is-active {
  background: #e8f0fe;
}

.maHubRow__icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.maHubRow__label {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  flex: 1;
}

.maHubRow.is-active .maHubRow__label {
  color: var(--brandAccent);
}

.maHubRow__arrow {
  font-size: 13px;
  color: #ccc;
  flex-shrink: 0;
}

.maHubRow.is-active .maHubRow__arrow {
  color: var(--brandAccent);
}

/* Section divider between row groups */
.maHubDivider {
  border: none;
  border-top: 0.5px solid #eee;
  margin: 4px 0;
}

/* --- Media queries: visibility swap --- */

/* Mobile (≤600px): hide icon nav buttons, show Navigate button.
   The nav element itself stays as display:flex — only its icon button
   children are hidden. The navHub div fills the remaining space. */
@media (max-width: 600px) {
  .maChrome__bottomNav .maNavBtn {
    display: none !important;
  }

  .maChrome__navHub {
    display: flex;
  }
}

/* Desktop (≥601px): hide Navigate button; belt-and-suspenders hide tray */
@media (min-width: 601px) {
  .maChrome__navHub {
    display: none;
  }

  .maChrome__hubTray {
    display: none !important;
  }
}

/* Save/Cancel overlay hides the entire nav (including Navigate button
   inside it) via the rule in section 7 above. No extra rule needed here. */


/* ==========================================================================
   9. MULTI-PANEL LAYOUT
   Expected markup:
     <main class="maPage maPage--multi">
       <div class="maPanels maPanels--2"> (or --3 / --4)
         <section class="maPanel maPanel--primary">...</section>
         <section class="maPanel maPanel--secondary">...</section>
       </div>
     </main>
   ========================================================================== */

.maPanels {
  height: 100%;
  min-height: 0;
  display: grid;
  gap: var(--panelGap);
  grid-template-columns: 1fr; /* mobile default — stacked */
}

@media (min-width: 900px) {
  .maPanels--2 { grid-template-columns: 1fr 1fr; }
  .maPanels--3 { grid-template-columns: 1fr 1fr 1fr; }
  .maPanels--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Panel shell */
.maPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panelBg);
  border: 1px solid var(--panelBorder);
  border-radius: var(--panelRadius);
  box-shadow: var(--panelShadow);
  overflow: hidden;
}

/* Panel regions */
.maPanel__hdr {
  flex: 0 0 auto;
  background: var(--panelHdrBg);
  color: var(--panelHdrText);
  padding: var(--panelPad);
  border-bottom: 1px solid var(--panelHdrBorder);
}

.maPanel__controls {
  flex: 0 0 auto;
  background: var(--panelControlsBg);
  padding: 6px 8px; /*it was var(--panelPad); */
  border-bottom: 1px solid var(--panelControlsBorder);
}

.maPanel__controls .maFieldRow {
  margin-top: 4px;
  gap: 6px;
}

.maPanel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--panelPad);
  overscroll-behavior: contain;
}

.maPanel__ftr {
  flex: 0 0 auto;
  background: var(--panelFtrBg);
  padding: var(--panelPad);
  border-top: 1px solid var(--panelFtrBorder);
}


/* ==========================================================================
   10. OVERLAY FAMILY — DRAWER + MODAL
   ========================================================================== */

/* ---------- Drawer (secondary panel on mobile) --------------------------- */
/*
   Expected markup:
     <div class="maDrawerOverlay is-open">
       <section class="maDrawer">
         <header class="maPanel__hdr">...</header>
         <div class="maPanel__controls">...</div>  (optional)
         <div class="maPanel__body">...</div>
         <footer class="maPanel__ftr">...</footer>
       </section>
     </div>
*/
.maDrawerOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  background: var(--overlayBgDim);
  z-index: var(--overlayZ);
  backdrop-filter: blur(var(--overlayBlur));
}

.maDrawerOverlay.is-open { display: flex; }

.maDrawer {
  width: min(var(--drawerMaxW), 100%);
  max-height: var(--drawerMaxH);
  background: var(--panelBg);
  border: 1px solid var(--panelBorder);
  border-radius: var(--drawerTopRadius) var(--drawerTopRadius) 0 0;
  box-shadow: var(--modalShadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Modal (capture / edit / filters / settings) ------------------ */
/*
   Expected markup:
     <div class="maModalOverlay is-open">
       <section class="maModal" role="dialog" aria-modal="true">
         <header class="maModal__hdr">...</header>
         <div class="maModal__controls">...</div>  (optional)
         <div class="maModal__body">...</div>
         <footer class="maModal__ftr">...</footer>
       </section>
     </div>
*/
.maModalOverlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;  /* NEW */
  padding:
    calc(20px + env(safe-area-inset-top))
    16px
    calc(20px + env(safe-area-inset-bottom))
    16px;
  background: var(--overlayBgDim);
  z-index: var(--overlayZ);
  backdrop-filter: blur(var(--overlayBlur));
  touch-action: none;
}

.maModalOverlay.is-open { display: flex; }

.maModal {
  width: 100%;
  max-width: min(var(--modalMaxW), calc(100vw - 32px));  /* NEW */
  max-height: 88vh; /* legacy fallback */
  max-height: min(var(--modalMaxH), calc(100dvh - (var(--modalViewportGap) + env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  background: var(--modalSurface);
  border: 1px solid var(--border);
  border-radius: var(--modalRadius);
  box-shadow: var(--modalShadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.maModal__hdr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--modalHeaderBg);
  color: var(--modalHeaderText);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.maModal__controls {
  flex: 0 0 auto;
  padding: 12px 14px;
  background: var(--panelControlsBg);
  border-bottom: 1px solid var(--panelControlsBorder);
  overflow: hidden;
}

.maModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.maModal__ftr {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 96%, black);
}

.maModal__ftrActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.maModal__title {
  font-size: var(--chromeSubtitleSize);
  font-weight: 900;
  letter-spacing: .2px;
}

.maModal__subtitle {
  margin-top: 2px;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile overrides for modal fields */
@media (max-width: 600px) {
  .maModal {
    max-width: 100%;
    box-sizing: border-box;
  }

  .maModal .maField {
    flex: 1 1 auto;
  }

  .maModal .maFieldRow {
    flex-direction: column;
  }
}


/* ==========================================================================
   11. ACTIONS MENU
   ========================================================================== */

/* ---------- DEPRECATED: actionMenuOverlay -------------------------------- */
/* DO NOT USE — use maModalOverlay + maModal instead.
   Kept for any legacy pages not yet migrated. */

.actionMenuOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlayBg);
  display: none;
  z-index: 99999;
  backdrop-filter: blur(2px);
  touch-action: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.actionMenuOverlay.open { display: flex; }

.actionMenu {
  position: relative;
  min-width: 260px;
  width: min(360px, 100%);
  max-width: 360px;
  background: var(--modalSurface);
  border: 1px solid var(--controlBorder);
  border-radius: var(--drawerRadius);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  padding: 0;
}

.actionMenu_header {
  position: sticky;
  top: 0;
  background: var(--modalHeaderBg);
  color: var(--modalHeaderText);
  padding: 12px 14px;
  z-index: 2;
}

.actionMenu_headerRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.actionMenu_title {
  font-weight: 900;
  font-size: var(--chromeTitleSize);
  line-height: 1.15;
}

.actionMenu_subtitle {
  margin-top: 2px;
  font-weight: 800;
  font-size: var(--chromeSubtitleSize);
  opacity: .9;
}

.actionMenu_closeBtn {
  border: 0;
  background: rgba(255,255,255,.20);
  color: var(--bg);
  border-radius: var(--radiusLg);
  width: 30px;
  height: 28px;
  font-size: var(--btnFontSize);
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.actionMenu_closeBtn:hover {
  background: rgba(255,255,255,.28);
}

.actionMenu_item {
  width: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-weight: 900;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.actionMenu_item:hover { background: var(--pressedBg); }

.actionMenu_item.disabled {
  opacity: .50;
  cursor: default;
  color: var(--mutedText);
}

.actionMenu_item.danger { color: var(--danger); }

.actionMenu_divider {
  height: 8px;
  background: #f0f0f0;
  margin: 0;
}

@media (max-width: 520px) {
  .actionMenu {
    width: 100%;
    max-width: none;
  }
}

/* ---------- Active: maModal variant of actions menu --------------------- */

.maModal .actionMenu_subtitle {
  margin: 0 0 8px 0;
  font-weight: 800;
  font-size: var(--chromeSubtitleSize);
  color: var(--mutedText);
}

.maModal .actionMenu_item {
  width: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-weight: 900;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.maModal .actionMenu_item:hover { background: var(--pressedBg); }

.maModal .actionMenu_item.disabled {
  opacity: .50;
  cursor: default;
  color: var(--mutedText);
}

.maModal .actionMenu_item.danger { color: var(--danger); }

.actionMenu_item.indent,
.maModal .actionMenu_item.indent {
  padding-left: 28px;
}

.maModal .actionMenu_divider {
  height: 8px;
  background: #f0f0f0;
  margin: 0;
}

/* Category break — section header with tinted background */
.actionMenu_category {
  background: var(--brandPrimaryBg);
  border-top: 1px solid var(--borderSubtle);
  border-bottom: 1px solid var(--borderSubtle);
  padding: 8px 16px 5px;
  font-weight: 900;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}

.actionMenu_categoryDesc {
  background: var(--brandPrimaryBg);
  border-bottom: 1px solid var(--borderSubtle);
  padding: 0 16px 7px;
  font-weight: 800;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}

.maModal .actionMenu_category {
  background: var(--brandPrimaryBg);
  border-top: 1px solid var(--borderSubtle);
  border-bottom: 1px solid var(--borderSubtle);
  padding: 8px 16px 5px;
  font-weight: 900;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}

.maModal .actionMenu_categoryDesc {
  background: var(--brandPrimaryBg);
  border-bottom: 1px solid var(--borderSubtle);
  padding: 0 16px 7px;
  font-weight: 800;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}


/* ==========================================================================
   12. CARDS
   Use for repeatable surfaces inside a page/panel.
   Regions: .maCard__hdr (optional), .maCard__body (required)
   ========================================================================== */

.maCards {
  display: flex;
  flex-direction: column;
  gap: var(--cardsGap);
  min-width: 0;
}

.maCards--scroll {
  overflow: visible;
  max-height: none;
}

.maCard {
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  overflow: hidden;
  min-width: 0;
}

/* Header: left title, right actions (0–3) */
.maCard__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--cardHdrPadY) var(--cardHdrPadX);
  background: var(--cardHdrBg);
  color: var(--cardHdrText);
  border-bottom: 1px solid var(--cardHdrBorder);
}

.maCard__title {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--fontFamilyBase);
  font-size: var(--cardTitleSize);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maCard__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cardActionGap);
}

.maCard__actionBtn {
  width: var(--cardActionSize);
  height: var(--cardActionSize);
  border-radius: var(--cardActionRadius);
  border: 0;
  background: var(--cardActionBg);
  color: var(--cardActionText);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.maCard__actionBtn:active {
  background: var(--cardActionPressedBg);
  transform: scale(.98);
}

.maCard__actionBtn:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

.maCard__body {
  padding: var(--cardPad);
  min-width: 0;
}


/* ==========================================================================
   13. PILLS & CHIPS
   ========================================================================== */

/* ---------- Pills (informational) --------------------------------------- */
.maPills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.maPill {
  background: var(--pillBg);
  color: var(--pillText);
  border-radius: var(--pillRadius);
  padding: var(--pillPadY) var(--pillPadX);
  font-size: var(--pillValueSize);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: var(--pillMinHeight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 2-line label/value pill */
.maPillKV {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--pillMinHeight);
}

.maPillLabel {
  font-size: var(--pillLabelSize);
  font-weight: 800;
  color: var(--pillLabelText);
  line-height: 1;
}

.maPillValue {
  font-size: var(--pillValueSize);
  font-weight: var(--pillValueWeight);
  line-height: 1.1;
  color: var(--pillText);
}

/* Status variants */
.maPill--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, var(--cardBg));
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
}

.maPill--warn  { color: var(--warn); }
.maPill--danger { color: var(--danger); }

/* ---------- Choice chips (enum selection / toggle) ---------------------- */
.maChoiceChips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.maChoiceChip {
  border: 1px solid var(--choiceChipBorder);
  background: var(--choiceChipBg);
  color: var(--choiceChipText);
  border-radius: var(--choiceChipRadius);
  padding: 8px 12px;
  font-weight: 800;
  font-size: var(--pillTitleSize);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.maChoiceChip.is-selected {
  background: var(--choiceChipSelectedBg);
  color: var(--choiceChipSelectedText);
  border-color: var(--choiceChipSelectedBorder);
}

.maChoiceChip.is-disabled {
  opacity: .55;
  cursor: default;
}

/* ---------- Segmented control (single-select tab switching) ------------- */
.maSeg {
  display: flex;
  width: 100%;
  border: 1px solid var(--segBorder);
  border-radius: var(--segRadius);
  overflow: hidden;
  background: var(--segBg);
}

.maSegBtn {
  flex: 1;
  min-height: var(--segBtnHeight);
  border: 0;
  border-right: 1px solid var(--segBorder);
  background: transparent;
  font-size: var(--segBtnFontSize);
  font-weight: var(--segBtnWeight);
  cursor: pointer;
  color: var(--segBtnText);
  padding: var(--spaceSm) calc(var(--spaceMd) + 2px);
  user-select: none;
}

.maSegBtn:last-child { border-right: 0; }

.maSegBtn.is-active {
  background: var(--segActiveBg);
  color: var(--segActiveText);
}

.maSegBtn:disabled {
  opacity: .55;
  cursor: default;
}


/* ==========================================================================
   14. BUTTONS
   ========================================================================== */

/* Base button */
.btn {
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--btnText);
  border-radius: var(--btnRadius);
  min-height: var(--btnHeight);
  padding: 0 var(--btnPadX);
  font-family: var(--fontFamilyBase);
  font-size: var(--btnFontSize);
  font-weight: var(--btnFontWeight);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  background: var(--btnPressedBg);
  transform: scale(.98);
}

.btn:disabled,
.btn.disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

/* Primary = default (ink on light surface, semantic marker) */
.btnPrimary {
  background: var(--btnPrimaryBg);
  color: var(--btnPrimaryText);
  border-color: var(--btnPrimaryBorder);
}

/* Secondary = filled brand button (white on brandSecondary) */
.btnSecondary {
  background: var(--btnSecondaryBg);
  color: var(--btnSecondaryText);
  border-color: var(--btnSecondaryBorder);
}

.btnSecondary:active { filter: brightness(.96); }

/* Link button = text-only action */
.btnLink,
.btn.btnLink {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  height: auto;
  min-width: 0;
  justify-content: flex-start;
  color: var(--btnLinkText);
  font-weight: var(--btnFontWeight);
}

.btnLink:hover,
.btn.btnLink:hover {
  text-decoration: underline;
}

/* Square icon button (calendar, etc.) */
.iconBtn {
  width: var(--btnHeight);
  height: var(--btnHeight);
  flex: 0 0 var(--btnHeight);
  padding: 0;
  border-radius: var(--radiusSq);
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--btnText);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.iconBtn:active {
  background: var(--btnPressedBg);
  transform: scale(.98);
}

/* Close button (used in modals) */
.closeBtn {
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--btnText);
  border-radius: var(--radiusMd);
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--fontFamilyBase);
}

/* Pill button (rounded action chip) */
.pillBtn {
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fontFamilyBase);
  font-size: var(--btnFontSize);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  user-select: none;
}

.pillBtn:active {
  background: var(--btnPressedBg);
  transform: scale(.98);
}


/* ==========================================================================
   15. FORM FIELDS
   ========================================================================== */

.maFieldRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.maField {
  flex: 1 1 240px;
  min-width: 0;
}

.maLabel {
  display: block;
  margin: 0 0 6px 2px;
  font-size: var(--labelTextSize);
  font-weight: 900;
  color: var(--mutedText);
}

.maLabelLg {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

.maValueLg {
  display: block;
  font-size: 20px;
  font-weight: 950;
  color: var(--ink);
  line-height: 1;
}

.maInputWrap {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.maTextInput {
  width: 100%;
  min-height: var(--btnHeight);
  padding: 0 12px;
  border-radius: var(--controlRadius);
  border: 1px solid var(--controlBorder);
  background: #fff;
  color: var(--ink);
  font-family: var(--fontFamilyBase);
  font-size: var(--inputTextSize);
  font-weight: 800;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}

.maTextInput:focus {
  border-color: var(--brandSecondary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}


/* ==========================================================================
   16. DATE BADGE & CALENDAR
   ========================================================================== */

.maDateBadge {
  width: 62px;
  flex: 0 0 auto;
  border: 1px solid var(--borderSubtle);
  border-radius: var(--radiusLg);
  overflow: hidden;
  background: var(--cardBg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.maDateBadge__top {
  background: var(--datebadgeTopBg);
  color: var(--datebadgeTopText);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-align: center;
  padding: 6px 0 5px;
}

.maDateBadge__mid {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  text-align: center;
  padding: 8px 0 2px;
}

.maDateBadge__bot {
  color: rgba(17,17,17,.72);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  padding: 0 0 8px;
}

/* Calendar */
.maCalWrap {
  display: none; /* opened by JS via .open */
  margin-top: 12px;
  border: 1px solid var(--borderSubtle);
  border-radius: var(--radiusLg);
  overflow: hidden;
  background: #fff;
}

.maCalWrap.open { display: block; }

.maCalHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panelHdrBg);
  color: var(--panelHdrText);
  border-bottom: 1px solid var(--borderSubtle);
}

.maCalHint {
  font-size: 12px;
  font-weight: 900;
  opacity: .95;
}

.maCalLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.maCalMonthLabel {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  padding: 0 6px;
}

.maCalNavBtn { min-width: 40px; }

.maCalMiniBtn { padding: 0 10px; }

.maCalRight { display: none; } /* legacy pills kept in DOM */

.maCalDow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 10px 10px 0 10px;
  color: var(--mutedText);
  font-weight: 900;
  font-size: 11px;
}

.maCalGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 10px;
}

.maCalDay {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--borderSubtle);
  background: var(--cardBg);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.maCalDay:hover { background: var(--pressedBg); }
.maCalDay.muted { opacity: .45; }
.maCalDay.today { border-color: var(--brandSecondary); }

.maCalDay.selected {
  background: var(--brandSecondary);
  border-color: var(--brandSecondary);
  color: #fff;
}

.maCalDay.inRange {
  background: rgba(48, 110, 230, .10);
  border-color: rgba(48, 110, 230, .10);
}

.maCalDay.from,
.maCalDay.to {
  background: var(--brandSecondary);
  border-color: var(--brandSecondary);
  color: #fff;
}


/* ==========================================================================
   17. LIST ROWS
   Lightweight rows for search/recent lists (course picker, etc.)
   ========================================================================== */

.maListRows {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.maListRow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  background: #fff;
  border-bottom: 1px solid var(--borderSubtle);
  cursor: pointer;
  user-select: none;
}

.maListRow:hover  { background: rgba(0,0,0,.02); }
.maListRow:active { background: rgba(0,0,0,.04); }

.maListRow__col {
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maListRow__col--muted {
  font-size: 13px;
  font-weight: 800;
  color: var(--mutedText);
}

.maListRow__col--right { text-align: right; }

.maListRow.is-selected {
  border-color: #7ea489;
  background: #f5faf6;
  box-shadow: 0 0 0 1px rgba(126,164,137,.45) inset;
}

.maListRow .maPill {
  min-height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

/* Group divider label — section sub-heading within a scrollable list.
   Use to separate named buckets of rows (e.g. team groups on the roster,
   flight groups in pairings, status groups in any list view).

   Base style (no modifier): neutral tint, darkened ink for legibility in
   daylight. Pair with a --color modifier to add a team/status swatch dot.

   Usage:
     <div class="maListRow__group">All Players</div>
     <div class="maListRow__group maListRow__group--red">Team A</div>
     <div class="maListRow__group maListRow__group--blue">Team B</div>
     <div class="maListRow__group maListRow__group--none">No Team</div>

   Pages currently using this pattern:
     - game_players.js  → roster team groups (sort by team)
*/
.maListRow__group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* Use --ink rather than --mutedText: the light brandPrimaryBg background
     makes #3a3a3a hard to read in bright daylight; --ink (#111) gives
     sufficient contrast at this small font size. */
  color: var(--ink);
  padding: 7px 12px 3px;
  background: var(--brandPrimaryBg);
  border-top: 0.5px solid var(--borderSubtle);
  border-bottom: 0.5px solid var(--borderSubtle);
  user-select: none;
}

/* Color-dot swatch — indicates team or category identity.
   Dot is suppressed on the base class (no modifier).
   Parallels .maSwatch but auto-inserted via ::before so no extra markup
   is needed. */
.maListRow__group--red::before,
.maListRow__group--blue::before,
.maListRow__group--none::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.maListRow__group--red::before  { background: var(--danger); }
.maListRow__group--blue::before { background: var(--brandColor3); }
.maListRow__group--none::before { background: var(--mutedText); opacity: .45; }

/* Avatar circle — circular initials badge used as left slot in a list row */
.maListRow__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(0,0,0,.07);
  color: var(--mutedText);
}


/* ==========================================================================
   18. ADMIN PICKER
   ========================================================================== */

.maAdminPick__top { margin-top: 12px; }

.maAdminPick {
  margin-top: 10px;
  border: 1px solid var(--borderSubtle);
  border-radius: var(--radiusLg);
  overflow: hidden;
  background: #fff;
}

.maAdminPick__hdr {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--panelHdrBg);
  color: var(--panelHdrText);
  border-bottom: 1px solid var(--borderSubtle);
}

.maAdminPick__hdrName {
  font-weight: 900;
  letter-spacing: .2px;
}

.maAdminPick__rows {
  max-height: 360px;
  overflow: auto;
}

.maAdminRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borderSubtle);
  cursor: pointer;
  user-select: none;
}

.maAdminRow:hover { background: var(--pressedBg); }

.maAdminRow__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.maAdminRow__check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--borderSubtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--mutedText);
  flex: 0 0 auto;
}

.maAdminRow__check.on {
  background: var(--brandSecondary);
  border-color: var(--brandSecondary);
  color: #fff;
}

.maAdminRow__name {
  font-weight: 900;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maAdminRow__right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}


/* ==========================================================================
   19. MISC — EMPTY STATE, TAB PANELS, GAME CARD OVERRIDES
   ========================================================================== */

.maEmptyState {
  margin: 10px 0;
  padding: 16px 14px;
  text-align: center;
  color: var(--mutedText);
  font-weight: 800;
  border: 1px dashed var(--borderSubtle);
  border-radius: var(--radiusLg);
  background: var(--cardBg);
}

.maTabPanel { display: none; }
.maTabPanel.is-active { display: block; }

/* Hide game card manage button on mobile */
@media (max-width: 600px) {
  .maGameCard__manageBtn {
    display: none !important;
  }
}

/* ==========================================================================
   20. PAGE HELP — Modal + Header Button
   ========================================================================== */
 
/* --- Help button in chrome header --- */
.maHelpBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
 
.maHelpBtn:active {
  transform: scale(.93);
}
 
.maHelpBtn img {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
}
 
/* Hidden on mobile — help is a desktop affordance */
@media (max-width: 600px) {
  .maHelpBtn {
    display: none;
  }
}
 
/* Ensure right slot has correct gap and alignment when help button is present */
/* Gap tripled (30px) to give breathing room between ? and Actions button */
.maChrome__hdrRight {
  gap: calc(var(--chromeGap) * 3);
  justify-content: flex-end;
}
 
/* --- Help modal sizing --- */
.maHelpModal {
  max-width: 620px;
  width: min(620px, calc(100vw - 32px));
}
 
/* --- Help modal body layout --- */
.maHelpBody {
  display: flex;
  flex-direction: column;
}
 
/* --- Individual help section --- */
.maHelpSection {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--spaceMd);
  padding: var(--spaceMd) 0;
  border-top: 1px solid var(--borderSubtle);
}
 
.maHelpSection:first-child {
  border-top: 0;
  padding-top: 0;
}
 
/* --- Icon circle --- */
.maHelpIcon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brandPrimary) 10%, transparent);
  color: var(--brandPrimary);
  flex-shrink: 0;
}
 
/* --- Section text --- */
.maHelpSection__content {
  display: flex;
  flex-direction: column;
  gap: var(--spaceSm);
}
 
.maHelpSection__title {
  margin: 0;
  font-size: var(--labelTextSize);
  font-weight: 900;
  color: var(--brandPrimary);
}
 
.maHelpSection__body {
  margin: 0;
  font-size: var(--fieldValueSize);
  color: var(--ink);
  line-height: 1.45;
}
 
.maHelpList {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
  font-size: var(--fieldValueSize);
}
 
.maHelpList li {
  margin-bottom: var(--spaceSm);
  line-height: 1.4;
}
 
.maHelpList li:last-child {
  margin-bottom: 0;
}
 
.maHelpSubList {
  margin: var(--spaceSm) 0 0 0;
  padding-left: 1rem;
  list-style-type: circle;
  color: var(--mutedText);
  font-size: var(--fieldValueSize);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
 
.maHelpSubList li {
  line-height: 1.35;
}
 
/* --- Tab panels — hidden by default, shown when is-active --- */
.maHelpTabPanel {
  display: none;
}
 
.maHelpTabPanel.is-active {
  display: block;
}
 
/* --- Segmented control inside help modal controls area --- */
.maHelpSeg {
  width: 100%;
}
 
/* --- Mobile adjustments (modal still usable if somehow reached) --- */
@media (max-width: 640px) {
  .maHelpModal {
    width: calc(100vw - 20px);
  }
 
  .maHelpSection {
    grid-template-columns: 36px 1fr;
  }
 
  .maHelpIcon {
    width: 34px;
    height: 34px;
  }
}

/* ==========================================================================
   ADDITIONS TO ma_shared.css
   Add .maSwatch to Section 1 (Design Tokens / utility classes).
   Add .maTeamBadge to Section 13 (Pills & Chips), after .maChoiceChip block.
   ========================================================================== */


/* ---------- Section 1 addition — after the :root block -------------------
   .maSwatch — generic color dot used beside labelled inputs.
   Color modifier classes follow the same --red / --blue pattern as other
   semantic utilities in the system.
   ------------------------------------------------------------------------- */

.maSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.maSwatch--red  { background: var(--danger); }
.maSwatch--blue { background: var(--brandColor3); }


/* ---------- Section 13 addition — after .maChoiceChip block --------------
   .maTeamBadge — interactive team assignment button.
   Visually similar to maPill but is a <button>, not a display element.
   Used in the Manage Teams module roster to assign players to T1 / T2.
   ------------------------------------------------------------------------- */

.maTeamBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--pillRadius);
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--fontFamilyBase);
  line-height: 1.4;
  background: transparent;
}

.maTeamBadge:active {
  transform: scale(.96);
}

.maTeamBadge:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

/* Color variants — inactive (outline) state */
.maTeamBadge--red {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 6%, white);
}

.maTeamBadge--blue {
  color: var(--brandColor3);
  border-color: color-mix(in srgb, var(--brandColor3) 35%, transparent);
  background: color-mix(in srgb, var(--brandColor3) 6%, white);
}

.maTeamBadge--none {
  color: var(--mutedText);
  border-color: var(--borderSubtle);
  background: transparent;
}

/* Active (filled) state — player is assigned to this team */
.maTeamBadge--red.is-active {
  background: var(--danger);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--danger) 80%, black);
}

.maTeamBadge--blue.is-active {
  background: var(--brandColor3);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--brandColor3) 80%, black);
}

.maTeamBadge--none.is-active {
  background: var(--mutedText);
  color: #ffffff;
  border-color: var(--mutedText);
}