/* === CALMENA DESIGN SYSTEM === */

/* Import Google Fonts - Inter Variable */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* === TOKENS === */
@import 'tokens/_colors.css';
@import 'tokens/_typography.css';
@import 'tokens/_spacing.css';
@import 'tokens/_animations.css';

/* === BASE === */
@import 'base/_reset.css';
@import 'base/_global.css';

/* === UTILITIES === */
@import 'utilities/_layout.css';
@import 'utilities/_text.css';
@import 'utilities/_spacing.css';

/* === COMPONENTS === */
@import 'components/_buttons.css';
@import 'components/_cards.css';
@import 'components/_inputs.css';
@import 'components/_modals.css';
@import 'components/_loading.css';
@import 'components/_empty-state.css';
@import 'components/_section-header.css';
@import 'components/_filters.css';
@import 'components/_progress.css';
@import 'components/_auth.css';
@import 'components/_navigation.css';
@import 'components/_session.css';
@import 'components/_page-header.css';
@import 'components/_badges.css';

/* === BLAZOR SPECIFIC === */

#blazor-error-ui {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  padding: var(--space-4);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none;
  box-shadow: var(--shadow-md);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--space-4);
  top: var(--space-3);
}

.blazor-error-boundary {
  background: var(--color-error-subtle);
  color: var(--color-error);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.blazor-error-boundary::after {
  content: "Une erreur s'est produite.";
}

/* Loading indicator */
.loading-progress {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.loading-progress circle {
  fill: none;
  stroke: var(--color-accent-subtle);
  stroke-width: 0.4rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--color-accent);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Chargement...");
}

/* Form validation states */
.valid.modified:not([type=checkbox]) {
  border-color: var(--color-success);
}

.invalid {
  border-color: var(--color-error);
}

.validation-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

/* Page transitions */
.page-enter {
  animation: fade-in var(--duration-normal) var(--ease-out);
}
