/* ─────────────────────────────────────────────────────────────
   Resume Builder — Glassmorphism design system
   Palette: primary #2563EB · secondary #7C3AED · accent #EC4899
   ───────────────────────────────────────────────────────────── */

:root {
    --color-primary:   #2563EB;
    --color-secondary: #7C3AED;
    --color-accent:    #EC4899;
    --glass-bg:        rgba(255, 255, 255, 0.62);
    --glass-border:    rgba(255, 255, 255, 0.55);
    --glass-shadow:    0 8px 32px rgba(15, 23, 42, 0.08);
}

body {
    background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #fdf4ff 100%);
    background-attachment: fixed;
}

/* Ambient animated gradient blobs (behind all glass) */
.bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .45; will-change: transform; }
.blob-1 { width: 480px; height: 480px; top: -140px; left: -100px;  background: #93c5fd; animation: drift 26s ease-in-out infinite; }
.blob-2 { width: 420px; height: 420px; top: 30%;  right: -140px;   background: #c4b5fd; animation: drift 32s ease-in-out infinite reverse; }
.blob-3 { width: 380px; height: 380px; bottom: -160px; left: 35%;  background: #f9a8d4; animation: drift 38s ease-in-out infinite; }

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.08); }
    66%      { transform: translate(-30px, 25px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
    .blob { animation: none !important; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Glass surfaces ─────────────────────────────────────────── */
.glass-nav {
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.glass-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(37, 99, 235, 0.14);
}

.glass-inset {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.75rem;
}

/* ── Navigation links ───────────────────────────────────────── */
.nav-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border-radius: .75rem;
    font-size: .875rem; font-weight: 600; color: #475569;
    transition: color .18s ease, background .18s ease;
    cursor: pointer;
}
.nav-link:hover { color: var(--color-primary); background: rgba(37, 99, 235, .08); }
.nav-link-active { color: var(--color-primary); background: rgba(37, 99, 235, .1); }

/* ── Admin table row actions ────────────────────────────────── */
.admin-action {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: .3rem .6rem; border-radius: .5rem;
    font-size: .75rem; font-weight: 600; cursor: pointer;
    color: #475569; background: rgba(148, 163, 184, .14);
    border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.admin-action:hover { background: rgba(37, 99, 235, .12); color: var(--color-primary); }
.admin-action-danger:hover { background: rgba(244, 63, 94, .12); color: #be123c; }
.admin-action:disabled:hover { background: rgba(148, 163, 184, .14); color: #475569; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.15rem; border-radius: .8rem;
    font-size: .875rem; font-weight: 600; cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    border: 1px solid transparent;
}
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 6px 18px rgba(37, 99, 235, .35);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(37, 99, 235, .45); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-secondary {
    color: var(--color-primary);
    background: rgba(255, 255, 255, .75);
    border-color: rgba(37, 99, 235, .25);
}
.btn-secondary:hover { background: #fff; border-color: rgba(37, 99, 235, .5); }

.btn-ghost { color: #475569; background: transparent; }
.btn-ghost:hover { background: rgba(15, 23, 42, .06); color: #0f172a; }

.btn-danger { color: #dc2626; background: rgba(220, 38, 38, .08); }
.btn-danger:hover { background: rgba(220, 38, 38, .15); }

/* ── Form fields ────────────────────────────────────────────── */
.field-label {
    display: block; margin-bottom: .3rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: #475569;
}
.field-input, .field-select, .field-textarea {
    width: 100%; padding: .55rem .8rem;
    border-radius: .65rem; border: 1px solid rgba(148, 163, 184, .45);
    background: rgba(255, 255, 255, .8);
    font-size: .875rem; color: #0f172a;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.field-textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }

/* ── Wizard steps ───────────────────────────────────────────── */
.step-tab {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .55rem .8rem; border-radius: .7rem;
    font-size: .82rem; font-weight: 600; color: #64748b;
    cursor: pointer; transition: all .18s ease; text-align: left;
    border: 1px solid transparent;
}
.step-tab:hover { background: rgba(37, 99, 235, .07); color: var(--color-primary); }
.step-tab.active {
    background: rgba(255, 255, 255, .85);
    color: var(--color-primary);
    border-color: rgba(37, 99, 235, .25);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .12);
}
.step-tab .step-dot {
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0;
    border-radius: 9999px; font-size: .7rem; font-weight: 700;
    background: rgba(100, 116, 139, .14); color: #64748b;
    transition: all .18s ease;
}
.step-tab.active .step-dot {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
}

/* Wizard step panels: fade/slide when switching */
.step-panel { display: none; }
.step-panel.active { display: block; animation: stepIn .25s ease; }
@keyframes stepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Repeatable entry cards (experience, education…) */
.entry-card {
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(203, 213, 225, .6);
    border-radius: .9rem; padding: 1rem;
    animation: stepIn .22s ease;
}

/* ── Template picker chips ──────────────────────────────────── */
.tpl-chip {
    padding: .45rem .85rem; border-radius: .7rem;
    font-size: .78rem; font-weight: 600; color: #475569;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(203, 213, 225, .7);
    cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.tpl-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tpl-chip.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}

/* ── Live preview sheet ─────────────────────────────────────── */
.preview-viewport {
    overflow: auto; border-radius: 1rem;
    background:
        radial-gradient(circle at 20% 10%, rgba(147, 197, 253, .25), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(249, 168, 212, .2), transparent 45%),
        rgba(241, 245, 253, .8);
    border: 1px solid rgba(255, 255, 255, .7);
}
/* Sheet is scaled from the top-left; fitPreview() centers it with margin-left. */
.preview-scale { transform-origin: top left; }

/* A4 sheet: 794px ≈ 210mm at 96dpi. Page guides every 1123px (297mm). */
.resume-sheet {
    width: 794px; min-height: 1123px; margin: 24px auto;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0, transparent 1121px,
            rgba(37, 99, 235, .35) 1121px, rgba(37, 99, 235, .35) 1123px
        ),
        #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
    border-radius: 4px;
}
/* Accent preset swatches in the editor toolbar. */
.accent-swatch {
    width: 1.15rem; height: 1.15rem; border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
    cursor: pointer; padding: 0; transition: transform .12s ease;
}
.accent-swatch:hover { transform: scale(1.18); }
@media (pointer: coarse) { .accent-swatch { width: 1.6rem; height: 1.6rem; } }

/* Two-column templates paint the sidebar with a `position: fixed` band so it
   repeats on every exported PDF page. In the on-screen preview that would
   stick to the viewport, so re-scope it to `absolute` within the sheet and let
   it cover the full (possibly multi-page) sheet height. Dompdf never sees
   app.css, so the PDF keeps the fixed/repeating behaviour. */
#preview-sheet .rz { position: relative; }
#preview-sheet .rz-sideband { position: absolute !important; height: 100% !important; }
#preview-sheet .rz-side { position: absolute; }

/* ── Score ring (analyzer) ──────────────────────────────────── */
.score-ring { transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.score-ring .track { stroke: rgba(148, 163, 184, .25); }
.score-ring .value {
    stroke: url(#scoreGradient);
    transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1);
}

.kw-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .7rem; border-radius: 9999px;
    font-size: .78rem; font-weight: 600;
}
.kw-matched { background: rgba(16, 185, 129, .12); color: #047857; }
.kw-missing { background: rgba(244, 63, 94, .1); color: #be123c; }

.priority-high   { background: rgba(244, 63, 94, .12);  color: #be123c; }
.priority-medium { background: rgba(245, 158, 11, .14); color: #b45309; }
.priority-low    { background: rgba(59, 130, 246, .12); color: #1d4ed8; }

/* ── Editor: layout, toolbar, title, steps, skills ──────────── */

/* The editor benefits from wide monitors: let it grow past the site's
   default max-w-7xl so the preview can show the sheet at (near) 100%. */
body.editor-page main { max-width: 1760px; }
.toolbar-divider {
    width: 1px; align-self: stretch;
    background: rgba(148, 163, 184, .35);
}
@media (max-width: 640px) { .toolbar-divider { display: none; } }

/* Title input: subtle affordance — pencil fades once editing */
.title-wrap .title-pencil { opacity: .55; transition: opacity .15s ease; }
.title-wrap:hover #resume-title,
.title-wrap:focus-within #resume-title { border-color: rgba(148, 163, 184, .55) !important; background: #fff !important; }
.title-wrap:focus-within .title-pencil { opacity: 0; }

/* Completed step indicator */
.step-tab .step-dot.done {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
.step-tab.active .step-dot.done {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Editor skill chips (brand-neutral — distinct from analyzer keyword chips) */
.skill-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 9999px;
    font-size: .8rem; font-weight: 600; color: #3730a3;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(99, 102, 241, .35);
}
.skill-chip-x { font-weight: 700; opacity: .55; cursor: pointer; padding: 0 .1rem; }
.skill-chip-x:hover { opacity: 1; color: #be123c; }

/* ── Template gallery modal ─────────────────────────────────── */
.tpl-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tpl-modal.hidden { display: none; }
.tpl-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.tpl-panel {
    position: relative; z-index: 1;
    width: min(1060px, 100%); max-height: 88vh;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .92);
    animation: stepIn .22s ease;
}
.tpl-grid {
    display: grid; gap: 1rem; padding: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
}
@media (min-width: 640px)  { .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tpl-card {
    display: flex; flex-direction: column; text-align: left;
    border-radius: .9rem; overflow: hidden; cursor: pointer;
    border: 2px solid rgba(203, 213, 225, .7); background: #fff;
    transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.tpl-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 99, 235, .18); }
.tpl-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }

.tpl-thumb {
    position: relative; display: block; width: 100%;
    padding-top: 141.4%; /* A4 aspect ratio */
    background:
        linear-gradient(110deg, rgba(226,232,240,.6) 8%, rgba(241,245,249,.9) 18%, rgba(226,232,240,.6) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    overflow: hidden;
}
@keyframes shimmer { to { background-position-x: -200%; } }
/* Stop the loading shimmer once a miniature resolves (or fails). */
.tpl-thumb.is-loaded { animation: none; background: #fff; }
.tpl-thumb.is-failed { animation: none; background: #f1f5f9; }
.tpl-thumb.is-failed::after {
    content: 'Preview unavailable';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 600; color: #94a3b8;
}
.tpl-thumb-inner {
    position: absolute; top: 0; left: 0;
    display: block; width: 794px;
    transform-origin: top left;
    background: #fff; pointer-events: none;
}
.tpl-card-meta {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .75rem; border-top: 1px solid rgba(203, 213, 225, .5);
}
.tpl-card-name { font-size: .82rem; font-weight: 700; color: #1e293b; }
.tpl-card-badges { display: flex; gap: .3rem; }
.tpl-badge {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .12rem .4rem; border-radius: 9999px;
    background: rgba(37, 99, 235, .1); color: #1d4ed8;
}

/* ── Toasts ─────────────────────────────────────────────────── */
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1.1rem; border-radius: .8rem;
    background: rgba(15, 23, 42, .92); color: #fff;
    font-size: .85rem; font-weight: 500;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    animation: toastIn .25s ease;
}
.toast.toast-error { background: rgba(190, 18, 60, .95); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.leaving { opacity: 0; transform: translateY(8px); transition: all .25s ease; }
.toast-action {
    margin-left: .35rem; padding: .2rem .7rem; border-radius: .5rem;
    background: rgba(255, 255, 255, .18); color: #fff;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease;
}
.toast-action:hover { background: rgba(255, 255, 255, .3); }

/* ── Misc ───────────────────────────────────────────────────── */
.spinner {
    width: 1.05rem; height: 1.05rem; border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
    animation: spin .7s linear infinite;
}
.spinner-dark { border-color: rgba(37, 99, 235, .25); border-top-color: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: stepIn .3s ease; }

::selection { background: rgba(37, 99, 235, .18); }

a, button, [role="button"], label[for], summary { cursor: pointer; }

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Touch devices: give icon-only buttons a comfortable ≥40px hit area
   without inflating them for mouse users. */
@media (pointer: coarse) {
    .btn-ghost, .btn-danger, .skill-chip-x {
        min-width: 2.5rem;
        min-height: 2.5rem;
        justify-content: center;
    }
}