:root {
  --background: 220 14% 96%;
  --foreground: 220 20% 14%;

  --card: 0 0% 100%;
  --card-foreground: 220 20% 14%;

  --primary: 220 70% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 92%;
  --secondary-muted: 220 14% 95%;
  --muted-foreground: 220 10% 46%;

  --border: 220 13% 87%;

  --destructive: 0 72% 51%;

  --category-operateur: 200 65% 45%;
  --category-contremaitre: 270 45% 50%;
  --category-ingenieur: 150 50% 40%;
  --category-adv: 35 70% 48%;
  --category-soudeur: 0 60% 50%;
}

html, body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

code, .font-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

.normal-title {
  text-transform: none;
  letter-spacing: normal;
  font-weight: bold;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / 0.3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.panel-body {
  padding: 16px;
}

.category-label {
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.subcategory-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}


.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}

.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-left: 3px solid transparent;
}

.category-operateur {
  background: hsl(var(--category-operateur) / 0.12);
  color: hsl(var(--category-operateur));
  border-left-color: hsl(var(--category-operateur));
}

.category-contremaitre {
  background: hsl(var(--category-contremaitre) / 0.12);
  color: hsl(var(--category-contremaitre));
  border-left-color: hsl(var(--category-contremaitre));
}

.category-ingenieur {
  background: hsl(var(--category-ingenieur) / 0.12);
  color: hsl(var(--category-ingenieur));
  border-left-color: hsl(var(--category-ingenieur));
}

.category-adv {
  background: hsl(var(--category-adv) / 0.12);
  color: hsl(var(--category-adv));
  border-left-color: hsl(var(--category-adv));
}

.category-soudeur {
  background: hsl(var(--category-soudeur) / 0.12);
  color: hsl(var(--category-soudeur));
  border-left-color: hsl(var(--category-soudeur));
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes flash-out {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -8px);
    visibility: hidden;
  }
}

.flash-toast {
  animation: flash-in 160ms ease-out both, flash-out 480ms ease-in 3.2s forwards;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-indicator-hide {
  display: inline;
}

button.htmx-request #button-text,
.htmx-request #button-text {
  display: none;
}

button.htmx-request,
.htmx-request button[type="submit"] {
  pointer-events: none;
  opacity: 0.7;
  cursor: not-allowed;
}