/* ==========================================================================
   Revento — Material Design 3 Component Library
   ============================================================================
   Full M3 components with brand customization.
   Imports colors_and_type.css for tokens.
   
   Components:
     - Buttons (Filled, Filled Tonal, Outlined, Text, Elevated)
     - Icon Button
     - FAB (Small, Standard, Large, Extended)
     - Chips (Assist, Filter, Input, Suggestion)
     - Text Field (Outlined, Filled) with floating label + supporting text
     - Switch, Checkbox, Radio
     - Slider
     - Progress (Linear, Circular)
     - Cards (Filled, Outlined, Elevated)
     - Dialog
     - Snackbar
     - Badge
     - Navigation Rail, Navigation Bar, Top App Bar
     - List items
   
   Every interactive component has state layers (hover/focus/pressed)
   and meets 48×48 minimum touch target (via padding, not visual size).
   ========================================================================== */

/* ==========================================================================
   STATE LAYER UTILITY
   Used on any interactive surface via ::before pseudo
   ========================================================================== */
.md-state-layer {
  position: relative;
  isolation: isolate;
}
.md-state-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
  z-index: 0;
}
.md-state-layer > * { position: relative; z-index: 1; }
.md-state-layer:hover::before    { opacity: var(--state-hover-opacity); }
.md-state-layer:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-state-layer:active::before   { opacity: var(--state-pressed-opacity); }


/* ==========================================================================
   BUTTONS (M3 — 5 variants)
   ========================================================================== */
.md-button {
  --_fg: var(--md-on-primary);
  --_bg: var(--md-primary);
  --_border: transparent;
  --_shadow: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--md-shape-button);
  border: 1px solid var(--_border);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--md-font-plain);
  font-size: var(--label-lg-size);
  font-weight: var(--label-lg-weight);
  line-height: var(--label-lg-lh);
  letter-spacing: var(--label-lg-track);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              box-shadow var(--md-duration-short3) var(--md-easing-standard),
              color var(--md-duration-short3) var(--md-easing-standard);
  box-shadow: var(--_shadow);
}
.md-button > i { font-size: 18px; }
/* Ensure 48px hit area even for 40px visual height */
.md-button::after {
  content: '';
  position: absolute;
  inset: -4px -0;
  min-height: 48px;
}
/* State layer */
.md-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_fg);
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-button:hover::before    { opacity: var(--state-hover-opacity); }
.md-button:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-button:active::before   { opacity: var(--state-pressed-opacity); }
.md-button:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}
.md-button:disabled,
.md-button[aria-disabled="true"] {
  pointer-events: none;
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  box-shadow: none;
}

/* Filled (primary action) */
.md-button--filled {
  --_fg: var(--md-on-primary);
  --_bg: var(--md-primary);
}
.md-button--filled:hover { box-shadow: var(--md-elevation-level1); }

/* Filled Tonal (secondary action) */
.md-button--tonal {
  --_fg: var(--md-on-secondary-container);
  --_bg: var(--md-secondary-container);
}
.md-button--tonal:hover { box-shadow: var(--md-elevation-level1); }

/* Outlined */
.md-button--outlined {
  --_fg: var(--md-primary);
  --_bg: transparent;
  --_border: var(--md-outline);
}
.md-button--outlined:focus-visible { --_border: var(--md-primary); }

/* Text */
.md-button--text {
  --_fg: var(--md-primary);
  --_bg: transparent;
  padding: 0 12px;
}

/* Elevated */
.md-button--elevated {
  --_fg: var(--md-primary);
  --_bg: var(--md-surface-container-low);
  --_shadow: var(--md-elevation-level1);
}
.md-button--elevated:hover { --_shadow: var(--md-elevation-level2); }

/* Danger variant (error color role) */
.md-button--danger {
  --_fg: var(--md-on-error);
  --_bg: var(--md-error);
}


/* ==========================================================================
   ICON BUTTON (M3 — 40×40 default, 48×48 for large)
   ========================================================================== */
.md-icon-button {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-icon-button);
  background: transparent;
  color: var(--md-on-surface-variant);
  border: none;
  cursor: pointer;
  transition: color var(--md-duration-short3) var(--md-easing-standard);
}
.md-icon-button > i { font-size: 20px; }
.md-icon-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-icon-button::after {
  content: '';
  position: absolute;
  inset: -4px;
  min-height: 48px;
  min-width: 48px;
}
.md-icon-button:hover::before { opacity: var(--state-hover-opacity); }
.md-icon-button:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-icon-button:active::before { opacity: var(--state-pressed-opacity); }
.md-icon-button:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: 0;
}
/* Filled variant */
.md-icon-button--filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.md-icon-button--tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}


/* ==========================================================================
   FAB (M3)
   ========================================================================== */
.md-fab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--md-shape-fab);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border: none;
  cursor: pointer;
  box-shadow: var(--md-elevation-level3);
  transition: box-shadow var(--md-duration-short3) var(--md-easing-standard);
}
.md-fab > i { font-size: 24px; }
.md-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-fab:hover { box-shadow: var(--md-elevation-level4); }
.md-fab:hover::before { opacity: var(--state-hover-opacity); }
.md-fab:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-fab:active::before { opacity: var(--state-pressed-opacity); }
.md-fab:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}
.md-fab--small { width: 40px; height: 40px; border-radius: var(--md-shape-medium); }
.md-fab--small > i { font-size: 20px; }
.md-fab--large { width: 96px; height: 96px; border-radius: var(--md-shape-extra-large); }
.md-fab--large > i { font-size: 36px; }
.md-fab--extended {
  width: auto;
  padding: 0 20px 0 16px;
  gap: 12px;
  font-family: var(--md-font-plain);
  font-size: var(--label-lg-size);
  font-weight: var(--label-lg-weight);
  letter-spacing: var(--label-lg-track);
}


/* ==========================================================================
   CHIPS (M3 — Assist, Filter, Input, Suggestion)
   All chips: 32px height, 8px radius, 8px horizontal padding
   ========================================================================== */
.md-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--md-shape-chip);
  background: transparent;
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline);
  font-family: var(--md-font-plain);
  font-size: var(--label-lg-size);
  font-weight: var(--label-lg-weight);
  letter-spacing: var(--label-lg-track);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              border-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-chip > i { font-size: 16px; }
.md-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-chip::after {
  content: '';
  position: absolute;
  inset: -8px 0;
  min-height: 48px;
}
.md-chip:hover::before { opacity: var(--state-hover-opacity); }
.md-chip:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-chip:active::before { opacity: var(--state-pressed-opacity); }
.md-chip:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}
/* Selected state (filter/suggestion when picked) */
.md-chip--selected,
.md-chip[aria-selected="true"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
/* Elevated chip */
.md-chip--elevated {
  background: var(--md-surface-container-low);
  border-color: transparent;
  box-shadow: var(--md-elevation-level1);
}


/* ==========================================================================
   TEXT FIELD (M3 — Outlined, with floating label)
   ========================================================================== */
.md-field {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}
.md-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-text-field-outlined);
  background: transparent;
  transition: border-color var(--md-duration-short3) var(--md-easing-standard),
              border-width var(--md-duration-short3) var(--md-easing-standard);
}
.md-field__input-wrap:hover { border-color: var(--md-on-surface); }
.md-field__input-wrap:focus-within {
  border-color: var(--md-primary);
  border-width: 2px;
  padding: 0 15px;  /* compensate for border growth */
}
.md-field__input-wrap > .md-field__leading { margin-right: 12px; color: var(--md-on-surface-variant); font-size: 20px; }
.md-field__input-wrap > .md-field__trailing { margin-left: 12px; color: var(--md-on-surface-variant); font-size: 20px; }
.md-field__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--md-on-surface);
  font-family: var(--md-font-plain);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  letter-spacing: var(--body-lg-track);
  outline: none;
  padding: 16px 0;
}
.md-field__input::placeholder { color: transparent; transition: color var(--md-duration-short3) var(--md-easing-standard); }
.md-field__input-wrap:focus-within .md-field__input::placeholder { color: var(--md-on-surface-variant); }
.md-field__label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--md-on-surface-variant);
  font-family: var(--md-font-plain);
  font-size: var(--body-lg-size);
  letter-spacing: var(--body-lg-track);
  pointer-events: none;
  transition: top var(--md-duration-short4) var(--md-easing-standard),
              font-size var(--md-duration-short4) var(--md-easing-standard),
              color var(--md-duration-short4) var(--md-easing-standard);
  background: var(--md-surface);
  padding: 0 4px;
}
.md-field__leading + .md-field__input ~ .md-field__label,
.md-field--has-leading .md-field__label { left: 48px; }
.md-field__input-wrap:focus-within .md-field__label,
.md-field--filled .md-field__label {
  top: 0;
  font-size: var(--body-sm-size);
  color: var(--md-primary);
  left: 12px;
}
.md-field--has-leading .md-field__input-wrap:focus-within .md-field__label,
.md-field--has-leading.md-field--filled .md-field__label { left: 12px; }
.md-field__support {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
  letter-spacing: var(--body-sm-track);
  color: var(--md-on-surface-variant);
  padding: 4px 16px 0;
}
.md-field--error .md-field__input-wrap { border-color: var(--md-error); }
.md-field--error .md-field__label { color: var(--md-error); }
.md-field--error .md-field__support { color: var(--md-error); }


/* ==========================================================================
   CARDS (M3 — Filled, Outlined, Elevated)
   ========================================================================== */
.md-card {
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-card);
  border: 1px solid transparent;
  padding: 16px;
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              box-shadow var(--md-duration-short3) var(--md-easing-standard);
}
.md-card--filled { background: var(--md-surface-container-highest); }
.md-card--outlined { background: var(--md-surface); border-color: var(--md-outline-variant); }
.md-card--elevated { background: var(--md-surface-container-low); box-shadow: var(--md-elevation-level1); }
.md-card--interactive { cursor: pointer; position: relative; isolation: isolate; }
.md-card--interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-on-surface);
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-card--interactive:hover::before { opacity: var(--state-hover-opacity); }
.md-card--interactive:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-card--elevated.md-card--interactive:hover { box-shadow: var(--md-elevation-level2); }
.md-card--interactive:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}


/* ==========================================================================
   DIALOG (M3)
   ========================================================================== */
.md-dialog-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--md-scrim) 32%, transparent);
  display: grid;
  place-items: center;
  z-index: 1000;
}
.md-dialog {
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  border-radius: var(--md-shape-dialog);
  padding: 24px;
  box-shadow: var(--md-elevation-level3);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.md-dialog__icon {
  width: 24px; height: 24px; color: var(--md-secondary);
  margin: 0 auto;
}
.md-dialog__headline {
  font-family: var(--md-font-brand);
  font-size: var(--headline-sm-size);
  line-height: var(--headline-sm-lh);
  font-weight: var(--headline-sm-weight);
  color: var(--md-on-surface);
  margin: 0;
}
.md-dialog__body {
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--md-on-surface-variant);
  margin: 0;
}
.md-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}


/* ==========================================================================
   SNACKBAR (M3)
   ========================================================================== */
.md-snackbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 8px 8px 16px;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  border-radius: var(--md-shape-snackbar);
  box-shadow: var(--md-elevation-level3);
  font-family: var(--md-font-plain);
  font-size: var(--body-md-size);
  letter-spacing: var(--body-md-track);
}
.md-snackbar__action {
  color: var(--md-inverse-primary);
  font-weight: var(--label-lg-weight);
  padding: 8px;
  border-radius: var(--md-shape-extra-small);
  cursor: pointer;
  background: transparent;
  border: none;
}


/* ==========================================================================
   BADGE
   ========================================================================== */
.md-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-error);
  color: var(--md-on-error);
  font-family: var(--md-font-plain);
  font-size: 11px;
  font-weight: 500;
}
.md-badge--dot { width: 6px; height: 6px; min-width: 0; padding: 0; }


/* ==========================================================================
   SWITCH (M3)
   ========================================================================== */
.md-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
}
.md-switch input { opacity: 0; position: absolute; inset: 0; cursor: pointer; z-index: 2; }
.md-switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--md-shape-switch-track);
  background: var(--md-surface-container-highest);
  border: 2px solid var(--md-outline);
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              border-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-switch__thumb {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: var(--md-shape-switch-handle);
  background: var(--md-outline);
  transform: translate(0, -50%);
  transition: left var(--md-duration-short3) var(--md-easing-standard),
              width var(--md-duration-short3) var(--md-easing-standard),
              height var(--md-duration-short3) var(--md-easing-standard),
              background-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-switch input:checked ~ .md-switch__track {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.md-switch input:checked ~ .md-switch__thumb {
  left: 28px;
  width: 24px;
  height: 24px;
  background: var(--md-on-primary);
}


/* ==========================================================================
   CHECKBOX (M3)
   ========================================================================== */
.md-checkbox {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
}
.md-checkbox input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.md-checkbox__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-on-surface-variant);
  border-radius: 2px;
  display: grid;
  place-items: center;
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              border-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-checkbox__box::after {
  content: '';
  width: 10px; height: 5px;
  border-left: 2px solid var(--md-on-primary);
  border-bottom: 2px solid var(--md-on-primary);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity var(--md-duration-short2) var(--md-easing-standard);
}
.md-checkbox input:checked ~ .md-checkbox__box {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.md-checkbox input:checked ~ .md-checkbox__box::after { opacity: 1; }


/* ==========================================================================
   RADIO (M3)
   ========================================================================== */
.md-radio {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
}
.md-radio input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.md-radio__circle {
  width: 20px; height: 20px;
  border: 2px solid var(--md-on-surface-variant);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-radio__circle::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--md-primary);
  transform: scale(0);
  transition: transform var(--md-duration-short3) var(--md-easing-emphasized-decelerate);
}
.md-radio input:checked ~ .md-radio__circle { border-color: var(--md-primary); }
.md-radio input:checked ~ .md-radio__circle::after { transform: scale(1); }


/* ==========================================================================
   SLIDER (M3)
   ========================================================================== */
.md-slider {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}
.md-slider__track {
  position: relative;
  width: 100%;
  height: 16px;
  background: var(--md-secondary-container);
  border-radius: var(--md-shape-full);
  overflow: hidden;
}
.md-slider__active {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--md-primary);
  border-radius: var(--md-shape-full);
}
.md-slider__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 44px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  box-shadow: var(--md-elevation-level1);
}


/* ==========================================================================
   PROGRESS (M3 — Linear + Circular)
   ========================================================================== */
.md-progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-secondary-container);
  border-radius: var(--md-shape-full);
  overflow: hidden;
  position: relative;
}
.md-progress-linear__bar {
  height: 100%;
  background: var(--md-primary);
  border-radius: inherit;
  transition: width var(--md-duration-medium1) var(--md-easing-standard);
}
@keyframes md-progress-linear-indet {
  0%   { left: -35%; right: 100%; }
  60%  { left: 100%; right: -90%; }
  100% { left: 100%; right: -90%; }
}
.md-progress-linear--indeterminate .md-progress-linear__bar {
  position: absolute;
  width: auto;
  animation: md-progress-linear-indet 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.md-progress-circular {
  width: 40px;
  height: 40px;
  color: var(--md-primary);
  animation: md-progress-rotate 1.4s linear infinite;
}
.md-progress-circular circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80 200;
  stroke-dashoffset: 0;
  animation: md-progress-dash 1.4s ease-in-out infinite;
}
@keyframes md-progress-rotate { to { transform: rotate(360deg); } }
@keyframes md-progress-dash {
  0%   { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90 200; stroke-dashoffset: -125; }
}


/* ==========================================================================
   LIST ITEMS (M3)
   ========================================================================== */
.md-list-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 16px;
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-list-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-on-surface);
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-list-item:hover::before { opacity: var(--state-hover-opacity); }
.md-list-item:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-list-item:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: -3px;
}
.md-list-item__leading { flex: none; color: var(--md-on-surface-variant); font-size: 24px; }
.md-list-item__headline {
  font-family: var(--md-font-plain);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--md-on-surface);
}
.md-list-item__supporting {
  font-size: var(--body-md-size);
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}
.md-list-item__trailing { margin-left: auto; color: var(--md-on-surface-variant); }


/* ==========================================================================
   NAVIGATION RAIL (M3)
   Width 80px standard; we use 240px extended variant for organizer dashboard.
   Active item: pill indicator (56×32) behind icon + label below.
   ========================================================================== */
.md-nav-rail {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  min-height: 100vh;
  padding: 8px 0;
  gap: 4px;
  border-right: 1px solid var(--md-outline-variant);
}
.md-nav-rail__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  text-decoration: none;
  margin: 0 12px;
}
.md-nav-rail__item .indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: var(--md-shape-nav-indicator);
  transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-nav-rail__item .indicator > i { font-size: 20px; }
.md-nav-rail__item .indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-nav-rail__item .label {
  font-family: var(--md-font-plain);
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  letter-spacing: var(--label-md-track);
}
.md-nav-rail__item:hover .indicator::before { opacity: var(--state-hover-opacity); }
.md-nav-rail__item:focus-visible .indicator::before { opacity: var(--state-focus-opacity); }
.md-nav-rail__item:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
  border-radius: var(--md-shape-small);
}
.md-nav-rail__item--active {
  color: var(--md-on-surface);
}
.md-nav-rail__item--active .indicator {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}


/* Extended rail (labeled horizontally, for dashboard) */
.md-nav-rail--extended { width: 240px; align-items: stretch; padding: 16px 12px; }
.md-nav-rail--extended .md-nav-rail__item {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 16px;
  height: 56px;
  border-radius: var(--md-shape-nav-indicator);
}
.md-nav-rail--extended .md-nav-rail__item .indicator {
  width: 24px;
  height: 24px;
  background: transparent !important;
  border-radius: 0;
}
.md-nav-rail--extended .md-nav-rail__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-nav-rail--extended .md-nav-rail__item:hover::before { opacity: var(--state-hover-opacity); }
.md-nav-rail--extended .md-nav-rail__item:focus-visible::before { opacity: var(--state-focus-opacity); }
.md-nav-rail--extended .md-nav-rail__item--active {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.md-nav-rail--extended .md-nav-rail__item--active .indicator { color: var(--md-on-secondary-container); }


/* ==========================================================================
   NAVIGATION BAR (M3 — bottom, mobile)
   Height 80px, 3–5 destinations, pill indicator behind active icon.
   ========================================================================== */
.md-nav-bar {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 80px;
  padding: 12px 8px 16px;
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-outline-variant);
}
.md-nav-bar__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  text-decoration: none;
  flex: 1;
  min-height: 48px;
}
.md-nav-bar__item .indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 32px;
  border-radius: var(--md-shape-nav-indicator);
  transition: background-color var(--md-duration-short3) var(--md-easing-standard);
}
.md-nav-bar__item .indicator > i { font-size: 22px; }
.md-nav-bar__item .indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short3) var(--md-easing-standard);
  pointer-events: none;
}
.md-nav-bar__item .label {
  font-family: var(--md-font-plain);
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  letter-spacing: var(--label-md-track);
}
.md-nav-bar__item:hover .indicator::before { opacity: var(--state-hover-opacity); }
.md-nav-bar__item:focus-visible .indicator::before { opacity: var(--state-focus-opacity); }
.md-nav-bar__item:focus-visible {
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--md-shape-small);
}
.md-nav-bar__item--active { color: var(--md-on-surface); }
.md-nav-bar__item--active .indicator {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}


/* ==========================================================================
   TOP APP BAR (M3 — solid, no glassmorphism)
   ========================================================================== */
.md-top-app-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  padding: 0 16px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background-color var(--md-duration-short3) var(--md-easing-standard),
              box-shadow var(--md-duration-short3) var(--md-easing-standard);
}
.md-top-app-bar--scrolled {
  background: var(--md-surface-container);
  box-shadow: var(--md-elevation-level2);
  border-bottom-color: transparent;
}
.md-top-app-bar__title {
  font-family: var(--md-font-brand);
  font-size: var(--title-lg-size);
  line-height: var(--title-lg-lh);
  font-weight: var(--title-lg-weight);
  flex: 1;
  padding: 0 12px;
}
/* Large variant (56px expanded headline) */
.md-top-app-bar--large {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding-bottom: 28px;
}
.md-top-app-bar--large .md-top-app-bar__row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
  padding: 0 4px;
}
.md-top-app-bar--large .md-top-app-bar__headline {
  font-family: var(--md-font-brand);
  font-size: var(--headline-md-size);
  line-height: var(--headline-md-lh);
  font-weight: var(--headline-md-weight);
  padding: 8px 16px 20px;
  margin: 0;
}


/* ==========================================================================
   DIVIDER
   ========================================================================== */
.md-divider {
  height: 1px;
  background: var(--md-outline-variant);
  border: none;
  margin: 0;
}


/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */
.md-display-lg  { font-family: var(--md-font-brand); font-size: var(--display-lg-size);  line-height: var(--display-lg-lh);  font-weight: var(--display-lg-weight);  letter-spacing: var(--display-lg-track); }
.md-display-md  { font-family: var(--md-font-brand); font-size: var(--display-md-size);  line-height: var(--display-md-lh);  font-weight: var(--display-md-weight);  letter-spacing: var(--display-md-track); }
.md-display-sm  { font-family: var(--md-font-brand); font-size: var(--display-sm-size);  line-height: var(--display-sm-lh);  font-weight: var(--display-sm-weight);  letter-spacing: var(--display-sm-track); }
.md-headline-lg { font-family: var(--md-font-brand); font-size: var(--headline-lg-size); line-height: var(--headline-lg-lh); font-weight: var(--headline-lg-weight); }
.md-headline-md { font-family: var(--md-font-brand); font-size: var(--headline-md-size); line-height: var(--headline-md-lh); font-weight: var(--headline-md-weight); }
.md-headline-sm { font-family: var(--md-font-brand); font-size: var(--headline-sm-size); line-height: var(--headline-sm-lh); font-weight: var(--headline-sm-weight); }
.md-title-lg    { font-family: var(--md-font-brand); font-size: var(--title-lg-size);    line-height: var(--title-lg-lh);    font-weight: var(--title-lg-weight); }
.md-title-md    { font-family: var(--md-font-plain); font-size: var(--title-md-size);    line-height: var(--title-md-lh);    font-weight: var(--title-md-weight); letter-spacing: var(--title-md-track); }
.md-title-sm    { font-family: var(--md-font-plain); font-size: var(--title-sm-size);    line-height: var(--title-sm-lh);    font-weight: var(--title-sm-weight); letter-spacing: var(--title-sm-track); }
.md-body-lg     { font-family: var(--md-font-plain); font-size: var(--body-lg-size);     line-height: var(--body-lg-lh);     font-weight: var(--body-lg-weight);     letter-spacing: var(--body-lg-track); }
.md-body-md     { font-family: var(--md-font-plain); font-size: var(--body-md-size);     line-height: var(--body-md-lh);     font-weight: var(--body-md-weight);     letter-spacing: var(--body-md-track); }
.md-body-sm     { font-family: var(--md-font-plain); font-size: var(--body-sm-size);     line-height: var(--body-sm-lh);     font-weight: var(--body-sm-weight);     letter-spacing: var(--body-sm-track); }
.md-label-lg    { font-family: var(--md-font-plain); font-size: var(--label-lg-size);    line-height: var(--label-lg-lh);    font-weight: var(--label-lg-weight);    letter-spacing: var(--label-lg-track); }
.md-label-md    { font-family: var(--md-font-plain); font-size: var(--label-md-size);    line-height: var(--label-md-lh);    font-weight: var(--label-md-weight);    letter-spacing: var(--label-md-track); }
.md-label-sm    { font-family: var(--md-font-plain); font-size: var(--label-sm-size);    line-height: var(--label-sm-lh);    font-weight: var(--label-sm-weight);    letter-spacing: var(--label-sm-track); }