/* ============================================================
   Error Pages
   Standalone styles for error.html, notfound.html, error500.html,
   timeouterror.html, and their CSHTML equivalents.
   ============================================================ */

/* Layout */

.error-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: #efefef;
  font-family: sans-serif;
}

.error-page a:not(.error-action):visited,
.error-page a:not(.error-action):link {
  color: #00736e;
  text-decoration: underline;
}

/* Card */

.error-card {
  width: 100%;
  max-width: 480px;
  padding-inline: 1rem;
  animation: error-fadeIn 0.5s ease-in-out;
}

/* Logo */

.error-logo {
  background: #fff;
  text-align: center;
  padding: 10px;
}

.error-logo img {
  width: 140px;
}

/* Title bar — teal by default, orange for server errors */

.error-title {
  background-color: #00b0ac;
  text-align: center;
  color: #fff;
  padding: 20px 10px;
}

.error-title--warning {
  background-color: orange;
}

.error-title h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Content area */

.error-content {
  background: #fff;
  padding-inline: 20px;
}

.error-message {
  padding-block: 20px;
}

.error-message p {
  margin-block-end: 10px;
}

/* Action button (Report a Problem) */

.error-action {
  display: block;
  padding: 10px 16px;
  background-color: #00b0ac;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-block-end: 20px;
}

.error-action:visited,
.error-action:link {
  color: #fff;
  text-decoration: none;
}

.error-action:hover {
  background-color: #009490;
}

/* Footer */

.error-footer {
  overflow: hidden;
}

.error-copyright {
  float: inline-end;
  padding-block-end: 2px;
  font-size: 0.875rem;
}

/* Trace ID box (error500, timeout) */

.trace-info {
  margin-block-start: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  color: #666;
}

.trace-label {
  font-weight: bold;
  color: #333;
}

.trace-id {
  word-break: break-all;
  user-select: all;
}

.trace-hint {
  margin-block-start: 5px;
  font-size: 11px;
  color: #888;
}

/* Utilities */

.hidden {
  display: none;
}

.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;
}

/* Animation */

@keyframes error-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive — full width on small screens */

@media (max-width: 480px) {
  .error-card {
    padding-inline: 0;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .error-card {
    animation: none;
  }
}