/* Mobile-only OMS color sync.
   Every rule in this file is scoped inside @media (max-width: 767px), so it
   can never affect tablet/desktop layouts. Desktop CSS is untouched.
   Purpose: several legacy components (login card, settings modal, org chart
   / hierarchy chart, org admin card) still ship the pre-rebrand blue palette
   instead of the current OMS coral/teal token system defined in
   corehub-tokens.css. This file remaps those hardcoded hex colors to the
   matching --ch-* tokens, on mobile only, without editing the base rules
   that desktop also reads from. */

@media (max-width: 767px) {

  /* Login card */
  .login-brand-mark { border-color: var(--ch-line-primary) !important; background: var(--ch-primary-soft) !important; color: var(--ch-primary) !important; }
  .login-card h1 { color: var(--ch-primary) !important; }
  .login-card label { color: var(--ch-text-strong) !important; }
  .login-input-wrap > svg { stroke: var(--ch-muted) !important; }
  .login-card .login-input-wrap input { border-color: var(--ch-line-strong) !important; }
  .login-card .login-input-wrap input:focus { border-color: var(--ch-focus-border) !important; box-shadow: var(--ch-focus-ring) !important; }
  .login-password-toggle { color: var(--ch-muted) !important; }
  .login-password-toggle:hover { background: var(--ch-primary-soft) !important; color: var(--ch-primary-hover) !important; }
  .login-options .remember-option { color: var(--ch-muted) !important; }
  .remember-option input { accent-color: var(--ch-primary) !important; }
  .login-card #login-btn { background: var(--ch-primary) !important; box-shadow: none !important; }
  .login-card #login-btn:hover { background: var(--ch-primary-hover) !important; }
  .login-footer-note { border-top-color: var(--ch-line) !important; color: var(--ch-muted) !important; }
  .login-footer-note svg { stroke: var(--ch-primary) !important; }

  /* Settings modal */
  .corehub-settings-card { background: var(--ch-surface) !important; }
  .corehub-settings-head { border-bottom-color: var(--ch-line) !important; }
  .corehub-settings-head h3 { color: var(--ch-text-strong) !important; }
  .corehub-settings-head p { color: var(--ch-muted) !important; }
  .corehub-settings-nav { border-right-color: var(--ch-line) !important; background: var(--ch-surface-soft) !important; }
  .corehub-settings-nav button { color: var(--ch-muted) !important; }
  .corehub-settings-nav button:hover { background: var(--ch-primary-soft) !important; color: var(--ch-primary-hover) !important; }
  .corehub-settings-nav button.active { background: var(--ch-primary-soft) !important; color: var(--ch-primary) !important; }
  .corehub-settings-profile { border-color: var(--ch-line) !important; background: var(--ch-surface-soft) !important; }
  .corehub-settings-profile > span { background: var(--ch-primary) !important; color: #fff !important; }
  .corehub-settings-profile strong { color: var(--ch-text-strong) !important; }
  .corehub-settings-profile small { color: var(--ch-muted) !important; }
  .corehub-settings-section-head h4 { color: var(--ch-text-strong) !important; }
  .corehub-settings-section-head p { color: var(--ch-muted) !important; }
  .corehub-settings-field { color: var(--ch-text-control) !important; }
  .corehub-settings-field input { border-color: var(--ch-line-strong) !important; color: var(--ch-text-strong) !important; }
  .corehub-settings-field input:focus { border-color: var(--ch-focus-border) !important; box-shadow: var(--ch-focus-ring) !important; }
  .corehub-settings-access-list > div { border-color: var(--ch-line) !important; background: var(--ch-surface-raised) !important; }
  .corehub-settings-access-list dt { color: var(--ch-muted) !important; }
  .corehub-settings-access-list dd { color: var(--ch-text-strong) !important; }
  .corehub-settings-chip { background: var(--ch-primary-soft) !important; color: var(--ch-primary-hover) !important; }
  .corehub-settings-session-card { border-color: var(--ch-line) !important; background: var(--ch-surface-raised) !important; }
  .corehub-settings-session-card > span { background: var(--ch-primary-soft) !important; color: var(--ch-primary) !important; }
  .corehub-settings-session-card strong { color: var(--ch-text-strong) !important; }
  .corehub-settings-session-card small { color: var(--ch-muted) !important; }
  .danger-btn { border-color: var(--ch-danger-soft) !important; background: var(--ch-danger-soft) !important; color: var(--ch-danger) !important; }
  .danger-btn:hover { background: var(--ch-danger-soft) !important; }
  .corehub-settings-card .library-v13-org-settings-link { border-top-color: var(--ch-line) !important; }

  /* Org chart / hierarchy chart */
  .library-v13-org-chart { border-color: var(--ch-line) !important; background: var(--ch-surface) !important; }
  .library-v13-org-company { border-bottom-color: var(--ch-primary) !important; background: var(--ch-primary-subtle) !important; }
  .library-v13-org-company-mark { background: var(--ch-primary) !important; color: #fff !important; }
  .library-v13-org-company p { color: var(--ch-text-strong) !important; }
  .library-v13-org-company h2 { color: var(--ch-primary) !important; }
  .library-v13-org-company small { color: var(--ch-muted) !important; }
  .library-v13-org-executives article { border-color: var(--ch-line-strong) !important; background: var(--ch-text-strong) !important; }
  .library-v13-org-executives .library-v13-org-member small { color: var(--ch-primary) !important; }
  .library-v13-org-member strong { color: var(--ch-text-strong) !important; }
  .library-v13-org-member small { color: var(--ch-primary) !important; }
  .library-v13-org-avatar { background: var(--ch-avatar-surface) !important; color: var(--ch-primary) !important; }
  .library-v13-org-department { border-color: var(--ch-line) !important; background: var(--ch-surface) !important; }
  .library-v13-org-department > header { background: var(--ch-primary) !important; color: #fff !important; }
  .library-v13-org-role > small { color: var(--ch-primary) !important; }
  .library-v13-org-team-member { color: var(--ch-text-control) !important; }
  .library-v13-hierarchy { background: var(--ch-surface) !important; border-color: var(--ch-line) !important; }
  .library-v13-hierarchy-company { border-color: var(--ch-line-primary) !important; background: var(--ch-primary-subtle) !important; }
  .library-v13-hierarchy-company-mark { background: var(--ch-primary) !important; color: #fff !important; }
  .library-v13-hierarchy-company h2 { color: var(--ch-text-strong) !important; }
  .library-v13-hierarchy-company p { color: var(--ch-primary) !important; }
  .library-v13-hierarchy-company small { color: var(--ch-muted) !important; }
  .library-v13-hierarchy-director { border-color: var(--ch-line-strong) !important; background: var(--ch-text-strong) !important; }
  .library-v13-hierarchy-person strong { color: var(--ch-text-strong) !important; }
  .library-v13-hierarchy-person small { color: var(--ch-primary) !important; }
  .library-v13-hierarchy-director .library-v13-hierarchy-person small { color: var(--ch-primary-soft) !important; }
  .library-v13-hierarchy-avatar { background: var(--ch-avatar-surface) !important; color: var(--ch-primary) !important; }
  .library-v13-hierarchy-department { border-color: var(--ch-line) !important; background: var(--ch-surface) !important; }
  .library-v13-hierarchy-department > header { background: var(--ch-primary) !important; color: #fff !important; }
  .library-v13-hierarchy-role > small { color: var(--ch-primary) !important; }
  .library-v13-hierarchy-team-member { color: var(--ch-text-control) !important; }
  .library-v13-hierarchy-shared > header span { border-color: var(--ch-line-primary) !important; background: var(--ch-primary-subtle) !important; color: var(--ch-primary) !important; }

  /* Org admin card */
  .library-v13-organisation-admin-card > h2 { color: var(--ch-text-strong) !important; }
  .library-v13-organisation-admin-card > p { color: var(--ch-muted) !important; }
  .library-v13-org-admin-unit-create, .library-v13-org-admin-section { border-color: var(--ch-line) !important; background: var(--ch-surface) !important; }
  .library-v13-org-admin-unit-create h3, .library-v13-org-admin-section h3 { color: var(--ch-text-strong) !important; }
  .library-v13-org-admin-unit-create input, .library-v13-org-admin-unit-create select,
  .library-v13-org-admin-unit input, .library-v13-org-admin-unit select,
  .library-v13-org-admin-person input, .library-v13-org-admin-person select { border-color: var(--ch-line-strong) !important; color: var(--ch-text-strong) !important; }
  .library-v13-org-admin-unit { border-color: var(--ch-line) !important; background: var(--ch-surface-raised) !important; }
  .library-v13-org-admin-unit label, .library-v13-org-admin-person label { color: var(--ch-muted) !important; }
  .library-v13-org-admin-person { border-top-color: var(--ch-line) !important; }
  .library-v13-org-admin-photo > img, .library-v13-org-admin-photo > span { background: var(--ch-avatar-surface) !important; color: var(--ch-primary) !important; }
  .library-v13-org-admin-photo label { color: var(--ch-primary) !important; }
  .library-v13-org-admin-person-main > strong { color: var(--ch-text-strong) !important; }
  .library-v13-org-admin-person-main > small { color: var(--ch-muted) !important; }
  .library-v13-org-admin-departments label { border-color: var(--ch-line) !important; background: var(--ch-surface-soft) !important; color: var(--ch-text-control) !important; }
  .library-v13-org-admin-departments input { accent-color: var(--ch-primary) !important; }
  .library-v13-organisation-admin-card > footer { border-top-color: var(--ch-line) !important; background: rgba(255, 255, 255, .97) !important; }
  .library-v13-organisation-admin-card > footer span { color: var(--ch-muted) !important; }

  /* Operations alert strip */
  .ops-alert-strip { border-color: var(--ch-warning-soft) !important; background: var(--ch-warning-soft) !important; }
  .ops-alert-strip > strong { color: var(--ch-warning) !important; }
  .ops-alert-strip > div { border-color: var(--ch-warning-soft) !important; }
  .ops-alert-strip b { color: var(--ch-warning) !important; }
  .ops-alert-strip span { color: var(--ch-warning) !important; }
}