/* Fasching settings/account design system — extracted from the uploaded design.
   Tokens (--text,--bg,--hairline,…) come from /v2/tokens.css; this file only adds
   the .set-* account surface components. */

/* ============================================================
   ACCOUNT / SETTINGS SURFACES
   Min profil · Inställningar · Hantera team · Hjälp & support
   Builds on styles.css tokens + app shell.
   ============================================================ */

/* ---- Header + sub-navigation ---- */
.set-head {padding: 22px 32px 0;
  background: var(--bg);}
.set-head-row {display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;}
.set-title {font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);}
.set-sub {font-size: 13px; color: var(--text-muted); margin-top: 3px; max-width: 60ch;}
.set-tabs {display: flex; gap: 2px;
  margin-top: 18px;
  border-bottom: 1px solid var(--hairline);
  padding: 0 32px;
  background: var(--bg);
  position: sticky; top: 0; z-index: 4;}
.set-tab {position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 13px 13px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms var(--ease);
  white-space: nowrap;}
.set-tab svg {color: var(--text-faint); transition: color 120ms var(--ease);}
.set-tab:hover {color: var(--text);}
.set-tab:hover svg {color: var(--text-muted);}
.set-tab.is-active {color: var(--text); border-bottom-color: var(--text);}
.set-tab.is-active svg {color: var(--text);}
/* ---- Page column ---- */
.set-page {max-width: 900px;
  width: 100%;
  padding: 26px 32px 64px;
  gap: 22px;}
.set-stack {display: flex; flex-direction: column; gap: 18px;}
/* ---- Card ---- */
.set-card {background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);}
.set-card-head {display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 17px 22px 15px;
  border-bottom: 1px solid var(--hairline);}
.set-card-head.no-border {border-bottom: 0; padding-bottom: 4px;}
.set-card-title {font-size: 14px; font-weight: 600; color: var(--text);}
.set-card-desc {font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 56ch;}
.set-card-body {padding: 8px 22px 18px;}
.set-card-body.flush {padding: 0;}
/* ---- Setting rows ---- */
.set-row {display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);}
.set-row:last-child {border-bottom: 0;}
.set-row-text {min-width: 0;}
.set-row-label {font-size: 13px; font-weight: 500; color: var(--text);}
.set-row-hint {font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 52ch;}
.set-row-control {flex-shrink: 0; display: flex; align-items: center; gap: 10px;}
/* ---- Switch ---- */
.set-switch {position: relative;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--hairline-strong, oklch(0.86 0.004 80));
  transition: background 160ms var(--ease);
  flex-shrink: 0;}
.set-switch::after {content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform 180ms var(--ease);}
.set-switch.is-on {background: var(--text);}
.set-switch.is-on::after {transform: translateX(16px);}
/* ---- Segmented control ---- */
.set-seg {display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;}
.set-seg-btn {display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
  white-space: nowrap;}
.set-seg-btn:hover {color: var(--text);}
.set-seg-btn.is-on {background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);}
.set-seg-btn svg {color: currentColor;}
/* ---- Select ---- */
.set-select {appearance: none;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 500;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  min-width: 168px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);}
.set-select:hover {border-color: var(--hairline-strong, oklch(0.86 0.004 80));}
.set-select:focus {outline: none; border-color: var(--text-muted);}
/* ---- Field (stacked input) ---- */
.set-fields {display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;}
.set-field {display: flex; flex-direction: column; gap: 6px;}
.set-field.full {grid-column: 1 / -1;}
.set-field-label {font-size: 12px; font-weight: 500; color: var(--text-quiet);}
.set-input {font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 9px 12px;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
  width: 100%;}
.set-input::placeholder {color: var(--text-faint);}
.set-input:hover {border-color: var(--hairline-strong, oklch(0.86 0.004 80));}
.set-input:focus {outline: none; border-color: var(--text-muted); background: var(--surface);}
.set-field-hint {font-size: 11.5px; color: var(--text-muted);}
/* ---- Buttons ---- */
.set-btn {display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 500;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), opacity 120ms;
  white-space: nowrap;
  cursor: pointer;}
.set-btn svg {color: currentColor;}
.set-btn-primary {background: var(--text); color: var(--bg);}
.set-btn-primary:hover {background: oklch(0.28 0.008 60);}
.dark .set-btn-primary:hover {background: oklch(0.9 0.003 80);}
.set-btn-ghost {background: var(--bg-elevated); border-color: var(--hairline); color: var(--text);}
.set-btn-ghost:hover {background: var(--surface); border-color: var(--hairline-strong, oklch(0.86 0.004 80));}
.set-btn-quiet {background: transparent; color: var(--text-muted); padding: 8px 10px;}
.set-btn-quiet:hover {background: var(--hairline); color: var(--text);}
.set-btn-danger {background: transparent; border-color: transparent; color: var(--h-critical);}
.set-btn-danger:hover {background: color-mix(in oklch, var(--h-critical) 12%, transparent);}
/* ---- Avatar ---- */
.set-avatar {border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; letter-spacing: 0.01em;
  flex-shrink: 0;}
.set-avatar-sm {width: 30px; height: 30px; font-size: 11px;}
.set-avatar-md {width: 38px; height: 38px; font-size: 13px;}
.set-avatar-xl {width: 60px; height: 60px; font-size: 20px;}
.set-avatar.tone-1 {background: oklch(0.55 0.13 25);}
.set-avatar.tone-2 {background: oklch(0.52 0.10 160);}
.set-avatar.tone-3 {background: oklch(0.5 0.11 250);}
.set-avatar.tone-4 {background: oklch(0.55 0.10 60);}
.set-avatar.tone-5 {background: oklch(0.5 0.12 310);}
/* ---- Badges ---- */
.set-badge {display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--text-quiet);
  background: var(--bg-sunken);
  white-space: nowrap;}
.set-badge .dot {width: 6px; height: 6px; border-radius: 50%; background: currentColor;}
.set-badge.role-admin {color: oklch(0.5 0.13 25);  background: oklch(0.5 0.13 25 / 0.10);  border-color: oklch(0.5 0.13 25 / 0.2);}
.set-badge.role-marknad {color: oklch(0.46 0.11 250); background: oklch(0.46 0.11 250 / 0.10); border-color: oklch(0.46 0.11 250 / 0.2);}
.set-badge.role-bokning {color: oklch(0.46 0.1 160); background: oklch(0.46 0.1 160 / 0.10); border-color: oklch(0.46 0.1 160 / 0.2);}
.set-badge.role-produktion {color: oklch(0.5 0.1 60); background: oklch(0.5 0.1 60 / 0.10); border-color: oklch(0.5 0.1 60 / 0.2);}
.set-badge.role-ekonomi {color: oklch(0.48 0.11 310); background: oklch(0.48 0.11 310 / 0.10); border-color: oklch(0.48 0.11 310 / 0.2);}
.set-badge.status-active {color: oklch(0.5 0.12 155); background: oklch(0.5 0.12 155 / 0.1); border-color: oklch(0.5 0.12 155 / 0.2);}
.set-badge.status-invited {color: var(--text-muted);}
.dark .set-badge.role-admin {color: oklch(0.78 0.14 25);}
.dark .set-badge.role-marknad {color: oklch(0.74 0.12 250);}
.dark .set-badge.role-bokning {color: oklch(0.76 0.12 160);}
.dark .set-badge.role-produktion {color: oklch(0.8 0.12 60);}
.dark .set-badge.role-ekonomi {color: oklch(0.76 0.12 310);}
.dark .set-badge.status-active {color: oklch(0.78 0.14 155);}
/* ---- Member list ---- */
/* Flex (not grid) so the row reflows on narrow screens: the identity block
   grows and the meta + action groups wrap beneath it on mobile. */
.set-member {display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 22px;
  border-bottom: 1px solid var(--hairline);}
.set-member:last-child {border-bottom: 0;}
.set-member:hover {background: var(--bg-elevated);}
.set-member-id {display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 200px;}
.set-member-name {font-size: 13px; font-weight: 500; color: var(--text);}
.set-member-you {font-size: 10.5px; font-weight: 600; color: var(--text-faint); margin-left: 6px;}
.set-member-email {font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.set-member-meta {display: flex; align-items: center; gap: 12px; flex-shrink: 0;}
.set-member-seen {font-size: 12px; color: var(--text-muted); white-space: nowrap; text-align: right;}
.set-member-seen.is-inactive {color: var(--text-faint);}
.set-member-acts {display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto;}
.set-member-act {width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  transition: background 120ms, color 120ms;}
.set-member-act:hover {background: var(--hairline); color: var(--text);}
.set-member-act:disabled {opacity: 0.4; cursor: not-allowed;}
/* ---- Stat strip ---- */
.set-stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.set-stat {background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;}
.set-stat-value {font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -0.01em;}
.set-stat-label {font-size: 11.5px; color: var(--text-muted); margin-top: 2px;}
/* ---- Help: category grid ---- */
.set-cat-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.set-cat {display: flex; flex-direction: column; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 16px 15px;
  text-align: left;
  text-decoration: none;
  transition: border-color 130ms var(--ease), transform 130ms var(--ease), box-shadow 130ms var(--ease);}
.set-cat:hover {border-color: var(--hairline-strong, oklch(0.86 0.004 80)); transform: translateY(-1px); box-shadow: var(--shadow-sm);}
.set-cat-icon {width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-sunken);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);}
.set-cat-title {font-size: 13px; font-weight: 600; color: var(--text);}
.set-cat-meta {font-size: 11.5px; color: var(--text-muted);}
/* ---- Help: search ---- */
.set-search {display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);}
.set-search svg {color: var(--text-muted);}
.set-search input {flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 14px; color: var(--text);}
.set-search input::placeholder {color: var(--text-faint);}
.set-search input:focus {outline: none;}
/* ---- FAQ accordion ---- */
.set-faq-item {border-bottom: 1px solid var(--hairline);}
.set-faq-item:last-child {border-bottom: 0;}
.set-faq-q {display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: 15px 22px;
  font-size: 13px; font-weight: 500; color: var(--text);
  text-align: left;
  transition: color 120ms;}
.set-faq-q:hover {color: var(--text);}
.set-faq-q svg {color: var(--text-faint); transition: transform 200ms var(--ease); flex-shrink: 0;}
.set-faq-item.is-open .set-faq-q svg {transform: rotate(180deg);}
.set-faq-a {overflow: hidden;
  max-height: 0;
  transition: max-height 240ms var(--ease);}
.set-faq-item.is-open .set-faq-a {max-height: 240px;}
.set-faq-a-inner {padding: 0 22px 16px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); max-width: 64ch;}
/* ---- Contact options ---- */
.set-contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.set-contact {display: flex; align-items: flex-start; gap: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: left;
  text-decoration: none;
  transition: border-color 130ms, background 130ms;}
.set-contact:hover {border-color: var(--hairline-strong, oklch(0.86 0.004 80)); background: var(--surface);}
.set-contact-icon {width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--text); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;}
.set-contact-title {font-size: 13px; font-weight: 600; color: var(--text);}
.set-contact-desc {font-size: 11.5px; color: var(--text-muted); margin-top: 2px;}
/* ---- Status row ---- */
.set-status-row {display: flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  font-size: 12.5px; color: var(--text-muted);}
.set-status-dot {width: 8px; height: 8px; border-radius: 50%; background: oklch(0.6 0.13 155); box-shadow: 0 0 0 3px oklch(0.6 0.13 155 / 0.18);}
/* ---- Misc ---- */
.set-actions-end {display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px;}
.set-divider {height: 1px; background: var(--hairline); margin: 4px 0;}
/* ---- Mobile ---- */
@media (max-width: 720px) {
  .set-head {padding: 18px 18px 0;}
  .set-tabs {padding: 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
  .set-page {padding: 20px 18px 56px; gap: 18px;}
  .set-fields {grid-template-columns: 1fr;}
  .set-stats, .set-cat-grid, .set-contact-grid {grid-template-columns: 1fr;}
  /* Member rows: identity on its own line, meta + actions wrap below. */
  .set-member {gap: 10px 12px; padding: 13px 18px;}
  .set-member-acts {margin-left: 0;}
  .set-member-seen {text-align: left;}
}
@media (max-width: 420px) {
  .set-stats {grid-template-columns: 1fr 1fr;}
  .set-actions-end {flex-wrap: wrap;}
}