/* Controls: buttons, fields, toggles, chips, status pills, dropdowns, tabs, pager.
   Every size/colour below is lifted from the prototype style strings (see WP5_NOTES.md, "Component map"). */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:disabled { cursor: not-allowed; }
.btn--primary { padding: 0 16px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.btn--primary:active:not(:disabled) { background: var(--accent-pressed); }
.btn--secondary { border-color: var(--border-default); background: var(--bg-raised); color: var(--text-primary); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.btn--ghost { border: 0; background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
.btn--plain { border: 0; background: transparent; color: var(--text-primary); }
.btn--plain:hover:not(:disabled) { background: var(--bg-raised); }
.btn--danger { padding: 0 16px; border: 0; background: var(--danger); color: var(--on-accent); font-weight: 600; }
.btn--danger:hover:not(:disabled) { background: var(--danger-hover); color: var(--on-accent); }
.btn--danger-ghost { padding: 0 12px; border: 0; background: transparent; color: var(--danger); }
.btn--danger-ghost:hover:not(:disabled) { background: var(--danger-tint); color: var(--danger); }
.btn--soft { border-color: var(--accent-line); background: var(--accent-tint-10); color: var(--accent-hover); }
.btn--soft:hover:not(:disabled) { background: var(--accent-tint-18); color: var(--accent-hover); }
.btn--primary:disabled, .btn--danger:disabled, .btn--danger-ghost:disabled, .btn--soft:disabled { opacity: 0.45; }
.btn--secondary:disabled { border-color: var(--border-subtle); background: var(--bg-panel); color: var(--text-disabled); }
.btn--ghost:disabled, .btn--plain:disabled { color: var(--text-disabled); }
/* sizes: md 36/r8/13 (default) · sm 34/r6/12.5 · xs 32/r6/12.5 · xxs 30/r6/12 */
.btn--sm { height: 34px; border-radius: var(--r-sm); font-size: var(--fs-meta); }
.btn--xs { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-meta); gap: 7px; }
.btn--xxs { height: 30px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-small); gap: 6px; }
.btn--ghost.btn--xs, .btn--plain.btn--xs, .btn--ghost.btn--xxs { padding: 0 10px; }
.btn--block { width: 100%; }

.icon-btn {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0;
  border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-raised); color: var(--text-primary); }
.icon-btn--30 { width: 30px; height: 30px; }
.icon-btn--38 { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); }
.icon-btn--38:hover { background: var(--accent-hover); color: var(--on-accent); }
.icon-btn--round {
  width: 20px; height: 20px; border-radius: var(--r-full); background: var(--bg-hover); color: var(--text-secondary);
}
.icon-btn--round:hover { background: var(--bg-pressed); color: var(--text-primary); }

.link-btn {
  padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit;
  text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--accent-hover); }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { color: var(--text-secondary); font-size: var(--fs-small); }
.field__hint { color: var(--text-tertiary); font-size: var(--fs-caption); }
.field__error { color: var(--danger); font-size: var(--fs-caption); }
.input {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--bg-input); color: var(--text-primary); font-size: var(--fs-body); outline: none;
  transition: border-color var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { border-color: var(--accent); }
.input.is-invalid { border-color: var(--danger); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input--sm { height: 36px; font-size: var(--fs-meta); }
.input--mono { font-family: var(--font-mono); font-size: 14px; }
.input--sm.input--mono { font-size: var(--fs-meta); }
.input--num { width: 120px; }
.textarea {
  width: 100%; min-height: 72px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--bg-input); color: var(--text-primary); font-size: var(--fs-body); line-height: 1.55;
  resize: vertical; outline: none;
}
.textarea:focus { border-color: var(--accent); }
.textarea--mono { font-family: var(--font-mono); font-size: var(--fs-meta); }

.search {
  display: flex; align-items: center; gap: 8px; width: 330px; max-width: 100%; height: 36px; padding: 0 8px 0 12px;
  border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-input); cursor: text;
}
.search:focus-within { border-color: var(--accent); }
.search__icon { color: var(--text-tertiary); }
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font-size: var(--fs-body); outline: none;
}
.search__input::placeholder { color: var(--text-tertiary); }

.select { position: relative; display: inline-flex; align-items: center; align-self: flex-start; }
.select__native {
  height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--border-default); border-radius: var(--r-md);
  background: var(--bg-input); color: var(--text-primary); font-size: var(--fs-meta); outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.select__native:focus { border-color: var(--accent); }
.select--block { align-self: stretch; }
.select--block, .select--block .select__native { width: 100%; }
.select__caret { position: absolute; right: 9px; color: var(--text-tertiary); pointer-events: none; }

/* Toggle 34x20, 140 ms */
.toggle { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.toggle__track {
  position: relative; width: 34px; height: 20px; flex: none; border-radius: var(--r-full); background: var(--track);
  transition: background var(--dur) var(--ease);
}
.toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-full);
  background: var(--text-secondary); transition: left var(--dur) var(--ease), background var(--dur) var(--ease);
}
.toggle.is-on .toggle__track { background: var(--accent); }
.toggle.is-on .toggle__knob { left: 16px; background: var(--on-accent); }

/* Radio option card (Dashboard assign modal, Settings ads guard) */
.radio-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.radio-card.is-on { border-color: var(--accent-line-45); background: var(--accent-tint-06); }
.radio {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--text-disabled); border-radius: var(--r-full);
}
.radio__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: transparent; }
.is-on > .radio { border-color: var(--accent); }
.is-on > .radio > .radio__dot { background: var(--accent); }
.radio-card__text { display: flex; flex-direction: column; gap: 3px; }
.radio-card__label { color: var(--text-primary); font-size: var(--fs-body); font-weight: 500; }
.radio-card__desc { color: var(--text-tertiary); font-size: var(--fs-small); }

/* Checkbox 20 px (new order modal) */
.checkbox {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 5px; background: transparent; color: var(--on-accent); cursor: pointer;
}
.checkbox svg { opacity: 0; }
.checkbox.is-on { border-color: var(--accent); background: var(--accent); }
.checkbox.is-on svg { opacity: 1; }

/* Chips: choice chips (32) and small chips (28); seg = same look used as a segmented choice */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border-default); border-radius: var(--r-full); background: transparent;
  color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--text-primary); }
.chip.is-on { border-color: var(--accent-line-50); background: var(--accent-tint-10); color: var(--text-primary); }
.chip--sm { height: 28px; padding: 0 10px; font-size: var(--fs-small); font-weight: 400; }
.chip--mono { font-family: var(--font-mono); }
.chip--removable { padding-right: 4px; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: 500; white-space: nowrap;
}
.pill--sm { gap: 5px; padding: 2px 8px; font-size: var(--fs-micro); }
.pill--plain { gap: 7px; padding: 0; border-radius: 0; background: transparent; font-size: var(--fs-small); font-weight: 450; }
.pill--safe { color: var(--st-safe); background: var(--st-safe-tint); }
.pill--watch { color: var(--st-watch); background: var(--st-watch-tint); }
.pill--order { color: var(--st-order); background: var(--st-order-tint); }
.pill--risk, .pill--out { color: var(--st-out); background: var(--st-out-tint); }
.pill--transit { color: var(--st-transit); background: var(--st-transit-tint); }
.pill--error { color: var(--st-error); background: var(--st-error-tint); }
.pill--neutral { color: var(--st-neutral); background: var(--st-neutral-tint); }
.pill--draft { color: var(--st-draft); background: var(--st-draft-tint); }
.pill--plain { background: transparent; }
.count-pill {
  padding: 2px 7px; border-radius: var(--r-full); background: var(--bg-raised); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: var(--fs-tiny); font-weight: 500;
}
.is-active > .count-pill { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- Dropdowns (4 variants) ---------- */
.dd { position: relative; }
.dd--push { margin-left: auto; }
.dd__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-card);
  color: var(--text-primary); font-size: var(--fs-meta); font-weight: 450; cursor: pointer; white-space: nowrap;
}
.dd__caret { color: var(--text-tertiary); transition: transform var(--dur) var(--ease); }
.dd.is-open .dd__caret { transform: rotate(180deg); }
/* filter: solid toolbar filter (Magazyn, Zamowienia) */
.dd--filter.is-open .dd__btn { border-color: var(--accent); background: var(--bg-raised); }
/* view: ghost sort / page-size switch, panel opens to the right edge */
.dd--view .dd__btn { gap: 8px; padding: 0 10px; border: 0; background: transparent; color: var(--text-tertiary); font-size: var(--fs-small); }
.dd--view.is-open .dd__btn { background: var(--bg-card); color: var(--text-primary); }
/* chip: compact report filter, tinted when a value is set */
.dd--chip .dd__btn { gap: 8px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); background: var(--bg-input); font-size: var(--fs-small); font-weight: 400; }
.dd--chip.is-active .dd__btn { border-color: var(--accent-line); background: var(--accent-tint-08); }
.dd--chip.is-open .dd__btn { border-color: var(--accent); }
/* picker: report picker with leading icon and grouped list */
.dd--picker .dd__btn { gap: 8px; height: 34px; border-radius: var(--r-sm); background: var(--bg-raised); font-weight: 500; }
.dd--picker.is-open .dd__btn { border-color: var(--accent); }
.dd__lead { color: var(--text-secondary); }

.dd__menu {
  position: absolute; top: 42px; left: 0; min-width: 200px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-raised);
  box-shadow: var(--shadow-dropdown); z-index: var(--z-dropdown);
}
.dd--right .dd__menu { left: auto; right: 0; }
.dd--chip .dd__menu { top: 38px; min-width: 220px; max-height: 320px; overflow-y: auto; }
.dd--picker .dd__menu { top: 40px; width: 280px; max-height: 420px; overflow-y: auto; z-index: var(--z-picker); }
.dd__item {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 450;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.dd__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.dd__item.is-on { color: var(--text-primary); font-weight: 500; }
.dd--chip .dd__item, .dd--picker .dd__item { color: var(--text-primary); }
.dd--chip .dd__item.is-on, .dd--picker .dd__item.is-on { font-weight: 450; }
.dd__check { margin-left: auto; color: var(--accent); opacity: 0; }
.dd__item.is-on .dd__check { opacity: 1; }
.dd__group {
  padding: 10px 10px 4px; color: var(--text-tertiary); font-size: var(--fs-tiny); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex; align-items: stretch; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tab {
  display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 10px; border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary);
  font-size: var(--fs-nav); font-weight: 450; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { border-bottom-color: var(--accent); color: var(--text-primary); font-weight: 600; }
.tabs--lg .tab { height: 42px; padding: 0 12px; }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pager__label { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-small); }
.pager .btn--prev { padding: 0 14px 0 12px; }
.pager .btn--next { padding: 0 12px 0 14px; }