/*
   Theme accessibility guardrail
   -----------------------------
   This sheet intentionally loads after each page's own CSS.  Older screens
   still contain a few literal light-surface values; the rules below keep
   their text fields, selects, menus, and common utility surfaces readable
   whenever the user switches the application to dark mode.
*/

[data-theme="dark"] {
  color-scheme: dark;

  /* Legacy component variables used by both the PC and mobile shells. */
  --color-neutral-100: #183427;
  --color-neutral-200: #294a3a;
  --color-neutral-300: #416351;
  --color-neutral-700: #d7e7de;
  --color-neutral-800: #edf7f1;
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--color-background-primary);
  border-color: var(--color-border-tertiary);
  color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: .9;
}

/* Native select popups do not inherit a page surface on every browser. */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
  background-color: #0c2319;
  color: #f1f5f9;
}

[data-theme="dark"] .form-group label,
[data-theme="dark"] .help-text {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .m-manage-emblem,
[data-theme="dark"] .m-manage-tabs a,
[data-theme="dark"] .td-modal-actions {
  background-color: var(--color-background-primary);
  border-color: var(--color-border-tertiary);
  color: var(--color-text-primary);
}

/* The original mobile baseline predates design tokens. */
[data-theme="dark"] body > header,
[data-theme="dark"] .m-header,
[data-theme="dark"] footer {
  background-color: var(--color-background-primary);
  border-color: var(--color-border-tertiary);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .nav-menu a,
[data-theme="dark"] .btn-secondary {
  color: var(--color-text-primary);
}

/* Keep semantic messages legible if a legacy page supplies only its light color. */
[data-theme="dark"] .message.success { background-color: #14532d; color: #bbf7d0; }
[data-theme="dark"] .message.error { background-color: #450a0a; color: #fecaca; }

/* Lineup editor: this may run inside the record-center iframe, where legacy
   --surface values otherwise leave the submitted sheet white in dark mode. */
[data-theme="dark"] .lu-modal-shell,
[data-theme="dark"] .lu-shell,
[data-theme="dark"] .lu-card,
[data-theme="dark"] .lu-datebox,
[data-theme="dark"] .lu-tbl td,
[data-theme="dark"] .lu-bench-grid {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] .lu-tbl td,
[data-theme="dark"] .lu-datebox,
[data-theme="dark"] .lu-teambox,
[data-theme="dark"] .lu-actions,
[data-theme="dark"] .lu-acting,
[data-theme="dark"] .lu-announce {
  border-color: var(--color-border-tertiary);
}

/* 라인업 제출 모달은 버튼의 글자색을 부모에게서 상속한다. 다크 모드에서는
   일부 버튼이 밝은 표면에 밝은 글자를 물려받을 수 있어, 모든 조작 버튼의
   배경·테두리·텍스트를 명시적으로 고정한다(PC 모달과 모바일 화면 공용). */
[data-theme="dark"] .lu-btn:not(.primary),
[data-theme="dark"] .lu-side-btn:not(.is-active),
[data-theme="dark"] .lu-posmode button:not(.on) {
  background: #163a2a;
  border-color: #3b6350;
  color: #ecfdf5;
}
[data-theme="dark"] .lu-btn:not(.primary):hover,
[data-theme="dark"] .lu-side-btn:not(.is-active):hover,
[data-theme="dark"] .lu-posmode button:not(.on):hover {
  background: #1d4d36;
  border-color: #8cf0bd;
  color: #ffffff;
}
[data-theme="dark"] .lu-btn.primary,
[data-theme="dark"] .lu-side-btn.is-active,
[data-theme="dark"] .lu-posmode button.on {
  background: #087853;
  border-color: #087853;
  color: #ffffff;
}
[data-theme="dark"] .lu-add { color: #8cf0bd; }
[data-theme="dark"] .lu-workflow span.is-current {
  background: #163a2a;
  color: #8cf0bd;
}
[data-theme="dark"] .lu-workflow b { color: #8cf0bd; }
[data-theme="dark"] .lu-locked-hint {
  background: #451a03;
  color: #fde68a;
}