/* ============================================================
   HireJuno — surface.css

   The shared look for the three tools people work in all day:
   the customer app (/app/), the contractor portal (/pro/) and the
   internal console (/admin/).

   Load AFTER brand.css. It keeps brand.css's spacing, type and radii
   and re-points only the colour surfaces.

   Why: brand.css is a marketing palette — warm cream (#FAF8F3), sand
   (#F3EFE6) and tinted blocks. That reads well on a landing page you
   look at for thirty seconds. In a tool someone stares at for a whole
   shift it is noisy, and three surfaces each tinting differently made
   the product feel like three products.

   So: white paper, one barely-there grey for recessed areas, neutral
   grey lines, and green used only where it means something — never as
   decoration. Status colours stay, but as quiet tints rather than
   saturated blocks.

   The marketing site does NOT load this and keeps its warm palette.
   ============================================================ */

:root {
  /* ---- surfaces: white paper on a near-white page ---- */
  --cream:        #FFFFFF;   /* page background */
  --paper:        #FFFFFF;   /* cards, panels, rows */
  --sand:         #F6F7F9;   /* recessed: table headers, wells, chips */

  /* ---- lines: neutral grey, not warm ---- */
  --line:         #E7E9ED;
  --line-strong:  #D6DAE1;

  /* ---- text: slightly cooler, keeps AA on white ---- */
  --ink:          #14181F;
  --ink-soft:     #545C6B;
  --ink-faint:    #6A7280;   /* was #838B99 — 3.4:1 on white, failed AA */

  /* ---- accent: one green, used sparingly ---- */
  --juno-green:        #2E8B44;
  --juno-green-dark:   #246B35;
  --juno-green-deep:   #1C5A2C;
  --juno-green-tint:   #EDF6EF;   /* was a saturated mint */
  --juno-green-bright: #2FA24C;

  /* ---- navy is now structural, not decorative ---- */
  --navy:         #1B2430;
  --navy-deep:    #131A24;
  --navy-soft:    #38424F;

  /* ---- status: quiet tints ---- */
  --success:      #1F8A4C;
  --warning:      #B0730C;
  --danger:       #C0392F;
  --info:         #2563C9;

  /* ---- shadows: almost nothing. borders do the separating ---- */
  --shadow-sm:    0 1px 2px rgba(16, 22, 32, .04);
  --shadow-md:    0 1px 3px rgba(16, 22, 32, .06), 0 4px 12px rgba(16, 22, 32, .04);
  --shadow-lg:    0 2px 6px rgba(16, 22, 32, .06), 0 12px 28px rgba(16, 22, 32, .07);
  --shadow-green: 0 1px 2px rgba(16, 22, 32, .06);

  /* tint slots used across the surfaces */
  --tint-info:    #EEF3FC;
  --tint-warn:    #FDF6E9;
  --tint-danger:  #FCEFEE;
  --tint-neutral: #F2F4F7;
}

/* ============================================================
   Shared primitives — so the same idea looks the same in all
   three surfaces instead of being re-invented per page.
   ============================================================ */

/* ---- status pills: one shape, quiet fills ---- */
.pill,
.a-pill {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .69rem;
  letter-spacing: .02em;
  text-transform: none;               /* SHOUTING CAPS everywhere was the loudest part */
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pill--offered,  .a-pill--warn    { background: var(--tint-warn);    color: #8A5B08; border-color: #F0E2C4; }
.pill--accepted, .a-pill--ok      { background: var(--juno-green-tint); color: var(--juno-green-deep); border-color: #CFE6D6; }
.pill--en_route, .pill--started,
.a-pill--live,   .a-pill--info    { background: var(--tint-info);    color: #1F4FA8; border-color: #D3E0F5; }
.pill--completed,.a-pill--neutral { background: var(--tint-neutral);  color: var(--ink-soft); border-color: var(--line); }
.pill--cancelled,.pill--declined,
.a-pill--bad                      { background: var(--tint-danger);  color: #A3302A; border-color: #F2D4D2; }

/* ---- cards and panels: border-led, not shadow-led ---- */
.panel, .a-card, .jcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.jcard:hover { box-shadow: var(--shadow-sm); transform: none; border-color: var(--line-strong); }

/* ---- section headings: quieter ---- */
.pro-sec, .a-sec {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- notices: tinted, bordered, never saturated ---- */
.notice, .blockers, .mock-note, .err-inline {
  border-radius: 9px;
  border-width: 1px;
  border-style: solid;
}
.notice   { background: var(--juno-green-tint); border-color: #CFE6D6; }
.blockers { background: var(--tint-warn);       border-color: #F0E2C4; color: #7A5406; }
.err-inline { background: var(--tint-danger);   border-color: #F2D4D2; color: #A3302A; }

/* ---- inputs: one style everywhere ---- */
.a-field input, .a-field select, .a-field textarea,
.day-edit input, .wk-times input, .svc-chip, .form-input {
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}
.a-field input:focus, .a-field select:focus, .a-field textarea:focus,
.day-edit input:focus, .wk-times input:focus, .form-input:focus {
  outline: 0;
  border-color: var(--juno-green);
  box-shadow: 0 0 0 3px rgba(46, 139, 68, .12);
}

/* ---- tables: quiet header, hairline rows ---- */
.a-table { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.a-table th {
  background: var(--sand);
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .68rem;
  border-bottom: 1px solid var(--line);
}
.a-table td { border-bottom: 1px solid var(--line); }
.a-table tbody tr:hover { background: var(--sand); }

/* The old .pro-top / .a-nav top bars were removed when both surfaces
   moved to the shared sidebar shell; dash.css owns the chrome now. */

/* ---- KPI tiles ---- */
.a-kpi, .stat-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}

/* ---- buttons: solid green primary, plain outline secondary ---- */
.btn--primary, .a-btn--primary {
  /* #2E8B44 with white text is 4.29:1 — just under AA. The brand token is
     unchanged; only the button surface darkens, to 5.0:1. */
  background: #2A7F3E;
  border: 1px solid #2A7F3E;
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover, .a-btn--primary:hover { background: var(--juno-green-deep); border-color: var(--juno-green-deep); }
.btn--ghost, .a-btn--ghost {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover, .a-btn--ghost:hover { background: var(--sand); }

/* ---- honest reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}