/* ═══════════════════════════════════════════════════════════════════════════════════════
   Sophie's Babysitting — the whole stylesheet
   ═══════════════════════════════════════════════════════════════════════════════════════

   Read this top to bottom and you will know how the site looks. There is no framework
   underneath it and nothing is hidden in another file.

   HOW IT IS ORGANISED

     1. Tokens      the named values — colours, spacing, type sizes. Change one here and it
                    changes everywhere it is used.
     2. Reset       a few sensible defaults browsers do not agree on.
     3. Layout      the page shell.
     4. Components  buttons, cards, forms, the quote table.
     5. Utilities   a small handful of helpers. Deliberately small.

   WHY THERE IS NO TAILWIND OR BOOTSTRAP

   Because you should be able to look at a colour on the screen, search this file for its
   name, and find the one line that decides it. With a utility framework the colour lives in
   a class name like `bg-emerald-800` scattered across forty files, and changing it means
   changing all forty. `--colour-primary` is defined once, on line 40-ish, and used by name.

   HOW TO CHANGE THE COLOUR SCHEME

   Change the values in `:root` below. Nothing else needs touching. Try it: set
   `--colour-primary` to `#7c3aed` and every button, link and highlight turns purple.
   ═══════════════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Tokens ─────────────────────────────────────────────────────────────────────────
   Every value the rest of the file is allowed to use. If you find yourself typing a raw
   colour or a raw pixel value further down, it probably wants to be a token up here. */

:root {
    /* Colour — the warm, calm end of things. This is a service run by a fifteen-year-old
       for families she knows, so it should feel like a kitchen table rather than a bank. */
    --colour-primary:          #2f5d50;   /* deep green: buttons, links, headings */
    --colour-primary-hover:    #26493f;
    --colour-primary-soft:     #e8f0ec;   /* tinted background for highlighted panels */

    --colour-accent:           #c2703d;   /* warm terracotta: prices, the occasional emphasis */
    --colour-accent-soft:      #fbeee4;

    --colour-page:             #f7f6f3;   /* the page behind everything */
    --colour-surface:          #ffffff;   /* cards and panels sitting on it */
    --colour-surface-sunken:   #f2f1ed;   /* inputs, table stripes */

    --colour-text:             #22222a;
    --colour-text-muted:       #63636e;
    --colour-text-inverse:     #ffffff;

    --colour-border:           #e2e0da;
    --colour-border-strong:    #cbc8bf;

    --colour-good:             #2f6f4f;   /* accepted, available */
    --colour-good-soft:        #e7f2ec;
    --colour-warn:             #9a6a13;   /* pending, needs attention */
    --colour-warn-soft:        #fbf1dc;
    --colour-bad:              #a33a32;   /* declined, unavailable, errors */
    --colour-bad-soft:         #fbeae8;

    /* Spacing — a scale rather than arbitrary numbers, so things line up without anyone
       having to think about it. Each step is roughly 1.5x the one before. */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */

    /* Type. The body size is 17px rather than the usual 16 — this gets read on phones, often
       one-handed, often by somebody in a hurry trying to sort out a Friday night. */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-size-small:  0.875rem;
    --font-size-body:   1.0625rem;
    --font-size-large:  1.25rem;
    --font-size-title:  1.5rem;
    --font-size-hero:   2rem;

    --line-height-tight: 1.25;
    --line-height-body:  1.55;

    /* Shape */
    --radius-small:  6px;
    --radius:        10px;
    --radius-large:  16px;

    --shadow-soft:  0 1px 2px rgba(30, 28, 24, 0.06), 0 2px 8px rgba(30, 28, 24, 0.04);
    --shadow-lift:  0 2px 4px rgba(30, 28, 24, 0.08), 0 8px 24px rgba(30, 28, 24, 0.08);

    /* How long things take to move. Anything slower than this starts to feel sluggish. */
    --transition: 140ms ease;

    /* The widest the content ever gets. Long lines of text are genuinely harder to read. */
    --content-width: 44rem;
}

/* Dark mode. Only the colour tokens change — every rule below is written in terms of the
   names, so none of them need repeating here. That is the whole payoff of using tokens. */
@media (prefers-color-scheme: dark) {
    :root {
        --colour-primary:        #7fb3a0;
        --colour-primary-hover:  #96c4b3;
        --colour-primary-soft:   #1e2a26;

        --colour-accent:         #dc9868;
        --colour-accent-soft:    #2b211a;

        --colour-page:           #17171b;
        --colour-surface:        #202027;
        --colour-surface-sunken:  #1a1a20;

        --colour-text:           #ececf0;
        --colour-text-muted:     #a2a2ad;
        --colour-text-inverse:   #17171b;

        --colour-border:         #32323b;
        --colour-border-strong:  #45454f;

        --colour-good:           #7dc4a0;
        --colour-good-soft:      #1b2a23;
        --colour-warn:           #d8a94e;
        --colour-warn-soft:      #2a2318;
        --colour-bad:            #e08c84;
        --colour-bad-soft:       #2b1c1b;

        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
    }
}


/* ── 2. Reset ─────────────────────────────────────────────────────────────────────────── */

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--colour-text);
    background: var(--colour-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--line-height-tight); margin: 0 0 var(--space-4); font-weight: 600; }
h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-title); }
h3 { font-size: var(--font-size-large); }

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

a { color: var(--colour-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--colour-primary-hover); }

img { max-width: 100%; height: auto; }

/* Anything focused by keyboard gets a clearly visible ring. Never remove this without
   putting something equally visible in its place — it is the only way some people can tell
   where they are on the page. */
:focus-visible {
    outline: 3px solid var(--colour-primary);
    outline-offset: 2px;
    border-radius: var(--radius-small);
}

/* Respect people who have asked their device to stop animating things. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── 3. Layout ─────────────────────────────────────────────────────────────────────────
   A header across the top and a single centred column beneath it. No sidebar: this is used
   on a phone far more often than on a laptop, and a sidebar on a phone is just a menu
   pretending to be furniture. */

.page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.site-header {
    background: var(--colour-surface);
    border-bottom: 1px solid var(--colour-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-brand {
    font-weight: 650;
    font-size: var(--font-size-large);
    color: var(--colour-primary);
    text-decoration: none;
    margin-right: auto;
}

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

.site-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    text-decoration: none;
    color: var(--colour-text-muted);
    font-size: var(--font-size-small);
    font-weight: 550;
    transition: background var(--transition), color var(--transition);
}

.site-nav a:hover { background: var(--colour-surface-sunken); color: var(--colour-text); }

/* Blazor adds this class to whichever link matches the current page. */
.site-nav a.active { background: var(--colour-primary-soft); color: var(--colour-primary); }

.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-7);
}

.site-footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
    color: var(--colour-text-muted);
    font-size: var(--font-size-small);
}

.stack > * + * { margin-top: var(--space-5); }


/* ── 4. Components ─────────────────────────────────────────────────────────────────────
   Each one is a block with a single job. Class names use the pattern
   `.block`, `.block__part`, `.block--variant`, so a name tells you where it belongs. */

/* The admin section bar ---------------------------------------------------------------
   Scrolls sideways rather than wrapping, so on a phone it stays one tidy line you can swipe
   instead of a block of links that pushes the actual content off the screen. */

.admin-nav {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    border-bottom: 1px solid var(--colour-border);

    /* Hides the scrollbar without disabling the scrolling. */
    scrollbar-width: none;
}

.admin-nav::-webkit-scrollbar { display: none; }

.admin-nav a {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--colour-text-muted);
    font-weight: 550;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.admin-nav a:hover { background: var(--colour-surface-sunken); color: var(--colour-text); }
.admin-nav a.active { background: var(--colour-primary); color: var(--colour-text-inverse); }

/* Cards ------------------------------------------------------------------------------ */

.card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-large);
    padding: var(--space-5);
    box-shadow: var(--shadow-soft);
}

.card--highlight {
    background: var(--colour-primary-soft);
    border-color: transparent;
}

.card__title { margin: 0 0 var(--space-2); font-size: var(--font-size-large); }
.card__note  { color: var(--colour-text-muted); font-size: var(--font-size-small); }

/* Buttons ---------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);

    /* Never smaller than this. It is the size a fingertip can reliably hit, and it is the
       accessibility guideline for a touch target. */
    min-height: 44px;
}

.button:active { transform: translateY(1px); }

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button--primary { background: var(--colour-primary); color: var(--colour-text-inverse); }
.button--primary:hover:not(:disabled) { background: var(--colour-primary-hover); color: var(--colour-text-inverse); }

.button--quiet {
    background: var(--colour-surface);
    color: var(--colour-text);
    border-color: var(--colour-border-strong);
}
.button--quiet:hover:not(:disabled) { background: var(--colour-surface-sunken); }

.button--danger { background: var(--colour-bad); color: var(--colour-text-inverse); }

.button--wide { width: 100%; }

/* Forms ------------------------------------------------------------------------------ */

.field { margin-bottom: var(--space-5); }

.field__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.field__hint {
    display: block;
    font-weight: 400;
    font-size: var(--font-size-small);
    color: var(--colour-text-muted);
    margin-top: var(--space-1);
}

.field__error {
    display: block;
    color: var(--colour-bad);
    font-size: var(--font-size-small);
    margin-top: var(--space-2);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: var(--space-3);
    font: inherit;
    color: var(--colour-text);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius);
    min-height: 44px;
    transition: border-color var(--transition);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--colour-primary); }
.textarea { min-height: 5.5rem; resize: vertical; }

/* A tick box and its label, arranged so the whole row is clickable rather than just the
   twelve pixels of the box itself. */
.choice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.choice:hover { border-color: var(--colour-primary); background: var(--colour-surface); }
.choice--on   { border-color: var(--colour-primary); background: var(--colour-primary-soft); }

.choice input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--colour-primary); flex-shrink: 0; }

.choice__body { flex: 1; }
.choice__name { font-weight: 600; display: block; }
.choice__note { color: var(--colour-text-muted); font-size: var(--font-size-small); display: block; }

.choice__price {
    font-weight: 650;
    color: var(--colour-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A row of mutually exclusive options, styled as buttons rather than radios. Much easier
   to hit on a phone than a radio button. */
.segmented { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.segmented button {
    flex: 1 1 auto;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    background: var(--colour-surface);
    border: 1px solid var(--colour-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--transition), background var(--transition);
}

.segmented button:hover { border-color: var(--colour-primary); }

.segmented button[aria-pressed="true"] {
    background: var(--colour-primary);
    border-color: var(--colour-primary);
    color: var(--colour-text-inverse);
    font-weight: 600;
}

/* The quote ------------------------------------------------------------------------- */

.quote { border-top: 1px solid var(--colour-border); padding-top: var(--space-4); }

.quote__line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    align-items: baseline;
}

.quote__label { color: var(--colour-text-muted); }
.quote__label--reduction { color: var(--colour-good); }

/* tabular-nums makes every digit the same width, so a column of prices lines up on the
   decimal point instead of wobbling. */
.quote__amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

.quote__total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: baseline;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 2px solid var(--colour-border-strong);
    font-size: var(--font-size-large);
    font-weight: 650;
}

.quote__total .quote__amount { color: var(--colour-accent); font-size: var(--font-size-title); }
.quote__rate { color: var(--colour-text-muted); font-size: var(--font-size-small); text-align: right; }

/* Badges ----------------------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: var(--font-size-small);
    font-weight: 600;
}

.badge--pending   { background: var(--colour-warn-soft); color: var(--colour-warn); }
.badge--accepted  { background: var(--colour-good-soft); color: var(--colour-good); }
.badge--declined,
.badge--cancelled { background: var(--colour-bad-soft);  color: var(--colour-bad); }
.badge--completed { background: var(--colour-surface-sunken); color: var(--colour-text-muted); }

/* Messages --------------------------------------------------------------------------- */

.notice {
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.notice--info { background: var(--colour-primary-soft); color: var(--colour-primary); }
.notice--good { background: var(--colour-good-soft);    color: var(--colour-good); }
.notice--warn { background: var(--colour-warn-soft);    color: var(--colour-warn); }
.notice--bad  { background: var(--colour-bad-soft);     color: var(--colour-bad); }

/* Loading ---------------------------------------------------------------------------- */

.spinner {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* The screen shown while the app itself is still downloading, before any of it runs. */
.app-loading {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    gap: var(--space-4);
    text-align: center;
    color: var(--colour-text-muted);
}

/* Blazor's own error bar, restyled to match the rest of the site. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-4);
    background: var(--colour-bad-soft);
    color: var(--colour-bad);
    box-shadow: var(--shadow-lift);
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }


/* ── 5. Utilities ──────────────────────────────────────────────────────────────────────
   Kept deliberately short. Every utility added here is a small invitation to stop naming
   things, and named components are much easier to change later. */

.muted        { color: var(--colour-text-muted); }
.small        { font-size: var(--font-size-small); }
.centred      { text-align: center; }
.row          { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow         { flex: 1; }

/* Present to screen readers, invisible to everyone else. For labels that would be clutter
   on screen but are needed to make sense of a control without sight. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}