/* css/components.css */
/* Material Design 3 Enterprise Components */

/* ========================================================================
   BUTTONS (MD3 Filled, Outlined, Text, Ghost, Tonal)
   ======================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-spacing-2);
  height: 40px;
  padding: 0 var(--md-sys-spacing-6); /* MD3 standard */
  border-radius: var(--md-sys-shape-corner-button); /* 18px */
  font: var(--md-sys-typescale-label-large);
  font-weight: 500;
  transition: background-color var(--md-sys-motion-duration-short) linear,
              color var(--md-sys-motion-duration-short) linear,
              box-shadow var(--md-sys-motion-duration-short) linear,
              border-color var(--md-sys-motion-duration-short) linear;
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* Sizing */
.btn-sm {
  height: 32px;
  padding: 0 var(--md-sys-spacing-4);
  font: var(--md-sys-typescale-label-medium);
}

.btn-lg {
  height: 48px;
  padding: 0 var(--md-sys-spacing-8);
}

/* Filled Button (Primary) */
.btn-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level1); /* Subdued elevation in MD3 */
}

.btn-primary:hover {
  background-color: #155EBF; /* Hover tint calculation approximation */
  box-shadow: var(--md-sys-elevation-level2);
}

.btn-primary:active {
  box-shadow: var(--md-sys-elevation-level0);
}

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

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

.btn-ghost:hover {
  background-color: var(--md-sys-state-hover);
  border-color: var(--md-sys-color-primary);
}

/* Danger Button */
.btn-danger-ghost {
  background-color: transparent;
  color: var(--md-sys-color-danger);
  border: 1px solid transparent;
}

.btn-danger-ghost:hover {
  background-color: var(--md-sys-color-danger-container);
  color: var(--md-sys-color-on-danger-container);
}

/* Icon Buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-sys-motion-duration-short);
}

.icon-btn:hover {
  background-color: var(--md-sys-state-hover);
  color: var(--md-sys-color-on-surface);
}

/* ========================================================================
   CARDS & PANELS (Surface & Elevation)
   ======================================================================== */
.panel {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-panel); /* 24px */
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--md-sys-spacing-6);
  margin-bottom: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-level1);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--md-sys-spacing-5);
  flex-wrap: wrap;
  gap: var(--md-sys-spacing-3);
}

.panel-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--md-sys-spacing-6) 0 var(--md-sys-spacing-4);
  padding-bottom: var(--md-sys-spacing-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.panel-hint {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-4);
}

/* Stat Cards */
.stat-card {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-card); /* 20px */
  padding: var(--md-sys-spacing-5) var(--md-sys-spacing-6);
  border: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
}

.stat-label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font: var(--md-sys-typescale-display-small);
  color: var(--md-sys-color-on-surface);
  margin-top: var(--md-sys-spacing-2);
}

/* Themed Stat Cards */
.stat-card.accent {
  background-color: var(--md-sys-color-warning-container);
  border-color: transparent;
}
.stat-card.accent .stat-value {
  color: var(--md-sys-color-on-warning-container);
}

.stat-card.success {
  background-color: var(--md-sys-color-success-container);
  border-color: transparent;
}
.stat-card.success .stat-value {
  color: var(--md-sys-color-on-success-container);
}

/* ========================================================================
   CHIPS & BADGES (Tags, Status Pills)
   ======================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--md-sys-spacing-2);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--md-sys-spacing-3);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium);
  font-weight: 500;
  text-transform: capitalize;
}

/* Semantic Status Colors */
.status-pending,
.status-rfq-received {
  background-color: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.status-quoted,
.status-approved,
.status-success {
  background-color: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

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

/* ========================================================================
   WORKFLOW STEPS (Timeline / Stepper)
   ======================================================================== */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--md-sys-spacing-4);
}

.step {
  display: flex;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-4);
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--md-sys-typescale-title-small);
  flex-shrink: 0;
}

.step-body h3 {
  font: var(--md-sys-typescale-title-small);
  margin-bottom: var(--md-sys-spacing-1);
}

.step-body p {
  font: var(--md-sys-typescale-body-small);
}

/* ========================================================================
   SNACKBAR (Toast Notifications)
   ======================================================================== */
.toast {
  position: fixed;
  bottom: var(--md-sys-spacing-6);
  right: var(--md-sys-spacing-6);
  background-color: #323232; /* MD3 Dark Snackbar Surface */
  color: #F2F2F2;
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  box-shadow: var(--md-sys-elevation-level3);
  z-index: var(--md-sys-zindex-snackbar);
  font: var(--md-sys-typescale-body-medium);
  min-width: 288px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  animation: md-toast-slide-up var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.toast.success { border-left: 4px solid var(--md-sys-color-success); }
.toast.error { border-left: 4px solid var(--md-sys-color-danger); }

@keyframes md-toast-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
   DIVIDER
   ======================================================================== */
.divider {
  height: 1px;
  width: 100%;
  background-color: var(--md-sys-color-outline-variant);
  margin: var(--md-sys-spacing-4) 0;
}