/* ==========================================
   Material Design 3 - Component Library
   ========================================== */

/* Import MD3 Tokens */
@import 'md3-tokens.css';

/* ==========================================
   Buttons
   ========================================== */

.md3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.md3-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md3-button:hover::before {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md3-button:focus::before {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md3-button:active::before {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* Filled Button */
.md3-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level0);
}

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

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

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

/* Elevated Button */
.md3-button-elevated {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

.md3-button-elevated:hover {
  box-shadow: var(--md-sys-elevation-level2);
}

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

/* ==========================================
   Cards
   ========================================== */

.md3-card {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* Elevated Card */
.md3-card-elevated {
  box-shadow: var(--md-sys-elevation-level1);
}

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

/* Filled Card */
.md3-card-filled {
  background-color: var(--md-sys-color-surface-variant);
  box-shadow: var(--md-sys-elevation-level0);
}

/* Outlined Card */
.md3-card-outlined {
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-level0);
}

.md3-card-content {
  padding: 16px;
}

.md3-card-header {
  padding: 16px 16px 0;
}

.md3-card-media {
  width: 100%;
  height: auto;
  display: block;
}

.md3-card-actions {
  padding: 8px 16px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ==========================================
   Navigation Bar
   ========================================== */

.md3-top-app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: var(--md-sys-elevation-level2);
  z-index: 1000;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md3-top-app-bar-scrolled {
  box-shadow: var(--md-sys-elevation-level3);
}

.md3-top-app-bar-title {
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  flex: 1;
}

/* ==========================================
   Navigation Drawer
   ========================================== */

.md3-navigation-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background-color: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-level1);
  transform: translateX(-100%);
  transition: transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
  z-index: 1100;
  overflow-y: auto;
}

.md3-navigation-drawer.open {
  transform: translateX(0);
}

.md3-navigation-drawer-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: all var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
  z-index: 1050;
}

.md3-navigation-drawer-scrim.visible {
  opacity: 0.32;
  visibility: visible;
}

.md3-navigation-drawer-header {
  padding: 24px 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.md3-navigation-drawer-content {
  padding: 12px 0;
}

.md3-navigation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-full);
  margin: 0 12px 4px;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
}

.md3-navigation-item:hover {
  background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}

.md3-navigation-item.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* ==========================================
   Chips
   ========================================== */

.md3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  border: 1px solid var(--md-sys-color-outline);
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
}

.md3-chip:hover {
  background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}

.md3-chip-elevated {
  box-shadow: var(--md-sys-elevation-level1);
  border: none;
}

.md3-chip-filled {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
}

/* ==========================================
   Text Fields
   ========================================== */

.md3-text-field {
  position: relative;
  margin-bottom: 16px;
}

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

.md3-text-field-input:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

.md3-text-field-label {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: var(--md-sys-typescale-body-large-font-size);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md3-text-field-input:focus + .md3-text-field-label,
.md3-text-field-input:not(:placeholder-shown) + .md3-text-field-label {
  top: 8px;
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-primary);
}

/* Filled Text Field */
.md3-text-field-filled .md3-text-field-input {
  background-color: var(--md-sys-color-surface-variant);
  border: none;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
}

.md3-text-field-filled .md3-text-field-input:focus {
  border-bottom-width: 2px;
  border-bottom-color: var(--md-sys-color-primary);
}

/* ==========================================
   Lists
   ========================================== */

.md3-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.md3-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  min-height: 56px;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md3-list-item:hover {
  background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}

.md3-list-item-icon {
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
}

.md3-list-item-content {
  flex: 1;
}

.md3-list-item-title {
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 4px;
}

.md3-list-item-subtitle {
  font-size: var(--md-sys-typescale-body-medium-font-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* ==========================================
   Dialogs
   ========================================== */

.md3-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.md3-dialog-overlay.open {
  opacity: 0.32;
  visibility: visible;
}

.md3-dialog {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level3);
  max-width: 560px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.8);
  opacity: 0;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  z-index: 2001;
}

.md3-dialog.open {
  transform: scale(1);
  opacity: 1;
}

.md3-dialog-header {
  padding: 24px 24px 16px;
}

.md3-dialog-title {
  font-size: var(--md-sys-typescale-headline-small-font-size);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  color: var(--md-sys-color-on-surface);
}

.md3-dialog-content {
  padding: 0 24px 24px;
  color: var(--md-sys-color-on-surface-variant);
  overflow-y: auto;
}

.md3-dialog-actions {
  padding: 16px 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ==========================================
   Snackbar
   ========================================== */

.md3-snackbar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-level3);
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
  z-index: 3000;
}

.md3-snackbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.md3-snackbar-text {
  flex: 1;
  font-size: var(--md-sys-typescale-body-medium-font-size);
}

.md3-snackbar-action {
  color: var(--md-sys-color-inverse-primary);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  cursor: pointer;
}

/* ==========================================
   FAB (Floating Action Button)
   ========================================== */

.md3-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--md-sys-elevation-level3);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  z-index: 900;
}

.md3-fab:hover {
  box-shadow: var(--md-sys-elevation-level4);
}

.md3-fab-extended {
  width: auto;
  padding: 0 20px;
  gap: 12px;
}

/* ==========================================
   Tabs
   ========================================== */

.md3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface);
}

.md3-tab {
  flex: 1;
  padding: 14px 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-title-small-font-size);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  border: none;
  background: transparent;
}

.md3-tab:hover {
  background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}

.md3-tab.active {
  color: var(--md-sys-color-primary);
}

.md3-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}

/* ==========================================
   Progress Indicators
   ========================================== */

.md3-progress-linear {
  width: 100%;
  height: 4px;
  background-color: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-progress-linear-bar {
  height: 100%;
  background-color: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
}

.md3-progress-circular {
  width: 48px;
  height: 48px;
  border: 4px solid var(--md-sys-color-surface-variant);
  border-top-color: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: md3-spin 1s linear infinite;
}

@keyframes md3-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   Divider
   ========================================== */

.md3-divider {
  height: 1px;
  background-color: var(--md-sys-color-outline-variant);
  border: none;
  margin: 16px 0;
}

/* ==========================================
   Badge
   ========================================== */

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

/* ==========================================
   Utility Classes
   ========================================== */

.md3-surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.md3-surface-variant {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.md3-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md3-secondary {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.md3-tertiary {
  background-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}