@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
    /* Colors */
    --color-bg: #f8f7f4;
    --color-text: #1a1a1a;
    --color-text-muted: #71717a;
    --color-primary: #0ea5e9;
    --color-primary-hover: #0284c7;
    --color-border: #d4d4d8;
    --color-error: #dc2626;

    /* Light tints used as card backgrounds for improving/worsening biomarker
       cards. Mirrors the success/error message palette so the semantic meaning
       is consistent across the UI. */
    --color-tint-success: #dcfce7;
    --color-tint-success-border: #bbf7d0;
    --color-tint-error: #fee2e2;
    --color-tint-error-border: #fecaca;
    --color-success: #166534;

    /* One step darker than --color-primary-hover, used for the active/visited
       state of body links where a third shade is needed for contrast. */
    --color-primary-active: #0369a1;

    /* Pure white — used for input field backgrounds and text on filled primary
       buttons. Kept separate from --color-bg so the two can diverge if the
       background palette changes. */
    --color-surface: #ffffff;
    --color-text-on-primary: #ffffff;

    /* Nav-specific colors — the dark nav bar uses its own palette that sits
       outside the main light-mode surface, so these are separate tokens rather
       than overloading the surface variables. */
    --color-nav-bg: #1a1a1a;
    --color-nav-text: #f8f7f4;
    --color-nav-link: #bae6fd;
    --color-nav-link-muted: #a1a1aa;
    --color-nav-border-accent: #38bdf8;
    --color-nav-border-accent-hover: #7dd3fc;

    /* Label color sits between --color-text and --color-text-muted — dark
       enough to be legible but lighter than body copy to reduce visual weight
       on dense forms. */
    --color-label: #3f3f46;

    /* Muted body text used on the landing subtitle in the light theme. */
    --color-text-subtle: #6b6b6b;

    /* Slightly darker than --color-bg, used for low-emphasis surface areas
       such as category header rows in tables. */
    --color-surface-muted: #e8eaed;

    /* Chart-specific color tokens. --chart-line matches --color-primary so the
       chart line is consistent with the rest of the UI's primary accent color.
       --chart-range-bg matches Dracula's reference band color so the two apps
       share the same semantic green for "normal range". */
    --chart-line: #0ea5e9;
    --chart-line-bg: rgba(14, 165, 233, 0.1);
    --chart-hover: #0284c7;
    --chart-range-bg: rgba(72, 187, 120, 0.15);
    --chart-range-border: rgba(72, 187, 120, 0.3);

    /* Spacing scale (0.25 rem steps) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.2rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 6rem;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    font-family: var(--font-sans);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    height: 3.5rem;
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text);
    flex-shrink: 0;
}

.nav__site-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--color-nav-text);
    text-decoration: none;
}

.nav__logo {
    height: 2rem;
    width: auto;
}

.nav__site-name:hover {
    color: var(--color-nav-text);
    text-decoration: none;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav__links a {
    color: var(--color-nav-link);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav__links a:hover {
    color: var(--color-nav-text);
}

.nav__links a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5);
    border-radius: 2px;
}

.nav__username {
    font-size: 0.9rem;
    color: var(--color-nav-link-muted);
}

/* The logout button sits inline with nav links, so it inherits the nav's
   visual language rather than the general form button style. */
.nav__logout-form {
    display: inline;
}

/* ── Page content wrapper ────────────────────────────────────────────────── */

/* Grows to fill remaining vertical space so the landing page can center
   itself within it using flex, while other pages simply flow from the top. */
.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Landing page ────────────────────────────────────────────────────────── */

/* The landing page overrides the nav block to empty, so .page-content fills
   the full viewport height. The .landing element then centers itself within
   that space. */
.landing {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
    /* min-height: 0 lets the flex child shrink below its content size so the
       100dvh body constraint actually takes effect on small viewports. */
    min-height: 0;
    overflow: auto;
}

.landing__title {
    font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl));
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: var(--space-4);
}

.landing__subtitle {
    font-size: clamp(var(--text-base), 3vw, var(--text-xl));
    font-weight: 400;
    color: var(--color-text-subtle);
    letter-spacing: 0.08em;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

h1 {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--space-6);
}

h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
}

h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--space-4);
}

p {
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary-hover);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-active);
    text-decoration: underline;
}

/* ── Page main content area ──────────────────────────────────────────────── */

main {
    width: 100%;
    max-width: 480px;
    margin: 3rem auto;
    padding: 0 var(--space-6);
}

.main--wide {
    max-width: 960px;
}

/* The page-header sits above table content and needs its own bottom margin
   because the h1 inside it would otherwise push against the action button
   rather than the content below. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.page-header h1 {
    margin-bottom: 0;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

/* Django's as_p wraps each field in a <p>, so we target those directly.
   The margin-bottom on <p> above already provides spacing between fields. */
form p {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-label);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 0.6rem var(--space-3);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

textarea {
    resize: vertical;
    min-height: 6rem;
}

button[type="submit"] {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 0.65rem var(--space-6);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-primary-hover);
}

button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

button[type="submit"] + a {
    margin-left: var(--space-4);
}

/* The nav logout button overrides the general submit style since it lives in
   the dark nav bar and needs its own visual treatment. */
.nav__logout-form button[type="submit"] {
    display: inline;
    margin-top: 0;
    padding: var(--space-1) var(--space-3);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-nav-link);
    background: none;
    border: 1px solid var(--color-nav-border-accent);
    border-radius: 4px;
}

.nav__logout-form button[type="submit"]:hover {
    background-color: transparent;
    border-color: var(--color-nav-border-accent-hover);
    color: var(--color-nav-text);
}

/* The focus ring uses a lighter opacity here because the nav background is
   dark — the standard ring reads clearly against it. */
.nav__logout-form button[type="submit"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.5);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.button {
    display: inline-block;
    padding: 0.65rem var(--space-6);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

.button--primary {
    color: var(--color-text-on-primary);
    background-color: var(--color-primary);
    border: 1px solid transparent;
}

.button--primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-text-on-primary);
    text-decoration: none;
}

/* The secondary button uses a transparent fill so it reads as a lower-emphasis
   action alongside a primary button. The border provides enough affordance that
   it still reads as interactive without competing visually. */
.button--secondary {
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-border);
}

.button--secondary:hover {
    /* A very light tint of the surface color gives feedback without introducing
       a new color that isn't already in the palette. */
    background-color: var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

/* Header cells use a smaller, slightly muted style to visually separate them
   from data rows without adding a background or outer border. */
.table th {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-label);
}

/* Category header rows span all columns and use a light tint to visually
   group the rows beneath them. */
.table__category-header {
    background-color: var(--color-surface-muted);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-6);
}

.card__header {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.card__title {
    font-size: var(--text-lg);
    font-weight: 700;
}

.card__content {
    color: var(--color-text);
}

/* The global reset strips padding/margin from all elements, which causes list
   markers to render outside the card boundary. Restore standard indentation
   for prose content rendered inside cards (e.g. the assessment HTML). */
.card__content ul,
.card__content ol {
    padding-left: 1.5em;
    margin-bottom: var(--space-4);
}

.card__content li + li {
    margin-top: var(--space-1);
}

.card__content table {
    width: 100%;
    border-collapse: collapse;
}

.card__content th,
.card__content td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.card__content th {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-label);
}

/* ── Flash messages ──────────────────────────────────────────────────────── */

/* Django messages framework renders one message per item. We display them
   as a stacked list just below the nav, before the page content. */
.messages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.message {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 500;
}

.message--success {
    background-color: #dcfce7;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}

.message--error {
    background-color: #fee2e2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

.message--warning {
    background-color: #fef9c3;
    color: #854d0e;
    border-bottom: 1px solid #fef08a;
}

.message--info {
    background-color: #e0f2fe;
    color: #075985;
    border-bottom: 1px solid #bae6fd;
}

/* ── Error and help text ─────────────────────────────────────────────────── */

/* Django renders field errors as a <ul class="errorlist"> immediately before
   the input. */
.errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.errorlist li {
    font-size: 0.85rem;
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* Django renders help text as a <span class="helptext"> after the input. */
.helptext {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* ── Important biomarker cards ───────────────────────────────────────────── */

.biomarker-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.biomarker-cards__empty {
    color: var(--color-text-muted);
}

.biomarker-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.biomarker-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    text-decoration: none;
    color: var(--color-text);
}

/* Card background encodes trend: is this biomarker getting better or worse?
   Value text color (in-range/out-of-range) separately encodes current status. */
.biomarker-card--improving {
    background-color: var(--color-tint-success);
    border-color: var(--color-tint-success-border);
}

.biomarker-card--worsening {
    background-color: var(--color-tint-error);
    border-color: var(--color-tint-error-border);
}

.biomarker-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-label);
}

.biomarker-card__body {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.biomarker-card__value {
    font-size: var(--text-lg);
    font-weight: 700;
}

.biomarker-card__value--in-range {
    color: var(--color-success);
}

.biomarker-card__value--out-of-range {
    color: var(--color-error);
}


.biomarker-card__previous {
    font-size: var(--text-sm);
}

.biomarker-card__previous--in-range {
    color: var(--color-success);
}

.biomarker-card__previous--out-of-range {
    color: var(--color-error);
}

.biomarker-card__footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.biomarker-card__range {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-left: auto;
}

/* ── Trend list ──────────────────────────────────────────────────────────── */

.trend-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.trend-list__item {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trend-list__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    color: var(--color-text);
    text-decoration: none;
}

.trend-list__empty {
    color: var(--color-text-muted);
}

/* ── Drop zone upload UI ─────────────────────────────────────────────────── */

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.drop-zone:hover,
.drop-zone:focus-visible {
    border-color: var(--color-primary);
    background-color: rgba(14, 165, 233, 0.04);
    outline: none;
}

/* Highlighted state while a drag is in progress over the zone. */
.drop-zone--active {
    border-color: var(--color-primary);
    background-color: rgba(14, 165, 233, 0.08);
}

/* Inert state once uploading has started — no pointer interaction allowed. */
.drop-zone--disabled {
    pointer-events: none;
    opacity: 0.4;
    cursor: default;
}

.drop-zone__prompt {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0;
}

.drop-zone__browse-link {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.drop-zone__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* The real file input is visually hidden; the drop zone acts as its proxy. */
.drop-zone__input {
    display: none;
}

/* ── File list ───────────────────────────────────────────────────────────── */

.file-list {
    list-style: none;
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.file-list__item {
    display: grid;
    /* name takes remaining space; size and status are fixed-width enough to
       not need explicit sizing — auto handles them. */
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.file-list__item--success {
    border-color: var(--color-tint-success-border);
    background-color: var(--color-tint-success);
}

.file-list__item--error {
    border-color: var(--color-tint-error-border);
    background-color: var(--color-tint-error);
}

.file-list__name {
    font-size: var(--text-sm);
    font-weight: 500;
    /* Prevent very long filenames from breaking the layout. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list__size {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.file-list__status {
    font-size: var(--text-sm);
    white-space: nowrap;
}

.file-list__item--success .file-list__status {
    color: var(--color-success);
}

.file-list__item--error .file-list__status {
    color: var(--color-error);
}

/* Progress bar spans the full width below the filename row. */
.file-list__progress-wrap {
    grid-column: 1 / -1;
    height: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.file-list__progress-bar {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* ── Upload actions / done links ──────────────────────────────────────────── */

.upload-actions {
    margin-top: var(--space-6);
}

.upload-done {
    margin-top: var(--space-6);
}

/* ── Trend chart ─────────────────────────────────────────────────────────── */

.trend-chart-container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-6);
    margin-top: var(--space-4);
}

.trend-chart {
    /* cursor: grab signals that the chart is pannable. */
    cursor: grab;
}

.trend-chart:active {
    cursor: grabbing;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

button.toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    margin-top: 0;
    font-size: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}

button.toolbar__button:hover {
    color: var(--color-text);
    border-color: var(--color-border);
}

button.toolbar__button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4);
}

/* ── Pill badges ─────────────────────────────────────────────────────────── */

.pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: var(--space-2);
}

.pill--public {
    background-color: var(--color-tint-error);
    color: var(--color-error);
}