/**
 * ClearCutBG System Status Dashboard CSS Style Architecture
 * Implements layout containments bounds, responsive card layouts, and device constraints configurations.
 */

@charset "UTF-8";

:root {
    color-scheme: light dark;
    --status-card-bg: rgba(255, 255, 255, 0.9);
    --status-card-border: rgba(226, 232, 240, 0.9);
    --status-focus-outline: #2563eb;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.6);
}

.dark {
    --status-card-bg: rgba(15, 23, 42, 0.75);
    --status-card-border: rgba(30, 41, 59, 0.9);
    --status-focus-outline: #3b82f6;
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* 1. Performance View Containment Specifications */
#main-content {
    contain: layout paint;
    content-visibility: auto;
}

.settings-card-node,
.accordion-item,
#macro-status-summary-card {
    contain: content;
}

/* 2. Custom CSS Variable Responsive Forms */
.service-status-card {
    background: linear-gradient(135deg, var(--status-card-bg) 0%, var(--glass-bg) 100%);
    border: 1px solid var(--status-card-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
}

.service-status-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.15);
}

/* Fluid scrollbars for overflows fields */
#services-status-grid-target {
    container-type: inline-size;
    container-name: services-grid;
}

/* 3. Programmatic Universal Focus Styles Outlines */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--status-focus-outline) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* WAI-ARIA Accordion Max-Height transitions parameters classes */
.accordion-content {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Safe Inset Area Boundaries Mapping for Mobile Devices Notches */
@media (max-width: 768px) {
    main {
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 16px)) !important;
        padding-left: env(safe-area-inset-left, 16px);
        padding-right: env(safe-area-inset-right, 16px);
    }
}

/* Scroll reveal entry node transitions classes configurations
   Fail-visible by design: the hidden pre-entrance state only applies once the
   page script arms it via <html class="reveal-armed">. If the reveal script
   never runs (blocked module, disabled JS, early exception), all content
   remains fully visible instead of being stuck at opacity:0 forever. */
html.reveal-armed .reveal-node {
    opacity: 0;
    transform: scale(0.98) translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}
html.reveal-armed .reveal-node.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* WCAG High Contrast Display Overrides Rules Mapping */
@media (forced-colors: active) {
    .service-status-card, #macro-status-summary-card, .accordion-item {
        border: 2px solid ButtonText !important;
        background: Canvas !important;
    }
    button, a {
        border: 1px solid ButtonText !important;
    }
}

/* Contrast Enhancement Media Filter Overrides */
@media (prefers-contrast: high) {
    .text-slate-400, .text-slate-500 {
        color: #111827 !important;
    }
    .dark .text-slate-400, .dark .text-slate-500 {
        color: #f9fafb !important;
    }
}

/* Low Transparency Interface Support Options */
@media (prefers-reduced-transparency: reduce) {
    header {
        background-color: #ffffff !important;
    }
    .dark header {
        background-color: #0b0f19 !important;
    }
    .service-status-card {
        background: #ffffff !important;
        backdrop-filter: none !important;
    }
    .dark .service-status-card {
        background: #0f172a !important;
    }
}

/* Vestibular Limitation Response Parameters - Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-node {
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}

/* Standardized Print Compilation Adjustments */
@media print {
    header, footer, button, #scroll-progress, [role="status"], #offline-network-indicator, #back-to-top {
        display: none !important;
    }
    body {
        background: #ffffff;
        color: #000000;
    }
    main {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .service-status-card, #macro-status-summary-card {
        border: 1px solid #000000 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}