@import url("tokens.css");

/* Composants transversaux. Les structures et couleurs pédagogiques locales
   gardent la priorité. */
.notalyr-ui :where(button, .button, [role="button"]) {
  transition: transform var(--nl-transition), border-color var(--nl-transition), background-color var(--nl-transition), box-shadow var(--nl-transition), filter var(--nl-transition);
}
.notalyr-ui :where(button, .button, [role="button"]):disabled,
.notalyr-ui :where([aria-disabled="true"]) {
  cursor: not-allowed;
  filter: saturate(.65);
  opacity: .62;
}
.notalyr-ui :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--nl-color-line-strong);
  border-radius: var(--nl-radius-control);
  background: var(--nl-color-surface);
  color: var(--nl-color-ink);
}
.notalyr-ui :where(dialog) {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  border-radius: var(--nl-radius-panel);
}
.notalyr-ui :where(dialog)::backdrop {
  background: var(--nl-color-overlay);
  backdrop-filter: blur(2px);
}
.notalyr-ui :where(.mode-card, .level-card, .niveau-card, .defi-card, .tutorial-card, .result-card, .account-panel) {
  border-color: var(--nl-color-line);
  border-radius: var(--nl-radius-card);
}
.notalyr-ui :where(.pill, .badge, .status-badge, .account-status, .work-student-state) { border-radius: var(--nl-radius-pill); }
.notalyr-ui :where(.nl-result-layout, .result-layout) { width: min(100%, 920px); }
.notalyr-ui :where(.nl-award-card, .result-card, .rh-report-card) {
  border-radius: var(--nl-radius-panel);
  box-shadow: var(--nl-shadow-card);
}
.notalyr-ui :where(.nl-result-actions, .result-actions, .actions) { gap: var(--nl-space-2); }
.notalyr-ui :where(.notalyr-loading, .work-detail-loading, [data-loading="true"], [aria-busy="true"]) { color: var(--nl-color-muted); }
.notalyr-ui :where(.notalyr-loading, [data-loading="true"])::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .55em;
  border: 2px solid color-mix(in srgb, var(--nl-color-secondary) 24%, transparent);
  border-top-color: var(--nl-color-secondary);
  border-radius: 50%;
  vertical-align: -.15em;
  animation: nl-ui-spin .8s linear infinite;
}
.notalyr-ui :where(.nl-status, [data-status]) {
  padding: var(--nl-space-3);
  border: 1px solid var(--nl-color-line);
  border-radius: var(--nl-radius-control);
  background: var(--nl-color-surface-soft);
  color: var(--nl-color-muted);
}
.notalyr-ui :where(.nl-status, [data-status="success"]) { border-color: #bfdcc9; background: var(--nl-color-success-soft); color: #276c49; }
.notalyr-ui :where(.nl-status, [data-status="warning"]) { border-color: #ead39f; background: var(--nl-color-warning-soft); color: #86570f; }
.notalyr-ui :where(.nl-status, [data-status="error"]) { border-color: #e5bcb7; background: var(--nl-color-danger-soft); color: #963f37; }
@keyframes nl-ui-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .notalyr-ui :where(.nl-result-actions, .result-actions) > :where(button, a) { flex: 1 1 150px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .notalyr-ui :where(dialog) { max-height: calc(100dvh - 12px); }
  .notalyr-ui :where(.nl-result-layout, .result-layout) { gap: var(--nl-space-2); }
}