/* =============================================================================
   SMPC: full Material Design 3 stylesheet (experimental, parallel to main.css).
   Color roles from css/m3-tokens.css (generated from the seal's red/blue/gold).
   This is the "all the way M3" look for comparison against the booking-styled UI.
   ============================================================================= */
@import url('m3-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

:root {
  color-scheme: light dark;
  /* Elevation (key + ambient) */
  --md-e0: none;
  --md-e1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-e2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-e3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  /* Shape: dialed back from default M3 (less pill, smaller corners) */
  --md-r-xs: 4px; --md-r-sm: 6px; --md-r-md: 8px; --md-r-lg: 12px; --md-r-xl: 16px;
  --md-r-btn: 10px;   /* buttons: rounded, not full-pill */
  --md-r-full: 9999px; /* reserved for avatars/round controls */
  /* State opacities */
  --md-hover: .08; --md-focus: .10; --md-press: .10;
  /* Motion */
  --md-dur: 200ms; --md-ease: cubic-bezier(0.2, 0, 0, 1);
  --md-font: 'DM Sans', system-ui, sans-serif;
  /* Brand-locked trio: the three seal colors at full strength, in BOTH light and
     dark, independent of the M3 roles (whose tone-40 goes pink/brown and whose
     containers are pale). Use these wherever a brand color carries meaning. */
  --md-brand: #c4202a; --md-on-brand: #ffffff;          /* red  */
  --md-brand-blue: #1c5ba8; --md-on-brand-blue: #ffffff; /* blue */
  --md-brand-gold: #caa73c; --md-on-brand-gold: #241c00; /* gold: bright, with dark text (it's a light colour) */
}
:root[data-theme="dark"] { --md-brand: #e03a44; --md-brand-gold: #d8b441; } /* red + gold brighten on dark; gold keeps dark text. :root so the theme-toggle buttons don't re-theme themselves */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --md-brand: #e03a44; --md-brand-gold: #d8b441; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--md-font);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; vertical-align: middle; }

/* ── Type scale ──────────────────────────────────────────────────────────── */
.md-display-large  { font-size: 3.5625rem; line-height: 4rem;    font-weight: 400; letter-spacing: -0.015625em; }
.md-display-small  { font-size: 2.25rem;   line-height: 2.75rem; font-weight: 400; }
.md-headline-large { font-size: 2rem;      line-height: 2.5rem;  font-weight: 400; }
.md-headline-small { font-size: 1.5rem;    line-height: 2rem;    font-weight: 400; }
.md-title-large    { font-size: 1.375rem;  line-height: 1.75rem; font-weight: 400; }
.md-title-medium   { font-size: 1rem;      line-height: 1.5rem;  font-weight: 500; letter-spacing: .009em; }
.md-title-small    { font-size: .875rem;   line-height: 1.25rem; font-weight: 500; letter-spacing: .007em; }
.md-body-large     { font-size: 1rem;      line-height: 1.5rem;  font-weight: 400; letter-spacing: .031em; }
.md-body-medium    { font-size: .875rem;   line-height: 1.25rem; font-weight: 400; letter-spacing: .018em; }
.md-body-small     { font-size: .75rem;    line-height: 1rem;    font-weight: 400; letter-spacing: .033em; }
.md-label-large    { font-size: .875rem;   line-height: 1.25rem; font-weight: 500; letter-spacing: .007em; }
.md-label-medium   { font-size: .75rem;    line-height: 1rem;    font-weight: 500; letter-spacing: .042em; }

.t-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.t-primary { color: var(--md-sys-color-primary); }

/* ── Buttons (state layer via ::before = on-color overlay) ───────────────── */
.md-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; border-radius: var(--md-r-btn); padding: 8px 18px;
  font-family: inherit; font-size: .875rem; font-weight: 500; letter-spacing: .007em;
  transition: box-shadow var(--md-dur) var(--md-ease);
}
.md-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 100ms var(--md-ease); z-index: -1; }
.md-btn:hover::before { opacity: var(--md-hover); }
.md-btn:focus-visible::before { opacity: var(--md-focus); }
.md-btn:active::before { opacity: var(--md-press); }
.md-btn .material-symbols-outlined { font-size: 18px; }

.md-btn--filled  { background: var(--md-brand); color: var(--md-on-brand); }
.md-btn--filled:hover { box-shadow: var(--md-e1); }
.md-btn--tonal   { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-btn--outlined{ background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.md-btn--text    { background: transparent; color: var(--md-sys-color-primary); padding: 10px 12px; }
.md-btn--block   { width: 100%; }

.md-fab {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer; border-radius: var(--md-r-md); padding: 0 18px; height: 48px;
  background: var(--md-brand); color: var(--md-on-brand);
  font-family: inherit; font-size: .875rem; font-weight: 500; box-shadow: var(--md-e3);
}
.md-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 100ms; z-index: -1; }
.md-fab:hover::before { opacity: var(--md-hover); }

/* ── Text fields (filled style) ──────────────────────────────────────────── */
.md-field { position: relative; display: flex; flex-direction: column; }
.md-field > label { font-size: .75rem; font-weight: 500; letter-spacing: .033em; color: var(--md-sys-color-on-surface-variant); margin: 0 0 6px 4px; }
.md-input {
  font-family: inherit; font-size: .9375rem; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
  border: none; border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-r-xs) var(--md-r-xs) 0 0; padding: 11px 14px;
  transition: border-color var(--md-dur) var(--md-ease), background var(--md-dur);
}
.md-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.md-input:focus { outline: none; border-bottom: 2px solid var(--md-brand); padding-bottom: 10px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.md-card { border-radius: var(--md-r-md); padding: 14px 16px; background: var(--md-sys-color-surface-container-low); }
.md-card--elevated { background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-e1); }
.md-card--filled   { background: var(--md-sys-color-surface-container-highest); }
.md-card--outlined { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.md-card--primary  { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.md-card--tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* ── Top app bar ─────────────────────────────────────────────────────────── */
.md-appbar {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
  position: sticky; top: 0; z-index: 10;
}
.md-appbar__logo { height: 26px; width: auto; object-fit: contain; }
.md-appbar__title { font-size: 1.125rem; font-weight: 500; }
.md-appbar__spacer { flex: 1; }
.md-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-brand); color: var(--md-on-brand); font-weight: 600; font-size: .85rem; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.md-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--md-r-sm);
  border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: .8125rem; font-weight: 500; }
.md-chip--active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }

/* ── List ────────────────────────────────────────────────────────────────── */
.md-list { display: flex; flex-direction: column; }
.md-list__item { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
.md-list__item + .md-list__item { border-top: 1px solid var(--md-sys-color-outline-variant); }
.md-list__lead { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-list__lead .material-symbols-outlined { font-size: 22px; }
.md-list__body { flex: 1; min-width: 0; }
.md-list__title { font-size: 1rem; }
.md-list__sub { font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); }
.md-list__amt { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Top nav (app bar + role-gated links + user menu) ────────────────────── */
.md-topnav__links { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.md-topnav__links::-webkit-scrollbar { display: none; }
.md-navlink {
  position: relative; isolation: isolate; white-space: nowrap; text-decoration: none;
  padding: 6px 12px; border-radius: var(--md-r-sm);
  color: var(--md-sys-color-on-surface-variant); font-size: .875rem; font-weight: 500; letter-spacing: .007em;
}
.md-navlink::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity 100ms var(--md-ease); z-index: -1; }
.md-navlink:hover::before { opacity: var(--md-hover); }
.md-navlink.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

.md-usermenu { position: relative; }
.md-usermenu__chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: none; background: transparent; cursor: pointer; border-radius: var(--md-r-sm); color: var(--md-sys-color-on-surface); }
.md-usermenu__chip:hover { background: var(--md-sys-color-surface-container-high); }
.md-usermenu__name { font-size: .875rem; font-weight: 500; }
.md-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 264px; z-index: 20;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  border-radius: var(--md-r-md); box-shadow: var(--md-e2); padding: 8px;
}
.md-menu__header { padding: 8px 12px; }
.md-menu__name { font-size: 1rem; font-weight: 500; }
.md-menu__role { font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); }
.md-menu__divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 8px 4px; }
.md-menu__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; }
.md-menu__item { width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 12px; border-radius: var(--md-r-sm); color: var(--md-sys-color-on-surface); font-family: inherit; font-size: .875rem; }
.md-menu__item:hover { background: var(--md-sys-color-surface-container-highest); }
.md-segmented { display: inline-flex; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-r-sm); overflow: hidden; }
.md-segmented .coord-theme-btn { border: none; background: transparent; cursor: pointer; padding: 6px 12px; font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--md-sys-color-on-surface); }
.md-segmented .coord-theme-btn:hover { background: var(--md-sys-color-surface-container-high); }
.md-segmented .coord-theme-btn.is-active { background: var(--md-brand); color: var(--md-on-brand); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}