/*
 * Multi-colour application theme.
 * This file intentionally contains only visual overrides. Core layout and
 * component behaviour remain in main.css.
 */

:root {
    --bg: #fff7df;
    --surface: #fffdf8;
    --surface-soft: #fff4cf;
    --text: #281542;
    --text-secondary: #665675;
    --text-light: #8d7d99;
    --primary: #7c3aed;
    --primary-hover: #5b21b6;
    --primary-soft: #ede4ff;
    --border: #bba8d2;
    --success: #087f69;
    --success-bg: #d7fff3;
    --warning: #925100;
    --warning-bg: #fff0a8;
    --ink: #281542;
    --purple: #7c3aed;
    --pink: #f43f8c;
    --orange: #ff7a45;
    --yellow: #ffd84a;
    --aqua: #35d7c0;
    --sky: #49b8ff;
    --lime: #b8ea58;
    --shadow-sm: 3px 4px 0 rgba(40, 21, 66, 0.14);
    --shadow: 7px 8px 0 rgba(40, 21, 66, 0.16);
    --radius: 18px;
}

html,
body {
    background: #fff7df;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 7% 13%, rgba(255, 216, 74, 0.72) 0 90px, transparent 92px),
        radial-gradient(circle at 94% 18%, rgba(53, 215, 192, 0.43) 0 125px, transparent 127px),
        radial-gradient(circle at 84% 89%, rgba(244, 63, 140, 0.30) 0 155px, transparent 157px),
        radial-gradient(circle at 13% 92%, rgba(73, 184, 255, 0.27) 0 130px, transparent 132px),
        linear-gradient(135deg, #fffaf0 0%, #f6edff 48%, #edfffa 100%);
    background-attachment: fixed;
    color: var(--text);
}

body::before,
body::after {
    position: fixed;
    z-index: 0;
    content: "";
    pointer-events: none;
}

body::before {
    top: 125px;
    left: 3vw;
    width: 58px;
    height: 58px;
    border: 4px solid rgba(244, 63, 140, 0.22);
    border-radius: 18px;
    transform: rotate(18deg);
}

body::after {
    right: 4vw;
    bottom: 8vh;
    width: 72px;
    height: 72px;
    background:
        radial-gradient(circle, rgba(40, 21, 66, 0.28) 2px, transparent 3px) 0 0 / 14px 14px;
    transform: rotate(-12deg);
}

.app-shell {
    position: relative;
    z-index: 1;
}

/* Navigation */

body .navbar {
    position: sticky;
    z-index: 100;
    top: 0;
    height: 80px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.20) 0 4px, transparent 5px) 0 0 / 25px 25px,
        linear-gradient(105deg, #6022b8 0%, #a62eb2 34%, #ef3f87 67%, #ff7948 100%);
    border: 0;
    border-bottom: 5px solid var(--yellow);
    box-shadow: 0 7px 0 rgba(40, 21, 66, 0.17);
}

body .brand,
body .brand-name {
    color: #fff;
}

body .brand-mark,
body .auth-logo {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    border: 2px solid var(--ink);
    border-radius: 13px 9px 14px 8px;
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--aqua);
    transform: rotate(-7deg);
}

body .brand-mark {
    width: 43px;
    height: 43px;
}

body .brand-name {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.025em;
}

body .brand-subtitle,
body .navbar .user-email {
    color: #fff1c7;
}

/* Typography */

body h1,
body h2,
body h3 {
    color: var(--ink);
    font-weight: 850;
    letter-spacing: -.035em;
}

body h1 {
    font-size: clamp(36px, 5vw, 50px);
    font-weight: 950;
    line-height: 1.02;
}

body .page-description,
body .card-description {
    color: var(--text-secondary);
}

body .eyebrow {
    display: inline-flex;
    width: fit-content;
    min-height: 29px;
    align-items: center;
    padding: 4px 12px;
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
    letter-spacing: .1em;
    transform: rotate(-1.5deg);
}

/* Cards and panels */

body .card,
body .auth-card,
body .upload-card,
body .upload-info-card,
body .analysis-card,
body .ats-score-card,
body .analysis-progress-card,
body .viewer-section,
body .editor-section,
body .job-analysis-history-card,
body .dashboard-job-card,
body .job-details-modal,
body .generation-card,
body .builder-card {
    background: rgba(255, 253, 248, .97);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

body .dashboard-grid .card {
    position: relative;
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

body .dashboard-grid .card:nth-child(4n + 1) {
    background: linear-gradient(145deg, #fff0f7, #fffdf8);
    box-shadow: 7px 8px 0 rgba(244, 63, 140, .32);
}

body .dashboard-grid .card:nth-child(4n + 2) {
    background: linear-gradient(145deg, #fff2c4, #fffdf8);
    box-shadow: 7px 8px 0 rgba(255, 169, 40, .34);
}

body .dashboard-grid .card:nth-child(4n + 3) {
    background: linear-gradient(145deg, #d9fff7, #fffdf8);
    box-shadow: 7px 8px 0 rgba(53, 215, 192, .34);
}

body .dashboard-grid .card:nth-child(4n + 4) {
    background: linear-gradient(145deg, #e9e0ff, #fffdf8);
    box-shadow: 7px 8px 0 rgba(124, 58, 237, .28);
}

body .dashboard-grid .card::after {
    position: absolute;
    top: -27px;
    right: -25px;
    width: 82px;
    height: 82px;
    background: var(--aqua);
    border: 2px solid var(--ink);
    border-radius: 50%;
    content: "";
    opacity: .42;
}

body .dashboard-grid .card:nth-child(2n)::after {
    background: var(--pink);
}

body .dashboard-grid .card:hover {
    box-shadow: 10px 11px 0 rgba(40, 21, 66, .18);
    transform: translate(-2px, -3px) rotate(-.25deg);
}

body .card-highlight {
    background: linear-gradient(135deg, #e9fff9, #f1e7ff 55%, #fff0c2);
}

body .card-icon,
body .file-icon,
body .upload-icon,
body .info-number,
body .step-number {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    border: 2px solid var(--ink);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
}

body .card:nth-child(2n) .card-icon,
body .info-item:nth-child(2n) .info-number,
body .step-card:nth-child(2n) .step-number {
    background: linear-gradient(135deg, var(--aqua), var(--sky));
    box-shadow: 3px 3px 0 var(--purple);
}

/* Buttons */

body .btn {
    min-height: 42px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-weight: 850;
    box-shadow: 3px 4px 0 rgba(40, 21, 66, .25);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

body .btn:hover {
    box-shadow: 1px 2px 0 rgba(40, 21, 66, .28);
    transform: translate(2px, 2px);
}

body .btn-primary {
    background: linear-gradient(110deg, var(--purple), var(--pink));
    border-color: var(--ink);
    color: #fff;
}

body .btn-primary:hover {
    background: linear-gradient(110deg, #5b21b6, #db2777);
    filter: saturate(1.16);
}

body .btn-secondary {
    background: var(--yellow);
    border-color: var(--ink);
    color: var(--ink);
}

body .navbar .btn-secondary {
    background: var(--aqua);
}

body .btn-danger {
    background: linear-gradient(110deg, #ff705d, #f43f71);
    border-color: var(--ink);
    color: #fff;
}

body .btn-cv-action {
    background: linear-gradient(110deg, #16c7a5, #35d7c0 50%, #b8ea58);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 3px 4px 0 rgba(244, 63, 140, .75);
}

body .btn-cv-action:hover {
    background: linear-gradient(110deg, #0fb696, #2ccab5 50%, #a9dd45);
    box-shadow: 1px 2px 0 rgba(244, 63, 140, .75);
}

/* Inputs and uploads */

body input,
body textarea,
body select,
body .editor-textarea,
body .job-description-input {
    background: #fffefa;
    border: 2px solid #a995c4;
    border-radius: 13px;
    color: var(--ink);
}

body input:focus,
body textarea:focus,
body select:focus,
body .editor-textarea:focus,
body .job-description-input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 4px rgba(244, 63, 140, .17);
    outline: none;
}

body .upload-dropzone {
    background:
        radial-gradient(circle, rgba(124, 58, 237, .18) 1.5px, transparent 1.7px) 0 0 / 18px 18px,
        #fff6cf;
    border: 2px dashed var(--purple);
    border-radius: 19px;
}

body .upload-dropzone:hover,
body .upload-dropzone.dragging,
body .upload-dropzone.has-file {
    background-color: #ddfff7;
    border-color: var(--pink);
}

/* Dashboard, history and version rows */

body .dashboard-job-card {
    overflow: hidden;
    background: #fffdf8 !important;
}

body .dashboard-job-card:nth-child(3n + 1),
body .job-analysis-history-card:nth-child(3n + 1) {
    box-shadow: 7px 8px 0 rgba(73, 184, 255, .34);
}

body .dashboard-job-card:nth-child(3n + 2),
body .job-analysis-history-card:nth-child(3n + 2) {
    box-shadow: 7px 8px 0 rgba(244, 63, 140, .30);
}

body .dashboard-job-card:nth-child(3n + 3),
body .job-analysis-history-card:nth-child(3n + 3) {
    box-shadow: 7px 8px 0 rgba(53, 215, 192, .34);
}

body .dashboard-job-header,
body .job-history-card-header,
body .job-history-header,
body .viewer-section-header,
body .editor-section-header {
    background: linear-gradient(100deg, #e8ddff, #ffddea 52%, #fff0b5) !important;
    border-bottom: 2px solid var(--ink);
}

body .dashboard-job-row:nth-child(3n + 2),
body .generated-cv-version:nth-child(3n + 2),
body .job-history-row:nth-child(3n + 2),
body .version-row:nth-child(3n + 2) {
    background: #edfff9 !important;
}

body .dashboard-job-row:nth-child(3n + 3),
body .generated-cv-version:nth-child(3n + 3),
body .job-history-row:nth-child(3n + 3),
body .version-row:nth-child(3n + 3) {
    background: #fff5c9 !important;
}

body .generated-cv-version,
body .generated-component,
body .dashboard-active-task,
body .component-card,
body .step-card,
body .version-row,
body .job-history-row {
    border-color: rgba(40, 21, 66, .24);
}

/* Status labels and tags */

body .status-badge,
body .match-tag,
body .missing-tag,
body .warning-tag,
body .viewer-tag,
body .generated-cv-status,
body .job-status-badge {
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-weight: 850;
}

body .status-success,
body .match-tag,
body .success-inline,
body .generated-cv-status,
body .job-status-success {
    background: #d4fff1 !important;
    color: #06765f !important;
}

body .status-warning,
body .warning-tag,
body .job-status-queued {
    background: #fff0a8 !important;
    color: #875000 !important;
}

body .missing-tag,
body .job-status-failed {
    background: #ffe0ec !important;
    color: #ad1553 !important;
}

body .viewer-tag:nth-child(4n + 1),
body .analysis-tags > *:nth-child(4n + 1) {
    background: #e6dbff;
    color: #5926a8;
}

body .viewer-tag:nth-child(4n + 2),
body .analysis-tags > *:nth-child(4n + 2) {
    background: #d7fff3;
    color: #05735e;
}

body .viewer-tag:nth-child(4n + 3),
body .analysis-tags > *:nth-child(4n + 3) {
    background: #fff0ad;
    color: #855000;
}

body .viewer-tag:nth-child(4n + 4),
body .analysis-tags > *:nth-child(4n + 4) {
    background: #ffdce9;
    color: #a31551;
}

/* Progress and active tasks */

body .analysis-progress-track,
body .mini-progress-track {
    overflow: hidden;
    background: #ded1ec !important;
    border: 1px solid rgba(40, 21, 66, .23);
}

body .analysis-progress-bar,
body .mini-progress-bar {
    background:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px),
        linear-gradient(90deg, var(--purple), var(--pink), var(--orange), var(--yellow)) !important;
    box-shadow: 0 0 12px rgba(244, 63, 140, .38);
}

body .analysis-spinner {
    border-color: #e2d7f2;
    border-right-color: var(--pink);
    border-top-color: var(--purple);
    box-shadow: 0 0 0 8px rgba(53, 215, 192, .17);
}

body .analysis-step-icon {
    background: #e9ddff;
    border: 2px solid #ab94ca;
    color: var(--purple);
}

body .analysis-step.completed .analysis-step-icon {
    background: var(--aqua);
    border-color: var(--ink);
    color: var(--ink);
}

body .dashboard-active-task {
    background: linear-gradient(100deg, #e7fff9, #eee6ff) !important;
    border: 1.5px solid var(--purple);
}

/* Analysis and generation screens */

body .ats-score-card {
    background: linear-gradient(120deg, #6022b8, #d43891 54%, #ff7a45) !important;
    color: #fff;
}

body .ats-score-card h2,
body .ats-score-card h3,
body .ats-score-card strong {
    color: #fff;
}

body .ats-score-circle {
    background: rgba(40, 21, 66, .28);
    border: 8px solid var(--yellow);
    box-shadow: 4px 5px 0 rgba(40, 21, 66, .25);
}

body .analysis-columns .analysis-card:nth-child(3n + 1) {
    background: #edfff9;
}

body .analysis-columns .analysis-card:nth-child(3n + 2) {
    background: #fff3bd;
}

body .analysis-columns .analysis-card:nth-child(3n + 3) {
    background: #ffe7f0;
}

/* Score explanations */

body .analysis-score-item-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

body .score-info {
    position: relative;
    display: inline-flex;
    align-items: center;
}

body .score-info-button {
    display: inline-flex;
    width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--aqua);
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    cursor: help;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 1px 2px 0 rgba(40, 21, 66, .22);
}

body .score-info-button:hover,
body .score-info-button:focus-visible {
    background: var(--yellow);
    outline: 3px solid rgba(244, 63, 140, .24);
    outline-offset: 2px;
}

body .score-info-tooltip {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + 10px);
    left: 50%;
    width: min(280px, calc(100vw - 40px));
    padding: 11px 13px;
    background: var(--ink);
    border: 2px solid var(--yellow);
    border-radius: 11px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity 120ms ease, transform 120ms ease;
}

body .score-info-tooltip::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--ink);
    border-right: 2px solid var(--yellow);
    border-bottom: 2px solid var(--yellow);
    content: "";
    transform: translate(-50%, -4px) rotate(45deg);
}

body .score-info:hover .score-info-tooltip,
body .score-info:focus-within .score-info-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

body .analysis-score-item:first-child .score-info-tooltip {
    left: -8px;
    transform: translate(0, 5px);
}

body .analysis-score-item:first-child .score-info:hover .score-info-tooltip,
body .analysis-score-item:first-child .score-info:focus-within .score-info-tooltip {
    transform: translate(0, 0);
}

body .analysis-score-item:first-child .score-info-tooltip::after {
    left: 17px;
}

body .analysis-score-item:last-child .score-info-tooltip {
    right: -8px;
    left: auto;
    transform: translate(0, 5px);
}

body .analysis-score-item:last-child .score-info:hover .score-info-tooltip,
body .analysis-score-item:last-child .score-info:focus-within .score-info-tooltip {
    transform: translate(0, 0);
}

body .analysis-score-item:last-child .score-info-tooltip::after {
    right: 17px;
    left: auto;
}

body .generated-component:nth-child(4n + 1),
body .component-card:nth-child(4n + 1) {
    background: #e9e0ff !important;
}

body .generated-component:nth-child(4n + 2),
body .component-card:nth-child(4n + 2) {
    background: #d9fff7 !important;
}

body .generated-component:nth-child(4n + 3),
body .component-card:nth-child(4n + 3) {
    background: #fff2bd !important;
}

body .generated-component:nth-child(4n + 4),
body .component-card:nth-child(4n + 4) {
    background: #ffe1ed !important;
}

body .review-banner {
    background: linear-gradient(105deg, #d8fff5, #eadfff 48%, #ffe0ec 76%, #fff0ae) !important;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 7px 0 rgba(40, 21, 66, .16);
}

body .job-details-modal-overlay {
    background: rgba(40, 21, 66, .66);
    backdrop-filter: blur(7px);
}

body .job-details-modal-header {
    background: linear-gradient(100deg, #e9ddff, #ffdce9, #fff0ad) !important;
    border-bottom: 2px solid var(--ink);
}

body .analysis-progress-error,
body .version-error {
    background: #ffe0e8;
    border-color: #ef5e87;
    color: #9f1746;
}

body ::selection {
    background: var(--yellow);
    color: var(--ink);
}

@media (max-width: 700px) {
    body .navbar {
        height: auto;
        min-height: 72px;
        padding: 11px 18px;
    }

    body .brand-subtitle,
    body .navbar .user-email {
        display: none;
    }

    body .brand-name {
        font-size: 14px;
    }

    body .page-container {
        width: min(100% - 24px, 1180px);
        padding-top: 38px;
    }

    body .card,
    body .auth-card,
    body .upload-card,
    body .upload-info-card,
    body .analysis-card,
    body .analysis-progress-card,
    body .viewer-section,
    body .editor-section,
    body .job-analysis-history-card,
    body .dashboard-job-card {
        border-radius: 15px;
        box-shadow: 4px 5px 0 rgba(40, 21, 66, .16);
    }

    body .btn {
        min-height: 40px;
    }
}