/* Global base reset and styles */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

/* Buttons */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-primary, white), 0 0 0 0.25rem var(--accent, #258cfb);
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline-color: #4ade80;
}

[data-theme="dark"] .invalid {
    outline-color: #f87171;
}

[data-theme="dark"] .validation-message {
    color: #fca5a5;
}

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

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

/* Misc */
.content {
    padding-top: 1.1rem;
    position: relative;
}

h1:focus {
    outline: none;
}

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

/* ErrorCard - Branded error display component */
.error-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    color: var(--text-primary, #212529);
}

.error-card-icon {
    flex-shrink: 0;
    color: #dc3545;
    margin-top: 0.125rem;
}

.error-card-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Dark mode support */
[data-theme="dark"] .error-card {
    background-color: var(--bg-secondary, #2d3238);
    border-color: var(--border-color, #495057);
}

[data-theme="dark"] .error-card-icon {
    color: #f87171;
}

/* ===================================================================
   Blazor Reconnect Modal — HowlTicket branded
   Blazor toggles these classes on #components-reconnect-modal:
     .components-reconnect-show      — actively retrying
     .components-reconnect-hide      — connected / hidden
     .components-reconnect-failed    — gave up retrying
     .components-reconnect-rejected  — server rejected the circuit
   =================================================================== */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base, 250ms ease), visibility var(--transition-base, 250ms ease);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    visibility: visible;
}

/* Backdrop */
.reconnect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .reconnect-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* Card */
.reconnect-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    max-width: 420px;
    width: 90%;
    border-radius: var(--radius-lg, 12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 248, 244, 0.98) 100%);
    border: 1px solid var(--border-normal, #e2d8c7);
    border-top: 3px solid var(--accent, #E88634);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .reconnect-card {
    background: linear-gradient(135deg, rgba(21, 27, 35, 0.99) 0%, rgba(14, 18, 24, 0.98) 100%);
    border-color: var(--border-normal, #3a4658);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Icons */
.reconnect-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    font-size: 1.4rem;
}

.reconnect-icon--retrying {
    background: var(--accent-soft, rgba(232, 134, 52, 0.12));
    color: var(--accent, #E88634);
}

.reconnect-icon--retrying i {
    animation: reconnect-spin 1.2s linear infinite;
}

.reconnect-icon--failed {
    background: var(--danger-soft, rgba(239, 68, 68, 0.12));
    color: var(--danger, #ef4444);
}

/* Show correct icon per state */
.components-reconnect-show .reconnect-icon--retrying {
    display: flex;
}

.components-reconnect-failed .reconnect-icon--failed,
.components-reconnect-rejected .reconnect-icon--failed {
    display: flex;
}

/* State content — hide all by default */
.reconnect-state {
    display: none;
}

.components-reconnect-show .reconnect-state--retrying {
    display: block;
}

.components-reconnect-failed .reconnect-state--failed {
    display: block;
}

.components-reconnect-rejected .reconnect-state--rejected {
    display: block;
}

/* Typography */
.reconnect-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-strong, #1A1A1A);
    margin-bottom: 0.2rem;
}

[data-theme="dark"] .reconnect-title {
    color: var(--text-strong, #e6edf5);
}

.reconnect-text {
    font-size: 0.875rem;
    color: var(--text-muted, #7a7166);
    line-height: 1.4;
}

[data-theme="dark"] .reconnect-text {
    color: var(--text-muted, #94a3b8);
}

/* Reload button */
.reconnect-btn {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(135deg, var(--accent, #E88634) 0%, var(--accent-strong, #D87A2F) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
    box-shadow: 0 2px 8px rgba(232, 134, 52, 0.3);
}

.reconnect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 134, 52, 0.4);
}

.reconnect-btn:active {
    transform: translateY(0);
}

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