/* =============================================================
   Becketts — universal form-control chrome (AI-mode served forms)
   -------------------------------------------------------------
   Form fields are a UNIVERSAL element: they must look identical on
   every form, so they are styled deterministically here rather than
   left to the per-form AI sheet (which would re-derive them slightly
   differently each time). The per-form AI sheet owns form-SPECIFIC
   components (cards, result tables, badges, buttons); this sheet owns
   the shared controls.

   Loaded LAST on ai/strip served forms. Selectors are `body`-scoped
   so they outrank both the form's own and the AI sheet's control
   rules. Colour / border / radius / focus ONLY — never geometry
   (padding, font-size, width are left to the form / AI sheet).

   Tokens (--bk-*) and --brand-accent come from the brand sheet loaded
   earlier in the same <head>.
   ============================================================= */

/* --- Text-style fields, selects, textareas --------------------- */

body:not(.bk-skip-controls) input[type="text"], body:not(.bk-skip-controls) input[type="number"], body:not(.bk-skip-controls) input[type="email"],
body:not(.bk-skip-controls) input[type="tel"], body:not(.bk-skip-controls) input[type="date"], body:not(.bk-skip-controls) input[type="search"],
body:not(.bk-skip-controls) input[type="password"], body:not(.bk-skip-controls) input[type="url"], body:not(.bk-skip-controls) input[type="month"],
body:not(.bk-skip-controls) input[type="week"], body:not(.bk-skip-controls) input[type="time"], body:not(.bk-skip-controls) input:not([type]),
body:not(.bk-skip-controls) select, body:not(.bk-skip-controls) textarea {
  background-color: var(--bk-surface) !important;   /* always white (Figma) */
  border: 1px solid var(--bk-border) !important;     /* light grey default   */
  border-radius: var(--radius) !important;           /* global 8px           */
}

/* Hover: border steps up to a clear grey (Figma hover state). */
body:not(.bk-skip-controls) input[type="text"]:hover, body:not(.bk-skip-controls) input[type="number"]:hover,
body:not(.bk-skip-controls) input[type="email"]:hover, body:not(.bk-skip-controls) input[type="tel"]:hover,
body:not(.bk-skip-controls) input[type="date"]:hover, body:not(.bk-skip-controls) input[type="search"]:hover,
body:not(.bk-skip-controls) input[type="password"]:hover, body:not(.bk-skip-controls) input[type="url"]:hover,
body:not(.bk-skip-controls) input[type="month"]:hover, body:not(.bk-skip-controls) input[type="week"]:hover,
body:not(.bk-skip-controls) input[type="time"]:hover, body:not(.bk-skip-controls) input:not([type]):hover,
body:not(.bk-skip-controls) select:hover, body:not(.bk-skip-controls) textarea:hover {
  border-color: var(--bk-rule) !important;           /* Becketts Grey 25 */
}

/* Focus: a 1px mid-grey border (Figma), not an accent ring. */
body:not(.bk-skip-controls) input[type="text"]:focus, body:not(.bk-skip-controls) input[type="number"]:focus,
body:not(.bk-skip-controls) input[type="email"]:focus, body:not(.bk-skip-controls) input[type="tel"]:focus,
body:not(.bk-skip-controls) input[type="date"]:focus, body:not(.bk-skip-controls) input[type="search"]:focus,
body:not(.bk-skip-controls) input[type="password"]:focus, body:not(.bk-skip-controls) input[type="url"]:focus,
body:not(.bk-skip-controls) input[type="month"]:focus, body:not(.bk-skip-controls) input[type="week"]:focus,
body:not(.bk-skip-controls) input[type="time"]:focus, body:not(.bk-skip-controls) input:not([type]):focus,
body:not(.bk-skip-controls) select:focus, body:not(.bk-skip-controls) textarea:focus {
  outline: none !important;
  border-color: var(--bk-text-muted) !important;   /* #808080 */
}

/* --- Buttons -------------------------------------------------
   Every button uses the global corner radius (var(--radius)).
   Segmented toggles whose container clips to a pill keep their
   look (the container's overflow:hidden masks this).
   EXCEPT tab-style buttons (class contains "tab") — these are
   underline navigation, not pill buttons, so the radius would
   round their corners oddly; leave them square. */
body:not(.bk-skip-controls) button:not([class*="tab"]), body:not(.bk-skip-controls) input[type="submit"], body:not(.bk-skip-controls) input[type="button"],
body:not(.bk-skip-controls) input[type="reset"], body:not(.bk-skip-controls) [class*="btn"]:not([class*="tab"]), body:not(.bk-skip-controls) [class*="button"]:not([class*="tab"]) {
  border-radius: var(--radius) !important;
}

/* --- Checkboxes & radios --------------------------------------
   Custom control: a copper fill with a GUARANTEED white tick when
   checked. (A native checkbox with accent-color lets the browser pick
   the tick colour from the accent's luminance — our lighter copper
   loses the white tick — so we draw our own.) Sized in `em` so it
   tracks the form's own font-size. */

body:not(.bk-skip-controls) input[type="checkbox"], body:not(.bk-skip-controls) input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1.15em !important;
  height: 1.15em !important;
  min-width: 1.15em !important;
  border: 1.5px solid var(--bk-rule) !important;
  background-color: var(--bk-surface) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-block;
  position: relative;
  vertical-align: -0.18em;
}

body:not(.bk-skip-controls) input[type="radio"] { border-radius: 50% !important; }

body:not(.bk-skip-controls) input[type="checkbox"]:checked, body:not(.bk-skip-controls) input[type="radio"]:checked {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* White checkmark */
body:not(.bk-skip-controls) input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 33%; top: 13%;
  width: 26%; height: 52%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* White dot for radios */
body:not(.bk-skip-controls) input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: #fff;
}

body:not(.bk-skip-controls) input[type="checkbox"]:focus-visible,
body:not(.bk-skip-controls) input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: 2px;
}

/* --- Tables (Figma spec) -------------------------------------
   Universal Becketts table look, applied deterministically so it's
   identical on every form: navy title bar, copper column-header row
   (both white text), deep rows, NO zebra striping, a tinted bold
   first column. Colour/padding only — text alignment is left to the
   form (financial columns stay right-aligned). */

/* Card clips children to the rounded corners (inner scroll areas keep
   their own overflow, so wide tables still scroll). */
body:not(.bk-skip-tables) [class*="table-card"] {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

/* Title bar -> copper + white text. Same padding as the column-header
   row below so the two bars match in height and share a 24px left edge. */
body:not(.bk-skip-tables) [class~="table-header"], body:not(.bk-skip-tables) [class*="table-title"],
body:not(.bk-skip-tables) [class*="table-head-bar"], body:not(.bk-skip-tables) table > caption {
  background: var(--brand-accent) !important;
  color: #ffffff !important;
  padding: 18px 24px !important;
}
body:not(.bk-skip-tables) [class~="table-header"] *, body:not(.bk-skip-tables) [class*="table-title"] * {
  color: #ffffff !important;
}

/* Column-header row -> navy + white text. Deeper (matches the title bar)
   and same 24px left padding so the headers line up vertically. */
body:not(.bk-skip-tables) thead th, body:not(.bk-skip-tables) thead td {
  background: var(--bk-navy) !important;
  color: #ffffff !important;
  border-color: var(--bk-navy) !important;
  font-family: var(--bk-font-body) !important;
  font-weight: 600 !important;
  padding: 18px 24px !important;
}

/* First column header left-aligned so "Year" lines up under the title. */
body:not(.bk-skip-tables) thead th:first-child { text-align: left !important; }

/* Body rows: solid white, deeper. Cells are transparent so the white
   row shows through — this kills zebra striping applied at the CELL
   level (e.g. `tr:nth-child(even) td { background }`), which a row-only
   rule would miss. The first-column tint below still wins by specificity. */
body:not(.bk-skip-tables) tbody tr { background: var(--bk-surface) !important; }
body:not(.bk-skip-tables) tbody td, body:not(.bk-skip-tables) tbody th {
  background: transparent !important;
  padding: 18px 18px !important;
  border-bottom: 1px solid var(--bk-border) !important;
  line-height: 1.5 !important;
}

/* First column: tinted, dark, bold (Figma) */
body:not(.bk-skip-tables) tbody tr td:first-child, body:not(.bk-skip-tables) tbody tr th:first-child {
  background: var(--brand-accent-soft) !important;
  color: var(--bk-text) !important;
  font-weight: 700 !important;
}

/* Inputs INSIDE table cells blend with the cell (the cell is the visual
   container) — borderless and transparent, not the standalone box above.
   A faint tint marks the focused cell. Checkboxes/radios keep their custom
   control. (Only matches real <table> cells; div-based "tables" need a
   per-form patch.) */
body:not(.bk-skip-tables) td input:not([type="checkbox"]):not([type="radio"]),
body:not(.bk-skip-tables) th input:not([type="checkbox"]):not([type="radio"]),
body:not(.bk-skip-tables) td select, body:not(.bk-skip-tables) td textarea, body:not(.bk-skip-tables) th select, body:not(.bk-skip-tables) th textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
body:not(.bk-skip-tables) td input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.bk-skip-tables) th input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.bk-skip-tables) td select:focus, body:not(.bk-skip-tables) td textarea:focus {
  background: var(--bk-surface-2) !important;
}