/* ============================================================
   AGG Slot Manager — Material Design 3 Shared Stylesheet
   ============================================================ */

/* --- Google Fonts (loaded via <link> in HTML) --- */

/* ============================================================
   1. CSS CUSTOM PROPERTIES — MD3 Color System
   ============================================================ */
:root {
  color-scheme: light;
  /* Primary */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;

  /* Secondary */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;

  /* Tertiary */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;

  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* Surface */
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #000000;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;

  /* Outline */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;

  /* Inverse */
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #F4EFF4;
  --md-sys-color-inverse-primary: #D0BCFF;

  /* Background */
  --md-sys-color-background: #ECECEC;
  --md-sys-color-on-background: #000000;

  /* Elevation overlays */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);

  /* Shape */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  /* Typography scale */
  --md-sys-typescale-display-large: 500 57px/64px 'Roboto', sans-serif;
  --md-sys-typescale-headline-large: 400 32px/40px 'Roboto', sans-serif;
  --md-sys-typescale-headline-medium: 400 28px/36px 'Roboto', sans-serif;
  --md-sys-typescale-title-large: 400 22px/28px 'Roboto', sans-serif;
  --md-sys-typescale-title-medium: 500 16px/24px 'Roboto', sans-serif;
  --md-sys-typescale-body-large: 400 16px/24px 'Roboto', sans-serif;
  --md-sys-typescale-body-medium: 400 14px/20px 'Roboto', sans-serif;
  --md-sys-typescale-body-small: 400 12px/16px 'Roboto', sans-serif;
  --md-sys-typescale-label-large: 500 14px/20px 'Roboto', sans-serif;
  --md-sys-typescale-label-medium: 500 12px/16px 'Roboto', sans-serif;
  --md-sys-typescale-label-small: 500 11px/16px 'Roboto', sans-serif;
}

/* ============================================================
   2. DARK THEME
   ============================================================ */
body.dark-theme {
  color-scheme: dark;
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;

  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;

  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;

  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;

  --md-sys-color-surface: #1C1B1F;
  --md-sys-color-on-surface: #F4EFF4;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;

  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;

  --md-sys-color-inverse-surface: #E6E1E5;
  --md-sys-color-inverse-on-surface: #313033;
  --md-sys-color-inverse-primary: #6750A4;

  --md-sys-color-background: #1C1B1F;
  --md-sys-color-on-background: #F4EFF4;
}

/* ============================================================
   2b. ACCENT COLOR SCHEMES
   ============================================================ */

/* Blue accent */
body[data-accent="blue"] {
  --md-sys-color-primary: #0061A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D1E4FF;
  --md-sys-color-on-primary-container: #001D36;
  --md-sys-color-inverse-primary: #9ECAFF;
  --md-sys-color-secondary: #535F70;
  --md-sys-color-secondary-container: #D7E3F7;
  --md-sys-color-on-secondary-container: #101C2B;
  --md-sys-color-outline-variant: #B8C9D9;
  --md-sys-color-surface-container-low: #F2F5FA;
}
body.dark-theme[data-accent="blue"] {
  --md-sys-color-primary: #9ECAFF;
  --md-sys-color-on-primary: #003258;
  --md-sys-color-primary-container: #00497D;
  --md-sys-color-on-primary-container: #D1E4FF;
  --md-sys-color-inverse-primary: #0061A4;
  --md-sys-color-secondary: #BBC7DB;
  --md-sys-color-secondary-container: #3B4858;
  --md-sys-color-on-secondary-container: #D7E3F7;
  --md-sys-color-outline-variant: #3E4F5F;
  --md-sys-color-surface-container-low: #1B1D22;
}

/* Teal accent */
body[data-accent="teal"] {
  --md-sys-color-primary: #0D9488;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #99F6E4;
  --md-sys-color-on-primary-container: #022C22;
  --md-sys-color-inverse-primary: #5EEAD4;
  --md-sys-color-secondary: #4A6670;
  --md-sys-color-secondary-container: #C8E6EF;
  --md-sys-color-on-secondary-container: #061E26;
  --md-sys-color-outline-variant: #B0CBCB;
  --md-sys-color-surface-container-low: #F2F8F8;
}
body.dark-theme[data-accent="teal"] {
  --md-sys-color-primary: #5EEAD4;
  --md-sys-color-on-primary: #042F2E;
  --md-sys-color-primary-container: #115E59;
  --md-sys-color-on-primary-container: #99F6E4;
  --md-sys-color-inverse-primary: #0D9488;
  --md-sys-color-secondary: #B0CAD4;
  --md-sys-color-secondary-container: #334E58;
  --md-sys-color-on-secondary-container: #C8E6EF;
  --md-sys-color-outline-variant: #3E5555;
  --md-sys-color-surface-container-low: #1B2020;
}

/* Green accent */
body[data-accent="green"] {
  --md-sys-color-primary: #16A34A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #BBF7D0;
  --md-sys-color-on-primary-container: #052E16;
  --md-sys-color-inverse-primary: #6EE7A0;
  --md-sys-color-secondary: #577A5E;
  --md-sys-color-secondary-container: #D4EDDA;
  --md-sys-color-on-secondary-container: #0F2114;
  --md-sys-color-outline-variant: #B5CDB8;
  --md-sys-color-surface-container-low: #F2FAF4;
}
body.dark-theme[data-accent="green"] {
  --md-sys-color-primary: #6EE7A0;
  --md-sys-color-on-primary: #052E16;
  --md-sys-color-primary-container: #166534;
  --md-sys-color-on-primary-container: #BBF7D0;
  --md-sys-color-inverse-primary: #16A34A;
  --md-sys-color-secondary: #B8D4BE;
  --md-sys-color-secondary-container: #3E5C44;
  --md-sys-color-on-secondary-container: #D4EDDA;
  --md-sys-color-outline-variant: #405542;
  --md-sys-color-surface-container-low: #1B201C;
}

/* Orange accent */
body[data-accent="orange"] {
  --md-sys-color-primary: #E65100;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFE0CC;
  --md-sys-color-on-primary-container: #3B0E00;
  --md-sys-color-inverse-primary: #FFB68C;
  --md-sys-color-secondary: #755846;
  --md-sys-color-secondary-container: #FFDDC8;
  --md-sys-color-on-secondary-container: #2C1608;
  --md-sys-color-outline-variant: #D8C2B0;
  --md-sys-color-surface-container-low: #FAF7F5;
}
body.dark-theme[data-accent="orange"] {
  --md-sys-color-primary: #FFB68C;
  --md-sys-color-on-primary: #4E2500;
  --md-sys-color-primary-container: #C24A00;
  --md-sys-color-on-primary-container: #FFE0CC;
  --md-sys-color-inverse-primary: #E65100;
  --md-sys-color-secondary: #D4B9A3;
  --md-sys-color-secondary-container: #5D4535;
  --md-sys-color-on-secondary-container: #FFDDC8;
  --md-sys-color-outline-variant: #5A4A3A;
  --md-sys-color-surface-container-low: #1F1714;
}

/* Rose accent */
body[data-accent="rose"] {
  --md-sys-color-primary: #FF6D7F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFE0E9;
  --md-sys-color-on-primary-container: #4C0519;
  --md-sys-color-inverse-primary: #FDA4AF;
  --md-sys-color-secondary: #7A5660;
  --md-sys-color-secondary-container: #F8D8DF;
  --md-sys-color-on-secondary-container: #2D1319;
  --md-sys-color-outline-variant: #D4B8BF;
  --md-sys-color-surface-container-low: #FAF2F5;
}
body.dark-theme[data-accent="rose"] {
  --md-sys-color-primary: #FF6D7F;
  --md-sys-color-on-primary: #500724;
  --md-sys-color-primary-container: #F68AAA;
  --md-sys-color-on-primary-container: #FFE0E9;
  --md-sys-color-inverse-primary: #E04570;
  --md-sys-color-secondary: #E4BDC6;
  --md-sys-color-secondary-container: #5C3A44;
  --md-sys-color-on-secondary-container: #F8D8DF;
  --md-sys-color-outline-variant: #5A4248;
  --md-sys-color-surface-container-low: #201B1D;
}

/* ============================================================
   2c. SIDE COLOR VARIABLES
   ============================================================ */
:root {
  --side-color: var(--side-color-green);
  --side-color-red: #C62828;
  --side-color-blue: #1565C0;
  --side-color-green: #2E7D32;
  --side-color-yellow: #F9A825;
  --side-color-surface-red: #FFEBEE;
  --side-color-surface-blue: #E3F2FD;
  --side-color-surface-green: #E8F5E9;
  --side-color-surface-yellow: #FFF8E1;
  --side-color-on-surface-red: #B71C1C;
  --side-color-on-surface-blue: #0D47A1;
  --side-color-on-surface-green: #1B5E20;
  --side-color-on-surface-yellow: #E65100;
}

body.dark-theme {
  --side-color-surface-red: #3E1A1A;
  --side-color-surface-blue: #1A3A5F;
  --side-color-surface-green: #1B3A20;
  --side-color-surface-yellow: #3E3A0A;
  --side-color-on-surface-red: #EF9A9A;
  --side-color-on-surface-blue: #90CAF9;
  --side-color-on-surface-green: #A5D6A7;
  --side-color-on-surface-yellow: #FDE68A;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-background);
  background: var(--md-sys-color-background);
  min-height: 100vh;
  padding: 24px;
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 24px;
  box-shadow: var(--md-sys-elevation-1);
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

/* ============================================================
   5. TOP APP BAR
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.topbar-title {
  font: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-on-surface);
  letter-spacing: 0;
}

/* ============================================================
   6. USER PROFILE & AVATAR MENU
   ============================================================ */
.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.user-name {
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
  cursor: pointer;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  border: 2px solid var(--md-sys-color-primary);
}

.user-avatar:hover {
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}

.avatar-menu {
  display: none;
  position: absolute;
  top: 52px;
  right: 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-2);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
  padding: 4px 0;
}

.avatar-menu.open {
  display: block;
  animation: menu-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

@keyframes menu-in {
  from { opacity: 0; transform: scaleY(0.8); transform-origin: top right; }
  to   { opacity: 1; transform: scaleY(1); }
}

.avatar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
  font: var(--md-sys-typescale-body-large);
  position: relative;
  overflow: hidden;
}

.avatar-menu-item:hover {
  background: var(--md-sys-color-surface-container-highest);
}

.avatar-menu-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--md-sys-color-on-surface-variant);
}

.avatar-menu-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  margin: 4px 0;
}

/* Accent color picker */
.accent-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
}

.accent-picker-label {
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-right: 2px;
  white-space: nowrap;
}

.accent-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
}

.accent-dot:hover {
  transform: scale(1.15);
}

.accent-dot.active {
  border-color: var(--md-sys-color-on-surface);
}

.accent-dot[data-accent="purple"] { background: #6750A4; }
.accent-dot[data-accent="blue"]   { background: #0061A4; }
.accent-dot[data-accent="teal"]   { background: #0D9488; }
.accent-dot[data-accent="green"]  { background: #16A34A; }
.accent-dot[data-accent="orange"] { background: #E65100; }
.accent-dot[data-accent="rose"]   { background: #E04570; }

body.dark-theme .accent-dot[data-accent="purple"] { background: #D0BCFF; }
body.dark-theme .accent-dot[data-accent="blue"]   { background: #9ECAFF; }
body.dark-theme .accent-dot[data-accent="teal"]   { background: #5EEAD4; }
body.dark-theme .accent-dot[data-accent="green"]  { background: #6EE7A0; }
body.dark-theme .accent-dot[data-accent="orange"] { background: #FFB68C; }
body.dark-theme .accent-dot[data-accent="rose"]   { background: #FDA4AF; }

/* ============================================================
   7. BUTTONS — MD3 Filled
   ============================================================ */
.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  cursor: pointer;
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.1px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-button-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-0);
}

.md-button-filled:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.md-button-filled:active {
  box-shadow: var(--md-sys-elevation-0);
}

.md-button-tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-button-tonal:hover {
  box-shadow: var(--md-sys-elevation-1);
}

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

.md-button-outlined:hover {
  background: rgba(103, 80, 164, 0.08);
}

.md-button-text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 10px 12px;
}

.md-button-text:hover {
  background: rgba(103, 80, 164, 0.08);
}

.md-button:disabled {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.38);
  cursor: default;
  box-shadow: none;
}

.md-button-icon {
  padding: 10px;
  border-radius: var(--md-sys-shape-corner-full);
  min-width: 40px;
  min-height: 40px;
}

/* ============================================================
   8. ICON BUTTON
   ============================================================ */
.md-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-icon-button:hover {
  background: rgba(73, 69, 79, 0.08);
}

.md-icon-button .material-symbols-rounded {
  font-size: 24px;
}

/* ============================================================
   9. CARDS — MD3
   ============================================================ */
.md-card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px;
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-card-elevated {
  box-shadow: var(--md-sys-elevation-1);
  background: var(--md-sys-color-surface-container-low);
}

.md-card-elevated:hover {
  box-shadow: var(--md-sys-elevation-2);
}

.md-card-filled {
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: none;
}

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

/* ============================================================
   10. CHIPS — MD3
   ============================================================ */
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.1px;
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-chip img {
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
}

.md-chip-assist {
  background: transparent;
}

.md-chip-filter {
  background: transparent;
}

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

.md-chip-elevated {
  background: var(--md-sys-color-surface-container-low);
  border-color: transparent;
  box-shadow: var(--md-sys-elevation-1);
}

.md-chip .material-symbols-rounded {
  font-size: 18px;
}

/* ============================================================
   11. SNACKBAR — MD3
   ============================================================ */
.md-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 288px;
  max-width: 560px;
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-inverse-on-surface);
  background: var(--md-sys-color-inverse-surface);
  box-shadow: var(--md-sys-elevation-3);
  z-index: 1000;
  animation: snackbar-in var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}

.md-snackbar.info {
  background: var(--md-sys-color-inverse-surface);
}

.md-snackbar.ok {
  background: #2e7d32;
  color: #fff;
}

.md-snackbar.bad {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.md-snackbar.hiding {
  animation: snackbar-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard) forwards;
}

@keyframes snackbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(100%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes snackbar-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(100%); }
}

/* ============================================================
   12. FORM CONTROLS — MD3
   ============================================================ */

/* Text Field (outlined) */
.md-text-field {
  position: relative;
  width: 100%;
}

.md-text-field input,
.md-text-field textarea,
.md-text-field select {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  outline: none;
  transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-text-field input:focus,
.md-text-field textarea:focus,
.md-text-field select:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

.md-text-field label {
  position: absolute;
  left: 16px;
  top: -8px;
  background: var(--md-sys-color-surface);
  padding: 0 4px;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.md-text-field input:focus + label,
.md-text-field textarea:focus + label {
  color: var(--md-sys-color-primary);
}

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

.md-text-field select option {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .md-text-field select option {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

/* Checkbox — MD3 */
.md-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  user-select: none;
}

.md-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  flex-shrink: 0;
}

.md-checkbox input[type="checkbox"]:checked {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.md-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 10px;
  border: solid var(--md-sys-color-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.md-checkbox input[type="checkbox"]:hover {
  border-color: var(--md-sys-color-on-surface);
}

/* Textarea */
textarea.md-textarea {
  width: 100%;
  min-height: 80px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  resize: vertical;
  outline: none;
  transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

textarea.md-textarea:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

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

/* ============================================================
   14. BADGE — MD3
   ============================================================ */
.md-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

/* ============================================================
   15. SIDE BADGES (Faction)
   ============================================================ */
.side-badge {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.side-badge.blufor {
  background: #E3F2FD;
  color: #1565C0;
}

.side-badge.opfor {
  background: #FFEBEE;
  color: #C62828;
}

.side-badge.indep {
  background: #E8F5E9;
  color: #2E7D32;
}

body.dark-theme .side-badge.blufor {
  background: #1A3A5F;
  color: #90CAF9;
}

body.dark-theme .side-badge.opfor {
  background: #3E1A1A;
  color: #EF9A9A;
}

body.dark-theme .side-badge.indep {
  background: #1A3A2A;
  color: #A5D6A7;
}

/* ============================================================
   16. STATUS MESSAGES
   ============================================================ */
.status {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-medium);
  margin-bottom: 12px;
}

.status.info {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.status.ok {
  background: #E8F5E9;
  color: #1B5E20;
}

.status.bad {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

body.dark-theme .status.ok {
  background: #1B3A20;
  color: #A5D6A7;
}

/* ============================================================
   17. LABEL & HINT
   ============================================================ */
.label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
}

.hint {
  margin-top: 12px;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.muted {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
}

/* ============================================================
   18. MISSION-SPECIFIC COMPONENTS
   ============================================================ */
.mission-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px;
  background: var(--md-sys-color-surface);
  margin-top: 16px;
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.missions-day-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mission-card h3 {
  font: var(--md-sys-typescale-title-medium);
  color: var(--md-sys-color-on-surface);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}

.squad-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 12px;
  margin-top: 12px;
  background: var(--md-sys-color-surface-container-low);
}

.unit-row {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 8px 12px;
  margin-top: 8px;
  background: var(--md-sys-color-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.unit-row:hover {
  border-color: var(--md-sys-color-primary);
  background: rgba(103, 80, 164, 0.08);
}

.unit-row.mine {
  border-color: #F9A825;
  background: var(--md-sys-color-surface);
}

.unit-row.locked {
  border-color: #C62828;
  background: var(--md-sys-color-surface);
  cursor: default;
}

.unit-row.locked .unit-name {
  color: var(--md-sys-color-on-surface);
}

.unit-name {
  font: var(--md-sys-typescale-body-medium);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  min-width: 0;
}

.slot-meta {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}

.slot-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.queue {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 6px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-label-medium);
  white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-primary);
}

.queue-item img {
  width: 22px;
  height: 22px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
  border: 1.5px solid var(--md-sys-color-primary);
}

.locked-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF0F0;
  border: 1px solid #C62828;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px 14px;
  font: var(--md-sys-typescale-label-medium);
  font-weight: 700;
  color: #B71C1C;
  white-space: nowrap;
  justify-content: center;
}

.locked-player-card img {
  width: 28px;
  height: 28px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
  border: 1px solid #C62828;
}

.my-slots-bar {
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.my-slots-title {
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-primary-container);
  margin-bottom: 10px;
}

.my-slots-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.my-slot-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 6px 12px;
  font: var(--md-sys-typescale-label-medium);
  box-shadow: var(--md-sys-elevation-1);
}

.my-slot-chip .slot-info {
  color: var(--md-sys-color-on-surface-variant);
}

.admin-comment-block {
  margin-top: 12px;
  border-left: 3px solid #F9A825;
  background: rgba(249, 168, 37, 0.12);
  color: var(--md-sys-color-on-surface);
  border-radius: 0 var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0;
  padding: 12px 14px;
  font: var(--md-sys-typescale-body-small);
  white-space: pre-wrap;
}

/* Admin-specific */
.section {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 20px;
  background: var(--md-sys-color-surface-container-low);
  margin-top: 16px;
}

.section h2 {
  font: var(--md-sys-typescale-title-medium);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.section p {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

/* Side color switcher */
.side-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.side-color-options {
  display: flex;
  gap: 8px;
}

.side-color-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.side-color-btn:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.side-color-btn.active {
  border-color: var(--md-sys-color-on-surface);
  box-shadow: 0 0 0 2px var(--swatch);
}

.nav-link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 20px;
  cursor: pointer;
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.nav-link-button:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.row {
  display: flex;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.mission-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 16px;
  margin-top: 12px;
}

.subcard {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  padding: 12px;
}

.squad-list {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 8px;
  background: var(--md-sys-color-surface);
}

.squad-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font: var(--md-sys-typescale-body-medium);
  border-radius: var(--md-sys-shape-corner-extra-small);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.squad-list label:hover {
  background: rgba(103, 80, 164, 0.08);
}

.compact-panel {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  width: 100%;
}

.compact-panel.open {
  display: block;
  animation: panel-in var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}

@keyframes panel-in {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 500px; }
}

.slot-tag {
  font: var(--md-sys-typescale-label-small);
  padding: 3px 10px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-full);
  font-weight: 700;
}

.slot-tag.locked {
  background: var(--side-color-bg, #E8F5E9);
  color: var(--side-color-fg, #1B5E20);
  border: 1px solid var(--side-color-border, #2E7D32);
}

body.dark-theme .slot-tag.locked {
  background: var(--side-color-bg, #1B3A20);
  color: var(--side-color-fg, #A5D6A7);
  border-color: var(--side-color-border, #66BB6A);
}

.assign-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.assigned-player-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--side-color-bg, #E8F5E9);
  border: 1px solid var(--side-color-border, #2E7D32);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px 12px 4px 6px;
  font: var(--md-sys-typescale-label-medium);
  font-weight: 600;
  color: var(--side-color-fg, #1B5E20);
  white-space: nowrap;
}

.assigned-player-card img {
  width: 22px;
  height: 22px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
  border: 1px solid var(--side-color-border, #2E7D32);
}

body.dark-theme .assigned-player-card {
  background: var(--side-color-bg, #1B3A20);
  border-color: var(--side-color-border, #66BB6A);
  color: var(--side-color-fg, #A5D6A7);
}

body.dark-theme .assigned-player-card img {
  border-color: var(--side-color-border, #66BB6A);
}

/* Dark theme: explicit text colors for all components */
body.dark-theme .mission-card,
body.dark-theme .squad-card,
body.dark-theme .subcard,
body.dark-theme .unit-row,
body.dark-theme .queue-item,
body.dark-theme .my-slot-chip {
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .mission-card h3,
body.dark-theme .squad-card strong,
body.dark-theme .unit-name,
body.dark-theme .subcard strong {
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .mission-grid > div > div:not(.label) {
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .label,
body.dark-theme .hint,
body.dark-theme .muted,
body.dark-theme .slot-meta {
  color: var(--md-sys-color-on-surface-variant);
}

body.dark-theme .section h2 {
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .section p {
  color: var(--md-sys-color-on-surface-variant);
}

body.dark-theme .admin-comment-block {
  background: #3E2F0A;
  border-left-color: #F9A825;
  color: #FDE68A;
}

body.dark-theme .squad-list label {
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .container,
body.dark-theme .section,
body.dark-theme .mission-card,
body.dark-theme .squad-card,
body.dark-theme .subcard,
body.dark-theme .unit-row,
body.dark-theme .queue-item,
body.dark-theme .locked-player-card,
body.dark-theme .my-slot-chip,
body.dark-theme .squad-list {
  background: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-outline-variant);
}

body.dark-theme .unit-row.mine {
  background: var(--md-sys-color-surface);
  border-color: #FDD835;
}

body.dark-theme .unit-row.locked {
  background: var(--md-sys-color-surface);
  border-color: #EF5350;
}

body.dark-theme .locked-player-card {
  background: #3E1A1A;
  border-color: #EF5350;
  color: #EF9A9A;
}

body.dark-theme .queue-item {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
}

body.dark-theme .my-slots-bar {
  background: var(--md-sys-color-primary-container);
}

body.dark-theme .my-slots-title {
  color: var(--md-sys-color-on-primary-container);
}

body.dark-theme .my-slot-chip {
  background: var(--md-sys-color-surface-container-high);
}

body.dark-theme details summary {
  color: var(--md-sys-color-primary);
}

/* ============================================================
   19. DETAILS / SUMMARY
   ============================================================ */
details {
  margin-top: 8px;
}

details summary {
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-primary);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

details summary::before {
  content: 'expand_more';
  font-family: 'Material Symbols Rounded';
  font-size: 20px;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

details[open] summary::before {
  transform: rotate(180deg);
}

/* ============================================================
   20. LOADING / SKELETON
   ============================================================ */
.md-skeleton {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-surface-container-highest) 25%,
    var(--md-sys-color-surface-container) 50%,
    var(--md-sys-color-surface-container-highest) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--md-sys-shape-corner-small);
}

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   21. RIPPLE EFFECT
   ============================================================ */
.md-ripple {
  position: relative;
  overflow: hidden;
}

.md-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(128, 128, 128, 0.12) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}

.md-ripple:active::after {
  opacity: 1;
}

/* ============================================================
   22. FOCUS STYLES
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* ============================================================
   23. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body {
    padding: 12px;
  }

  .container {
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .topbar-title {
    font-size: 20px;
  }

  .user-profile {
    justify-content: flex-end;
    width: 100%;
  }

  .user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .avatar-menu {
    right: 0;
    top: 48px;
    min-width: 180px;
  }

  .mission-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .missions-day-pair {
    grid-template-columns: 1fr;
  }

  .slot-right {
    justify-content: flex-end;
  }

  .queue {
    justify-content: flex-end;
  }

  .my-slot-chip {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .mission-layout {
    grid-template-columns: 1fr;
  }

  .assign-row {
    grid-template-columns: 1fr;
  }

  .assign-row button {
    width: 100%;
  }

  .row button,
  .row .nav-link-button {
    width: 100%;
  }

  .hint {
    font-size: 12px;
    line-height: 1.4;
  }

  .section {
    padding: 14px;
  }
}

/* ============================================================
   24. SCROLLBAR (Webkit)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-container);
}

::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-on-surface-variant);
}