/**
 * CV Maker Pro - Emergency UI Bug Fix Stylesheet (cv-builder-fix.css)
 * 
 * Specifically addresses:
 * 1. Profile Photo AspectRatio & ObjectFit Distortion (no squishing/stretching, 1:1 ratio)
 * 2. CV Stepper / Tabs Horizontal Scroll & Collision Prevention (no wrapping, no overlap)
 * 3. Layout Grid Stabilization & A4 Paper Container Reset (min-width: 0, responsive containment)
 */

/* ==========================================================================
   1. PROFIL FOTOĞRAFI YANLARDAN BASIKLIK SORUNU (AspectRatio & ObjectFit)
   ========================================================================== */

/* Form Builder Photo Uploader Container */
.cvm-photo-uploader-box {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 22px !important;
    box-sizing: border-box !important;
}

/* Photo Avatar Wrapper - strictly prevents shrinking / crushing */
.cvm-photo-avatar-wrap,
.cvm-photo-wrap,
.photo-wrap,
.oxford-photo-cell,
.header-photo-td {
    flex-shrink: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}

.cvm-photo-avatar-wrap,
.cvm-profile-photo-wrapper,
[data-photo-container="true"] {
    width: var(--cvm-photo-size, 94px);
    height: var(--cvm-photo-size, 94px);
    min-width: var(--cvm-photo-size, 94px);
    min-height: var(--cvm-photo-size, 94px);
    max-width: var(--cvm-photo-size, 94px);
    max-height: var(--cvm-photo-size, 94px);
    padding: 0 !important;
    border-radius: 50%;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background-color: #ffffff;
}

/* Profile Photo Image - Strict Concentric 100% Fill (No Inner Border Offset) */
.cvm-photo-avatar-img,
.cvm-profile-photo-img,
.cvm-photo-avatar-wrap > img,
.cvm-profile-photo-wrapper > img,
[data-photo-container="true"] > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    flex-shrink: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Scoped Circular Photo Avatar Box in Form Builder - Center Aligned */
.cvm-photo-avatar-box {
    position: relative !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    border-radius: 50% !important;
    border: 2px dashed #0072dd !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
}

.cvm-photo-avatar-box:hover {
    border-color: #005bb5 !important;
    background: #eff6ff !important;
    transform: scale(1.02) !important;
}

.cvm-photo-avatar-box #cvm-avatar-img,
.cvm-photo-avatar-box img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: none !important;
    outline: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* Template Live Preview Photos - Fixes Distortion in All 9 Templates */
.cvm-template img.photo-img,
.cvm-template img.photo,
.cvm-template img.oxford-photo-img,
.cvm-template .header-photo-td img,
.cvm-template .photo-wrap img,
.cvm-modern .photo-img,
.cvm-classic-oxford .oxford-photo-img,
.cvm-minimalist img.photo-img,
.cvm-minimalist .cvm-sidebar-photo img,
.cvm-creative .photo,
.cvm-compact img.photo-img,
.cvm-corporate img.photo-img,
.cvm-academic img.photo-img,
.cvm-grid img.photo-img,
.cvm-elegant img.photo-img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    flex-shrink: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Modern Template Header Table Cell Guard */
.cvm-modern .header-photo-td {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    padding-right: 16px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.cvm-modern .photo-img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 2.5px solid var(--primary, #2563eb) !important;
    box-sizing: border-box !important;
}

/* Oxford / Classic Template Photo Guard */
.cvm-classic-oxford .oxford-photo-cell {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    padding-right: 16px !important;
    vertical-align: top !important;
}

.cvm-classic-oxford .oxford-photo-img {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   2. CV ADIMLARI (STEPPER / TABS) ÜST ÜSTE BİNME VE TAŞMA DÜZELTMESİ
   ========================================================================== */

/* Horizontal Scrollable Stepper Navigation Container */
.cvm-stepper-pill-nav,
.cvm-stepper-nav,
.stepper-container,
.tabs-container,
#cvm-stepper-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f8fafc !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Webkit Scrollbar Styling for Clean UI */
.cvm-stepper-pill-nav::-webkit-scrollbar,
.cvm-stepper-nav::-webkit-scrollbar,
.stepper-container::-webkit-scrollbar,
.tabs-container::-webkit-scrollbar {
    height: 4px !important;
}

.cvm-stepper-pill-nav::-webkit-scrollbar-track,
.cvm-stepper-nav::-webkit-scrollbar-track {
    background: #f8fafc !important;
}

.cvm-stepper-pill-nav::-webkit-scrollbar-thumb,
.cvm-stepper-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
}

/* Individual Pill Buttons - Prevent Text Break and Flex Crushing */
.cvm-step-pill-btn,
.cvm-step-pill,
.tab-item,
.step-button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 15px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    user-select: none !important;
    text-decoration: none !important;
}

.cvm-step-pill-btn:hover,
.cvm-step-pill:hover,
.tab-item:hover,
.step-button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.cvm-step-pill-btn.active,
.cvm-step-pill.active,
.tab-item.active,
.step-button.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}


/* ==========================================================================
   3. EKRAN DÜZENİ VE A4 ÖNİZLEME STABİLİTESİ (Layout Reset & Grid Fix)
   ========================================================================== */

/* Main Builder Wrapper */
#cv-maker-builder-wrapper,
.cvm-builder-root {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Two-column Robust Grid */
.cvm-master-grid-container,
.main-wrapper,
#cv-maker-builder-wrapper .cvm-master-grid-container {
    display: grid !important;
    grid-template-columns: minmax(350px, 420px) 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 65px) !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Prevent Grid Item Blowout (min-width: 0 is mandatory for CSS grid children) */
.cvm-left-form-panel,
.cvm-right-preview-panel,
.form-panel,
.preview-panel,
#cvm-builder-left-panel,
#cvm-builder-right-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Left Form Column Scroll Behavior */
.cvm-left-form-panel {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: calc(100vh - 65px) !important;
    position: relative !important;
}

/* Right Live Preview Column */
.cvm-right-preview-panel {
    background: #eef2f6 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: calc(100vh - 65px) !important;
    position: relative !important;
}

/* A4 Viewport & Canvas Sheet Container */
.cvm-canvas-viewport {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: auto !important;
    padding: 28px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    background: #eef2f6 !important;
}

/* Live A4 Sheet Responsive Containment */
.cvm-a4-sheet-container,
#cv-printable-sheet,
.a4-sheet {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 2px !important;
    margin: 0 auto 40px auto !important;
    position: relative !important;
}

/* Preview Content Stage */
.cvm-preview-stage-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
    .cvm-master-grid-container,
    #cv-maker-builder-wrapper .cvm-master-grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        height: auto !important;
    }

    .cvm-left-form-panel,
    .cvm-right-preview-panel {
        height: auto !important;
        min-height: auto !important;
    }

    .cvm-right-preview-panel {
        min-height: 700px !important;
    }
}

/* ==========================================================================
   4. STEPPER VIEWS STRICT VISIBILITY TOGGLE (PREVENT STEP COLLAPSE / OVERLAP)
   ========================================================================== */
#cv-maker-builder-wrapper .cvm-step-view:not(.active),
.cvm-step-view:not(.active) {
    display: none !important;
}

#cv-maker-builder-wrapper .cvm-step-view.active,
.cvm-step-view.active {
    display: block !important;
    animation: cvmFadeIn 0.2s ease-out !important;
}

/* Stepper Pill Nav Strict Horizontal Bar */
#cv-maker-builder-wrapper .cvm-stepper-pill-nav,
.cvm-stepper-pill-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#cv-maker-builder-wrapper .cvm-step-pill-btn,
.cvm-step-pill-btn {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

#cv-maker-builder-wrapper .cvm-step-pill-btn.active,
.cvm-step-pill-btn.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

/* Stepper Footer Controls */
#cv-maker-builder-wrapper .cvm-master-stepper-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
}

#cv-maker-builder-wrapper .cvm-btn-step-next,
#cv-maker-builder-wrapper .cvm-btn-step-prev {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

#cv-maker-builder-wrapper .cvm-btn-step-next {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

#cv-maker-builder-wrapper .cvm-btn-step-prev {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Repeaters & Inputs */
#cv-maker-builder-wrapper .cvm-repeater-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
}

#cv-maker-builder-wrapper .cvm-repeater-inline {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

/* ==========================================================================
   4. ANTI-FOUC & PREVIEW WRAPPER STRICT OVERFLOW / TRANSITION LOCK
   ========================================================================== */
#cv-preview-container,
.cv-preview-container,
#cvm-preview-frame,
.cvm-a4-sheet-container,
#cvm-a4-sheet-container,
.cvm-preview-stage-content,
#cv-printable-sheet {
    overflow: hidden !important;
    contain: paint layout !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

#cv-preview-container *,
#cvm-preview-frame *,
.cvm-a4-sheet-container *,
#cvm-a4-sheet-container * {
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.cvm-template-transitioning,
[data-template-ready="false"],
.template-mounting,
.template-switching {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-template-ready="true"],
.template-mounted {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.15s !important;
}