/*
 * SOP Theme Override — V2 Dark Mode
 * Loaded AFTER inline styles to force dark theme on all sub-pages.
 * Uses !important to override inline <style> blocks.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── ROOT / BODY ─────────────────────────── */
html, body {
    background: #0a0a0f !important;
    color: #f0f0f5 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ─── BACK NAV ────────────────────────────── */
.back-nav {
    margin-bottom: 2rem;
}

.back-link {
    color: #6366f1 !important;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.back-link:hover {
    color: #818cf8 !important;
    transform: translateX(-3px);
}

.back-link i {
    margin-right: 0.5rem;
}

/* ─── SOP HEADER ──────────────────────────── */
.sop-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.08)) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: #f0f0f5 !important;
    border-radius: 16px !important;
    padding: 2rem !important;
}

.sop-header h1 {
    color: #f0f0f5 !important;
}

.sop-header p {
    color: #8b8b9e !important;
}

/* Internal SOP headers (CTR/PR pages with red border) */
.sop-header[style*="border: 3px solid"] {
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.03)) !important;
}

/* ─── BADGES ──────────────────────────────── */
.critical-badge, .internal-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.875rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
}

.foundation-badge, .high-priority-badge {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.875rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

.phase-badge {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #6366f1 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.625rem !important;
    border-radius: 12px !important;
}

/* ─── SOP META ────────────────────────────── */
.sop-meta {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    border-left: 3px solid #6366f1 !important;
}

.sop-meta[style*="border-left: 5px solid #e53e3e"],
.sop-meta[style*="border-left: 5px solid"] {
    border-left: 3px solid #ef4444 !important;
}

.meta-item {
    border-left-color: rgba(99, 102, 241, 0.3) !important;
}

.meta-label {
    color: #5a5a6e !important;
    font-size: 0.8rem !important;
}

.meta-value {
    color: #f0f0f5 !important;
    font-size: 0.9rem !important;
}

/* ─── SOP SECTIONS ────────────────────────── */
.sop-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 1.75rem !important;
    color: #f0f0f5 !important;
}

.sop-section h2 {
    color: #f0f0f5 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

.sop-section h3 {
    color: #e0e0ea !important;
}

.sop-section h4 {
    color: #c0c0d0 !important;
}

.sop-section p,
.sop-section li {
    color: #8b8b9e !important;
}

.sop-section strong {
    color: #d0d0de !important;
}

.sop-section a {
    color: #6366f1 !important;
}

.sop-section a:hover {
    color: #818cf8 !important;
}

/* ─── TEMPLATE BOXES ──────────────────────── */
.template-box {
    background: rgba(99, 102, 241, 0.06) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
    border-left: 3px solid #6366f1 !important;
    border-radius: 10px !important;
    color: #c0c0d0 !important;
}

.template-box h4, .template-box h3, .template-box strong {
    color: #e0e0ea !important;
}

/* ─── WARNING BOXES ───────────────────────── */
.warning-box, .security-notice {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 10px !important;
    color: #c0c0d0 !important;
}

.warning-box strong {
    color: #ef4444 !important;
}

/* ─── SUCCESS / TIP BOXES ─────────────────── */
.success-box, .tip-box, .pro-tip {
    background: rgba(34, 197, 94, 0.06) !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
    border-left: 3px solid #22c55e !important;
    border-radius: 10px !important;
    color: #c0c0d0 !important;
}

/* ─── CODE BLOCKS ─────────────────────────── */
.code-block, pre, code {
    background: #12121a !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
    font-size: 0.85rem !important;
}

pre code {
    border: none !important;
    background: transparent !important;
}

/* UTM output / schema output */
.utm-output, .schema-output, .pr-output {
    background: #12121a !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-radius: 10px !important;
}

/* ─── FORM INPUTS ─────────────────────────── */
input, textarea, select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5 !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0.75rem 1rem !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

input::placeholder, textarea::placeholder {
    color: #5a5a6e !important;
}

/* ─── UTM / PR / SCHEMA BUILDERS ──────────── */
.utm-builder, .pr-builder, .schema-builder {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 1.75rem !important;
}

.builder-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f0f0f5 !important;
}

.utm-field label, .pr-field label, .form-group label {
    color: #c0c0d0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* ─── CHECKLISTS ──────────────────────────── */
.checklist li {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #8b8b9e !important;
    padding: 0.625rem 0 !important;
}

.checklist li:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.checklist li:before {
    color: #6366f1 !important;
}

.checklist li.checked:before {
    color: #22c55e !important;
}

/* ─── BUTTONS ─────────────────────────────── */
.btn, button[onclick], .btn-generate, .btn-calculate, .btn-copy, .btn-analyze {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    transition: all 0.2s !important;
    padding: 0.75rem 1.5rem !important;
}

.btn:hover, button[onclick]:hover, .btn-generate:hover, .btn-calculate:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25) !important;
}

/* Secondary / reset buttons */
.btn-secondary, .btn-reset, .btn-clear {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #8b8b9e !important;
}

/* ─── CARDS (schema wins, easy wins, etc.) ── */
.easy-win-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

.easy-win-card:hover {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.win-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)) !important;
    color: #22c55e !important;
}

.win-number {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
}

.win-content {
    color: #8b8b9e !important;
}

.win-content h3, .win-content h4 {
    color: #f0f0f5 !important;
}

/* ─── CONFIDENTIAL BANNER ─────────────────── */
.confidential-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.08)) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2) !important;
    box-shadow: none !important;
    color: #ef4444 !important;
}

.confidential-banner h3 {
    color: #ef4444 !important;
}

/* ─── STEP CONTAINERS ─────────────────────── */
.step-container {
    background: rgba(34, 197, 94, 0.04) !important;
    border-left: 3px solid rgba(34, 197, 94, 0.3) !important;
    border-radius: 0 10px 10px 0 !important;
    color: #8b8b9e !important;
}

.step-container h3, .step-container h4, .step-container strong {
    color: #e0e0ea !important;
}

/* ─── TABLES ──────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #e0e0ea !important;
    font-weight: 600 !important;
    font-size: 0.825rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

td {
    color: #8b8b9e !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 0.85rem !important;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ─── FOOTER (on SOP pages) ───────────────── */
.footer, footer {
    background: #12121a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #5a5a6e !important;
}

.footer p, footer p {
    color: #5a5a6e !important;
}

/* ─── MISC OVERRIDES ──────────────────────── */
hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

blockquote {
    border-left: 3px solid #6366f1 !important;
    background: rgba(99, 102, 241, 0.04) !important;
    color: #8b8b9e !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 1rem 0 !important;
}

/* Numbered / ordered lists inside SOPs */
.sop-section ol li {
    color: #8b8b9e !important;
}

/* Key metrics / highlight numbers */
.metric, .stat, .highlight-number {
    color: #6366f1 !important;
}

/* ─── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ─── TOP-LEVEL PAGE OVERRIDES ────────────── */
/* These pages (templates, tracking, search, reports, dashboard, tools)
   use var(--primary) etc. from styles.css which now maps to dark theme.
   But their inline styles hardcode white/light values. Override here. */

.template-system, .tracking-container, .search-container,
.dashboard-container, .tools-container, .reports-container {
    color: #f0f0f5 !important;
}

/* Header gradients on sub-pages */
.template-header h1, .tracking-title, .search-header h1,
.dashboard-title, .tools-header h1, .reports-title {
    background: linear-gradient(135deg, #f0f0f5, #6366f1, #8b5cf6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.template-header p, .tracking-subtitle, .search-header p,
.dashboard-subtitle, .tools-header p, .reports-subtitle {
    color: #8b8b9e !important;
}

/* Category buttons / tabs */
.category-btn, .tracking-tab {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #8b8b9e !important;
    font-family: 'Inter', sans-serif !important;
}

.category-btn.active, .tracking-tab.active {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #6366f1 !important;
}

.category-btn:hover, .tracking-tab:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f0f0f5 !important;
}

/* Template workspace / selector / editor */
.template-selector, .template-editor, .template-workspace > div,
.search-main, .search-result, .metric-card,
.report-card, .filter-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    color: #f0f0f5 !important;
}

.template-selector h3, .template-editor h3 {
    color: #f0f0f5 !important;
}

/* Search box on search page */
.search-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5 !important;
    border-radius: 10px !important;
}

.search-box:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Filter selects on dashboard */
.filter-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5 !important;
}

/* Export / action buttons on sub-pages */
.export-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5 !important;
}

.export-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Navigation bars on sub-pages that use old navbar class */
.navbar {
    background: #12121a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.nav-brand {
    color: #f0f0f5 !important;
}

.nav-brand i {
    color: #6366f1 !important;
}

/* ─── AGGRESSIVE WILDCARD OVERRIDES ───────── */
/* Catch ALL remaining white backgrounds from inline styles */
div[style*="background: white"],
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background-color: white"],
section[style*="background: white"] {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #f0f0f5 !important;
}

/* Every div/section with hardcoded white/light bg in inline CSS classes */
.template-list, .template-item, .template-preview,
.tracking-section, .tracking-card, .tracking-panel,
.report-section, .report-panel, .report-header,
.search-filters, .search-results, .search-result-card,
.dashboard-header, .dashboard-section,
.stats-overview, .chart-container, .chart-card,
.tool-card, .tool-section, .tool-header,
.filter-group, .filter-item,
.data-table, .table-container,
.analytics-card, .analytics-panel,
.keyword-tracker, .rank-tracker,
.content-area, .editor-area, .preview-area,
.result-item, .result-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f0f0f5 !important;
}

/* All h1-h4 inside sub-pages */
.template-system h1, .template-system h2, .template-system h3, .template-system h4,
.tracking-container h1, .tracking-container h2, .tracking-container h3,
.search-container h1, .search-container h2, .search-container h3,
.dashboard-container h1, .dashboard-container h2, .dashboard-container h3,
.tools-container h1, .tools-container h2, .tools-container h3,
.reports-container h1, .reports-container h2, .reports-container h3 {
    color: #f0f0f5 !important;
}

/* All p/span/li inside sub-page containers */
.template-system p, .template-system span, .template-system li, .template-system label,
.tracking-container p, .tracking-container span, .tracking-container li, .tracking-container label,
.search-container p, .search-container span, .search-container li,
.dashboard-container p, .dashboard-container span, .dashboard-container li,
.tools-container p, .tools-container span, .tools-container li,
.reports-container p, .reports-container span, .reports-container li {
    color: #8b8b9e !important;
}

/* Canvas charts need dark background */
canvas {
    filter: brightness(0.9);
}

/* Textarea on template pages */
.template-system textarea, .template-system input,
.tracking-container textarea, .tracking-container input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f0f0f5 !important;
}

/* Nav links on sub-pages */
.nav-link, .nav-menu a {
    color: #8b8b9e !important;
}

.nav-link:hover, .nav-link.active, .nav-menu a:hover {
    color: #f0f0f5 !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

.nav-user, .nav-user span {
    color: #8b8b9e !important;
}