/* ========================================================================== */
/* 
 * Convert CSS for Enhanced Markdown Reports
 * Production-ready stylesheet with dark/light mode toggle and print optimization
 * Customizable brand colors while maintaining accessibility requirements
 */
/* ========================================================================== */

/* User Customizable Section - Add your Google Fonts imports here */
@import url('https://fonts.googleapis.com/css2?family=Flow+Rounded&family=Geist+Mono:wght@100..900&family=Major+Mono+Display&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* User Customizable Brand Colors - Edit these 5 colors for your brand */
:root {
    /* CUSTOMIZABLE: Your 5 brand colors */
    --user-brand-primary: #F9C22E;    /* Primary brand color */
    --user-brand-secondary: #E7B12E;  /* Secondary brand color */
    --user-brand-accent: #E4C014;     /* Accent color */
    --user-brand-highlight: #00FFFF;  /* Highlight color */
    --user-brand-text: #0C0032;       /* Brand text color */
    
    /* MANDATORY: Accessibility colors - DO NOT MODIFY */
    --page-bg-light: #FFFFFF;
    --page-fg-light: #000000;
    --page-bg-dark: #0a0a0a;
    --page-fg-dark: #ededed;
    
    /* Theme-aware color assignments */
    --page-background: var(--page-bg-light);
    --page-foreground: var(--page-fg-light);
    --page-secondary: #666666;
    --page-border: #cccccc;
    --page-code-bg: #f5f5f5;
    --page-code-fg: #333333;
    
    /* Extended palette using Welcome Colors */
    --unparty: var(--user-brand-primary);
    --unparty-black: #000605;
    --unparty-white: #FFF1D6;
    --champion: var(--user-brand-secondary);
    --next-yellow: var(--user-brand-accent);
    
    /* Dark Theme Colors */
    --push-black: #371B70;
    --deep-space: #0C0032;
    --midnight-blue: #190061;
    --rich-black: #0D0C1D;
    --cousin-black: #14122B;
    --another-love: #000108;
    --unparty-purple: #29284E;
    --pup-black: #361D6E;
    --astro-black: #3D2D59;
    --star-black: #753062;
    
    /* Accent Colors */
    --electric-purple: #3500D3;
    --electric-blue: var(--user-brand-highlight);
    --electric-green: #00FF66;
    --neon-yellow: #FFF700;
    --neon-pink: #FF00FF;
    --pinky-black: #6C6BB4;
    --purple-black: #845FC7;
    --heal-purple: #884455;
    --silver-black: #332F08;
    --soft-white: #F0F0F0;
    --data-header: #C26D7B;
}

/* Dark mode color overrides */
[data-theme="dark"] {
    --page-background: var(--page-bg-dark);
    --page-foreground: var(--page-fg-dark);
    --page-secondary: #999999;
    --page-border: #333333;
    --page-code-bg: #1a1a1a;
    --page-code-fg: #e0e0e0;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--user-brand-primary);
    color: var(--unparty-black);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Print Button */
.print-button {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    background: var(--user-brand-secondary);
    color: var(--unparty-black);
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.print-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Hide controls during print */
@media print {
    .theme-toggle,
    .print-button {
        display: none !important;
    }
}

/* Print optimizations */
@page {
    size: A4;
    margin: 1in 0.75in;
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9pt;
        color: var(--page-secondary);
    }
}

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--page-foreground);
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 60px;
    background: var(--page-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

@media screen {
    body {
        max-width: 900px;
        padding: 40px 80px 40px 60px; /* Extra right padding for fixed buttons */
    }
}

/* Typography hierarchy with theme support */
h1 {
    font-size: 20pt;
    font-weight: 700;
    margin: 0 0 16pt 0;
    color: var(--user-brand-primary);
    border-bottom: 2pt solid var(--page-border);
    padding-bottom: 8pt;
    page-break-after: avoid;
    text-transform: uppercase;
}

h2 {
    font-size: 16pt;
    font-weight: 600;
    margin: 20pt 0 12pt 0;
    color: var(--user-brand-text);
    page-break-after: avoid;
}

h3 {
    font-size: 14pt;
    font-weight: 600;
    margin: 16pt 0 8pt 0;
    color: var(--user-brand-secondary);
    page-break-after: avoid;
}

h4 {
    font-size: 12pt;
    font-weight: 600;
    margin: 12pt 0 6pt 0;
    color: var(--page-secondary);
    page-break-after: avoid;
}

/* Paragraph and text */
p {
    margin: 0 0 10pt 0;
    text-align: justify;
    orphans: 2;
    widows: 2;
}

/* Lists with better spacing */
ul, ol {
    margin: 8pt 0 12pt 20pt;
    padding: 0;
}

li {
    margin: 4pt 0;
    page-break-inside: avoid;
}

/* Code styling with theme support */
code {
    font-family: "Geist Mono", 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 9pt;
    background: var(--page-code-bg);
    color: var(--page-code-fg);
    padding: 2pt 6pt;
    border-radius: 4pt;
    border: 1pt solid var(--page-border);
    font-weight: 500;
}

pre {
    font-family: "Geist Mono", 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 9pt;
    background: var(--page-code-bg);
    color: var(--page-code-fg);
    border: 2pt solid var(--page-border);
    border-radius: 6pt;
    padding: 16pt;
    margin: 16pt 0;
    overflow-x: auto;
    page-break-inside: avoid;
    white-space: pre-wrap;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 2px 4pt rgba(0,0,0,0.1);
}

pre code {
    background: none !important;
    padding: 0;
    border: none !important;
    font-size: inherit;
    color: inherit !important;
    display: block;
    width: 100%;
    margin: 0;
    position: relative;
    overflow: visible;
}

/* Tables with theme support */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 12pt 0;
    font-size: 10pt;
    page-break-inside: avoid;
}

th, td {
    border: 1pt solid var(--page-border);
    padding: 8pt 10pt;
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--page-code-bg);
    font-weight: 600;
    color: var(--page-foreground);
}

tr:nth-child(even) td {
    background: var(--page-code-bg);
}

/* Blockquotes */
blockquote {
    margin: 12pt 0 12pt 20pt;
    padding: 8pt 12pt;
    border-left: 3pt solid var(--user-brand-highlight);
    background: var(--page-code-bg);
    font-style: italic;
    page-break-inside: avoid;
}

/* Horizontal rules */
hr {
    border: none;
    border-top: 1pt solid var(--page-border);
    margin: 20pt 0;
    page-break-after: avoid;
}

/* Links */
a {
    color: var(--user-brand-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--page-secondary);
}

/* Emphasis */
strong, b {
    font-weight: 600;
    color: var(--user-brand-primary);
}

em, i {
    font-style: italic;
    color: var(--page-secondary);
}

/* YAML Metadata styling */
.title {
    font-size: 24pt;
    font-weight: 700;
    margin: 0 0 12pt 0;
    color: var(--user-brand-primary);
    text-transform: uppercase;
    text-align: left;
    border-bottom: 3pt solid var(--user-brand-primary);
    padding-bottom: 12pt;
}

.author {
    font-size: 12pt;
    color: var(--user-brand-secondary);
    text-align: center;
    margin: 8pt 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1pt;
}

.author::before {
    content: "BY ";
    font-size: 10pt;
    color: var(--page-secondary);
    font-weight: 400;
}

.date {
    font-size: 11pt;
    color: var(--page-secondary);
    text-align: center;
    margin: 8pt 0 20pt 0;
    font-style: italic;
    text-transform: uppercase;
}

/* Custom metadata fields */
.feature,
.core,
.sprint,
.version,
.generated {
    font-size: 10pt;
    color: var(--user-brand-accent);
    text-align: center;
    margin: 4pt 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
}

.feature::before { content: "FEATURE: "; color: var(--page-secondary); font-weight: 400; }
.core::before { content: "CORE: "; color: var(--page-secondary); font-weight: 400; }
.sprint::before { content: "SPRINT: "; color: var(--page-secondary); font-weight: 400; }
.version::before { content: "VERSION: "; color: var(--page-secondary); font-weight: 400; }
.generated::before { content: "GENERATED: "; color: var(--page-secondary); font-weight: 400; font-size: 8pt; }

/* Enhanced syntax highlighting */
.sourceCode { 
    background: var(--page-code-bg) !important;
    color: var(--page-code-fg) !important;
}

.sourceCode .co { color: var(--page-secondary) !important; font-style: italic; }
.sourceCode .kw { color: var(--user-brand-text) !important; font-weight: 600; }
.sourceCode .fu { color: var(--user-brand-primary) !important; font-weight: 500; }
.sourceCode .st { color: var(--user-brand-secondary) !important; }
.sourceCode .dv { color: var(--user-brand-accent) !important; font-weight: 500; }

/* Responsive design */
@media (max-width: 768px) {
    body {
        padding: 20px 15px;
        font-size: 10pt;
    }
    
    .theme-toggle,
    .print-button {
        position: relative;
        top: auto;
        right: auto;
        margin: 10px auto;
        display: block;
    }
    
    h1 { font-size: 18pt; }
    h2 { font-size: 14pt; }
    h3 { font-size: 12pt; }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus styles for accessibility */
.theme-toggle:focus,
.print-button:focus {
    outline: 2px solid var(--user-brand-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --page-border: #000000;
    }
    
    [data-theme="dark"] {
        --page-border: #ffffff;
    }
}

/* ========================================================================== */
/* LINTING AND ERROR REPORTING STYLES */
/* ========================================================================== */

/* Style for auto-fixed content indicators */
.auto-fixed {
    border-left: 3px solid var(--user-brand-primary);
    padding-left: 8pt;
    background: rgba(249, 194, 46, 0.1);
    margin: 4pt 0;
}

.auto-fixed::before {
    content: "🔧 AUTO-FIXED: ";
    font-weight: bold;
    color: var(--user-brand-primary);
    font-size: 9pt;
}

/* Enhanced error message styling */
.lint-warning {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid #ffc107;
    border-radius: 4pt;
    padding: 8pt 12pt;
    margin: 8pt 0;
    color: #856404;
}

.lint-warning::before {
    content: "⚠️ LINT WARNING: ";
    font-weight: bold;
}

.lint-success {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid #28a745;
    border-radius: 4pt;
    padding: 8pt 12pt;
    margin: 8pt 0;
    color: #155724;
}

.lint-success::before {
    content: "✅ LINT SUCCESS: ";
    font-weight: bold;
}

/* Better styling for processed content */
.processed-content {
    position: relative;
}

.processed-content::after {
    content: "Processed by convert.sh linting";
    position: absolute;
    top: -15pt;
    right: 0;
    font-size: 8pt;
    color: var(--page-secondary);
    font-style: italic;
}

/* Enhanced div styling for better visual debugging */
div[class*="section"],
div[class*="nested"] {
    border-left: 1px solid rgba(249, 194, 46, 0.3);
    padding-left: 8pt;
    margin: 4pt 0;
}

/* Print-friendly linting info */
@media print {
    .auto-fixed::before,
    .lint-warning::before,
    .lint-success::before,
    .processed-content::after {
        display: none;
    }
    
    .auto-fixed,
    .lint-warning,
    .lint-success {
        border: none;
        background: none;
        padding: 0;
    }
}