/* =============================================================================
   rhq_controls.css — shared control primitives (guideline §4.3, §4.5, §4.6)
   -----------------------------------------------------------------------------
   .rhq-seg        segmented control — replaces the black-selected pair (Work),
                   Bootstrap button groups (Roster List/Grid), grey pill pairs
                   (Cockpit) and the dashboard toggle (--navy variant).
   .rhq-input      text/search/date/select fields — no unstyled native controls
                   on product surfaces (selects add appearance:none + chevron).
   .rhq-chip-navy  chips on the navy ground (hub/drill pages) — non-status data
                   tags stay neutral slate, never a severity colour.
   Additive until templates adopt the classes. Tokens from rhq_tokens.css.
   ============================================================================= */

/* ---- Segmented control (§4.5) -------------------------------------------- */
.rhq-seg { display:inline-flex; background:#f2f5f9; border-radius:999px; padding:3px; gap:2px; }
.rhq-seg--navy { background:rgba(255,255,255,.10); }
.rhq-seg__opt { border:0; background:transparent; padding:7px 16px; border-radius:999px;
  font:600 13px var(--rhq-font); color:var(--rhq-text-muted); cursor:pointer; }
.rhq-seg__opt[aria-pressed="true"] { background:#fff; color:var(--rhq-text-strong);
  font-weight:700; box-shadow:0 1px 3px rgba(16,24,40,.12); }

/* ---- Form controls (§4.6) ------------------------------------------------- */
.rhq-input { height:40px; padding:0 12px; border:1px solid var(--rhq-border); border-radius:8px;
  font:400 14px var(--rhq-font); color:var(--rhq-text-strong); background:#fff; }
.rhq-input:focus { outline:none; border-color:var(--rhq-web-action-primary);
  box-shadow:0 0 0 1px var(--rhq-web-action-primary); }
.rhq-input::placeholder { color:var(--rhq-text-faint); }

/* ---- Chips on the navy ground (§4.3) -------------------------------------- */
.rhq-chip-navy { display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
  border-radius:999px; font:600 13px var(--rhq-font); white-space:nowrap; }
.rhq-chip-navy--attention { background:rgba(245,158,11,.16); color:#fcd34d; }
.rhq-chip-navy--events    { background:rgba(239,68,68,.16);  color:#fca5a5; }
.rhq-chip-navy--ghost     { background:rgba(255,255,255,.07); color:rgba(255,255,255,.45); }

/* ---- Select + textarea variants (§4.6) ------------------------------------- */
select.rhq-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23687281' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
textarea.rhq-input { height: auto; min-height: 5rem; padding: 0.5rem 0.75rem; }