/* CV-KREATOR/public/css/main.css */

/* ... (Keep all existing styles from the top down to the diff modal styles) ... */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;500;700&family=Roboto+Mono:wght@400;500&family=Source+Sans+Pro:wght@400;700&family=Raleway:wght@400;500;700&family=Playfair+Display:wght@700&family=Open+Sans:wght@400;700&family=Noto+Serif:wght@400;700&family=Arimo:wght@400;700&family=Cormorant+Garamond:wght@400;700&family=Exo+2:wght@400;700&family=Fira+Sans:wght@400;500&family=Inter:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Lora:wght@400;700&family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=Quicksand:wght@400;500;700&family=Work+Sans:wght@400;700&display=swap');

/* --- BASE STYLES --- */
:root {
    --accent-color: #007bff;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #f4f7f9;
    margin: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
     text-align: left !important;
    min-height: 100vh;
}

.controls {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    width: 210mm;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap; /* ADDED */
}

.control-btn,
#download-btn {
    background-color: #6c757d;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.control-btn:hover {
    background-color: #5a6268;
}

#download-btn {
    background-color: #28a745;
}
#download-btn:hover {
    background-color: #218838;
}

#template-select,
#font-select,
#font-size-input {
    font-size: 14px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.template-nav-btn {
    padding: 8px 10px; /* Adjust padding */
    font-size: 16px;   /* Adjust font size for arrows */
    line-height: 1;    /* Ensure arrows are centered nicely */
    min-width: auto;   /* Override general .control-btn min-width if any */
}

#font-size-input {
    width: 50px;
    text-align: center;
}

#color-picker, #bg-color-picker, #font-color-picker { /* ADDED bg-color-picker and font-color-picker */
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 38px;
    height: 38px;
    padding: 2px;
    cursor: pointer;
}

#font-upload-label {
    cursor: pointer;
}
#font-upload {
    display: none;
}

#cv-content-wrapper {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     text-align: left !important; /* ENSURE WRAPPER DEFAULTS TO LEFT */
}

#cv-content {
    color: #333;
    padding: 10mm;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left; /* Ensure #cv-content itself is left-aligned */
}

[contenteditable="true"] {
    outline: none;
    cursor: text;
}
[contenteditable="true"]:hover,
[contenteditable="true"]:focus {
    background-color: #f0faff;
    box-shadow: 0 0 0 1px var(--accent-color);
    border-radius: 2px;
}

.add-btn, .add-entry-btn {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    color: #555;
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.6rem;
    transition: all 0.2s;
    font-size: 0.9em;
}
.add-btn:hover, .add-entry-btn:hover {
    background-color: #e0e0e0;
    border-color: #aaa;
}

.section {
    margin-bottom: 1.25em;
    position: relative;
    text-align: left; /* Ensure section content is left aligned */
}

.item {
    margin-bottom: 1.1em;
    position: relative; /* Already there, good for absolute positioning of controls */
    padding-top: 5px; /* Add a little space if controls are at the very top */
    text-align: left; /* Ensure item content is left aligned */
}

.item-controls {
    position: absolute;
    top: 2px; /* ADJUSTED */
    right: 2px; /* ADJUSTED */
    display: none; /* Hidden by default, shown on .item:hover */
    flex-direction: row-reverse; /* Icons order right-to-left */
    gap: 4px; /* ADJUSTED */
    background: rgba(248, 249, 250, 0.85); /* Slightly transparent background */
    padding: 2px 4px; /* ADJUSTED */
    border-radius: 3px; /* ADJUSTED */
    z-index: 15;
}

.item:hover .item-controls {
    display: flex; /* Show controls on hover */
}

.move-item-btn {
    background-color: #adb5bd; /* LIGHTER GRAY */
    color: white;
    border: none;
    border-radius: 3px; /* Slightly rounded corners for small buttons */
    width: 18px; /* SMALLER */
    height: 18px; /* SMALLER */
    font-size: 10px; /* SMALLER arrow */
    line-height: 16px; /* Adjust for vertical centering */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.move-item-btn:hover {
    background-color: #6c757d; /* Darker on hover */
}

/* Consolidated remove button styles for item controls */
.item-controls .remove-item-btn {
    background-color: #dc3545; /* RED */
    color: white;
    border: none;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.item-controls .remove-item-btn:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Remove or comment out old .item > .remove-item-btn if not needed */
/* .item > .remove-item-btn { display: none !important; } */


.section-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    gap: 5px;
    background: rgba(255,255,255,0.8);
    padding: 5px;
    border-radius: 5px;
    z-index: 10;
}
.section:hover > .section-controls {
    display: flex;
}

/* Section Controls Buttons (Move and Remove) */
.section-controls .move-section-btn { /* Style specifically for move button in section controls */
    width: 22px; /* Slightly larger than item controls */
    height: 22px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 50%; /* Round */
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px; /* Adjust for icon centering */
    font-size: 14px; /* Adjust icon size */
    transition: background-color 0.2s;
}
.section-controls .move-section-btn:hover {
    background-color: #5a6268;
}

.section-controls .remove-item-btn { /* Style for remove button in section controls */
    width: 22px;
    height: 22px;
    background-color: #dc3545; /* RED */
    color: white;
    border: none;
    border-radius: 50%; /* Round */
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    font-size: 14px;
    transition: background-color 0.2s;
}
.section-controls .remove-item-btn:hover {
    background-color: #c82333;
}


#inline-style-toolbar,
#add-section-modal {
    position: absolute;
    background: #333;
    color: white;
    border-radius: 6px;
    padding: 5px 10px;
    display: none;
    z-index: 1000;
    gap: 10px;
    align-items: center;
}
#add-section-modal {
    flex-direction: column;
    padding: 15px;
}
#add-section-modal h4 {
    margin: 0 0 10px 0;
}
#add-section-modal button {
    background: #555;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 5px;
}
#add-section-modal button:hover {
    background: #777;
}

.toolbar-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
}
.toolbar-btn:hover {
    background: #555;
}
.toolbar-color-picker {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.toolbar-color-picker::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid #fff;
}
.toolbar-color-picker::-moz-color-swatch {
    border-radius: 50%;
    border: 2px solid #fff;
}


/* --- FONT CLASSES --- */
.font-lato { font-family: 'Lato', sans-serif; }
.font-merriweather { font-family: 'Merriweather', serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-raleway { font-family: 'Raleway', sans-serif; }
.font-sourcesans { font-family: 'Source Sans Pro', sans-serif; }
.font-opensans { font-family: 'Open Sans', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-notoserif { font-family: 'Noto Serif', serif; }
.font-arimo { font-family: 'Arimo', sans-serif; }
.font-cormorant { font-family: 'Cormorant Garamond', serif; }
.font-exo2 { font-family: 'Exo 2', sans-serif; }
.font-firasans { font-family: 'Fira Sans', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-librebaskerville { font-family: 'Libre Baskerville', serif; }
.font-lora { font-family: 'Lora', serif; }
.font-ptsans { font-family: 'PT Sans', sans-serif; }
.font-ptserif { font-family: 'PT Serif', serif; }
.font-quicksand { font-family: 'Quicksand', sans-serif; }
.font-worksans { font-family: 'Work Sans', sans-serif; }
.font-robotomono { font-family: 'Roboto Mono', monospace; }


/* --- LAYOUT & GENERIC STYLES --- */
.cv-header {
    margin-bottom: 1em; /* WAS 5mm */
    /* REMOVED padding-bottom and border-bottom as templates will handle this */
    text-align: left; /* Default header alignment */
}
.cv-header h1 {
    font-size: 18pt; /* More consistent base size */
    margin-top: 0;
    margin-bottom: 0.1em; /* Tighter spacing */
}
.cv-header p { /* The subtitle */
    font-size: 11pt;
    margin-top: 0;
    margin-bottom: 0.5em; /* Spacing below subtitle */
}

.cv-body {
    display: flex;
    width: 100%;
    flex-grow: 1;
    overflow: hidden; /* Prevent content from breaking layout */
    text-align: left; /* Ensure cv-body content defaults to left */
}

#cv-content.layout-swapped .cv-body {
    flex-direction: row-reverse;
}

.main-content {
    flex: 2 1 60%;
    min-width: 0; /* Important for flex items */
    /* overflow-y: auto; -- REMOVED, parent #cv-content will scroll if needed */
    padding-right: 0.5rem; /* Space before resizer or sidebar */
    text-align: left !important;
}

#flex-column-resizer {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 5px;
    min-width: 5px;
    background-color: #e0e0e0;
    cursor: col-resize;
    align-self: stretch; /* Takes full height of .cv-body */
}


.sidebar {
    flex: 1 1 calc(40% - 5px); /* Account for resizer width */
    min-width: 0; /* Important for flex items */
    /* overflow-y: auto; -- REMOVED, parent #cv-content will scroll if needed */
    /* overflow-x: auto; -- REMOVED */
    padding-left: 0.5rem; /* Space after resizer or from main content */
    word-break: break-word; /* Prevent long words from breaking layout */
    text-align: left !important;
}

.sidebar > * { /* Direct children of sidebar */
    max-width: 100%; /* Prevent children from overflowing */
}
.sidebar .item > *,
.sidebar .section > *,
.sidebar .skills-list li,
.sidebar .contact-info p {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Legacy support */
    white-space: normal !important; /* Ensure text wraps */
}
.sidebar .contact-info p > * {
    min-width: 0; /* Allow flex children in contact info to shrink */
}


/* Specific Sidebar Density Adjustments */
.sidebar .section {
    margin-bottom: 0.8em;
}

.sidebar .item { /* Default item margin in sidebar */
    margin-bottom: 0.5em;
    display: flex; /* For ordering date on top */
    flex-direction: column;
    position: relative; /* For item controls */
}

/* --- MORE SPECIFIC STYLING FOR ITEMS WITHIN CONTACT SECTION --- */
.sidebar .contact-info > .item { /* Select .item only if it's a DIRECT child of .contact-info */
    margin-bottom: 0.1em !important; /* Drastically reduce bottom margin */
}

.sidebar .contact-info > .item p { /* Select p only if it's in a DIRECT child .item of .contact-info */
    margin-bottom: 0.1em !important; /* Also reduce bottom margin */
    line-height: 1.2 !important;   /* Make line height tighter */
}
/* --- END OF CONTACT SPECIFIC STYLING --- */


.sidebar .section h2 {
    margin-bottom: 0.5em;
    padding-bottom: 0.2em;
    font-size: 1.15em;
}


/* p, ul, li, header.cv-header {
    page-break-inside: avoid;
} */


.section h2 {
    font-size: 1.25em;
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-top: 0;
    margin-bottom: 1em;
    page-break-inside: avoid;
}

.item h3 {
    margin: 0;
    font-size: 1em;
    font-weight: 700;
    page-break-inside: avoid;
    overflow-wrap: break-word;
}

.item-date {
    float: right;
    color: #555;
    font-style: italic;
    font-size: 0.9em;
    page-break-inside: avoid;
}

.item-subheading {
    margin: 0.1em 0 0.5em 0;
    color: #555;
    font-weight: 700;
    font-size: 0.9em;
    overflow-wrap: break-word;
}

.item ul {
    padding-left: 1.25em;
    margin: 0.5em 0 0 0;
    clear: both; /* If item-date is floated */
}

.controls .ai-feature {
    width: 100%; /* Make these groups take full width in the controls bar for now */
    margin-bottom: 10px;
    padding-top: 10px;
    /* border-top: 1px solid #eee; */ /* Optional top border */
}
.controls .ai-feature label {
    white-space: nowrap; /* Prevent label from wrapping if too long */
}

/* --- DIFF MODAL STYLES --- */
/* Your existing .diff-modal and .diff-modal-content styles are mostly good */
.diff-modal { /* Renamed from #cv-diff-modal to be a class */
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    padding-top: 20px; /* Reduced from 30px */
    padding-bottom: 20px; /* Added for scrollable content */
}

.diff-modal-content { /* Renamed from #cv-diff-modal .modal-content */
    background-color: #fefefe;
    margin: 2% auto; /* Adjust margin for better vertical centering with scroll */
    padding: 25px; /* Increased padding */
    border: 1px solid #ababab; /* Darker border */
    width: 90%; /* Increased width */
    max-width: 1300px; /* Increased max-width for wider screens */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.diff-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0; /* Lighter border */
    padding-bottom: 15px; /* Increased padding */
    margin-bottom: 20px; /* Increased margin */
}

.diff-modal-header h3 {
    margin: 0;
    font-size: 1.6em; /* Slightly larger */
    color: #333;
}

.close-button { /* Assuming this is your #close-diff-modal button */
    color: #777; /* Lighter color */
    /* float: right; -- Not needed with flexbox */
    font-size: 32px; /* Larger */
    font-weight: bold;
    line-height: 1;
    background: none; /* Make it look less like a form button */
    border: none;
    padding: 0 5px; /* Some padding for easier click */
}

.close-button:hover,
.close-button:focus {
    color: #333; /* Darker on hover/focus */
    text-decoration: none;
    cursor: pointer;
}

.refinement-summary-display { /* Your #diff-overall-summary */
    margin-bottom: 25px; /* Increased space */
    padding: 15px; /* Increased padding */
    background-color: #e9f5ff; /* Light blue */
    border: 1px solid #b3dfff; /* Matching border */
    border-radius: 6px; /* Softer radius */
    font-style: italic;
    font-size: 0.95em;
    line-height: 1.6;
}

.diff-section-block {
    margin-bottom: 30px; /* Increased space */
    padding-bottom: 20px; /* Increased space */
    border-bottom: 1px solid #e0e0e0; /* Lighter border */
}
.diff-section-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.diff-section-block h4 {
    margin-top: 0;
    margin-bottom: 15px; /* Increased space */
    font-size: 1.3em; /* Slightly larger */
    color: var(--accent-color, #007bff);
}

/* This is the key part for the 3-column layout */
.diff-columns-three { /* Ensure your JS uses this class name */
    display: flex;
    flex-direction: row; /* Horizontal alignment of children */
    justify-content: space-between; /* Evenly space the columns */
    gap: 20px; /* Space between columns */
    width: 100%;
}

.diff-column {
    flex: 1; /* Each column takes equal width */
    /* Or, if you want fixed widths that might wrap on smaller modal: */
    /* width: calc(33.333% - 14px); approx (100%/3) - (2/3 * gap) */
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 15px;
    display: flex; /* Internal flex for title and content area */
    flex-direction: column; /* Stack title above content area */
}

.diff-column h5 {
    font-size: 1em; /* Adjusted */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    color: #374151;
}

.diff-content-area { /* Applied to all three content divs */
    background-color: #ffffff;
    border: 1px solid #c5cdd5;
    border-radius: 4px;
    padding: 12px; /* Increased padding */
    min-height: 180px; /* Increased min-height */
    overflow-y: auto;
    font-size: 0.95em;
    line-height: 1.5;
    flex-grow: 1; /* Allow content area to fill vertical space in column */
    max-height: 350px; /* Max height before scroll within the area */
}

.diff-content-area[contenteditable="true"]:focus {
    outline: 2px solid var(--accent-color, #3b82f6);
    border-color: var(--accent-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Specific for Tips Column */
.tips-column .diff-content-area {
    background-color: #eff6ff; /* Light blue tint, as from previous example */
    border-color: #bfdbfe;
    /* No need to set cursor/outline if it's not contenteditable or JS sets readonly */
}
.tips-column .diff-content-area ul {
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    list-style-type: disc;
}
.tips-column .diff-content-area li {
    margin-bottom: 8px; /* Spacing for tips */
    font-size: 0.9em;
}
.tips-column .diff-content-area li:last-child {
    margin-bottom: 0;
}

/* HR Separator within content areas (e.g., between experience items) */
.diff-content-area hr.diff-item-separator {
    margin: 12px 0;
    border: none;
    border-top: 1px dashed #cccccc;
}

.diff-modal-actions {
    margin-top: 25px; /* Increased space */
    padding-top: 20px; /* Increased space */
    border-top: 1px solid #e0e0e0; /* Lighter border */
    text-align: right; /* Align buttons to the right */
    display: flex; /* Use flex for button alignment and spacing */
    justify-content: flex-end; /* Align buttons to the end (right) */
    gap: 10px; /* Space between buttons */
}
/* .diff-modal-actions .control-btn -- Already styled by general .control-btn */
/* You might want specific styles for buttons like "Apply My Edits" vs "Use All AI" */
#apply-my-edits-btn {
    /* Example: specific styling */
    background-color: #17a2b8; /* Info blue */
}
#apply-my-edits-btn:hover {
    background-color: #138496;
}
#use-all-ai-btn {
    background-color: #28a745; /* Success green */
}
#use-all-ai-btn:hover {
    background-color: #218838;
}
#cancel-diff-btn {
    background-color: #6c757d; /* Secondary gray */
}
#cancel-diff-btn:hover {
    background-color: #5a6268;
}


/* --- ITEM STYLING FOR DATE ON TOP (SIDEBAR ONLY) --- */
/* Your existing .sidebar .item order styles seem okay */
.sidebar .item .item-date {
    float: none;
    order: 1;
    margin-bottom: 0.15em;
    width: 100%;
    color: #555;
    font-style: italic;
    font-size: 0.9em;
}
.sidebar .item h3 {
    order: 2;
    width: 100%;
    margin: 0;
    font-size: 1em;
    font-weight: 700;
}
.sidebar .item .item-subheading {
    order: 3;
    width: 100%;
    margin: 0.1em 0 0.3em 0;
    color: #555;
    font-weight: 700;
    font-size: 0.9em;
}
.sidebar .item ul {
    order: 4;
    width: 100%;
    padding-left: 1.25em;
    margin: 0.3em 0 0 0;
    clear: none; /* Already set, good */
}
.sidebar .item > .item-controls { /* Targeting .item-controls directly inside .sidebar .item */
    /* Position adjustments might be needed if they clash with ordered content */
    top: 0;
    right: 0;
    /* Ensure z-index is high enough */
}


.item li {
    margin-bottom: 0.2em;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}
.skills-list li {
    background: #f0f0f0;
    border-radius: 4px;
    padding: 0.2em 0.5em;
    font-size: 0.85em;
    margin-bottom: 0.3em;
}

.contact-info p {
    margin: 0 0 0.2em 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap; /* Allow wrapping */
    line-height: 1.3;
}
.contact-info p strong {
    display: inline-block; /* Good for label */
    flex-shrink: 0; /* Prevent label from shrinking */
    margin-right: 0.5em;
}


/* Duplicated base styles from the end of your file are removed here, */
/* as they are already defined at the top. */
/* Keeping only unique or overriding styles below if necessary. */


/* --- ATS VIEW STYLES --- */
#cv-content.ats-view-active {
    text-align: left !important; /* Base alignment */
}

/* Force linear layout: .main-content stacks on top of .sidebar */
#cv-content.ats-view-active .cv-body {
    display: block !important; /* Override flex to stack children */
}
#cv-content.ats-view-active .main-content,
#cv-content.ats-view-active .sidebar {
    width: 100% !important;
    float: none !important; /* Clear any floats from templates */
    flex-basis: auto !important; /* Reset flex properties */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-bottom: 20px !important; /* Space between stacked main and sidebar */
    padding-left: 0 !important;   /* Reset column-specific paddings */
    padding-right: 0 !important;
    text-align: left !important; /* Ensure content within columns is left-aligned */
}
#cv-content.ats-view-active #flex-column-resizer {
    display: none !important; /* Hide the resizer */
}

/* Standardize item date display in ATS view for ALL items (main and sidebar) */
#cv-content.ats-view-active .item {
    display: flex !important; /* Use flex to easily order date and title */
    flex-direction: column !important;
    padding-top: 0 !important; /* Reset any padding */
}
#cv-content.ats-view-active .item .item-date {
    display: block !important;
    float: none !important;
    text-align: left !important;
    margin-bottom: 0.2em !important;
    font-style: normal !important; /* Make dates non-italic */
    order: 1 !important; /* Date first */
}
#cv-content.ats-view-active .item h3 {
    order: 2 !important; /* Title second */
    width: 100% !important;
}
#cv-content.ats-view-active .item .item-subheading {
    order: 3 !important; /* Subheading third */
    width: 100% !important;
}
#cv-content.ats-view-active .item ul {
    order: 4 !important; /* List fourth */
    width: 100% !important;
    padding-left: 20px !important;
    clear: none !important;
}
#cv-content.ats-view-active .item-controls {
    display: none !important; /* Hide item edit controls */
}


/* Simplify section headings */
#cv-content.ats-view-active .section h2 {
    text-align: left !important;
    border-bottom: 1px solid var(--accent-color) !important;
    background-color: transparent !important;
    padding: 0.2em 0 !important;
    margin-bottom: 0.6em !important;
}

/* Simplify skills list */
#cv-content.ats-view-active .skills-list {
    display: block !important;
    padding-left: 0 !important;
    list-style-type: none !important;
    margin-top: 0.3em !important;
}
#cv-content.ats-view-active .skills-list li {
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 0 3px 0 !important;
    margin: 0 0 3px 0 !important;
}

/* Ensure contact info paragraphs stack */
#cv-content.ats-view-active .contact-info p {
    display: block !important;
    margin-bottom: 0.2em !important;
}
#cv-content.ats-view-active .contact-info p strong {
    margin-right: 0.5em;
}

/* General text alignment */
#cv-content.ats-view-active p,
#cv-content.ats-view-active ul,
#cv-content.ats-view-active li {
    text-align: left !important;
}

/* Attempt to remove purely decorative styles */
#cv-content.ats-view-active [class*="template-"] .cv-header,
#cv-content.ats-view-active [class*="template-"] .section:not(.skills-list-section):not(.contact-info) {
    background-image: none !important;
}
#cv-content.ats-view-active .cv-header {
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 0.5em !important;
    text-align: left !important;
}
#cv-content.ats-view-active .cv-header h1,
#cv-content.ats-view-active .cv-header p {
    text-align: left !important;
}


@media print {
    html {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #fff !important;
    }
    body {
        width: 210mm !important;
        min-height: 297mm !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #fff !important;
        overflow: visible !important;
        display: block !important;
    }

    #cv-content-wrapper {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #cv-content {
        padding: 10mm !important; /* YOUR PDF PAGE MARGIN */
        display: block !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .cv-header {
        margin-bottom: 5mm !important;
        padding-bottom: 2mm !important;
        border-bottom: 1px solid #ccc !important;
        text-align: center !important; /* Templates might override this, but good default */
    }
    .template-classic header.cv-header {
        padding-bottom: 2mm !important; /* Example of template specific print adjustment */
    }
    .cv-header h1 {
        font-size: 18pt !important;
        margin-top: 0 !important;
        margin-bottom: 1mm !important;
    }
    .cv-header p {
        font-size: 11pt !important;
        margin-top: 0 !important;
        margin-bottom: 2mm !important;
    }


    .cv-body {
        display: flex !important; /* Maintain flex for columns in print */
        flex-direction: row !important; /* Ensure correct direction */
        width: 100% !important;
        overflow: visible !important;
        text-align: left !important;
    }

    #flex-column-resizer {
        display: none !important;
    }

    .main-content {
        flex: 0 0 65% !important; /* Fixed basis for print */
        margin-right: 5mm !important; /* Gutter between columns */
        overflow: visible !important;
        height: auto !important;
        padding-right: 0 !important; /* No extra padding */
    }

    .sidebar {
        flex: 0 0 calc(35% - 5mm) !important; /* Fixed basis, accounting for gutter */
        overflow: visible !important;
        height: auto !important;
        padding-left: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .sidebar .item > *, .sidebar .section > * {
        max-width: 100% !important; /* Constrain children */
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Sidebar item ordering for print */
    .sidebar .item { display: flex !important; flex-direction: column !important; }
    .sidebar .item .item-date, .sidebar .item h3, .sidebar .item .item-subheading, .sidebar .item ul {
        order: initial !important; /* Reset any live view order if needed */
        width: 100% !important;
        float: none !important;
    }
    .sidebar .item .item-date { order: 1 !important; margin-bottom: 0.15em !important; }
    .sidebar .item h3 { order: 2 !important; }
    .sidebar .item .item-subheading { order: 3 !important; }
    .sidebar .item ul { order: 4 !important; }

    /* Page break control */
    p, li, .item-subheading, ul, .section, .item { page-break-inside: auto !important; }
    h1, h2, h3, .cv-header, .item-date { page-break-after: avoid !important; page-break-inside: avoid !important; }


    .controls, #add-section-modal, #inline-style-toolbar,
    .section-controls, .add-entry-btn, .add-btn,
    .item-controls /* Hide all item controls in print */ {
        display: none !important;
    }

    body, h1, h2, h3, p, li, span, div { color: #000 !important; }
    a { text-decoration: none !important; color: #000 !important; }
}