/* ============================================================
   Material Design 3 — Campaign Manager Theme System
   4 seasonal themes:  Summer ☀️  Winter ❄️  (light)
                       Spring 🌸  Autumn 🍂  (dark)
   All color tokens are stored as space-separated R G B so that
   Tailwind's / <alpha-value> syntax can read them too.
   ============================================================ */

/* Pirata One = closest web-safe stand-in for "Primitive" display style.
   IM Fell English = closest web-safe stand-in for "Luminari" body style.
   Both local() checks come first so the real font is used if installed. */
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=IM+Fell+English:ital@0;1&family=Roboto+Mono:wght@400;500&display=swap');

/* ── Custom RPG fonts ─────────────────────────────────────── */
@font-face { font-family: 'Espruar'; font-weight: 400; font-style: normal;  src: url('/static/fonts/espruar.ttf') format('truetype'); }
@font-face { font-family: 'Espruar'; font-weight: 400; font-style: italic;  src: url('/static/fonts/espruaritalic.ttf') format('truetype'); }
@font-face { font-family: 'Espruar'; font-weight: 700; font-style: normal;  src: url('/static/fonts/espruarbold.ttf') format('truetype'); }
@font-face { font-family: 'Espruar'; font-weight: 700; font-style: italic;  src: url('/static/fonts/espruarbolditalic.ttf') format('truetype'); }
@font-face { font-family: 'Dethek';  font-weight: 400; font-style: normal;  src: url('/static/fonts/dethek.ttf') format('truetype'); }
@font-face { font-family: 'Dethek';  font-weight: 400; font-style: italic;  src: url('/static/fonts/dethekitalic.ttf') format('truetype'); }

/* ── 1. THEME TOKENS ──────────────────────────────────────── */

/* ☀️  Summer — warm sand, tangerine, ocean teal */
[data-theme="summer"] {
  --md-primary:                    175 67 0;
  --md-on-primary:                 255 255 255;
  --md-primary-container:          255 219 198;
  --md-on-primary-container:       58 15 0;

  --md-secondary:                  0 101 158;
  --md-on-secondary:               255 255 255;
  --md-secondary-container:        200 231 255;
  --md-on-secondary-container:     0 31 48;

  --md-tertiary:                   92 97 0;
  --md-on-tertiary:                255 255 255;
  --md-tertiary-container:         220 232 100;
  --md-on-tertiary-container:      27 29 0;

  --md-error:                      179 38 30;
  --md-on-error:                   255 255 255;
  --md-error-container:            255 218 214;
  --md-on-error-container:         65 0 2;

  --md-background:                 255 248 244;
  --md-on-background:              33 17 9;
  --md-surface:                    255 248 244;
  --md-on-surface:                 33 17 9;
  --md-surface-variant:            244 222 211;
  --md-on-surface-variant:         82 67 61;

  --md-surface-container-lowest:   255 255 255;
  --md-surface-container-low:      255 241 234;
  --md-surface-container:          255 234 226;
  --md-surface-container-high:     244 223 215;
  --md-surface-container-highest:  238 217 209;

  --md-outline:                    134 115 108;
  --md-outline-variant:            232 200 190;

  --md-inverse-surface:            55 31 21;
  --md-inverse-on-surface:         255 237 229;
  --md-inverse-primary:            255 182 148;

  --md-shadow:                     0 0 0;
  --md-scrim:                      0 0 0;

  color-scheme: light;
}

/* ❄️  Winter — arctic night, deep navy, glacial teal (dark) */
[data-theme="winter"] {
  --md-primary:                    136 206 250;
  --md-on-primary:                 0 51 83;
  --md-primary-container:          0 74 117;
  --md-on-primary-container:       196 231 255;

  --md-secondary:                  176 190 230;
  --md-on-secondary:               28 42 80;
  --md-secondary-container:        50 64 104;
  --md-on-secondary-container:     216 225 255;

  --md-tertiary:                   112 218 195;
  --md-on-tertiary:                0 55 46;
  --md-tertiary-container:         0 79 69;
  --md-on-tertiary-container:      167 244 225;

  --md-error:                      255 180 171;
  --md-on-error:                   105 0 5;
  --md-error-container:            147 0 10;
  --md-on-error-container:         255 218 214;

  --md-background:                 6 10 22;
  --md-on-background:              210 228 248;
  --md-surface:                    6 10 22;
  --md-on-surface:                 210 228 248;
  --md-surface-variant:            18 28 50;
  --md-on-surface-variant:         148 172 205;

  --md-surface-container-lowest:   3 6 15;
  --md-surface-container-low:      14 20 38;
  --md-surface-container:          18 26 46;
  --md-surface-container-high:     26 36 60;
  --md-surface-container-highest:  35 47 74;

  --md-outline:                    90 118 152;
  --md-outline-variant:            38 56 84;

  --md-inverse-surface:            210 228 248;
  --md-inverse-on-surface:         22 34 54;
  --md-inverse-primary:            0 100 157;

  --md-shadow:                     0 0 0;
  --md-scrim:                      0 0 0;

  color-scheme: dark;
}

/* 🌸  Spring — cherry blossom, fresh sage, soft lavender (light) */
[data-theme="spring"] {
  --md-primary:                    188 60 105;
  --md-on-primary:                 255 255 255;
  --md-primary-container:          255 216 230;
  --md-on-primary-container:       64 0 32;

  --md-secondary:                  68 135 80;
  --md-on-secondary:               255 255 255;
  --md-secondary-container:        196 242 204;
  --md-on-secondary-container:     0 42 11;

  --md-tertiary:                   100 90 175;
  --md-on-tertiary:                255 255 255;
  --md-tertiary-container:         228 222 255;
  --md-on-tertiary-container:      28 18 90;

  --md-error:                      179 38 30;
  --md-on-error:                   255 255 255;
  --md-error-container:            255 218 214;
  --md-on-error-container:         65 0 2;

  --md-background:                 255 248 252;
  --md-on-background:              40 20 30;
  --md-surface:                    255 248 252;
  --md-on-surface:                 40 20 30;
  --md-surface-variant:            245 225 234;
  --md-on-surface-variant:         80 57 66;

  --md-surface-container-lowest:   255 255 255;
  --md-surface-container-low:      255 240 248;
  --md-surface-container:          250 232 242;
  --md-surface-container-high:     242 222 234;
  --md-surface-container-highest:  235 212 226;

  --md-outline:                    135 108 120;
  --md-outline-variant:            228 196 212;

  --md-inverse-surface:            55 28 40;
  --md-inverse-on-surface:         255 236 244;
  --md-inverse-primary:            255 160 195;

  --md-shadow:                     0 0 0;
  --md-scrim:                      0 0 0;

  color-scheme: light;
}

/* 🍂  Autumn — molten amber, terracotta, dry sienna */
[data-theme="autumn"] {
  --md-primary:                    255 186 98;
  --md-on-primary:                 68 43 0;
  --md-primary-container:          97 62 0;
  --md-on-primary-container:       255 221 181;

  --md-secondary:                  255 176 136;
  --md-on-secondary:               74 32 0;
  --md-secondary-container:        106 51 0;
  --md-on-secondary-container:     255 219 202;

  --md-tertiary:                   195 200 128;
  --md-on-tertiary:                49 53 0;
  --md-tertiary-container:         73 78 0;
  --md-on-tertiary-container:      223 228 153;

  --md-error:                      255 180 171;
  --md-on-error:                   105 0 5;
  --md-error-container:            147 0 10;
  --md-on-error-container:         255 218 214;

  --md-background:                 26 17 4;
  --md-on-background:              239 224 206;
  --md-surface:                    26 17 4;
  --md-on-surface:                 239 224 206;
  --md-surface-variant:            45 31 10;
  --md-on-surface-variant:         211 184 140;

  --md-surface-container-lowest:   16 10 0;
  --md-surface-container-low:      34 22 7;
  --md-surface-container:          38 27 9;
  --md-surface-container-high:     49 36 16;
  --md-surface-container-highest:  60 46 22;

  --md-outline:                    155 129 102;
  --md-outline-variant:            74 52 32;

  --md-inverse-surface:            239 224 206;
  --md-inverse-on-surface:         54 39 18;
  --md-inverse-primary:            130 79 0;

  --md-shadow:                     0 0 0;
  --md-scrim:                      0 0 0;

  color-scheme: dark;
}

/* Default theme (summer) fallback — uses html (specificity 0,0,1) so that
   [data-theme="x"] attribute selectors (specificity 0,1,0) always win. */
html {
  --md-primary:                    175 67 0;
  --md-on-primary:                 255 255 255;
  --md-primary-container:          255 219 198;
  --md-on-primary-container:       58 15 0;
  --md-secondary:                  0 101 158;
  --md-on-secondary:               255 255 255;
  --md-secondary-container:        200 231 255;
  --md-on-secondary-container:     0 31 48;
  --md-tertiary:                   92 97 0;
  --md-on-tertiary:                255 255 255;
  --md-tertiary-container:         220 232 100;
  --md-on-tertiary-container:      27 29 0;
  --md-error:                      179 38 30;
  --md-on-error:                   255 255 255;
  --md-error-container:            255 218 214;
  --md-on-error-container:         65 0 2;
  --md-background:                 255 248 244;
  --md-on-background:              33 17 9;
  --md-surface:                    255 248 244;
  --md-on-surface:                 33 17 9;
  --md-surface-variant:            244 222 211;
  --md-on-surface-variant:         82 67 61;
  --md-surface-container-lowest:   255 255 255;
  --md-surface-container-low:      255 241 234;
  --md-surface-container:          255 234 226;
  --md-surface-container-high:     244 223 215;
  --md-surface-container-highest:  238 217 209;
  --md-outline:                    134 115 108;
  --md-outline-variant:            232 200 190;
  --md-inverse-surface:            55 31 21;
  --md-inverse-on-surface:         255 237 229;
  --md-inverse-primary:            255 182 148;
  --md-shadow:                     0 0 0;
  --md-scrim:                      0 0 0;

  /* Shape scale */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:  12px;
  --md-shape-lg:  16px;
  --md-shape-xl:  28px;
  --md-shape-full: 50%;

  /* Motion */
  --md-duration-short1:  50ms;
  --md-duration-short2: 100ms;
  --md-duration-medium1: 200ms;
  --md-duration-medium2: 300ms;
  --md-duration-long:   500ms;
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-decel:    cubic-bezier(0, 0, 0, 1);
  --md-easing-accel:    cubic-bezier(0.3, 0, 1, 1);

  /* Layout */
  --md-nav-rail-width: 80px;
  --md-top-bar-height: 64px;
}

/* ── 2. ELEVATION SHADOWS ─────────────────────────────────── */
.md-elevation-0 { box-shadow: none; }
.md-elevation-1 { box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 1px 3px 1px rgb(var(--md-shadow)/.15); }
.md-elevation-2 { box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 2px 6px 2px rgb(var(--md-shadow)/.15); }
.md-elevation-3 { box-shadow: 0 4px 8px 3px rgb(var(--md-shadow)/.15), 0 1px 3px rgb(var(--md-shadow)/.3); }
.md-elevation-4 { box-shadow: 0 6px 10px 4px rgb(var(--md-shadow)/.15), 0 2px 3px rgb(var(--md-shadow)/.3); }
.md-elevation-5 { box-shadow: 0 8px 12px 6px rgb(var(--md-shadow)/.15), 0 4px 4px rgb(var(--md-shadow)/.3); }

/* ── 3. BASE RESET & BODY ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; background-color: rgb(var(--md-background)); }

body {
  /* Luminari: macOS/iOS system font; IM Fell English = closest web fallback */
  font-family: local('Luminari'), 'IM Fell English', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.6;
  background-color: rgb(var(--md-background));
  color: rgb(var(--md-on-background));
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--md-duration-medium2) var(--md-easing-standard),
    color            var(--md-duration-medium2) var(--md-easing-standard);
}

a {
  color: rgb(var(--md-primary));
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ── 4. TYPOGRAPHY ────────────────────────────────────────── */
/* Title font: "Primitive" if installed locally, Pirata One web fallback */
.md-font-title {
  font-family: local('Primitive'), 'Pirata One', fantasy, cursive;
}

.md-typescale-display-large  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 57px; font-weight: 400; line-height: 64px; letter-spacing: -.25px; }
.md-typescale-display-medium { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 45px; font-weight: 400; line-height: 52px; }
.md-typescale-display-small  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 36px; font-weight: 400; line-height: 44px; }
.md-typescale-headline-large  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 32px; font-weight: 400; line-height: 40px; }
.md-typescale-headline-medium { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 28px; font-weight: 400; line-height: 36px; }
.md-typescale-headline-small  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 24px; font-weight: 400; line-height: 32px; }
.md-typescale-title-large  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 22px; font-weight: 400; line-height: 28px; }
.md-typescale-title-medium { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: .1px; }
.md-typescale-title-small  { font-family: local('Primitive'), 'Pirata One', fantasy; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .05px; }
.md-typescale-body-large   { font-family: local('Luminari'), 'IM Fell English', Georgia, serif; font-size: 16px; line-height: 26px; letter-spacing: .3px; }
.md-typescale-body-medium  { font-family: local('Luminari'), 'IM Fell English', Georgia, serif; font-size: 15px; line-height: 24px; letter-spacing: .2px; }
.md-typescale-body-small   { font-family: local('Luminari'), 'IM Fell English', Georgia, serif; font-size: 13px; line-height: 20px; letter-spacing: .2px; }
.md-typescale-label-large  { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .1px; font-family: local('Luminari'), 'IM Fell English', Georgia, serif; }
.md-typescale-label-medium { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .4px; }
.md-typescale-label-small  { font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: .4px; }

/* ── 5. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--md-outline-variant));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--md-outline)); }

/* ── 6. LAYOUT ────────────────────────────────────────────── */

/* Outer shell */
.md-layout {
  display: flex;
  min-height: 100vh;
}

/* Navigation Rail */
.md-nav-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--md-nav-rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  background-color: rgb(var(--md-surface-container));
  z-index: 200;
  transition: background-color var(--md-duration-medium2) var(--md-easing-standard);
}

.md-nav-rail__logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: rgb(var(--md-primary));
  text-decoration: none;
}

.md-nav-rail__divider {
  width: 36px;
  height: 1px;
  background: rgb(var(--md-outline-variant));
  margin: 8px 0;
}

.md-nav-rail__items {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 4px;
}

.md-nav-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.md-nav-rail__item-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  border-radius: 16px;
  color: rgb(var(--md-on-surface-variant));
  transition:
    background-color var(--md-duration-short2) var(--md-easing-standard),
    color            var(--md-duration-short2) var(--md-easing-standard);
}

.md-nav-rail__item:hover .md-nav-rail__item-indicator {
  background-color: rgb(var(--md-on-surface-variant) / .08);
}

.md-nav-rail__item--active .md-nav-rail__item-indicator {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-nav-rail__item-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  color: rgb(var(--md-on-surface-variant));
  text-align: center;
  line-height: 1.2;
  transition: color var(--md-duration-short2) var(--md-easing-standard);
}

.md-nav-rail__item--active .md-nav-rail__item-label {
  color: rgb(var(--md-on-secondary-container));
}

.md-nav-rail__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
}

/* Top App Bar */
.md-top-app-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--md-nav-rail-width);
  height: var(--md-top-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: rgb(var(--md-surface-container));
  z-index: 100;
  transition: background-color var(--md-duration-medium2) var(--md-easing-standard);
}

.md-top-app-bar__title {
  font-family: local('Primitive'), 'Pirata One', fantasy, cursive;
  font-size: 18px;
  font-weight: 400;
  color: rgb(var(--md-on-surface));
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-top-app-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Content area */
.md-content {
  margin-left: var(--md-nav-rail-width);
  margin-top: var(--md-top-bar-height);
  min-height: calc(100vh - var(--md-top-bar-height));
  padding: 24px;
}

/* Mobile: hide nav rail, show bottom nav */
@media (max-width: 768px) {
  .md-nav-rail { display: none; }

  .md-top-app-bar {
    left: 0;
  }

  .md-content {
    margin-left: 0;
    padding: 16px;
    padding-bottom: 80px; /* space for bottom nav */
  }
}

/* Navigation Drawer (mobile slide-out) */
.md-nav-drawer {
  position: fixed;
  top: 0;
  left: -280px;
  bottom: 0;
  width: 280px;
  background-color: rgb(var(--md-surface-container-low));
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  transition: left var(--md-duration-medium2) var(--md-easing-decel);
}

.md-nav-drawer.is-open {
  left: 0;
}

.md-nav-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 24px;
}

.md-nav-drawer__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(var(--md-scrim) / .4);
  z-index: 299;
}

.md-nav-drawer__scrim.is-open {
  display: block;
}

.md-nav-drawer__items {
  flex: 1;
  overflow-y: auto;
}

.md-nav-drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  text-decoration: none;
  color: rgb(var(--md-on-surface-variant));
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 28px 28px 0;
  margin-right: 12px;
  transition:
    background-color var(--md-duration-short2) var(--md-easing-standard),
    color            var(--md-duration-short2) var(--md-easing-standard);
}

.md-nav-drawer__item:hover {
  background-color: rgb(var(--md-on-surface-variant) / .08);
  text-decoration: none;
}

.md-nav-drawer__item--active {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-nav-drawer__divider {
  height: 1px;
  background: rgb(var(--md-outline-variant));
  margin: 8px 24px 8px 0;
}

.md-nav-drawer__section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgb(var(--md-on-surface-variant));
  padding: 8px 24px 4px;
}

/* Bottom Navigation Bar (mobile only) */
.md-nav-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background-color: rgb(var(--md-surface-container));
  z-index: 200;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 12px;
}

@media (max-width: 768px) {
  .md-nav-bar { display: flex; }
}

.md-nav-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  flex: 1;
}

.md-nav-bar__item-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  border-radius: 16px;
  color: rgb(var(--md-on-surface-variant));
  transition:
    background-color var(--md-duration-short2) var(--md-easing-standard),
    color            var(--md-duration-short2) var(--md-easing-standard);
}

.md-nav-bar__item--active .md-nav-bar__item-indicator {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-nav-bar__item-label {
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--md-on-surface-variant));
  transition: color var(--md-duration-short2) var(--md-easing-standard);
}

.md-nav-bar__item--active .md-nav-bar__item-label {
  color: rgb(var(--md-on-secondary-container));
}

/* ── 7. ICON BUTTON ───────────────────────────────────────── */
.md-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgb(var(--md-on-surface-variant));
  cursor: pointer;
  transition:
    background-color var(--md-duration-short2) var(--md-easing-standard),
    color            var(--md-duration-short2) var(--md-easing-standard);
  text-decoration: none;
  flex-shrink: 0;
}

.md-icon-button:hover {
  background-color: rgb(var(--md-on-surface-variant) / .08);
  text-decoration: none;
}

.md-icon-button:active {
  background-color: rgb(var(--md-on-surface-variant) / .12);
}

.md-icon-button--primary {
  color: rgb(var(--md-primary));
}

.md-icon-button--primary:hover {
  background-color: rgb(var(--md-primary) / .08);
}

/* ── 8. BUTTONS ───────────────────────────────────────────── */
.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    box-shadow      var(--md-duration-short2) var(--md-easing-standard),
    background-color var(--md-duration-short2) var(--md-easing-standard);
  position: relative;
  overflow: hidden;
}

.md-button:hover { text-decoration: none; }

/* Filled */
.md-button--filled {
  background-color: rgb(var(--md-primary));
  color: rgb(var(--md-on-primary));
}

.md-button--filled:hover {
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 1px 3px 1px rgb(var(--md-shadow)/.15);
}

/* Tonal */
.md-button--tonal {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-button--tonal:hover {
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 1px 3px 1px rgb(var(--md-shadow)/.15);
}

/* Outlined */
.md-button--outlined {
  background: transparent;
  color: rgb(var(--md-primary));
  border: 1px solid rgb(var(--md-outline));
}

.md-button--outlined:hover {
  background-color: rgb(var(--md-primary) / .08);
}

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

.md-button--text:hover {
  background-color: rgb(var(--md-primary) / .08);
}

/* Danger */
.md-button--danger {
  background-color: rgb(var(--md-error));
  color: rgb(var(--md-on-error));
}

/* Small variant */
.md-button--sm {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 16px;
}

/* ── 9. FAB ───────────────────────────────────────────────── */
.md-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: none;
  background-color: rgb(var(--md-primary-container));
  color: rgb(var(--md-on-primary-container));
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 2px 6px 2px rgb(var(--md-shadow)/.15);
  transition:
    box-shadow       var(--md-duration-short2) var(--md-easing-standard),
    background-color var(--md-duration-short2) var(--md-easing-standard);
  text-decoration: none;
}

.md-fab:hover {
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 2px 6px 2px rgb(var(--md-shadow)/.15),
              0 4px 8px 3px rgb(var(--md-shadow)/.15);
}

.md-fab--extended {
  width: auto;
  padding: 0 20px;
}

/* ── 10. CARDS ────────────────────────────────────────────── */
.md-card {
  border-radius: var(--md-shape-lg);
  padding: 16px;
  background-color: rgb(var(--md-surface-container-low));
  color: rgb(var(--md-on-surface));
  transition:
    background-color var(--md-duration-medium2) var(--md-easing-standard),
    box-shadow       var(--md-duration-short2)  var(--md-easing-standard);
}

.md-card--elevated {
  background-color: rgb(var(--md-surface-container-low));
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 1px 3px 1px rgb(var(--md-shadow)/.15);
}

.md-card--elevated:hover {
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 2px 6px 2px rgb(var(--md-shadow)/.15);
}

.md-card--filled {
  background-color: rgb(var(--md-surface-container-highest));
}

.md-card--outlined {
  background-color: rgb(var(--md-surface));
  border: 1px solid rgb(var(--md-outline-variant));
}

.md-card--clickable {
  cursor: pointer;
}

.md-card--clickable:hover {
  box-shadow: 0 1px 2px rgb(var(--md-shadow)/.3), 0 2px 6px 2px rgb(var(--md-shadow)/.15);
}

/* ── 11. TEXT FIELDS ──────────────────────────────────────── */
.md-text-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-text-field__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .4px;
  color: rgb(var(--md-on-surface-variant));
}

.md-text-field__input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--md-shape-xs);
  border: 1px solid rgb(var(--md-outline));
  background: rgb(var(--md-surface));
  color: rgb(var(--md-on-surface));
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  outline: none;
  transition:
    border-color     var(--md-duration-short2) var(--md-easing-standard),
    box-shadow       var(--md-duration-short2) var(--md-easing-standard),
    background-color var(--md-duration-medium2) var(--md-easing-standard);
}

.md-text-field__input:focus {
  border-color: rgb(var(--md-primary));
  border-width: 2px;
}

.md-text-field__input::placeholder {
  color: rgb(var(--md-on-surface-variant) / .6);
}

textarea.md-text-field__input {
  height: auto;
  padding: 12px 16px;
  resize: vertical;
  min-height: 80px;
}

select.md-text-field__input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.md-text-field__supporting {
  font-size: 12px;
  color: rgb(var(--md-on-surface-variant));
  padding: 0 16px;
}

.md-text-field__supporting--error {
  color: rgb(var(--md-error));
}

/* ── 12. CHIPS ────────────────────────────────────────────── */
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgb(var(--md-outline));
  background: transparent;
  color: rgb(var(--md-on-surface-variant));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--md-duration-short2) var(--md-easing-standard),
    border-color     var(--md-duration-short2) var(--md-easing-standard),
    color            var(--md-duration-short2) var(--md-easing-standard);
  white-space: nowrap;
}

.md-chip:hover {
  background-color: rgb(var(--md-on-surface-variant) / .08);
  text-decoration: none;
}

.md-chip--selected {
  background-color: rgb(var(--md-secondary-container));
  border-color: transparent;
  color: rgb(var(--md-on-secondary-container));
}

.md-chip--assist {
  background-color: rgb(var(--md-surface-container-low));
  border-color: rgb(var(--md-outline-variant));
}

.md-chip--type {
  background-color: rgb(var(--md-primary-container));
  border-color: transparent;
  color: rgb(var(--md-on-primary-container));
}

/* ── 13. BADGES ───────────────────────────────────────────── */
.md-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.md-badge--primary {
  background-color: rgb(var(--md-primary-container));
  color: rgb(var(--md-on-primary-container));
}

.md-badge--secondary {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-badge--tertiary {
  background-color: rgb(var(--md-tertiary-container));
  color: rgb(var(--md-on-tertiary-container));
}

.md-badge--surface {
  background-color: rgb(var(--md-surface-container-highest));
  color: rgb(var(--md-on-surface-variant));
}

.md-badge--error {
  background-color: rgb(var(--md-error-container));
  color: rgb(var(--md-on-error-container));
}

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

/* ── 15. LIST ─────────────────────────────────────────────── */
.md-list {
  list-style: none;
  padding: 8px 0;
}

.md-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  min-height: 48px;
  color: rgb(var(--md-on-surface));
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--md-duration-short2) var(--md-easing-standard);
  border-radius: var(--md-shape-xs);
}

.md-list-item:hover {
  background-color: rgb(var(--md-on-surface) / .08);
  text-decoration: none;
}

.md-list-item__leading {
  color: rgb(var(--md-on-surface-variant));
  flex-shrink: 0;
}

.md-list-item__content {
  flex: 1;
  min-width: 0;
}

.md-list-item__headline {
  font-size: 16px;
  color: rgb(var(--md-on-surface));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-list-item__supporting {
  font-size: 14px;
  color: rgb(var(--md-on-surface-variant));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 16. SNACKBAR ─────────────────────────────────────────── */
.md-snackbar-region {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(640px, calc(100vw - 32px));
}

.md-snackbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--md-shape-xs);
  background-color: rgb(var(--md-inverse-surface));
  color: rgb(var(--md-inverse-on-surface));
  box-shadow: 0 4px 8px 3px rgb(var(--md-shadow)/.15), 0 1px 3px rgb(var(--md-shadow)/.3);
  pointer-events: all;
  animation: snackbar-in var(--md-duration-medium2) var(--md-easing-decel) both;
  font-size: 14px;
}

.md-snackbar--error   { background-color: rgb(var(--md-error)); color: rgb(var(--md-on-error)); }
.md-snackbar--success { background-color: rgb(34 140 34); color: #fff; }
.md-snackbar--warning { background-color: rgb(179 117 0); color: #fff; }

.md-snackbar__message { flex: 1; }

.md-snackbar__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--md-duration-short2) var(--md-easing-standard);
}

.md-snackbar__close:hover { opacity: 1; }

@keyframes snackbar-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 17. DIALOG ───────────────────────────────────────────── */
.md-dialog-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(var(--md-scrim) / .4);
  z-index: 500;
  align-items: center;
  justify-content: center;
}

.md-dialog-scrim.is-open {
  display: flex;
}

.md-dialog {
  background-color: rgb(var(--md-surface-container-high));
  border-radius: var(--md-shape-xl);
  padding: 24px;
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 8px 12px 6px rgb(var(--md-shadow)/.15), 0 4px 4px rgb(var(--md-shadow)/.3);
  animation: dialog-in var(--md-duration-medium2) var(--md-easing-decel) both;
}

.md-dialog__headline {
  font-family: local('Primitive'), 'Pirata One', fantasy, cursive;
  font-size: 20px;
  font-weight: 400;
  color: rgb(var(--md-on-surface));
  margin-bottom: 16px;
}

.md-dialog__body {
  color: rgb(var(--md-on-surface-variant));
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 24px;
}

.md-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 18. THEME PICKER ─────────────────────────────────────── */
.md-theme-picker {
  position: relative;
}

.md-theme-picker__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background-color: rgb(var(--md-surface-container-high));
  border-radius: var(--md-shape-md);
  box-shadow: 0 4px 8px 3px rgb(var(--md-shadow)/.15), 0 1px 3px rgb(var(--md-shadow)/.3);
  padding: 8px;
  z-index: 500;
  min-width: 200px;
}

.md-theme-picker__menu.is-open {
  display: block;
  animation: dialog-in 150ms var(--md-easing-decel) both;
}

/* Use on menus anchored to the bottom-left nav rail — opens up and to the right */
.md-theme-picker__menu--rail {
  right: auto;
  top: auto;
  left: calc(100% + 8px);
  bottom: 0;
}

/* Use on nav-rail folder buttons that are NOT at the bottom — opens down and to the right */
.md-theme-picker__menu--rail-down {
  right: auto;
  top: 0;
  left: calc(100% + 8px);
  bottom: auto;
}

.md-theme-picker__section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgb(var(--md-on-surface-variant));
  padding: 4px 8px 2px;
}

.md-theme-picker__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--md-shape-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--md-on-surface));
  transition: background-color var(--md-duration-short2) var(--md-easing-standard);
}

.md-theme-picker__option:hover {
  background-color: rgb(var(--md-on-surface) / .08);
}

.md-theme-picker__option--active {
  background-color: rgb(var(--md-secondary-container));
  color: rgb(var(--md-on-secondary-container));
}

.md-theme-picker__swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-theme-picker__divider {
  height: 1px;
  background-color: rgb(var(--md-outline-variant));
  margin: 4px 0;
}

/* Swatches */
.swatch-summer { background: conic-gradient(#AF4300 0deg, #AF4300 180deg, #00639A 180deg, #00639A 360deg); }
.swatch-winter { background: conic-gradient(#88CEFA 0deg, #88CEFA 180deg, #70DAC3 180deg, #70DAC3 360deg); }
.swatch-spring { background: conic-gradient(#BC3C69 0deg, #BC3C69 180deg, #44874F 180deg, #44874F 360deg); }
.swatch-autumn { background: conic-gradient(#FFBA62 0deg, #FFBA62 180deg, #FFB088 180deg, #FFB088 360deg); }

/* ── 19. USER CHIP ────────────────────────────────────────── */
.md-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  border-radius: 20px;
  background-color: rgb(var(--md-surface-container-high));
  cursor: default;
  position: relative;
}

.md-user-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgb(var(--md-primary));
  color: rgb(var(--md-on-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.md-user-chip__name {
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--md-on-surface));
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-user-chip__role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgb(var(--md-primary));
}

/* ── 20. HTMX INDICATOR ───────────────────────────────────── */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--md-duration-short2) ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* ── 21. PROGRESS INDICATOR ───────────────────────────────── */
.md-progress-linear {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: rgb(var(--md-primary-container));
  z-index: 9999;
  overflow: hidden;
  display: none;
}

.md-progress-linear.is-active { display: block; }

.md-progress-linear::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background-color: rgb(var(--md-primary));
  animation: linear-progress 1.4s infinite;
}

@keyframes linear-progress {
  0%   { left: -40%; }
  100% { left: 140%; }
}

/* ── 22. SURFACE TONES (for Tailwind compat) ──────────────── */
/* Map common content-area patterns to MD tokens */
.md-bg-background  { background-color: rgb(var(--md-background)); }
.md-bg-surface     { background-color: rgb(var(--md-surface)); }
.md-bg-surface-c   { background-color: rgb(var(--md-surface-container)); }
.md-bg-surface-ch  { background-color: rgb(var(--md-surface-container-high)); }
.md-bg-surface-chh { background-color: rgb(var(--md-surface-container-highest)); }
.md-bg-primary-c   { background-color: rgb(var(--md-primary-container)); }
.md-bg-secondary-c { background-color: rgb(var(--md-secondary-container)); }

.md-text-primary      { color: rgb(var(--md-primary)); }
.md-text-secondary    { color: rgb(var(--md-secondary)); }
.md-text-on-surface   { color: rgb(var(--md-on-surface)); }
.md-text-on-surface-v { color: rgb(var(--md-on-surface-variant)); }
.md-text-error        { color: rgb(var(--md-error)); }

.md-border-outline   { border-color: rgb(var(--md-outline)); }
.md-border-outline-v { border-color: rgb(var(--md-outline-variant)); }

/* ── 23. MISC HELPERS ─────────────────────────────────────── */
.md-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgb(var(--md-on-surface-variant));
  padding-bottom: 8px;
}

/* State layers (ripple placeholder) */
.md-state-layer {
  position: relative;
  overflow: hidden;
}

.md-state-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-duration-short2) var(--md-easing-standard);
  pointer-events: none;
  border-radius: inherit;
}

.md-state-layer:hover::after { opacity: .08; }
.md-state-layer:active::after { opacity: .12; }

/* ── 24. TAILWIND BRIDGE ──────────────────────────────────── */
/* Override Tailwind's gray colors to use MD surface tokens so that
   existing templates theme correctly without changes. Applied per
   theme since we can't modify Tailwind's compiled values at runtime. */
[data-theme] .bg-gray-900, [data-theme] .bg-gray-950 {
  background-color: rgb(var(--md-surface-container)) !important;
}
[data-theme] .bg-gray-800 {
  background-color: rgb(var(--md-surface-container-high)) !important;
}
[data-theme] .bg-gray-700 {
  background-color: rgb(var(--md-surface-container-highest)) !important;
}
[data-theme] .text-gray-100, [data-theme] .text-white {
  color: rgb(var(--md-on-surface)) !important;
}
[data-theme] .text-gray-200, [data-theme] .text-gray-300 {
  color: rgb(var(--md-on-surface-variant)) !important;
}
[data-theme] .text-gray-400, [data-theme] .text-gray-500 {
  color: rgb(var(--md-on-surface-variant) / .7) !important;
}
[data-theme] .border-gray-700, [data-theme] .border-gray-800 {
  border-color: rgb(var(--md-outline-variant)) !important;
}
[data-theme] .border-gray-600 {
  border-color: rgb(var(--md-outline)) !important;
}
[data-theme] .text-amber-400, [data-theme] .text-amber-500 {
  color: rgb(var(--md-primary)) !important;
}
[data-theme] .bg-amber-950\/40, [data-theme] .hover\:bg-amber-950\/40:hover {
  background-color: rgb(var(--md-primary-container) / .2) !important;
}
[data-theme] .border-amber-800\/40 {
  border-color: rgb(var(--md-primary) / .3) !important;
}
[data-theme] .text-arcane-400 {
  color: rgb(var(--md-secondary)) !important;
}
[data-theme] .bg-arcane-600 {
  background-color: rgb(var(--md-secondary)) !important;
}
[data-theme] .text-purple-400 {
  color: rgb(var(--md-tertiary)) !important;
}