/* CV_Builder_Pro_EN/css/style.css */

/* Basic Reset and Root Variables */
:root {
    --primary-color: #2c3e50; /* Dark Blue-Gray for headers, footers */
    --secondary-color: #3498db; /* Bright Blue for primary actions, links */
    --accent-color-default: #e74c3c; /* Default CV accent (e.g., Ruby Red) */
    --background-color: #f4f7f6; /* Light Grayish Blue for body background */
    --surface-color: #ffffff; /* White for input panels, preview paper */
    --text-color-primary: #333333; /* Dark Gray for main text */
    --text-color-secondary: #555555; /* Medium Gray for secondary text */
    --text-color-light: #ffffff; /* White for text on dark backgrounds */
    --border-color: #dfe4ea; /* Light Gray for borders */
    --border-color-darker: #c8d6e5; /* Slightly darker border for focus states */
    --danger-color: #c0392b; /* Darker Red for destructive actions */
    --warning-color: #f39c12; /* Yellow/Orange for warnings */
    --success-color: #27ae60; /* Darker Green for success states */
    
    --font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-family-serif: 'Georgia', 'Times New Roman', Times, serif; 
    --font-family-monospace: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;

    --border-radius-small: 3px;
    --border-radius-medium: 5px;
    --border-radius-large: 8px;
    --box-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
    --box-shadow-strong: 0 6px 18px rgba(0, 0, 0, 0.12);

    /* Spacing units */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Transitions */
    --transition-speed-fast: 0.15s;
    --transition-speed-normal: 0.3s;
    --transition-easing: ease-in-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; 
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

body {
    font-family: var(--font-family-sans-serif);
    background-color: var(--background-color);
    color: var(--text-color-primary);
    line-height: 1.65; /* Increased for better readability */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

/* Accessibility: Screen-reader only */
.sr-only { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Links */
a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-easing);
}
a:hover, a:focus {
    color: #2980b9; 
    text-decoration: underline;
}
a:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-small);
}

/* Buttons and Labels acting as Buttons */
button, .button-style-label {
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--border-radius-medium);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    transition: background-color var(--transition-speed-normal) var(--transition-easing), 
                border-color var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing), 
                transform var(--transition-speed-fast) var(--transition-easing);
    border: 1px solid transparent;
    display: inline-flex; /* For aligning icon and text */
    align-items: center;
    justify-content: center;
    gap: var(--space-sm); /* Space between icon and text */
    line-height: 1.2; /* Ensure text within button is aligned */
    user-select: none; /* Prevent text selection on buttons */
}
button:focus-visible, .button-style-label:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}
button:active, .button-style-label:active {
    transform: translateY(1px) scale(0.98);
}
button:disabled, 
button[aria-disabled="true"], 
.button-style-label[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed !important; /* Ensure cursor changes */
    background-color: var(--medium-gray) !important;
    border-color: var(--medium-gray) !important;
    color: var(--dark-gray) !important;
    box-shadow: none !important;
    transform: none !important; /* No active transform for disabled */
}
button svg, .button-style-label svg {
    width: 1em; /* Relative to button font size */
    height: 1em;
    /* margin-right: var(--space-xs); SVG already has some internal padding often */
    fill: currentColor; /* Make SVG icon color inherit from button text color */
}


/* Primary Button Style (used for header controls) */
.header-controls button, 
.header-controls .button-style-label {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    border-color: var(--secondary-color);
}
.header-controls button:hover:not(:disabled), 
.header-controls .button-style-label:hover:not([aria-disabled="true"]),
.header-controls button:focus:not(:disabled), 
.header-controls .button-style-label:focus:not([aria-disabled="true"]) {
    background-color: #2980b9; 
    border-color: #2980b9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* App Header */
.app-header {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--box-shadow-medium);
    position: sticky;
    top: 0;
    z-index: 1000; 
}
.app-header .logo-area h1 {
    margin: 0;
    font-size: 1.6em; 
    font-weight: 600; 
}
.app-header .logo-area h1 a {
    color: var(--text-color-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}
.app-header .logo-icon {
    width: 28px; 
    height: 28px;
    fill: var(--secondary-color); /* Color for the logo icon itself */
}
.app-header .header-controls {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--space-sm);
    justify-content: flex-end; 
}

/* Main Container */
.container {
    display: flex;
    flex-direction: row; 
    padding: var(--space-lg);
    gap: var(--space-lg);
    flex-grow: 1; 
}

/* Input Panel */
.input-panel {
    flex: 1 1 45%; 
    min-width: 300px; 
    background-color: var(--surface-color);
    padding: var(--space-md); 
    border-radius: var(--border-radius-large); 
    box-shadow: var(--box-shadow-soft);
    max-height: calc(100vh - 100px); 
    overflow-y: auto; 
    scrollbar-width: thin; 
    scrollbar-color: var(--medium-gray) var(--light-gray); 
}
.input-panel::-webkit-scrollbar { 
    width: 8px;
}
.input-panel::-webkit-scrollbar-track {
    background: var(--light-gray);
    border-radius: 4px;
}
.input-panel::-webkit-scrollbar-thumb {
    background-color: var(--medium-gray);
    border-radius: 4px;
    border: 2px solid var(--light-gray); 
}

/* Form Section Wrapper and Header */
.form-section-wrapper {
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background-color: var(--surface-color); 
    transition: box-shadow var(--transition-speed-normal) var(--transition-easing);
}
.form-section-wrapper:focus-within { 
     border-color: var(--secondary-color);
     box-shadow: 0 0 0 1px var(--secondary-color);
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background-color: #f8f9fa; 
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: var(--border-radius-medium); 
    border-top-right-radius: var(--border-radius-medium);
    cursor: pointer;
    user-select: none; 
}
.section-header:hover {
    background-color: #e9ecef; 
}
.section-header h3 {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.2em; 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.section-header .section-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--secondary-color); 
}
.section-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.section-reorder-button, .section-toggle-icon {
    background: none;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    color: var(--text-color-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-small);
    line-height: 1; /* Ensure icons align well */
}
.section-reorder-button svg, .section-toggle-icon svg { /* If using SVG for toggle */
    width: 16px; height: 16px; fill: currentColor;
}
.section-reorder-button:hover:not(:disabled), .section-toggle-icon:hover {
    background-color: var(--border-color);
    color: var(--text-color-primary);
}
.section-reorder-button:disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    background-color: transparent !important;
}
.section-toggle-icon {
    font-size: 1.2em; 
    transition: transform var(--transition-speed-normal) var(--transition-easing);
}
.section-header[aria-expanded="false"] + .form-section-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border-top: none; 
    opacity: 0;
    margin-top: 0; /* Remove margin when collapsed */
    margin-bottom: 0;
}
.section-header[aria-expanded="true"] .section-toggle-icon {
    transform: rotate(180deg); 
}
/* Additional style for when section header is focused and expanded/collapsed */
.section-header:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: -2px; /* Inside border */
    background-color: #e9ecef;
}

.form-section-content {
    padding: var(--space-md);
    /* border-top: 1px solid var(--border-color); Removed as header has bottom border */
    max-height: 3000px; /* Large enough for content, for transition, adjust if very long sections */
    opacity: 1;
    transition: max-height var(--transition-speed-normal) var(--transition-easing),
                opacity var(--transition-speed-fast) var(--transition-easing), /* Faster opacity */
                padding-top var(--transition-speed-normal) var(--transition-easing),
                padding-bottom var(--transition-speed-normal) var(--transition-easing),
                margin-top var(--transition-speed-normal) var(--transition-easing),
                margin-bottom var(--transition-speed-normal) var(--transition-easing);
}


/* Form Elements */
.form-section-content label { 
    display: block;
    margin-bottom: var(--space-xs); 
    font-weight: 500;
    font-size: 0.9em; 
    color: var(--text-color-secondary);
}
.form-section-content input[type="text"],
.form-section-content input[type="email"],
.form-section-content input[type="tel"],
.form-section-content input[type="url"],
.form-section-content input[type="month"], 
.form-section-content textarea,
.form-section-content select {
    width: 100%;
    padding: var(--space-sm); 
    margin-bottom: var(--space-xs); 
    border: 1px solid var(--border-color-darker); 
    border-radius: var(--border-radius-small);
    font-size: 0.95em; 
    background-color: var(--surface-color);
    color: var(--text-color-primary);
}
.form-section-content input:focus, 
.form-section-content textarea:focus,
.form-section-content select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* Softer focus shadow */
}
.form-section-content textarea {
    min-height: 80px;
    resize: vertical;
}
.form-section-content select { /* Custom arrow for select */
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%2334495e%22%3E%3Cpath%20d%3D%22M208.2%2096.2l-72%2072c-3.8%203.8-10%203.8-13.8%200l-72-72c-5.4-5.4-1.6-14.8%205.8-14.8h140.4c7.4%200%2011.2%209.4%205.8%2014.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 1em auto;
    padding-right: calc(var(--space-sm) * 3);
}

.char-counter {
    font-size: 0.8em;
    color: var(--text-color-secondary);
    text-align: right;
    margin-bottom: var(--space-md);
    margin-top: var(--space-xxs);
    height: 1.2em; /* Reserve space */
}
.form-hint {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    margin-top: var(--space-xs); 
    margin-bottom: var(--space-md);
}
.validation-message {
    font-size: 0.85em;
    color: var(--danger-color);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
    min-height: 1.2em; 
    display: block; /* Ensure it takes space */
}
input.invalid, textarea.invalid, select.invalid {
    border-color: var(--danger-color) !important; /* Ensure override */
    background-color: #fffafa; /* Very light red background for invalid fields */
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
}


/* Profile Image Specifics */
.profile-upload-label {
    display: inline-flex; /* To align icon and text */
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    background-color: var(--dark-gray);
    color: var(--text-color-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--dark-gray);
    font-weight: 500;
}
.profile-upload-label:hover, .profile-upload-label:focus {
    background-color: #6c7a89;
    border-color: #6c7a89;
}
#profile-image-preview {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-md);
    border: 3px solid var(--border-color);
    border-radius: 50%; 
    object-fit: cover; 
    background-color: var(--light-gray); 
}

/* Add Custom Section Specific Controls */
.add-custom-section-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center; /* Align input and button vertically */
    margin-top: var(--space-md);
}
.add-custom-section-controls input[type="text"] {
    flex-grow: 1; 
    margin-bottom: 0; 
}
.add-custom-section-controls button {
    flex-shrink: 0; 
    white-space: nowrap; /* Prevent text wrapping on button */
}

/* Dynamic Entries Styling (for Experience, Education, etc.) */
.entries-list {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md); 
}
.dynamic-entry {
    padding: var(--space-sm) var(--space-md); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background-color: #f9fafb; 
    position: relative; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.03); /* Softer shadow for entries */
}
.dynamic-entry-header {
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-color-secondary); 
    font-size: 1em; 
    display: block; 
}
.entry-controls {
    margin-top: var(--space-sm); 
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap; 
    border-top: 1px solid var(--border-color); /* Separator for controls */
    padding-top: var(--space-sm);
}
.reorder-button, .remove-entry-button {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color-darker);
    color: var(--text-color-secondary);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9em; /* Slightly larger for better click target */
    font-weight: 500; /* More distinct */
}
.reorder-button:hover:not(:disabled), .remove-entry-button:hover:not(:disabled) {
    background-color: var(--light-gray);
    border-color: var(--dark-gray);
    color: var(--text-color-primary);
}
.remove-entry-button {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.remove-entry-button:hover:not(:disabled), .remove-entry-button:focus:not(:disabled) {
    background-color: var(--danger-color);
    color: var(--text-color-light);
    border-color: var(--danger-color);
}
.add-entry-button {
    background-color: var(--success-color);
    color: var(--text-color-light);
    border-color: var(--success-color);
    padding: var(--space-sm) var(--space-md); 
    font-size: 0.95em; 
    margin-top: var(--space-md); /* Space above main add button */
}
.add-entry-button:hover:not(:disabled), .add-entry-button:focus:not(:disabled) {
    background-color: #229954; 
    border-color: #229954;
}
.dynamic-entry .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xs);
}
.dynamic-entry .checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: var(--space-sm);
    margin-bottom: 0; 
    transform: scale(1.1); /* Slightly larger checkbox */
}
.dynamic-entry .checkbox-group label {
    margin-bottom: 0; 
    font-weight: normal;
    font-size: 0.9em;
}


/* Proficiency Level Styling (for Skills, Languages) */
.proficiency-input-group { /* Wraps the entire skill/language name + level input */
    margin-bottom: var(--space-sm);
}
.proficiency-input-group label { /* The main label for skill/language name */
    margin-bottom: var(--space-xs);
}
/* For Select-based proficiency */
.proficiency-input-group select.skillLevel-input,
.proficiency-input-group select.languageProficiency-input {
    margin-top: var(--space-xs); /* Space between name input and proficiency select */
}

/* Alternative: Range slider for more granular control if preferred in sectionManager.js */
.proficiency-slider-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}
.proficiency-slider-container input[type="range"] {
    flex-grow: 1;
    width: auto; 
    margin-bottom: 0; 
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--light-gray);
    border-radius: var(--border-radius-small);
    outline: none;
    padding: 0; /* Remove default padding for range input */
}
.proficiency-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--secondary-color);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--surface-color);
    box-shadow: var(--box-shadow-soft);
}
.proficiency-slider-container input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--secondary-color);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--surface-color);
    box-shadow: var(--box-shadow-soft);
}
.proficiency-slider-container .proficiency-label-output {
    display: inline-block;
    min-width: 90px; 
    font-size: 0.9em;
    color: var(--secondary-color);
    font-weight: 500;
    text-align: right;
}


/* Color Picker for CV Accent */
.color-picker-container {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: var(--space-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    background-color: #f9f9f9;
}
.color-option {
    width: 28px; /* Slightly smaller */
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--surface-color); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform var(--transition-speed-fast) var(--transition-easing), 
                box-shadow var(--transition-speed-fast) var(--transition-easing),
                border-color var(--transition-speed-fast) var(--transition-easing);
    display: inline-block; 
    padding: 0; /* Override button padding */
    line-height: 0; /* Remove space for text if any */
}
.color-option:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.color-option:focus-visible { 
    outline: none; /* Custom focus ring */
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--secondary-color);
}
.color-option.selected {
    border-width: 3px; 
    border-color: var(--primary-color); 
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--primary-color); 
}


/* Preview Panel */
.preview-panel {
    flex: 1 1 55%; 
    min-width: 320px;
    background-color: var(--background-color); 
    border-radius: var(--border-radius-large);
    max-height: calc(100vh - 100px); 
    overflow-y: auto; 
    position: sticky; 
    top: 95px; 
    padding: var(--space-md); 
    scrollbar-width: thin;
    scrollbar-color: var(--medium-gray) var(--light-gray);
}
.preview-panel::-webkit-scrollbar { width: 8px; }
.preview-panel::-webkit-scrollbar-track { background: var(--light-gray); border-radius: 4px; }
.preview-panel::-webkit-scrollbar-thumb { background-color: var(--medium-gray); border-radius: 4px; border: 2px solid var(--light-gray); }

.cv-preview-area {
    background-color: var(--surface-color); 
    box-shadow: var(--box-shadow-strong); 
    margin: 0 auto; 
    width: 100%; 
    max-width: 21cm; 
    min-height: 28cm; 
}
.preview-placeholder-text {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-color-secondary);
    font-style: italic;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* Ensure placeholder is visible */
}
.preview-placeholder-text.error-text {
    color: var(--danger-color);
    font-style: normal;
    font-weight: 500;
}


/* App Footer */
.app-footer {
    text-align: center;
    padding: var(--space-md); 
    background-color: var(--primary-color);
    color: var(--light-gray);
    font-size: 0.85em; 
    margin-top: auto; 
}
.app-footer nav a {
    color: var(--secondary-color);
    margin: 0 var(--space-xs); 
}
.app-footer nav a:hover, .app-footer nav a:focus {
    color: var(--light-gray);
}

/* AdSense Placeholder Styles */
.adsense-placeholder {
    background-color: #e9ecef; 
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: var(--space-md) 0; 
    min-height: 90px; 
    border-radius: var(--border-radius-small);
}
.adsense-placeholder .adsense-notice { 
    color: var(--text-color-secondary);
    font-size: 0.85em;
}
.adsense-header-banner { width: 100%; max-width: 728px; min-height: 90px; margin: var(--space-sm) auto; }
.adsense-sidebar-top, .adsense-sidebar-bottom { width: 100%; min-height: 180px; } 
.adsense-below-preview { width: 100%; max-width: 728px; margin: var(--space-md) auto 0 auto; }


/* --- Responsive Design Adjustments --- */

/* Tablets and large phones (e.g., landscape) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column; 
        padding: var(--space-md);
        gap: var(--space-md);
    }
    .input-panel, .preview-panel {
        flex-basis: auto; 
        max-height: none; 
        position: static; 
        width: 100%; 
    }
    .preview-panel {
        margin-top: var(--space-lg); 
    }
    .app-header {
        padding: var(--space-sm) var(--space-md);
    }
    .app-header .logo-area h1 {
        font-size: 1.5em;
    }
    .header-controls button, .header-controls .button-style-label {
        font-size: 0.9em;
        padding: var(--space-xs) var(--space-sm);
    }
    .cv-preview-area {
         max-width: 100%; 
         min-height: auto; 
         /* Padding for "paper" on smaller screens might be better inside templates or reduced here */
    }
    /* Ensure input panel scrolls independently when stacked and possibly long */
    .input-panel {
        overflow-y: auto; /* Should already be set, but ensure it for stacked view */
        max-height: 70vh; /* Example max height before it scrolls, adjust as needed */
    }
}

/* Medium Phones */
@media (max-width: 767px) {
    html {
        font-size: 15px; 
    }
    .input-panel {
        padding: var(--space-sm);
        max-height: none; /* Remove max-height for input panel to allow full scroll */
    }
    .section-header h3 {
        font-size: 1.1em;
    }
    .section-header .section-icon svg {
        width: 18px; height: 18px;
    }
    .form-section-content {
        padding: var(--space-sm);
    }
    .add-custom-section-controls {
        flex-direction: column; 
        align-items: stretch; 
    }
    .add-custom-section-controls input[type="text"] {
        margin-bottom: var(--space-sm);
    }
    /* Ensure scrollbar is visible on input panel if needed */
    .input-panel {
        overflow-y: auto;
    }
}

/* Small Phones */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    .app-header {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
        padding: var(--space-sm);
    }
    .app-header .header-controls {
        justify-content: center; 
        gap: var(--space-xs);
    }
    .header-controls button, .header-controls .button-style-label {
        flex-grow: 1; 
        min-width: calc(50% - var(--space-xs)); /* Two buttons per row approx */
        font-size: 0.85em;
    }
    .container {
        padding: var(--space-sm);
    }
     .form-section-content input[type="text"],
    .form-section-content input[type="email"],
    .form-section-content input[type="tel"],
    .form-section-content input[type="url"],
    .form-section-content input[type="month"],
    .form-section-content textarea,
    .form-section-content select {
        font-size: 1em; /* Ensure readability on small screens */
        padding: var(--space-sm) calc(var(--space-sm) * 1.5); /* Adjust padding */
    }
    .dynamic-entry {
        padding: var(--space-sm);
    }
    .entry-controls {
        flex-direction: row; /* Keep reorder side-by-side, remove below */
        flex-wrap: wrap; /* Allow wrapping if needed */
        justify-content: flex-start; /* Align to left */
        gap: var(--space-xs);
    }
    .entry-controls button {
        /* width: auto; Remove full width */
        margin-bottom: 0;
    }
    .reorder-button { /* Make reorder buttons smaller on mobile */
        padding: var(--space-xxs) var(--space-xs);
        font-size: 0.8em;
    }
    .remove-entry-button { /* Make remove button more prominent */
        flex-grow: 1; /* Allow it to take more space or fixed width */
        min-width: 100px;
    }
    .add-custom-section-controls button {
        width: 100%;
    }
}

/* Print styles */
@media print {
    body {
        background-color: var(--surface-color) !important;
        padding: 0 !important; margin: 0 !important;
        font-size: 10pt !important; 
        color: #000 !important;
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale;
    }
    .app-header, .input-panel, .app-footer, .adsense-placeholder, .preview-panel > .adsense-below-preview,
    .section-controls, /* Hide section header controls (reorder/toggle icons) */
    .form-section-wrapper .section-header button.section-reorder-button, /* Specific reorder buttons */
    .form-section-wrapper .section-header span.section-toggle-icon /* Specific toggle icon */
     {
        display: none !important;
    }
    .form-section-wrapper .section-header { /* Ensure header itself is not display:none */
        cursor: default !important; /* No pointer cursor on print */
        background-color: transparent !important; /* No background for section header */
        border-bottom: none !important; /* No border below header on print */
        padding: 0 0 var(--space-sm) 0 !important; /* Minimal padding or adjust as needed */
    }
    .form-section-wrapper .section-header h3 {
        font-size: 1.3em !important; /* Make section titles slightly larger on print if desired */
        color: #000 !important; /* Ensure black */
    }
     .form-section-wrapper .section-header .section-icon svg {
        display: none !important; /* Hide icons in section headers on print */
    }


    .container { padding: 0 !important; margin: 0 !important; display: block !important; }
    .preview-panel {
        width: 100% !important; height: auto !important;
        overflow: visible !important; box-shadow: none !important;
        border: none !important; margin: 0 !important; padding: 0 !important;
        position: static !important; flex: none !important;
        background-color: transparent !important;
    }
    .cv-preview-area {
        padding: 0 !important; margin: 0 !important;
        background-color: transparent !important; 
        box-shadow: none !important; border: none !important;
        max-width: none !important; min-height: 0 !important;
    }
     .cv-preview-area > div { /* The actual CV template container */
        box-shadow: none !important; margin: 0 !important; border: none !important; 
        width: 100% !important; max-width: 100% !important;
        -webkit-print-color-adjust: exact !important; 
        color-adjust: exact !important;
    }
    a, a:visited { 
        text-decoration: underline !important; 
        color: var(--secondary-color) !important; /* Try to keep link color for context, unless black is preferred */
    }
    @page { margin: 15mm; size: A4; }
    .dynamic-entry, .cv-section, .form-section-wrapper /* CV sections in templates and input form wrappers */
     { 
        page-break-inside: avoid !important; 
    }
    h1, h2, h3, h4, h5, h6 { 
        page-break-after: avoid !important; 
        page-break-inside: avoid !important; /* Prevent heading itself from breaking */
    }
    .form-section-content {
        max-height: none !important; 
        opacity: 1 !important;
        overflow: visible !important; /* Ensure content is not clipped */
        padding: 0 !important; /* Remove padding for content in print unless specific */
        border-top: none !important; 
    }
}