/* Vita Health 365 — /mypage shell styles.
 *
 * Visual identity mirrors /admin/index.html: dark sidebar (#1A2418)
 * + cream backdrop (--cream) + Inter sans-serif body + Fraunces
 * serif headings. We rely on the global tokens declared in
 * /assets/styles.css (--forest, --paper, --cream, --peach, etc.) so
 * the portal and the admin console share one palette.
 *
 * The HTML class names stay backward-compatible (.mp-app, .mp-side,
 * .mp-card, etc.) to keep churn out of the page templates — but their
 * visual treatment is entirely redefined here.
 */

/* Local layout-only tokens — kept narrow on purpose so any color or
   typography drift gets caught at /assets/styles.css. */
:root {
  /* Sidebar width is variable: 64px collapsed (default, spec §3.2),
     240px expanded with labels + wellness sub-nav. The width is
     driven by --mp-sidebar-w which we override on the .mp-app
     wrapper when the sidebar enters expanded state. Mobile (<881px)
     hides the sidebar and shows the bottom-bar regardless. */
  --mp-sidebar-w: 64px;
  --mp-sidebar-w-collapsed: 64px;
  --mp-sidebar-w-expanded: 240px;
  --mp-bottom-h: 64px;
  --mp-radius: 18px;
  --mp-radius-sm: 10px;
  --mp-sidebar-bg: #2F3A2E;

  /* Single typography stack used everywhere — headlines, body, badges,
     buttons. Overrides the global --sans (Inter) and --serif (Fraunces)
     for /mypage so the portal reads in one consistent face. Noto Sans
     KR keeps Korean glyphs sharp; Noto Sans handles Latin + Chinese. */
  --mp-font: 'Noto Sans', 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--mp-font);
  font-size: 16px;          /* legible baseline; everything else relative */
  -webkit-font-smoothing: antialiased;
}
/* Force Noto Sans on every descendant that explicitly set font-family
   via inline styles or page-local <style> blocks. */
.mp-app, .mp-app * { font-family: var(--mp-font); }
a { color: inherit; }

/* ============================================================================
   Shell — dark sidebar (≥881px) + main column
   Mobile (<881px) collapses to single column with a bottom bar
   ============================================================================ */
.mp-app {
  display: grid;
  grid-template-columns: var(--mp-sidebar-w) 1fr;
  min-height: 100vh;
  grid-template-areas: "side main";
}
@media (max-width: 880px) {
  .mp-app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr var(--mp-bottom-h);
    grid-template-areas: "main" "bottom";
  }
}

/* ---- Sidebar (toggle-able: 64px collapsed / 240px expanded) ----
   Dark green column. Top: brand (vertical "VITA · 365" when
   collapsed, horizontal "Vita Health 365" when expanded) + a
   chevron toggle button that flips the state and persists it to
   localStorage. Mobile hides this and shows the bottom bar. */
.mp-side {
  grid-area: side;
  background: var(--mp-sidebar-bg);
  color: var(--paper);
  padding: 14px 0 18px;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: width .2s ease;
}
.mp-app[data-sidebar-expanded="true"] {
  grid-template-columns: var(--mp-sidebar-w-expanded) 1fr;
}
.mp-app[data-sidebar-expanded="true"] .mp-side {
  align-items: stretch;
  padding: 14px 14px 18px;
}
@media (max-width: 880px) { .mp-side { display: none; } }

/* Toggle button (chevron). 40x40 — same hit-target as the nav rows
   so it reads as a primary control, not a hidden affordance. Sits
   at the top of the sidebar with breathing room before the brand. */
.mp-side-toggle {
  background: transparent;
  border: none;
  color: #B8BAA8;
  cursor: pointer;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
  transition: background .15s ease, color .15s ease;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-toggle {
  align-self: flex-end;
  margin: 0 0 14px;
}
.mp-side-toggle:hover { background: rgba(255,255,255,.06); color: #F5EFE3; }
.mp-side-toggle:focus-visible { outline: 2px solid #D9B775; outline-offset: 2px; }
.mp-side-toggle i { font-style: normal; }

/* Brand: rotated vertical when collapsed, horizontal when expanded.
   We render both variants in the markup and toggle which is visible
   via attribute selectors so there's no JS swap. */
.mp-side-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  margin: 8px 0 22px;
}
.mp-side-brand:focus-visible { outline: 2px solid #D9B775; outline-offset: 4px; border-radius: 4px; }
.mp-side-brand-text {
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: 14px;
  color: #D9B775;
  letter-spacing: 1.5px;
  white-space: nowrap;
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: center;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-brand {
  height: auto;
  margin: 0 0 18px;
  justify-content: flex-start;
}
.mp-side-brand-full {
  display: none;
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: 18px;
  color: #F5EFE3;
  font-weight: 500;
  padding: 0 6px;
}
.mp-side-brand-full .mp-brand-365 {
  color: #D9B775;
  font-style: normal;
  font-weight: 500;
  margin-left: 4px;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-brand-text { display: none; }
.mp-app[data-sidebar-expanded="true"] .mp-side-brand-full { display: inline-block; }
.mp-app[data-sidebar-expanded="true"] .mp-side-brand {
  margin-top: 4px;
  text-align: left;
}

/* Nav rows. Two layouts:
   collapsed: 40x40 centered icon
   expanded:  full-width row, icon left + label right */
.mp-nav { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.mp-app[data-sidebar-expanded="true"] .mp-nav { gap: 4px; }
.mp-app[data-sidebar-expanded="true"] .mp-nav { align-items: stretch; }

.mp-nav > a, .mp-nav-group-head {
  width: 40px; height: 40px;
  border-radius: 12px;
  color: #8B907F;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; user-select: none;
  gap: 12px;
  transition: background .15s ease, color .15s ease;
  font: inherit;
  border: none;
  background: transparent;
  margin: 0 auto;
}
.mp-app[data-sidebar-expanded="true"] .mp-nav > a,
.mp-app[data-sidebar-expanded="true"] .mp-nav-group-head {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  padding: 0 12px;
  justify-content: flex-start;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.mp-nav > a:hover, .mp-nav-group-head:hover { background: rgba(255,255,255,.06); color: #F5EFE3; }
.mp-nav > a.active, .mp-nav-group-head.active {
  background: rgba(217, 183, 117, 0.18);
  color: #F5EFE3;
}
.mp-nav > a:focus-visible, .mp-nav-group-head:focus-visible {
  outline: 2px solid #D9B775;
  outline-offset: 2px;
}

/* Icon size + reset i tag's default italic. */
.mp-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-style: normal;
  flex-shrink: 0;
}

/* Labels render only in expanded mode. */
.mp-nav-label { display: none; white-space: nowrap; }
.mp-app[data-sidebar-expanded="true"] .mp-nav-label { display: inline; }

/* Wellness group: only the sub-nav body renders in expanded mode.
   In collapsed mode the group still functions as a single Activity
   icon link to /mypage/wellness. */
.mp-nav-group { display: contents; }
.mp-app[data-sidebar-expanded="true"] .mp-nav-group { display: flex; flex-direction: column; gap: 2px; }
.mp-nav-group-body { display: none; }
.mp-app[data-sidebar-expanded="true"] .mp-nav-group-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 0 6px 14px; margin: 2px 0 4px 18px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.mp-nav-group-body a {
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.62);
  text-decoration: none;
}
.mp-nav-group-body a:hover { background: rgba(255,255,255,.06); color: var(--paper); }
.mp-nav-group-body a.active { background: rgba(255,255,255,.10); color: var(--paper); }

.mp-side-foot {
  margin-top: auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  width: 100%;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-foot {
  align-items: stretch;
  gap: 10px;
}
.mp-side-lang {
  display: flex; flex-direction: column;
  gap: 2px;
  font-size: 11px;
  align-items: center;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-lang {
  flex-direction: row;
  justify-content: center;
  gap: 4px;
}
.mp-side-lang button {
  width: 32px; height: 22px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.45);
  font: inherit;
  cursor: pointer;
  border-radius: 5px;
  padding: 0;
  letter-spacing: 0.5px;
}
.mp-side-lang button:hover { color: var(--paper); background: rgba(255,255,255,.06); }
.mp-side-lang button.active { color: #D9B775; background: rgba(217, 183, 117, 0.14); }
.mp-side-lang button:focus-visible { outline: 2px solid #D9B775; outline-offset: 1px; }

.mp-side-signout {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: #8B907F;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  font-size: 18px;
  transition: background .15s ease, color .15s ease;
}
.mp-app[data-sidebar-expanded="true"] .mp-side-signout {
  width: 100%;
  padding: 0 12px;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
}
.mp-side-signout:hover { background: rgba(255,255,255,.06); color: #F5EFE3; }
.mp-side-signout:focus-visible { outline: 2px solid #D9B775; outline-offset: 2px; }

/* ---- Mobile bottom bar (dark to match sidebar) ---- */
.mp-bottom {
  grid-area: bottom;
  display: none;
  background: var(--mp-sidebar-bg); color: var(--paper);
  border-top: 1px solid rgba(255,255,255,.08);
  position: sticky; bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 880px) { .mp-bottom { display: grid; grid-template-columns: repeat(6, 1fr); } }
.mp-bottom a {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: rgba(255,255,255,.7);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; padding: 14px 2px;
  letter-spacing: .01em;
}
.mp-bottom a.active { color: var(--peach); }

/* ---- Main column ---- */
.mp-main {
  grid-area: main;
  padding: clamp(20px, 3vw, 36px);
  max-width: 1400px; width: 100%;
}
@media (max-width: 880px) {
  .mp-main { padding: 16px clamp(16px, 4vw, 28px) 40px; max-width: 100%; }
}

/* ---- Mobile-only top brand bar (sidebar hidden on <881px) ---- */
.mp-topbar {
  display: none;
  align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
@media (max-width: 880px) { .mp-topbar { display: flex; } }
.mp-topbar .mp-brand {
  font-family: var(--mp-font); font-weight: 600;
  font-size: 20px; color: var(--forest);
}
.mp-topbar .mp-brand i { color: var(--terracotta); font-style: normal; font-weight: 500; }
.mp-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--forest); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
}

/* ============================================================================
   Page-level: page header (h1 + meta pill), reusable cards
   ============================================================================ */

.mp-page-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.mp-h1 {
  font-family: var(--mp-font); font-weight: 600;
  font-size: clamp(28px, 3.2vw, 36px); line-height: 1.2;
  color: var(--forest); margin: 0;
  letter-spacing: -0.01em;
}
.mp-h2 {
  font-family: var(--mp-font); font-weight: 600;
  font-size: 20px; line-height: 1.3;
  color: var(--forest); margin: 0 0 14px;
}
.mp-lede { color: var(--ink-2); font-size: 16px; margin: 0 0 22px; line-height: 1.55; }
.mp-pill-time {
  font-size: 14px; color: var(--ink-2); background: var(--paper);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-2);
}
.mp-pill-time strong { color: var(--forest); }

/* Card / panel — admin .panel pattern */
.mp-card {
  background: var(--paper);
  border-radius: var(--mp-radius);
  border: 1px solid var(--border-2);
  margin-bottom: 24px;
  overflow: hidden;
}
.mp-card + .mp-card { margin-top: 0; }   /* gap controlled by margin-bottom */
.mp-card-head {
  padding: 18px 22px; border-bottom: 1px solid var(--border-2);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.mp-card-head h2 {
  font-size: 19px; font-family: var(--mp-font); font-weight: 600;
  color: var(--forest); margin: 0;
}
.mp-card-body { padding: 18px 22px; }
.mp-card-body.flush { padding: 0; }
/* Backwards-compat: legacy templates use the .mp-card itself as the
   padded container instead of a separate .mp-card-body. Apply the
   padding directly unless an explicit head/body split is present. */
.mp-card:not(:has(.mp-card-head, .mp-card-body)) { padding: 22px; }

/* Stat grid — admin .stat-row */
.mp-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin: 0 0 24px;
}
@media (max-width: 1100px) { .mp-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .mp-stat-grid { grid-template-columns: 1fr; } }
.mp-stat {
  background: var(--paper); border-radius: var(--mp-radius);
  border: 1px solid var(--border-2); padding: 22px;
}
.mp-stat-eyebrow {
  font-size: 12.5px; color: var(--moss); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.mp-stat-value {
  font-family: var(--mp-font); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 32px); color: var(--forest);
  line-height: 1.15;
}
.mp-stat-sub { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }

/* Status pill — admin .status-pill */
.mp-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
}
.mp-badge.scheduled { background: #D4E8C9; color: #2C3D2A; }
.mp-badge.completed { background: var(--cream-2); color: var(--moss); }
.mp-badge.cancelled { background: #F4D6C2; color: #7c3a26; }
.mp-badge.refunded  { background: #E0D0E8; color: #5d2e7c; }
.mp-badge.no_show   { background: #F4D6C2; color: #7c3a26; }
.mp-badge.paid      { background: #B8E0C2; color: #1d4a30; font-weight: 600; }
.mp-badge.invoiced  { background: #F4DDB8; color: #7c5a26; }

/* Buttons */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--forest); color: var(--paper);
  border: none; padding: 11px 20px; border-radius: 10px;
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  text-decoration: none; gap: 6px;
}
.mp-btn:hover:not(:disabled) { background: var(--forest-2); }
.mp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-btn.secondary {
  background: transparent; color: var(--forest);
  border: 1px solid var(--border);
}
.mp-btn.secondary:hover:not(:disabled) {
  background: var(--cream); border-color: var(--forest); color: var(--forest);
}

/* Empty / error / banner / skeleton */
.mp-empty {
  padding: 36px 24px; text-align: center; color: var(--muted);
  font-size: 15px;
}
.mp-empty h3 {
  color: var(--forest); margin: 0 0 6px;
  font-family: var(--mp-font); font-weight: 600; font-size: 18px;
}
.mp-error {
  background: #FCE2E2; color: #8a1d1d;
  padding: 12px 16px; border-radius: var(--mp-radius-sm);
  font-size: 14px; margin: 10px 0;
  border: 1px solid #f0caca;
}
.mp-banner {
  background: #F4DDB8; color: #7c5a26;
  padding: 12px 16px; border-radius: var(--mp-radius-sm);
  font-size: 13.5px; margin-bottom: 18px;
  border: 1px solid #e6c896;
}
.mp-banner a { color: #5a4519; text-decoration: underline; }

.mp-skel {
  background: linear-gradient(90deg, var(--border-2) 0%, var(--cream-2) 50%, var(--border-2) 100%);
  background-size: 200% 100%;
  animation: mp-shimmer 1.2s linear infinite;
  border-radius: 6px; color: transparent;
}
@keyframes mp-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* i18n */
[data-lang] { display: none; }
[data-lang].active { display: inline; }

/* Auth gate */
html.mp-auth-pending body { visibility: hidden; }

/* ============================================================================
   Signed-out state — inline sign-in card replaces the portal shell.
   mypage.js sets <html class="mp-signed-out"> after /mypage/summary 401s,
   hides .mp-app, and mounts #mp-signin-mount with the sign-in card.
   ============================================================================ */
html.mp-signed-out .mp-app { display: none !important; }
html:not(.mp-signed-out) #mp-signin-mount { display: none; }

#mp-signin-mount {
  min-height: 100vh;
  background: var(--cream, #FBF7EE);
  padding: 48px 22px 80px;
  box-sizing: border-box;
}
.mp-signin-shell { max-width: 520px; margin: 0 auto; }
.mp-signin-header {
  text-align: center; margin-bottom: 28px;
}
.mp-signin-header .mp-signin-brand {
  font-family: Fraunces, serif; font-size: 26px; color: var(--ink, #1B1F18);
  text-decoration: none; font-weight: 400;
}
.mp-signin-header .mp-signin-brand i { font-style: italic; color: #b25c3d; }
.mp-signin-header .mp-signin-tagline {
  display: block; font-size: 11px; color: var(--quiet, #80847A);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px;
}
.mp-signin-card {
  background: #FFFFFF; border: 1px solid var(--border-2, #E6DFCF);
  border-radius: 18px; padding: 32px;
}
.mp-signin-eyebrow {
  font-size: 12px; color: var(--quiet, #80847A); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 10px;
}
.mp-signin-h1 {
  font-family: Fraunces, serif; font-weight: 400;
  font-size: clamp(26px, 4vw, 32px); line-height: 1.2;
  color: var(--ink, #1B1F18); margin: 0 0 10px;
}
.mp-signin-lede {
  color: var(--quiet, #80847A); font-size: 14px; line-height: 1.6;
  margin: 0 0 18px;
}
.mp-signin-step { display: none; }
.mp-signin-step.active { display: block; animation: mp-signin-fade 0.3s ease; }
@keyframes mp-signin-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; }
}
.mp-signin-field label {
  display: block; font-size: 13px; color: var(--ink, #1B1F18);
  margin-bottom: 6px; font-weight: 500;
}
.mp-signin-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-2, #E6DFCF);
  border-radius: 12px; font-size: 15px; font-family: inherit;
  background: var(--cream, #FBF7EE); color: var(--ink, #1B1F18);
  box-sizing: border-box;
}
.mp-signin-input:focus {
  outline: none; border-color: var(--moss, #2C3D2A);
}
.mp-signin-otp-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; margin: 16px 0 12px;
}
.mp-signin-otp-grid input {
  width: 100%; min-width: 0; box-sizing: border-box;
  text-align: center; font-size: 22px; font-family: Fraunces, serif;
  padding: 14px 0; height: 56px;
  border: 1px solid var(--border-2, #E6DFCF); border-radius: 12px;
  background: var(--cream, #FBF7EE); color: var(--ink, #1B1F18);
  font-variant-numeric: tabular-nums;
}
.mp-signin-otp-grid input:focus {
  outline: 2px solid var(--moss, #2C3D2A); outline-offset: 1px;
  border-color: var(--moss, #2C3D2A);
}
@media (max-width: 420px) {
  .mp-signin-otp-grid { gap: 6px; }
  .mp-signin-otp-grid input { font-size: 18px; height: 50px; padding: 12px 0; }
}
.mp-signin-block-btn {
  display: block; width: 100%;
  background: var(--moss, #2C3D2A); color: white; border: none;
  padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 500;
  cursor: pointer; margin-top: 18px;
}
.mp-signin-block-btn:hover:not(:disabled) { background: #3F5236; }
.mp-signin-block-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-signin-link-btn {
  background: none; border: none; padding: 4px 0;
  color: var(--moss, #2C3D2A); font-family: inherit;
  font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.mp-signin-link-btn:disabled {
  color: var(--quiet, #80847A); text-decoration: none; cursor: not-allowed;
}
.mp-signin-otp-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; gap: 12px; flex-wrap: wrap;
}
.mp-signin-countdown {
  font-size: 12px; color: var(--quiet, #80847A); margin-top: 8px;
}
.mp-signin-error {
  background: #FCE2E2; color: #8a1d1d;
  padding: 12px 16px; border-radius: 12px;
  font-size: 14px; margin: 14px 0; border: 1px solid #f0caca;
  display: none;
}
.mp-signin-error.show { display: block; }
.mp-signin-success {
  background: #E6EBDD; border: 1px solid #c7d6b8; color: var(--ink, #1B1F18);
  padding: 18px 20px; border-radius: 14px;
  text-align: center; font-family: Fraunces, serif; font-weight: 400; font-size: 19px;
}
.mp-signin-foot {
  text-align: center; font-size: 13px; color: var(--quiet, #80847A);
  margin-top: 22px;
}
.mp-signin-foot a { color: var(--moss, #2C3D2A); text-decoration: underline; }
.mp-signin-tabs {
  display: flex; background: var(--cream, #FBF7EE); padding: 4px;
  border-radius: 10px; margin-bottom: 22px; gap: 4px;
  border: 1px solid var(--border-2, #E6DFCF);
}
.mp-signin-tab {
  flex: 1; background: transparent; border: none; padding: 10px 14px;
  border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--quiet, #80847A); cursor: pointer;
}
.mp-signin-tab.active {
  background: #FFFFFF; color: var(--ink, #1B1F18);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.mp-signin-tabs.hidden { display: none; }
.mp-signin-idle-banner {
  background: #FFF6E5; border: 1px solid #E8C97A;
  color: #6b551a; padding: 12px 16px; border-radius: 12px;
  font-size: 14px; line-height: 1.5; margin-bottom: 18px;
}

/* ============================================================================
   Tables (used by /mypage/bookings and /mypage/billing payment history)
   Mirrors admin's table styling.
   ============================================================================ */
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table th, .mp-table td {
  padding: 14px 22px; text-align: left; font-size: 15px; vertical-align: middle;
}
.mp-table th {
  background: var(--cream); color: var(--moss); font-weight: 600;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-2);
}
.mp-table td { border-bottom: 1px solid var(--border-2); color: var(--ink-2); }
.mp-table tr:last-child td { border-bottom: none; }
.mp-table tr:hover td { background: rgba(232,184,138,.08); }

/* Scroll on narrow screens so the table doesn't blow out the page. */
.mp-table-scroll { overflow-x: auto; }

/* Filter row (program chips on bookings page) */
.mp-filter-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.mp-chip {
  background: var(--paper); border: 1px solid var(--border-2);
  color: var(--ink-2);
  padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.mp-chip:hover { border-color: var(--forest); color: var(--forest); }
.mp-chip.active {
  background: var(--forest); color: var(--paper); border-color: var(--forest);
}

/* ---- Messaging (ported from /account/lookup.html) ----------------------
 * The thread is keyed on the user's phone, so cookie-session users and
 * phone-OTP guests see the same conversation when they share a phone.
 * Layout mirrors the lookup-page composer 1:1 — bubbles, composer,
 * counter, status. Heights are slightly larger here because /mypage has
 * more vertical room than the lookup card.
 */
.mp-msg-thread {
  background: var(--paper); border: 1px solid var(--border-2); border-radius: 16px;
  padding: 16px; height: 480px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  scroll-behavior: smooth;
}
.mp-msg-thread .mp-msg-empty {
  color: var(--muted); font-size: 13px; text-align: center; padding: 20px 0;
}
.mp-msg-bubble {
  max-width: 78%; padding: 10px 14px; border-radius: 18px;
  font-size: 14.5px; line-height: 1.45; word-wrap: break-word;
}
.mp-msg-bubble.inbound  { align-self: flex-end;   background: #2C7A4F; color: #FBF7EE; border-bottom-right-radius: 6px; }
.mp-msg-bubble.outbound { align-self: flex-start; background: #E6E1D4; color: #1B1F18; border-bottom-left-radius: 6px; }
.mp-msg-bubble.system {
  align-self: center; max-width: 92%;
  background: #FFF6E5; color: #6b551a; border: 1px solid #E8C97A;
  font-size: 13px; line-height: 1.45; font-style: italic;
  border-radius: 12px; padding: 10px 14px; text-align: center;
}
.mp-msg-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mp-msg-bubble.inbound + .mp-msg-meta  { align-self: flex-end; }
.mp-msg-bubble.outbound + .mp-msg-meta { align-self: flex-start; }
.mp-msg-bubble.system + .mp-msg-meta   { align-self: center; }

.mp-msg-composer { margin-top: 14px; }
.mp-msg-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.mp-msg-composer textarea {
  flex: 1; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--paper);
  border-radius: 12px; padding: 12px 14px;
  font-family: inherit; font-size: 16px;
  min-height: 48px; max-height: 200px; resize: none; line-height: 1.45;
}
.mp-msg-composer textarea:focus {
  border-color: var(--forest); outline: none;
  box-shadow: 0 0 0 3px rgba(44,61,42,.1);
}
.mp-msg-composer .mp-btn { flex-shrink: 0; align-self: stretch; white-space: nowrap; }
@media (max-width: 640px) {
  .mp-msg-composer-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .mp-msg-composer .mp-btn { align-self: auto; padding: 12px 18px; }
}
.mp-msg-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.mp-msg-counter.over { color: #C8674C; font-weight: 500; }
.mp-msg-status { font-size: 12px; color: var(--forest); margin-top: 6px; }
.mp-msg-status.error { color: #C8674C; }
.mp-msg-disclaimer { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.mp-msg-shortcut code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}

/* "Phone required" inline gate shown when an email-only user opens
 * /mypage/messages — they need to add a phone before they can message. */
.mp-msg-phone-gate {
  background: #FFF6E5; border: 1px solid #E8C97A; color: #6b551a;
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
  font-size: 14px; line-height: 1.55;
}
.mp-msg-phone-gate .mp-btn { margin-top: 10px; }