/* mnm_base.css -- report 160 "go" (Joseph 2026-10-07 4:4x PM): one MNM base look for plain Bootstrap/HTML
   building blocks, built only from the --mnm- tokens in tokens.css (loaded first; see _base_look.html).
   Linked ONLY by templates/_base_look.html, which is included ONLY on the templates a customer actually
   sees -- never on an admin/dashboard/field/employee page. Nothing here changes a size, a spacing value or
   a position: colour, border and radius only, so no customer-page layout moves.

   Specificity note: a page that loads this may still carry its OWN, more specific local override on
   purpose -- e.g. customer_portal.html's `html:not([data-theme="dark"]) .badge.bg-primary` rule. Those
   selectors are more specific than the plain classes below and keep winning regardless of which file
   loads first; this sheet only fills in the spots nothing else has an opinion about. */

/* ---- Links (plain <a>, not a .btn): EL-1 / EL-11 ----
   Bootstrap's own link blue (#0d6efd) is the single most common automated flag: a stock blue nothing on
   these pages chooses on purpose. customer_signup.html, customer_portal.html and view_document.html
   already carry this exact rule for their own <main> content (P18, report 93, "small text at 7:1" --
   --mnm-muted-5 is also the one AA-safe blue already used site-wide for inline links); folded in here so
   every customer template gets it, not just those three. */
/* Hotfix 2026-10-08 (Joseph: the main page's Reach Us phone pills turned this blue): `a:not(.btn)` weighs as
   much as a class plus a tag (0,1,1), so it beat every link that is coloured by its own class, e.g.
   `.service-pill` (0,1,0). `html a` (0,0,2) still beats Bootstrap's bare `a` (0,0,1) whatever the load order,
   and loses to any class, so it only fills links nothing else colours. .btn keeps winning by its class. */
html a { color: var(--mnm-muted-5); }
html a:where(:not([class])):hover { color: var(--mnm-ink); }

/* EL-1: the top bar's brand/phone links never set their own colour, so the anchor itself falls back to
   link-blue -- invisible today only because every child span already recolours itself. This matches what
   those children already use (.topnav-brand span / .topnav-phone .pi/.pn both read --mnm-brand-ink). */
.topnav-brand, .topnav-phone { color: var(--mnm-brand-ink); }

/* ---- Buttons: EL-2 + the rest of Bootstrap's semantic set ----
   .btn-primary is byte-for-byte customer_signup.html's own rule (the one spot in this family already
   fixed, WD-3), so the portal's 3 buttons (EL-2) land on the exact same look instead of a second version. */
.btn-primary { background: var(--mnm-brand-fill); border-color: var(--mnm-brand-fill); color: var(--mnm-brand-ink); }
.btn-primary:hover, .btn-primary:focus { background: var(--mnm-brand-3-fill); border-color: var(--mnm-brand-3-fill); color: var(--mnm-brand-ink); }
.btn-secondary { background: var(--mnm-muted); border-color: var(--mnm-muted); color: var(--mnm-brand-ink); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--mnm-ink-2); border-color: var(--mnm-ink-2); color: var(--mnm-brand-ink); }
.btn-success { background: var(--mnm-success-fill); border-color: var(--mnm-success-fill); color: var(--mnm-brand-ink); }
.btn-success:hover, .btn-success:focus { background: var(--mnm-success-3); border-color: var(--mnm-success-3); color: var(--mnm-brand-ink); }
.btn-danger { background: var(--mnm-danger); border-color: var(--mnm-danger); color: var(--mnm-brand-ink); }
.btn-danger:hover, .btn-danger:focus { background: var(--mnm-danger-2); border-color: var(--mnm-danger-2); color: var(--mnm-brand-ink); }
.btn-warning { background: var(--mnm-warning-fill); border-color: var(--mnm-warning-fill); color: var(--mnm-ink); }
.btn-warning:hover, .btn-warning:focus { background: var(--mnm-warning-7); border-color: var(--mnm-warning-7); color: var(--mnm-brand-ink); }
.btn-info { background: var(--mnm-info); border-color: var(--mnm-info); color: var(--mnm-brand-ink); }
.btn-info:hover, .btn-info:focus { background: var(--mnm-ink-blue-2); border-color: var(--mnm-ink-blue-2); color: var(--mnm-brand-ink); }

.btn-outline-primary { color: var(--mnm-brand-fill); border-color: var(--mnm-brand-fill); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--mnm-brand-fill); border-color: var(--mnm-brand-fill); color: var(--mnm-brand-ink); }
/* matches customer_portal.html's own existing .btn-outline-secondary exception, same two tokens */
.btn-outline-secondary { color: var(--mnm-muted); border-color: var(--mnm-muted); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--mnm-muted); border-color: var(--mnm-muted); color: var(--mnm-brand-ink); }
.btn-outline-success { color: var(--mnm-success-fill); border-color: var(--mnm-success-fill); }
.btn-outline-success:hover, .btn-outline-success:focus { background: var(--mnm-success-fill); border-color: var(--mnm-success-fill); color: var(--mnm-brand-ink); }
.btn-outline-danger { color: var(--mnm-danger); border-color: var(--mnm-danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--mnm-danger); border-color: var(--mnm-danger); color: var(--mnm-brand-ink); }
.btn-outline-warning { color: var(--mnm-warning-7); border-color: var(--mnm-warning-7); }
.btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--mnm-warning-fill); border-color: var(--mnm-warning-fill); color: var(--mnm-ink); }
.btn-outline-info { color: var(--mnm-info); border-color: var(--mnm-info); }
.btn-outline-info:hover, .btn-outline-info:focus { background: var(--mnm-info); border-color: var(--mnm-info); color: var(--mnm-brand-ink); }

/* ---- Badges/pills: EL-3 + the rest of Bootstrap's semantic set ----
   A soft pill (pale fill + darker text + a thin matching line) -- the same pattern customer_signup.html's
   own "Confirmed" pill already uses (pale background, a darker ink, a pale border), so a status chip reads
   as a chip, not a second button. bg-primary is left alone on purpose: customer_portal.html already
   overrides it (var(--mnm-muted-5)), and that selector is more specific than this one, so it keeps winning
   no matter which file loads first. */
.badge.bg-success { background: var(--mnm-success-4-b) !important; color: var(--mnm-success-3) !important; border: 1px solid var(--mnm-success-6); }
.badge.bg-warning { background: var(--mnm-warning-3) !important; color: var(--mnm-warning-2) !important; border: 1px solid var(--mnm-warning-5); }
.badge.bg-danger { background: var(--mnm-danger-3) !important; color: var(--mnm-danger-2) !important; border: 1px solid var(--mnm-danger-5); }
.badge.bg-info { background: var(--mnm-muted-4-c) !important; color: var(--mnm-ink-blue-2) !important; border: 1px solid var(--mnm-line-blue-pale); }
.badge.bg-secondary { background: var(--mnm-bg-2) !important; color: var(--mnm-muted) !important; border: 1px solid var(--mnm-line-2); }
.badge.bg-light { background: var(--mnm-bg-2) !important; color: var(--mnm-text) !important; border: 1px solid var(--mnm-line); }

/* ---- Text inputs, textareas, selects: EL-5 ----
   One rule for all three native control classes; a token focus ring instead of Bootstrap's own blue glow. */
.form-control, .form-select {
  background: var(--mnm-surface);
  border-color: var(--mnm-line-2);
  color: var(--mnm-text);
}
.form-control::placeholder { color: var(--mnm-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--mnm-brand-fill);
  box-shadow: 0 0 0 3px var(--mnm-shade-blue-6);
}
.form-label { color: var(--mnm-ink); }
.form-text { color: var(--mnm-muted); }

/* ---- Tables and their header cells: EL-7 ----
   table-light's Bootstrap grey (#f8f9fa) becomes the page's own card tone; cell rules take the line token.
   Only colour changes -- cell padding/size stays Bootstrap's, so no table reflows. */
.table { color: var(--mnm-text); --bs-table-bg: var(--mnm-surface); }
.table > :not(caption) > * > * { border-bottom-color: var(--mnm-line); }
thead.table-light, .table-light, .table-light th, .table-light td {
  background: var(--mnm-bg-2) !important;
  color: var(--mnm-text) !important;
  border-color: var(--mnm-line) !important;
}

/* ---- Cards: a plain Bootstrap .card is a white box with a 1px grey border ---- */
.card {
  background: var(--mnm-surface);
  border-color: var(--mnm-line);
  border-radius: var(--mnm-radius-container);
}
.card-header { background: var(--mnm-bg-2); border-color: var(--mnm-line); }
.card-footer { background: var(--mnm-bg-2); border-color: var(--mnm-line); }

/* ---- EL-9: the 3D preview's layer dropdown's native arrow -- CUSTOMER ROUTE ONLY.
   This file is only linked on field_base.html when customer_preview is true (see field_base.html and
   _base_look.html's own header) -- the selector below is ALSO scoped to body.customer-preview, the
   class field_base.html already sets for that one route, as a second, belt-and-suspenders guard so it
   can never reach the staff field page even if the include above is ever loosened.

   The other half of EL-9 (the toolbar's white "Existing (Demo)" / "New Install" sub-tab button) turned
   out NOT to be fixable here: field_job.html's own _lt_updateSubtabUI() sets that button's colours with
   `.style.cssText` at runtime, on every tab switch AND on first paint, in BOTH field_job.html's routes --
   an inline style always wins over any rule in this file regardless of selector or !important placement
   on the wrong property. That raw hex is tokenised at the source instead (field_job.html, see HANDBACK.md
   for exactly why that fix is left unscoped: every value maps onto a token that resolves to the IDENTICAL
   hex, so staff's rendering does not change a pixel). */
body.customer-preview #lt_layer {
  appearance: none !important;
  -webkit-appearance: none !important;
  /* lint-ok: the arrow fill below (#334155) is byte-for-byte var(--mnm-text) -- a data-URI can't read a
     CSS custom property, so the one place that value has to be literal is here, matching the token exactly
     (same convention as booking_pages.css's own brick-pattern comment). !important because the element
     carries its own inline `background` already (field_job.html), which a plain external rule cannot
     out-specificity -- only !important can. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23334155' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 7px !important;
  padding-right: 28px !important;
}