/* ==========================================================================
   THE INDUSTRIAL FORGE: MODERN SLEEK BLENDED BLUEPRINT MATRIX
   ========================================================================== */
:root {
    /* Modern Gradient Foundations: Blended Milled Aluminum & Precision Blues */
    --canvas-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); /* Smooth slate to overcast silver blend */
    --panel-sheet: rgba(255, 255, 255, 0.75); /* Translucent base sheet for glassmorphism layer */
    --panel-glass-border: rgba(203, 213, 225, 0.4); /* Subtle silver boundary accent line */

    --ink-charcoal: #0f172a; /* Deep, heavy ink charcoal for crisp typography "pop" */
    /* Sleek Performance Gradients */
    --steel-blue-gradient: linear-gradient(135deg, #1e3a8a 0%, #2b4c7e 50%, #1e293b 100%);
    --accent-glow-cyan: #38bdf8; /* High-visibility electric cyan trace light */
    --steel-blue-light: rgba(240, 244, 248, 0.5); /* Overcast sky highlight with translucency */
    /* Hardware Accent Weights & Seams */
    --milled-silver: #cbd5e1;
    --blueprint-grid: rgba(226, 232, 240, 0.6);
    --industrial-orange: #e65100;
    --text-muted: #475569;
    /* Physical Boundaries */
    --machined-seam: 1px solid var(--panel-glass-border);
    --heavy-weld-seam: 2px solid #2b4c7e;
    --panel-radius: 6px; /* Slightly softened for modern sleek profiling */
    /* Accents from Home.razor design keys */
    --fdot-orange: #e65100;
    --safety-amber: #d97706;
    --terminal-cyan: #0284c7;
}

/* ==========================================================================
   MUDBLAZOR CORE OVERRIDES & APP-SHELL INFRASTRUCTURE
   ========================================================================== */
body {
    background: var(--canvas-bg) !important;
    background-attachment: fixed !important; /* Locks background gradient for smooth scroll passes */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink-charcoal);
    min-height: 100vh;
}

/* Custom global container padding adjustment override */
.mud-container-max-xl {
    padding: 24px !important;
}

/* ==========================================================================
   THE FABRICATOR COMPONENT SPECIFICATIONS (SLEEK MODERNIZE EFFECT)
   ========================================================================== */

/* The Primary Enclosing Workspace Card (Glassmorphic Shield) */
.fabricator-panel {
    background: var(--panel-sheet) !important;
    backdrop-filter: blur(12px); /* Blends background coordinates softly into the panel space */
    -webkit-backdrop-filter: blur(12px);
    border: var(--machined-seam) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fabricator-panel:hover {
        transform: translateY(-2px); /* Subtle physical response interaction */
        box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
    }

/* The Main Command Dashboard Header Block (Deep Tech Gradient) */
.industrial-hero-panel {
    background: var(--steel-blue-gradient) !important;
    border-radius: var(--panel-radius);
    border-bottom: 3px solid var(--accent-glow-cyan); /* Neon trace accent anchor */
    box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.25) !important;
    position: relative;
    overflow: hidden;
}

    /* Fine-line background circuit mesh logic inside the hero block */
    .industrial-hero-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(var(--blueprint-grid) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.03;
        pointer-events: none;
    }

    .industrial-hero-panel .brand-heading {
        color: #ffffff !important;
        font-weight: 800;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
    }

    .industrial-hero-panel .body-telemetry {
        color: #e2e8f0 !important;
        font-size: 1.15rem !important;
        line-height: 1.6 !important;
    }

    .industrial-hero-panel .telemetry-tag {
        color: var(--accent-glow-cyan) !important;
        font-weight: 700;
        font-size: 0.7rem !important;
    }

/* The Unified Telemetry Metric Grid Runner */
.buzzword-grid {
    background: rgba(15, 23, 42, 0.03) !important;
    border: var(--machined-seam);
    border-radius: var(--panel-radius);
    backdrop-filter: blur(4px);
}

.buzzword-metric-box {
    text-align: center;
    position: relative;
}

/* Structural divider pins inside tracking bar grid */
@media (min-width: 600px) {
    .buzzword-metric-box:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background-color: var(--milled-silver);
        opacity: 0.5;
    }
}

.buzzword-title {
    font-family: Calibri, monospace;
    font-weight: 800;
    font-size: 1.1rem !important;
    color: #1e3a8a;
    letter-spacing: 0.05em;
}

.buzzword-subtext {
    font-size: 0.65rem !important;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ==========================================================================
   PORTFOLIO VIEWPORTS & KINEMATIC TRANSITIONS
   ========================================================================== */

/* Enclosing mask window for dynamic asset rotation runs */
.portfolio-viewport {
    border: var(--machined-seam) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Dynamic text background overlay block */
.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 60%, transparent 100%) !important;
    z-index: 3;
}

    .portfolio-overlay h3 {
        color: #ffffff !important;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .portfolio-overlay p {
        color: #cbd5e1 !important;
        font-size: 0.825rem !important;
        line-height: 1.5;
    }

/* Ensure the img tag covers the whole container layout properly */
.portfolio-img-wrapper {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-viewport:hover .portfolio-img-wrapper {
    transform: scale(1.04); /* High-end subtle parallax lens zoom on hover */
}

/* STROKE 1: Entry / Phase-In Animation Track */
.fade-in-cycle {
    animation: panelPhaseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* STROKE 2: Exit / Phase-Out Animation Track */
.slide-phase-out {
    animation: panelPhaseOut 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Standardized console markers */
.telemetry-tag {
    font-family: Calibri, monospace;
    font-size: 0.7rem !important;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: 0.15em;
}

/* ==========================================================================
   TIMING KINEMATICS & KEYFRAME MANIFESTS
   ========================================================================== */
@keyframes panelPhaseIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes panelPhaseOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

/* ==========================================================================
   OVERHEAD NAVIGATION MATRICES & UNDERLINE INTERACTION TRACKS
   ========================================================================== */

/* 1. BASE TAB LINK STYLE: Force high contrast on the dark gradient header */
.mud-nav-menu.d-flex .mud-nav-item .nav-tab-link,
.nav-tab-link {
    font-family: 'Consolas', 'SFMono-Regular', monospace;
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 10px 20px !important;
    border-radius: var(--panel-radius);
    transition: all 0.2s ease-in-out !important;
    border-bottom: none !important;
    text-decoration: none !important;
    border: 1px solid transparent; /* Smooth trace frame baseline spacer */
}

    /* Force standard unselected text and icons to be a clean, readable soft silver */
    .nav-tab-link .mud-nav-link-text,
    .nav-tab-link .mud-nav-link-icon {
        color: rgba(241, 245, 249, 0.8) !important; /* High-contrast soft white/silver */
        opacity: 1 !important;
    }

    /* Inline horizontal icon layout alignment parameters */
    .nav-tab-link .mud-nav-link-icon {
        margin-right: 8px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-size: 1.15rem !important;
    }

    /* 2. HOVER STATE: Brightens the text on cursor hover */
    .nav-tab-link:hover .mud-nav-link-text,
    .nav-tab-link:hover .mud-nav-link-icon {
        color: #ffffff !important;
    }

    .nav-tab-link:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    /* 3. HIGH-PRIORITY ACTIVE STATE OVERRIDE: Milled Dashboard Panel Pocket */
    .mud-nav-menu.d-flex .mud-nav-item .nav-tab-link.active,
    .nav-tab-link.active {
        /* Creates a dark, recessed pocket using a translucent black fill */
        background-color: rgba(0, 0, 0, 0.35) !important;
        /* The Two-Tone Frame: White light-catch lines vs. Black shadow cast lines */
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.6) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.6) !important;
        /* Smooth inner bevel shadowing to simulate a stamped sheet-metal pocket depth */
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
        border-radius: var(--panel-radius);
        /* Pushes the tab down by 1px to visually register the weight of the click physical travel */
        transform: translateY(1px);
        transition: all 0.15s ease-in-out !important;
    }

        /* Force the active text name and its icon to snap to crisp, luminous solid white inside the frame */
        .nav-tab-link.active .mud-nav-link-text,
        .nav-tab-link.active .mud-nav-link-icon,
        .mud-nav-menu.d-flex .mud-nav-item .nav-tab-link.active .mud-nav-link-text,
        .mud-nav-menu.d-flex .mud-nav-item .nav-tab-link.active .mud-nav-link-icon {
            color: #ffffff !important;
            font-weight: 800 !important;
            opacity: 1 !important;
            /* Applies the crisp white underline directly to the active visible elements */
            text-decoration: underline !important;
            text-decoration-color: #ffffff !important;
            text-decoration-thickness: 2px !important;
            text-underline-offset: 6px !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* Deepens text clarity inside the slot */
        }

/* 4. ACTIVE HOVER COMBINATION: Deepens the pocket slightly when hovered while selected */
.mud-nav-menu .mud-nav-item .nav-tab-link.active:hover {
    background-color: rgba(0, 0, 0, 0.45) !important;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   SAFE HORIZONTAL MENU LIMIT MATRIX (NO DRAWER CONFLICTS)
   ========================================================================== */
.mud-nav-menu.d-flex.flex-row {
    max-height: 100% !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    /* Strips the scrolling bar completely out of the navigation menu element */
    .mud-nav-menu.d-flex.flex-row::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

/* ==========================================================================
   GLOBAL APP-SHELL CONTENT PADDING OFFSETS
   ========================================================================== */
.mud-main-content {
    padding-top: 140px !important; /* Kept at 140px to completely clear the 130px header bar */
    transition: padding-top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 600px) {
    .mud-main-content {
        padding-top: 140px !important;
    }
}

.underlined-text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
/* ==========================================================================
   THE INDUSTRIAL FOOTER STRUCTURAL HARNESS
   ========================================================================== */
.industrial-footer {
    background: var(--steel-blue-gradient) !important;
    border-top: 4px solid var(--industrial-orange); /* Heavy warning orange anchor line */
    box-shadow: 0 -10px 30px rgba(30, 58, 138, 0.15) !important;
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

.footer-brand {
    font-family: Arial, monospace;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff !important; /* Forced crisp white branding text */
}

.footer-header {
    font-family: Arial, monospace;
    font-size: 1.0rem;
    text-decoration: underline;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-glow-cyan) !important; /* Luminous cyan headings */
    text-transform: uppercase;
}

.footer-text {
    font-size: 0.925rem;
    line-height: 1.5;
    color: #ffffff !important; /* Forced pure white text for maximum readability */
}

.footer-telemetry {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--accent-glow-cyan) !important; /* Swapped out dark grey for technical cyan blue */
    letter-spacing: 0.02em;
}

/* Action button configurations inside the panel slots */
.footer-action-btn {
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Brightened border line */
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
}

    .footer-action-btn:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: #ffffff !important;
    }

/* Base structural boundary split line */
.footer-bottom-seam {
    border-top: 1px solid rgba(56, 189, 248, 0.2); /* Changed border split from grey to blueprint cyan */
}

/* 1.25rem TYPOGRAPHY UPGRADES: Copyright text and bottom designations scaled up */
.copyright-text,
.fdot-badge-text {
    font-family: Arial, monospace;
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.copyright-text {
    color: #ffffff !important; /* Forced crisp white */
}

.fdot-badge-text {
    color: var(--accent-glow-cyan) !important; /* Forced electric cyan blue */
}
/* High-contrast cryptographic email link channel */
.footer-email-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    transition: color 0.15s ease-in-out;
}

    .footer-email-link:hover {
        color: var(--accent-glow-cyan) !important; /* Glows blueprint cyan on pointer hover */
        text-decoration: underline !important; /* Quick typographic marker feedback */
    }
/* Base settings for contact icons inside the grid column */
.footer-contact-icon {
    color: var(--accent-glow-cyan) !important; /* Forces icons to stand out in electric blueprint blue */
    font-size: 1.2rem !important; /* Matches standard typography baseline presence */
    transition: color 0.15s ease-in-out;
}

/* Optional: If a user hovers over the email row, light up the icon simultaneously with the text */
.footer-text:hover .footer-contact-icon {
    color: #ffffff !important; /* Snaps icon to white alongside the text */
}

/* Custom baseline subtext adjustments across standard markdown sheets */
.body-telemetry:not(.industrial-hero-panel *) {
    font-size: 1.15rem !important;
    line-height: 1.6;
}