/* CODE.NTT v855 - one shared focus + label/context contract for interactive controls.
   Loaded after page-specific styles so legacy pages cannot silently remove focus
   visibility. The ring never changes border width, so focusing does not shift layout. */
:root{
  --ntt-focus-border:#3b82f6;
  --ntt-focus-ring:rgba(37,99,235,.28);
  --ntt-focus-ring-strong:rgba(37,99,235,.38);
  --ntt-focus-label:#1d4ed8;
  --ntt-focus-label-glow:rgba(37,99,235,.28);
}

:where(
  body[data-site-theme="dark"],
  body.darkmode,
  body.dark-mode,
  body.theme-dark,
  body.dark
){
  --ntt-focus-border:#7aa2ff;
  --ntt-focus-ring:rgba(122,162,255,.34);
  --ntt-focus-ring-strong:rgba(122,162,255,.46);
  --ntt-focus-label:#bfdbfe;
  --ntt-focus-label-glow:rgba(122,162,255,.38);
}

/* Text/value controls: keep border width unchanged, only recolor + glow. */
html body :where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea,
  .form-control,
  [contenteditable="true"]
):not(:disabled):focus{
  border-color:var(--ntt-focus-border) !important;
  box-shadow:0 0 0 3px var(--ntt-focus-ring) !important;
  outline:none !important;
}

/* Buttons/action controls receive the same halo without changing dimensions. */
html body :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"],
  summary
):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus{
  border-color:var(--ntt-focus-border) !important;
  box-shadow:0 0 0 3px var(--ntt-focus-ring) !important;
  outline:none !important;
}

/* Native compact controls need a visible halo rather than a forced border. */
html body :where(
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="color"]
):not(:disabled):focus{
  box-shadow:0 0 0 3px var(--ntt-focus-ring-strong) !important;
  outline:none !important;
}

/* Keyboard-focus fallback for links and custom focusable widgets. */
html body :where(
  a[href],
  [tabindex]:not([tabindex="-1"])
):not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible{
  outline:2px solid var(--ntt-focus-border) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 3px var(--ntt-focus-ring) !important;
  border-radius:6px;
}

/* -------------------------------------------------------------------------
   Shared label/context highlight.
   - :focus-within covers Bootstrap/common wrappers.
   - :has() covers native <label> relationships without per-page JS.
   - Legacy 2-column/search tables illuminate the first cell, which is the
     visual label in CODE.NTT's historical markup.
   ------------------------------------------------------------------------- */
html body :where(
  .form-group,
  .control-group,
  .input-group,
  .ntt-control-group,
  .ntt-form-field,
  .ntt-search-field,
  .ntt-filter-field
):focus-within > :where(label,.control-label,.ntt-control-label,.ntt-field-label),
html body :where(label,.control-label,.ntt-control-label):has(> :where(input,select,textarea,button,.form-control,[contenteditable="true"]):focus),
html body :where(label,.control-label,.ntt-control-label):has(+ :where(input,select,textarea,button,.form-control,[contenteditable="true"]):focus),
html body :where(label,.control-label,.ntt-control-label):has(~ :where(input,select,textarea,button,.form-control,[contenteditable="true"]):focus),
html body :where(fieldset):focus-within > legend{
  color:var(--ntt-focus-label) !important;
  text-shadow:0 0 10px var(--ntt-focus-label-glow);
  transition:color .14s ease,text-shadow .14s ease;
}

/* Legacy form/search rows: first cell is the label/descriptor. Keep this
   scoped to known form layouts so inline editors inside data tables do not
   light the first data column. */
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) > tbody > tr:focus-within > :first-child,
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) > tr:focus-within > :first-child,
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) > tbody > tr.ntt-form-row-active > :first-child,
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) > tr.ntt-form-row-active > :first-child{
  color:var(--ntt-focus-label) !important;
  text-shadow:0 0 10px var(--ntt-focus-label-glow);
  transition:color .14s ease,text-shadow .14s ease;
}

/* Old markup often wraps the descriptor in b/strong/font/span. During focus,
   inherit the shared label color instead of keeping an inline legacy color. */
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) tr:focus-within > :first-child :where(label,b,strong,span,font),
html body :where(
  form.ntt-legacy-form .ntt-form-grid-table,
  .ntt-legacy-form-shell .ntt-form-grid-table,
  #myTK table
) tr.ntt-form-row-active > :first-child :where(label,b,strong,span,font){
  color:inherit !important;
}

/* Disabled controls must not look active/focused. */
html body :where(
  input:disabled,
  select:disabled,
  textarea:disabled,
  button:disabled,
  .btn.disabled,
  [aria-disabled="true"]
):focus{
  box-shadow:none !important;
  outline:none !important;
}

/* Keep legacy inline font colors from masking the focused label state. */
html body :where(
  .form-group,
  .control-group,
  .input-group,
  .ntt-control-group,
  .ntt-form-field,
  .ntt-search-field,
  .ntt-filter-field
):focus-within > :where(label,.control-label,.ntt-control-label,.ntt-field-label) :where(font,b,strong,span),
html body :where(label,.control-label,.ntt-control-label):has(> :where(input,select,textarea,button,.form-control,[contenteditable="true"]):focus) :where(font,b,strong,span){
  color:inherit !important;
}

/* Searchable-select owns one visual focus shell around its search input.
   Suppress the generic inner input halo so the control never looks double-bordered. */
html body .ntt-search-select-search:focus-within{
  border-color:var(--ntt-focus-border) !important;
  box-shadow:0 0 0 3px var(--ntt-focus-ring) !important;
}
html body .ntt-search-select-search input[type="search"]:not(:disabled):focus{
  border-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}