/* =============================================================================
   textbox.css — the paint layer of ics-textbox, the plain text field, and the
   family base look the composite fields (datebox / spinner / numberbox /
   autocomplete) build on.
   -----------------------------------------------------------------------------
   THE text-field stylesheet of the lib-v2 estate: one file, one design,
   app-wide. Never author a second text-field sheet. The design is a white face
   with a gold border and a gold-700 focus ring, 22px tall — the same height as
   the button beside it — with the 13px theme type. Geometry comes from the
   component tokens, colour from the semantic roles ONLY; no literal colour or
   number belongs in this file.

   TWO ARMS, ONE LOOK:
   · `input[data-ics="textbox"]` — THE PLAIN TEXT FIELD. The component enhances
     the authored <input> IN PLACE (no wrapper, no clone, no added class), so the
     `data-ics` attribute is the one paint hook and the native `[readonly]` /
     `:disabled` states are the state hooks. This arm is self-sufficient: it
     depends on tokens.css and nothing else, so it paints the same on every
     shell, whether or not base.css is present.
   · `.ics-textbox` — the FAMILY BASE LOOK: the class the composite fields put on
     their own text input (a datebox's input, a spinner's input, an in-place
     numberbox). It carries the family type, colour and transition; a composite
     shell overrides border / height / background inside its own box.

   WHAT IS LOCKED AND WHAT IS NOT (plain arm) — three tiers, by what a property
   MEANS on a text field:
   1. GEOMETRY + BORDER = THE CONTRACT, locked at ID-level specificity WITH
      !important, the same mechanism the button sheet uses: `:is(#\9,
      input[data-ics="textbox"])` has the specificity of its most specific
      argument (an ID; `#\9` is the escaped-TAB id no element can carry, so the
      arm matches only through the attribute). Two of them plus the attribute =
      2-1-1 at rest, which outranks any single-ID screen rule and needs no change
      when the next screen invents one. The contract properties ARE the design:
      height, inset, box-sizing, border, radius, line-height, no shadow. A
      shell's element rule, a utility-framework field class, a per-screen
      `#toolbar input { … }` block or an inline `style="border:1px solid #ccc;
      height:30px"` cannot repaint them.
   2. SURFACE + TYPE + INK = THEMED, NOT LOCKED. Surface colour, size, family,
      weight and ink carry MEANING on a field — a screen paints a field's
      background to say "this one changed / is pre-set / needs attention", a
      Bangla field sets its own face and size, a total field is bold, a status
      field is red — so they are set at the lowest weight that still beats the
      shell's element/universal defaults and the framework field classes: the
      type size and the ink at ELEMENT weight (`input:where([data-ics=
      "textbox"])`, 0-0-1), the surface at 0-1-1, the readonly/disabled states
      at 0-2-1. Any deliberate class, inline or scripted surface/type/ink wins
      (a single ink class on the input included); the utility-framework field
      classes are the one exception and are re-sized and re-inked explicitly
      (their 16px is a framework default, not an authored choice). The locked
      height FOLLOWS a larger type: it is the token height or the field's own
      line box plus borders, whichever is taller, so a 18px field grows instead
      of clipping.
   3. LAYOUT = THE PAGE'S. width, min/max-width, margin, display, float and
      text-align are never set here: `style="width:98%"`, `text-align:right` on
      a qty box and a cell's `width:100%` all keep working, and NO min-width is
      imposed (a 30px qty box stays 30px).

   THE STATE CLASSES THE ESTATE PAINTS ONTO INPUTS SURVIVE THE CONTRACT. They are
   declared inside it, above every face state, so each wins over the resting
   face AND over hover/focus:
     .errorFieldBorder     validation failure cue → danger border
     .fontColorOfPickItem  a value chosen from a list/autocomplete → info ink,
                           semibold
   A screen's own FACE class beyond these two is painted only if it is added
   here; an ink/type class needs nothing (tier 2 lets it through).

   THREE STATES MUST STAY TELLABLE APART:
     editable   white face, gold border, gold-700 on hover, ring on focus
     readonly   muted surface, NORMAL ink, gold border — the value stays
                selectable and copyable; no hover cue; on focus a NEUTRAL
                (subtle-border) ring instead of the gold edit ring, so the
                keyboard position never disappears on a tab stop
     disabled   muted surface, SOFT ink, subtle border, not-allowed cursor.
                The ink is the SOFT ink, not the muted placeholder ink: screens
                disable every field to present a record in View mode, so a
                disabled value must still read at AA contrast; the subtle
                border and the cursor carry the "inert" meaning.
   Never collapse readonly into disabled; never fade either (a fade is not
   printable and a faded field with dark ink reads as readonly).

   TOKENS read: --ics-textbox-h (= the button height; a field and a button in one
   row are one height) · --ics-textbox-pad-x · --ics-control-border ·
   --ics-control-radius · --ics-control-focus · --ics-surface(-alt) · --ics-text
   (-muted) · --ics-border(-strong|-subtle) · --ics-danger · --ics-info ·
   --ics-font-size · --lh-tight · --fw-semibold · --motion-fast ·
   --easing-standard. The family arm additionally reads --ics-control-h /
   --ics-control-pad-x / --ics-control-minw.

   CONSUMERS (both load the SAME file): the v2 bundle via lib-v2\css\app.css
   (→ dist-v2\ics-ui.min.css), and a direct link at the tail of the page shell
   head, after the estate's older sheets, paired with a tokens.css link.
   ============================================================================= */

/* #############################################################################
   ARM 1 — THE PLAIN TEXT FIELD: input[data-ics="textbox"]
   ############################################################################# */

/* ---- tier 2: TYPE at element weight — beats `input {…}` / `* {…}` shell
   defaults by order, loses to any class or inline type on purpose ----------- */
input:where([data-ics="textbox"]) {
  font-size: var(--ics-font-size);
}
/* the utility-framework field classes are re-sized: their type size is a
   framework default, not an authored choice (face/geometry are the contract's).
   !important because a shell sheet pins the small variant's size with !important
   itself; the framework classes are the one place the type tier is forced. */
input[data-ics="textbox"]:is(.form-control, .form-control-sm, .form-control-lg, .input-sm, .input-lg) {
  font-size: var(--ics-font-size) !important;
}

/* ---- tier 2: INK at element weight, like the type — a single ink class on the
   input (`.blueText`, a linked-value cue) must still win; the framework field
   classes are re-inked explicitly like they are re-sized ----------------------- */
input:where([data-ics="textbox"]) {
  color: var(--ics-text);
}
input[data-ics="textbox"]:is(.form-control, .form-control-sm, .form-control-lg, .input-sm, .input-lg) {
  color: var(--ics-text);
}

/* ---- tier 2: SURFACE + the resting geometry at class weight (the contract
   below re-asserts the geometry; this rule is what a shell with no competing
   sheet needs, and where the transition lives) ------------------------------- */
input[data-ics="textbox"] {
  box-sizing: border-box;
  height: var(--ics-textbox-h);
  padding: 0 var(--ics-textbox-pad-x);
  background: var(--ics-surface);
  border: var(--ics-control-border);
  border-radius: var(--ics-control-radius);
  line-height: var(--lh-tight);
  vertical-align: middle;                  /* sits level with the button beside it */
  transition:
    border-color var(--motion-fast) var(--easing-standard),
    background-color var(--motion-fast) var(--easing-standard),
    box-shadow var(--motion-fast) var(--easing-standard);
}
input[data-ics="textbox"]::placeholder {
  color: var(--ics-text-muted);
  opacity: 1;                              /* the muted ink IS the placeholder colour; no extra fade */
}
/* surface + ink states at 0-2-1 (an inline or scripted surface/ink still wins -
   a status colour is meaning). readonly: muted surface, NORMAL ink — the value
   stays selectable and copyable. disabled: muted surface, SOFT ink (AA-readable:
   View mode disables every field to SHOW a record), not the placeholder ink. */
input[data-ics="textbox"][readonly] {
  background: var(--ics-surface-alt);
  color: var(--ics-text);
}
input[data-ics="textbox"]:disabled {
  background: var(--ics-surface-alt);
  color: var(--ics-text-soft);
  -webkit-text-fill-color: var(--ics-text-soft);   /* the engine that paints disabled text through this, not `color` */
}

/* -----------------------------------------------------------------------------
   tier 1: THE FACE CONTRACT — the one design is not overridable from a screen.
   Declared in state order: rest → hover → focus → readonly → disabled. Later
   blocks share the specificity of earlier ones and win on order, which is what
   makes a readonly field stop inviting hover. The two estate state classes come
   LAST and one ID arm heavier, so they outrank every face state, hover included
   (`:hover:not(:disabled):not([readonly])` weighs 2-4-1 — :not() carries its
   argument's weight).
   -------------------------------------------------------------------------- */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]) {
  box-sizing: border-box !important;
  /* THE HEIGHT NEVER CLIPS ITS OWN TYPE: the token height, or the resolved line
     box plus the two borders when a field carries a larger type (tier 2 lets a
     class or inline size through). At the 13px theme type the line box is
     15.6px, so the token's 22px stands; a deliberate 18px or 20px field grows
     to clear its glyphs instead of clipping descenders in a box that was sized
     for 13px. `1em` here is the field's own resolved font-size. */
  height: max(var(--ics-textbox-h, 22px), calc(1em * var(--lh-tight, 1.2) + 2 * var(--border-1, 1px))) !important;
  min-height: 0 !important;                                    /* a framework min-height must not undo the height */
  max-height: none !important;
  padding: 0 var(--ics-textbox-pad-x, 6px) !important;
  background-image: none !important;                           /* no image/gradient face; the COLOUR stays tier 2 (a state cue) */
  border: var(--border-1, 1px) solid var(--ics-border, #D0B358) !important;
  border-radius: var(--ics-control-radius, 4px) !important;
  line-height: var(--lh-tight, 1.2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* hover cue on EDITABLE fields only — an inert field must not invite a click */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):hover:not(:disabled):not([readonly]) {
  border-color: var(--ics-border-strong, #7D6B35) !important;
}

/* FOCUS IS PART OF THE CONTRACT — a keyboard user must always see focus, and it
   is identical whether reached by keyboard or mouse. The ring is the gold-700
   box-shadow ring of the control family; the browser outline is dropped because
   the ring replaces it. A screen's `outline: none` cannot take the ring away. */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):focus {
  outline: none !important;
  border-color: var(--ics-border-strong, #7D6B35) !important;
  box-shadow: var(--ics-control-focus, 0 0 0 2px #7D6B35) !important;
}

/* readonly: the field reads as neither editable nor disabled (its surface and
   ink are the tier-2 state rule); no hover cue. A readonly field is a tab stop,
   so focus MUST still show: it takes a NEUTRAL ring (the subtle border colour)
   in place of the gold edit ring - the keyboard position stays visible while
   the field does not pretend to be editable. */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"])[readonly] {
  cursor: default !important;
}
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"])[readonly]:focus {
  box-shadow: 0 0 0 2px var(--ics-border-subtle, #D2D5DA) !important;
  border-color: var(--ics-border, #D0B358) !important;
}

/* disabled: subtle border + inert cursor (the surface and the soft ink are the
   tier-2 state rule); the distinction from readonly is the ink and the border,
   never an opacity fade */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):disabled {
  border-color: var(--ics-border-subtle, #D2D5DA) !important;
  cursor: not-allowed !important;
}

/* browser AUTOFILL paints its own face at user-agent-important weight, which no
   author rule outranks; the one author remedy is the inset shadow that covers
   it. Declared after the states so a focused autofilled field keeps the ring
   colour of its state in the outer 2px. */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):-webkit-autofill,
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--ics-surface, #FFFFFF) inset !important;
  -webkit-text-fill-color: var(--ics-text, #2F2B26) !important;
}
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 2px var(--ics-focus-ring, #7D6B35), 0 0 0 1000px var(--ics-surface, #FFFFFF) inset !important;
  -webkit-text-fill-color: var(--ics-text, #2F2B26) !important;
}

/* ---- the estate's input state classes, kept alive above every face state ---- */
/* validation failure: the border turns the danger colour — at rest, on hover, on focus */
input[data-ics="textbox"]:is(#\9, input[data-ics="textbox"]):is(#\9, input[data-ics="textbox"]):is(#\9, .errorFieldBorder) {
  border-color: var(--ics-danger, #C0492F) !important;
}
/* a value chosen from a list / autocomplete: info ink, semibold — distinct from
   typed text at a glance, and still the theme's own blue, not a foreign accent
   (ink is tier 2, so this needs no !important - class weight over the base ink;
   declared after the :disabled rule so a picked-then-locked field keeps the cue,
   and the fill colour carries it on the engine that paints disabled text that way) */
input[data-ics="textbox"].fontColorOfPickItem {
  color: var(--ics-info);
  -webkit-text-fill-color: var(--ics-info);
  font-weight: var(--fw-semibold);
}

/* #############################################################################
   ARM 2 — THE FAMILY BASE LOOK: .ics-textbox (composite fields' own input)
   Geometry from the control tokens; a composite shell (datebox / spinner /
   combo) overrides border, height and background inside its own box.
   ############################################################################# */

.ics-textbox {
  height: var(--ics-control-h);
  min-width: var(--ics-control-minw);      /* never collapses inside a narrow cell */
  padding: 0 var(--ics-control-pad-x);
  box-sizing: border-box;
  background: var(--ics-surface);
  color: var(--ics-text);
  border: var(--ics-control-border);
  border-radius: var(--ics-control-radius);
  font-family: inherit;
  font-size: var(--ics-font-size);
  line-height: var(--lh-tight);
  vertical-align: middle;                  /* sits level with the other field widgets */
  transition:
    border-color var(--motion-fast) var(--easing-standard),
    background-color var(--motion-fast) var(--easing-standard),
    box-shadow var(--motion-fast) var(--easing-standard);
}

/* hover cue on EDITABLE fields only */
.ics-textbox:hover:not(:disabled):not([readonly]) {
  border-color: var(--ics-border-strong);
}

/* focus is visibly distinct, and identical whether reached by keyboard or mouse */
.ics-textbox:focus {
  outline: none;
  border-color: var(--ics-border-strong);
  box-shadow: var(--ics-control-focus);
}

/* readonly: muted surface, NORMAL text; both the native attribute and the
   family state class are hooks, since either can be the one present */
.ics-textbox[readonly],
.ics-textbox.ics-readonly {
  background: var(--ics-surface-alt);
  color: var(--ics-text);
}

/* disabled: muted surface + MUTED text + inert cursor */
.ics-textbox:disabled,
.ics-textbox.ics-disabled {
  background: var(--ics-surface-alt);
  color: var(--ics-text-muted);
  cursor: not-allowed;
}