/* Dark theme variables */
:root {
    --bg: #000000; /* black background */
    --surface: #0f1720; /* dark surface */
    --header-bg: #0b1418; /* header deep */
    --primary: #2dd4bf; /* teal accent */
    --accent: #60a5fa; /* blue accent */
    --muted: #94a3b8; /* muted text */
    --success: #22c55e;
    --danger: #ef4444;
    --text: #e6f0ff; /* light text */
    --text-muted: #9aa7b8;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100%;
}

/* Remove transient focus outline that appears on some containers when clicked */
.no-focus-wrapper:focus,
.no-focus-wrapper *:focus {
    outline: none !important;
    box-shadow: none !important;
}

.no-focus-wrapper h1 { outline: none; box-shadow: none; }

a, .btn-link {
    color: var(--accent);
}

.btn-primary {
    color: #000;
    background-color: var(--primary);
    border-color: rgba(45,212,191,0.85);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(230,240,255,0.08), 0 0 0 0.25rem rgba(96,165,250,0.12);
}

.content {
    padding-top: 1.1rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

/* Form validation colors adjusted for dark background */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: linear-gradient(90deg,#3b0000,#8b1f1f);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.darker-border-checkbox.form-check-input {
    border-color: #29323a;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}