/*
 * ==========================================================================
 * utilities.css — Aderian Zelly Utility Classes
 * ==========================================================================
 *
 * Single-purpose helper classes for spacing, visibility, and responsive
 * layout. Loaded AFTER components.css so that utilities can override
 * component defaults when applied directly to elements.
 *
 * Naming convention:  .az-{property}-{size|modifier}
 *   az  = Aderian Zelly prefix
 *
 * Sections:
 *   1. Spacing — margin-top, margin-bottom, padding
 *   2. Visibility — screen-reader-only, responsive show/hide
 *   3. Responsive Grid Helpers
 *
 * Spacing scale (from design-tokens.css):
 *   xs = 4px   | sm = 8px   | md = 16px  | lg = 24px  | xl = 32px
 * ========================================================================== */

/* ==========================================================================
 * 1. Spacing Utilities
 * ========================================================================== */

/* --- Margin Top --- */
.az-mt-xs { margin-top: var(--az-space-xs, 4px); }
.az-mt-sm { margin-top: var(--az-space-sm, 8px); }
.az-mt-md { margin-top: var(--az-space-md, 16px); }
.az-mt-lg { margin-top: var(--az-space-lg, 24px); }
.az-mt-xl { margin-top: var(--az-space-xl, 32px); }

/* --- Margin Bottom --- */
.az-mb-xs { margin-bottom: var(--az-space-xs, 4px); }
.az-mb-sm { margin-bottom: var(--az-space-sm, 8px); }
.az-mb-md { margin-bottom: var(--az-space-md, 16px); }
.az-mb-lg { margin-bottom: var(--az-space-lg, 24px); }
.az-mb-xl { margin-bottom: var(--az-space-xl, 32px); }

/* --- Padding (all sides) --- */
.az-p-xs { padding: var(--az-space-xs, 4px); }
.az-p-sm { padding: var(--az-space-sm, 8px); }
.az-p-md { padding: var(--az-space-md, 16px); }
.az-p-lg { padding: var(--az-space-lg, 24px); }
.az-p-xl { padding: var(--az-space-xl, 32px); }

/* ==========================================================================
 * 2. Visibility Utilities
 * ========================================================================== */

/* Screen-reader only — visually hidden but accessible to assistive tech */
.az-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden on mobile (<768px), visible on desktop */
.az-hidden-mobile {
  display: initial;
}

/* Hidden on desktop (≥768px), visible on mobile */
.az-hidden-desktop {
  display: none;
}

@media (max-width: 767.98px) {
  .az-hidden-mobile {
    display: none;
  }

  .az-hidden-desktop {
    display: initial;
  }
}

/* ==========================================================================
 * 3. Responsive Grid Helpers
 * ========================================================================== */

.az-grid {
  display: grid;
  gap: var(--az-space-md, 16px);
}

.az-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.az-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.az-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

.az-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 767.98px) {
  .az-grid--2col,
  .az-grid--3col,
  .az-grid--4col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * 4. Blazor Framework Styles
 * ========================================================================== */

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--az-color-primary, #081FF0);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

/* Form validation styles */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--az-color-success, #059669);
}

.invalid {
  outline: 1px solid var(--az-color-error, #dc2626);
}

.validation-message {
  color: var(--az-color-error, #dc2626);
}


/* ==========================================================================
 * Bootstrap-compatible spacing utilities (icon/element spacing)
 * These replace Bootstrap's me-*, ms-*, mt-*, mb-* utilities
 * ========================================================================== */

.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.me-3 { margin-right: 16px; }
.ms-1 { margin-left: 4px; }
.ms-2 { margin-left: 8px; }
.ms-3 { margin-left: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

/* Common Bootstrap text/display utilities */
.text-center { text-align: center; }
.text-muted { color: var(--az-text-secondary, #6b7280); }
.text-danger { color: var(--az-color-error, #dc2626); }
.visually-hidden,
.az-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}