/* ===== ENHANCV-STYLE CV PREVIEW - NO SCROLL BARS ===== */
/* Complete redesign to display CV at full natural size like app.enhancv.com */

.cv-preview-container {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    /* NO height constraints - let content determine size */
}

.cv-preview-content {
    position: relative;
    width: 100%;
    background: var(--preview-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    /* NO height or overflow constraints */
}

.preview-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* NO height or overflow constraints */
}

/* ===== IFRAME CONTAINER - ENHANCV STYLE ===== */
.cv-preview-iframe-wrapper {
    width: 100%;
    position: relative;
    background: #fff;
    /* NO height, overflow, or size constraints */
    /* Let iframe determine its own size naturally */
}

/* ===== IFRAME - NATURAL SIZING LIKE ENHANCV ===== */
.cv-preview-iframe {
    width: 100%;
    border: none;
    background: #fff;
    display: block;
    /* NO height constraints - will be set by JavaScript based on content */
    /* NO overflow constraints - content flows naturally */
}

/* ===== LOADING STATE ===== */
.cv-loading-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Only for loading state */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.cv-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

.cv-loading-state p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== CARD HEADER STYLES ===== */
.cv-preview-section {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-lg);
    /* NO height constraints */
}

.cv-preview-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-header-bg);
}

.cv-preview-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cv-preview-header .actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ===== CONTENT OVERFLOW PREVENTION ===== */
/* Prevent horizontal overflow in generated CV content */
.cv-container,
.cv-content,
.cv-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Ensure all CV elements respect container width */
.cv-container *,
.cv-content *,
.cv-main * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Handle tables and lists that might be too wide */
.cv-container table,
.cv-content table,
.cv-main table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}

.cv-container ul,
.cv-container ol,
.cv-content ul,
.cv-content ol,
.cv-main ul,
.cv-main ol {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
}

/* Handle long text content */
.cv-container p,
.cv-container div,
.cv-container span,
.cv-content p,
.cv-content div,
.cv-content span,
.cv-main p,
.cv-main div,
.cv-main span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* ===== ENHANCV-STYLE RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .cv-preview-container,
    .cv-preview-content,
    .preview-content,
    .cv-preview-iframe-wrapper,
    .cv-preview-iframe {
        /* Maintain natural sizing on mobile */
        width: 100%;
    }
    
    .cv-preview-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}