/* settings.css
 * Lazy-loaded by panels/nav.js on openPanel('settings').
 * Phase 2 addition.
 */

.settings-panel {
  padding: 8px 16px 24px;
  /* The host caps this panel. Declaring the variable on our own root is how a
     panel narrows its own measure under the contract in
     public/styles/panel-layout.css — 1560px is right for a log feed, not for a
     board of label/value rows. The old `max-width:720px; margin:0 auto` here was
     dead weight anyway: the host rule outranks it on specificity. */
  --panel-max-wide: 1240px;
}
.settings-section {
  margin: 18px 0;
  padding: 16px;
  background: var(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-md);
  box-shadow: var(--md-sys-elevation-1);
}
.settings-section-title {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.settings-row:first-of-type { border-top: none; padding-top: 0; }
.settings-row-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.settings-row-check { cursor: pointer; }
.settings-check {
  width: 18px;
  height: 18px;
  accent-color: #2693D1;
  cursor: pointer;
  flex-shrink: 0;
}
.settings-row-label {
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
}
.settings-row-value {
  color: var(--md-sys-color-on-surface);
  text-align: right;
  font-weight: 500;
}
.settings-row-meta {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  margin-left: 4px;
}
.settings-row-value--granted { color: var(--md-sys-color-success-fg); }
.settings-row-value--denied  { color: var(--md-sys-color-error); }
.settings-row-value--default { color: var(--md-sys-color-warning-fg); }

.settings-theme-toggle {
  display: flex;
  gap: 6px;
  width: 100%;
}
/* M3 outlined button (segment-style) */
.settings-theme-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-sm);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  text-transform: capitalize;
  min-height: 40px;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.settings-theme-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
@media (hover: hover) {
  .settings-theme-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}
.settings-theme-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }
.settings-theme-btn--active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

.settings-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* M3 tonal chip variant. Keeps the indigo capability cue. */
.settings-cap-chip {
  display: inline-flex;
  padding: 4px 12px;
  background: rgba(99, 102, 241, 0.14);
  color: #6366f1;
  border-radius: var(--md-sys-shape-corner-sm);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}
.settings-empty {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-style: italic;
}

/* ── Tabs section: pin / unpin / reorder ──────────────────────────────────────
   One row per pinnable module panel. Up/down arrows rather than drag: the list
   is short, and drag on a touch surface fights the panel's own scroller. */
.settings-tab-pin-heading {
  margin: 12px 0 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: 600;
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.settings-tab-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.settings-tab-pin-row:last-child { border-bottom: 0; }
.settings-tab-pin-pos {
  flex: 0 0 auto;
  min-width: 20px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-variant-numeric: tabular-nums;
}
.settings-tab-pin-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  color: var(--md-sys-color-on-surface);
}
.settings-tab-pin-note {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-small-size);
  font-style: italic;
}
.settings-tab-pin-btn {
  flex: 0 0 auto;
  min-height: 36px;
  min-width: 36px;
  padding: 6px 10px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-family);
  font-size: 15px;
  cursor: pointer;
}
.settings-tab-pin-btn:disabled { opacity: 0.4; cursor: default; }
.settings-tab-pin-row--off .settings-tab-pin-label {
  color: var(--md-sys-color-on-surface-variant);
}
@media (pointer: coarse) {
  .settings-tab-pin-btn { min-height: 44px; min-width: 44px; }
}

/* Inline notes inside settings sections (notification guidance, errors) */
.settings-note {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  padding: 4px 0;
}
.settings-note--muted {
  color: var(--md-sys-color-on-surface-variant);
}
.settings-note--error {
  color: var(--md-sys-color-error, #ba1a1a);
  margin-top: 6px;
}

/* M3 filled button */
.settings-btn {
  width: 100%;
  padding: 10px 24px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-font-family);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  -webkit-tap-highlight-color: transparent;
}
.settings-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .settings-btn:hover { box-shadow: var(--md-sys-elevation-1); }
  .settings-btn:hover::after { opacity: var(--md-sys-state-hover-opacity); }
}
.settings-btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

/* M3 outlined button (danger variant -- error color) */
.settings-btn--danger {
  background: transparent;
  color: var(--md-sys-color-error);
  border: 1px solid var(--md-sys-color-error);
}
.settings-btn--danger:hover { background: transparent; box-shadow: none; }

.settings-btn:disabled { opacity: 0.6; cursor: default; }

/* Device-login output: QR + one-time link */
.settings-device-link {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-device-qr {
  align-self: center;
  width: 200px;
  max-width: 60vw;
  padding: 12px;
  background: #ffffff; /* QR needs a light quiet zone to scan reliably in dark mode */
  border-radius: var(--md-sys-shape-corner-medium, 12px);
}
.settings-device-qr svg { display: block; width: 100%; height: auto; }
.settings-device-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.settings-device-link-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: var(--md-sys-typescale-body-small-size, 12px);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-variant, rgba(127,127,127,0.12));
  border: 1px solid var(--md-sys-color-outline, rgba(127,127,127,0.4));
  border-radius: var(--md-sys-shape-corner-small, 8px);
}
.settings-device-link-row .settings-btn { width: auto; flex: 0 0 auto; }

/* ── Signature capture (capability "signing") ── */
.settings-sig-preview {
  margin: 10px 0;
  padding: 12px;
  /* Full border, never a one-sided accent stripe. White fill because the
     signature PNG is black ink on transparency: on a dark theme it would
     otherwise be invisible. */
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-sm);
  background: #ffffff;
  text-align: center;
}
.settings-sig-img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  margin: 0 auto;
}
.settings-sig-capture { margin-top: 12px; }
.settings-sig-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 200px;
  margin: 8px 0;
  border: 1px solid #2693D1;
  border-radius: var(--md-sys-shape-corner-sm);
  background: #ffffff;
  /* Without this, a finger drag on iPad scrolls the panel instead of drawing,
     and the pointermove stream gets cancelled mid-stroke. */
  touch-action: none;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}
.settings-sig-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.settings-sig-actions .settings-btn { width: auto; flex: 1 1 auto; }
/* Neutral tertiary action (Clear / Cancel): outlined, not filled, so it does
   not compete with Save. */
.settings-btn--quiet {
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
}
.settings-btn--quiet:hover { background: transparent; box-shadow: none; }
.settings-sig-hint {
  margin-top: 10px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.settings-sig-file {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 15px;
  color: var(--md-sys-color-on-surface);
}

@media (pointer: coarse) {
  .settings-theme-btn { min-height: 48px; }
  .settings-btn { min-height: 48px; }
}

/* ── Wide layout ──────────────────────────────────────────────────────────────
   The sections are independent, self-contained cards with no reading order
   between them, which is exactly the shape that wants a board instead of a
   1400px-tall ribbon. Two columns, because at three the label/value rows inside
   each card get too short to read. Host contract: public/styles/panel-layout.css */

@media (min-width: 1024px) {
  .settings-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
    padding: 16px 0 32px;
  }
  /* The grid gap owns spacing now; the section's own vertical margin would
     stack on top of it and desynchronise the two columns. */
  .settings-panel > .settings-section { margin: 0; }
  /* Sign-out is a destructive full-width terminator, not a peer card. */
  .settings-panel > .settings-section:last-child { grid-column: 1 / -1; }
}