/**
 * css/group-settings.css
 * Steg 8 Del C — Gruppinställningar (Medlemmar- och Kategorier-flikarna).
 * Egen fullskärms-yta (inte modal-backdrop-mönstret) eftersom wireframen
 * visar en tillbaka-pil, inte ett X — mer en undersida än en dialogruta.
 */

#group-settings-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 4000;
  flex-direction: column;
}

.gs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.gs-back {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
.gs-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.gs-subtitle { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

.gs-tabs {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.gs-tab {
  flex: 1;
  background: none; border: none; cursor: pointer;
  padding: 12px 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.gs-tab.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

.gs-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 32px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.gs-loading { padding: 16px 4px; font-size: 12px; color: var(--text-muted); }

/* ── Medlemmar ── */
.gs-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #F3F4F6;
}
.gs-member-avatar {
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.gs-member-name { flex: 1; font-size: 13px; color: var(--ink); }
.gs-member-you { font-size: 11px; color: var(--text-muted); }
.gs-member-leave {
  background: none; border: none; cursor: pointer;
  color: #DC2626; font-size: 12px; font-weight: 600;
  font-family: inherit; padding: 4px;
}

/* .gs-invite-btn:s outline-utseende (kant/vit bakgrund) togs bort
   2026-07-16 (Steg 8 Del C punkt 13) — knappen har nu modal-btn-primary
   för färg/form/padding. gs-invite-btn behålls bara för layout
   (ikon+text centrerat, marginal ovan) som modal-btn-primary inte
   själv styr, och ikonfärgen (vit, matchar den fyllda gröna bakgrunden). */
.gs-invite-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px;
}
.gs-invite-btn i { font-size: 15px; color: #fff; }

/* ── Kategorier ── */
.gs-cat-count { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.gs-cat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 4px;
  border-bottom: 1px solid #F3F4F6;
  flex-wrap: wrap;
  position: relative;
}
.gs-cat-move { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.gs-cat-move-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 0; width: 18px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.gs-cat-move-btn:hover { color: var(--ink-soft); }
.gs-cat-move-btn.disabled { opacity: .25; cursor: default; pointer-events: none; }
.gs-cat-color-btn {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1); cursor: pointer; flex-shrink: 0; padding: 0;
}
.gs-cat-color-btn.unassigned {
  border: 2px dashed #DC2626;
}
.gs-cat-color-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%; padding: 8px 0 2px 34px;
}
.gs-cat-color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.gs-cat-color-swatch.selected { border-color: var(--ink); }
.gs-cat-color-swatch.taken { box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--text-muted) inset; }
.gs-cat-emoji { font-size: 15px; flex-shrink: 0; }
.gs-cat-name { flex: 1; font-size: 13px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-cat-action {
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  font-family: inherit; padding: 4px 6px; flex-shrink: 0;
}
.gs-cat-delete { color: #DC2626; }
.gs-cat-delete.disabled { color: var(--text-muted); cursor: not-allowed; }
.gs-cat-rename-input {
  flex: 1; padding: 5px 8px; font-size: 13px;
}

/* .gs-add-cat-btn borttagen 2026-07-16 — flyttad till modals.css som
   delad .modal-btn-add-row (samma mönster gäller för alla "lägg till
   rad"-knappar, inte bara kategorier här). */
#gs-add-cat-row {
  display: block; margin-top: 10px;
}
#gs-add-cat-row .modal-input { flex: 1; }

.gs-suggestion-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; margin: 0 6px 6px 0;
  border-radius: 999px; border: 1px solid #E5E7EB;
  background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; font-family: inherit;
}
.gs-suggestion-chip:hover { border-color: var(--accent); background: var(--accent-light); }

.gs-divider { border-top: 1px solid #E5E7EB; margin: 24px 0 16px; }

.gs-startview-section .modal-label { margin-bottom: 4px; }
.gs-name-section .modal-label { margin-bottom: 4px; }