/* The settings screen: a rail of pages on the left, one page at a time on
 * the right.
 *
 * It is laid out in columns rather than one long list because the questions
 * fall into small groups — totals, counter habits, style — and a column of
 * four is read at a glance where a list of twelve is scrolled and searched.
 * The rail is dark for the same reason the sidebar is: it is furniture, not
 * content, and should stay out of the way of the thing being changed. */

/* No inner rail any more — the sidebar is the only list of these pages. */
.set-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
}

.set-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: auto;
}

/* Under the page band, not instead of it: the band says which page, this says
 * what the page is for. Flat and greyed like every other toolbar in the app. */
.set-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 14px;
  background: linear-gradient(#fbfcfe, #eef1f6);
  border-bottom: 1px solid #cdd5e2;
}
.set-head b { font-size: 13px; }
.set-head .reset { margin-left: auto; color: var(--danger); }

.set-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px 34px;
  align-items: start;
  padding: 20px;
}

.set-col h4 {
  margin: 0 0 10px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #46618f;
  background: #eef2f9;
  border: 1px solid #dde4ef;
}

/* A switch and its explanation are one thing to the eye, so the whole row is
 * the click target — reaching for a 14px box is a small daily tax. */
.s-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  cursor: pointer;
}
.s-check:hover { background: var(--surface); }
.s-check input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: 0 0 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.s-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0;
}
.s-field input,
.s-field select,
.s-field textarea {
  width: 100%;
  padding: 6px 9px;
  font: var(--font);
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c3ccdb;
  border-radius: 3px;
}
.s-field textarea { resize: vertical; }
/* The live field, lit amber — the same everywhere in this app now. */
.s-field input:focus,
.s-field select:focus,
.s-field textarea:focus {
  outline: 0;
  color: #3a2c00;
  background: #fff6d8;
  border-color: #d8a800;
  box-shadow: inset 0 0 0 1px #d8a800;
}

.s-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.35;
}
.s-hint {
  font-size: 11.5px;
  color: var(--muted);
}


/* Bulk: the bar, and the upload screen.
 *
 * The bar is not in the toolbar because it only exists while something is
 * ticked; a toolbar carrying six buttons that do nothing all day teaches the
 * eye to skip it. */
.bulkbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: #0b3b34;
  background: #dff5ef;
  border-bottom: 1px solid #b6e2d8;
}
.bulkbar .spacer { flex: 1; }
.bulkbar b { font-size: 13px; }
.bulkbar .ghost.small { display: inline-flex; align-items: center; gap: 5px; }
.bulkbar .ghost.small .ico { width: 14px; height: 14px; flex: 0 0 14px; }
.bulkbar .danger { color: var(--danger); border-color: #f0c9c9; }
.bulkbar .danger:hover { background: #fdeeee; }

.w-pick { width: 34px; text-align: center; }
.w-pick input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* A progress bar that means it: one job, one line, no spinner pretending. */
.bar { height: 7px; margin-top: 10px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .12s linear; }

.up-box { max-width: 720px; padding: 22px; }
.up-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  text-align: center;
  background: var(--surface);
  border: 2px dashed #c8d3e4;
  border-radius: 10px;
}
.up-drop .ico { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
.up-drop .sub { max-width: 460px; margin: 0; }
.up-or { margin: 14px 0 8px; color: var(--muted); text-align: center; font-size: 12px; }
.up-box textarea {
  width: 100%;
  padding: 10px;
  font: 12px/1.5 Consolas, monospace;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}
.up-box .primary { margin-top: 10px; }

/* What the sheet was understood to say, before a single row is written. */
.up-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.up-map .miss { margin-left: 12px; color: var(--muted); }
.pill {
  padding: 3px 9px;
  font-size: 11.5px;
  color: #0b3b34;
  background: #dff5ef;
  border-radius: 999px;
}
.pill.off { color: var(--muted); background: var(--bg); text-decoration: line-through; }

.up-go {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.sub.small { font-size: 11.5px; }


/* Template cards, colour swatches, the logo box and the slider — the controls
 * the invoice designer needs and nothing else does. */
/* Controls on the left, the paper on the right.
 *
 * The template picker is a strip ABOVE the columns rather than a column that
 * spans them. An item with `grid-column: 1 / -1` inside a
 * `repeat(auto-fit, …)` grid makes the whole repeat collapse to ONE track —
 * so every group stacked into a single tall column and the page became a
 * scroll. The strip sits outside the grid, and the grid stays a grid. */
.set-body { display: flex; gap: 26px; align-items: flex-start; }
.set-body:not(.withpreview) { display: block; }
.set-body.withpreview { padding: 20px; }
.set-body.withpreview .set-main { flex: 1; min-width: 0; }
.set-body.withpreview .set-cols { padding: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.set-strip { margin-bottom: 20px; }

/* Side by side, because choosing between five designs means comparing them —
 * a vertical list is read one at a time. */
.s-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.s-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  padding: 9px 7px;
  font: var(--font);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.s-card b { font-size: 12px; }

.s-card:hover { border-color: #b9c6dc; }
.s-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13, 148, 136, .13); }

/* A thumbnail of the layout, drawn in four bars rather than shipped as five
 * images — it takes the accent colour with it, so the card shows the shop its
 * OWN choice, not a stock picture. */
.s-thumb {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  height: 40px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.s-thumb i { display: block; height: 3px; background: #dfe4ec; border-radius: 2px; }
.s-thumb i:first-child { height: 6px; background: var(--accent); }
.s-card[data-val="modern"] .s-thumb i:first-child { height: 11px; margin: -4px -4px 3px; border-radius: 0; }
.s-card[data-val="bold"] .s-thumb i:first-child { height: 8px; }
.s-card[data-val="compact"] .s-thumb i { height: 2px; gap: 1px; }
.s-card[data-val="elegant"] .s-thumb i:first-child { width: 60%; margin: 0 auto 2px; height: 4px; }

.s-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s-sw {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  cursor: pointer;
}
.s-sw.on { border-color: var(--ink); }
.s-colors input[type=color] {
  width: 30px;
  height: 26px;
  padding: 1px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}

.s-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-logo img {
  max-width: 90px;
  max-height: 42px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.s-nologo { font-size: 11.5px; color: var(--muted); }
.s-logo input[type=file] { max-width: 190px; font-size: 11.5px; }

.s-field input[type=range] { width: 100%; accent-color: var(--accent); }
.s-val { margin-left: 6px; color: var(--accent); }

/* A box carrying the account details in grey says the answer to “will my
 * information already be there?” without a sentence of explanation. */
.s-field input.from-account::placeholder { color: #94a3b8; font-style: italic; }


/* The always-there menu on the shelf. The bar below only shows once rows are
 * ticked, which makes bulk work invisible to anybody who has never ticked
 * one — this says what is possible before anything is selected. */
.bmenu { position: relative; display: inline-block; }
.bmenu-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  min-width: 250px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.bmenu-list button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  font: var(--font);
  font-size: 13px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.bmenu-list button:hover:not(:disabled) { background: var(--bg); }
.bmenu-list button:disabled { color: var(--muted); cursor: default; }
.bmenu-list button i { margin-left: auto; font-size: 11px; font-style: normal; color: #9aa5b5; }

.up-drop.over { background: #eefaf7; border-color: var(--accent); }

/* One row per field: what it is, which column it took, and the first value
 * from that column so a wrong guess is obvious without scrolling. */
.up-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 6px 18px;
  width: 100%;
  margin-top: 10px;
}
.up-f {
  display: grid;
  grid-template-columns: 108px 1fr 90px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.up-f > span { color: var(--muted); }
.up-f select {
  padding: 4px 6px;
  font: var(--font);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.up-f em {
  overflow: hidden;
  font-style: normal;
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.up-f.off select { color: var(--muted); background: var(--bg); }
.up-f.off em { display: none; }
.up-ignored { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }


/* ── The header editor ────────────────────────────────────────────
 *
 * Everything here is drawn on the PREVIEW only. The printed bill carries the
 * same markup with none of it: no grips, no dashes, no toolbar. */
.set-preview { position: sticky; top: 0; }

.prev-paper .p-zone {
  min-height: 30px;
  border: 1px dashed transparent;
  border-radius: 4px;
}
.prev-paper .p-zone.over { border-color: var(--accent); background: rgba(13, 148, 136, .07); }

/* An empty zone has to be big enough to aim at. On paper it collapses to
 * nothing — see `.p-zone.bare` in invoice.css — but in the editor it is the
 * one target somebody most often wants, so the editor holds it open. */
.prev-paper .p-zone.bare {
  flex: 1 1 0;
  min-height: 34px;
  border-style: dashed;
  border-color: #cbd5e1;
}
.prev-paper .p-zone.bare::before {
  content: 'drop here';
  display: block;
  padding: 8px 4px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.prev-paper .p-zone.bare.over::before { color: var(--accent); }

/* Where it will land. A line above the block it would push down, or under the
 * last one when it is going to the end — because "somewhere in this zone" is
 * not an answer when the zone already holds two blocks. */
.prev-paper .p-block.dropabove { box-shadow: 0 -2px 0 0 var(--accent); }
.prev-paper .p-zone.atend > .p-block:last-child { box-shadow: 0 2px 0 0 var(--accent); }

/* The block being carried. */
.prev-paper .p-block.dragging { opacity: .4; }

.prev-paper .p-block { padding-left: 13px; }
.prev-paper .p-block.dragging { opacity: .4; }

/* The grip. Small, quiet, and always in the same place on every block — it is
 * the handle, so it must not move about. */
.s-grip {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 11px;
  line-height: 1;
  color: #b6c0d0;
  cursor: grab;
  user-select: none;
}
.prev-paper .p-block:hover .s-grip { color: var(--accent); }
.s-grip:active { cursor: grabbing; }

/* What is being edited, and what could be. */
/* A signature is a wide, short thing — shown at the shape it will print in,
 * not squared off like the logo beside it. */
.s-sign img { max-width: 190px; max-height: 52px; object-fit: contain; }

.modal.signpad { width: 640px; max-width: 94vw; }
.sp-canvas {
  display: block;
  width: 100%;
  height: 190px;
  margin: 10px 0 4px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  /* A finger dragging on the pad must draw, not scroll the page under it. */
  touch-action: none;
  cursor: crosshair;
}

.prev-paper .editable {
  outline: 1px dashed transparent;
  outline-offset: 1px;
  cursor: pointer;
}
.prev-paper .editable:hover { outline-color: #b6c0d0; }
.prev-paper .editable.picked {
  outline: 1.5px solid var(--accent);
  background: rgba(13, 148, 136, .07);
}

/* The toolbar for the piece in hand. It sits at the foot of the preview
 * rather than following the element around: a bar that jumps about the page
 * is a bar you chase, and the preview is small enough that the foot is never
 * far from what is being changed. */
.s-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.s-tools b { margin-right: 4px; font-size: 11.5px; }
.s-tools button {
  min-width: 26px;
  padding: 4px 7px;
  font: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
.s-tools button:hover { background: #fff; border-color: #b9c6dc; }
.s-tools button.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.s-tools .s-size { min-width: 42px; font-size: 11.5px; text-align: center; color: var(--muted); }
.s-tools .s-reset { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--muted); }
.s-tcolors { display: flex; gap: 3px; margin-left: 4px; }
.s-tools .s-sw {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  font-size: 10px;
  color: var(--muted);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.s-tools .s-sw.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--ink); }

/* Where the blocks currently sit, said in words as well — the preview shows
 * it, but a list is what somebody checks against. */
.s-zones { display: flex; gap: 8px; }
.s-zone {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.s-zone b {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}
.s-zone i { font-size: 11px; color: #b6c0d0; }
.s-blk {
  display: block;
  padding: 3px 6px;
  margin-bottom: 3px;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 4px;
}

.s-master { display: grid; gap: 6px; }
.s-master .s-hint { line-height: 1.5; }
.s-master .bar { margin-top: 2px; }

/* Which sheet the preview is showing. A panel that says "how it prints"
 * should say what it is printing on. */
.prev-on {
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #21365e;
  background: #dfe6f2;
  border: 1px solid #b9c6dd;
  border-radius: 3px;
  text-transform: none;
}

/* ── Narrower than a desktop ──────────────────────────────────────
 *
 * Settings is the widest thing in the app: a rail, three or four columns of
 * controls and a sheet of paper beside them. On a 13-inch laptop — which is
 * what a counter machine usually is — the columns were being squeezed to a
 * word wide while the preview kept its 380 pixels whatever happened.
 *
 * The order things give way in is the order they matter: the preview narrows
 * first, then it goes under the controls, then the controls become one
 * column. The paper is never the thing that survives at the cost of the
 * fields being set. */
@media (max-width: 1400px) {
  .set-preview { flex: 0 0 320px; }
  .set-cols { gap: 20px 24px; padding: 16px; }
}

@media (max-width: 1180px) {
  /* Under the controls rather than beside them. Still sticky would mean a
   * sheet of paper following the page up and down under everything. */
  .set-body.withpreview { flex-direction: column; }
  .set-preview {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-width: 620px;
    padding: 0 16px 18px;
  }
  .prev-paper { max-height: 46vh; }
}

@media (max-width: 900px) {
  .set-cols { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .set-head { flex-wrap: wrap; gap: 4px 12px; }
}