/* ============================================================
   MidwestMat design system — dark + crimson
   Layered on top of Bootstrap 5.3 (overrides its CSS variables
   + component vars so every screen inherits the look).
   ============================================================ */

:root,
[data-bs-theme="dark"] {
  /* ---- palette ---- */
  --mm-bg:         #0c0d10;   /* page */
  --mm-bg-2:       #101217;
  --mm-surface:    #17191f;   /* cards */
  --mm-surface-2:  #1e2129;   /* inputs, nested */
  --mm-border:     rgba(255,255,255,.09);
  --mm-border-2:   rgba(255,255,255,.16);
  --mm-text:       #e9eaee;
  --mm-muted:      #9aa0ac;
  --mm-accent:     #e11d48;   /* crimson */
  --mm-accent-rgb: 225,29,72;
  --mm-accent-hi:  #f43f5e;
  --mm-accent-lo:  #be123c;
  --mm-nav-h:      44px;
  --mm-nav-safe:   0px;  /* flush bottom nav (no home-indicator band) */

  /* ---- map Bootstrap theme vars ---- */
  --bs-body-bg: var(--mm-bg);
  --bs-body-color: var(--mm-text);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, system-ui, sans-serif;
  --bs-emphasis-color: #fff;
  --bs-heading-color: #fff;
  --bs-secondary-color: var(--mm-muted);
  --bs-tertiary-bg: var(--mm-surface);
  --bs-secondary-bg: var(--mm-surface-2);
  --bs-border-color: var(--mm-border);
  --bs-border-color-translucent: var(--mm-border);
  --bs-primary: var(--mm-accent);
  --bs-primary-rgb: var(--mm-accent-rgb);
  --bs-link-color: var(--mm-accent-hi);
  --bs-link-color-rgb: var(--mm-accent-rgb);
  --bs-link-hover-color: #fb7185;
  --bs-focus-ring-color: rgba(var(--mm-accent-rgb), .35);
  --bs-border-radius: .65rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .9rem;
}

html, body { background: var(--mm-bg); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- typography ---- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 { letter-spacing:-.015em; font-weight:700; color:#fff; }
h1,.h1{ font-size:1.9rem } h2,.h2{ font-size:1.5rem } h3,.h3{ font-size:1.25rem }
.text-secondary{ color: var(--mm-muted) !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: .82rem; }

/* ---- surfaces / cards ---- */
.card{
  --bs-card-bg: var(--mm-surface);
  --bs-card-border-color: var(--mm-border);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: .85rem;
  --bs-card-cap-bg: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -22px rgba(0,0,0,.8);
}
.bg-body-tertiary{ background-color: var(--mm-surface) !important; }
.bg-body-secondary{ background-color: var(--mm-surface-2) !important; }
.border,.border-top,.border-bottom,.border-start,.border-end{ border-color: var(--mm-border) !important; }
hr{ border-color: var(--mm-border); opacity:1; }

/* ---- buttons ---- */
.btn{ --bs-btn-border-radius:.7rem; font-weight:600; padding:.5rem 1.05rem; }
.btn-lg{ --bs-btn-border-radius:.85rem; }
.btn-primary{
  --bs-btn-bg: var(--mm-accent);          --bs-btn-border-color: var(--mm-accent);
  --bs-btn-hover-bg: var(--mm-accent-hi);  --bs-btn-hover-border-color: var(--mm-accent-hi);
  --bs-btn-active-bg: var(--mm-accent-lo); --bs-btn-active-border-color: var(--mm-accent-lo);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  --bs-btn-disabled-bg: var(--mm-accent); --bs-btn-disabled-border-color: var(--mm-accent);
  box-shadow: 0 8px 20px -10px rgba(var(--mm-accent-rgb),.75);
}
.btn-outline-light{
  --bs-btn-border-color: var(--mm-border-2); --bs-btn-color: var(--mm-text);
  --bs-btn-hover-bg: rgba(255,255,255,.06); --bs-btn-hover-border-color: var(--mm-border-2); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg: rgba(255,255,255,.1);
}
.btn-outline-info,.btn-outline-primary{
  --bs-btn-color: var(--mm-accent-hi); --bs-btn-border-color: rgba(var(--mm-accent-rgb),.5);
  --bs-btn-hover-bg: var(--mm-accent); --bs-btn-hover-border-color: var(--mm-accent); --bs-btn-hover-color:#fff;
}
.btn-outline-danger{
  --bs-btn-color:#fb7185; --bs-btn-border-color: rgba(var(--mm-accent-rgb),.45);
  --bs-btn-hover-bg: var(--mm-accent); --bs-btn-hover-border-color: var(--mm-accent); --bs-btn-hover-color:#fff;
}
.btn-secondary{
  --bs-btn-bg: var(--mm-surface-2); --bs-btn-border-color: var(--mm-border);
  --bs-btn-hover-bg:#262a34; --bs-btn-hover-border-color: var(--mm-border-2);
  --bs-btn-color: var(--mm-text); --bs-btn-hover-color:#fff;
}
.btn-light{ --bs-btn-bg:#fff; --bs-btn-color:#111; }
.btn-link{ --bs-btn-color: var(--mm-accent-hi); text-decoration:none; }
@media (max-width:991.98px){
  .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-sm{ min-height:38px; padding:.4rem .75rem; }
}

/* ---- badges ---- */
.badge.text-bg-secondary{ background: var(--mm-surface-2) !important; color: var(--mm-muted) !important; font-weight:600; }
.text-bg-success{ background:#15803d !important; } .text-bg-warning{ background:#b45309 !important; color:#fff !important; }
.text-bg-danger{ background: var(--mm-accent) !important; }

/* ---- forms ---- */
.form-control,.form-select{
  background-color: var(--mm-surface-2); border-color: var(--mm-border); color: var(--mm-text);
  border-radius:.6rem;
}
.form-control:focus,.form-select:focus{
  background-color: var(--mm-surface-2); border-color: var(--mm-accent); color: var(--mm-text);
  box-shadow: 0 0 0 .2rem rgba(var(--mm-accent-rgb),.22);
}
.form-control::placeholder{ color:#6b7280; }
.form-control:disabled,.form-select:disabled{ background-color:#14161b; color:var(--mm-muted); }
.input-group-text{ background: var(--mm-surface-2); border-color: var(--mm-border); color: var(--mm-muted); }
.form-check-input{ background-color: var(--mm-surface-2); border-color: var(--mm-border-2); }
.form-check-input:checked{ background-color: var(--mm-accent); border-color: var(--mm-accent); }
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(var(--mm-accent-rgb),.22); border-color: var(--mm-accent); }
.form-label{ font-weight:600; color: var(--mm-text); }
@media (max-width:991.98px){ .form-control,.form-select{ min-height:44px; font-size:1rem; } }

/* ---- alerts ---- */
.alert{ border:1px solid var(--mm-border); border-radius:.85rem; }
.alert-success{ background:rgba(21,128,61,.14); color:#86efac; border-color:rgba(21,128,61,.35); }
.alert-danger { background:rgba(var(--mm-accent-rgb),.14); color:#fda4af; border-color:rgba(var(--mm-accent-rgb),.35); }
.alert-warning{ background:rgba(180,83,9,.16); color:#fcd34d; border-color:rgba(180,83,9,.35); }
.alert-info   { background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(59,130,246,.28); }
.alert-primary{ background:rgba(var(--mm-accent-rgb),.14); color:#fecdd3; border-color:rgba(var(--mm-accent-rgb),.3); }

/* ---- dropdowns / tables ---- */
.dropdown-menu{
  --bs-dropdown-bg: var(--mm-surface); --bs-dropdown-border-color: var(--mm-border);
  --bs-dropdown-link-color: var(--mm-text); --bs-dropdown-link-hover-bg: var(--mm-surface-2);
  --bs-dropdown-link-active-bg: var(--mm-accent); border-radius:.85rem;
  box-shadow:0 16px 48px -16px rgba(0,0,0,.85);
}
.table{ --bs-table-color: var(--mm-text); --bs-table-border-color: var(--mm-border); --bs-table-bg: transparent; }
.nav-pills{ --bs-nav-pills-link-active-bg: var(--mm-accent); --bs-nav-pills-link-active-color:#fff; }
.nav-pills .nav-link{ color: var(--mm-text); }
.nav-pills .nav-link:hover{ color:#fff; }
.nav-pills .nav-link.active{ box-shadow:0 6px 16px -8px rgba(var(--mm-accent-rgb),.7); }
::selection{ background: rgba(var(--mm-accent-rgb),.35); color:#fff; }

/* ============================================================
   App shell
   ============================================================ */

/* sticky, frosted header */
.mm-header{
  position: sticky; top:0; z-index:1030;
  background: rgba(12,13,16,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom:1px solid var(--mm-border);
}
.mm-brand{ font-weight:800; letter-spacing:-.025em; color:#fff; display:inline-flex; align-items:center; gap:.5rem; }
.mm-brand:hover{ color:#fff; text-decoration:none; }
/* (removed) old gradient-square brand mark — replaced by Will's real logo;
   it was painting a crimson box behind the new .mm-mark */
.mm-brand b{ color: var(--mm-accent); font-weight:800; }

/* frosted compact bottom tab bar (mobile) */
.mm-bottomnav{
  position: fixed; left:0; right:0; bottom:0; z-index:1040;
  background: rgba(17,18,24,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top:1px solid var(--mm-border);
  padding-bottom: var(--mm-nav-safe);
}
.mm-bottomnav .mm-tabs{ display:flex; height: var(--mm-nav-h); }
.mm-tab{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color: var(--mm-muted); font-size:.66rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; position:relative; -webkit-tap-highlight-color: transparent;
}
.mm-tab:hover{ text-decoration:none; color: var(--mm-text); }
.mm-tab svg{ width:22px; height:22px; stroke-width:2; }
.mm-tab.active{ color: var(--mm-accent); }
.mm-tab.active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px;
  background: var(--mm-accent); box-shadow:0 0 12px rgba(var(--mm-accent-rgb),.8);
}
.mm-tab.locked{ opacity:.45; }

/* keep the fixed nav from ever covering content/taps */
@media (max-width:991.98px){
  main{ padding-bottom: calc(var(--mm-nav-h) + var(--mm-nav-safe) + .9rem) !important; }
  footer{ margin-bottom: calc(var(--mm-nav-h) + var(--mm-nav-safe)); }
}

/* ============================================================
   Brand identity — MM mat-circle emblem, athletic type (Oswald),
   wordmark lockup, scoreboard stats, branded hero
   ============================================================ */
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/oswald-500.woff2') format('woff2'); }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/oswald-600.woff2') format('woff2'); }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/oswald-700.woff2') format('woff2'); }
:root{ --mm-display:'Oswald','Arial Narrow','Roboto Condensed',sans-serif; }

/* athletic condensed headings = the brand voice */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:var(--mm-display); font-weight:600; letter-spacing:.005em; }
h1,.h1{ font-weight:700; }

/* the MM mark (mat circle + monogram) */
.mm-emblem{ display:block; flex:0 0 auto; }
.mm-emblem .ring{ fill:var(--mm-bg-2); stroke:var(--mm-accent); }
.mm-emblem .mono{ fill:#fff; font-family:var(--mm-display); font-weight:700; }

/* header wordmark lockup */
.mm-brand{ font-family:var(--mm-display); font-weight:700; font-size:1.32rem; text-transform:uppercase;
  letter-spacing:.02em; color:#fff; gap:.55rem; }
.mm-brand .mm-emblem{ width:1.95rem; height:1.95rem; }
.mm-brand b{ color:var(--mm-accent); font-weight:700; }

/* athletic bottom-nav labels */
.mm-tab span{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.8rem; }

/* eyebrow labels + scoreboard-style stats */
.mm-eyebrow{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  font-size:.74rem; color:var(--mm-muted); }
.mm-stat{ font-family:var(--mm-display); font-weight:700; line-height:.95; letter-spacing:.01em; color:#fff; }

/* login / brand hero */
.mm-hero{ text-align:center; padding:1.25rem 0 1rem; position:relative; }
.mm-hero .mm-emblem{ width:5.25rem; height:5.25rem; margin:0 auto .85rem;
  filter:drop-shadow(0 10px 34px rgba(var(--mm-accent-rgb),.55)); }
.mm-hero .mm-word{ font-family:var(--mm-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:2.15rem; line-height:1; color:#fff; }
.mm-hero .mm-word b{ color:var(--mm-accent); }
.mm-hero .mm-tag{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.24em;
  font-size:.74rem; color:var(--mm-muted); margin-top:.5rem; }

/* subtle mat-circle crimson glow at the top of every screen */
.mm-matglow{ position:fixed; top:0; left:0; right:0; height:46vh; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 70% at 50% -6%, rgba(var(--mm-accent-rgb),.13), transparent 72%); }

/* avatars with a crimson ring */
.mm-avatar{ border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--mm-accent); }
.mm-avatar-ph{ border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--mm-display); font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--mm-accent-hi),var(--mm-accent-lo)); box-shadow:0 0 0 2px var(--mm-accent); }

/* scoreboard sub-stats row (pins / win% / etc.) */
.mm-substats{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.mm-substat .n{ font-family:var(--mm-display); font-weight:700; font-size:1.35rem; color:#fff; line-height:1; }
.mm-substat .l{ font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:var(--mm-muted); margin-top:.15rem; }

/* quick-action tiles */
.mm-tile{ display:flex; flex-direction:column; justify-content:center; gap:.1rem; min-height:74px;
  border-radius:.9rem; border:1px solid var(--mm-border); background:var(--mm-surface); color:var(--mm-text);
  text-decoration:none; padding:.7rem .95rem; }
.mm-tile:hover{ border-color:var(--mm-border-2); color:#fff; text-decoration:none; }
.mm-tile.primary{ background:linear-gradient(135deg,var(--mm-accent-hi),var(--mm-accent-lo));
  border-color:var(--mm-accent); color:#fff; box-shadow:0 8px 20px -10px rgba(var(--mm-accent-rgb),.7); }
.mm-tile .t{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:1.02rem; line-height:1.1; }
.mm-tile .s{ font-size:.72rem; opacity:.78; }
.mm-tile.disabled{ opacity:.45; pointer-events:none; }

/* ---- vertical timeline (nutrition day-by-day prep, etc.) ----
   each <li class="mm-tl" style="--mm-tl-c:<phase color>"> rides a rail with a
   glowing phase dot; the card sits to its right. */
.mm-timeline{ position:relative; list-style:none; margin:0; padding-left:1.75rem; }
.mm-timeline::before{ content:""; position:absolute; left:6px; top:.5rem; bottom:.5rem;
  width:2px; border-radius:2px;
  background:linear-gradient(var(--mm-border-2), var(--mm-border)); }
.mm-tl{ position:relative; margin-bottom:.7rem; }
.mm-tl::before{ content:""; position:absolute; left:-1.75rem; top:.3rem; width:15px; height:15px;
  border-radius:50%; background:var(--mm-tl-c, var(--mm-muted));
  box-shadow:0 0 0 3px var(--mm-bg), 0 0 11px -1px var(--mm-tl-c, transparent); }
.mm-tl .card{ box-shadow:0 1px 2px rgba(0,0,0,.4); }
.mm-tl-phase{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:.72rem; color:var(--mm-tl-c, var(--mm-muted)); }
.mm-k{ font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:var(--mm-muted);
  font-family:var(--mm-display); font-weight:600; }

/* locked tool tile (dashboard) — dimmed but still tappable to billing */
.mm-tile.locked{ opacity:.62; }
.mm-tile .lock{ font-size:.64rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mm-accent-hi); font-family:var(--mm-display); font-weight:600; }

/* macro stat chips (nutrition) */
.mm-macro{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.mm-macro .n{ font-family:var(--mm-display); font-weight:700; font-size:1.5rem; color:#fff; line-height:1; }
.mm-macro .l{ font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:var(--mm-muted); margin-top:.2rem; }

/* ---- responsive data tables: stack into cards on mobile ----
   add class "mm-cards" to a <table> and data-label="…" to each <td>.
   Rich cells (forms, button rows) get class "mm-stack". */
@media (max-width:991.98px){
  .table-responsive:has(table.mm-cards){ overflow-x:visible; }
  table.mm-cards{ border:0; }
  table.mm-cards thead{ display:none; }
  table.mm-cards, table.mm-cards tbody, table.mm-cards tr, table.mm-cards td{ display:block; width:100%; }
  table.mm-cards tr{
    background:var(--mm-surface); border:1px solid var(--mm-border); border-radius:.9rem;
    margin-bottom:.8rem; padding:.35rem .9rem; box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  table.mm-cards td{
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:.5rem 0 !important; border:0; border-bottom:1px solid var(--mm-border); text-align:right;
  }
  table.mm-cards tr td:last-child{ border-bottom:0; }
  table.mm-cards td::before{
    content:attr(data-label); font-family:var(--mm-display); text-transform:uppercase;
    letter-spacing:.06em; font-size:.68rem; font-weight:600; color:var(--mm-muted);
    text-align:left; white-space:nowrap; flex:0 0 auto;
  }
  table.mm-cards td.mm-stack{ display:block; text-align:left; }
  table.mm-cards td.mm-stack::before{ display:block; margin-bottom:.55rem; }
  table.mm-cards td.mm-stack .d-flex{ justify-content:flex-start; }
  table.mm-cards td.mm-stack [style*="min-width"]{ min-width:0 !important; }
  table.mm-cards td.mm-stack [style*="width:9rem"],
  table.mm-cards td.mm-stack select[style*="width:auto"]{ width:auto !important; }
}

/* ============================================================
   Brand mark (Will's logo) + marketing landing
   ============================================================ */
.mm-mark{ display:block; flex:0 0 auto; color:var(--mm-accent); }
.mm-brand .mm-mark{ height:1.35rem; width:auto; color:#fff; } /* header: white reads at small size (crimson blobs into a box) */
.mm-mark--hero{ height:6.25rem; width:auto; margin:0 auto;  /* CENTER the block */
  color:var(--mm-accent);
  filter: drop-shadow(0 14px 38px rgba(var(--mm-accent-rgb),.55)); }

/* keep the brand lockup tight now that the mark is wider than the old MM circle */
.mm-brand{ gap:.5rem; }

.mm-land-hero{ padding:3.1rem 1rem 2.2rem; text-align:center; }
.mm-land-hero .mm-word{ font-family:var(--mm-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:2.5rem; line-height:1; color:#fff; margin-top:1rem; }
.mm-land-hero .mm-word b{ color:var(--mm-accent); }
.mm-land-tag{ font-family:var(--mm-display); text-transform:uppercase; letter-spacing:.26em;
  font-size:.76rem; color:var(--mm-muted); margin-top:.55rem; }
.mm-land-h1{ font-family:var(--mm-display); font-weight:700; font-size:2.55rem; line-height:1.02;
  letter-spacing:.005em; margin:1.4rem auto .8rem; max-width:16ch; }
.mm-land-sub{ max-width:620px; margin:0 auto; color:var(--mm-muted); font-size:1.08rem; line-height:1.5; }

.mm-feat{ height:100%; background:var(--mm-surface); border:1px solid var(--mm-border);
  border-radius:1rem; padding:1.35rem 1.25rem; }
.mm-feat .ic{ width:2.3rem; height:2.3rem; color:var(--mm-accent-hi); margin-bottom:.7rem; stroke-width:1.9; }
.mm-feat h3{ font-family:var(--mm-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.1rem; margin:0 0 .35rem; }
.mm-feat p{ color:var(--mm-muted); font-size:.9rem; line-height:1.45; margin:0; }

.mm-cta{ margin:3.2rem auto 1rem; max-width:760px; padding:2.6rem 1.4rem; border-radius:1.4rem; text-align:center;
  background:linear-gradient(180deg, rgba(var(--mm-accent-rgb),.14), rgba(var(--mm-accent-rgb),.02));
  border:1px solid rgba(var(--mm-accent-rgb),.22); }
.mm-cta h2{ font-size:1.9rem; margin:0 0 .5rem; }
.mm-cta p{ color:var(--mm-muted); max-width:46ch; margin:0 auto 1.3rem; }

@media (max-width:575.98px){
  .mm-land-h1{ font-size:2.05rem; } .mm-land-hero .mm-word{ font-size:2.05rem; }
  .mm-mark--hero{ height:4.9rem; } .mm-cta h2{ font-size:1.55rem; }
}