/* ROOT VARIABLES */
:root { 
    --primary: #1e293b; 
    --accent: #4f46e5; 
    --a4-width: 210mm; 
    --a4-height: 297mm; 
    --main-font: 'Inter', sans-serif; 
}

/* BASE STYLES */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f1f5f9; 
    color: #334155; 
    /* Handled via Tailwind classes for responsiveness */
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* UI ELEMENTS */
#sidebar { 
    background: #f8fafc; 
    z-index: 50; 
    /* Width managed by Tailwind */
}

.editor-card { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    margin-bottom: 10px; 
    overflow: hidden; 
    transition: all 0.2s; 
}

.editor-card.active { 
    border-color: var(--accent); 
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1); 
    transform: translateY(-1px); 
}

.card-header { 
    padding: 12px 16px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    cursor: pointer; 
    user-select: none; 
}

.card-header:hover { background: #f1f5f9; }

.studio-input { 
    width: 100%; 
    padding: 8px 10px; 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 6px; 
    font-size: 13px; 
    margin-top: 4px; 
    color: #1e293b; 
    font-family: var(--main-font); 
}

.studio-input:focus { 
    background: white; 
    border-color: var(--accent); 
    outline: none; 
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); 
}

.input-label { 
    font-size: 10px; 
    font-weight: 700; 
    color: #64748b; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

/* DRAG & DROP UI */
.draggable-item { cursor: grab; }
.draggable-item:active { cursor: grabbing; }
.dragging { 
    opacity: 0.4; 
    border: 2px dashed var(--accent) !important; 
    background: #f5f3ff !important; 
}

/* PREVIEW CONTAINER */
.preview-area { 
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px); 
    background-size: 20px 20px; 
}

/* PAGE STYLES */
.a4-page { 
    width: var(--a4-width); 
    min-height: var(--a4-height); 
    background: white; 
    /* Margins handled by container/flex on mobile */
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.25); 
    position: relative; 
    overflow: visible; 
    --scale-factor: 1;
    --spacing-factor: 1.4;
    font-size: calc(10.5pt * var(--scale-factor));
    line-height: var(--spacing-factor);
    font-family: var(--main-font); 
    
    /* Ensure no transform origin issues on the page itself */
    transform-origin: top left;
}

/* VISUAL PAGE BREAK INDICATOR */
.page-break-marker {
    position: absolute;
    left: -20px;
    width: calc(100% + 40px);
    height: 10px;
    background: repeating-linear-gradient(
        45deg,
        #e2e8f0,
        #e2e8f0 10px,
        #cbd5e1 10px,
        #cbd5e1 20px
    );
    border-top: 1px dashed #64748b;
    border-bottom: 1px dashed #64748b;
    z-index: 50;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-break-marker::after {
    content: "PAGE BREAK";
    background: #64748b;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}

/* DYNAMIC SCALING FIXES */
#resume-canvas p, #resume-canvas div, #resume-canvas span, #resume-canvas li {
    font-size: inherit;
    line-height: inherit;
}
#resume-canvas h1 { font-size: 2.5em; line-height: 1.1; font-weight: 800; }
#resume-canvas h2 { font-size: 1.5em; font-weight: 700; }
#resume-canvas h3 { font-size: 1.15em; font-weight: 700; }
#resume-canvas .text-tiny { font-size: 0.85em; }
#resume-canvas .section-title { font-size: 0.9em; font-weight: 700; letter-spacing: 0.1em; }

.overflow-warning { display: none; }

/* RICHTEXT TOOLBAR */
.rt-toolbar { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; flex-wrap: wrap;}
.rt-btn { 
    padding: 2px 8px; 
    min-width: 24px;
    font-size: 10px; 
    background: #f1f5f9; 
    border: 1px solid #e2e8f0; 
    border-radius: 4px; 
    font-weight: bold; 
    color: #64748b; 
    cursor: pointer; 
}
.rt-btn:hover { background: #e2e8f0; color: #1e293b; }
.magic-btn { color: #8b5cf6; border-color: #ddd6fe; background: #f5f3ff; }
.magic-btn:hover { background: #ede9fe; color: #7c3aed; }

/* UTILS */
.hide-empty:empty { display: none !important; }
b, strong { font-weight: 700; }
i, em { font-style: italic; }

.photo-preview { 
    width: 50px; 
    height: 50px; 
    object-fit: cover; 
    border-radius: 50%; 
    border: 2px solid #e2e8f0; 
    display: block; 
    margin-top: 5px; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* PRINT STYLES - REVISED FOR PERFECT MARGINS */
@media print {
    @page { margin: 0; size: auto; }
    body { 
        margin: 0; padding: 0; background: white; 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
        height: auto;
        overflow: visible;
    }
    .preview-area { 
        padding: 0 !important; margin: 0 !important; display: block !important; 
        background: white; height: auto; overflow: visible; width: 100%;
        position: static;
        transform: none !important; /* Reset any JS scaling */
    }
    /* Hide Sidebar and UI explicitly */
    #sidebar, #atsModal, #writerModal, .page-break-marker, .rt-toolbar, .overflow-warning { display: none !important; }
    /* Reset JS Scaling Wrapper */
    #canvas-wrapper { transform: none !important; }

    .a4-page { 
        margin: 0 !important; padding: 0 !important; box-shadow: none !important; 
        width: 100% !important; height: auto !important; border: none !important; 
        background: white; transform: none !important;
    }
    .break-inside-avoid { break-inside: avoid; page-break-inside: avoid; }
    main { display: block !important; padding: 0 !important; }
}