:root {
    color-scheme: dark;
    --page: #15181c;
    --surface: #1e2227;
    --raised: #262b31;
    --ink: #e7e9ec;
    --muted: #9aa4ae;
    --line: #333a42;
    --accent: #4f9dea;
    --green: #4ec777;
    --red: #e2726f;
    --teal: #3fb6b6;
    --purple: #b08ce6;
    --amber: #d9a441;
    --slate: #8aa0b8;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 0.25rem;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(0.85rem, 0.82rem + 0.25vw, 0.95rem);
    line-height: 145%;
    color: var(--ink);
    background-color: var(--page);
}

input, select, textarea, button {
    font: inherit;
    box-sizing: border-box;
}

input, select, textarea {
    color: var(--ink);
    background-color: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* LOGIN */

.login {
    display: flex;
    flex-direction: column;
    inline-size: min(100%, 22rem);
    gap: 0.5lh;
    margin: 12vh auto 0;
    padding: 1.25lh 2ch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--surface);
}

.login h1 {
    font-size: 1.25rem;
    line-height: 120%;
    margin: 0;
}

.login form {
    display: flex;
    flex-direction: column;
    gap: 0.25lh;
}

.login label {
    font-size: 0.82rem;
    color: var(--muted);
    margin-block-start: 0.4lh;
}

.login input {
    padding: 0.4lh 1ch;
}

.login button {
    margin-block-start: 0.75lh;
    color: #ffffff;
    padding: 0.4lh 1ch;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: var(--accent);
    cursor: pointer;
}

.login .error {
    color: var(--red);
    margin: 0;
}

/* BAR */

.bar {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3lh 1.5ch;
    padding: 0.5lh 2ch;
    background-color: var(--surface);
    border-block-end: 1px solid var(--line);
    z-index: 10;
}

.bar h1 {
    font-size: 1.05rem;
    line-height: 120%;
    margin: 0;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25lh 1.25ch;
    font-size: 0.82rem;
    color: color-mix(in lab, var(--accent) 30%, var(--ink));
}

.filters input[type="search"] {
    inline-size: min(100%, 16rem);
    padding: 0.25lh 1ch;
}

.filters select {
    padding: 0.25lh 1ch;
}

.filters label {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
}

.filters .statuses,
.filters .group {
    display: inline-flex;
    gap: 1ch;
    padding-inline: 0.75ch;
    border-inline: 1px solid var(--line);
}

.filters .filter-status { accent-color: var(--accent); }
.filters .filter-workplace { accent-color: var(--teal); }
.filters .filter-employment { accent-color: var(--purple); }
.filters #hide_none,
.filters #only_salary { accent-color: var(--amber); }
.filters label:has(.filter-status) { color: color-mix(in lab, var(--accent) 20%, var(--ink)); }
.filters label:has(.filter-workplace) { color: color-mix(in lab, var(--teal) 20%, var(--ink)); }
.filters label:has(.filter-employment) { color: color-mix(in lab, var(--purple) 20%, var(--ink)); }
.filters label:has(#hide_none),
.filters label:has(#only_salary) { color: color-mix(in lab, var(--amber) 20%, var(--ink)); }

.filters .next-reference {
    display: inline-flex;
    align-items: center;
    gap: 0.75ch;
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--accent);
    padding: 0.1lh 0.75ch;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

.filters .next-reference b {
    color: color-mix(in lab, var(--accent) 45%, #ffffff);
}

.filters .next-reference.taken {
    color: var(--red);
    border-color: var(--red);
}

.filters .next-reference.taken b {
    color: color-mix(in lab, var(--red) 45%, #ffffff);
}

.filters .reference-step {
    appearance: none;
    inline-size: 2ch;
    font-size: 1rem;
    font-weight: 700;
    line-height: 100%;
    color: inherit;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.filters .logout {
    margin-inline-start: 1.5ch;
    color: var(--accent);
}

/* MAIN */

main {
    padding: 0.75lh 2ch 4lh;
}

.add {
    margin-block-end: 0.75lh;
}

.add summary {
    font-size: 0.85rem;
    color: var(--accent);
    cursor: pointer;
}

#manual_form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4lh 1ch;
    margin-block-start: 0.5lh;
}

#manual_form input {
    flex: 1 1 12rem;
    padding: 0.3lh 1ch;
}

/* JOBS */

.jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr));
    gap: 0.6lh 1ch;
}

.job {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
    grid-template-areas:
        "head    notes"
        "badges  notes"
        "meta    notes"
        "duplicates notes"
        "tracking notes"
        "log     notes"
        "actions notes";
    gap: 0.2lh 1ch;
    padding: 0.5lh 1ch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--surface);
}

.job[data-status="rejected"] {
    opacity: 0.55;
}

.job.active {
    border-color: var(--accent);
    background-color: color-mix(in lab, var(--accent) 7%, var(--surface));
    box-shadow: 0 0 0 1px var(--accent);
}

.head {
    grid-area: head;
}

.head h2 {
    font-size: 0.95rem;
    line-height: 125%;
    margin: 0;
}

.head .external {
    color: var(--amber);
    vertical-align: baseline;
}

.company {
    color: var(--muted);
    margin: 0;
}

/* BADGES */

.badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4ch;
}

.badge {
    --hue: var(--slate);
    font-size: 0.7rem;
    line-height: 165%;
    text-transform: capitalize;
    white-space: nowrap;
    padding-inline: 0.7ch;
    border-radius: var(--radius);
    color: color-mix(in lab, var(--hue) 62%, var(--ink));
    background-color: color-mix(in lab, var(--hue) 20%, var(--surface));
}

.badge.status-new { --hue: var(--slate); }
.badge.status-applied { --hue: var(--accent); }
.badge.status-interview { --hue: var(--green); }
.badge.status-rejected { --hue: var(--red); }
.badge.workplace { --hue: var(--teal); }
.badge.employment { --hue: var(--purple); }
.badge.ir35 { --hue: var(--amber); text-transform: none; }
.badge.keyword { --hue: var(--green); }
.badge.salary { --hue: var(--accent); text-transform: none; }
.badge.tag { --hue: var(--slate); }

.meta {
    grid-area: meta;
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
}

.duplicates {
    grid-area: duplicates;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2lh 1ch;
    font-size: 0.72rem;
    color: var(--amber);
}

.duplicates a {
    color: var(--amber);
    text-decoration: underline;
}

.panel {
    grid-area: notes;
    display: flex;
    flex-direction: column;
    min-block-size: 4lh;
}

.tabs {
    display: flex;
    gap: 0.5ch;
    margin-block-end: 0.3lh;
}

.tab {
    appearance: none;
    font-size: 0.72rem;
    color: var(--muted);
    padding: 0.1lh 0.75ch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: transparent;
    cursor: pointer;
}

.tab.active {
    color: var(--ink);
    border-color: var(--accent);
    background-color: color-mix(in lab, var(--accent) 15%, var(--surface));
}

.tab-panel {
    flex: 1;
    min-block-size: 0;
}

.description-preview {
    appearance: none;
    inline-size: 100%;
    max-block-size: 15lh;
    overflow-y: auto;
    font: inherit;
    font-size: 0.76rem;
    text-align: start;
    color: color-mix(in lab, var(--ink) 78%, var(--surface));
    padding: 0.3lh 1ch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--raised);
    cursor: pointer;
}

.description-preview:hover {
    border-color: var(--accent);
}

.no-description {
    font-size: 0.76rem;
    color: var(--muted);
    margin: 0;
}

.jd-pop {
    position: fixed;
    inset: auto;
    inline-size: min(92vw, 24rem);
    max-block-size: min(55vh, 22lh);
    overflow-y: auto;
    font-size: 0.8rem;
    color: color-mix(in lab, var(--ink) 82%, var(--surface));
    margin: 0;
    padding: 0.6lh 1.25ch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--raised);
    box-shadow: 0 0.5lh 1.5lh #00000066;
}

.tracking {
    grid-area: tracking;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3lh 1.5ch;
    font-size: 0.76rem;
    color: var(--muted);
}

.tracking .reference {
    font-weight: 700;
    color: var(--ink);
}

.tracking .clicks {
    color: var(--green);
}

.log {
    grid-area: log;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3lh 1.5ch;
    font-size: 0.74rem;
    color: var(--muted);
}

.log span:first-child {
    color: color-mix(in lab, var(--ink) 70%, var(--surface));
}

.cv-input {
    inline-size: 9ch;
    padding: 0 0.5ch;
}

.notes {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 3lh;
    padding: 0.3lh 1ch;
    resize: vertical;
}

.actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6ch;
}

.button {
    font-size: 0.78rem;
    text-decoration: none;
    color: #ffffff;
    padding: 0.1lh 1ch;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--slate) 80%, #000);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.button.apply {
    background-color: color-mix(in srgb, var(--accent) 80%, #000);
}

.button.apply.link {
    color: var(--accent);
    background-color: transparent;
    border-color: color-mix(in lab, var(--accent) 50%, var(--line));
}

.button.applied {
    background-color: color-mix(in srgb, var(--green) 80%, #000);
}

.button.responded {
    background-color: color-mix(in srgb, var(--teal) 80%, #000);
}

.button.interview {
    background-color: color-mix(in srgb, var(--purple) 80%, #000);
}

.button.rejected {
    color: #16181c;
    background-color: color-mix(in srgb, var(--amber) 80%, #fff);
}

.button.danger {
    background-color: color-mix(in srgb, var(--red) 80%, #000);
}

.empty {
    color: var(--muted);
    text-align: center;
    padding: 2lh 0;
}

.hide {
    display: none;
}