/**
 * HB-217 — Admin «Hạng thành viên» field contrast (light readable).
 *
 * Root cause: live CustomerManager chunk still paints the readonly rank box as
 * `border-slate-700 bg-slate-900/80` with dark-panel badge ink. Frozen BN2 never
 * shipped `.admin-shell-light` remaps for those slate-900 utilities, so the field
 * stays a dark panel on the light admin shell.
 *
 * Overlay only: do NOT edit index-C7BUmI7G.js / index-BN2ZtJyR.css /
 * AdminAppVertical-D1gsu3lu.js. Narrow selectors prefer the data marker; class
 * fallbacks cover the frozen chunk until it is surgically patched.
 */

html.admin-root,
.admin-shell-light {
  --hb217-field-bg: #f8fafc;
  --hb217-field-ink: #0f172a;
  --hb217-field-muted: #475569;
  --hb217-field-border: #e2e8f0;
}

/* Preferred: source marker after HB-217 */
.admin-shell-light [data-hb217-member-rank="1"],
html.admin-root [data-hb217-member-rank="1"] {
  background-color: var(--hb217-field-bg) !important;
  background-image: none !important;
  border-color: var(--hb217-field-border) !important;
  color: var(--hb217-field-ink) !important;
  -webkit-text-fill-color: var(--hb217-field-ink);
}

.admin-shell-light [data-hb217-member-rank="1"] p,
html.admin-root [data-hb217-member-rank="1"] p {
  color: var(--hb217-field-muted) !important;
  -webkit-text-fill-color: var(--hb217-field-muted);
}

/* Frozen-chunk fallback: exact dark utility combo used by He() */
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700,
html.admin-root div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"],
html.admin-root div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 {
  background-color: var(--hb217-field-bg) !important;
  background-image: none !important;
  border-color: var(--hb217-field-border) !important;
  color: var(--hb217-field-ink) !important;
  -webkit-text-fill-color: var(--hb217-field-ink);
}

.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] > p,
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 > p,
html.admin-root div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] > p,
html.admin-root div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 > p {
  color: var(--hb217-field-muted) !important;
  -webkit-text-fill-color: var(--hb217-field-muted);
}

/* Rank badges that still carry dark-panel pastel ink */
.admin-shell-light [data-hb217-member-rank="1"] .bg-purple-500\/20,
.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-purple-500/20"],
html.admin-root [data-hb217-member-rank="1"] [class*="bg-purple-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-purple-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-purple-500/20"] {
  background-color: #f3e8ff !important;
  color: #581c87 !important;
  -webkit-text-fill-color: #581c87;
  border-color: #d8b4fe !important;
}

.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-cyan-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-cyan-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-cyan-500/20"] {
  background-color: #cffafe !important;
  color: #155e75 !important;
  -webkit-text-fill-color: #155e75;
  border-color: #a5f3fc !important;
}

.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-yellow-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-yellow-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-yellow-500/20"] {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  -webkit-text-fill-color: #78350f;
  border-color: #fcd34d !important;
}

.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-orange-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-orange-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-orange-500/20"] {
  background-color: #ffedd5 !important;
  color: #9a3412 !important;
  -webkit-text-fill-color: #9a3412;
  border-color: #fdba74 !important;
}

.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-gray-400/20"],
.admin-shell-light [data-hb217-member-rank="1"] [class*="bg-gray-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-gray-400/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"] [class*="bg-gray-500/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-gray-400/20"],
.admin-shell-light div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700 [class*="bg-gray-500/20"] {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b;
  border-color: #cbd5e1 !important;
}

/* Label immediately above the rank field (frozen chunk still uses text-gray-300/400) */
.admin-shell-light label.text-gray-300:has(+ [data-hb217-member-rank="1"]),
.admin-shell-light label.text-gray-400:has(+ [data-hb217-member-rank="1"]),
.admin-shell-light label.text-gray-300:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"]),
.admin-shell-light label.text-gray-300:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700),
.admin-shell-light label.text-gray-400:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"]),
.admin-shell-light label.text-gray-400:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700),
html.admin-root label.text-gray-300:has(+ [data-hb217-member-rank="1"]),
html.admin-root label.text-gray-400:has(+ [data-hb217-member-rank="1"]),
html.admin-root label.text-gray-300:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border[class*="bg-slate-900"]),
html.admin-root label.text-gray-300:has(+ div.mt-1.flex.flex-col.gap-1.rounded-md.border.border-slate-700) {
  color: #334155 !important;
  -webkit-text-fill-color: #334155;
}