/* Theme variables — light by default, override with `.dark` on for dark mode */ :root { --bg: #f7faff; --text: #0f1724; --muted: #555555; --primary: #005F73; --accent: #0A9396; --card-bg: #ffffff; --card-muted-bg: #f0f9fa; --muted-border: #e1e8ed; } html.dark { --bg: #0b1220; --text: #e6eef6; --muted: #94a3b8; --primary: #89b8a9; --accent: #5fb5a6; --card-bg: #071229; --card-muted-bg: #0f1726; --muted-border: #102233; } /* Dark-mode specific component tweaks to ensure contrast and readable shadows */ html.dark { --elev-1-bg: #0e1723; --elev-2-bg: #12202b; --shadow-color: rgba(0,0,0,0.65); } /* Apply elevated backgrounds and shadows to common components */ .card, .bg-white, .flip-card-inner, #sticky-header, .theme-toggle-btn, #export-resume-float, #export-resume-pdf-float, #floating-buttons button, #audio-player-bar { background-color: var(--card-bg); } /* Shadows adapt to theme using the CSS variable */ .box-elev { box-shadow: 0 6px 18px var(--shadow-color); } /* Ensure text and muted text on card surfaces are readable */ .card, .flip-card-back, .flip-card-inner { color: var(--text); } /* Additional palette tokens */ :root { --success: #2D6A4F; --warn-bg: #fef7ec; --track-light: #e6f1f4; } html.dark { --success: #2b5b45; --success-bg: #1a3b2b; --warn-bg: #3b2c20; --danger-bg: #3b1a1a; --track-light: #0b1a26; } /* Palette semantic aliases (also used to normalize inline hex usage) */ :root { --accent-2: #94D2BD; --warn: #EE9B00; --warn-2: #CA6702; --danger: #BB3E03; --danger-2: #AE2012; --deep-danger: #9B2226; } html.dark { --accent-2: #7fb6a8; /* slightly muted for dark */ --warn: #e6b85a; --warn-2: #d08a3a; --danger: #b85a3a; --danger-2: #9b4128; --deep-danger: #7f1a1a; } /* Map common Tailwind arbitrary classes to palette variables (no style attribute selectors) */ [class*="text-[#005F73]"] { color: var(--primary) !important; } [class*="bg-[#005F73]"] { background-color: var(--primary) !important; } [class*="border-[#005F73]"], [class*="border-left-color: #005F73"] { border-color: var(--primary) !important; } [class*="text-[#0A9396]"] { color: var(--accent) !important; } [class*="bg-[#0A9396]"] { background-color: var(--accent) !important; } [class*="text-[#94D2BD]"] { color: var(--accent-2) !important; } [class*="bg-[#f0f9fa]"] { background-color: var(--card-muted-bg) !important; } /* Normalize any utility classes that reference the original light bg */ [class*="bg-[#f7faff]"] { background-color: var(--bg) !important; } [class*="bg-[#ffffff]"] { background-color: var(--card-bg) !important; } /* Light tint backgrounds used across the UI (class-based) */ [class*="bg-[#eef2ff]"], [class*="bg-[#fff2e6]"], [class*="bg-[#fff0f0]"], [class*="bg-[#f6f7fb]"], [class*="bg-[#eef7ff]"], [class*="bg-[#e6f1f4]"] { background-color: var(--card-muted-bg) !important; } /* Map common Tailwind slate/bg utilities to theme tokens for dark mode */ .bg-slate-50, [class*="bg-slate-50"] { background-color: var(--card-muted-bg) !important; } .border-slate-200, [class*="border-slate-200"] { border-color: var(--muted-border) !important; } /* Map other slate text, bg and border utilities to theme tokens */ .text-slate-500, [class*="text-slate-500"] { color: var(--muted) !important; } .text-slate-600, [class*="text-slate-600"] { color: var(--muted) !important; } .text-slate-700, [class*="text-slate-700"] { color: var(--text) !important; } .text-slate-800, [class*="text-slate-800"] { color: var(--text) !important; } .bg-slate-100, [class*="bg-slate-100"] { background-color: var(--card-muted-bg) !important; } .border-slate-300, [class*="border-slate-300"] { border-color: var(--muted-border) !important; } /* Force common white surfaces and body slate background to use theme tokens This increases specificity to override inline Tailwind utility defaults */ body.bg-slate-50 { background-color: var(--bg) !important; color: var(--text) !important; } .bg-white, [class*="bg-white"] { background-color: var(--card-bg) !important; color: var(--text) !important; } /* Ensure rounded surfaces that used bg-white or bg-slate-* also receive box-elev and muted borders */ .bg-white.rounded-xl, .bg-white.rounded-lg, .rounded-xl.bg-white, .rounded-lg.bg-white { background-color: var(--card-bg) !important; border-color: var(--muted-border) !important; color: var(--text) !important; } /* Dark-mode aware form inputs used in the analysis UI */ #companyNameInput, #companyUrlInput, #jobDescriptionInput, input[aria-label="Company Name"], input[aria-label="Company Website URL"], textarea[aria-label="Job Description"] { background-color: var(--card-muted-bg) !important; color: var(--text) !important; border-color: var(--muted-border) !important; } /* Ensure placeholder text remains muted in dark mode */ #companyNameInput::placeholder, #companyUrlInput::placeholder, #jobDescriptionInput::placeholder { color: var(--muted) !important; opacity: 1 !important; } /* Ensure the Run Match button's text is centered regardless of internal span layout */ #analyzeButton { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Additional slate color mappings for comprehensive dark mode support */ .bg-slate-100, [class*="bg-slate-100"] { background-color: var(--card-muted-bg) !important; } .text-slate-700, [class*="text-slate-700"] { color: var(--text) !important; } [class*="text-[#EE9B00]"] { color: var(--warn) !important; } [class*="text-[#CA6702]"] { color: var(--warn-2) !important; } [class*="text-[#BB3E03]"] { color: var(--danger) !important; } [class*="text-[#AE2012]"] { color: var(--danger-2) !important; } [class*="text-[#9B2226]"] { color: var(--deep-danger) !important; } /* Generic text and muted replacements (class-based) */ [class*="text-#333"], [class*="text-#333333"] { color: var(--text) !important; } [class*="text-#555"], [class*="text-#555555"] { color: var(--muted) !important; } /* border color normalization */ .muted-border { border-color: var(--muted-border) !important; } /* Utility classes to replace inline style attributes */ .print-contact { text-align: center; margin-bottom: 20pt; padding-bottom: 10pt; border-bottom: 3pt solid var(--primary); } .print-name { font-size: 26pt; color: var(--primary); margin: 0; } .print-role { font-size: 17pt; color: var(--accent); margin: 2pt 0 5pt 0; } .print-muted { font-size: 11pt; color: var(--muted); margin: 5pt 0 0 0; } .print-contact-links { font-size: 11pt; color: var(--muted); margin-top: 5pt; display: flex; justify-content: center; flex-wrap: wrap; gap: 8pt; } .print-link { color: var(--accent); text-decoration: none; display: inline-block; } .sep { color: var(--accent-2); display: inline-block; } .border-accent-left { border-left: 4px solid var(--accent); } .border-warn-left { border-left: 4px solid var(--warn); } .border-primary-left { border-left: 4px solid var(--primary); } .project-card-border-primary { border-left-color: var(--primary) !important; } .project-card-border-warn { border-left-color: var(--warn) !important; } .project-card-border-warn2 { border-left-color: var(--warn-2) !important; } .project-card-border-danger2 { border-left-color: var(--danger-2) !important; } .theme-toggle-btn { position: fixed; bottom: 20px; right: 90px; z-index: 100; background: var(--primary); color: white; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .modal-open { display: flex; } /* Footer & link utilities */ .footer-link { color: var(--accent); text-decoration: none; } .footer-link:hover { color: var(--accent-2); } .github-link { color: var(--warn); text-decoration: none; } .github-link:hover { color: var(--warn-2); } /* Width utility classes to replace inline width styles */ .w-100 { width: 100% !important; } .w-85 { width: 85% !important; } .w-70 { width: 70% !important; } /* Video responsive utility */ .video-responsive { max-width: 100%; max-height: 80vh; } /* Section helpers */ .section-no-break { page-break-before: auto; } /* Experience & project text utilities */ .exp-period { font-size: 10pt; color: var(--muted); margin: 0; } .exp-title { font-size: 12pt; font-weight: bold; color: var(--primary); margin: 0; } .exp-subtitle { font-size: 10pt; color: var(--accent); margin: 2pt 0 5pt 0; } .proj-block { margin-bottom: 12pt; border-left: 3pt solid var(--accent); padding-left: 8pt; page-break-inside: avoid; } .proj-title { font-size: 11pt; font-weight: bold; color: var(--primary); margin-bottom: 2pt; } .proj-desc { font-size: 10pt; color: var(--muted); margin-bottom: 4pt; } /* Helpers for replacing inline layout styles */ .hidden-audio { display: none; } .no-break { margin-bottom: 15pt; page-break-inside: avoid; } .full-table { width: 100%; border-collapse: collapse; } .col-25 { width: 25%; } .col-35 { width: 35%; } .col-40 { width: 40%; } .col-75 { width: 75%; } .td-no-pad { padding: 0; vertical-align: top; } .resume-list { margin: 0; padding-left: 20pt; list-style-type: disc; } .resume-li { margin-bottom: 4pt; font-size: 10pt; } .doc-td { padding: 6pt; border: 1px solid var(--muted-border); } .doc-table { width: 100%; border-collapse: collapse; margin-top: 10pt; font-size: 10pt; } .security-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border-bottom: 1px solid var(--muted-border); } .security-status { width: 8%; font-size: 16px; text-align: center; } .security-check { width: 35%; font-weight: 700; color: var(--primary); } .security-result { flex: 1 1 auto; color: var(--text); } .mb-10pt { margin-bottom: 10pt; } .page-break-after { page-break-after: always; } /* CSS-Based Background Animation: Soft, low-CPU mechanical effect */ @keyframes soft-pulse-grid { 0% { background-position: 0% 0%, 50% 50%; background-color: var(--bg); } 50% { background-position: 100% 100%, 0% 0%; background-color: var(--card-muted-bg); } 100% { background-position: 0% 0%, 50% 50%; background-color: var(--bg); } } body { font-family: 'Inter', sans-serif; padding-bottom: 70px; /* Space for the fixed audio player */ background-color: var(--bg); color: var(--text); /* Low-CPU Background Animation */ background-image: radial-gradient(circle at 1% 1%, rgba(0, 95, 115, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(148, 210, 189, 0.05) 1px, transparent 0); background-size: 80px 80px; animation: soft-pulse-grid 180s infinite alternate linear; } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 250px; max-height: 350px; } @media (min-width: 768px) { .chart-container { height: 300px; } } .loading-spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #005F73; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* FIX: Ensure print-only block is hidden by default on screen */ .print-only { display: none; } /* --- PDF Print Optimization Styles --- */ @media print { /* Default print body uses theme tokens so dark/light prints match current theme */ body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; background-color: var(--bg) !important; color: var(--text) !important; margin: 0; padding: 0; font-size: 10pt; animation: none !important; background-image: none !important; } /* If the page is rendered in dark mode, ensure print uses dark tokens by forcing these values when html.dark is present */ html.dark body { background-color: var(--bg) !important; color: var(--text) !important; } .container { /* Use smaller padding for A4 fit */ padding: 0.5cm !important; margin: 0 auto; max-width: 100%; } /* Remove shadows, which look bad on print */ .shadow-lg, .shadow-sm { box-shadow: none !important; border: none !important; /* Remove borders for a cleaner look */ } /* Ensure text is black and headings are legible */ h1, h2, h3, h4, p, span, a, time { /* Use text token so dark mode inverts properly */ color: var(--text) !important; } /* HIDE SPECIFIC SECTIONS AS REQUESTED */ #summary, #gemini-analysis, #roadmap, #personal-snapshot, /* HIDE THE LIVE HEADER */ #sticky-header, /* HIDE THE LIVE STICKY HEADER */ footer, #projects, /* Per original strict instructions, hiding projects for compact PDF */ #architecture { /* NEW: Remove Architectural Competencies from print */ display: none !important; } /* Hide interactive and irrelevant blocks */ #floating-buttons, #audio-player-bar { display: none !important; } /* --- Layout Control --- */ /* Force ALL complex layouts to simple blocks */ .md\:grid, .lg\:grid-cols-3, .md\:grid-cols-2 { display: block !important; width: 100% !important; } .gap-8, .gap-6, .gap-4 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; gap: 0 !important; } /* Fix contact header alignment for print (Only needed if we kept the static header) */ .responsive-contact-bar { flex-direction: row !important; justify-content: center !important; gap: 0.5rem !important; } .responsive-contact-bar span { display: inline !important; margin: 0 0.2rem !important; font-size: 10pt !important; } .separator { display: inline !important; } /* Reduce large margins and padding */ .mb-16 { margin-bottom: 0.5cm !important; } .p-8 { padding: 0.5cm !important; } .p-6 { padding: 0.4cm !important; } .p-4 { padding: 0.3cm !important; } /* --- SKILLS/FLIP CARD PRINT FIX --- */ /* Force chart containers to display fully */ #skills .flip-card, #skills .flip-card-inner, #skills .flip-card-front, #skills .flip-card-back { height: auto !important; min-height: 0 !important; position: relative !important; /* Reset absolute positioning */ transform: none !important; /* Disable 3D transform */ backface-visibility: visible !important; /* Ensure content is visible */ /* Use a subtle shadow color that adapts to theme via muted-border */ box-shadow: 0 0 1px rgba(16, 34, 51, 0.12) !important; margin-bottom: 10pt; padding: 10pt !important; } /* Only show the back content (details) of the flip cards in print */ #skills .flip-card-front { display: none !important; } #skills .flip-card-back { transform: none !important; position: relative !important; padding: 0 !important; /* Use card background token to support dark mode */ background-color: var(--card-bg) !important; border: none !important; /* Adjust list styling */ list-style: none !important; } #skills .flip-card-back h3 { /* Use text token so print respects dark mode when enabled */ color: var(--text) !important; } #skills .flip-card-back ul { list-style-type: disc !important; padding-left: 20pt !important; margin-top: 5pt !important; } #skills .flip-card-back .self-end { display: none; /* Hide 'Tap to see chart view' */ } /* --- EXPERIENCE/JOURNEY FIX --- */ .relative.border-l-4 { border-left: none !important; } .absolute { display: none; } .ml-8, .ml-6, .md\:ml-0 { margin-left: 0 !important; } .md\:text-right { text-align: left !important; } .md\:pr-8 { padding-right: 0 !important; } .md\:grid { display: block !important; } .md\:grid-cols-2>div { width: 100% !important; margin: 0; padding: 0; } .md\:grid-cols-2 .md\:text-right { margin-bottom: 5pt; } /* --- EDUCATION/LANGUAGES FIX --- */ #education .md\:col-span-3 { padding: 10pt !important; margin-bottom: 10pt; } #education .grid-cols-3 { display: block !important; } #education .gap-x-6 { margin-bottom: 15pt; } #education .lg\:grid-cols-2 { display: block !important; } #education .p-4 { padding: 0 !important; border: none !important; } /* --- ARCHITECTURAL COMPETENCIES PRINT OPTIMIZATION --- */ /* This section is now hidden per user request */ /* --- PROFESSIONAL DEVELOPMENT PRINT OPTIMIZATION (2 Columns) --- */ #development .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; /* Force 2 columns */ gap: 10pt !important; } #development .h-full { height: auto !important; border: 1px solid #ddd !important; padding: 8pt !important; } /* --- LANGUAGES & DOMAIN PRINT OPTIMIZATION (2 Columns) --- */ #education .lg\:grid-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; /* Force 2 columns */ gap: 10pt !important; } #education .lg\:grid-cols-2>div { padding: 8pt !important; border: 1px solid #ddd !important; } /* Ensure content fits A4 without breaking awkwardly */ .rounded-xl, .bg-white { page-break-inside: avoid; } /* Print-only interviewer notes block: hidden on screen, visible in print */ .print-only { display: block !important; } /* Move floating buttons for the print version */ #export-resume-pdf-float, #export-resume-float { display: none !important; } } /* Added class for project cards to ensure proper styling across environments */ .project-card-border { border-left-width: 4px; } /* Styling for the Analysis Output */ .analysis-content ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; } .analysis-content strong { font-weight: 700; } /* Input styling for read-only state */ textarea[readonly], input[readonly] { cursor: not-allowed; /* Use card muted background so inputs follow theme (light or dark) */ background-color: var(--card-muted-bg); } /* --- CARD FLIP EFFECT STYLES --- */ .flip-card { background-color: transparent; perspective: 1000px; cursor: pointer; /* FIX: Set a sufficient minimum height for all flip cards */ min-height: 462px; /* Increased by 10% from 420px */ height: 100%; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); border-radius: 0.75rem; background-color: var(--card-bg); } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; } .flip-card-back { background-color: var(--card-muted-bg); /* Light color for background */ color: var(--text); transform: rotateY(180deg); padding: 1rem; text-align: left; overflow-y: auto; /* Allow scrolling on back face if content is large */ } .flip-card-back ul { list-style-type: disc; padding-left: 1.5rem; font-size: 0.9rem; margin-top: 0.5rem; } .flip-card-back h3 { margin-bottom: 0.5rem; } /* --- NEW: Improved responsive layout for Architectural Competencies --- */ /* Dedicated class so other grids aren't affected */ .architecture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: stretch; /* ensure grid items stretch to equal heights */ } /* Ensure cards stretch to equal heights and content flows vertically */ .architecture-card { display: flex; flex-direction: column; height: 100%; min-height: 160px; /* small min-height fix to ensure cards have a minimum height */ } /* Slightly larger card padding on desktop for better readability */ @media (min-width: 1024px) { #architecture .bg-white, .architecture-card { padding: 1.25rem !important; border-radius: 0.75rem !important; } #architecture .text-2xl { font-size: 1.6rem !important; } #architecture .text-lg { font-size: 1.05rem !important; } } /* Ensure badges wrap nicely instead of overflowing */ .architecture-grid .flex-wrap { flex-wrap: wrap; } .architecture-grid .flex-wrap span { margin-bottom: 6px; } /* Floating Button Styles (Larger Icons) */ #floating-buttons { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 95; /* Above Z-index 50, below modal */ } #floating-buttons button { transition: all 0.2s ease-in-out; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; /* Larger icon size */ line-height: 1; /* Fix vertical alignment */ color: white; border: none; cursor: pointer; } /* New: Separate Floating Button for Export to Word (bottom left) */ #export-resume-float { position: fixed; bottom: 20px; left: 20px; z-index: 95; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--primary); /* Primary color */ color: white; font-size: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s ease-in-out; } #export-resume-float:hover { background-color: var(--accent); } @media print { #export-resume-float { display: none !important; } } /* --- NEW PDF BUTTON STYLES (above word export) --- */ #export-resume-pdf-float { position: fixed; bottom: 80px; /* Positioned above the word export button */ left: 20px; z-index: 95; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--danger-2); /* Distinct color for PDF */ color: white; font-size: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s ease-in-out; } #export-resume-pdf-float:hover { background-color: var(--danger); } @media print { #export-resume-pdf-float { display: none !important; } } /* --- AUDIO PLAYER BAR STYLES --- */ #audio-player-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--primary); /* Primary color */ color: white; padding: 8px 16px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); display: none; /* Controlled by JS */ z-index: 90; align-items: center; justify-content: space-between; } #audio-player-bar button { background: none; border: none; color: white; padding: 4px 8px; font-size: 20px; cursor: pointer; } #audio-player-bar button:hover { color: var(--accent-2); /* Accent color on hover */ } .audio-controls { display: flex; gap: 10px; align-items: center; } .audio-title { font-size: 14px; font-weight: 500; } /* Export Resume Button Styling for Header */ /* Removed as requested: #exportFullCVButton */ /* Custom Styling for responsive contact bar */ .responsive-contact-bar { flex-direction: column; align-items: center; gap: 0.5rem; /* Added vertical gap for mobile readability */ } @media (min-width: 640px) { .responsive-contact-bar { flex-direction: row; gap: 1rem; } .responsive-contact-bar>span:nth-child(even) { display: inline; /* Show separators on desktop */ } .responsive-contact-bar>span { display: block; } } /* Custom Styling for Language/Domain visualization */ .lang-progress-bar { height: 8px; border-radius: 4px; background-color: var(--track-light); /* Light background for the track */ overflow: hidden; margin-bottom: 0.5rem; } .lang-progress-fill { height: 100%; border-radius: 4px; } /* Hide separators on mobile */ .separator { display: none; } @media (min-width: 640px) { .separator { display: inline; } } /* --- STICKY HEADER STYLES --- */ #sticky-header { position: fixed; top: 0; left: 0; width: 100%; /* Follow card background token so dark mode applies */ background-color: var(--card-bg); /* Subtle shadow that still reads on dark backgrounds via variable */ box-shadow: 0 2px 6px rgba(2, 6, 23, 0.35); z-index: 80; opacity: 0; transition: opacity 0.3s ease-in-out; padding: 10px 20px; } #sticky-header.visible { opacity: 1; } .sticky-contact-bar { font-size: 13px; } @media (max-width: 639px) { .sticky-contact-bar { font-size: 10px; } } /* Prevent specific sections from appearing in printed/PDF or Word exports */ @media print { .no-export { display: none !important; } } /* Note: keep `.no-export` visible on screen; print media rule above hides it for exports. */ /* Dark-mode aware print overrides: when the document is rendered with `html.dark`, force printable surfaces to use dark theme tokens so PDF/Word exports match the UI. */ @media print { /* Ensure print color adjustments are applied when printing in dark mode */ html.dark, html.dark body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; background-color: var(--bg) !important; color: var(--text) !important; } /* Surfaces that should appear as cards in print */ html.dark .bg-white, html.dark .card, html.dark .container, html.dark .rounded-xl, html.dark .proj-block, html.dark .flip-card-back, html.dark .flip-card-inner, html.dark .project-card-border { background-color: var(--card-bg) !important; color: var(--text) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Ensure borders adapt to dark muted border token */ html.dark .muted-border, html.dark .border-accent-left, html.dark .border-warn-left, html.dark .project-card-border-primary { border-color: var(--muted-border) !important; } /* Links should remain readable in dark prints */ html.dark a, html.dark .footer-link, html.dark .print-link { color: var(--accent) !important; } /* Remove shadows for print while keeping contrast via backgrounds */ html.dark .shadow-lg, html.dark .shadow-sm, html.dark .box-elev { box-shadow: none !important; } } /* Preview Modals for PDF and Word Export */ .preview-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); } .preview-modal-content { background: var(--bg); border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); max-width: 95vw; max-height: 95vh; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .preview-modal-header { padding: 16px 24px; border-bottom: 1px solid var(--muted-border); display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); border-radius: 8px 8px 0 0; } .preview-modal-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; } .preview-modal-close { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.2s; } .preview-modal-close:hover { color: var(--text); background: var(--card-muted-bg); } .preview-modal-body { flex: 1; overflow: auto; padding: 24px; background: var(--bg); } .preview-modal-actions { padding: 16px 24px; border-top: 1px solid var(--muted-border); display: flex; justify-content: flex-end; gap: 12px; background: var(--card-bg); border-radius: 0 0 8px 8px; } .preview-modal-btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; } .preview-modal-btn.cancel { background: var(--card-muted-bg); color: var(--muted); border: 1px solid var(--muted-border); } .preview-modal-btn.cancel:hover { background: var(--muted-border); color: var(--text); } .preview-modal-btn.confirm { background: var(--primary); color: white; } .preview-modal-btn.confirm:hover { background: var(--accent); } /* PDF Preview specific styles */ .pdf-preview-content { background: var(--bg); color: var(--text); padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin: 0 auto; max-width: 210mm; /* A4 width */ min-height: 297mm; /* A4 height */ } /* Word Preview specific styles */ .word-preview-content { font-family: 'Arial', sans-serif; background: var(--bg); color: var(--text); padding: 40px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin: 0 auto; max-width: 210mm; /* A4 width */ min-height: 297mm; /* A4 height */ line-height: 1.4; }