/* Manufacturing Copilot shared component library */

.mc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--mc-radius-md);
  font-family: var(--mc-font-sans);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--mc-duration-fast) var(--mc-ease),
    box-shadow var(--mc-duration-fast) var(--mc-ease),
    background var(--mc-duration-fast) var(--mc-ease),
    border-color var(--mc-duration-fast) var(--mc-ease);
}

.mc-button:hover {
  transform: translateY(-2px);
}

.mc-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 3px;
}

.mc-button-primary {
  color: var(--mc-white);
  background: linear-gradient(135deg, var(--mc-blue-700), var(--mc-blue-500));
  box-shadow: 0 14px 35px rgba(37, 99, 235, .28);
}

.mc-button-primary:hover {
  box-shadow: 0 20px 45px rgba(37, 99, 235, .38);
}

.mc-button-secondary {
  color: var(--mc-navy-900);
  background: rgba(255,255,255,.84);
  border-color: var(--mc-slate-300);
  box-shadow: var(--mc-shadow-sm);
}

.mc-button-dark {
  color: var(--mc-white);
  background: linear-gradient(135deg, var(--mc-navy-900), var(--mc-blue-800));
}

.mc-button-outline {
  color: var(--mc-blue-700);
  background: transparent;
  border-color: var(--mc-blue-500);
}

.mc-card {
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: var(--mc-radius-lg);
  background: rgba(255,255,255,.92);
  box-shadow: var(--mc-shadow-sm);
  transition:
    transform var(--mc-duration-normal) var(--mc-ease),
    box-shadow var(--mc-duration-normal) var(--mc-ease),
    border-color var(--mc-duration-normal) var(--mc-ease);
}

.mc-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 165, 250, .72);
  box-shadow: var(--mc-shadow-md);
}

.mc-glass {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(15, 23, 42, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 28px;
  padding: 0 .72rem;
  border-radius: var(--mc-radius-pill);
  font-size: .75rem;
  font-weight: 800;
}

.mc-badge-success {
  color: #15803D;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
}

.mc-badge-warning {
  color: #B45309;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
}

.mc-badge-danger {
  color: #B91C1C;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.32);
}

.mc-badge-info {
  color: #1D4ED8;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.28);
}

.mc-input,
.mc-select,
.mc-textarea {
  width: 100%;
  border: 1px solid var(--mc-slate-300);
  border-radius: var(--mc-radius-md);
  background: var(--mc-white);
  color: var(--mc-navy-900);
  padding: .85rem 1rem;
  font-family: var(--mc-font-sans);
  transition:
    border-color var(--mc-duration-fast) ease,
    box-shadow var(--mc-duration-fast) ease;
}

.mc-input:focus,
.mc-select:focus,
.mc-textarea:focus {
  outline: none;
  border-color: var(--mc-blue-500);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.mc-kpi {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
}

.mc-kpi::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -50px;
  top: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.24), transparent 70%);
}

.mc-kpi-label {
  color: var(--mc-slate-700);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mc-kpi-value {
  display: block;
  margin-top: .35rem;
  color: var(--mc-navy-900);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 900;
}

.mc-kpi-trend {
  display: block;
  margin-top: .55rem;
  color: var(--mc-success);
  font-size: .78rem;
  font-weight: 800;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--mc-duration-slow) var(--mc-ease),
    transform var(--mc-duration-slow) var(--mc-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}