/* CODE.NTT v1976 — persistent value/selection state for form controls.
   Repaint-stable global styling: no glow/filter animation on large pages.
   Visual-only: no form values, submission semantics, permissions or business logic change.
   Preserves the v1965 visible-border/legacy-descriptor contract while reducing repaint churn.
   that are not semantic <label> elements. */
:root{
  --ntt-filled:#0f766e;
  --ntt-filled-border:#0d9488;
  --ntt-filled-border-strong:#0f766e;
  --ntt-filled-bg:rgba(20,184,166,.10);
  --ntt-filled-glow:rgba(13,148,136,.30);
  --ntt-online:#15803d;
  --ntt-online-border:#22c55e;
  --ntt-online-bg:rgba(34,197,94,.12);
  --ntt-online-glow:rgba(34,197,94,.24);
  --ntt-all-members:#7c3aed;
  --ntt-all-members-border:#8b5cf6;
  --ntt-all-members-bg:rgba(139,92,246,.12);
  --ntt-all-members-glow:rgba(139,92,246,.24);
}

:where(body[data-site-theme="dark"],body.darkmode,body.dark-mode,body.theme-dark,body.dark){
  --ntt-filled:#5eead4;
  --ntt-filled-border:#2dd4bf;
  --ntt-filled-border-strong:#5eead4;
  --ntt-filled-bg:rgba(45,212,191,.15);
  --ntt-filled-glow:rgba(45,212,191,.36);
  --ntt-online:#86efac;
  --ntt-online-border:#4ade80;
  --ntt-online-bg:rgba(74,222,128,.16);
  --ntt-online-glow:rgba(74,222,128,.30);
  --ntt-all-members:#c4b5fd;
  --ntt-all-members-border:#a78bfa;
  --ntt-all-members-bg:rgba(167,139,250,.17);
  --ntt-all-members-glow:rgba(167,139,250,.32);
}

/* Generic non-empty controls. The colored inner edge is persistent even while focused.
   The ordinary blue focus ring remains outside it, so users can see both states at once. */
html body :where(
  input.ntt-field-has-value:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select.ntt-field-has-value,
  textarea.ntt-field-has-value,
  [contenteditable="true"].ntt-field-has-value
){
  background-color:var(--ntt-filled-bg) !important;
  border-color:var(--ntt-filled-border-strong) !important;
  color:inherit;
  outline:1px solid var(--ntt-filled-border) !important;
  outline-offset:-2px !important;
}
html body :where(
  input.ntt-field-has-value:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select.ntt-field-has-value,
  textarea.ntt-field-has-value,
  [contenteditable="true"].ntt-field-has-value
):not(:focus){
  border-color:var(--ntt-filled-border-strong) !important;
  box-shadow:inset 0 0 0 1px var(--ntt-filled-border) !important;
}
/* Explicit selectors intentionally outrank control-focus.v854's generic !important rule:
   outer blue = current focus, inner teal = this field already contains data. */
html body input.ntt-field-has-value:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(:disabled):focus,
html body select.ntt-field-has-value:not(:disabled):focus,
html body textarea.ntt-field-has-value:not(:disabled):focus,
html body [contenteditable="true"].ntt-field-has-value:focus{
  border-color:var(--ntt-focus-border, #3b82f6) !important;
  outline:1px solid var(--ntt-filled-border) !important;
  outline-offset:-2px !important;
  box-shadow:0 0 0 3px var(--ntt-focus-ring, rgba(37,99,235,.28)), inset 0 0 0 2px var(--ntt-filled-border) !important;
}
html body input[type="file"].ntt-field-has-value{
  border-color:var(--ntt-filled-border-strong) !important;
  background-color:var(--ntt-filled-bg) !important;
  box-shadow:inset 0 0 0 1px var(--ntt-filled-border) !important;
}
html body :where(input[type="checkbox"],input[type="radio"]).ntt-field-has-value{
  accent-color:var(--ntt-filled-border) !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Checked Thành viên Online = green family. */
html body :where(input[type="checkbox"],input[type="radio"]).ntt-field-state-online{
  accent-color:var(--ntt-online-border) !important;
  filter:none !important;
  box-shadow:none !important;
}
html body .ntt-field-label-state-online,
html body td.ntt-field-label-state-online,
html body th.ntt-field-label-state-online,
html body span.ntt-field-label-state-online,
html body div.ntt-field-label-state-online,
html body label.ntt-field-label-state-online,
html body :where(.ntt-field-context-state-online) > :first-child{
  color:var(--ntt-online) !important;
  text-shadow:none !important;
}
html body .ntt-field-label-state-online :where(label,b,strong,span,font,i,small,em),
html body :where(.ntt-field-context-state-online) > :first-child :where(label,b,strong,span,font,i,small,em){
  color:inherit !important;
}

/* Checked Tất cả thành viên = violet family, intentionally distinct from Online. */
html body :where(input[type="checkbox"],input[type="radio"]).ntt-field-state-all-members{
  accent-color:var(--ntt-all-members-border) !important;
  filter:none !important;
  box-shadow:none !important;
}
html body .ntt-field-label-state-all-members,
html body td.ntt-field-label-state-all-members,
html body th.ntt-field-label-state-all-members,
html body span.ntt-field-label-state-all-members,
html body div.ntt-field-label-state-all-members,
html body label.ntt-field-label-state-all-members,
html body :where(.ntt-field-context-state-all-members) > :first-child{
  color:var(--ntt-all-members) !important;
  text-shadow:none !important;
}
html body .ntt-field-label-state-all-members :where(label,b,strong,span,font,i,small,em),
html body :where(.ntt-field-context-state-all-members) > :first-child :where(label,b,strong,span,font,i,small,em){
  color:inherit !important;
}

/* Related labels/descriptors for generic fields with meaningful data. Direct class selectors
   intentionally have normal specificity so legacy table/font rules cannot mask the state. */
html body .ntt-field-label-has-value,
html body td.ntt-field-label-has-value,
html body th.ntt-field-label-has-value,
html body span.ntt-field-label-has-value,
html body div.ntt-field-label-has-value,
html body label.ntt-field-label-has-value,
html body :where(.ntt-field-context-has-value) > :first-child{
  color:var(--ntt-filled) !important;
  text-shadow:none !important;
}
html body .ntt-field-label-has-value :where(font,b,strong,span,i,small,em),
html body :where(.ntt-field-context-has-value) > :first-child :where(label,b,strong,span,font,i,small,em){
  color:inherit !important;
}

/* Choice-chip wrappers get a soft persistent surface as well. */
html body :where(.ntt-choice-chip,.cb-inline,.checkbox-inline,.radio-inline).ntt-field-context-has-value{
  border-color:var(--ntt-filled-border) !important;
  background:var(--ntt-filled-bg) !important;
}
html body :where(.ntt-choice-chip,.cb-inline,.checkbox-inline,.radio-inline).ntt-field-context-state-online{
  border-color:var(--ntt-online-border) !important;
  background:var(--ntt-online-bg) !important;
}
html body :where(.ntt-choice-chip,.cb-inline,.checkbox-inline,.radio-inline).ntt-field-context-state-all-members{
  border-color:var(--ntt-all-members-border) !important;
  background:var(--ntt-all-members-bg) !important;
}

/* v1974: state changes are informational, not animation. Global form themes often
   transition border/background/box-shadow; disabling those transitions on stateful
   controls prevents the visible wave/shimmer while a large page initializes. */
html body :where(
  .ntt-field-has-value,
  .ntt-field-state-online,
  .ntt-field-state-all-members
){
  transition-property:none !important;
}

/* Dense matrices can contain thousands of native choices. v1974 makes their
   visible state pure CSS so load/AJAX does not need per-control class/data writes. */
html body :where([data-ntt-field-state-dense="1"],[data-ntt-field-state-choice-dense="1"]) :where(input[type="checkbox"],input[type="radio"]){
  filter:none !important;
  box-shadow:none !important;
}
html body :where([data-ntt-field-state-dense="1"],[data-ntt-field-state-choice-dense="1"]) :where(input[type="checkbox"],input[type="radio"]):checked{
  accent-color:var(--ntt-filled-border) !important;
}
html body :where([data-ntt-field-state-dense="1"],[data-ntt-field-state-choice-dense="1"]) :where(input[type="checkbox"],input[type="radio"]):disabled:checked{
  opacity:.72;
}

/* Disabled fields can still show stored data, but must remain visually disabled. */
html body :where(input,select,textarea):disabled.ntt-field-has-value,
html body :where(input,select,textarea):disabled.ntt-field-state-online,
html body :where(input,select,textarea):disabled.ntt-field-state-all-members{
  opacity:.72;
}

@media (prefers-reduced-motion:reduce){
  html body .ntt-field-has-value,
  html body .ntt-field-state-online,
  html body .ntt-field-state-all-members{ transition:none !important; }
}


/* v1976 — FIRST-PAINT CONTRACT -------------------------------------------------
   Server-rendered values are colored by CSS before deferred JS runs. During the
   initial sync JS applies the durable classes, then adds .ntt-field-state-ready;
   the handoff is visually identical, so reload no longer shows neutral -> color. */
html:not(.ntt-field-state-ready) body :where(
  input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])[value]:not([value=""]),
  select:has(option:checked:not([value=""])),
  textarea:not(:empty),
  [contenteditable="true"]:not(:empty)
){
  background-color:var(--ntt-filled-bg) !important;
  border-color:var(--ntt-filled-border-strong) !important;
  outline:1px solid var(--ntt-filled-border) !important;
  outline-offset:-2px !important;
  transition:none !important;
}
html:not(.ntt-field-state-ready) body input[type="file"][value]:not([value=""]){
  border-color:var(--ntt-filled-border-strong) !important;
  background-color:var(--ntt-filled-bg) !important;
  box-shadow:inset 0 0 0 1px var(--ntt-filled-border) !important;
  transition:none !important;
}
html:not(.ntt-field-state-ready) body :where(input,select,textarea,[contenteditable="true"]){
  transition-property:none !important;
}

/* v1976 — choices are visually CSS-owned system-wide from the first frame.
   JS may still maintain legacy descriptor classes on small forms, but the native
   control itself never waits for a post-load class write. */
html body :where(input[type="checkbox"],input[type="radio"]):checked{
  accent-color:var(--ntt-filled-border) !important;
  filter:none !important;
  box-shadow:none !important;
}
html body :where(label,.checkbox-inline,.radio-inline,.cb-inline,.ntt-choice-chip):has(> input[type="checkbox"]:checked,> input[type="radio"]:checked){
  color:var(--ntt-filled) !important;
}
html body :where(.checkbox-inline,.radio-inline,.cb-inline,.ntt-choice-chip):has(> input[type="checkbox"]:checked,> input[type="radio"]:checked){
  border-color:var(--ntt-filled-border) !important;
  background:var(--ntt-filled-bg) !important;
}

/* Online / All remain deliberately different colors even before JS initializes. */
html body :where(#tvonline,input[name="tvonline"]):checked{accent-color:var(--ntt-online-border) !important;}
html body :where(#alltv,input[name="alltv"]):checked{accent-color:var(--ntt-all-members-border) !important;}
html body :where(label,.checkbox-inline,.radio-inline,.cb-inline,.ntt-choice-chip):has(> :where(#tvonline,input[name="tvonline"]):checked){
  color:var(--ntt-online) !important;
  border-color:var(--ntt-online-border) !important;
  background:var(--ntt-online-bg) !important;
}
html body :where(label,.checkbox-inline,.radio-inline,.cb-inline,.ntt-choice-chip):has(> :where(#alltv,input[name="alltv"]):checked){
  color:var(--ntt-all-members) !important;
  border-color:var(--ntt-all-members-border) !important;
  background:var(--ntt-all-members-bg) !important;
}

/* Auto-dense and explicit-dense choices share the same zero-glow contract. */
html body :where([data-ntt-field-state-dense="1"],[data-ntt-field-state-choice-dense="1"]) :where(input[type="checkbox"],input[type="radio"]){
  filter:none !important;
  box-shadow:none !important;
}

/* v1976 specificity guard: special audience labels must outrank generic checked labels. */
html body label:has(> #tvonline:checked),
html body .checkbox-inline:has(> #tvonline:checked),
html body .radio-inline:has(> #tvonline:checked),
html body .cb-inline:has(> #tvonline:checked),
html body .ntt-choice-chip:has(> #tvonline:checked),
html body label:has(> input[name="tvonline"]:checked),
html body .checkbox-inline:has(> input[name="tvonline"]:checked),
html body .radio-inline:has(> input[name="tvonline"]:checked),
html body .cb-inline:has(> input[name="tvonline"]:checked),
html body .ntt-choice-chip:has(> input[name="tvonline"]:checked){
  color:var(--ntt-online) !important; border-color:var(--ntt-online-border) !important; background:var(--ntt-online-bg) !important;
}
html body label:has(> #alltv:checked),
html body .checkbox-inline:has(> #alltv:checked),
html body .radio-inline:has(> #alltv:checked),
html body .cb-inline:has(> #alltv:checked),
html body .ntt-choice-chip:has(> #alltv:checked),
html body label:has(> input[name="alltv"]:checked),
html body .checkbox-inline:has(> input[name="alltv"]:checked),
html body .radio-inline:has(> input[name="alltv"]:checked),
html body .cb-inline:has(> input[name="alltv"]:checked),
html body .ntt-choice-chip:has(> input[name="alltv"]:checked){
  color:var(--ntt-all-members) !important; border-color:var(--ntt-all-members-border) !important; background:var(--ntt-all-members-bg) !important;
}