/* Resume Builder — layout, form widgets, template gallery, and 10 print templates */

.resume-builder .rb-templates { margin-bottom: 1.25rem; }
.rb-templates-label, .rb-preview-label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .5rem; color: var(--text-muted, #555); }
.rb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.rb-template-swatch {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .5rem .35rem; border-radius: .5rem; border: 1px solid var(--border-strong, #e2e8f0); background: var(--bg-card, #fff);
    font-size: .75rem; cursor: pointer; color: var(--text, #333); transition: border-color .15s, box-shadow .15s;
}
.rb-template-swatch:hover { border-color: var(--primary, #94a3b8); }
.rb-template-swatch[aria-pressed="true"] { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px rgba(0,174,239,.22); font-weight: 600; }
.rb-swatch { display: block; width: 100%; height: 44px; border-radius: .35rem; background: #f1f5f9; position: relative; overflow: hidden; }
.rb-swatch::before, .rb-swatch::after { content: ""; position: absolute; left: 8px; right: 8px; height: 4px; background: #cbd5e1; border-radius: 2px; }
.rb-swatch::before { top: 8px; }
.rb-swatch::after { top: 16px; width: 60%; }
.rb-swatch-modern { background: linear-gradient(135deg,#eff6ff,#dbeafe); }
.rb-swatch-modern::before, .rb-swatch-modern::after { background: #2563eb; }
.rb-swatch-classic { background: #fdfdfb; }
.rb-swatch-classic::before, .rb-swatch-classic::after { background: #1f2937; }
.rb-swatch-minimal { background: #ffffff; }
.rb-swatch-minimal::before, .rb-swatch-minimal::after { background: #94a3b8; }
.rb-swatch-executive { background: #f8fafc; }
.rb-swatch-executive::before { background: #0f172a; }
.rb-swatch-executive::after { background: #b45309; }
.rb-swatch-creative { background: linear-gradient(135deg,#fdf2f8,#fce7f3); }
.rb-swatch-creative::before, .rb-swatch-creative::after { background: #db2777; }
.rb-swatch-sidebar::before { display:none; }
.rb-swatch-sidebar { background: linear-gradient(90deg,#0f172a 34%,#f8fafc 34%); }
.rb-swatch-sidebar::after { top: 18px; left: 12px; width: 16px; background: #38bdf8; }
.rb-swatch-technical { background: #f0fdf4; }
.rb-swatch-technical::before, .rb-swatch-technical::after { background: #15803d; }
.rb-swatch-elegant { background: #faf9f7; }
.rb-swatch-elegant::before, .rb-swatch-elegant::after { background: #78716c; }
.rb-swatch-compact { background: #f8fafc; }
.rb-swatch-compact::before, .rb-swatch-compact::after { background: #334155; height: 3px; }
.rb-swatch-bold { background: linear-gradient(135deg,#4c1d95,#7c3aed); }
.rb-swatch-bold::before, .rb-swatch-bold::after { background: #fff; }

.rb-layout { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.18fr); gap: 1.5rem; align-items: start; min-width: 0; }
.rb-form-col, .rb-preview-col { min-width: 0; }
@media (max-width: 900px) { .rb-layout { grid-template-columns: minmax(0,1fr); } .rb-preview-sticky { position: static; } }

.rb-section { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-strong, #eef1f5); }
.rb-section:last-of-type { border-bottom: none; }
.rb-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; color: var(--text, #111); }
.rb-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.rb-section-head .rb-section-title { margin-bottom: 0; }
.rb-optional { font-weight: 400; color: var(--text-dim, #94a3b8); font-size: .8rem; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }

.rb-photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rb-photo-preview {
    width: 64px; height: 64px; border-radius: 50%; background-color: var(--bg-soft, #f1f5f9); background-size: cover; background-position: center; background-repeat: no-repeat;
    border: 1px solid var(--border-strong, #e2e8f0); flex-shrink: 0;
}
.rb-photo-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.rb-entry-list { display: flex; flex-direction: column; gap: .75rem; }
.rb-entry { position: relative; padding: .85rem .85rem .25rem; background: var(--bg-elevated, #f8fafc); border: 1px solid var(--border-strong, #e2e8f0); border-radius: .5rem; }
.rb-entry .form-group label { color: var(--text-muted, #555); }
.rb-entry-remove {
    position: absolute; top: .4rem; right: .4rem; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--border-strong, transparent); background: var(--bg-card, #fff); color: var(--text-muted, #64748b); cursor: pointer; font-size: 1rem; line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.rb-entry-remove:hover { background: rgba(248,113,113,.15); color: var(--error, #b91c1c); border-color: var(--error, #b91c1c); }
.rb-entry-inline { display: flex; gap: .5rem; align-items: center; padding: .5rem .85rem; }
.rb-entry-inline input { margin: 0; }
.rb-entry-inline .rb-entry-remove { position: static; margin-left: auto; }

.rb-tag-input { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem; border: 1px solid var(--border-strong, #d7dee6); border-radius: .5rem; background: var(--bg-soft, #fff); }
.rb-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.rb-tag { display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,174,239,.16); color: var(--brand-blue-light, #1d4ed8); border-radius: 999px; padding: .25rem .65rem; font-size: .82rem; }
.rb-tag button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; }
.rb-tag-field { border: none; outline: none; flex: 1; min-width: 140px; padding: .3rem .2rem; font-size: .9rem; background: transparent; color: var(--text, #111); }

.rb-actions { margin-top: .5rem; }
.rb-autosave-note { font-size: .78rem; color: var(--text-dim, #94a3b8); margin: .5rem 0 0; }

.rb-preview-sticky { position: sticky; top: 1rem; }
.rb-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rb-preview-head .rb-preview-label { margin-bottom: 0; }
.rb-zoom-controls { display: flex; align-items: center; gap: .35rem; }
.rb-zoom-btn {
    width: 26px; height: 26px; border-radius: .35rem; border: 1px solid var(--border-strong, #e2e8f0);
    background: var(--bg-card, #fff); color: var(--text, #333); cursor: pointer; font-size: .9rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.rb-zoom-btn:hover { border-color: var(--primary, #94a3b8); }
.rb-zoom-pct { font-size: .78rem; color: var(--text-dim, #94a3b8); min-width: 3.2em; text-align: center; }

.rb-page-nav { display: flex; align-items: center; justify-content: center; gap: .85rem; margin-bottom: .6rem; }
.rb-page-label { font-size: .82rem; color: var(--text-muted, #555); font-weight: 600; min-width: 8em; text-align: center; }

.rb-preview-frame {
    border: 1px solid var(--border-strong, #e2e8f0); border-radius: .6rem; overflow: hidden;
    height: min(82vh, 920px); max-height: 82vh;
    background: var(--bg-soft, #eef1f5); padding: .85rem; display: flex; justify-content: center; align-items: center;
}
.rb-preview-frame.is-zoomed { overflow: auto; align-items: flex-start; }
.rb-preview-page-wrap {
    flex-shrink: 0; overflow: hidden; position: relative;
}
.rb-preview {
    background: #fff; color: #111; width: 816px; height: 1056px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.25); transform-origin: top left; flex-shrink: 0;
    display: flex; flex-direction: column;
}
.rb-preview > .rb-tpl { flex: 1 1 auto; width: 100%; min-height: 100%; box-sizing: border-box; }
.rb-tpl-cont-note { font-size: .78rem; color: #888; font-style: italic; margin-bottom: .5rem; }
.rb-tpl-cont-note span { font-weight: 400; }
.rb-tpl-band-slim { padding: .75rem 2.25rem !important; }
.rb-tpl-band-slim .rb-tpl-cont-note { color: #ede9fe; margin-bottom: 0; }

@media (max-width: 900px) {
    .rb-preview-frame { height: min(70vh, 720px); max-height: 70vh; padding: .65rem; }
}
@media (max-width: 560px) {
    .rb-template-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .4rem; }
    .rb-swatch { height: 34px; }
    .rb-photo-row { flex-wrap: wrap; }
    .rb-entry-inline { flex-wrap: wrap; }
    .rb-entry-inline .rb-entry-remove { margin-left: 0; }
    .rb-actions { flex-direction: column; align-items: stretch; }
    .rb-actions .btn { width: 100%; }
    .rb-preview-frame { padding: .5rem; border-radius: .4rem; }
}

/* ============ Shared print-template resets ============ */
.rb-preview * { box-sizing: border-box; }
.rb-preview h1, .rb-preview h2, .rb-preview h3, .rb-preview p, .rb-preview ul { margin: 0; }
.rb-preview ul { padding-left: 1.1em; }
.rb-tpl { padding: 2rem 2.25rem; }
.rb-tpl-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.rb-tpl-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rb-tpl-name { font-size: 1.7rem; font-weight: 700; margin: 0 0 .15rem; }
.rb-tpl-title { font-size: 1.02rem; margin: 0 0 .35rem; }
.rb-tpl-contact { font-size: .82rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.rb-tpl-section { margin-top: 1.15rem; }
.rb-tpl-h2 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: .5rem; }
.rb-tpl-role { margin-bottom: .75rem; }
.rb-tpl-role-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .95rem; }
.rb-tpl-role-sub { font-size: .85rem; color: #555; margin: .1rem 0 .3rem; }
.rb-tpl-role ul { font-size: .88rem; line-height: 1.5; }
.rb-tpl-skills { display: flex; flex-wrap: wrap; gap: .4rem; }
.rb-tpl-skill { font-size: .78rem; padding: .18rem .6rem; border-radius: 999px; }
.rb-tpl-summary { font-size: .9rem; line-height: 1.55; }

/* --- 1. Modern --- */
.rb-tpl-modern .rb-tpl-name { color: #1e3a8a; }
.rb-tpl-modern .rb-tpl-title { color: #2563eb; font-weight: 600; }
.rb-tpl-modern .rb-tpl-h2 { color: #2563eb; border-bottom: 2px solid #dbeafe; padding-bottom: .25rem; }
.rb-tpl-modern .rb-tpl-skill { background: #eff6ff; color: #1d4ed8; }
.rb-tpl-modern { font-family: "Segoe UI", Arial, sans-serif; }

/* --- 2. Classic --- */
.rb-tpl-classic { font-family: Georgia, "Times New Roman", serif; }
.rb-tpl-classic .rb-tpl-head { flex-direction: column; align-items: flex-start; text-align: left; }
.rb-tpl-classic .rb-tpl-name { text-align: center; width: 100%; }
.rb-tpl-classic .rb-tpl-title, .rb-tpl-classic .rb-tpl-contact { text-align: center; width: 100%; justify-content: center; }
.rb-tpl-classic .rb-tpl-h2 { border-bottom: 1px solid #333; text-transform: uppercase; }
.rb-tpl-classic .rb-tpl-skill { background: none; border: 1px solid #999; }

/* --- 3. Minimal --- */
.rb-tpl-minimal { font-family: "Segoe UI", Arial, sans-serif; }
.rb-tpl-minimal .rb-tpl-name { font-weight: 300; letter-spacing: .02em; }
.rb-tpl-minimal .rb-tpl-title { color: #64748b; }
.rb-tpl-minimal .rb-tpl-h2 { color: #0f172a; border: none; font-weight: 600; }
.rb-tpl-minimal .rb-tpl-skill { background: #f1f5f9; color: #334155; }
.rb-tpl-minimal .rb-tpl-section { border-top: none; }

/* --- 4. Executive --- */
.rb-tpl-executive { font-family: "Cambria", Georgia, serif; }
.rb-tpl-executive .rb-tpl-name { color: #0f172a; }
.rb-tpl-executive .rb-tpl-title { color: #b45309; font-weight: 700; }
.rb-tpl-executive .rb-tpl-h2 { color: #0f172a; border-bottom: 2px solid #b45309; display: inline-block; }
.rb-tpl-executive .rb-tpl-skill { background: #0f172a; color: #fff; }

/* --- 5. Creative --- */
.rb-tpl-creative { font-family: "Segoe UI", Arial, sans-serif; background: linear-gradient(180deg,#fdf2f8,#ffffff 140px); }
.rb-tpl-creative .rb-tpl-name { color: #9d174d; }
.rb-tpl-creative .rb-tpl-title { color: #db2777; font-weight: 600; }
.rb-tpl-creative .rb-tpl-h2 { color: #fff; background: #db2777; padding: .25rem .6rem; border-radius: .3rem; display: inline-block; }
.rb-tpl-creative .rb-tpl-skill { background: #fce7f3; color: #9d174d; }
.rb-tpl-creative .rb-tpl-photo { border: 3px solid #db2777; }

/* --- 6. Sidebar (two-column) --- */
.rb-tpl-sidebar { padding: 0; display: grid; grid-template-columns: 220px minmax(0,1fr); font-family: "Segoe UI", Arial, sans-serif; align-items: stretch; }
.rb-tpl-sidebar .rb-tpl-side { background: #0f172a; color: #e2e8f0; padding: 1.75rem 1.25rem; min-height: 100%; }
.rb-tpl-sidebar .rb-tpl-side .rb-tpl-photo { margin-bottom: .75rem; }
.rb-tpl-sidebar .rb-tpl-side .rb-tpl-h2 { color: #38bdf8; border-bottom: 1px solid #334155; padding-bottom: .25rem; }
.rb-tpl-sidebar .rb-tpl-side .rb-tpl-skill { background: #1e293b; color: #e2e8f0; }
.rb-tpl-sidebar .rb-tpl-side a, .rb-tpl-sidebar .rb-tpl-side .rb-tpl-contact { color: #cbd5e1; }
.rb-tpl-sidebar .rb-tpl-main { padding: 1.75rem 1.5rem; min-width: 0; }
.rb-tpl-sidebar .rb-tpl-main .rb-tpl-name { color: #0f172a; }
.rb-tpl-sidebar .rb-tpl-main .rb-tpl-title { color: #0284c7; }
.rb-tpl-sidebar .rb-tpl-main .rb-tpl-h2 { border-bottom: 2px solid #e2e8f0; color: #0f172a; }

/* --- 7. Technical --- */
.rb-tpl-technical { font-family: "Consolas", "Courier New", monospace; }
.rb-tpl-technical .rb-tpl-name { color: #14532d; }
.rb-tpl-technical .rb-tpl-title { color: #15803d; }
.rb-tpl-technical .rb-tpl-h2 { color: #15803d; }
.rb-tpl-technical .rb-tpl-h2::before { content: "// "; }
.rb-tpl-technical .rb-tpl-skill { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; font-family: inherit; }

/* --- 8. Elegant --- */
.rb-tpl-elegant { font-family: "Palatino Linotype", Georgia, serif; background: #faf9f7; }
.rb-tpl-elegant .rb-tpl-name { color: #292524; letter-spacing: .03em; }
.rb-tpl-elegant .rb-tpl-title { color: #78716c; font-style: italic; }
.rb-tpl-elegant .rb-tpl-h2 { color: #78716c; letter-spacing: .12em; }
.rb-tpl-elegant .rb-tpl-skill { background: none; border: 1px solid #d6d3d1; color: #57534e; }

/* --- 9. Compact --- */
.rb-tpl-compact { font-family: Arial, sans-serif; font-size: .92em; }
.rb-tpl-compact.rb-tpl { padding: 1.25rem 1.5rem; }
.rb-tpl-compact .rb-tpl-head { margin-bottom: .5rem; }
.rb-tpl-compact .rb-tpl-name { font-size: 1.35rem; }
.rb-tpl-compact .rb-tpl-section { margin-top: .6rem; }
.rb-tpl-compact .rb-tpl-h2 { border-bottom: 1px solid #334155; margin-bottom: .3rem; }
.rb-tpl-compact .rb-tpl-role { margin-bottom: .4rem; }
.rb-tpl-compact .rb-tpl-skill { background: #f1f5f9; }

/* --- 10. Bold --- */
.rb-tpl-bold { font-family: "Segoe UI", Arial, sans-serif; padding: 0; display: flex; flex-direction: column; }
.rb-tpl-bold .rb-tpl-band { background: linear-gradient(135deg,#4c1d95,#7c3aed); color: #fff; padding: 1.75rem 2.25rem; display: flex; align-items: center; gap: 1.1rem; }
.rb-tpl-bold .rb-tpl-band .rb-tpl-name { color: #fff; }
.rb-tpl-bold .rb-tpl-band .rb-tpl-title { color: #ede9fe; }
.rb-tpl-bold .rb-tpl-band .rb-tpl-contact { color: #ddd6fe; }
.rb-tpl-bold .rb-tpl-photo { border: 3px solid #fff; }
.rb-tpl-bold .rb-tpl-body { padding: 1.5rem 2.25rem; flex: 1 1 auto; }
.rb-tpl-bold .rb-tpl-h2 { color: #6d28d9; border-bottom: 2px solid #ede9fe; }
.rb-tpl-bold .rb-tpl-skill { background: #6d28d9; color: #fff; }

@media print {
    .rb-templates, .rb-form-col, .rb-preview-head, .rb-page-nav, .rb-actions, .tool-status { display: none !important; }
    .rb-layout { display: block; }
    .rb-preview-frame { border: none; padding: 0; background: none; max-height: none; overflow: visible; display: block; }
    .rb-preview-page-wrap { width: auto !important; height: auto !important; }
    .rb-preview { box-shadow: none; width: 100%; height: auto !important; overflow: visible !important; max-width: none; transform: none !important; }
}