/* web/pages/settings/settings.css — [SETX3 settings-shell-v1]

   Styles for the Settings SHELL built by pages/settings/settings.js: a fixed
   left nav column and a scrolling content pane, four tabs.

   Replaces [SETX1], which styled the old single-column markup in index.html.
   That markup is gone, so its .set-page / .set-card / .set-title / .set-l
   rules went with it. What survives from SETX1 is everything keyed to an id
   app.js owns — the gateway dots, .set-status, the Ollama list, .pop-refresh
   and the Appearance row — because those ids had to be reproduced verbatim
   in the new markup and still carry app.js's behaviour.

   SCOPING: every selector starts with #view-settings. Not tidiness —
   required. `.set-*` is a shared family: the Devices page wears
   .set-page/.set-card, and app.css:451 styles `.wfp-structure .set-hint`
   in the Workflows preview pane. An unscoped `.set-card` rule here would
   silently restyle both. The new markup therefore uses its own `setx-`
   prefix for everything EXCEPT the ids app.js binds.

   LAYOUT: the scroll lives on the CONTENT COLUMN, not on the view. The left
   nav has to stay put while the right side scrolls, which is why this page
   does NOT use the `#view-x.view.active { overflow-y:auto }` pattern that
   Devices and Dashboard use. app.css:433's `.set-page` — the 640px centred
   column with its own second scrollbar — is not worn by this page at all
   now, so none of that desktop-era shape reaches here.

   [SETX4] THREE SURFACE LAYERS (brand kit 2.1, Sarthak's screenshots):
     nav column   --list     #101217 dark / #FFFFFF light   charcoal
     content      --bg       #0C0E13 dark / #F4F6FE light   the darkest
     cards        --surface  #15181F dark / #FFFFFF light   dark grey
   Inputs inside a card take --bg, so they sit one step below the card.
   Every pane is full width (the 780px card cap is gone); only the input
   controls keep a readable measure. */

#view-settings.view.active {
  display: flex;
  min-height: 0;
  overflow: hidden;            /* the content column scrolls, not the view */
  background: var(--bg);
}

#view-settings .setx-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  width: 100%;
  min-height: 0;
}

/* ---------------------------------------------------------------- left nav */

#view-settings .setx-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px;
  border-right: 1px solid var(--border);
  background: var(--list);     /* [SETX4] layer 1: charcoal */
  overflow-y: auto;
  min-height: 0;
}

#view-settings .setx-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
#view-settings .setx-tab:hover { background: var(--surface-2); color: var(--text); }

/* Selected state uses the kit's purpose-built pair, not --surface-2.
   --surface-2 is the HOVER fill: in light mode it is #EEF2FF against a
   #F4F6FE page, a 2% difference that reads as no selection at all. The
   token meant for this is --tb-accent-soft, whose own declaration in
   theme_b.css is commented "selected-fill" and which brandkit.css:45
   aliases as --selected-fill. It carries a real tint in both themes
   (#E2E9FF light, rgba(53,99,255,.12) dark) and pairs with
   --tb-accent-text for the label.

   Same pairing the Agents page already uses for its selected toggle
   (pages/agents/agents.css:63), so the two pages agree. */
/* [SETX4] label in --text like the screenshot; the tint and the icon carry
   the accent, so the selected row still reads as selected in both themes. */
#view-settings .setx-tab.on {
  background: var(--selected-fill);
  color: var(--text);
  font-weight: 600;
}
#view-settings .setx-tab.on:hover { background: var(--selected-fill); color: var(--text); }

#view-settings .setx-tab-ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
#view-settings .setx-tab.on .setx-tab-ico { opacity: 1; color: var(--tb-accent-text); }

/* ----------------------------------------------------------- content pane */

#view-settings .setx-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 32px 80px;
  background: var(--bg);       /* [SETX4] layer 2: the darkest */
}

#view-settings .setx-pane[hidden] { display: none; }

#view-settings .setx-head { margin-bottom: 18px; }
#view-settings .setx-head h2 {
  padding-bottom: 0;           /* renderer.css:37 styles bare h2 with a rule under it */
  border-bottom: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 5px;
}
#view-settings .setx-head p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 90ch;
}

/* ------------------------------------------------------------------ cards */

#view-settings .setx-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);  /* [SETX4] layer 3: dark grey; full width */
  padding: 18px 20px;
  margin-bottom: 14px;
}
#view-settings .setx-card-quiet  { background: transparent; }
#view-settings .setx-card-danger { border-color: var(--border-2); }

#view-settings .setx-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 12px;
}

#view-settings .setx-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
#view-settings .setx-grid2 .setx-card { margin-bottom: 0; }

/* ------------------------------------------------------------------- rows */

#view-settings .setx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

#view-settings .setx-l {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 128px;
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
}

/* Measure: the page is full-width, but a password field spanning a 1600px
   monitor is not a form, it is a ruler. The control stops at a readable
   width and the label keeps its own column. */
#view-settings .setx-row input,
#view-settings .setx-row select,
#view-settings .setx-row-inline input {
  flex: 1;
  min-width: 0;
  max-width: 560px;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--bg);       /* one layer below the card */
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
}
#view-settings .setx-row input::placeholder { color: var(--text-muted); }
#view-settings .setx-row input:hover { border-color: var(--border-hover); }
#view-settings .setx-row input:focus { outline: none; border-color: var(--accent); }
#view-settings .setx-row input:disabled {
  color: var(--text-muted);
  background: transparent;
  cursor: not-allowed;
}

#view-settings .setx-row-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#view-settings .setx-hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 8px 0 0;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- buttons */

#view-settings .setx-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  padding: 8px 14px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
}
#view-settings .setx-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}
#view-settings .setx-btn:disabled { opacity: .5; cursor: not-allowed; }

#view-settings .setx-btn-accent {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#view-settings .setx-btn-accent:hover { filter: brightness(1.07); }

#view-settings .setx-btn-danger { color: var(--danger); border-color: var(--danger); }
#view-settings .setx-btn-danger:hover {
  color: var(--white);
  background: var(--danger);
  border-color: var(--danger);
}

#view-settings .setx-btn-quiet { padding: 6px 10px; font-size: 12.5px; }

#view-settings .setx-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
#view-settings .setx-krow + .setx-actions { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--border); }

#view-settings .setx-status { font-size: 12.5px; font-weight: 550; }
#view-settings .setx-status.ok  { color: var(--tb-success-ink); }
#view-settings .setx-status.err { color: var(--danger); }

#view-settings .setx-signout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#view-settings .setx-signout h3 { margin-bottom: 4px; }
#view-settings .setx-signout .setx-hint { margin-top: 0; }

/* ------------------------------------------------------------ collapsible */

#view-settings .setx-fold {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}

#view-settings .setx-fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
#view-settings .setx-fold-head:hover { background: var(--surface-2); }

#view-settings .setx-fold-title { font-size: 15px; font-weight: 600; }
#view-settings .setx-fold-sub {
  font-size: 12px;
  font-weight: 450;
  color: var(--text-muted);
  margin-left: auto;
}

#view-settings .setx-chev {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-muted);
  transition: transform .15s ease;
}
#view-settings .setx-fold.collapsed .setx-chev { transform: rotate(-90deg); }

#view-settings .setx-fold-body { padding: 0 18px 16px; }

/* [SETX4] provider rows inside the AI provider keys card (screenshot 2):
   name + status pill and a one-line purpose on the left, the key input on
   the right; rows divided by a hairline. .set-row is also on the element
   (app.js _autoNote anchors to it), and app.css styles .set-row /
   .set-row input unscoped - every property those set is restated here at
   id specificity. */
#view-settings .setx-krow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
#view-settings .setx-kmeta { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
#view-settings .setx-kname { display: flex; align-items: center; gap: 10px; min-width: 0; }
#view-settings .setx-kname label { font-size: 14px; font-weight: 600; color: var(--text); }
#view-settings .setx-ksub { font-size: 12.5px; color: var(--text-muted); }
#view-settings .setx-krow input {
  flex: 0 1 340px;
  min-width: 0;
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
}
#view-settings .setx-krow input::placeholder { color: var(--text-muted); }
#view-settings .setx-krow input:hover { border-color: var(--border-hover); }
#view-settings .setx-krow input:focus { outline: none; border-color: var(--accent); }
#view-settings .setx-krow .set-autosave { flex: none; min-width: 56px; }

/* Status pill: the word comes from settings.js syncPills(); the dot inside
   is app.js's #dot-<provider>. Connected = success tint (lime ink on dark,
   olive ink on light via --tb-success-ink); Not set up = neutral outline. */
#view-settings .setx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
#view-settings .setx-pill.is-on {
  border-color: transparent;
  background: var(--tb-success-soft);
  color: var(--tb-success-ink);
}
:root[data-theme="light"] #view-settings .setx-pill.is-on {
  background: var(--selected-fill);
  border-color: var(--selected-border);
  color: var(--tb-accent-text, var(--accent));
}
#view-settings .setx-fold.collapsed .setx-fold-body { display: none; }
#view-settings .setx-fold-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ----------------------------------------------- app.js-owned ids below ---
   Everything from here down is keyed to an id or class app.js writes to.
   app.css paints these with literal hex (#555 / #22c55e / #22c55e55) which
   cannot follow the light theme. Re-pointed at tokens; app.css is untouched
   and simply outranked by this sheet's id specificity. The "on" dot keeps a
   lime FILL because theme_b.css keeps --tb-success as a fill in both themes,
   while success TEXT uses --tb-success-ink, which is dark olive on light. */

#view-settings .dot {
  display: inline-block;
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--border-hover);
}
#view-settings .dot.on { background: var(--success); }
:root[data-theme="light"] #view-settings .dot.on {
  background: var(--accent);
  box-shadow: 0 0 6px var(--tb-accent-soft);
}

#view-settings .set-status { font-size: 12.5px; font-weight: 550; color: var(--text-muted); }
#view-settings .set-status.ok  { color: var(--tb-success-ink); }
:root[data-theme="light"] #view-settings .set-status.ok { color: var(--tb-accent-text, var(--accent)); }
#view-settings .set-status.err { color: var(--danger); }

/* the per-row "Saving… / ✓ Saved" note built by app.js _autoNote() */
#view-settings .set-autosave { font-size: 12px; color: var(--text-muted); }

#view-settings .ol-list { display: flex; flex-direction: column; }
/* renderOllama() writes its messages ("Ollama isn't reachable...", "No
   models pulled yet.") as p.set-hint; app.css:448 sizes .set-hint at 17px,
   so they rendered larger than the card's own text. */
#view-settings .set-hint { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 6px 0 0; }

#view-settings .ol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
#view-settings .ol-name { font-size: 13.5px; font-weight: 550; color: var(--text); }
#view-settings .ol-size { font-size: 12px; color: var(--text-muted); margin-left: auto; }

#view-settings .ol-run {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--tb-success-ink);
  border: 1px solid var(--success);
}

#view-settings .ol-del {
  font-size: 12px;
  padding: 4px 9px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-settings .ol-del:hover { color: var(--danger); border-color: var(--border-hover); background: var(--surface-2); }
#view-settings .ol-del.confirm { color: var(--danger); border-color: var(--danger); }

#view-settings .ol-pull-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#view-settings .ol-pull-row input {
  flex: 1; min-width: 0; max-width: 560px;
  font-family: var(--font);
  font-size: 13.5px;
  padding: 8px 11px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
}
#view-settings .ol-pull-row input:focus { outline: none; border-color: var(--accent); }

#view-settings .ol-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; max-width: 460px; }
#view-settings .ol-bar {
  flex: 1; height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
#view-settings .ol-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
#view-settings #ol-prog-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

#view-settings .pop-refresh {
  font-size: 14px;
  line-height: 1;
  padding: 5px 9px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
#view-settings .pop-refresh:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-2); }

/* theme_b.css already styles #set-appearance .seg on kit tokens; only the row
   around it needs loosening so the control is not crowded by the h3. */
#view-settings #set-appearance .set-row { margin-bottom: 4px; }

/* ------------------------------------------------------- organisation tab */

#view-settings .setx-org-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 14px;
}

#view-settings .setx-org-av {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--white);
  font-size: 16px; font-weight: 650;
}

#view-settings .setx-org-id { min-width: 0; flex: 1; }
#view-settings .setx-org-id h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
#view-settings .setx-org-id .setx-hint { margin-top: 0; }
#view-settings .setx-org-acts { flex: none; }

#view-settings .setx-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#view-settings .setx-members-head h3 { margin: 0; }

#view-settings .setx-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

#view-settings .setx-invite { display: flex; align-items: center; gap: 8px; }
#view-settings .setx-invite input {
  width: 190px;
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
}
#view-settings .setx-invite input:focus { outline: none; border-color: var(--accent); }

#view-settings .setx-invite select,
#view-settings .setx-role {
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 9px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-input);
  cursor: pointer;
}

#view-settings .setx-members { list-style: none; margin: 0; padding: 0; }

#view-settings .setx-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

#view-settings .setx-mem-av {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-btn);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 650;
}

#view-settings .setx-mem-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#view-settings .setx-mem-id b { font-size: 13.5px; font-weight: 600; color: var(--text); }
#view-settings .setx-mem-id span {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-settings .setx-you { font-weight: 450; color: var(--text-muted); }

#view-settings .setx-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  flex: none;
}
#view-settings .setx-badge.active  { color: var(--tb-success-ink); border: 1px solid var(--success); }
#view-settings .setx-badge.invited { color: var(--text-muted); border: 1px solid var(--border-2); }

#view-settings .setx-role-flat {
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 78px;
  text-align: center;
}
#view-settings .setx-remove-sp { width: 70px; flex: none; }

/* ------------------------------------------------------------ narrow view */

@media (max-width: 860px) {
  #view-settings .setx-wrap { grid-template-columns: 1fr; }
  #view-settings .setx-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  #view-settings .setx-tab { width: auto; white-space: nowrap; }
  #view-settings .setx-main { padding: 20px 16px 72px; }
  #view-settings .setx-l { width: 100px; }
  #view-settings .setx-member { flex-wrap: wrap; }
  #view-settings .setx-krow { flex-wrap: wrap; }
  #view-settings .setx-krow input { flex: 1 1 100%; }
}