/* components.css -- buttons, inputs, badges, nav, tooltips */

/* ── Nav item states ─────────────────────────────────────────────────── */
.nav-item { transition: background 0.15s, color 0.1s; }
.nav-item:hover { background: var(--bg-surface); }
.nav-item.active { background: var(--bg-elevated); color: #ffffff; font-weight: 500; }
.nav-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: var(--rm); }
.nav-item svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* ── Badges (JS-generated) ───────────────────────────────────────────── */
.badge-long { background: var(--green-bg); color: var(--green); padding: 0.2em 0.55em; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; }
.badge-short { background: var(--red-bg); color: var(--red); padding: 0.2em 0.55em; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; }

/* ── Button component + states ────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2rem; padding: 0.4rem 0.75rem; border-radius: var(--rm); border: none; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-elevated); filter: brightness(1.15); }
.btn-toolbar { background: var(--input-bg); }
.btn-toolbar:hover { background: var(--input-bg); border-color: rgba(255,255,255,0.12); filter: none; }
.btn-primary { background: var(--btn-primary-bg); color: var(--green); border: 1px solid var(--btn-primary-border); padding: 0.4rem 1rem; border-radius: var(--rm); font-size: 0.8125rem; font-weight: 500; cursor: pointer; min-height: 2rem; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-primary:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.35; cursor: default; }
.btn-add-more { position: absolute; bottom: 0.75rem; right: 0.75rem; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); padding: 0.375rem 0.875rem; min-height: 2.75rem; border-radius: var(--r); font-size: 0.8125rem; cursor: pointer; display: flex; align-items: center; transition: background 0.15s, color 0.15s; }
.btn-add-more:hover { background: rgba(0,0,0,0.9); color: var(--text-primary); }
.btn-add-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── Form components ─────────────────────────────────────────────────── */
.trade-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
.trade-inp { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--rm); color: var(--input-text); font-size: 0.9375rem; padding: 0.55rem 0.75rem; min-height: 2.5rem; outline: none; transition: border-color 0.15s; appearance: none; }
.trade-inp:focus { border-color: var(--input-border-focus); }
.trade-inp::placeholder { color: var(--input-placeholder); }
.trade-inp option { background: var(--bg-elevated); color: var(--text-primary); }
select.trade-inp, select.review-inp { accent-color: var(--green); }
.review-inp[readonly], .review-inp:disabled { opacity: 0.78; cursor: default; border-color: transparent !important; background: var(--input-bg) !important; pointer-events: none; }
.review-inp:not([readonly]):not(:disabled) { border-color: var(--input-border); background: var(--input-bg); pointer-events: auto; }
.trade-inp::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
/* Override Chrome/Safari autofill white background */
.trade-inp:-webkit-autofill,
.trade-inp:-webkit-autofill:hover,
.trade-inp:-webkit-autofill:focus,
.trade-inp:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}
body.light .trade-inp::-webkit-calendar-picker-indicator { filter: none; }

/* ── Compact input + attached button (used for inline-add patterns) ─────── */
.form-group { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--rm); overflow: hidden; background: var(--bg-base); transition: border-color 0.15s; max-width: 100%; }
.form-group:focus-within { border-color: var(--green); }
.form-group input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 0.8125rem; padding: 0.35rem 0.6rem; font-family: inherit; width: 12rem; max-width: 100%; }
.form-group button { background: var(--bg-elevated); border: none; border-left: 1px solid var(--border); color: var(--text-secondary); font-size: 0.8125rem; padding: 0 0.9rem; cursor: pointer; font-family: inherit; font-weight: 500; transition: background 0.15s, color 0.15s; }
.form-group button:hover:not(:disabled) { background: var(--green-tint); color: var(--green); }
.form-group button:disabled { opacity: 0.4; cursor: default; }

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip { visibility: hidden; opacity: 0; position: absolute; left: 0; top: 100%; margin-top: 4px; background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 400; color: var(--text-muted); max-width: 220px; white-space: normal; z-index: 60; pointer-events: none; transition: opacity 0.15s; }
.tooltip-wrap:hover .tooltip { visibility: visible; opacity: 1; }