/* ==========================================
   Project 123
   Version 0.0.1
========================================== */

:root {

    --navy: #14213D;
    --blue: #4F8EF7;
    --green: #2ECC71;
    --red: #E5484D;

    /* Functional UI palette — deliberately distinct from --blue/--green
       above, which are reserved for the literal "123" logo mark only.
       Blue is the default "trustworthy SaaS" choice used by nearly every
       job board (including the one this was starting to resemble), which
       is exactly why the primary interactive color here is a warm
       terracotta instead — confidence and optimism rather than generic
       corporate trust-signaling. Success/match-score green stays green
       (that association is too universal to abandon) but shifts to a
       richer emerald rather than a bright, generic "SaaS success" tone. */
    --accent: #D9662E;
    --accent-rgb: 217, 102, 46;
    --success: #1F9D6B;
    --success-rgb: 31, 157, 107;

    --text: #111827;
    --muted: #6B7280;

    --border: #E5E7EB;
    --background: #FBF7F2;
    --white: #FFFFFF;

    --radius: 14px;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {

    font-family: "Inter", sans-serif;
    background: var(--background);
    color: var(--text);

    -webkit-font-smoothing: antialiased;

}

.container {

    max-width: 1080px;
    margin: auto;
    padding: 40px 24px 80px;

}

/* ==========================================
   Logo
========================================== */

header {

    display: flex;
    justify-content: center;
    margin-bottom: 80px;

}

.results-page header {

    margin-bottom: 32px;

}

.logo {

    display: inline-block;

    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.06em;
    user-select: none;

    color: inherit;
    text-decoration: none;

}

.one {

    color: var(--navy);

}

.two {

    color: var(--blue);

}

.three {

    color: var(--green);

}

/* ==========================================
   Hero
========================================== */

.hero {

    text-align: center;
    max-width: 760px;
    margin: auto;

}

.eyebrow {

    color: var(--accent);
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 18px;

}

.hero h1 {

    font-size: clamp(3rem,6vw,4.8rem);

    line-height: 1.05;

    letter-spacing: -.05em;

    font-weight: 800;

    color: var(--navy);

    margin-bottom: 28px;

}

.hero h1 span {

    color: var(--success);

}

.subtitle {

    color: var(--muted);

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 70px;

}

/* ==========================================
   Cards
========================================== */

.card-input {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 24px;

    transition: all .20s ease;

}

.card-input:hover {

    border-color: var(--accent);

}

.field-label {

    display: block;

    font-size: .85rem;

    font-weight: 600;

    color: var(--muted);

    margin-bottom: 14px;

}

.checkbox-row {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 1.05rem;

    font-weight: 600;

    color: var(--text);

    cursor: pointer;

    white-space: nowrap;

}

.checkbox-row input[type="checkbox"] {

    width: 18px;

    height: 18px;

    accent-color: var(--accent);

    cursor: pointer;

    flex-shrink: 0;

}

.field-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 14px;

}

.field-header .field-label {

    margin-bottom: 0;

}

.checkbox-row--compact {

    font-size: .82rem;

    font-weight: 600;

    color: var(--muted);

    gap: 8px;

}

.checkbox-row--compact input[type="checkbox"] {

    width: 14px;

    height: 14px;

}

.form-control {

    border: none !important;

    box-shadow: none !important;

    padding: 0;

    font-size: 1.05rem;

    background: transparent;

}

.location-field {

    position: relative;

}

.location-suggestions {

    display: none;

    position: absolute;

    top: calc(100% + 12px);

    left: -24px;

    right: -24px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 10px;

    box-shadow: 0 12px 24px rgba(20,33,61,.08);

    list-style: none;

    padding: 6px;

    margin: 0;

    max-height: 260px;

    overflow-y: auto;

    z-index: 20;

}

.location-suggestions.open {

    display: block;

}

.location-suggestion {

    padding: 10px 14px;

    border-radius: 8px;

    font-size: .95rem;

    color: var(--text);

    cursor: pointer;

}

.location-suggestion:hover,
.location-suggestion.active {

    background: rgba(var(--accent-rgb),.08);

    color: var(--accent);

}

/* ==========================================
   Upload
========================================== */

.upload-card {

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    min-height: 260px;

    border: 2px dashed var(--border);

    transition: .25s;

}

.upload-card:hover {

    border-color: var(--accent);

    background: rgba(var(--accent-rgb),.04);

}

#uploadContent {

    text-align: center;

}

.upload-icon {

    width: 72px;
    height: 72px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(var(--accent-rgb),.08);

    color: var(--accent);

    font-size: 2rem;

    margin: auto auto 24px;

}

.upload-card h3 {

    font-size: 1.35rem;

    color: var(--navy);

    margin-bottom: 10px;

}

.upload-card p {

    color: var(--muted);

    margin-bottom: 12px;

}

.upload-card small {

    color: #A0A7B4;

}

.upload-card.drag-over {

    border-color: var(--accent);

    background: rgba(var(--accent-rgb),.08);

    transform: scale(1.01);

}

.upload-card.success {

    border-style: solid;

    border-color: var(--success);

    background: rgba(var(--success-rgb),.04);

}

.upload-card.error {

    border-style: solid;

    border-color: var(--red);

    background: rgba(229,72,77,.04);

}

.upload-status {

    margin-top: 16px;

    font-size: .9rem;

    font-weight: 600;

    text-align: center;

    min-height: 20px;

}

.upload-status.success {

    color: var(--success);

}

.upload-status.error {

    color: var(--red);

}

.file-info {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

    font-size: .85rem;

}

.file-info .file-name {

    font-weight: 600;

    color: var(--navy);

}

.file-info .file-size {

    color: var(--muted);

}

/* ==========================================
   Button
========================================== */

.btn-find {

    background: var(--accent);

    color: white;

    border: none;

    padding: 18px 54px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 1rem;

    transition: .2s;

}

.btn-find:hover {

    transform: translateY(-2px);

    filter: brightness(1.04);

}

.btn-find:disabled {

    background: var(--border);

    color: var(--muted);

    cursor: not-allowed;

    transform: none;

    filter: none;

}

.btn-find:disabled:hover {

    transform: none;

    filter: none;

}

/* ==========================================
   Privacy
========================================== */

.privacy {

    margin-top: 40px;

    text-align: center;

    color: var(--muted);

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:992px){

    header{

        margin-bottom:50px;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .subtitle{

        margin-bottom:50px;

    }

    .upload-card{

        min-height:220px;

    }

}

/* ==========================================
   RESULTS PAGE
========================================== */

.results-header {

    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin-bottom: 50px;

}

.results-layout {

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 50px;

    align-items: start;

}

/* ==========================================
   Sidebar
========================================== */

.filters {

    position: sticky;

    top: 40px;

    padding-right: 30px;

}

.filters h5 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 30px;

    color: var(--navy);

}

.filters-panel > summary {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--navy);

    margin-bottom: 30px;

    cursor: pointer;

    list-style: none;

}

.filters-panel > summary::-webkit-details-marker {

    display: none;

}

.filters-panel > summary::after {

    content: "\25BE";

    font-size: .85rem;

    color: var(--muted);

    transition: transform .2s ease;

}

.filters-panel[open] > summary::after {

    transform: rotate(180deg);

}

.filter-group {

    margin-bottom: 40px;

}

.filter-section {

    margin-bottom: 46px;

    border-bottom: 1px solid var(--border);

    padding-bottom: 30px;

}

.filter-section:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}

.filter-section summary {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: .82rem;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-weight: 700;

    color: var(--muted);

    margin-bottom: 20px;

    cursor: pointer;

    list-style: none;

}

.filter-section summary::-webkit-details-marker {

    display: none;

}

.filter-section summary::after {

    content: "\25BE";

    font-size: .8rem;

    color: var(--muted);

    transition: transform .2s ease;

}

.filter-section[open] summary::after {

    transform: rotate(180deg);

}

.filter-group > label:first-child {

    display: block;

    font-size: .82rem;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-weight: 700;

    color: var(--muted);

    margin-bottom: 16px;

}

.filter-group label {

    display: block;

    margin-bottom: 12px;

    font-size: .95rem;

    cursor: pointer;

}

.filter-group select,
.filter-group input[type="number"] {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px;

    background: white;

    font-family: inherit;

}

.filter-group small {

    display: block;

    margin-top: 8px;

    color: var(--muted);

}

/* ==========================================
   Results
========================================== */

.results-title {

    margin-bottom: 40px;

}

.results-title h1 {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--navy);

    margin-bottom: 10px;

}

.results-title p {

    color: var(--muted);

}

/* ==========================================
   Job Cards
========================================== */

.job-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 28px;

    margin-bottom: 24px;

    display: flex;

    align-items: center;

    gap: 32px;

    transition: .2s ease;

    cursor: pointer;

    color: inherit;

    text-decoration: none;

}

.job-card:hover {

    border-color: var(--accent);

    transform: translateY(-2px);

}

.job-main {

    display: flex;

    gap: 22px;

    align-items: flex-start;

}

.company-logo {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: rgba(var(--accent-rgb),.08);

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.3rem;

    flex-shrink: 0;

}

.job-info h3 {

    margin: 0 0 6px;

    font-size: 1.35rem;

    color: var(--navy);

}

.company {

    font-weight: 600;

    margin-bottom: 8px;

}

.meta {

    color: var(--muted);

    font-size: .95rem;

    margin-bottom: 14px;

}

.match-tags {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    flex: 1;

    align-content: center;

}

.match-tags span {

    background: rgba(var(--success-rgb),.12);

    color: var(--navy);

    padding: 6px 10px;

    border-radius: 999px;

    font-size: .82rem;

    font-weight: 600;

}

.why {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

.why span {

    background: rgba(var(--success-rgb),.12);

    color: var(--navy);

    padding: 6px 10px;

    border-radius: 999px;

    font-size: .82rem;

    font-weight: 600;

}

.job-actions {

    text-align: right;

    min-width: 170px;

}

.score {

    color: var(--success);

    font-size: .9rem;

    font-weight: 600;

    margin-bottom: 16px;

}

.score span {

    display: block;

    font-size: 2.4rem;

    font-weight: 800;

    line-height: 1;

    color: var(--navy);

}

.job-actions .btn-find {

    width: 100%;

}

.job-header {

    display: flex;

    align-items: center;

    gap: 28px;

    flex: 0 0 380px;

    min-width: 0;

}

.job-score {

    text-align: center;

    min-width: 92px;

    flex-shrink: 0;

}

.percent {

    font-size: 2.75rem;

    font-weight: 800;

    line-height: 1;

    color: var(--success);

    margin-bottom: 6px;

}

.match-label {

    font-size: .85rem;

    font-weight: 600;

    color: var(--muted);

}

.job-title {

    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.2;

    color: var(--navy);

    margin: 0 0 6px;

}

.company-name {

    font-weight: 600;

    color: var(--muted);

}

.job-meta {

    color: var(--muted);

    font-size: .95rem;

    line-height: 1.8;

    flex: 0 0 140px;

    min-width: 0;

}

/* ==========================================
   Mobile
========================================== */

@media (max-width: 992px) {

    .results-layout {

        grid-template-columns: 1fr;

    }

    .filters {

        position: static;

        margin-bottom: 50px;

    }

    .job-card {

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

    }

    .job-header,
    .job-meta,
    .match-tags {

        flex: 1 1 auto;

        width: 100%;

    }

    .job-actions {

        width: 100%;

        text-align: left;

    }

}

.pill {

    display: inline-block;

    border: 1px solid var(--border);

    background: white;

    color: var(--muted);

    padding: 8px 16px;

    border-radius: 999px;

    font-size: .9rem;

    font-weight: 600;

    cursor: pointer;

    margin: 0 8px 8px 0;

    transition: .2s;

}

.pill:hover {

    border-color: var(--accent);

    color: var(--accent);

}

.pill.active {

    background: var(--accent);

    color: white;

    border-color: var(--accent);

}

.pill:disabled {

    cursor: not-allowed;

    color: #C4C9D2;

    background: var(--background);

}

.pill:disabled:hover {

    border-color: var(--border);

    color: #C4C9D2;

}