/* ── Settings cog dropdown ─────────────────────────────────────────────────
 *
 * Shared settings dropdown styles for the app bar cog. Used by:
 *   index.html, qa-queue.html, landing.html, loe-queue.html
 *
 * Extracted 2026-05-06 from per-surface duplicates in layout.css,
 * qa-queue.css, and landing.css. Wiki pages have their own scoped
 * .wiki-body .settings-* rules in wiki/css/wiki.css and are NOT affected
 * by this file.
 *
 * Classes:
 *   Base:          settings-wrapper, settings-cog, settings-dropdown,
 *                  settings-item, settings-label, settings-toggle,
 *                  settings-divider
 *   Toggle row:    filter-toggle-label, toggle-switch (notification
 *                  preference rows; pill-slider aesthetic preserved)
 *   Pref group:    settings-pref-group, settings-pref-group-header
 *   Combined grid: settings-pref-grid, settings-pref-grid-header,
 *                  settings-pref-cell, settings-pref-email-col
 *
 * The combined grid (2026-05-06) replaces the prior in-app + email
 * separate-section layout with a 3-column grid (label | in-app toggle |
 * email toggle) plus column headers, so the in-app/email parallelism is
 * visually obvious at a glance. Email column dims via .email-disabled
 * on the grid container when the master toggle is OFF.
 */

/* ── Base cog button + dropdown panel ───────────────────────────────── */

.settings-wrapper {
  position: relative;
}

.settings-cog {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.settings-cog:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.settings-cog.open { transform: rotate(45deg); }

.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  /* Widened from 220px (2026-05-06) to give the new combined grid +
   * notification headers + master row enough horizontal breathing room.
   * Settings cog menus on commercial apps trend 280-340px; 320 is mid. */
  min-width: 320px;
  padding: 8px 0;
  z-index: 250;
  display: none;
}
.settings-dropdown.open { display: block; }

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 12px;
}

.settings-label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.settings-toggle {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.settings-toggle:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

select.settings-toggle {
  appearance: auto;
  padding: 3px 6px;
}

/* Full-width centered button/link variant for the Change Password button
 * and Help link rows. Replaces the inline style="text-align:center;width:100%"
 * + (for <a>) text-decoration:none that the markup carried pre-2026-05-06. */
.settings-toggle-full {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Single-toggle pill-slider rows (Show Landing Page, Email master) ─
 *
 * Used by `.filter-toggle-label` rows that sit at the top level of the
 * dropdown rather than inside the combined grid. Default-flex layout
 * was packing the toggle next to a variable-width label; switching to
 * justify-content:space-between with flex:1 on the inner label pushes
 * the toggle to the right edge consistently regardless of label length.
 *
 * Pre-2026-05-06: labels were aligned-left, toggles wherever the label
 * happened to end. Stagger was visually wonky.
 */

/* Base toggle-row layout (used by QA Intake form fields and other surfaces
 * that pair a hidden checkbox with the .toggle-switch pill). Pre-2026-05-06
 * this was the only definition. */
.filter-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.filter-toggle-label input[type="checkbox"] { display: none; }

/* Scoped overrides for the settings dropdown context: stretch the row to
 * the dropdown's full inner width and push the toggle to the right edge
 * regardless of label length. Pre-fix the toggles staggered with label
 * widths because the base rule above doesn't claim row width. Scoping to
 * .settings-dropdown means QA Intake form toggles in the engagement
 * detail panel keep their original content-sized layout. */
.settings-dropdown .filter-toggle-label {
  width: 100%;
  justify-content: space-between;
}
.settings-dropdown .filter-toggle-label > .settings-label {
  flex: 1;
}

.toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--border);
  border-radius: 9px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

input:checked + .toggle-switch { background: var(--accent); }
input:checked + .toggle-switch::before { transform: translateX(14px); }

/* Per-theme override for the toggle pill background when checked.
 * Theme tokens vary in contrast against the default --accent value, so
 * a few themes get an explicit background here to keep the on/off
 * affordance legible. */
[data-theme="c128"] input:checked + .toggle-switch { background: #1a4a1a; }
[data-theme="ur6000"] input:checked + .toggle-switch { background: #3d2e00; }
[data-theme="haven3019"] input:checked + .toggle-switch { background: #2a5070; }
[data-theme="high-contrast"] input:checked + .toggle-switch { background: #ffff00; }
[data-theme="high-contrast"] input:checked + .toggle-switch::before { background: #000000; }

/* ── Notification preference group container ───────────────────────────
 *
 * Wraps the Notifications header + master toggle + combined grid.
 * Replaces the inline `style="flex-direction:column;align-items:flex-start;..."`
 * override that the markup used pre-2026-05-06 to morph .settings-item
 * into a vertical block.
 */

.settings-pref-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 16px;
}

.settings-pref-group-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

/* ── Combined in-app + email preference grid ──────────────────────────
 *
 * 3-column grid: [label] [in-app toggle] [email toggle]. Column headers
 * above the rows teach users the in-app/email schema at a glance. Master
 * toggle ("Email me notifications") sits ABOVE the grid as its own
 * filter-toggle-label row — it gates the entire email column. When the
 * master is OFF, JS adds .email-disabled to the grid container, which
 * dims the .settings-pref-email-col cells to 0.4 opacity and disables
 * pointer events. The DB still stores the sub-toggle values so flipping
 * the master back ON restores the user's prior fine-grained choices.
 */

.settings-pref-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 18px;
  row-gap: 8px;
  align-items: center;
  margin-top: 2px;
}

.settings-pref-grid-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
}

.settings-pref-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.settings-pref-cell input[type="checkbox"] { display: none; }

/* Email-master-OFF dims the email column. Single class flip on the grid
 * container; JS doesn't have to touch each individual checkbox. The
 * checkboxes themselves are still functional in the DOM (so a future
 * user-cancelled toggle is reflected); pointer-events:none prevents
 * accidental clicks. */
.settings-pref-grid.email-disabled .settings-pref-email-col {
  opacity: 0.4;
  pointer-events: none;
}