/* ============================================
   RESUME ENGINE CSS - resume.css
   Supports both paginated (resume-builder-lib)
   and document (index.html) rendering modes.
   ============================================ */

/* ---------------------------------------------------- */
/* FLOATING CONTROL PANEL                               */
/* ---------------------------------------------------- */
.a4-resume-control-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255,255,255,0.4);
    max-width: 800px;
    margin: 0 auto 30px auto;
    box-sizing: border-box;
    position: sticky;
    top: 20px;
    z-index: 100;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.a4-resume-controls-left, .a4-resume-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.a4-resume-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--resume-primary, #0956fb);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(9, 86, 251, 0.2);
}
.a4-resume-btn:hover {
    background: #0640cc;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(9, 86, 251, 0.3);
}
.a4-resume-btn svg { width: 16px; height: 16px; fill: currentColor; }
.a4-resume-select {
    padding: 8px 32px 8px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.8);
    color: #334155;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.a4-resume-select:hover, .a4-resume-select:focus { border-color: var(--resume-primary, #0956fb); }

/* ---------------------------------------------------- */
/* PAGINATED MODE - A4 Page & Wrapper                   */
/* ---------------------------------------------------- */
.a4-pages-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    counter-reset: a4-page;
}
.a4-resume-page {
    width: 210mm;
    height: 297mm;
    background: #ffffff;
    box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1), 0 8px 16px -8px rgba(0,0,0,0.05);
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    color: #1e293b;
    font-size: 10pt;
    line-height: 1.4;
    counter-increment: a4-page;
    --resume-primary:       var(--primary,        #0D9488);
    --resume-secondary:     var(--secondary,      #6B7280);
    --resume-text:          var(--text-main,      #334155);
    --resume-item-title:    var(--text-main,      #0f172a);
    --resume-section-title: var(--text-main,      #1e293b);
    --resume-section-bg:    var(--surface,        #f0fdfa);
    --resume-header-accent: var(--primary-hover,  #0369a1);
}

/* Page number label - visible in browser, hidden in print */
.a4-resume-page::after {
    content: "Page " counter(a4-page);
    position: absolute;
    bottom: -26px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Grid for page mode - flex:1 fills the remaining page height */
.a4-resume-page .a4-resume-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
}
/* Fix: classes are on the same element, so use compound selector (no space) */
.a4-resume-page.a4-resume-theme-modern .a4-resume-grid {
    grid-template-columns: 2.2fr 1fr;
    grid-template-rows: 1fr;
}

/* Columns in page mode */
.a4-resume-page .a4-resume-col-main,
.a4-resume-page .a4-resume-col-side {
    overflow: hidden;
    box-sizing: border-box;
    min-height: 0;
}

/* ---------------------------------------------------- */
/* SHARED - Strip bottom margin from last element       */
/* ---------------------------------------------------- */
.a4-resume-col-main > *:last-child,
.a4-resume-col-side > *:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------- */
/* SHARED - Common Components                           */
/* ---------------------------------------------------- */
.a4-resume-header { margin-bottom: 12px; }
.a4-resume-header-main { flex: 1; }
.a4-resume-name { margin: 0; font-size: 22pt; font-weight: 700; line-height: 1.1; color: #0f172a; letter-spacing: -0.02em; }
.a4-resume-title { margin: 2px 0; font-size: 11.5pt; font-weight: 500; color: var(--resume-primary); }
.a4-resume-contact { display: flex; flex-wrap: wrap; gap: 10px; font-size: 9pt; margin-top: 6px; color: var(--resume-secondary); }
.a4-resume-contact-item { display: flex; align-items: center; gap: 4px; }
.a4-resume-contact-item svg { width: 12px; height: 12px; fill: currentColor; opacity: 0.8; }

.a4-resume-section-title {
    font-size: 11.5pt;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--resume-section-title);
    font-weight: 700;
    page-break-after: avoid;
}

.a4-resume-item { margin-bottom: 12px; }
.a4-resume-item-header { display: flex; justify-content: space-between; align-items: baseline; }
.a4-resume-item-title { font-weight: 600; margin: 0; font-size: 10.5pt; color: var(--resume-item-title); }
.a4-resume-item-date { font-size: 9pt; color: var(--resume-secondary); white-space: nowrap; font-weight: 500; }
.a4-resume-item-subtitle { font-style: normal; margin: 1px 0 3px 0; font-size: 10pt; font-weight: 500; color: var(--resume-secondary); }
.a4-resume-item-bullets { margin-left: 10px; padding-left: 16px; font-size: 10pt; color: var(--resume-text); }

.a4-resume-text-block { margin-bottom: 12px; }
.a4-resume-skills-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.a4-resume-skill-badge { padding: 2px 8px; border-radius: 12px; background: #f1f5f9; color: #334155; font-size: 9pt; font-weight: 500; border: 1px solid #e2e8f0; }
.a4-resume-languages-list { margin-bottom: 12px; }
.a4-resume-language-item { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.a4-resume-language-item:last-child { border-bottom: none; }
.a4-resume-language-name { font-weight: 500; font-size: 9pt; color: #1e293b; }
.a4-resume-language-fluency { font-size: 8.5pt; color: var(--resume-secondary); }

/* ---------------------------------------------------- */
/* TEMPLATE PADDINGS (page mode)                        */
/* ---------------------------------------------------- */
.a4-resume-theme-classic.a4-resume-page .a4-resume-col-main,
.a4-resume-theme-classic-colored.a4-resume-page .a4-resume-col-main,
.a4-resume-theme-professional.a4-resume-page .a4-resume-col-main {
    padding: 12mm 14mm;
}
.a4-resume-theme-compact.a4-resume-page .a4-resume-col-main {
    padding: 10mm 12mm;
}
.a4-resume-theme-gulf-pro.a4-resume-page .a4-resume-col-main {
    padding: 12mm 14mm;
}
.a4-resume-theme-modern.a4-resume-page .a4-resume-col-main {
    padding: 10mm 8mm 10mm 14mm;
}
.a4-resume-theme-modern.a4-resume-page .a4-resume-col-side {
    padding: 5mm;
    background: var(--resume-section-bg);
    border-left: 1px solid #e2e8f0;
}
.a4-resume-theme-modern.a4-resume-page .a4-resume-header {
    padding: 12mm 14mm;
    background: linear-gradient(135deg, var(--resume-primary) 0%, var(--resume-header-accent) 100%);
    color: white;
    margin-bottom: 0;
}

/* ---------------------------------------------------- */
/* TEMPLATE: COMPACT                                    */
/* ---------------------------------------------------- */
.a4-resume-theme-compact {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9.5pt;
}
.a4-resume-theme-compact .a4-resume-item { margin-bottom: 4px; }
.a4-resume-theme-compact .a4-resume-item-bullets { font-size: 9pt; }
.a4-resume-theme-compact .a4-resume-name { font-size: 18pt; }
.a4-resume-theme-compact .a4-resume-section-title {
    font-size: 10.5pt;
    border-bottom: 2px solid var(--resume-primary);
    padding-bottom: 3px;
    margin-bottom: 6px;
}
.a4-resume-theme-compact .a4-resume-item + .a4-resume-item {
    border-top: 1px dotted var(--resume-primary);
    padding-top: 6px;
    margin-top: 4px;
}
.a4-resume-theme-compact .a4-resume-skill-badge { padding: 2px 6px; font-size: 9pt; border-radius: 4px; }

/* ---------------------------------------------------- */
/* TEMPLATE: CLASSIC                                    */
/* ---------------------------------------------------- */
.a4-resume-theme-classic { font-family: "Georgia", "Times New Roman", serif; color: #111; }
.a4-resume-theme-classic .a4-resume-name { font-family: "Georgia", serif; font-size: 24pt; font-weight: normal; }
.a4-resume-theme-classic .a4-resume-title { color: var(--resume-secondary); font-weight: normal; font-size: 12pt; font-style: italic; }
.a4-resume-theme-classic .a4-resume-header { text-align: center; border-bottom: 1px solid var(--resume-header-accent); padding-bottom: 8px; margin-bottom: 12px; }
.a4-resume-theme-classic .a4-resume-contact { justify-content: center; color: var(--resume-secondary); }
.a4-resume-theme-classic .a4-resume-section-title { border-bottom: 1px solid var(--resume-header-accent); padding-bottom: 2px; color: var(--resume-section-title); font-weight: bold; }
.a4-resume-theme-classic .a4-resume-item-title { color: var(--resume-item-title); font-weight: bold; }
.a4-resume-theme-classic .a4-resume-item-subtitle { font-style: italic; color: var(--resume-secondary); font-weight: normal; }
.a4-resume-theme-classic .a4-resume-skill-badge { background: none; padding: 0; border: none; font-weight: normal; color: var(--resume-text); }
.a4-resume-theme-classic .a4-resume-skills-list { gap: 0; }
.a4-resume-theme-classic .a4-resume-skill-badge::after { content: ", "; }
.a4-resume-theme-classic .a4-resume-skill-badge:last-child::after { content: ""; }

/* ---------------------------------------------------- */
/* TEMPLATE: CLASSIC COLORED                            */
/* ---------------------------------------------------- */
.a4-resume-theme-classic-colored { font-family: "Georgia", "Times New Roman", serif; }
.a4-resume-theme-classic-colored .a4-resume-name { color: var(--resume-primary); font-family: "Georgia", serif; font-size: 24pt; font-weight: normal; }
.a4-resume-theme-classic-colored .a4-resume-title { color: var(--resume-secondary); font-style: italic; font-weight: normal; font-size: 12pt; }
.a4-resume-theme-classic-colored .a4-resume-header { text-align: center; border-bottom: 2px solid var(--resume-primary); padding-bottom: 8px; margin-bottom: 12px; }
.a4-resume-theme-classic-colored .a4-resume-contact { justify-content: center; }
.a4-resume-theme-classic-colored .a4-resume-section-title { border-bottom: 1px solid var(--resume-primary); padding-bottom: 2px; color: var(--resume-primary); }
.a4-resume-theme-classic-colored .a4-resume-item-subtitle { font-style: italic; font-weight: normal; }
.a4-resume-theme-classic-colored .a4-resume-skill-badge { background: none; padding: 0; border: none; font-weight: normal; color: var(--resume-text); }
.a4-resume-theme-classic-colored .a4-resume-skills-list { gap: 0; }
.a4-resume-theme-classic-colored .a4-resume-skill-badge::after { content: ", "; }
.a4-resume-theme-classic-colored .a4-resume-skill-badge:last-child::after { content: ""; }

/* ---------------------------------------------------- */
/* TEMPLATE: PROFESSIONAL                               */
/* ---------------------------------------------------- */
.a4-resume-theme-professional { font-family: "Helvetica Neue", Arial, sans-serif; }
.a4-resume-theme-professional .a4-resume-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--resume-primary); padding-bottom: 8px; margin-bottom: 14px; }
.a4-resume-theme-professional .a4-resume-contact { flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.a4-resume-theme-professional .a4-resume-section-title { background: var(--resume-section-bg); padding: 4px 10px; border-left: 4px solid var(--resume-primary); border-radius: 0 4px 4px 0; color: var(--resume-section-title); }
.a4-resume-theme-professional .a4-resume-skill-badge { background: rgba(9, 86, 251, 0.08); border: 1px solid rgba(9, 86, 251, 0.2); color: var(--resume-item-title); }

/* ---------------------------------------------------- */
/* TEMPLATE: MODERN (2-COLUMN)                          */
/* ---------------------------------------------------- */
.a4-resume-theme-modern { font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif; }
.a4-resume-theme-modern .a4-resume-name { color: #ffffff; }
.a4-resume-theme-modern .a4-resume-title { color: #e2e8f0; font-weight: 400; }
.a4-resume-theme-modern .a4-resume-contact { color: #f8fafc; opacity: 0.9; }
.a4-resume-theme-modern .a4-resume-section-title { border-bottom: 2px solid var(--resume-primary); display: block; width: fit-content; padding-bottom: 2px; margin-bottom: 10px; }
.a4-resume-theme-modern .a4-resume-item-title { color: var(--resume-item-title); }
.a4-resume-theme-modern .a4-resume-skill-badge { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }

/* Modern side column - 2-up skill grid, compact achievements */
.a4-resume-theme-modern .a4-resume-col-side .a4-resume-skills-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.a4-resume-theme-modern .a4-resume-col-side .a4-resume-skill-badge {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    font-size: 9pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a4-resume-theme-modern .a4-resume-col-side .a4-resume-item-bullets {
    padding-left: 12px;
    font-size: 9pt;
}
.a4-resume-theme-modern .a4-resume-col-side .a4-resume-item-bullets li {
    margin-bottom: 3px;
    line-height: 1.35;
}

/* ---------------------------------------------------- */
/* GULF PRO EDITOR - dummy placeholder highlight        */
/* ---------------------------------------------------- */
.gulf-dummy-field {
    border-color: #f87171 !important;
    background-color: #fff5f5 !important;
    color: #dc2626 !important;
    outline-color: #f87171 !important;
}
.gulf-dummy-field:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* ---------------------------------------------------- */
/* TEMPLATE: GULF PRO                                   */
/* Single-column, clean, spacious - GCC hiring norms   */
/* ---------------------------------------------------- */
.a4-resume-theme-gulf-pro {
    font-family: "Calibri", "Helvetica Neue", Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: var(--resume-text);
}

/* Name: prominent but not oversized */
.a4-resume-theme-gulf-pro .a4-resume-name {
    font-size: 21pt;
    font-weight: 700;
    color: var(--resume-primary);
    letter-spacing: -0.01em;
}

/* Designation: calm, secondary */
.a4-resume-theme-gulf-pro .a4-resume-title {
    font-size: 11pt;
    font-weight: 400;
    color: var(--resume-secondary);
    font-style: normal;
}

/* Section headings: uppercase + gold bottom rule, spacious above */
.a4-resume-theme-gulf-pro .a4-resume-section-title {
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--resume-primary);
    border-bottom: 1.5px solid var(--resume-secondary);
    padding-bottom: 3px;
    margin-top: 14px;
    margin-bottom: 9px;
    background: none;           /* override professional-template pill */
    padding-left: 0;
    border-left: none;
    border-radius: 0;
}

/* Items: comfortable vertical rhythm */
.a4-resume-theme-gulf-pro .a4-resume-item {
    margin-bottom: 13px;
}
.a4-resume-theme-gulf-pro .a4-resume-item-title {
    font-size: 10.5pt;
    font-weight: 700;
    color: var(--resume-item-title);
}
.a4-resume-theme-gulf-pro .a4-resume-item-subtitle {
    font-size: 10pt;
    font-style: italic;
    color: var(--resume-secondary);
    font-weight: 400;
}
.a4-resume-theme-gulf-pro .a4-resume-item-date {
    font-size: 9pt;
    color: var(--resume-secondary);
}
.a4-resume-theme-gulf-pro .a4-resume-item-bullets {
    font-size: 9.5pt;
    color: var(--resume-text);
}
.a4-resume-theme-gulf-pro .a4-resume-item-bullets li {
    margin-bottom: 3px;
}

/* Skills: outline pill style */
.a4-resume-theme-gulf-pro .a4-resume-skill-badge {
    background: none;
    border: 1px solid var(--resume-primary);
    color: var(--resume-primary);
    font-size: 8.5pt;
    padding: 2px 9px;
}

/* Text block */
.a4-resume-theme-gulf-pro .a4-resume-text-block {
    font-size: 9.5pt;
    line-height: 1.55;
    color: var(--resume-text);
}

/* Languages */
.a4-resume-theme-gulf-pro .a4-resume-language-name {
    font-size: 9.5pt;
    font-weight: 600;
}
.a4-resume-theme-gulf-pro .a4-resume-language-fluency {
    font-size: 9pt;
}

/* ---------------------------------------------------- */
/* PRINT OPTIMIZATIONS                                  */
/* ---------------------------------------------------- */
@media print {
    @page { size: A4; margin: 0; }
    body, html { margin: 0; padding: 0; background: transparent; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .container { max-width: 100%; margin: 0; padding: 0; }
    .app-header, .a4-resume-control-panel { display: none !important; }
    .a4-pages-wrapper { display: block; gap: 0; padding: 0; }
    .a4-resume-page {
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        width: 210mm;
        height: 297mm;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .a4-resume-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }
    /* Hide page number label in print */
    .a4-resume-page::after { display: none !important; }
}

/* Responsive zoom-out for small screens */
@media screen and (max-width: 220mm) {
    .a4-resume-page { transform: scale(0.9); transform-origin: top center; margin-bottom: -10mm; }
    .a4-resume-control-panel { width: 100%; border-radius: 0; top: 0; }
}