/* ════════════════════════════════════════════════════════════════════════
   IronGuard 2026 unification theme
   Loaded LAST on every inner page — re-skins the legacy layout to match the
   new obsidian / glassmorphic homepage without touching page structure.
   Palette: obsidian #0B0C10 · titanium #C7CFD9/#8B95A3 · emerald #2EE6A6
   ════════════════════════════════════════════════════════════════════════ */

/* ── Canvas ─────────────────────────────────────────────────────────────── */
html, body {
    background: #0b0c10 !important;
    color: #c7cfd9 !important;
}

body::before,
body::after {
    display: none !important;
}

#matrix-background,
canvas#matrix-background {
    display: none !important;
}

/* Faint structural grid, same as homepage hero */
.page-content-section,
.page-content {
    position: relative;
    background: 
        radial-gradient(ellipse 900px 500px at 20% -10%, rgba(46, 230, 166, 0.06), transparent 60%),
        radial-gradient(ellipse 900px 500px at 85% 10%, rgba(59, 130, 246, 0.06), transparent 60%) !important;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav-enterprise {
    background: rgba(11, 12, 16, 0.72) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.logo-icon-enterprise {
    height: 38px !important;
    width: auto !important;
    max-width: none !important;
    filter: none !important;
}

.nav-logo:hover .logo-icon-enterprise {
    transform: none !important;
    filter: drop-shadow(0 0 12px rgba(46, 230, 166, 0.35)) !important;
}

.nav-links-enterprise a {
    color: #8b95a3 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

.nav-links-enterprise a:hover {
    color: #ffffff !important;
}

.nav-cta {
    border-radius: 0.65rem !important;
    border: 1px solid rgba(46, 230, 166, 0.5) !important;
    background: linear-gradient(135deg, rgba(46, 230, 166, 0.16), rgba(59, 130, 246, 0.14)) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.nav-cta:hover {
    border-color: rgba(46, 230, 166, 0.9) !important;
    box-shadow: 0 0 24px -6px rgba(46, 230, 166, 0.55) !important;
    transform: translateY(-1px) !important;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.page-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    letter-spacing: -0.02em !important;
}

.page-subtitle {
    color: #8b95a3 !important;
}

/* ── Glass cards (all page types) ───────────────────────────────────────── */
.dashboard-stat-card,
.dashboard-card,
.dashboard-install-banner,
.blog-card,
.help-category-card,
.help-accordion-item,
.help-search-section,
.pricing-card,
.pricing-faq-item,
.subscription-plan,
.whitelist-container,
.activity-item,
.setting-item {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 1rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.dashboard-stat-card:hover,
.blog-card:hover,
.help-category-card:hover,
.pricing-card:hover {
    border-color: rgba(46, 230, 166, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(46, 230, 166, 0.18),
        0 12px 48px -12px rgba(46, 230, 166, 0.35) !important;
    transform: translateY(-3px) !important;
}

.pricing-card-featured {
    border-color: rgba(46, 230, 166, 0.45) !important;
}

/* ── Accent swap: cyan → emerald ────────────────────────────────────────── */
.dashboard-install-title,
.dashboard-card-title,
.help-category-title,
.pricing-plan-name,
.blog-title,
.stat-label,
.setting-label {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.stat-value,
.pricing-price,
.pricing-amount {
    color: #2ee6a6 !important;
    background: none !important;
    -webkit-text-fill-color: #2ee6a6 !important;
    text-shadow: 0 0 24px rgba(46, 230, 166, 0.35) !important;
}

.stat-description,
.setting-description,
.pricing-description,
.blog-excerpt,
.help-category-description,
.dashboard-install-description {
    color: #8b95a3 !important;
}

.pricing-duration-label,
.blog-category,
.plan-badge,
.pricing-badge {
    color: #2ee6a6 !important;
    background: rgba(46, 230, 166, 0.08) !important;
    border-color: rgba(46, 230, 166, 0.3) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary-enterprise,
.blog-read-more {
    border-radius: 0.65rem !important;
    border: 1px solid rgba(46, 230, 166, 0.5) !important;
    background: linear-gradient(135deg, rgba(46, 230, 166, 0.16), rgba(59, 130, 246, 0.14)) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-primary-enterprise:hover {
    border-color: rgba(46, 230, 166, 0.9) !important;
    box-shadow: 0 0 24px -6px rgba(46, 230, 166, 0.55) !important;
    transform: translateY(-1px) !important;
}

/* ── Toggles & status ───────────────────────────────────────────────────── */
.toggle-switch input:checked + .toggle-slider {
    background: rgba(46, 230, 166, 0.85) !important;
    box-shadow: 0 0 12px rgba(46, 230, 166, 0.4) !important;
}

.status-indicator.active .status-dot {
    background: #2ee6a6 !important;
    box-shadow: 0 0 8px rgba(46, 230, 166, 0.9) !important;
}

.status-indicator.active .status-text {
    color: #2ee6a6 !important;
}

.usage-fill {
    background: linear-gradient(90deg, #2ee6a6, #3b82f6) !important;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea,
.whitelist-input,
.setting-select,
.pricing-duration-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.65rem !important;
    color: #ffffff !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(46, 230, 166, 0.6) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.12) !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer-enterprise,
.footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.footer-logo img {
    height: 34px !important;
    width: auto !important;
}

.footer-tagline,
.footer-links a {
    color: #8b95a3 !important;
}

.footer-links a:hover {
    color: #ffffff !important;
}

.footer-heading {
    color: #c7cfd9 !important;
}


/* ── De-duplicate nested frames on pricing (wrapper vs control) ─────────── */
.pricing-cta {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pricing-duration-selector {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pricing-duration-selector::before,
.pricing-duration-selector::after {
    display: none !important;
}

/* ── Scroll-driven reveal (CSS only, no JS) ─────────────────────────────── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pricing-card,
        .pricing-faq-item,
        .blog-card,
        .help-category-card,
        .dashboard-stat-card {
            animation: ig-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

@keyframes ig-reveal {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.pricing-duration-label {
    background: none !important;
    border: none !important;
    color: #8b95a3 !important;
    display: block !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    margin-bottom: 8px !important;
}


/* ── Premium motion package (matches homepage) ──────────────────────────── */

/* Cross-page view transitions (Chrome 126+, progressive enhancement) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: ig-page-out 0.22s ease both;
}

::view-transition-new(root) {
    animation: ig-page-in 0.3s ease both;
}

@keyframes ig-page-out {
    to { opacity: 0; transform: translateY(-8px); }
}

@keyframes ig-page-in {
    from { opacity: 0; transform: translateY(10px); }
}

/* Laser scroll-progress bar under the nav (scroll-driven, zero JS) */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .nav-enterprise::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            z-index: 1000;
            transform-origin: 0 50%;
            background: linear-gradient(90deg, #2ee6a6, #3b82f6);
            box-shadow: 0 0 12px rgba(46, 230, 166, 0.55);
            pointer-events: none;
            animation: ig-progress linear both;
            animation-timeline: scroll(root);
        }
    }
}

@keyframes ig-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Reveal coverage for remaining content blocks */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .help-accordion-item,
        .subscription-plan,
        .activity-item,
        .setting-item,
        .whitelist-container {
            animation: ig-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}