/* V4 Aurora Geometric — Error Pages (Track Gap B)
 * V4 styling for the standalone error pages:
 *   public/views/404.html, 50X.html, maintenance.html
 *
 * Pages are served at error URLs (404 fallback, 50X for server
 * crashes, maintenance for planned downtime). Pre-V4 they were
 * neon/hacker-style full-page terminals with embedded CSS+JS +
 * matrix-rain animation + Konami-code easter egg — visually
 * off-brand for ASmiOS and heavyweight (~12 KB each).
 *
 * Cascade-merge: each error page links v4-views.css (shared brand
 * tokens) + v4-error-pages.css (THIS) loaded LAST so the cascade
 * wins. Vendor classes NOT touched (these pages had no vendor
 * cascade contract — replacing them outright).
 *
 * 5 mandatory V4 elements applied:
 *   1. grid-pattern bg (#0a1929 + 32px teal lines)
 *   2. corner-brackets (TL+BR ::before/::after, 24x24px, teal)
 *   3. accent-line gradient (above H1)
 *   4. sharp corners (border-radius: 0 everywhere)
 *   5. cyan glow on hover (teal box-shadow)
 *
 * Drop-in-revertible: replace the error HTML files back to vendor
 * originals, or `git revert` the merge commit.
 */

/* === BASE — full-page V4 surface === */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background:
        linear-gradient(rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(91, 164, 201, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
        #0a1929;
    color: #ffffff;
    font-family: 'IBM Plex Sans', 'Montserrat', 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* === PAGE LAYOUT — header + main + footer via grid === */

.v4-error-page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.v4-error-page > main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

/* === ERROR CARD === */

.v4-error-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: rgba(10, 25, 41, 0.6);
    border: 1px solid rgba(78, 205, 196, 0.35);
    border-radius: 0;
    padding: 56px 48px 48px;
    box-shadow:
        0 0 32px rgba(0, 0, 0, 0.4),
        inset 0 0 60px rgba(78, 205, 196, 0.03);
    text-align: center;
    overflow: visible;
}

/* TL+BR corner-brackets per V4 spec. */
.v4-error-card::before,
.v4-error-card::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 2;
}
.v4-error-card::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #4ECDC4;
    border-left: 2px solid #4ECDC4;
}
.v4-error-card::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid #4ECDC4;
    border-right: 2px solid #4ECDC4;
}

/* Accent-line above status icon. */
.v4-error-card .v4-error-accent {
    display: block;
    width: 64px;
    height: 2px;
    margin: 0 auto 24px;
    background: linear-gradient(90deg, transparent, #4ECDC4, #2d8b83, transparent);
    border-radius: 0;
}

/* === STATUS ICON === */

.v4-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border: 1px solid rgba(78, 205, 196, 0.45);
    border-radius: 0;
    background: rgba(78, 205, 196, 0.08);
    color: #4ecdc4;
    font-size: 1.6rem;
}
.v4-error-icon.danger {
    border-color: rgba(255, 91, 91, 0.55);
    background: rgba(255, 91, 91, 0.08);
    color: #ff5b5b;
}
.v4-error-icon.warning {
    border-color: rgba(255, 209, 102, 0.55);
    background: rgba(255, 209, 102, 0.08);
    color: #ffd166;
}

/* === ERROR CODE (huge monospace) === */

.v4-error-code {
    font-family: 'IBM Plex Sans', monospace;
    font-weight: 700;
    font-size: clamp(5rem, 14vw, 8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #4ecdc4;
    margin: 0 0 8px;
    text-shadow: 0 0 24px rgba(78, 205, 196, 0.35);
}

/* === HEADING + BODY === */

.v4-error-card h1 {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: 0;
    color: #ffffff;
}

.v4-error-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
}

.v4-error-card p.v4-error-detail {
    font-family: 'IBM Plex Sans', monospace;
    font-size: 0.82rem;
    color: rgba(78, 205, 196, 0.7);
    margin: 0 0 24px;
    letter-spacing: 0.02em;
}

/* === BUTTONS === */

.v4-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.v4-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.12s ease;
}

.v4-error-btn.primary {
    background: linear-gradient(90deg, #4ecdc4, #2d8b83);
    color: #0a1929;
    border-color: #4ecdc4;
    box-shadow: 0 0 18px rgba(78, 205, 196, 0.45);
}
.v4-error-btn.primary:hover {
    background: linear-gradient(90deg, #62e3da, #36a398);
    color: #0a1929;
    border-color: #62e3da;
    box-shadow: 0 0 28px rgba(78, 205, 196, 0.7);
    transform: translateY(-1px);
}
.v4-error-btn.primary:active {
    transform: translateY(0);
}

.v4-error-btn.ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(78, 205, 196, 0.35);
}
.v4-error-btn.ghost:hover {
    background: rgba(78, 205, 196, 0.08);
    color: #ffffff;
    border-color: #4ecdc4;
    box-shadow: 0 0 12px rgba(78, 205, 196, 0.3);
}

/* === STATUS CHIPS (for maintenance page) === */

.v4-error-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 0;
}

.v4-error-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-family: 'IBM Plex Sans', monospace;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(78, 205, 196, 0.25);
    border-radius: 0;
    background: rgba(10, 25, 41, 0.5);
    letter-spacing: 0.03em;
}
.v4-error-chip .v4-chip-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 0;
    background: #4ecdc4;
    box-shadow: 0 0 6px #4ecdc4;
}
.v4-error-chip.success .v4-chip-dot {
    background: #4ecdc4;
    box-shadow: 0 0 6px #4ecdc4;
}
.v4-error-chip.pending .v4-chip-dot {
    background: #ffd166;
    box-shadow: 0 0 6px #ffd166;
}

/* === RESPONSIVE === */

@media (max-width: 600px) {
    .v4-error-card {
        padding: 40px 24px 32px;
    }
    .v4-error-code {
        font-size: 5rem;
    }
    .v4-error-card h1 {
        font-size: 1.2rem;
    }
    .v4-error-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .v4-error-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === A11Y === */

@media (prefers-reduced-motion: reduce) {
    .v4-error-card,
    .v4-error-btn {
        transition: none;
    }
}