/* settings screen (WP6b). Tokens only (styles/tokens.css); class prefix keeps it from colliding with other screens.
   Sizes are lifted from "Stock Pulse Ustawienia.dc.html" (inline styles of the <x-dc> markup). */

/* ---------- Cards ---------- */
.set-card { min-width: 0; }
.set-h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h2); font-weight: 600; }
.set-h3 { margin: 18px 0 8px; color: var(--text-secondary); font-size: var(--fs-small); font-weight: 500; }
.set-desc { color: var(--text-secondary); font-size: var(--fs-meta); }
.set-desc--p { margin-top: 4px; }
.set-lh { line-height: 1.5; }
.set-desc--p6 { margin-top: 6px; line-height: 1.5; }
.set-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-card--top .set-card__head { align-items: flex-start; }
.set-card__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-card--top .set-card__titles { flex: 1; min-width: 240px; }
.set-card--top .set-desc { line-height: 1.5; }
.set-card__actions { display: flex; gap: 8px; margin-left: auto; }
.set-note { margin-top: 12px; color: var(--text-tertiary); font-size: var(--fs-small); line-height: 1.5; }
.set-hint { margin-top: 6px; color: var(--text-tertiary); font-size: var(--fs-caption); }
.set-empty { padding: 12px 0; color: var(--text-tertiary); font-size: var(--fs-meta); }
.set-ro-note { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: var(--fs-small); }
.set-link {
  padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: underline;
}
.set-link:hover { color: var(--accent-hover); }

.set-mt8 { margin-top: 8px; }
.set-mt12 { margin-top: 12px; }
.set-mt14 { margin-top: 14px; }
.set-mt16 { margin-top: 16px; }
.set-mt18 { margin-top: 18px; }

/* ---------- Buttons (prototype sizes the kit does not have) ---------- */
.set-btn-12 { gap: 6px; font-size: var(--fs-small); }
.btn--ghost.set-btn-12 { padding: 0 10px; }
.set-btn-strong { padding: 0 14px; }
.set-btn-strong svg { stroke-width: 2.2; }
.set-btn-add { font-size: var(--fs-meta); }
.set-btn-conn { padding: 0 14px; font-size: var(--fs-meta); }

/* ---------- Segmented chips (prototype "seg": 32 px, padding 14) ---------- */
.set-seg .chip { padding: 0 14px; }
.set-seg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.set-seg.is-ro .chip, .chips.is-ro .chip { cursor: default; }
.set-seg.is-ro .chip:not(.is-on):hover, .chips.is-ro .chip:not(.is-on):hover { color: var(--text-secondary); }

/* ---------- List rows (shops, ad accounts, offers, connectors) ---------- */
.set-list { display: flex; flex-direction: column; }
.set-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border-subtle);
}
.set-row--12 { gap: 12px; padding: 12px 0; }
.set-tile {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--text-secondary);
}
.set-row__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.set-row__main--2 { gap: 2px; }
.set-row--12 .set-row__main:not(.set-row__main--2) { gap: 3px; }
.set-row__title { font-size: var(--fs-nav); font-weight: 500; }
.set-row__sub { color: var(--text-tertiary); font-size: var(--fs-small); }
.set-row__sub--mono { font-family: var(--font-mono); font-size: var(--fs-caption); }
.set-st { font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.set-st--busy { color: var(--accent); }
.set-conn { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 600; }
.set-conn.is-on { border: 1px solid color-mix(in srgb, var(--st-safe) 35%, transparent); color: var(--st-safe); }

/* Unassigned offers */
.set-count {
  padding: 2px 8px; border-radius: var(--r-full); background: var(--st-error-tint); color: var(--st-error);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 400;
}
.set-sku { font-size: var(--fs-meta); }
.set-guess { color: var(--text-secondary); font-size: var(--fs-small); }
.set-search { width: 100%; }
.set-picker {
  display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; margin-top: -4px;
  padding: 4px; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
}
.set-pick {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary); font-size: var(--fs-body); text-align: left; cursor: pointer; white-space: normal;
}
.set-pick:hover { background: var(--bg-raised); color: var(--text-primary); }
.set-pick.is-on { background: var(--accent-tint-06); color: var(--text-primary); }
.set-pick__code { font-size: var(--fs-meta); color: var(--text-primary); }

/* ---------- Form fields ---------- */
.set-grid { display: grid; gap: 14px; }
.set-grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.set-grid--180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.set-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.set-numfield { display: flex; flex-direction: column; gap: 6px; }
.set-numfield__row { display: flex; align-items: center; gap: 8px; }
.input--sm.input--mono.set-num { font-size: var(--fs-body); }
.set-unit { color: var(--text-tertiary); font-size: var(--fs-small); }
.input.set-rate--auto:disabled { opacity: 1; background: var(--bg-panel); color: var(--text-secondary); cursor: default; }
.set-select .select__native { padding-right: 32px; font-family: var(--font-mono); }
.input--mono.set-input-125 { font-size: var(--fs-meta); }

/* ---------- Tables (suppliers, season windows) ---------- */
.set-tbl-wrap { overflow-x: auto; overflow-y: hidden; }
.set-tbl { width: 100%; }
.set-tbl--sup { min-width: 700px; }
.set-tbl th {
  padding: 10px 8px; text-align: left; color: var(--text-tertiary); font-size: var(--fs-caption); font-weight: 500;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.set-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--border-subtle); }
.set-tbl th.is-right, .set-tbl td.is-right { text-align: right; }
.set-tbl--win { width: auto; }
.set-tbl--win th, .set-tbl--win td { padding-right: 28px; }
.set-tbl--win th:first-child, .set-tbl--win td:first-child { padding-left: 0; }
.set-td-name { font-size: var(--fs-body); }
.input.set-cell { height: 32px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-meta); }
.set-cell--num { width: 72px; text-align: right; }
.set-cell--date { width: 96px; }
.set-cell--mult { width: 72px; text-align: right; }
.input.set-cell:disabled { opacity: 1; background: var(--bg-panel); color: var(--text-secondary); cursor: default; }
.set-name { display: flex; flex-direction: column; gap: 2px; }
.set-name__main { font-size: var(--fs-body); font-weight: 500; }
.set-name__sub { color: var(--text-tertiary); font-size: var(--fs-caption); }
.set-actual { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: var(--fs-meta); }
.set-actual__diff { color: var(--text-tertiary); font-size: var(--fs-micro); }
.set-actual__diff.t-order { color: var(--st-order); }
.set-uses { display: flex; flex-direction: column; gap: 3px; }
.set-uses__chips { gap: 4px; flex-wrap: nowrap; }
.set-uses-text { color: var(--text-tertiary); font-size: var(--fs-small); }

/* ---------- Toggle rows (alerts, ads guard, include costs) ---------- */
.set-trow.toggle, .set-trow--static {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0;
  border-top: 1px solid var(--border-subtle); background: transparent; text-align: left;
}
.set-trow.toggle:disabled { opacity: 1; cursor: default; }
.set-trow.toggle:disabled .toggle__track { opacity: 0.6; }
.set-trow__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; white-space: normal; }
.set-trow__label { flex: 1; color: var(--text-primary); font-size: var(--fs-body); }
.set-trow__desc { color: var(--text-tertiary); font-size: var(--fs-small); }
.set-lock { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: var(--fs-small); white-space: nowrap; }
.set-radios { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Notifications ---------- */
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.set-mchip {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-full);
  background: var(--bg-raised); font-size: var(--fs-meta);
}
.icon-btn--round.set-mchip__x { background: transparent; }
.icon-btn--round.set-mchip__x:hover { background: var(--bg-pressed); }
.set-addrow { display: flex; gap: 8px; }
.set-addrow--wrap { flex-wrap: wrap; }
.input.set-email-in { flex: 1; min-width: 0; max-width: 320px; font-size: var(--fs-body); }
.input.set-hook-in { flex: 1; min-width: 240px; width: auto; font-size: var(--fs-small); }
.set-hook { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-hook .link-btn { font-size: inherit; }
.set-push { margin-left: auto; }

/* ---------- Account ---------- */
.set-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 14px 0 0; }
.set-facts dt { color: var(--text-secondary); font-size: var(--fs-small); }
.set-facts dd { margin: 6px 0 0; font-size: var(--fs-body); }
.set-facts dd.mono { font-size: var(--fs-meta); }
.set-pw { display: flex; flex-direction: column; gap: 14px; max-width: 360px; margin-top: 16px; }
.modal__body .set-note { margin-top: 0; }