/* Veldrath.Web — base styles (MudBlazor handles most UI components) */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ── Body defaults ───────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: var(--vds-font-body);
  background: var(--mud-palette-background);
  color: var(--mud-palette-text-primary);
}

a {
  color: var(--mud-palette-primary-lighten);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ── Announcement bar ────────────────────────────────────────────────────── */

.announcement-bar {
  background: var(--mud-palette-dark-lighten);
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Fat footer ──────────────────────────────────────────────────────────── */

.fat-footer {
  background: var(--mud-palette-surface);
  border-top: 1px solid var(--mud-palette-lines-default);
}

.fat-footer-heading {
  font-family: var(--vds-font-heading);
  font-weight: 600;
  color: var(--mud-palette-secondary-lighten);
}

.fat-footer-description {
  color: var(--mud-palette-text-secondary);
  line-height: 1.6;
}

.fat-footer-link {
  color: var(--mud-palette-text-secondary);
  transition: color 0.15s ease;
}

.fat-footer-link:hover {
  color: var(--mud-palette-primary-lighten);
  text-decoration: none;
}

.fat-footer-copyright {
  color: var(--vds-text-subtle);
}

/* ── MudBlazor dark-theme overrides ──────────────────────────────────────── */

/* Scrollbar styling for the dark theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--mud-palette-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--mud-palette-gray-light);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mud-palette-lines-inputs);
}

/* Selection color */
::selection {
  background: var(--vds-seal-muted);
  color: var(--mud-palette-text-primary);
}

/* ── Blazor error UI ─────────────────────────────────────────────────────── */

#blazor-error-ui {
  background: var(--vds-danger-muted);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  border-top: 1px solid var(--mud-palette-error);
  color: var(--mud-palette-error);
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ── VDS text utilities ── */

.text-lore {
  font-family: var(--vds-font-reading);
  line-height: 1.7;
  color: var(--mud-palette-text-primary);
}

/* ── VDS layout utilities (supplement MudBlazor spacing/flex utilities) ─── */

.paper-danger {
  background-color: var(--vds-danger-muted);
  border: 1px solid var(--mud-palette-error);
}

.paper-code {
  background: var(--vds-bg-3);
  border: 1px solid var(--mud-palette-lines-default);
  max-height: 300px;
  overflow-y: auto;
}

.stack-trace {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
  font-family: var(--vds-font-mono);
}

.icon-3x {
  font-size: 3rem;
}

.select-narrow {
  max-width: 280px;
}

/* ── OAuth provider buttons ────────────────────────────────────────────── */

.mud-button-filled.btn-oauth-discord {
  background-color: var(--vds-oauth-discord) !important;
  color: #fff !important;
}

.mud-button-filled.btn-oauth-google {
  background-color: var(--vds-oauth-google) !important;
  color: #fff !important;
}

.mud-button-filled.btn-oauth-microsoft {
  background-color: var(--vds-oauth-microsoft) !important;
  color: #fff !important;
}

/* ── OAuth divider ("or continue with") ────────────────────────────────── */

.oauth-divider {
  color: var(--mud-palette-text-secondary);
  font-size: 0.85rem;
}

.oauth-divider-line {
  border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Sizing helpers ────────────────────────────────────────────────────── */

.min-w-100 {
  min-width: 100px;
}