:root {
  /* Primary Colors */
  --mui-primary-main: #195FE9;
  --mui-primary-dark: #0044CB;
  --mui-primary-light: #739CFF;
  --mui-primary-selected: #E5EEFF;
  --mui-primary-hover: #CCDEFF;
  
  /* Secondary Colors */
  --mui-secondary-main: #34EC87;
  
  /* Grayscale */
  --mui-black: #1E1E1E;
  --mui-granite: #565656;
  --mui-gray-dark: #999999;
  --mui-gray-medium: #D3D3D3;
  --mui-gray-light: #EDEDED;
  --mui-alabaster: #FAFAFA;
  --mui-white: #FFFFFF;
  
  /* Alert Colors */
  --mui-success: #0C893F;
  --mui-warning: #FFB301;
  --mui-error: #D63F49;
  
  /* Additional Colors */
  --mui-orange: #FC881D;
  --mui-green: #28B668;
  --mui-aqua: #28B299;
  --mui-purple: #A444B7;
  
  /* Spacing */
  --mui-spacing: 8px;
  
  /* Border Radius */
  --mui-radius-sm: 4px;
  --mui-radius-md: 8px;
  --mui-radius-lg: 12px;
  
  /* Shadows */
  --mui-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --mui-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --mui-shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.03);
  --mui-shadow-paper: 0 4px 15px 0 rgba(0, 0, 0, 0.03);
  
  /* Typography */
  --mui-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;

  /* Brand Tokens */
  --brand-primary: var(--mui-primary-main);
  --brand-accent: var(--mui-primary-main);
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 8%, white);
  --brand-primary-soft-strong: color-mix(in srgb, var(--brand-primary) 12%, white);
  --brand-primary-border: color-mix(in srgb, var(--brand-primary) 18%, white);
  --brand-primary-border-strong: color-mix(in srgb, var(--brand-primary) 34%, white);
  --brand-primary-focus-ring: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-primary-glow: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-primary-surface: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--brand-primary) 6%, white) 100%
  );
  --brand-primary-surface-subtle: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--brand-primary) 3%, white) 100%
  );
  --brand-primary-divider-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-primary) 28%, transparent),
    color-mix(in srgb, var(--brand-primary) 6%, transparent)
  );
  --brand-primary-connector-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-primary) 18%, transparent) 0%,
    color-mix(in srgb, var(--brand-primary) 50%, transparent) 100%
  );
  --brand-primary-connector-arrow: color-mix(
    in srgb,
    var(--brand-primary) 65%,
    transparent
  );
}

/* Brand Header */
.brand-header {
  width: 100%;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      color-mix(in srgb, var(--brand-primary) 2.5%, white) 100%
    );
  border-bottom: 1px solid var(--brand-primary-border);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
  position: relative;
  z-index: 10;
}

.brand-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-primary) 65%, white) 0%,
    color-mix(in srgb, var(--brand-accent) 65%, white) 100%
  );
}

.brand-header-content {
  width: min(var(--brand-header-max-width, 980px), calc(100vw - 32px));
  margin: 0 auto;
  padding: 18px 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 68px;
}

.brand-logo {
  display: block;
  height: auto;
  max-height: var(--brand-logo-max-height, 38px);
  width: auto;
  max-width: min(280px, 100%);
  object-fit: contain;
}

/* Links */
a {
  color: var(--brand-accent, var(--mui-primary-main));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--mui-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.33;
  color: var(--mui-black);
  background-color: var(--mui-alabaster);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: auto;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

@media (min-width: 600px) {
  header {
    display: block;
  }
  footer {
    display: none;
  }
}

@media (max-width: 599px) {
  footer {
    display: block;
  }

  .brand-header {
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.03);
  }

  .brand-header-content {
    width: min(var(--brand-header-max-width, 980px), calc(100vw - 24px));
    padding: 14px 0 12px;
    min-height: 56px;
  }

  .brand-logo {
    max-height: var(--brand-logo-max-height-mobile, 28px);
  }

  .mui-container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
}
/* Typography Classes */
.mui-h1 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.031rem;
  margin: 0 0 16px 0;
  color: var(--mui-black);
}

.mui-h2 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.33;
  letter-spacing: -0.031rem;
  margin: 0 0 12px 0;
  color: var(--mui-black);
}

.mui-h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.009rem;
  margin: 0 0 12px 0;
  color: var(--mui-black);
}

.mui-h4 {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.006rem;
  margin: 0 0 8px 0;
  color: var(--mui-black);
}

.mui-h5 {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: var(--mui-black);
}

.mui-h6 {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0 0 8px 0;
  color: var(--mui-black);
}

.mui-subtitle1 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.006rem;
  color: var(--mui-black);
}

.mui-subtitle2 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--mui-black);
}

.mui-body1 {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.33;
  color: var(--mui-black);
}

.mui-body2 {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--mui-black);
}

.mui-caption {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--mui-gray-dark);
}

.mui-overline {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.016rem;
  color: var(--mui-gray-dark);
  text-transform: uppercase;
}

/* Button Styles */
.mui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
  font-family: var(--mui-font-family);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.016rem;
  line-height: 1.75;
  text-transform: none;
  min-width: 64px;
  padding: 8px 22px;
  border-radius: var(--mui-radius-sm);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
              border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
              color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.mui-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mui-button.mui-button-contained {
  min-height: 44px;
  background-color: var(--brand-primary, var(--mui-primary-main));
  color: var(--mui-white);
  box-shadow: var(--mui-shadow-md);
}

.mui-button.mui-button-contained:hover:not(:disabled) {
  background-color: var(--brand-primary, var(--mui-primary-dark));
  filter: brightness(0.9);
}

.mui-button.mui-button-contained:disabled {
  background-color: var(--mui-gray-light);
  color: var(--mui-gray-dark);
  box-shadow: none;
}

.mui-button.mui-button-outlined {
  min-height: 44px;
  padding: 7px 21px;
  border: 2px solid var(--brand-primary, var(--mui-primary-main));
  color: var(--brand-primary, var(--mui-primary-main));
}

.mui-button.mui-button-outlined:hover:not(:disabled) {
  background-color: var(--mui-primary-hover);
}

.mui-button.mui-button-outlined:disabled {
  border-color: var(--mui-gray-medium);
  color: var(--mui-gray-dark);
}

.mui-button.mui-button-outlined.mui-button-error {
  border-color: var(--mui-error);
  color: var(--mui-error);
}

.mui-button.mui-button-outlined.mui-button-error:hover:not(:disabled) {
  background-color: rgba(214, 63, 73, 0.08);
}

.mui-button.mui-button-outlined.mui-button-accent {
  border-color: var(--brand-accent, var(--mui-primary-main));
  color: var(--brand-accent, var(--mui-primary-main));
}

.mui-button.mui-button-outlined.mui-button-accent:hover:not(:disabled) {
  background-color: rgba(20, 184, 166, 0.08);
}

.mui-button.mui-button-text {
  color: var(--brand-accent, var(--mui-primary-main));
}

.mui-button.mui-button-text:hover:not(:disabled) {
  background-color: var(--mui-primary-hover);
  opacity: 0.85;
}

.mui-button.mui-button-text:disabled {
  color: var(--mui-gray-dark);
}

.mui-button.mui-button-small {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 0.875rem;
}

/* Icon Button */
.mui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.mui-icon-button:hover {
  background-color: var(--brand-primary-soft);
}

/* Paper/Card Styles */
.mui-paper {
  background-color: var(--mui-white);
  color: var(--mui-black);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: var(--mui-radius-sm);
  padding: calc(var(--mui-spacing) * 3);
}

.mui-paper.mui-elevation-1 {
  box-shadow: var(--mui-shadow-sm);
}

.mui-paper.mui-elevation-2 {
  box-shadow: var(--mui-shadow-md);
}

.mui-paper.mui-elevation-3 {
  box-shadow: var(--mui-shadow-lg);
}

.mui-paper.mui-outlined {
  border: 1px solid var(--mui-gray-light);
  box-shadow: var(--mui-shadow-paper);
}

/* Text Field Styles */
.mui-text-field {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
}

.mui-text-field-input {
  font-family: var(--mui-font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4375em;
  color: var(--mui-black);
  box-sizing: border-box;
  position: relative;
  cursor: text;
  display: inline-flex;
  align-items: center;
  width: 100%;
  background-color: var(--mui-white);
  border: 1px solid var(--mui-gray-medium);
  border-radius: var(--mui-radius-sm);
  padding: 16.5px 14px;
  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}

.mui-text-field-input:hover {
  border-color: var(--mui-black);
}

.mui-text-field-input:focus {
  outline: 2px solid var(--brand-accent, var(--mui-primary-main));
  outline-offset: -1px;
  border-color: var(--brand-accent, var(--mui-primary-main));
}

.mui-text-field-label {
  color: var(--mui-gray-dark);
  font-family: var(--mui-font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4375em;
  letter-spacing: 0.00938em;
  padding: 0;
  display: block;
  margin-bottom: 8px;
}

/* Divider */
.mui-divider {
  margin: 0;
  flex-shrink: 0;
  border-width: 0;
  border-style: solid;
  border-color: var(--mui-gray-light);
  border-bottom-width: thin;
  background-color: var(--mui-gray-light);
  height: 1px;
  margin-top: calc(var(--mui-spacing) * 2);
  margin-bottom: calc(var(--mui-spacing) * 2);
}

/* Chip Styles */
.mui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 0.8125rem;
  font-family: var(--mui-font-family);
  font-weight: 400;
  border-radius: 16px;
  padding: 0 12px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  cursor: default;
  outline: 0;
  text-decoration: none;
  border: 0;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: var(--mui-gray-light);
  color: var(--mui-black);
}

.mui-chip.mui-chip-primary {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.mui-chip.mui-chip-secondary {
  background-color: rgba(52, 236, 135, 0.1);
  color: var(--mui-secondary-main);
}

.mui-chip.mui-chip-success {
  background-color: rgba(12, 137, 63, 0.1);
  color: var(--mui-success);
}

.mui-chip.mui-chip-warning {
  background-color: rgba(255, 179, 1, 0.1);
  color: var(--mui-warning);
}

.mui-chip.mui-chip-error {
  background-color: rgba(214, 63, 73, 0.1);
  color: var(--mui-error);
}

/* Container */
.mui-container {
  width: 100%;
  min-height: calc(100vh - 80px);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--mui-spacing) * 2);
  padding-right: calc(var(--mui-spacing) * 2);
  padding-bottom: calc(var(--mui-spacing) * 2);
}

@media (min-width: 600px) {
  .mui-container {
    max-width: 627px;
    padding-left: calc(var(--mui-spacing) * 3);
    padding-right: calc(var(--mui-spacing) * 3);
  }
}

/* Grid */
.mui-grid {
  display: grid;
  gap: calc(var(--mui-spacing) * 2);
}

.mui-grid.mui-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.mui-grid.mui-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mui-grid.mui-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .mui-grid.mui-grid-cols-2,
  .mui-grid.mui-grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Stack */
.mui-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--mui-spacing) * 2);
}

.mui-stack.mui-stack-row {
  flex-direction: row;
  align-items: center;
}

/* Alert */
.mui-alert {
  display: flex;
  padding: 6px 16px;
  font-family: var(--mui-font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  border-radius: var(--mui-radius-sm);
  background-color: transparent;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.mui-alert.mui-alert-info {
  color: rgb(1, 67, 97);
  background-color: rgb(229, 246, 253);
}

.mui-alert.mui-alert-success {
  color: rgb(30, 70, 32);
  background-color: rgb(237, 247, 237);
}

.mui-alert.mui-alert-warning {
  color: rgb(102, 60, 0);
  background-color: rgb(255, 244, 229);
}

.mui-alert.mui-alert-error {
  color: rgb(95, 33, 32);
  background-color: rgb(253, 237, 237);
}

/* Switch */
.mui-switch {
  display: inline-flex;
  width: 58px;
  height: 38px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  z-index: 0;
  vertical-align: middle;
  margin: 0 8px;
}

.mui-switch-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  margin: 0;
  cursor: pointer;
}

.mui-switch-track {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--mui-gray-dark);
  opacity: 0.3;
  transition: background-color 0.5s linear, opacity 0.5s linear;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mui-switch-thumb {
  box-shadow: none;
  background-color: var(--mui-white);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

.mui-switch-input:checked ~ .mui-switch-track {
  background-color: var(--brand-primary);
  opacity: 0.25;
}

.mui-switch-input:checked ~ .mui-switch-thumb {
  transform: translate(16px, -50%);
  background-color: var(--brand-primary);
}

.mui-switch-input:disabled ~ .mui-switch-track {
  background-color: var(--mui-gray-dark);
  opacity: 0.12;
}

.mui-switch-input:disabled ~ .mui-switch-thumb {
  background-color: var(--mui-gray-dark);
}

/* Checkbox */
.mui-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
  padding: 9px;
  border-radius: 50%;
  color: var(--mui-gray-dark);
}

.mui-checkbox input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
  cursor: pointer;
}

.mui-checkbox-icon {
  width: 18px;
  height: 18px;
  border: 2px solid var(--mui-gray-dark);
  border-radius: 2px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.mui-checkbox input:checked ~ .mui-checkbox-icon {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.mui-checkbox input:checked ~ .mui-checkbox-icon::after {
  content: '✓';
  position: absolute;
  color: var(--mui-white);
  font-size: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Utility Classes */
.mui-mt-1 { margin-top: calc(var(--mui-spacing) * 1); }
.mui-mt-2 { margin-top: calc(var(--mui-spacing) * 2); }
.mui-mt-3 { margin-top: calc(var(--mui-spacing) * 3); }
.mui-mt-4 { margin-top: calc(var(--mui-spacing) * 4); }

.mui-mb-1 { margin-bottom: calc(var(--mui-spacing) * 1); }
.mui-mb-2 { margin-bottom: calc(var(--mui-spacing) * 2); }
.mui-mb-3 { margin-bottom: calc(var(--mui-spacing) * 3); }
.mui-mb-4 { margin-bottom: calc(var(--mui-spacing) * 4); }

.mui-p-1 { padding: calc(var(--mui-spacing) * 1); }
.mui-p-2 { padding: calc(var(--mui-spacing) * 2); }
.mui-p-3 { padding: calc(var(--mui-spacing) * 3); }
.mui-p-4 { padding: calc(var(--mui-spacing) * 4); }

.mui-text-center { text-align: center; }
.mui-text-left { text-align: left; }
.mui-text-right { text-align: right; }

/* Navigation Bars */
.bottom-nav-bar,
.top-nav-bar {
  height: 80px;
  background-color: var(--mui-alabaster);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}

.bottom-nav-bar {
  border-top: 1px solid var(--mui-gray-light);
}

.top-nav-bar {
  border-bottom: 1px solid var(--mui-gray-light);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  text-decoration: none;
  color: var(--mui-gray-dark);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  gap: 4px;
}

.nav-item .material-icons {
  font-size: 24px;
}

.nav-item .nav-label {
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--mui-font-family);
}

.nav-item.active {
  color: var(--brand-primary, var(--mui-primary-main));
}

.nav-item:not(.active):hover {
  color: var(--mui-granite);
}

/* Home Page */
.header-with-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  padding-top: 16px;
}

.header-with-button .mui-h2 {
  margin: 0;
  padding: 0;
}

/* Boarding QR Code */
.boarding-code-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mui-primary);
}

.boarding-code-button:hover {
  opacity: 0.8;
}

.qr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mui-white);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.qr-overlay.show {
  display: flex;
  animation: slideUp 0.3s ease-out;
}

.qr-overlay.hide {
  display: flex;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.qr-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.qr-content img {
  width: 100%;
  max-width: 500px;
  height: auto;
}

.qr-helper-text {
  font-family: var(--mui-font-family);
  font-size: 1rem;
  color: var(--mui-gray-dark);
  text-align: center;
  margin: 0;
}

.qr-close-button {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2001;
}

/* Weekly Schedule Styles */
#day-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.day-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--mui-gray-medium);
  background: var(--mui-white);
  color: var(--mui-black);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 200ms;
  font-family: var(--mui-font-family);
}

.day-filter-chip:hover {
  background: var(--mui-alabaster);
  border-color: var(--mui-gray-dark);
}

.day-filter-chip.active {
  background: var(--mui-primary-main);
  color: var(--mui-white);
  border-color: var(--mui-primary-main);
}

.day-filter-chip.has-override {
  background: var(--mui-warning-light);
  border-color: var(--mui-warning);
  color: var(--mui-warning-dark);
}

.day-filter-chip.has-override:hover {
  background: var(--mui-warning);
  color: var(--mui-white);
}

.day-filter-chip.has-override.active {
  background: var(--mui-warning);
  color: var(--mui-white);
  border-color: var(--mui-warning);
}

.day-filter-chip .override-indicator {
  margin-left: 2px;
  font-weight: bold;
}

.day-column.hidden {
  display: none;
}

.schedule-table-container {
  position: relative;
}

#table-wrapper {
  max-height: 600px;
  overflow: auto;
  border: 1px solid var(--mui-gray-light);
  border-radius: var(--mui-radius-sm);
}

#schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mui-white);
  font-size: 0.875rem;
}

#schedule-table thead tr:first-child th {
  white-space: nowrap;
}

#schedule-table thead tr:nth-child(2) th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

.schedule-day-header {
  background: var(--mui-alabaster);
  padding: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 4;
}

.schedule-day-separator {
  border-right: 3px solid #ddd;
}

.schedule-stop-header {
  background: var(--mui-alabaster);
  border-bottom: 1px solid var(--mui-gray-light);
  border-top: 1px solid var(--mui-gray-light);
  padding: 8px 4px;
  text-align: center;
  font-weight: 500;
  font-size: 0.75rem;
  min-width: 100px;
  position: sticky;
  top: 30px;
  z-index: 3;
}

.schedule-stop-separator {
  border-right: 1px solid var(--mui-gray-light);
}

.schedule-table-row:nth-child(odd) {
  background: var(--mui-white);
}

.schedule-table-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.schedule-table-cell {
  border-bottom: 1px solid var(--mui-gray-light);
  padding: 8px;
  text-align: center;
  font-size: 0.75rem;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--mui-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--mui-granite);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms;
  font-family: var(--mui-font-family);
}

.scroll-arrow:hover {
  background: var(--mui-alabaster);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.scroll-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.scroll-arrow-left {
  left: 8px;
}

.scroll-arrow-right {
  right: 8px;
}

.scroll-arrow-icon {
  font-size: 20px;
}

@media (max-width: 599px) {
  #schedule-table {
    font-size: 0.75rem;
  }

  #schedule-table thead th,
  #schedule-table tbody td {
    min-width: 80px;
    padding: 6px 4px;
    font-size: 0.7rem;
  }
}

/* Modal */
.mui-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.mui-modal-overlay.show {
  display: flex;
}

.mui-modal-content {
  background: white;
  border-radius: var(--mui-radius-md);
  padding: calc(var(--mui-spacing) * 3);
  max-width: 400px;
  margin: calc(var(--mui-spacing) * 2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Success Overlay */
.mui-success-overlay {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: 90%;
  max-width: 400px;
}

.mui-alert-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mui-alert-icon {
  font-size: 24px;
}

.mui-alert-icon.mui-success {
  color: var(--mui-success);
}

.mui-alert-content h4 {
  margin: 0;
}

.mui-alert-content p {
  margin: 4px 0 0 0;
  opacity: 0.9;
}