/* ============================================================
   BUILD YOUR RESUME — Global Stylesheet
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@700;800&display=swap');

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.font-display { font-family: 'Sora', system-ui, sans-serif; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: .75rem;
    padding: .75rem 1rem;
    background: #ffffff;
    color: #0f172a;
    font-size: .9rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.input::placeholder { color: #94a3b8; }
textarea.input { resize: vertical; }

.label {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: .4rem;
    letter-spacing: 0.01em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .75rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 700;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    white-space: nowrap;
}
.btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fecaca;
    border-radius: .75rem;
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 700;
    background: #fff5f5;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.btn-danger:hover { background: #fee2e2; }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-teal { background: #f0fdfa; color: #0d9488; }
.badge-orange { background: #fff7ed; color: #c2410c; }
.badge-green { background: #f0fdf4; color: #15803d; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: 0 8px 30px rgba(15,23,42,0.08); transform: translateY(-1px); }
.card-flat { background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 1rem; }

/* ============================================================
   RESUME PREVIEW / PAPER
   ============================================================ */
.resume-paper {
    max-width: 860px;
    margin-inline: auto;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .93rem;
    line-height: 1.65;
}
.resume-paper h2 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.resume-paper .resume-contact {
    font-size: .85rem;
    color: #475569;
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}
.resume-paper h3 {
    margin-top: 1.25rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #2563eb;
    font-weight: 800;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: .35rem;
    margin-bottom: .6rem;
}
.resume-paper p, .resume-paper li { font-size: .93rem; line-height: 1.65; }
.resume-paper ul { padding-left: 1.2rem; margin-top: .3rem; }
.resume-paper li { margin-bottom: .2rem; }
.resume-paper .exp-block { margin-bottom: .8rem; }
.resume-paper .exp-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .2rem; }
.resume-paper .exp-title { font-weight: 700; font-size: .95rem; }
.resume-paper .exp-date { font-size: .8rem; color: #64748b; }
.resume-paper .exp-company { font-size: .85rem; color: #475569; }

/* ATS Score Bar */
.ats-bar { height: .5rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.ats-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }

/* ============================================================
   STAT CARDS (Dashboard / Admin)
   ============================================================ */
.stat-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.stat-card .stat-label { font-size: .8rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 2rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-top: .25rem; }
.stat-card .stat-sub { font-size: .8rem; color: #94a3b8; margin-top: .2rem; }

/* ============================================================
   PAYWALL / PRICING
   ============================================================ */
.price-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.5rem;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.price-card:hover { box-shadow: 0 8px 30px rgba(37,99,235,0.1); transform: translateY(-2px); border-color: #93c5fd; }
.price-card.featured { border-color: #f97316; border-width: 2px; }
.price-card .price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #f97316; color: #fff; font-size: .7rem; font-weight: 800; padding: .25rem .75rem; border-radius: 999px; }

/* ============================================================
   GRADIENT UTILITIES
   ============================================================ */
.gradient-primary { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.gradient-hero { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,0.1) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 90% 50%, rgba(20,184,166,0.07) 0%, transparent 60%); }
.gradient-text { background: linear-gradient(135deg, #2563eb, #14b8a6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================================
   BUILDER SECTIONS
   ============================================================ */
.section-block {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    transition: border-color 0.15s ease;
}
.section-block:focus-within { border-color: #93c5fd; }
.section-handle { cursor: grab; color: #94a3b8; }
.section-handle:active { cursor: grabbing; }

/* AI action buttons */
.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    color: #6366f1;
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: .625rem;
    padding: .45rem .85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ai-btn:hover { background: #e0e7ff; color: #4f46e5; }
.ai-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-btn .ai-icon { font-size: .9rem; }

/* ============================================================
   ADMIN SIDEBAR
   ============================================================ */
.admin-sidebar { background: #0f172a; min-height: 100vh; }
.admin-nav-link { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; border-radius: .625rem; font-size: .875rem; font-weight: 600; color: #94a3b8; transition: background 0.15s ease, color 0.15s ease; }
.admin-nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav-link.active { background: rgba(37,99,235,0.2); color: #60a5fa; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.4s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Loading spinner */
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    header, footer, .btn, .btn-primary, .btn-danger, .ai-btn,
    [data-builder-form], [data-save-resume], [data-export-link],
    nav, aside, .no-print { display: none !important; }
    .resume-paper { box-shadow: none !important; max-width: none; padding: 0; }
    body { background: #fff !important; }
    .bg-light { background: #fff !important; }
    @page { margin: 1.5cm; }
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 768px) {
    .resume-paper h2 { font-size: 1.4rem; }
    .stat-card .stat-value { font-size: 1.6rem; }
}