/* settings.css — Settings side-panel styling.
 *
 * The panel mirrors #files-container / #todo-container: a heading, a
 * borderless search input, then a scrolling <ul>. Each <li> is a row
 * with a label on the left and a control / value on the right; the row
 * itself can also be a click target. Expandable rows reveal indented
 * sub-rows directly below them, preserving the flat-list feel.
 *
 * Visual contract — every consumer pulls from one of these tokens so
 * the panel reads as one component rather than several:
 *   row text         var(--text-base)     14 px
 *   muted / values   var(--text-sm)       13 px
 *   buttons / inputs var(--text-sm)       13 px
 *   chevron          0.8 em
 *   colour circle    18 px (both static and interactive)
 *   row height       min 28 px (≥44 px touch-target on coarse pointers)
 */

#settings-container h2 { /* see settings-panel.js — header is non-interactive. */
  cursor: default;
}

/* ── Search input — mirror #searchBox / #searchTasksBox. ─────────────── */
#settingsSearchBox {
  display: block;
  background: none;
  color: var(--text);
  border: none;
  outline: none;
  border-radius: var(--radius-chip);
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  margin: var(--gap) 0;
  font-size: var(--text-md);
  font-family: Arial, sans-serif;
}
#settingsSearchBox::placeholder { color: var(--placeholder); opacity: 1; }
#settingsSearchBox:focus,
#settingsSearchBox:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
  background-color: var(--today-bg);
}
@media (hover: hover) {
  #settingsSearchBox:hover { background-color: var(--today-bg); }
}

/* ── Rows ────────────────────────────────────────────────────────────── */
#settingsList {
  list-style: none;
  margin: 0;
  padding: 0 0 0 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: var(--text-base);
}

.settings-row {
  margin: 0.15em 0;
  border-radius: var(--radius-chip);
  padding: 5px 8px 5px 6px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 28px;
  font-size: var(--text-base);
  position: relative;
  cursor: default;
}
.settings-row-clickable,
.settings-row-expandable { cursor: pointer; }
.settings-row-clickable:hover,
.settings-row-expandable:hover { background-color: var(--today-bg); }

.settings-row-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.settings-row-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-row-chev {
  display: inline-block;
  width: 0.8em;
  font-size: 0.75em;
  opacity: 0.6;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
.settings-row-expandable.open .settings-row-chev { transform: rotate(90deg); }

.settings-row-value {
  color: var(--muted);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
  text-align: right;
  flex-shrink: 1;
}
.settings-row-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.settings-row-indent   { padding-left: 24px; }
.settings-row-indent-2 { padding-left: 44px; }
.settings-row-indent-3 { padding-left: 64px; }
.settings-row-muted    { color: var(--muted); font-style: italic; }
.settings-row-action   { color: var(--accent); }
.settings-row-danger   { color: var(--error, #c53030); }
.settings-row-subhead {
  color: var(--muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
}
.settings-row-hint {
  color: var(--muted);
  font-style: italic;
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--gap) 0;
}

/* ── Active workspace marker — accent left border, like #fileList. ───── */
.settings-row-active {
  background-color: var(--today-bg);
  border-left: 2px solid var(--accent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -3px;
  padding-left: 4px;
}
/* When the active row lives inside an indented group, draw the accent
   border *inside* the indent (margin-left reset to 0) and shave the
   padding by the border width so text stays aligned with non-active
   siblings at the same indent level. */
.settings-row-active.settings-row-indent,
.settings-row-active.settings-row-indent-2,
.settings-row-active.settings-row-indent-3 {
  margin-left: 0;
}
.settings-row-active.settings-row-indent   { padding-left: 22px; }
.settings-row-active.settings-row-indent-2 { padding-left: 42px; }
.settings-row-active.settings-row-indent-3 { padding-left: 62px; }

/* ── Colour circles ──────────────────────────────────────────────────── */
/* One visual: 18 px circle with a 1 px border. Used as a static dot in
   row controls (.settings-color-dot) and as a clickable native colour
   input (.settings-color-input). Both render identically so the panel
   doesn't have three different swatch shapes. */
.settings-color-dot,
.settings-color-input {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--shadow);
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
}
.settings-color-input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.settings-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.settings-color-input::-webkit-color-swatch         { border: none; border-radius: 50%; }
.settings-color-input::-moz-color-swatch            { border: none; border-radius: 50%; }

/* ── Inline edit row (rename, calendar / workspace colour) ──────────── */
.settings-inline-edit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  font-size: var(--text-base);
}
.settings-inline-label {
  font-size: var(--text-sm);
  color: var(--muted);
  flex-shrink: 0;
  min-width: 56px;
}
.settings-inline-edit .settings-mini-input { flex: 1 1 auto; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.settings-mini-input {
  background: var(--surface, var(--bg));
  color: var(--text);
  border: 1px solid var(--shadow);
  border-radius: var(--radius-chip);
  padding: 4px 8px;
  font-size: var(--text-sm);
  font-family: inherit;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}
.settings-mini-input-wide { flex: 1.6 1 auto; }
.settings-mini-input:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--today-bg);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Two flavours: primary (filled accent) and secondary (outlined). Icon
   buttons are the same height so rows don't shift vertically when one
   appears next to a text button. */
.settings-btn-primary,
.settings-btn-secondary {
  font-size: var(--text-sm);
  font-family: inherit;
  border-radius: var(--radius-chip);
  padding: 5px 12px;
  min-height: 28px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.settings-btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: 0;
}
.settings-btn-primary:disabled { opacity: 0.5; cursor: default; }
.settings-btn-primary:hover:not(:disabled) { filter: brightness(0.95); }
.settings-btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--shadow);
}
.settings-btn-secondary:hover { background: var(--today-bg); }
.settings-btn-danger { background: var(--error, #c53030); color: #fff; border: 0; }
.settings-icon-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: var(--radius-chip);
  font-size: var(--text-base);
  line-height: 1;
  padding: 4px 6px;
  min-height: 28px;
  min-width: 28px;
  cursor: pointer;
  flex-shrink: 0;
}
.settings-icon-btn:hover { background-color: var(--today-bg); color: var(--text); }

/* ── Forms (sync / encryption / invite) ──────────────────────────────── */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.settings-form p,
.settings-helptext {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}
.settings-form input {
  background: var(--surface, var(--bg));
  color: var(--text);
  border: 1px solid var(--shadow);
  border-radius: var(--radius-chip);
  padding: 5px 8px;
  font-size: var(--text-sm);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.settings-form input:focus { outline: none; border-color: var(--accent); }
.settings-form-aux {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Lists (devices, members, calendars) ─────────────────────────────── */
.settings-device-row,
.settings-calendar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  font-size: var(--text-base);
}
.settings-device-row .settings-row-text,
.settings-calendar-row .settings-row-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pairing panel ───────────────────────────────────────────────────── */
.settings-pair-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: center;
}
.settings-pair-code {
  font-family: var(--mono, monospace);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.15em;
  padding: var(--space-3) var(--space-5);
  background: var(--today-bg);
  border-radius: var(--radius-chip);
  user-select: all;
}
.settings-pair-qr {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  background: #fff;
  padding: 4px;
  border-radius: var(--radius-chip);
}

/* ── Custom-filter inline editor ─────────────────────────────────────── */
.settings-row-editor {
  padding-top: 2px;
  padding-bottom: 6px;
}
.settings-filter-editor {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  align-items: center;
}

/* ── Reference rows — fixed-width key column, monospace value. ───────── */
.settings-row-reference .settings-row-value {
  font-family: var(--mono, monospace);
  max-width: 60%;
}

/* ── Group headers ───────────────────────────────────────────────────── */
.settings-row-group .settings-row-text {
  font-weight: 600;
}