/* ============================================================
   Secuura UX States — empty / loading / error CSS additions.
   Loaded AFTER bootstrap-overrides.css, dashboard.css.
   Phase 4 / STATE-01..05 + QUAL-02/03/05.
   Base `.secuura-empty-state` is OWNED by Phase 3 dashboard.css;
   this file adds the __cta child, --compact / --page modifiers,
   plus reduced-motion accommodation.
   ============================================================ */

/* ---------- Empty state — additions to Phase 3 base ---------- */

/* CTA button inside an empty state. Visually consistent with .btn-primary
   (Phase 1 bootstrap-overrides.css) but its own class so we can size it
   distinctly inside the empty-state vertical rhythm. */
.secuura-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary));
  border-radius: calc(var(--radius) - 2px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.secuura-empty-state__cta:hover,
.secuura-empty-state__cta:focus {
  background-color: hsl(var(--primary) / 0.9);
  border-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}
.secuura-empty-state__cta:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Compact variant — used for in-table empty rows (small icon, less padding).
   Pairs with role="status" on parent. */
.secuura-empty-state--compact {
  padding: 24px 16px;
  gap: 0.5rem;
}
.secuura-empty-state--compact .secuura-empty-state__icon {
  font-size: 1.5rem;
}
.secuura-empty-state--compact .secuura-empty-state__headline {
  font-size: 1rem;
}

/* Page-level variant — used when the empty state is the whole page body
   (e.g. Templates list where no card wraps it). Adds vertical breathing. */
.secuura-empty-state--page {
  padding: 64px 24px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .secuura-empty-state__cta { transition: none; }
}

/* ============================================================
   Loading states — added by plan 04-02.
   Spinner overlay + skeleton variant + global page indicator.
   Per D-02 (hybrid: global hook + opt-in skeleton).
   Per D-08 (skeleton for list/table; spinner-in-button + aria-busy
   for single submits — applied at the markup level, not CSS).
   Per STATE-02, STATE-05, QUAL-02/03.
   ============================================================ */

/* ---------- Global page-level overlay (appended at runtime by secuura-loading.js) ---------- */

.secuura-loading-overlay {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.1);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.secuura-loading-overlay--visible { opacity: 1; }
.secuura-loading-overlay__label {
  color: hsl(var(--muted-foreground));
}

/* ---------- Spinner (consumed by _LoadingState partial and overlay) ---------- */

.secuura-loading-spinner {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid hsl(var(--muted));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: secuura-spin 700ms linear infinite;
  flex-shrink: 0;
}
.secuura-loading-spinner--lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

@keyframes secuura-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Inline / centred container (for _LoadingState Variant="spinner") ---------- */

.secuura-loading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 48px 16px;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.secuura-loading-block__label { line-height: 1.4; }

/* ---------- Skeleton variant (consumed by _LoadingState Variant="skeleton")
              D-08: this is the canonical pattern for list/table containers. ---------- */

.secuura-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 16px;
}
.secuura-skeleton-row {
  height: 16px;
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.5) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
  border-radius: calc(var(--radius) - 4px);
  animation: secuura-skeleton-shimmer 1200ms linear infinite;
}
.secuura-skeleton-row--short { width: 40%; }
.secuura-skeleton-row--medium { width: 65%; }
.secuura-skeleton-row--long { width: 90%; }
.secuura-skeleton-row--full { width: 100%; }

@keyframes secuura-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Opt-in container hook (per-view skeleton swap target) ---------- */

.secuura-loadable { position: relative; }
.secuura-loadable--is-loading > * { opacity: 0.4; pointer-events: none; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .secuura-loading-spinner {
    animation: none;
    border-top-color: hsl(var(--primary));
    opacity: 0.7;
  }
  .secuura-skeleton-row { animation: none; background: hsl(var(--muted)); }
  .secuura-loading-overlay { transition: none; }
}

/* ============================================================
   Error pages — added by plan 04-03.
   Re-skinned 404 / 500 / auth-error shells (non-Identity).
   Per D-03 (reassuring pattern: state of failure → cause → forward).
   Identity-area AccessDenied + Lockout are owned by Phase 2 plan 02-03
   (D-03 explicit boundary — Phase 4 does NOT re-touch those files).
   Per STATE-03, STATE-05.
   ============================================================ */

.secuura-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 560px;
  margin: 64px auto 32px;
  padding: 48px 32px;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-sans);
}
.secuura-error-page__wordmark {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto 24px;
}
.secuura-error-page__code {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted));
  border-radius: calc(var(--radius) - 4px);
}
.secuura-error-page__icon {
  font-size: 2.5rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 16px;
}
.secuura-error-page__headline {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: hsl(var(--card-foreground));
}
.secuura-error-page__copy {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.secuura-error-page__details {
  margin: -8px 0 24px;
  padding: 12px 14px;
  background-color: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 4px);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  word-break: break-all;
}
.secuura-error-page__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary));
  border-radius: calc(var(--radius) - 2px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.secuura-error-page__cta:hover,
.secuura-error-page__cta:focus {
  background-color: hsl(var(--primary) / 0.9);
  border-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
  text-decoration: none;
}
.secuura-error-page__cta:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.secuura-error-page__support {
  margin-top: 24px;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.secuura-error-page__support a {
  color: hsl(var(--primary));
  text-decoration: none;
  text-underline-offset: 4px;
}
.secuura-error-page__support a:hover,
.secuura-error-page__support a:focus {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .secuura-error-page {
    margin: 32px 16px;
    padding: 32px 20px;
  }
  .secuura-error-page__wordmark { width: 140px; margin-bottom: 16px; }
  .secuura-error-page__headline { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .secuura-error-page__cta { transition: none; }
}

/* ============================================================
   Form validation — added by plan 04-04.
   Site-wide non-Identity equivalents of Phase 2's Identity-scoped
   .secuura-form-error / .secuura-form-summary-errors classes.
   Per D-05 (mixed aria-live: per-field=polite, form-level critical=assertive).
   Per STATE-04, STATE-05.

   NOTE: this section also targets jQuery-validate runtime classes
   (.field-validation-error, .input-validation-error,
    .validation-summary-errors, .validation-summary-valid) so
    client-side and server-side validation errors render identically
    SITE-WIDE (including on Identity pages — intentional cross-phase
    visual improvement per plan 04-04 objective).
   ============================================================ */

/* ---------- Inline field error (next to invalid input) ---------- */

.secuura-field-error,
/* jQuery-validate's runtime class applied to the <span asp-validation-for> on submit */
.field-validation-error {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;        /* 13px */
  line-height: 1.4;
  color: hsl(var(--destructive));
}
.secuura-field-error:empty,
.field-validation-error:empty { display: none; }

.secuura-field-error::before,
.field-validation-error::before {
  content: "\f06a";            /* fa-exclamation-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 0.875rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Higher-specificity selectors override Bootstrap's .form-control border-color
   WITHOUT requiring !important. The UI-SPEC !important exception is
   scoped to .bg-* / .text-* utility classes only, not form-control overrides. */
.form-control.input-validation-error,
.secuura-input.input-validation-error {
  border-color: hsl(var(--destructive));
}
.form-control.input-validation-error:focus,
.secuura-input.input-validation-error:focus {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2);
}
/* When ASP.NET MVC server-side marks an input via aria-invalid="true", style consistently. */
.form-control[aria-invalid="true"],
.secuura-input[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}
.form-control[aria-invalid="true"]:focus,
.secuura-input[aria-invalid="true"]:focus {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2);
}

/* ---------- Form-level error summary (above submit button) ---------- */

.secuura-form-errors,
/* jQuery-validate's runtime class applied to the validation-summary div */
.validation-summary-errors {
  display: block;
  margin: 16px 0;
  padding: 12px 14px;
  background-color: hsl(var(--destructive) / 0.08);
  border: 1px solid hsl(var(--destructive) / 0.3);
  border-radius: calc(var(--radius) - 4px);
  color: hsl(var(--destructive));
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}
.secuura-form-errors ul,
.validation-summary-errors ul {
  margin: 0;
  padding-left: 20px;
}
.secuura-form-errors li,
.validation-summary-errors li { margin: 0.125rem 0; }

/* Hide the valid-state summary (ASP.NET still renders a stub <li style="display:none"></li>) */
.validation-summary-valid { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .secuura-field-error,
  .field-validation-error,
  .secuura-form-errors,
  .validation-summary-errors { transition: none; }
}