/* ============================================================
   CESIVI Modern UI — Focus Ring Overrides (Phase 6a PLAN-1361)
   Per-component :focus-visible rules that refine the global ring
   declared in shell.css. All consume --focus-ring-* tokens.
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────────── */
body[data-modern-ui="true"] .btn-save:focus-visible,
body[data-modern-ui="true"] .btn-cancel:focus-visible,
body[data-modern-ui="true"] .btn-danger:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Form inputs ───────────────────────────────────────────── */
body[data-modern-ui="true"] .sp-input:focus-visible,
body[data-modern-ui="true"] input.sp-input:focus-visible,
body[data-modern-ui="true"] select.sp-input:focus-visible,
body[data-modern-ui="true"] textarea.sp-input:focus-visible,
body[data-modern-ui="true"] .sp-input-sm:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0;
  border-color: var(--focus-ring-color);
}

/* ── Links ─────────────────────────────────────────────────── */
body[data-modern-ui="true"] a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Tab / nav buttons ─────────────────────────────────────── */
body[data-modern-ui="true"] .tab-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

/* ── Menu items & dropdowns ────────────────────────────────── */
body[data-modern-ui="true"] .menuitem:focus-visible,
body[data-modern-ui="true"] [role="menuitem"]:focus-visible,
body[data-modern-ui="true"] [role="option"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

body[data-modern-ui="true"] .dropdown-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Modal close button ────────────────────────────────────── */
body[data-modern-ui="true"] .modal-close:focus-visible,
body[data-modern-ui="true"] .btn-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Command bar buttons ───────────────────────────────────── */
body[data-modern-ui="true"] .cmdbar-btn:focus-visible,
body[data-modern-ui="true"] .sp-cmdbar-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Icon-only buttons ─────────────────────────────────────── */
body[data-modern-ui="true"] .sp-icon-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ── Checkboxes and radios (suppress — browser native ring) ── */
body[data-modern-ui="true"] input[type="checkbox"]:focus-visible,
body[data-modern-ui="true"] input[type="radio"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* ── Design canvas density toggle ─────────────────────────── */
body[data-modern-ui="true"] .density-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}