/**
 * Material Design 3 patterns
 * Sleek, modern UI with elevation and motion
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Material surfaces & states */
.mdc-surface { background-color: #fafafa; }
.mdc-surface-container { background-color: #f5f5f5; }
.mdc-surface-bright { background-color: #ffffff; }

/* Material card - elevated surface */
.mdc-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mdc-card:hover { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 7px -2px rgba(0, 0, 0, 0.1); }

/* Material filled button */
.mdc-filled-button {
  background-color: #348F41;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.mdc-filled-button:hover {
  background-color: #2a7234;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

/* Material tonal button */
.mdc-tonal-button {
  background-color: rgba(52, 143, 65, 0.12);
  color: #348F41;
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 500;
  transition: background-color 0.2s;
}
.mdc-tonal-button:hover { background-color: rgba(52, 143, 65, 0.2); }

/* Material outlined button */
.mdc-outlined-button {
  background: transparent;
  color: #348F41;
  border: 1px solid rgba(52, 143, 65, 0.5);
  border-radius: 20px;
  padding: 10px 24px;
  font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s;
}
.mdc-outlined-button:hover {
  background-color: rgba(52, 143, 65, 0.08);
  border-color: #348F41;
}

/* Material text button */
.mdc-text-button {
  background: transparent;
  color: #348F41;
  border: none;
  border-radius: 20px;
  padding: 10px 12px;
  font-weight: 500;
  transition: background-color 0.2s;
}
.mdc-text-button:hover { background-color: rgba(52, 143, 65, 0.08); }

/* Ripple-like hover state */
.mdc-state-layer {
  position: relative;
  overflow: hidden;
}
.mdc-state-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s;
}
.mdc-state-layer:hover::after { opacity: 0.04; }
.mdc-state-layer:active::after { opacity: 0.08; }

/* Top app bar */
.mdc-top-app-bar {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Navigation drawer item */
.mdc-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 28px;
  margin: 0 12px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}
.mdc-nav-item:hover { background-color: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); }
.mdc-nav-item.active { background-color: rgba(52, 143, 65, 0.12); color: #348F41; }

/* Typography - Material Type Scale */
.mdc-headline-large { font-size: 2rem; font-weight: 400; letter-spacing: -0.01em; line-height: 2.5rem; }
.mdc-headline-medium { font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 2rem; }
.mdc-headline-small { font-size: 1.25rem; font-weight: 400; letter-spacing: 0; line-height: 1.75rem; }
.mdc-title-large { font-size: 1.125rem; font-weight: 500; letter-spacing: 0; line-height: 1.5rem; }
.mdc-title-medium { font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25rem; }
.mdc-body-large { font-size: 1rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.5rem; }
.mdc-body-medium { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.25rem; }
.mdc-label-large { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25rem; }
.mdc-body-small { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1rem; }