/* ============================================================================
   FieldOps design system — the single source of colour, type and spacing.

   WHY THIS FILE EXISTS. Before it, app.css was the stock Blazor template (five
   colours, all of them from the error boundary) and every page carried its own
   <style> block. Across 21 pages that produced 607 hardcoded colours and 118
   distinct shades — mostly greens invented one page at a time. That is not a
   styling problem, it is the absence of a system, and it is what William meant
   by "messy busy and the colors are blah... it looks like a 10 year old kid
   built it" (2026-08-13).

   THE RULE THAT MATTERS: pages must not name colours. They use these tokens.
   A page with a #hex in it has escaped the system and will drift again.

   Because everything routes through here, re-tinting the whole product later is
   editing the block below — not revisiting 21 files.

   WHY IT LIVES IN FieldOps.UI AND NOT THE WEBSITE. FieldOps.UI is a shared Razor
   class library: Dashboard and OperatorScoreDetail render on the WEBSITE and
   inside the CREW APP from these same files. Parked in the website's wwwroot,
   the tokens reached the website only, and those two components rendered in the
   app with every var() undefined — i.e. unstyled. From here both ends load the
   one file as _content/FieldOps.UI/theme.css.

   NOTHING IN THIS FILE MAY TARGET A BARE ELEMENT (body, input, a). It is loaded
   by the crew app too, whose pages style plain `input` for gloved hands; an
   `input[type=password]` rule here outranks their `input` rule and would shrink
   every field on a phone. Element-level rules live in the website's app.css,
   which only the website loads.
   ============================================================================ */

:root {
    /* ---- brand -----------------------------------------------------------
       William's colours: yellow, black, and some purple. Used with intent:

       BLACK is the chrome. Nav and page furniture recede so the data is what
       you look at — the one structural idea worth taking from New Holland's
       portal, where a navy frame lets the map own the screen.

       YELLOW is the brand and the highlight. It is deliberately NOT a text or
       button colour: yellow on white is around 1.4:1 and unreadable. It marks —
       the logo, the active nav rail, a focus ring, the accent edge on a header.

       PURPLE is what you click. It carries real contrast on white, so links,
       primary buttons and selected states use it, leaving yellow free to mark
       without competing.                                                      */
    /* SAMPLED FROM THE STURDYOX LOGO, not guessed: the mark is #FCF000 yellow,
       #242424 black and #FCFCFC white. Using the real values means the chrome
       and the logo are the same brand rather than two near-misses.
       The chrome black sits a shade deeper than the logo's outline so the mark
       reads as sitting ON the bar rather than dissolving into it.             */
    --brand-black:      #1A1A1A;
    --brand-black-soft: #262626;
    --brand-yellow:     #FCF000;
    --brand-yellow-dim: #C9BE00;
    --brand-purple:     #6B4E9B;
    --brand-purple-dk:  #533C7A;
    --brand-purple-lt:  #F3EFF9;
    --rail-ink:         #D6D6D6;   /* text on the black chrome */

    /* ---- neutrals: NEUTRAL greys, not warm. A pure #FCF000 yellow next to
       warm-tinted greys reads as two unrelated palettes; against neutral greys
       the yellow is the only warm thing on screen, which is the point.        */
    --paper:      #FFFFFF;   /* content sits on white — long tables of numbers
                                are simply easier to read on it than on the old
                                pale-green tint, which also made every white
                                card look grubby */
    --paper-2:    #F7F7F7;
    --line:       #E4E4E4;
    --line-strong:#C9C9C9;
    --ink:        #1A1A1A;
    --ink-2:      #4A4A4A;
    --ink-3:      #767676;   /* labels, secondary text */

    /* ---- semantic: reserved for DATA. Never decoration.
       On the old site green was the brand, the header, the buttons AND the
       score colour, so a green number told you nothing. Here a colour on a
       figure always means the figure is good or bad.                          */
    --good:   #2E7D46;
    --good-bg:#EAF4EC;
    --warn:   #A9701B;
    --warn-bg:#FBF2E0;
    --bad:    #B3261E;
    --bad-bg: #FBEBEA;

    /* ---- type scale. Four sizes and two weights, so the eye has somewhere to
       land. The old pages ran everything between .75 and 1rem, which is why a
       $146,884 total looked exactly like a column label.                      */
    --fs-display: 1.75rem;
    --fs-title:   1.15rem;
    --fs-body:    0.9rem;
    --fs-small:   0.78rem;

    /* ---- spacing: one 4px rhythm, so gaps stop being guessed per page ----- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    --radius:    10px;
    --radius-sm: 6px;
    --shadow:    0 1px 2px rgba(20,20,15,.06), 0 4px 16px rgba(20,20,15,.06);
}

/* ---- page shell ---------------------------------------------------------- */
.fo-page { max-width: 1400px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }

/* Page heading: title left, actions right, a hairline under. One per page —
   the old pages opened with a heading, a paragraph, a banner and a note before
   any data appeared. */
.fo-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
           padding-bottom: var(--s3); border-bottom: 2px solid var(--brand-black);
           margin-bottom: var(--s5); }
.fo-head h1 { font-size: var(--fs-display); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.fo-head .sub { color: var(--ink-3); font-size: var(--fs-small); }
.fo-head .spacer { margin-left: auto; }

/* ---- numbers are the hero ------------------------------------------------
   Money and scores get size and tabular figures; labels shrink and go grey.  */
.fo-figure { font-size: var(--fs-display); font-weight: 700; font-variant-numeric: tabular-nums;
             letter-spacing: -.02em; }
.fo-label  { font-size: var(--fs-small); color: var(--ink-3); text-transform: uppercase;
             letter-spacing: .06em; }
.num       { font-variant-numeric: tabular-nums; }

/* ---- cards --------------------------------------------------------------- */
.fo-card { background: var(--paper); border: 1px solid var(--line);
           border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s4); }
.fo-cards { display: grid; gap: var(--s3);
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---- tables --------------------------------------------------------------
   Black header, not brand-coloured: the header is structure, and colouring it
   competes with the data underneath.                                          */
.fo-table { width: 100%; border-collapse: collapse; background: var(--paper); }
.fo-table th, .fo-table td { padding: var(--s2) var(--s3); text-align: right; white-space: nowrap; }
.fo-table thead th { background: var(--brand-black); color: var(--paper); font-weight: 600;
                     font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .05em;
                     position: sticky; top: 0; z-index: 2; }
.fo-table th:first-child, .fo-table td:first-child { text-align: left; }
.fo-table tbody tr { border-bottom: 1px solid var(--line); }
.fo-table tbody tr:hover td { background: var(--brand-purple-lt); }
.fo-table tfoot th { background: var(--paper-2); font-weight: 700; border-top: 2px solid var(--brand-black); }
.fo-table td.money, .fo-table th.money { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Wide tables scroll in their own box — never the page body, which would drag
   any sticky column off-screen with it. */
.fo-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
             background: linear-gradient(to left, rgba(20,20,15,.08), rgba(20,20,15,0) 24px) right / 24px 100% no-repeat; }
.fo-scroll .fo-table { border: 0; }

/* ---- buttons -------------------------------------------------------------
   ONE primary per view. William on the grading page: "there is a million
   buttons all seem to do the same thing but I dont know for sure so when I edit
   something I click everything just incase." A screen with three equal-looking
   buttons is a screen nobody can act on confidently.                          */
.fo-btn { display: inline-flex; align-items: center; gap: var(--s2);
          padding: var(--s2) var(--s4); border-radius: var(--radius-sm);
          border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
          font-size: var(--fs-body); font-weight: 600; cursor: pointer; }
.fo-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-3); }
.fo-btn:disabled { opacity: .45; cursor: not-allowed; }
.fo-btn.primary { background: var(--brand-purple); border-color: var(--brand-purple); color: var(--paper); }
.fo-btn.primary:hover:not(:disabled) { background: var(--brand-purple-dk); border-color: var(--brand-purple-dk); }
.fo-btn.danger  { background: var(--bad); border-color: var(--bad); color: var(--paper); }
.fo-btn.ghost   { border-color: transparent; background: transparent; color: var(--brand-purple); }
:where(.fo-btn, a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--brand-yellow); outline-offset: 2px; }

/* ---- chips / states ------------------------------------------------------ */
.fo-chip { display: inline-flex; align-items: center; gap: var(--s1);
           padding: 2px var(--s2); border-radius: 999px; font-size: var(--fs-small);
           background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.fo-chip.good { background: var(--good-bg); border-color: transparent; color: var(--good); }
.fo-chip.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.fo-chip.bad  { background: var(--bad-bg);  border-color: transparent; color: var(--bad); }
.score.good { color: var(--good); font-weight: 700; }
.score.warn { color: var(--warn); font-weight: 700; }
.score.bad  { color: var(--bad);  font-weight: 700; }

/* ---- notes ---------------------------------------------------------------
   William: "get rid of all the notes. only very simple necessary ones should
   remain." One quiet style, one line. Anything longer belongs behind .fo-why.  */
.fo-note { color: var(--ink-3); font-size: var(--fs-small); margin: var(--s2) 0 0; }
.fo-alert { display: flex; gap: var(--s2); padding: var(--s3);
            border-radius: var(--radius-sm); font-size: var(--fs-small);
            background: var(--warn-bg); color: var(--warn);
            border-left: 3px solid var(--warn); }

/* Explanation on demand, not permanently on the page. */
.fo-why > summary { cursor: pointer; color: var(--brand-purple); font-size: var(--fs-small);
                    list-style: none; }
.fo-why > summary::-webkit-details-marker { display: none; }
.fo-why > summary::before { content: "ⓘ "; }
.fo-why > div { margin-top: var(--s2); padding: var(--s3); background: var(--paper-2);
                border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-small); }

/* ---- forms ------------------------------------------------------------- */
.fo-field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); }
.fo-field > span { font-size: var(--fs-small); color: var(--ink-3); }

/* ---- links --------------------------------------------------------------- */

@media (max-width: 700px) {
    :root { --fs-display: 1.4rem; --fs-title: 1.05rem; }
    .fo-page { padding: var(--s4) var(--s3) var(--s6); }
}