/* ==========================================================================
   SETTINGS (admin) — owner stylesheet for the settings sheet shell:
   overlay, card, header, section navigation, pane frame, usage sub-tabs.
   Pane internals (users list, roles grid, tables) keep their own rules.

   Layout
     desktop ≥ 821px : centered sheet, vertical section nav on the left
     phone   ≤ 820px : full-screen sheet, horizontally scrolling chip nav on top
   Panes switch with the [hidden] attribute (app.js openSettingsTab).
   ========================================================================== */

#settingsModal.bmSettings{
  padding:24px;
  background:rgba(18,18,30,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.bmSettings > .modalCard{
  width:min(1240px, 100%);
  height:min(860px, 100%);
  max-height:none;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-xl);
  border:1px solid rgba(62,61,86,.08);
  background:var(--surface-soft);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  animation:bmSettingsIn var(--dur-slow) var(--ease-out);
}
@keyframes bmSettingsIn{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to{ opacity:1; transform:none; }
}

/* ---- header ---- */
.bmSettings .modalHead{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-height:64px;
  padding:0 var(--space-4) 0 var(--space-6);
  background:var(--surface);
  color:var(--ink);
  border-bottom:1px solid rgba(62,61,86,.08);
}
.bmSettings .modalTitle{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}
.bmSettings .modalHead .iconBtn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:var(--radius-pill);
  border:1px solid rgba(62,61,86,.10);
  background:rgba(62,61,86,.05);
  color:var(--ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.bmSettings .modalHead .iconBtn:hover{ background:rgba(62,61,86,.10); }
.bmSettings .modalHead .iconBtn:active{ transform:scale(.94); }

/* ---- body: nav column + pane ---- */
.bmSettings .modalBody{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  background:var(--surface-soft);
}

.bmSettings .settingsTabs{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:var(--space-4) var(--space-3);
  overflow-y:auto;
  background:var(--surface);
  border-right:1px solid rgba(62,61,86,.08);
  scrollbar-width:thin;
}
.bmSettings .settingsTabs > [data-settings-tab]{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.bmSettings .settingsTabs > [data-settings-tab] svg{
  flex:0 0 18px;
  width:18px;
  height:18px;
  opacity:.8;
}
.bmSettings .settingsTabs > [data-settings-tab]:hover{
  background:rgba(62,61,86,.05);
  color:var(--ink);
}
.bmSettings .settingsTabs > [data-settings-tab].active{
  background:var(--violet-soft);
  color:var(--violet-ink);
}
.bmSettings .settingsTabs > [data-settings-tab].active svg{ opacity:1; }
.bmSettings .settingsTabs > [data-settings-tab]:focus-visible{
  outline:0;
  box-shadow:var(--focus-ring);
}

/* every pane occupies the content cell; hidden ones are display:none via [hidden] */
.bmSettings .modalBody > [data-settings-pane]{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:100%;
  padding:var(--space-5) var(--space-6) var(--space-6);
  overflow:auto;
  overscroll-behavior:contain;
  animation:bmSettingsPaneIn var(--dur) var(--ease-out);
}
@keyframes bmSettingsPaneIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
/* panes that manage their own inner scrolling */
.bmSettings .modalBody > :is(#settingsUsers, #settingsAccess, #settingsUsage, #settingsHelpCenter){
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.bmSettings .modalBody > #settingsPearlHunt{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.bmSettings .modalBody > #settingsHelpCenter{ padding:0; }

.bmSettings .settingsSectionTitle{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
}

/* ---- usage sub-tabs: segmented control ---- */
.bmSettings .usageInnerTabs{
  flex:0 0 auto;
  align-self:flex-start;
  display:inline-flex;
  gap:2px;
  max-width:100%;
  padding:4px;
  border-radius:var(--radius-sm);
  background:rgba(62,61,86,.06);
  overflow-x:auto;
  scrollbar-width:none;
}
.bmSettings .usageInnerTabs::-webkit-scrollbar{ display:none; }
.bmSettings .usageInnerTab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  height:32px;
  padding:0 13px;
  border:0;
  border-radius:var(--radius-xs);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.bmSettings .usageInnerTab:hover{ color:var(--ink); }
.bmSettings .usageInnerTab.active{
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(28,32,54,.08);
}
.bmSettings .usageBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--radius-pill);
  background:rgba(62,61,86,.10);
  color:var(--ink);
  font-size:11px;
  font-weight:800;
}

/* ==========================================================================
   Shared pane parts: toolbar, search, status line, empty state, switches, tags
   ========================================================================== */
.bmSettings .bmUsersPane{ gap:var(--space-3); }

.bmSetToolbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.bmSetTitle{ display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
.bmSetTitle b{ font-size:16px; font-weight:800; color:var(--ink); }
.bmSetTitle span{ font-size:12.5px; color:var(--muted); }
.bmSetInline{ display:flex; gap:var(--space-2); min-width:0; }
.bmSetInline .input{ width:240px; min-width:0; }

.bmSetSearch{
  position:relative;
  flex:1 1 260px;
  max-width:380px;
  display:flex;
  align-items:center;
}
.bmSetSearch svg{
  position:absolute;
  left:13px;
  width:16px;
  height:16px;
  fill:none;
  stroke:var(--muted);
  stroke-width:2;
  stroke-linecap:round;
  pointer-events:none;
  z-index:1;
}
.bmSetSearch input{
  width:100%;
  height:40px;
  padding:0 14px 0 38px;
  border:1px solid rgba(62,61,86,.12);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.bmSetSearch input:focus{ outline:0; border-color:var(--violet); box-shadow:var(--focus-ring); }
.bmSetCount{ font-size:12.5px; font-weight:700; color:var(--muted); margin-right:auto; white-space:nowrap; }

.bmSetAddBtn{ display:inline-flex; align-items:center; gap:7px; }
.bmSetAddBtn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }

.bmSetStatus{ flex:0 0 auto; min-height:0; font-size:12.5px; font-weight:700; color:var(--muted); }
.bmSetStatus:empty{ display:none; }
.bmSetStatus[data-tone="ok"]{ color:#2f7a52; }
.bmSetStatus[data-tone="error"]{ color:#a23e3e; }
.bmSetNote{ font-size:12.5px; color:var(--muted); }
.bmSetEmpty{
  padding:var(--space-6) var(--space-4);
  border:1px dashed rgba(62,61,86,.16);
  border-radius:var(--radius-md);
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.bmTag{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:var(--radius-pill);
  background:rgba(62,61,86,.07);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.bmTag.violet{ background:var(--violet-soft); color:var(--violet-ink); }
.bmTag.danger{ background:rgba(194,78,78,.10); color:#9b4545; }

/* iOS-style switch: <label class="bmSwitch"><input type=checkbox><i></i><b>Label</b></label> */
.bmSwitch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  cursor:pointer;
  font-size:13px;
  color:var(--ink);
}
.bmSwitch input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.bmSwitch i{
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:22px;
  border-radius:var(--radius-pill);
  background:rgba(62,61,86,.18);
  transition:background var(--dur) var(--ease);
}
.bmSwitch i::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(28,32,54,.25);
  transition:transform var(--dur) var(--ease-spring);
}
.bmSwitch input:checked + i{ background:var(--violet); }
.bmSwitch input:checked + i::after{ transform:translateX(16px); }
.bmSwitch input:focus-visible + i{ box-shadow:var(--focus-ring); }
.bmSwitch input:disabled + i{ opacity:.45; }
.bmSwitch:has(input:disabled){ cursor:not-allowed; color:var(--muted); }
.bmSwitch b{ font-weight:700; }

.bmChipToggle, .bmChipLocked{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 13px;
  border-radius:var(--radius-pill);
  font-size:12.5px;
  font-weight:700;
}
.bmChipToggle{
  border:1px solid rgba(62,61,86,.14);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.bmChipToggle input{ accent-color:var(--violet); margin:0; }
.bmChipToggle:has(input:checked){ border-color:transparent; background:var(--violet-soft); color:var(--violet-ink); }
.bmChipLocked{ background:rgba(62,61,86,.05); color:var(--muted2); }

/* ==========================================================================
   Users & roles: compact rows that expand into an editor
   ========================================================================== */
.bmUsersList{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 2px var(--space-4);
  margin:0 -2px;
  scrollbar-gutter:stable;
}
.bmUserRow{
  flex:0 0 auto;
  border:1px solid rgba(62,61,86,.08);
  border-radius:var(--radius-md);
  background:var(--surface);
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bmUserRow:hover{ border-color:rgba(62,61,86,.16); }
.bmUserRow.is-open{ border-color:rgba(93,83,180,.24); box-shadow:var(--shadow-md); }
.bmUserRow.is-disabled .bmUserMain b{ color:var(--muted); }

.bmUserRowHead{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:62px;
  padding:10px 16px;
  border:0;
  border-radius:inherit;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.bmUserRowHead:focus-visible{ outline:0; box-shadow:var(--focus-ring); }
.bmUserAvatar{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--violet-soft);
  color:var(--violet-ink);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
.bmUserRow.isExternal .bmUserAvatar{ background:rgba(62,61,86,.07); color:var(--ink); }
.bmUserRow.is-disabled .bmUserAvatar{ background:rgba(62,61,86,.05); color:var(--muted2); }
.bmRoleIcon svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bmUserMain{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bmUserMain b{ font-size:14px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bmUserMeta{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bmUserTags{ flex:0 0 auto; display:flex; gap:6px; }
.bmUserTags:empty{ display:none; }
.bmUserChevron{
  flex:0 0 18px;
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--muted);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--dur) var(--ease);
}
.bmUserRow.is-open .bmUserChevron{ transform:rotate(180deg); }

.bmUserBody, .bmRoleBody{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-4) 16px 16px;
  border-top:1px solid rgba(62,61,86,.07);
  animation:bmUserBodyIn var(--dur) var(--ease-out);
}
@keyframes bmUserBodyIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

.bmUserFields{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:var(--space-3) var(--space-4);
}
.bmUserField{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.bmUserField > span, .bmUserSubhead{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.bmUserField .input{ width:100%; min-width:0; height:40px; }
.bmUserRow.isExternal .userInternalOnly{ opacity:.45; }

.bmUserExternal{ display:none; flex-direction:column; gap:var(--space-3); }
.bmUserRow.isExternal .bmUserExternal{ display:flex; }
.bmUserServices{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.bmUserServices .bmUserSubhead{ width:100%; }

.userDashboardAccessTitle{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.userDashboardAccessGroups{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.userDashboardAccessGroup, .bmRoleGroup{
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--surface-soft);
}
.userDashboardAccessGroupTitle{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:4px;
}
.userDashboardScope{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.userDashboardScope input{ accent-color:var(--violet); margin:0; }

.bmRoleNameField{ max-width:360px; }
.bmRoleGroups{ columns:3 250px; column-gap:10px; }
.bmRoleGroup{ break-inside:avoid; margin-bottom:10px; }
.bmRoleGroup .bmUserSubhead{ display:block; margin-bottom:4px; }
.bmPermRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:38px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.bmPermRow + .bmPermRow{ border-top:1px solid rgba(62,61,86,.06); }
.bmPermRow .bmSwitch{ min-height:0; }

.bmUserFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  padding-top:var(--space-3);
  border-top:1px solid rgba(62,61,86,.07);
}
.bmUserFootActions{ display:flex; gap:8px; flex-wrap:wrap; }

.bmUserCreate{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--space-3) var(--space-4);
  padding:var(--space-4);
  border:1px solid rgba(93,83,180,.22);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  animation:bmUserBodyIn var(--dur) var(--ease-out);
}
.bmUserCreate[hidden]{ display:none; }
.bmUserCreateActions{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; }

/* ---- Data → Countries ---- */
.bmCountryModeCard{ margin-bottom:var(--space-3); }
.bmCountryMode{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); cursor:pointer; }
.bmCountryMode b{ display:block; font-size:14px; color:var(--ink); }
.bmCountryMode small{ display:block; margin-top:4px; max-width:620px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.bmCountryList{ display:flex; flex-direction:column; margin:6px 0 12px; }
.bmCountryRow{ display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 2px; border-bottom:1px solid rgba(62,61,86,.07); }
.bmCountryFlag{ font-size:22px; line-height:1; }
.bmCountryName{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bmCountryName b{ font-size:13.5px; color:var(--ink); }
.bmCountryName small{ font-size:12px; color:var(--muted); }
.settingsAddCountryRow{ display:flex; align-items:center; gap:8px; }
.settingsAddCountryRow .dbInput{ flex:1 1 auto; min-width:0; }

/* ==========================================================================
   Phone / small tablets — full-screen sheet, chip navigation on top
   ========================================================================== */
@media (max-width:820px){
  #settingsModal.bmSettings{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }
  .bmSettings > .modalCard{
    width:100%;
    height:var(--bm-mobile-vh, 100dvh);
    border:0;
    border-radius:0;
    animation-name:bmSettingsSheetIn;
  }
  @keyframes bmSettingsSheetIn{
    from{ opacity:.6; transform:translateY(24px); }
    to{ opacity:1; transform:none; }
  }
  .bmSettings .modalHead{
    min-height:56px;
    padding:env(safe-area-inset-top, 0px) var(--space-3) 0 var(--space-4);
  }
  .bmSettings .modalTitle{ font-size:17px; }

  .bmSettings .modalBody{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
  }
  .bmSettings .settingsTabs{
    grid-column:1;
    grid-row:1;
    flex-direction:row;
    gap:6px;
    padding:10px var(--space-3);
    overflow-x:auto;
    overflow-y:hidden;
    border-right:0;
    border-bottom:1px solid rgba(62,61,86,.08);
    scrollbar-width:none;
    scroll-padding-inline:var(--space-3);
  }
  .bmSettings .settingsTabs::-webkit-scrollbar{ display:none; }
  .bmSettings .settingsTabs > [data-settings-tab]{
    flex:0 0 auto;
    width:auto;
    min-height:36px;
    gap:7px;
    padding:0 13px;
    border-radius:var(--radius-pill);
    background:rgba(62,61,86,.05);
    font-size:12.5px;
  }
  .bmSettings .settingsTabs > [data-settings-tab] svg{ flex-basis:15px; width:15px; height:15px; }
  .bmSettings .settingsTabs > [data-settings-tab].active{
    background:var(--accent2);
    color:#fff;
  }

  .bmSettings .modalBody > [data-settings-pane]{
    grid-column:1;
    grid-row:2;
    padding:var(--space-4) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
  /* on phones everything scrolls as one column */
  .bmSettings .modalBody > :is(#settingsUsers, #settingsAccess, #settingsUsage){
    overflow:auto;
  }

  .bmSetSearch{ max-width:none; flex-basis:100%; order:1; }
  .bmSetToolbar .bmSetCount{ order:2; }
  .bmSetToolbar .bmSetAddBtn{ order:3; }
  .bmSetInline{ width:100%; }
  .bmSetInline .input{ flex:1 1 auto; width:auto; }
  .bmUsersList{ overflow:visible; flex:0 0 auto; }
  .bmUserRowHead{ padding:10px 12px; gap:10px; }
  .bmUserBody, .bmRoleBody{ padding:var(--space-4) 12px 12px; }
  .bmUserFields, .bmUserCreate{ grid-template-columns:minmax(0, 1fr); }
  .bmUserTags .bmTag.violet{ display:none; }
  .bmUserFoot{ flex-direction:column-reverse; align-items:stretch; }
  .bmUserFoot > .btn{ width:100%; }
  .bmUserFootActions{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bmUserFootActions .btn{ padding:0 8px; }
}