/* stores-settings area styles. Owned by W2-STORES-SETTINGS; scope every rule under .ft-area-stores-settings and use var(--ft-*) tokens only. */

.ft-area-stores-settings { --ft-gap: var(--ft-space-5); }
.ft-area-stores-settings .ft-page-header { margin-bottom: 0; }

/* ---------- Stores ---------- */
.ft-area-stores-settings .ft-stores__search { max-width: calc(var(--ft-space-16) * 6.5); }
.ft-area-stores-settings .ft-stores__grid { --ft-grid-min: calc(var(--ft-space-16) * 4.75); --ft-gap: var(--ft-space-4); }

.ft-area-stores-settings .ft-store-card {
  position: relative;
  padding: var(--ft-space-5);
  transition: border-color var(--ft-duration-fast) var(--ft-ease), background-color var(--ft-duration-fast) var(--ft-ease);
}

.ft-area-stores-settings .ft-store-card:hover { border-color: var(--ft-border-strong); }
.ft-area-stores-settings .ft-store-card:focus-within { border-color: var(--ft-focus); }

.ft-area-stores-settings .ft-store-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ft-space-3);
}

.ft-area-stores-settings .ft-store-card__text { flex: 1; min-width: 0; }

.ft-area-stores-settings .ft-store-card__name {
  margin: 0 0 var(--ft-space-1);
  font-size: var(--ft-text-lg);
  font-weight: var(--ft-weight-extrabold);
  line-height: var(--ft-leading-snug);
  letter-spacing: var(--ft-tracking-tight);
  overflow-wrap: anywhere;
}

/* The name link covers the whole card; the menu sits above it. */
.ft-area-stores-settings .ft-store-card__link { color: var(--ft-text); text-decoration: none; }
.ft-area-stores-settings .ft-store-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ft-area-stores-settings .ft-store-card__link:focus-visible { outline: none; }
.ft-area-stores-settings .ft-store-card__link:focus-visible::after { outline: 2px solid var(--ft-focus); outline-offset: var(--ft-space-1); }

.ft-area-stores-settings .ft-store-card__meta {
  margin: 0;
  font-size: var(--ft-text-sm);
  color: var(--ft-text-muted);
}

.ft-area-stores-settings .ft-store-card__meta--quiet { margin-top: var(--ft-space-1); font-size: var(--ft-text-xs); }

.ft-area-stores-settings .ft-store-card__trailing {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ft-space-1);
  margin: calc(var(--ft-space-3) * -1) calc(var(--ft-space-3) * -1) 0 0;
}

.ft-area-stores-settings .ft-store-card__menu { position: relative; z-index: 1; }
.ft-area-stores-settings .ft-store-card__menu .mud-icon-button { width: var(--ft-control-md); height: var(--ft-control-md); color: var(--ft-text-muted); }

.ft-area-stores-settings.ft-form-grid { padding-top: var(--ft-space-1); }

.ft-area-stores-settings .ft-settings-notice {
  margin: 0;
  padding: var(--ft-space-3) var(--ft-space-4);
  border-radius: var(--ft-radius-md);
  background: var(--ft-info-bg);
  color: var(--ft-info-fg);
  font-size: var(--ft-text-sm);
}

.ft-area-stores-settings .ft-settings-notice--warning { background: var(--ft-warning-bg); color: var(--ft-warning-fg); }
.ft-area-stores-settings .ft-settings-notice--danger { background: var(--ft-danger-bg); color: var(--ft-danger-fg); }

.ft-area-stores-settings .ft-store-form__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ft-space-3);
}

/* People dialog */
.ft-area-stores-settings .ft-store-people { --ft-gap: var(--ft-space-5); }
.ft-area-stores-settings .ft-store-people section { --ft-gap: var(--ft-space-2); }
.ft-area-stores-settings .ft-store-people__heading { margin: 0; font-size: var(--ft-text-md); font-weight: var(--ft-weight-bold); color: var(--ft-text); }
.ft-area-stores-settings .ft-store-people__list { max-height: calc(var(--ft-space-16) * 4); overflow-y: auto; }
.ft-area-stores-settings .ft-store-people__add { display: flex; align-items: flex-end; gap: var(--ft-space-2); }
.ft-area-stores-settings .ft-store-people__select { flex: 1; min-width: 0; }
.ft-area-stores-settings .ft-store-people :is(.ft-list-row__title, .ft-list-row__meta) { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Settings: shared ---------- */
.ft-area-stores-settings .ft-account,
.ft-area-stores-settings .ft-account-security,
.ft-area-stores-settings .ft-settings-card { max-width: calc(var(--ft-space-16) * 11.25); }

.ft-area-stores-settings .ft-defs { display: grid; margin: 0; }

.ft-area-stores-settings .ft-defs__row {
  display: grid;
  grid-template-columns: minmax(var(--ft-space-16), calc(var(--ft-space-10) * 4)) minmax(0, 1fr);
  gap: var(--ft-space-4);
  padding: var(--ft-space-3) 0;
  border-bottom: 1px solid var(--ft-border);
}

.ft-area-stores-settings .ft-defs__row:first-child { padding-top: 0; }
.ft-area-stores-settings .ft-defs dt { font-size: var(--ft-text-sm); font-weight: var(--ft-weight-bold); color: var(--ft-text-muted); }
.ft-area-stores-settings .ft-defs dd { margin: 0; font-size: var(--ft-text-md); overflow-wrap: anywhere; }
.ft-area-stores-settings .ft-defs__mono { font-family: var(--ft-font-mono); font-size: var(--ft-text-sm); }
.ft-area-stores-settings .ft-defs .ft-defs__empty { color: var(--ft-text-muted); font-style: italic; }

/* ---------- Connections ---------- */
.ft-area-stores-settings .ft-settings-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ft-space-3);
  margin-top: var(--ft-space-5);
}

.ft-area-stores-settings .ft-settings-test__result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-space-2); min-width: 0; }
.ft-area-stores-settings .ft-settings-test__message { font-size: var(--ft-text-sm); color: var(--ft-text-muted); overflow-wrap: anywhere; }
.ft-area-stores-settings .ft-settings-test__details { flex-basis: 100%; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }
.ft-area-stores-settings .ft-settings-test__details pre { margin: var(--ft-space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ft-font-mono); }

.ft-area-stores-settings .ft-settings-ref {
  margin-top: var(--ft-space-5);
  border-top: 1px solid var(--ft-border);
  padding-top: var(--ft-space-4);
  font-size: var(--ft-text-sm);
  color: var(--ft-text-muted);
}

.ft-area-stores-settings .ft-settings-ref summary {
  display: flex;
  align-items: center;
  min-height: var(--ft-control-md);
  cursor: pointer;
  font-weight: var(--ft-weight-bold);
  color: var(--ft-accent-text);
}

.ft-area-stores-settings .ft-settings-ref code,
.ft-area-stores-settings .ft-settings-ref pre { font-family: var(--ft-font-mono); }

.ft-area-stores-settings .ft-settings-ref pre {
  margin: var(--ft-space-3) 0 0;
  padding: var(--ft-space-4);
  overflow-x: auto;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface-2);
  color: var(--ft-text);
  font-size: var(--ft-text-xs);
  line-height: var(--ft-leading-normal);
}

/* ---------- Account ---------- */
.ft-area-stores-settings .ft-account__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ft-space-4);
  margin-bottom: var(--ft-space-6);
}

.ft-area-stores-settings .ft-account__titles { flex: 1; min-width: calc(var(--ft-space-10) * 4); }

.ft-area-stores-settings .ft-account__name {
  margin: 0;
  font-size: var(--ft-text-xl);
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: var(--ft-tracking-tight);
}

.ft-area-stores-settings .ft-account__meta { margin: var(--ft-space-1) 0 0; font-size: var(--ft-text-sm); color: var(--ft-text-muted); }

.ft-area-stores-settings .ft-account__fields { --ft-form-cols: 3; margin-bottom: var(--ft-space-5); }
.ft-area-stores-settings .ft-account__fields > :nth-child(4) { grid-column: span 2; }

.ft-area-stores-settings .ft-account-security { padding-top: var(--ft-space-5); padding-bottom: var(--ft-space-5); }

.ft-area-stores-settings .ft-account__panel {
  padding: var(--ft-space-1) 0 var(--ft-space-5);
  --ft-gap: var(--ft-space-4);
}

/* Focused only as a scroll target for ?tab=two-factor; not interactive itself. */
.ft-area-stores-settings .ft-account__panel:focus { outline: none; }
.ft-area-stores-settings .ft-account__panel + .ft-toggle-row { border-top: 1px solid var(--ft-border); }
.ft-area-stores-settings .ft-account__panel p { margin: 0; font-size: var(--ft-text-sm); }

.ft-area-stores-settings .ft-account__password {
  display: grid;
  gap: var(--ft-space-4);
  max-width: calc(var(--ft-space-10) * 9);
  margin-top: var(--ft-space-4);
}

.ft-area-stores-settings .ft-account__qr {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--ft-space-3);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface);
}

.ft-area-stores-settings .ft-account__qr img { display: block; width: calc(var(--ft-space-10) * 4.5); height: auto; }
.ft-area-stores-settings .ft-account__code { max-width: calc(var(--ft-space-16) * 4); }

.ft-area-stores-settings .ft-account__codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--ft-space-10) * 3.5), 1fr));
  gap: var(--ft-space-2);
  margin: 0;
  padding: var(--ft-space-4);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  list-style: none;
  font-family: var(--ft-font-mono);
  font-size: var(--ft-text-sm);
}

.ft-area-stores-settings .ft-account-security form { margin: 0; }
.ft-area-stores-settings .ft-page-header__actions:not(:has(*)) { display: none; }

@media (max-width: 900px) {
  .ft-area-stores-settings .ft-account__fields { --ft-form-cols: 2; }
  .ft-area-stores-settings .ft-account__fields > :nth-child(4) { grid-column: auto; }
}

@media (max-width: 600px) {
  .ft-area-stores-settings .ft-stores__search { max-width: none; }
  .ft-area-stores-settings .ft-defs__row { grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-1); }
  .ft-area-stores-settings .ft-store-people__add { flex-direction: column; align-items: stretch; }
  .ft-area-stores-settings .ft-account__who .ft-upload { width: 100%; }
  .ft-area-stores-settings .ft-account-security .ft-toggle-row { flex-direction: column; align-items: flex-start; gap: var(--ft-space-3); }
  /* The name link is itself a 44px tap target on phones, not only the card it stretches over. */
  .ft-area-stores-settings .ft-store-card__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Team list (Settings > Team) */
.ft-area-stores-settings.ft-team { display: flex; flex-direction: column; gap: var(--ft-space-4); }
.ft-area-stores-settings .ft-team__bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ft-space-3); }
.ft-area-stores-settings .ft-team__filters { display: flex; flex: 1; flex-wrap: wrap; gap: var(--ft-space-3); min-width: 0; }
.ft-area-stores-settings .ft-team__search { flex: 1 1 220px; max-width: 360px; }
.ft-area-stores-settings .ft-team__role,
.ft-area-stores-settings .ft-team__tenant-filter { flex: 0 1 200px; }
.ft-area-stores-settings .ft-team__actions { display: flex; align-items: center; gap: var(--ft-space-2); }
.ft-area-stores-settings .ft-team__table {
  --ft-team-cols: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 100px 190px 48px;
  overflow: hidden;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
}
.ft-area-stores-settings .ft-team__table--tenant { --ft-team-cols: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 100px 190px minmax(0, 1fr) 48px; }
.ft-area-stores-settings .ft-team__row {
  display: grid;
  grid-template-columns: var(--ft-team-cols);
  align-items: center;
  gap: var(--ft-space-3);
  padding: var(--ft-space-3) var(--ft-space-4);
  border-bottom: 1px solid var(--ft-border);
  font-size: var(--ft-text-sm);
}
.ft-area-stores-settings .ft-team__table:has(.ft-team__check) .ft-team__row { grid-template-columns: 28px var(--ft-team-cols); }
.ft-area-stores-settings .ft-team__row:last-child { border-bottom: 0; }
.ft-area-stores-settings .ft-team__row--head { background: var(--ft-surface-2); color: var(--ft-text-muted); font-size: var(--ft-text-xs); font-weight: var(--ft-weight-bold); }
.ft-area-stores-settings .ft-team__row > * { min-width: 0; overflow-wrap: anywhere; }
.ft-area-stores-settings .ft-team__person { display: flex; align-items: center; gap: var(--ft-space-3); }
.ft-area-stores-settings .ft-team__who { display: flex; flex-direction: column; min-width: 0; }
.ft-area-stores-settings .ft-team__name { font-weight: var(--ft-weight-bold); font-size: var(--ft-text-md); }
.ft-area-stores-settings .ft-team__email { color: var(--ft-text-muted); font-size: var(--ft-text-xs); }
.ft-area-stores-settings .ft-team__status { display: flex; align-items: center; gap: var(--ft-space-2); }
.ft-area-stores-settings .ft-team__menu { justify-self: end; }

@media (max-width: 900px) {
  .ft-area-stores-settings .ft-team__row--head { display: none; }
  .ft-area-stores-settings .ft-team__row,
  .ft-area-stores-settings .ft-team__table:has(.ft-team__check) .ft-team__row {
    grid-template-columns: minmax(0, 1fr) 48px;
    row-gap: var(--ft-space-2);
  }
  .ft-area-stores-settings .ft-team__table:has(.ft-team__check) .ft-team__row { grid-template-columns: 28px minmax(0, 1fr) 48px; }
  .ft-area-stores-settings .ft-team__menu { grid-column: -2 / -1; grid-row: 1; }
  .ft-area-stores-settings .ft-team__row > [data-label] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--ft-space-3); text-align: end; }
  .ft-area-stores-settings .ft-team__row > [data-label]::before { content: attr(data-label); color: var(--ft-text-muted); text-align: start; font-weight: var(--ft-weight-bold); }
}
@media (max-width: 600px) {
  .ft-area-stores-settings .ft-team__search,
  .ft-area-stores-settings .ft-team__role,
  .ft-area-stores-settings .ft-team__tenant-filter { flex-basis: 100%; max-width: none; }
}
.ft-area-stores-settings .ft-team__filters > .mud-input-control { width: auto; }
@media (max-width: 900px) {
  .ft-area-stores-settings .ft-team__row > [data-label]::before { flex: none; white-space: nowrap; }
}
@media (max-width: 600px) {
  .ft-area-stores-settings .ft-team__filters > .mud-input-control { width: 100%; }
}
@media (max-width: 600px) {
  .ft-area-stores-settings .ft-team__filters { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .ft-area-stores-settings .ft-team__filters > * { width: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .ft-area-stores-settings .ft-team__bar { flex-direction: column; align-items: stretch; }
  .ft-area-stores-settings .ft-team__actions { justify-content: flex-end; }
}

/* Keep room for the store name: the name shares its line with the menu only, and the status chip sits below. */
.ft-area-stores-settings .ft-store-card__row { flex-wrap: wrap; row-gap: var(--ft-space-2); }
.ft-area-stores-settings .ft-store-card__text { flex: 1 1 calc(100% - var(--ft-control-md) - var(--ft-space-3)); }
.ft-area-stores-settings .ft-store-card__trailing { display: contents; }
.ft-area-stores-settings .ft-store-card__menu { order: 1; margin: calc(var(--ft-space-3) * -1) calc(var(--ft-space-3) * -1) 0 0; }
.ft-area-stores-settings .ft-store-card__trailing > .ft-chip { order: 2; }

/* Not connected to labels yet: the chip and "Try again" sit above the card-wide link so the button stays clickable. */
.ft-area-stores-settings .ft-store-card__connect {
  order: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ft-space-2);
}

/* Store dialogs: the admin-only "More settings" step. Its six short codes stay two to a row even on a phone,
   so the step fits without the dialog scrolling. */
.ft-area-stores-settings .ft-store-advanced { display: grid; justify-items: start; gap: var(--ft-space-3); }
.ft-area-stores-settings .ft-store-advanced__note { margin: 0; color: var(--ft-text-muted); font-size: var(--ft-text-sm); }
.ft-area-stores-settings .ft-store-advanced__fields { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }