/*
  inputs.css — Nium Portal form input system
  ───────────────────────────────────────────
  Link from every page: <link rel="stylesheet" href="inputs.css">

  THREE TIERS:

  T1  Form / modal inputs   — 14px · 10px 14px · radius-md · 1px border-secondary
  T2  Filter / table inputs — 13.5px · 8px 12px · radius-md · 1px border-secondary
  T3  Compact selects       — 13px · 4px 8px · radius-sm · 1px border-secondary (unchanged)

  Hardcoded border colors replaced throughout:
    #ccc, #e2e8f0, #d3d1c7, #cbd5e1, #e4e6ef → var(--color-border-secondary)

  NOT touched:
    .search-filter      pill-shaped filter chips (intentionally 999px)
    .per-page-select    pagination compact selects (T3, already correct)
    .stmt-period-select period picker compact select (T3, already correct)
    .date-pop-input     mini date picker (context-specific sizing)
*/

/* ─── Shared base ─────────────────────────────────────────────────── */

.inp-form,
.inp-filter,
.inp-compact {
  font-family: inherit;
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--color-border-secondary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.1s;
}

.inp-form:focus,
.inp-filter:focus,
.inp-compact:focus {
  border-color: var(--color-brand-navy, #2d3748);
}

.inp-form::placeholder,
.inp-filter::placeholder,
.inp-compact::placeholder {
  color: var(--color-text-tertiary);
}

/* ─── T1: Form / modal ────────────────────────────────────────────── */

.inp-form {
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
}

/* ─── T2: Filter / table ──────────────────────────────────────────── */

.inp-filter {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
}

/* ─── T3: Compact select ──────────────────────────────────────────── */

.inp-compact {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
}

/* ─── Floating label fieldset (fl-fieldset) ──────────────────────── */
/* Matches the tx-fieldset pattern used in Transactions filters        */

.fl-fieldset {
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md, 8px);
  padding: 2px 12px 8px;
  background: var(--color-bg-primary, #ffffff);
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.fl-fieldset legend {
  font-size: 11px;
  color: var(--color-text-tertiary);
  padding: 0 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fl-fieldset select,
.fl-fieldset input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text-primary);
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  appearance: none;
  box-sizing: border-box;
}

.fl-fieldset select:focus,
.fl-fieldset input:focus {
  outline: none;
}

.fl-fieldset:focus-within {
  border-color: var(--color-brand-navy, #2d3748);
}

/* ─── Inputs inside fl-fieldset lose their own border/padding ─────── */
/* The fieldset provides border, radius, padding                        */

.fl-fieldset .adv-filter-input,
.fl-fieldset .adv-filter-select,
.fl-fieldset .lum-select,
.fl-fieldset .sl-input,
.fl-fieldset .sl-ccy-select,
.fl-fieldset .sr-input,
.fl-fieldset .sr-select,
.fl-fieldset .drawer-select,
.fl-fieldset .drawer-input {
  border: none;
  border-radius: 0;
  padding: 2px 0;
  background: none;
  width: 100%;
}