/* ========================================
   APP SHARED (Non-Admin) - Apple 2026 Baseline
   Goal:
   - Solid, calm surfaces (no heavy glass)
   - Subtle borders + shadows
   - Crisp typography + focus rings
   Notes:
   - Loaded AFTER component-scoped CSS to intentionally override legacy "glassmorphism"
   - Admin pages have their own `.admin-page` system; avoid fighting it here
   ======================================== */

/* De-glass the entire app by redefining the glass tokens to solid surfaces. */
:root {
    --glass-bg: var(--color-bg-primary);
    --glass-bg-heavy: var(--color-bg-primary);
    --glass-bg-light: var(--color-bg-primary);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-border-subtle: rgba(0, 0, 0, 0.04);
    --glass-blur: none;
    --glass-blur-heavy: none;
    --glass-shadow: none;
    --glass-shadow-elevated: var(--shadow-sm);
    --glass-shadow-hover: var(--shadow-md);
}

[data-theme="dark"] {
    --glass-bg: var(--color-bg-secondary);
    --glass-bg-heavy: var(--color-bg-secondary);
    --glass-bg-light: var(--color-bg-tertiary);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-blur: none;
    --glass-blur-heavy: none;
    --glass-shadow: none;
    --glass-shadow-elevated: var(--shadow-sm);
    --glass-shadow-hover: var(--shadow-md);
}

/* Layout surfaces: keep it calm and consistent. */
.page .main-ui {
    /* One consistent app background across ALL pages (no tinted gradient bleed). */
    background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .page .main-ui {
    background: var(--color-bg-secondary) !important;
}

.auth-loading-layout {
    background: var(--gradient-page) !important;
}

/* Topbar: solid, crisp, minimal. */
.layout-topbar {
    background: var(--color-bg-primary) !important;
    /* Use an opaque, neutral border so it doesn't pick up page gradient tint. */
    border-bottom: 1px solid var(--color-border-primary, #E2E8F0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .layout-topbar {
    border-bottom: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.08)) !important;
}

/* Standard content padding for the whole app. */
.app-body.app-body--content {
    /* Override Bootstrap's `px-0` utility (uses !important) with a more specific selector. */
    /* Matches the spacing used on /disruptions (desktop). */
    padding: var(--space-8, 32px) var(--space-8, 32px) var(--space-12, 48px) var(--space-8, 32px) !important;
    box-sizing: border-box;
    background: var(--color-bg-secondary);
}

/* Don't allow page-level wrappers to paint a different background than the app surface. */
.app-body.app-body--content :is([class$="-page"]) {
    background: transparent !important;
}

/* Match admin header typography for non-admin pages that use custom header markup. */
.app-body.app-body--content :is(.header-title, .hero-title) {
    font-size: var(--font-size-2xl, 1.5rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    line-height: 1.2 !important;
    letter-spacing: var(--letter-spacing-display, -0.03em) !important;
}

.app-body.app-body--content :is(.header-subtitle, .hero-subtitle) {
    font-size: var(--font-size-sm, 0.8125rem) !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--line-height-normal, 1.5) !important;
    letter-spacing: var(--letter-spacing-normal, -0.01em) !important;
    color: var(--color-text-muted, #94A3B8) !important;
}

/* Normalize common "header/content" wrappers so page-level gutter padding doesn't stack with app padding. */
.app-body.app-body--content :is([class$="-page"]) > :is([class$="-header"], [class$="-hero"]) {
    padding: 0 !important;
    margin-bottom: var(--space-6, 24px);
}

.app-body.app-body--content :is([class$="-page"]) > :is([class$="-content"]) {
    padding: 0 !important;
}

@media (max-width: 991.98px) {
    .app-body.app-body--content {
        /* Matches the spacing used on /disruptions (tablet). */
        padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-10, 40px) var(--space-6, 24px) !important;
    }

    .app-body.app-body--content :is([class$="-page"]) > :is([class$="-header"], [class$="-hero"]) {
        margin-bottom: var(--space-5, 20px);
    }

    .app-body.app-body--content :is([class$="-page"]) > :is([class$="-content"]) {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .app-body.app-body--content {
        /* Matches the spacing used on /disruptions (mobile). */
        padding: var(--space-5, 20px) var(--space-4, 16px) var(--space-8, 32px) var(--space-4, 16px) !important;
    }

    .app-body.app-body--content :is([class$="-page"]) > :is([class$="-header"], [class$="-hero"]) {
        margin-bottom: var(--space-4, 16px);
    }

    .app-body.app-body--content :is([class$="-page"]) > :is([class$="-content"]) {
        padding-bottom: 0 !important;
    }
}

/* Focus rings: remove yellow "glow", keep Apple-like blue tint. */
.input-wrapper input:hover:not([disabled]),
.autocomplete > .input-group input:hover:not([disabled]),
.input-wrapper textarea:hover:not([disabled]),
.autocomplete > .input-group input:focus:not([disabled]),
.input-wrapper input:focus:not([disabled]),
.input-wrapper textarea:focus:not([disabled]),
.password-input:hover,
.password-input:focus {
    box-shadow: 0 0 0 3px rgba(26, 124, 202, 0.12) !important;
}

/* Kill page-local blur accents that read as "2019 glass" rather than modern app UI. */
.main-ui :is(.wallet-action, .alert-message) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Avoid "attention grabbing" infinite motion; keep the UI calm. */
.notification-badge,
.alert-count {
    animation: none !important;
}