/* ============================================================================
   KTM Voyage CRM — settings page [ADM/UPG]
   Owned by public/js/pages/settings.js. Loaded after components.css, so on any
   property the two both define, this file wins by source order.

   RULES THIS SHEET FOLLOWS (same as every other module sheet):
   - Not one hard-coded colour. Every value comes from css/tokens.css, which is
     what makes light and dark mode correct for free.
   - Nothing here is a copy of a component. The cards, fields, buttons, tables,
     callouts, segmented controls and the audit trail are all drawn by base.css
     and components.css; this sheet only adds the LAYOUT that is specific to a
     settings screen (nav beside the panels), plus the four small pieces that
     have no component yet: the search drop, the per-setting footer, the sticky
     save bar and the JSON block.
   - The breakpoints match the rest of the app: 1024px (nav collapses into the
     segmented strip) and 768px / 560px (phone).
   ========================================================================== */

/* ---------- head + search ------------------------------------------------ */

.setshead {
  margin-bottom: var(--sp-4);
}

/* The search box is the single most useful control on this page for someone who
   does not know our words for things, so it gets the width the toolbar can spare
   and a result list that drops over the content instead of pushing it. */
/* Box and hint stack, so the sentence sits UNDER the field instead of beside it
   (the toolbar group is a flex row and would otherwise put them side by side). */
.setfind-wrap {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
}

.setfind {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.setfind:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.setfind .sf-ic {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-faint);
}

.setfind input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}

.setfind input:focus {
  outline: none;
}

.setfind input::placeholder {
  color: var(--text-faint);
}

.setfind-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

.sf-drop {
  position: absolute;
  z-index: var(--z-drop);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.sf-hit {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sf-hit:hover,
.sf-hit:focus-visible {
  background: var(--hover);
  outline: none;
}

.sf-hit .sf-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.sf-hit .sf-s {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: lowercase;
}

.sf-none {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- layout: nav beside the panels -------------------------------- */

.setwrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.setnav {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.setnav-h {
  padding: 4px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.setnav-i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.setnav-i:hover {
  background: var(--hover);
  color: var(--text);
}

.setnav-i:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.setnav-i.on {
  background: var(--surface-accent);
  color: var(--accent-text-strong);
  font-weight: 700;
}

.setnav-ic {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-faint);
}

.setnav-i.on .setnav-ic {
  color: var(--accent);
}

.setnav-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* How many unsaved edits are waiting in a section you cannot see right now.
   Without this the sticky bar would say "3 changes" and the owner would have to
   click through eight panels to find them. */
.setnav-n {
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* The segmented strip is the same nav on a narrow screen. Eight section names do
   not fit in 390px, so the strip scrolls (.seg itself has overflow:hidden, which
   is why the scrolling lives on the wrapper). The buttons size to their own label
   instead of sharing the track equally — hence .no-slide from the JS: the sliding
   indicator only lines up when every button is the same width, and "Facturatie en
   prijzen" is not the same width as "Bedrijf". */
.setsegs {
  display: none;
  margin-bottom: var(--sp-4);
  --sx-bg: var(--bg);
}

.setsegs .seg {
  min-width: max-content;
  overflow: visible;
}

.setsegs .seg button {
  flex: 0 0 auto;
  padding-left: 13px;
  padding-right: 13px;
}

/* ---------- section panels ----------------------------------------------- */

.setsec-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.setsec-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}

.setsec-head h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-head);
}

.setsec-head p {
  max-width: 68ch;
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.setcard {
  margin-bottom: var(--sp-4);
}

.setcard-sub {
  max-width: 72ch;
  margin: 0 0 var(--sp-4);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.setgrid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-4);
}

/* ---------- one setting --------------------------------------------------- */

.setrow {
  position: relative;
  padding: var(--sp-3) var(--sp-3) 2px;
  margin: 0 calc(var(--sp-3) * -1) var(--sp-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}

.setrow + .setrow {
  border-top: 1px solid var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.setgrid3 .setrow + .setrow {
  border-top: none;
}

.setrow .field {
  margin-bottom: 8px;
}

/* A number of days and an amount are short values. Letting them stretch across a
   1000px card makes a settings screen look unfinished, and it makes the number
   itself harder to find. Text that really can be long (the discount steps, the
   notification categories) keeps the full width. */
.setrow .field input[type="number"],
.setrow .field select,
.setrow .money-wrap {
  max-width: 340px;
}

/* Changed but not saved. Deliberately a left bar and a soft fill rather than a
   loud colour: at three edits at once the screen should still read as calm. */
.setrow.is-dirty {
  background: var(--surface-accent);
  border-color: var(--accent-line);
}

.setrow.is-dirty::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.setrow.has-issue {
  background: color-mix(in srgb, var(--bad) 7%, transparent);
  border-color: color-mix(in srgb, var(--bad) 35%, transparent);
}

/* Where the search box lands you. Two calm pulses, then gone. */
.setrow.is-found {
  animation: setfound 1.1s ease-out 2;
}

@keyframes setfound {
  0%   { background: var(--accent-soft); border-color: var(--accent); }
  100% { background: transparent; border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .setrow.is-found {
    animation: none;
    background: var(--accent-soft);
    border-color: var(--accent);
  }
}

.setrow-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.setrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* "Sends mail" is the one tag that has to be noticed, so it is the one tag that
   carries the warning colour. */
.setrow-tag.t-mail {
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--accent-text-strong);
}

.setrow-tag.t-fixed {
  border-color: var(--border);
  color: var(--text-faint);
}

.setrow-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  font-size: 12px;
}

.setrow-def {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.setrow-rst {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.setrow-rst:hover {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--accent-text);
}

.setrow-rst:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Only visible while the row really differs from what is saved. */
.setrow-chg {
  display: none;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}

.setrow.is-dirty .setrow-chg {
  display: inline-flex;
}

.setrow-err {
  padding-bottom: var(--sp-3);
}

/* A value the contract fixed: readable, obviously not an input. */
.setfact {
  display: block;
  padding: 9px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.setnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.setnote svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-faint);
}

/* ---------- mail notice --------------------------------------------------- */

.setmail {
  margin-bottom: var(--sp-4);
}

.setmail-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.setmail p {
  max-width: 76ch;
  margin: 0 0 8px;
  line-height: 1.6;
}

.setmail .btn {
  margin-top: 4px;
}

/* ---------- data and backup ---------------------------------------------- */

.setacts {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

/* The file picker is a <label> wrapping a hidden <input type=file>, so it has to
   look and behave like the button it pretends to be. */
.setimp-pick {
  cursor: pointer;
}

.setimp {
  margin-bottom: var(--sp-3);
}

.setimp-out:empty {
  display: none;
}

.setimp-out {
  margin-top: var(--sp-4);
}

.setimp-h {
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-head);
}

.setimp-skip p {
  margin: 6px 0 0;
  line-height: 1.55;
}

/* The "this file switches a notification on" warning. Icon and sentence sit on
   one baseline row; the icon never shrinks, so a long sentence wraps under
   itself instead of squashing the bell into an oval. */
.setimp-arms {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.setimp-arms svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.setimp-arms p {
  margin: 0;
  line-height: 1.55;
}

.setimp-keys {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.setdiff-old {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bad) 70%, transparent);
}

.setdiff-new {
  color: var(--ok);
  font-weight: 700;
}

.settable table.data td,
.settable table.data th {
  white-space: normal;
}

/* ---------- advanced ------------------------------------------------------ */

.setjson {
  max-height: 340px;
  overflow: auto;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: pre;
  tab-size: 2;
}

.setjson:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- the sticky save bar ------------------------------------------ */

.setbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-2);
  transition: border-color .18s ease, background-color .18s ease;
}

.setbar.is-dirty {
  border-color: var(--accent-line);
  background: var(--surface-accent);
}

.setbar .sb-ic {
  display: inline-flex;
  color: var(--text-faint);
}

.setbar.is-dirty .sb-ic {
  color: var(--accent);
}

.setbar .sb-txt {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.setbar.is-dirty .sb-txt {
  color: var(--accent-text-strong);
}

.setbar .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- 1024px: the nav becomes the segmented strip ------------------- */

@media (max-width: 1024px) {
  .setwrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .setnav {
    display: none;
  }

  .setsegs {
    display: block;
  }
}

/* ---------- 768px and down ------------------------------------------------ */

@media (max-width: 768px) {
  .setfind {
    width: 100%;
  }

  .setgrid3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .setgrid3 .setrow + .setrow {
    border-top: 1px solid var(--border);
  }

  .setsec-head h2 {
    font-size: 18px;
  }

  .setjson {
    max-height: 260px;
    font-size: 11.5px;
  }
}

/* ---------- 560px: phone -------------------------------------------------- */

@media (max-width: 560px) {
  .setsec-ic {
    width: 34px;
    height: 34px;
  }

  .setsec-ic svg {
    width: 17px;
    height: 17px;
  }

  .setrow {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    margin-left: calc(var(--sp-2) * -1);
    margin-right: calc(var(--sp-2) * -1);
  }

  .setrow-foot {
    gap: 8px;
  }

  /* A finger is not a mouse pointer: "back to standard" has to be as easy to hit
     as everything else on the screen. */
  .setrow-rst {
    min-height: 36px;
    padding: 6px 11px;
  }

  .setrow-chg {
    margin-left: 0;
  }

  /* At this width the bar is the only thing that matters, so the save button
     takes the full row and the label above it says what is waiting. */
  .setbar {
    padding: var(--sp-3);
    border-radius: var(--radius);
  }

  .setbar .sb-ic {
    display: none;
  }

  .setbar .sb-txt {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Never truncate a button label — "Instellingen ..." tells nobody what the
     button does. The bar earns its height instead: while nothing is changed the
     undo button is not drawn at all (it would be disabled anyway), so the calm
     state is one line of text plus one save button. */
  .setbar .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .setbar:not(.is-dirty) [data-action="discard"] {
    display: none;
  }

  .setacts .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}