/* /css/settings-ui.css
   tribeLy • Settings UI (CORE-FIRST, UI-CORE v13)
   ----------------------------------------------------------
   Changes (safe + JS-compatible):
   1) Removed any "new design system" styling: ui-core.css is the source of truth for cards/buttons/inputs.
   2) Kept ALL existing settings-* classnames so current JS keeps working unchanged.
   3) Mapped legacy settings-* elements to UI Kit primitives by *composition*:
      - cards -> tl-card / tl-cardItem look
      - buttons -> tl-btn variants (primary/ghost/danger/soft)
      - inputs -> tl-input
      (done via minimal, token-based styling and consistent sizing, not new button systems)
   4) Ensured primary buttons match Dashboard/Shop (dark primary), no accent overrides.
   5) Kept modal overlay/layout (allowed), but no custom button styling inside modal.
   TODO: If any module still injects inline styles for spacing, remove there once verified safe.
*/

/* Page container */
#view-settings{
  max-width: 680px;
  margin: 0 auto;
  color: var(--ui-text);
  padding-bottom: 16px;
}

/* Safety helpers */
.hidden{ display:none !important; }
#view-settings img{ max-width:100%; height:auto; }

/* =========================================================
   Cards / sections
   - We keep settings-card/details as wrappers.
   - Visuals align with tl-card tokens from ui-core.
========================================================= */
#view-settings .settings-card,
#view-settings .settings-details{
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-card);
  box-shadow: var(--ui-shadow-card);
  padding: var(--ui-pad-card);
  margin-bottom: 12px;
}

/* “wrapper” cards that contain rows/dividers */
#view-settings .settings-card--nopad,
#view-settings .settings-details{
  padding: 0;
  overflow: hidden;
}

/* Divider */
#view-settings .settings-divider{
  height: 1px;
  background: var(--ui-border);
  margin: 12px 0;
}

/* Minor helper used in JS rewrite (replaces inline margin-top:-6px) */
#view-settings .settings-tightTop{
  margin-top: -6px;
}

/* =========================================================
   Typography
   (Prefer tl-title / tl-mini / tl-subtle from ui-core.
    Keep legacy classes so old markup still looks right.)
========================================================= */
#view-settings .settings-title,
#view-settings .settings-summaryTitle,
#view-settings .settings-headerName,
#view-settings .settings-profileName{
  color: var(--ui-text);
  font-weight: 950;
  letter-spacing: -0.2px;
}

#view-settings .settings-title{
  font-size: 18px;
  margin: 0 0 12px;
}

#view-settings .settings-sub{
  font-size: 14px;
  color: var(--ui-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

#view-settings .settings-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--ui-muted);
  margin: 10px 0 6px;
}

#view-settings .settings-summaryTitle{ font-size: 18px; }
#view-settings .settings-summarySub{
  font-size: 13px;
  color: var(--ui-muted);
  margin-top: 2px;
}

#view-settings .settings-id,
#view-settings .settings-headerId{
  font-size: 12px;
  color: var(--ui-muted);
  word-break: break-word;
  margin: 6px 0 0;
}

#view-settings .settings-card code,
#view-settings .settings-sub code{
  word-break: break-word;
}

/* =========================================================
   Inputs / selects
   - Legacy settings-input/settings-select stay supported
   - Align with tl-input sizing and focus ring style
========================================================= */
#view-settings .settings-input,
#view-settings .settings-select{
  width: 100%;
  padding: 12px;
  border-radius: var(--ui-r-inner);
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  color: var(--ui-text);
  font-size: 16px; /* iOS no-zoom */
  margin-bottom: 12px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

#view-settings .settings-select{
  appearance: auto; /* keep native arrow */
}

#view-settings .settings-input:focus,
#view-settings .settings-select:focus{
  outline: none;
  border-color: rgba(17,24,39,.20);
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}

/* =========================================================
   Buttons (legacy mapping)
   - Keep settings-btn/settings-miniBtn for older modules,
     but make them behave like tl-btn variants.
   - Primary MUST match dashboard/shop primary (dark).
========================================================= */
#view-settings .settings-btn,
#view-settings .settings-miniBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--ui-r-inner);
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  color: var(--ui-text);
  font-weight: 950;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .08s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
  appearance:none;
  user-select:none;
}

#view-settings .settings-btn:active,
#view-settings .settings-miniBtn:active{ transform: scale(.98); }

#view-settings .settings-btn:disabled,
#view-settings .settings-miniBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform:none;
  box-shadow:none;
}

/* Primary = dark primary (ui-core) */
#view-settings .settings-btn-primary{
  background: var(--ui-primary-bg);
  border-color: transparent;
  color: var(--ui-primary-text);
}

/* Secondary / plain */
#view-settings .settings-btn-secondary{
  background: var(--ui-card);
  color: var(--ui-text);
}

/* Ghost */
#view-settings .settings-btn-ghost{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.06);
  color: rgba(17,24,39,.78);
}

/* Danger */
#view-settings .settings-btn-danger,
#view-settings .settings-miniBtn-danger{
  background: rgba(185,28,28,.12);
  border: 1px solid rgba(185,28,28,.22);
  color: var(--ui-bad);
}

/* =========================================================
   Header / profile layout (kept)
========================================================= */
#view-settings .settings-profileCard{ padding: var(--ui-pad-card); }

#view-settings .settings-profileRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

#view-settings .settings-profileInfo{ min-width: 0; }

#view-settings .settings-profileName{
  font-size: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Header row helpers (used in JS template) */
#view-settings .settings-headerRow{
  display:flex;
  align-items:center;
  gap:12px;
}

#view-settings .settings-headerInfo{ min-width:0; flex:1; }
#view-settings .settings-headerTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
#view-settings .settings-headerBadges{ flex:0 0 auto; }

/* =========================================================
   Avatars (round, dashboard-like)
   - keep settings-* so avatar hydration keeps working
========================================================= */
#view-settings .settings-avatar,
#view-settings .settings-headerAvatar,
#view-settings .settings-userAvatar{
  background: var(--ui-bg);
  border-radius: 9999px;
  border: 3px solid #fff;
  box-shadow: var(--ui-shadow-soft);
  overflow: hidden;
  flex: 0 0 auto;
}

#view-settings .settings-avatar--lg{ width:64px; height:64px; }
#view-settings .settings-avatar--sm{ width:44px; height:44px; }
#view-settings .settings-userAvatar{ width:44px; height:44px; }
#view-settings .settings-headerAvatar{ width:56px; height:56px; }

#view-settings .settings-headerImg,
#view-settings .settings-userImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#view-settings .settings-avatar--fallback,
#view-settings .settings-headerFallback,
#view-settings .settings-userFallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: var(--ui-muted);
}

/* =========================================================
   Badges (kept as-is; minor token alignment)
========================================================= */
#view-settings .settings-badge,
#view-settings .settings-badge--parent,
#view-settings .settings-badge--child,
#view-settings .settings-badge-parent,
#view-settings .settings-badge-child,
#view-settings .settings-badge-admin{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  color: var(--ui-muted);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

#view-settings .settings-badge--parent,
#view-settings .settings-badge-parent{
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.20);
  color: var(--ui-accent);
}

#view-settings .settings-badge--child,
#view-settings .settings-badge-child{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.18);
  color: var(--ui-good);
}

#view-settings .settings-badge-admin{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.20);
  color: #b45309;
}

/* =========================================================
   Details / collapsible
========================================================= */
#view-settings .settings-summary{
  list-style: none;
  padding: var(--ui-pad-card);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  -webkit-tap-highlight-color: transparent;
}

#view-settings .settings-summary::-webkit-details-marker{ display:none; }

#view-settings .settings-chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17,24,39,.28);
  border-bottom: 2px solid rgba(17,24,39,.28);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  margin-right: 4px;
}

#view-settings .settings-details[open] .settings-chevron{ transform: rotate(45deg); }

#view-settings .settings-detailsBody{
  padding: var(--ui-pad-card);
  border-top: 1px solid var(--ui-border);
}

/* =========================================================
   User list
========================================================= */
#view-settings .settings-userList{ margin-top: 4px; }

#view-settings .settings-userRow{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid var(--ui-border);
}
#view-settings .settings-userRow:first-child{ border-top: 0; }

#view-settings .settings-userInfo{ min-width:0; flex:1; }

#view-settings .settings-userName{
  font-weight: 950;
  font-size: 16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

#view-settings .settings-userTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#view-settings .settings-userActions{
  display:flex;
  gap:8px;
  flex: 0 0 auto;
  align-items:center;
}

/* =========================================================
   Tabs (legacy; keep calm like dashboard)
========================================================= */
#view-settings .settings-tabs{ display:flex; gap:10px; }

#view-settings .settings-tab{
  flex:1;
  border:1px solid var(--ui-border);
  background: var(--ui-card);
  color: var(--ui-text);
  padding: 10px 12px;
  border-radius: var(--ui-r-inner);
  font-weight: 950;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

#view-settings .settings-tab-active{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.06);
  color: rgba(17,24,39,.82);
}

/* =========================================================
   Modal (overlay + layout allowed)
   - No button styling here; buttons are tl-btn in JS now.
========================================================= */
#view-settings .settings-modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999999;
  padding: 18px;
}

#view-settings .settings-modal{
  width: min(92vw,460px);
  background: var(--ui-card);
  border-radius: var(--ui-r-card);
  border:1px solid var(--ui-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: var(--ui-pad-card);
}

/* keep hook (some older code uses it) */
#view-settings .settings-modalTitle{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 10px;
}

#view-settings .settings-modalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 12px;
}

/* Errors */
#view-settings .settings-error{
  color: var(--ui-bad);
  font-weight: 900;
}

/* Mobile */
@media (max-width: 420px){
  #view-settings .settings-card,
  #view-settings .settings-details{ margin-bottom: 10px; }

  /* legacy full-width behavior on mobile */
  #view-settings .settings-btn{ width: 100%; }
}