/* =========================================================================
   LOCKED CORPORATE CONTRAST THEME (Universal Across All 175+ Pages)
   Strict Hex Specs:
   - Canvas Background: #F4F6F9
   - Content Cards & Sections: #FFFFFF
   - Primary Text: #111827
   - Secondary Text: #4B5563
   - Brand Accent 1: #0078D4 (Microsoft Blue)
   - Brand Accent 2: #107C41 (SharePoint/Excel Green)
   ========================================================================= */

/* 1. Universal Color-Scheme Lock & Anti-Inversion Variables */
:root, [data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light !important;
    --canvas-bg: #F4F6F9;
    --card-bg: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #64748b;
    --border-color: #E5E7EB;
    --border-hover: #CBD5E1;
    --accent-primary: #0078D4;
    --accent-hover: #005a9e;
    --accent-secondary: #107C41;
    --accent-secondary-hover: #0b5c2f;
    --bg-primary: #F4F6F9;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F8FAFC;
    --card-border: #E5E7EB;
    --nav-bg: rgba(255, 255, 255, 0.98);
    --footer-bg: #FFFFFF;
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 25px -5px rgba(0, 120, 212, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
    :root, html, body, div, section, article, nav, footer, header, p, h1, h2, h3, h4, h5, h6, span, a, input, select, textarea, button {
        color-scheme: light !important;
    }
}

/* 2. Base Universal Reset & Typography */
html {
    background-color: #F4F6F9 !important;
    color: #111827 !important;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light !important;
}

body {
    background-color: #F4F6F9 !important;
    color: #111827 !important;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* 3. Global Hardened Overrides for Dark Tailwind Classes Across Legacy HTML */
.bg-\[\#0B0F19\], [class*="bg-[#0B0F19]"],
.bg-\[\#0D121E\], [class*="bg-[#0D121E]"],
.bg-slate-900, .bg-slate-950, .bg-gray-900, .bg-gray-950, .bg-black {
    background-color: #FFFFFF !important;
}

.bg-slate-800, .bg-gray-800, [class*="bg-[#1a1f2e]"], [class*="bg-[#161d2d]"] {
    background-color: #F4F6F9 !important;
}

/* Text Overrides */
.text-white {
    color: #111827 !important;
}

/* Preserve white text for primary blue/green buttons & badges */
button, .btn, [class*="btn-"], a[class*="btn"], 
button.bg-\[\#0078D4\], a.bg-\[\#0078D4\], button.bg-\[\#107C41\], a.bg-\[\#107C41\],
.bg-\[\#0078D4\] *, .bg-\[\#107C41\] *, .bg-blue-600 *, .bg-emerald-600 * {
    color: #FFFFFF !important;
}

.gradient-text {
    color: #0078D4 !important;
    background: none !important;
    -webkit-text-fill-color: #0078D4 !important;
    background-clip: border-box !important;
}

.text-gray-100, .text-gray-200, .text-gray-300, .text-slate-100, .text-slate-200, .text-slate-300 {
    color: #111827 !important;
}
.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500 {
    color: #4B5563 !important;
}

/* Border Overrides */
.border-gray-800, .border-gray-700, .border-slate-800, .border-slate-700, .border-gray-900 {
    border-color: #E5E7EB !important;
}

/* 4. Explicit Class Utility Components */
.corporate-canvas {
    background-color: #F4F6F9 !important;
    color: #111827 !important;
}

.corporate-card, .kit-card, .card, .magnet .card, .toc, .result, .cl-item, .uc {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.corporate-card:hover, .kit-card:hover {
    border-color: #0078D4 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 120, 212, 0.12) !important;
}

/* Fixed Text Classes */
.text-primary-slate, h1, h2, h3, h4, h5, h6 {
    color: #111827 !important;
}

.text-secondary-muted, p, span.sub {
    color: #4B5563 !important;
}

/* Brand Buttons - White Text Preserved for Buttons Specifically */
.btn-brand-blue, .btn-brand-blue *, a.btn-brand-blue, button.btn-brand-blue {
    background-color: #0078D4 !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    font-weight: 600;
}

.btn-brand-blue:hover {
    background-color: #005a9e !important;
    color: #FFFFFF !important;
}

.btn-brand-green, .btn-brand-green *, a.btn-brand-green, button.btn-brand-green {
    background-color: #107C41 !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    font-weight: 600;
}

.btn-brand-green:hover {
    background-color: #0b5c2f !important;
    color: #FFFFFF !important;
}

.btn-outline-corporate, .btn.ghost {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #D1D5DB !important;
    font-weight: 600;
}

.btn-outline-corporate:hover, .btn.ghost:hover {
    background-color: #F9FAFB !important;
    border-color: #0078D4 !important;
    color: #0078D4 !important;
}

/* 5. Navbar & Footer Enforced Corporate Styling */
#navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

#navbar a {
    color: #111827 !important;
}

#navbar a:hover {
    color: #0078D4 !important;
}

#footer {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E5E7EB !important;
    color: #111827 !important;
}

#footer a {
    color: #4B5563 !important;
}

#footer a:hover {
    color: #0078D4 !important;
}

/* 6. Form Controls */
.corporate-input, input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    background-color: #F9FAFB !important;
    color: #111827 !important;
    border: 1px solid #D1D5DB !important;
}

.corporate-input:focus, input:focus, select:focus, textarea:focus {
    background-color: #FFFFFF !important;
    border-color: #0078D4 !important;
    outline: 2px solid rgba(0, 120, 212, 0.2) !important;
}

/* 7. Prose & Articles Styling */
.prose-content {
    color: #111827 !important;
}

.prose-content p, .prose-content li {
    color: #4B5563 !important;
    line-height: 1.75;
}

.prose-content strong, .prose-content b {
    color: #111827 !important;
    font-weight: 600;
}

.prose-content a {
    color: #0078D4 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose-content a:hover {
    color: #005a9e !important;
}

.prose-content blockquote {
    border-left: 4px solid #0078D4 !important;
    background-color: #F4F6F9 !important;
    color: #4B5563 !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    margin: 1.5rem 0 !important;
}

.prose-content code {
    background-color: #F8FAFC !important;
    color: #0078D4 !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875em !important;
    border: 1px solid #E5E7EB !important;
}

.prose-content pre {
    background-color: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    color: #111827 !important;
    overflow-x: auto;
}

.prose-content th, .prose-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EB;
    text-align: left;
}

.prose-content th {
    background-color: #F4F6F9;
    color: #111827;
    font-weight: 600;
}

.prose-content td {
    color: #4B5563;
}

/* 8. Animations & Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.animation-fade-in {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 9. Universal Architectural Pattern Suite (Applied Across All 175+ Pages) */

/* Auto-apply radial dotted pattern to all page heroes, main headers, and top sections */
.hero-pattern,
.dot-pattern,
.dot-pattern-lg,
header:not(#navbar),
.page-header,
main > header,
main > section:first-of-type,
section.hero,
section.service-hero,
section.article-hero,
section.pt-32,
section.pt-28,
section.pt-24 {
    background-color: #F4F6F9 !important;
    background-image: radial-gradient(#CBD5E1 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
    position: relative;
}

/* Dense Dot Grid Pattern for Sidebars, Cards, and Modals */
.dot-pattern-sm, .sidebar-pattern, .modal-pattern {
    background-color: #F4F6F9 !important;
    background-image: radial-gradient(#CBD5E1 1px, transparent 1px) !important;
    background-size: 16px 16px !important;
}

/* Brand Blue Tinted Dotted Grid */
.dot-pattern-blue {
    background-color: #F4F6F9 !important;
    background-image: radial-gradient(rgba(0, 120, 212, 0.25) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
}

/* SharePoint Green Tinted Dotted Grid */
.dot-pattern-green {
    background-color: #F4F6F9 !important;
    background-image: radial-gradient(rgba(16, 124, 65, 0.25) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
}

/* Blueprint Engineering Grid Overlay */
.blueprint-grid {
    background-color: #F4F6F9 !important;
    background-image: 
        linear-gradient(to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
}

/* Combined Dot + Grid Matrix */
.dot-grid-combined {
    background-color: #F4F6F9 !important;
    background-image: 
        radial-gradient(#CBD5E1 1px, transparent 1px),
        linear-gradient(to right, rgba(229, 231, 235, 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 231, 235, 0.5) 1px, transparent 1px) !important;
    background-size: 20px 20px, 40px 40px, 40px 40px !important;
}

/* 10. Architectural Badge & Status Indicator Components */
.architect-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 9999px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    color: #111827 !important;
}

.pulse-dot-green {
    position: relative;
    display: inline-flex;
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 9999px;
    background-color: #107C41;
}

.pulse-dot-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: #107C41;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}

.pulse-dot-blue {
    position: relative;
    display: inline-flex;
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 9999px;
    background-color: #0078D4;
}

.pulse-dot-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: #0078D4;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 11. Elevated Visual Card Accents & Dashed Dividers */
.dotted-divider {
    border-bottom: 2px dashed #CBD5E1 !important;
    margin: 2rem 0;
}

.card-dot-accent {
    position: relative;
    overflow: hidden;
}

.card-dot-accent::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.5;
    pointer-events: none;
}

/* 12. Article & Prose Content High-Contrast Corporate Overrides */
.prose, .prose-content, article {
    color: #374151 !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.prose-content h1, .prose-content h2, .prose-content h3, .prose-content h4, .prose-content h5, .prose-content h6,
.prose strong, .prose-content strong,
article h1, article h2, article h3, article h4, article h5, article h6, article strong {
    color: #111827 !important;
}

.prose p, .prose-content p, article p,
.prose ul, .prose-content ul, article ul,
.prose ol, .prose-content ol, article ol,
.prose li, .prose-content li, article li,
.prose blockquote, .prose-content blockquote, article blockquote {
    color: #374151 !important;
}

.prose code, .prose-content code, article code {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border: 1px solid #E2E8F0 !important;
}

.prose pre, .prose-content pre, article pre {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    border: 1px solid #1E293B !important;
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
}

/* Magnet & Interactive Lead Cards */
.magnet, section.magnet {
    margin-bottom: 2.5rem !important;
}

.magnet .card, .card {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.tag, .tag.brand {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    background-color: #EFF6FF !important;
    color: #0078D4 !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
}

.cl-group {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
}

.cl-group h3 {
    color: #0F172A !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

.cl-item label {
    color: #1E293B !important;
}

.cl-item label span {
    color: #64748B !important;
}

.uc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1rem !important;
}

.uc {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
}

.uc h3 {
    color: #0F172A !important;
    font-weight: 700 !important;
}

.uc p {
    color: #475569 !important;
    font-size: 0.875rem !important;
}

.field label {
    color: #1E293B !important;
    font-weight: 600 !important;
}

.field input {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
}

.result {
    background-color: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
}

.result .val {
    color: #0078D4 !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
}

.result .lbl {
    color: #475569 !important;
    font-size: 0.75rem !important;
}

.phase {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 4px solid #0078D4 !important;
    border-radius: 0 0.75rem 0.75rem 0 !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
}

.phase .ph-num {
    color: #0078D4 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
}

.phase h3 {
    color: #0F172A !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}