/* ==========================================================================
 * settings-form.css — the Configuration screen, for every dashboard.
 *
 * Pairs with /js/common/settings-form.js. It was a bare Bootstrap form-horizontal:
 * an <h4> per group and a label/control row per setting. That reads fine at six
 * settings and badly at forty — which is what the POS catalog now has — because
 * nothing separates one policy from the next and the help text competes with the
 * label for the same line.
 *
 * The shape here is a SETTINGS LIST, not a form: one card per group, one row per
 * policy, the label and its explanation on the left, the control on the right.
 * That is the pattern an operator already knows from every phone settings screen,
 * so it needs no learning.
 *
 * Scoped to .cfg-* so it cannot reach any other screen.
 * ========================================================================== */

/* ── Page heading ──────────────────────────────────────────────────────────
 * Shared by Configuration and Order settings so the two screens read as one
 * family. Replaces the inline styles each carried, which had already drifted.
 */
.cfg-page-head{ margin-bottom:16px; }
.cfg-page-head h4{
  margin:0 0 4px; font-size:18px; font-weight:700; color:#0D3B8C; letter-spacing:-.01em;
}
.cfg-page-head p{ margin:0; font-size:13px; color:#5f6b7c; max-width:80ch; }

/* ── Toolbar: search + count ───────────────────────────────────────────────
 * A forty-item list needs a way in. Filtering is client-side over data-search,
 * so it costs nothing and works while offline.
 */
.cfg-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-bottom:16px;
}
.cfg-search{
  flex:1 1 260px; max-width:420px; position:relative;
}
.cfg-search input{
  width:100%; height:38px; padding:6px 12px 6px 34px;
  border:1px solid #d5dce6; border-radius:9px; background:#fff;
  font-size:13px; color:#22303f;
}
.cfg-search input:focus{
  outline:none; border-color:#1565C0; box-shadow:0 0 0 3px rgba(21,101,192,.12);
}
.cfg-search .glyphicon{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:#95a2b5; font-size:12px; pointer-events:none;
}
.cfg-count{ font-size:12px; color:#5f6b7c; white-space:nowrap; }

/* ── Group card ────────────────────────────────────────────────────────────*/
.cfg-group{
  background:#fff; border:1px solid #e2e7ef; border-radius:12px;
  box-shadow:0 3px 14px rgba(20,40,80,.05);
  margin-bottom:16px; overflow:hidden;
}
.cfg-group__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 18px; background:#f7f9fc; border-bottom:1px solid #e6ebf3;
}
.cfg-group__head h4{
  margin:0; font-size:14px; font-weight:700; color:#0D3B8C; letter-spacing:.2px;
}
.cfg-group__head .cfg-group__n{ font-size:11px; color:#5f6b7c; }

/* ── One setting ───────────────────────────────────────────────────────────
 * Grid rather than flex: the control column keeps a fixed width so every switch
 * on the screen lines up, however long the label above it happens to be.
 */
.cfg-row{
  display:grid; grid-template-columns:1fr 220px; gap:8px 20px;
  align-items:start; padding:14px 18px; border-bottom:1px solid #eef2f7;
}
.cfg-row:last-child{ border-bottom:0; }
.cfg-row:hover{ background:#fbfcfe; }
.cfg-row__label{
  display:block; font-size:13.5px; font-weight:650; color:#22303f; margin:0 0 3px;
}
.cfg-row__help{
  display:block; font-size:12px; line-height:1.5; color:#5f6b7c; max-width:64ch;
}
.cfg-row__control{ justify-self:end; width:100%; max-width:220px; text-align:right; }
.cfg-row__control .form-control{ height:36px; font-size:13px; }

/* The saved confirmation belongs ON THE ROW. A single banner at the top of the
 * page is unreadable once the list scrolls: you toggle something at the bottom
 * and the only confirmation appears off-screen. */
.cfg-row__saved{
  grid-column:2; justify-self:end;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  color:#0f6e56; background:#e3f3ee; border:1px solid #0f6e56;
  border-radius:999px; padding:1px 9px;
  opacity:0; transition:opacity .18s;
}
.cfg-row__saved.is-on{ opacity:1; }
.cfg-row__saved.is-err{ color:#c0392b; background:#fdecea; border-color:#c0392b; }

/* ── The switch IS the checkbox ────────────────────────────────────────────
 * appearance:none restyles the real <input> rather than hiding it behind a
 * decorated <span>. That keeps one focusable, labelable, screen-reader-correct
 * control — and keeps it clickable for tests, which a 0-opacity input is not.
 */
.cfg-row__control input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; margin:0;
  width:44px; height:24px; border-radius:999px;
  background:#cfd8e6; border:1px solid #c2ccdb;
  position:relative; cursor:pointer; vertical-align:middle;
  transition:background .18s, border-color .18s;
}
.cfg-row__control input[type="checkbox"]::after{
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(20,40,80,.3);
  transition:transform .18s;
}
.cfg-row__control input[type="checkbox"]:checked{ background:#1565C0; border-color:#1565C0; }
.cfg-row__control input[type="checkbox"]:checked::after{ transform:translateX(20px); }
.cfg-row__control input[type="checkbox"]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(21,101,192,.25);
}
.cfg-row__control input[type="checkbox"]:disabled{ opacity:.5; cursor:not-allowed; }

/* ── E1: a setting the tenant's plan does not include ──────────────────────
 * LOCKED, not hidden. An owner looking at this row is deciding whether to ask
 * for the feature; removing the row would answer a question they never got to
 * ask, and a shop that cannot see what it is missing never upgrades.
 *
 * The LABEL dims and the HELP TEXT does not — the explanation is the part that
 * is still worth reading. Dimming both would turn "here is what this does" into
 * visual noise at exactly the moment it matters most.
 */
.cfg-row--locked .cfg-row__label{ color:#8a97aa; }
.cfg-row--locked .cfg-row__control{ opacity:.55; }
.cfg-row__locked{
  grid-column:2; justify-self:end;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
  color:#8a5b00; background:#fdf3e0; border:1px solid #d9a441;
  border-radius:999px; padding:1px 9px; margin-top:6px;
  cursor:help;   /* the server's own sentence is in title= */
}
.cfg-row__locked .glyphicon{ font-size:10px; }

/* ── Empty state for the search ────────────────────────────────────────────*/
.cfg-empty{ padding:22px; text-align:center; color:#5f6b7c; font-size:13px; }

/* ── Phones: stack the control under its description ───────────────────────
 * 220px of control beside a wrapped label is unreadable on a narrow screen, and
 * 991 is the app's existing breakpoint.
 */
@media (max-width:991px){
  .cfg-row{ grid-template-columns:1fr; gap:8px; }
  .cfg-row__control{ justify-self:start; text-align:left; max-width:100%; }
  .cfg-row__saved{ grid-column:1; justify-self:start; }
  .cfg-row__locked{ grid-column:1; justify-self:start; margin-top:0; }
}

/* ==========================================================================
 * Document Designer — scoped to #DocumentDesignerDiv.
 *
 * The screen's real flaw was not decoration: the LIVE PREVIEW sat in a column
 * that scrolled away, so the moment you edited the columns or the header fields
 * — the settings whose effect you most need to see — the preview was off-screen.
 * Making it sticky is the change that matters; the cards are what make the long
 * form navigable while it is there.
 * ========================================================================== */
#DocumentDesignerDiv .dd-card{
  background:#fff; border:1px solid #e2e7ef; border-radius:12px;
  box-shadow:0 3px 14px rgba(20,40,80,.05);
  margin-bottom:16px; overflow:hidden;
}
#DocumentDesignerDiv .dd-card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 18px; background:#f7f9fc; border-bottom:1px solid #e6ebf3;
}
#DocumentDesignerDiv .dd-card__head h4,
#DocumentDesignerDiv .dd-card__head h5{
  margin:0; font-size:14px; font-weight:700; color:#0D3B8C;
}
#DocumentDesignerDiv .dd-card__head .dd-hint{ font-size:11.5px; color:#5f6b7c; font-weight:normal; }
#DocumentDesignerDiv .dd-card__body{ padding:16px 18px; }

/* Section heading inside the editor card — separates Columns / Header / Summary
   without spending a whole card on each. */
#DocumentDesignerDiv .dd-section{
  margin:22px 0 10px; padding-top:16px; border-top:1px solid #eef2f7;
}
#DocumentDesignerDiv .dd-section:first-child{ margin-top:0; padding-top:0; border-top:0; }
#DocumentDesignerDiv .dd-section h5{
  margin:0 0 3px; font-size:13px; font-weight:700; color:#22303f;
}
#DocumentDesignerDiv .dd-section .help-block{ margin:0 0 10px; font-size:12px; color:#5f6b7c; }

/* The options block reads as a checklist, not four stray checkboxes. */
#DocumentDesignerDiv .dd-opts{ display:flex; flex-direction:column; gap:9px; }
#DocumentDesignerDiv .dd-opts label{
  display:flex; align-items:center; gap:9px; margin:0;
  font-weight:normal; font-size:13px; color:#22303f; cursor:pointer;
}

/* ── The sticky preview ────────────────────────────────────────────────────
 * top: clears the app's sticky header. Only above 991px — on a phone the two
 * columns stack, and a sticky panel would eat the screen.
 */
@media (min-width:992px){
  #DocumentDesignerDiv .dd-preview{ position:sticky; top:84px; }
  #DocumentDesignerDiv .dd-preview iframe{ height:calc(100vh - 210px); min-height:420px; }
}
#DocumentDesignerDiv .dd-preview iframe{
  width:100%; height:560px; border:0; background:#fff; display:block;
}
#DocumentDesignerDiv .dd-preview .dd-card__body{ padding:0; }

/* Action bar — pinned to the foot of the editor card so Save is reachable from
   anywhere in a long form without scrolling to find it. */
#DocumentDesignerDiv .dd-actions{
  position:sticky; bottom:0; z-index:2;
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px 18px; background:#fff; border-top:1px solid #e6ebf3;
}

/* The two data tables on this screen sit inside cards; drop the doubled border. */
#DocumentDesignerDiv .dd-card__body > .table{ margin-bottom:0; }
#DocumentDesignerDiv .dd-card__body > .table > thead > tr > th{
  border-top:0; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:#5f6b7c; font-weight:700;
}


/* ── E5: Platform access ───────────────────────────────────────────────────────
 * What MaxTheService support has done to THIS business, on the business's own
 * Configuration screen. Renders nothing at all when there is no history, so a
 * shop support has never opened never sees the heading.
 */
.sa-card{
  background:#fff; border:1px solid #e2e7ef; border-radius:12px;
  margin:0 0 18px; overflow:hidden;
}
/* Someone is in this shop's books RIGHT NOW. Amber, and the only state on this
 * screen that gets a coloured edge - a customer should be able to tell at a
 * glance without reading a date. */
.sa-card--live{ border-color:#d9a441; box-shadow:0 0 0 3px #fdf3e0; }

.sa-card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 18px 10px; border-bottom:1px solid #eef2f7;
}
.sa-card__head h4{ margin:0; font-size:14px; font-weight:700; color:#0D3B8C; letter-spacing:.02em; }
.sa-card__n{ font-size:11px; color:#5f6b7c; font-variant-numeric:tabular-nums; }
.sa-card__note{
  margin:0; padding:10px 18px; font-size:12.5px; color:#5f6b7c; background:#f7f9fc;
  border-bottom:1px solid #eef2f7;
}

.sa-list{ list-style:none; margin:0; padding:6px 18px 16px; }
.sa-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid #eef2f7; }
.sa-list > .sa-row:first-child{ border-top:0; }
.sa-main{ flex:1 1 auto; min-width:0; }

.sa-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sa-state{ font-size:13px; font-weight:600; color:#22303f; font-variant-numeric:tabular-nums; }
.sa-state--open{ color:#8a5b00; }
.sa-mode{
  font-size:11px; font-weight:700; letter-spacing:.03em; color:#5a6677;
  background:#eef1f5; border:1px solid #c9d1dd; border-radius:999px; padding:2px 9px;
}
.sa-who{ font-size:12px; color:#5f6b7c; margin-top:3px; overflow-wrap:anywhere; }
.sa-reason{ font-size:12px; color:#8a5b00; font-style:italic; margin-top:4px; overflow-wrap:anywhere; }

/* Controls only on a session that is still open - a finished one is a record,
 * and a button beside it would suggest something is still to be decided. */
.sa-actions{ display:flex; gap:8px; flex:0 0 auto; }

@media (max-width:767px){
  .sa-row{ flex-wrap:wrap; }
  .sa-actions{ width:100%; }
  .sa-actions .btn{ flex:1 1 auto; }
}

/* ── UI-CFG-1: category rail (Shopify / Square settings pattern) ───────────────
 * Rendered only when a screen passes `categories` to renderSettingsForm — every
 * other Configuration screen keeps the single-column list above, unchanged.
 */
.cfg-layout{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start;
}
.cfg-rail{
  position:sticky; top:calc(env(safe-area-inset-top,0px) + 74px);
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border:1px solid #e2e7ef; border-radius:12px; padding:8px;
  box-shadow:0 3px 14px rgba(20,40,80,.05);
}
.cfg-rail__item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:#3D5166;
  border-left:3px solid transparent;
}
.cfg-rail__item:hover{ background:#f3f6fb; color:#0D3B8C; }
.cfg-rail__item:focus-visible{ outline:2px solid #1565C0; outline-offset:1px; }
.cfg-rail__item.is-active{ background:#E3F2FD; color:#0D3B8C; border-left-color:#1565C0; }
.cfg-rail__item.is-empty{ opacity:.45; }
.cfg-rail__meta{ display:flex; align-items:center; gap:6px; font-weight:500; }
.cfg-rail__n{ font-size:11.5px; color:#5f6b7c; font-variant-numeric:tabular-nums; min-width:18px; text-align:right; }
.cfg-rail__hits:not(:empty){
  font-size:11px; font-weight:700; color:#fff; background:#1565C0; border-radius:999px; padding:1px 7px;
}
.cfg-searching .cfg-rail__n{ display:none; }
/* How many settings in this category differ from the default — an amber count, the same colour as the row dot. */
.cfg-rail__changed{
  font-size:10.5px; font-weight:700; color:#8a5b00; background:#fff4e0; border:1px solid #f1d49a;
  border-radius:999px; padding:0 6px; line-height:16px;
}
.cfg-pane{ min-width:0; }
.cfg-pane__title{
  margin:0 0 12px; font-size:18px; font-weight:800; color:#0D1B2A; letter-spacing:-.01em;
}
.cfg-searching .cfg-pane__title{ display:none; }

/* Changed from the default: a small amber dot after the label, and a quiet reset link under the help text. */
.cfg-row__changed{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:#e0a020;
  margin-left:6px; vertical-align:middle; box-shadow:0 0 0 2px #fff4e0;
}
.cfg-row__reset{
  display:inline-block; margin-top:6px; padding:0; border:0; background:none; cursor:pointer;
  font-size:12px; font-weight:600; color:#1565C0; text-decoration:underline; text-underline-offset:2px;
}
.cfg-row__reset:hover{ color:#0D3B8C; }
.cfg-row__reset:disabled{ opacity:.5; cursor:progress; }

/* Tablet: a narrower rail. Phone: the rail becomes a scrollable chip bar above the pane. */
@media (max-width:991px){
  .cfg-layout{ grid-template-columns:190px minmax(0,1fr); gap:16px; }
}
@media (max-width:767px){
  .cfg-layout{ grid-template-columns:1fr; gap:12px; }
  .cfg-rail{
    position:static; flex-direction:row; overflow-x:auto; gap:6px; padding:6px;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  .cfg-rail__item{ width:auto; flex:0 0 auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; }
  .cfg-rail__item.is-active{ border-bottom-color:#1565C0; }
}
/* Right-to-left (Urdu, Arabic): the accent bar and the dot follow the reading direction. */
[dir="rtl"] .cfg-rail__item{ text-align:right; border-left:0; border-right:3px solid transparent; }
[dir="rtl"] .cfg-rail__item.is-active{ border-right-color:#1565C0; }
[dir="rtl"] .cfg-row__changed{ margin-left:0; margin-right:6px; }
@media (max-width:767px){ [dir="rtl"] .cfg-rail__item{ border-right:0; } }

/*
 * SET-GUIDE a11y — muted text meets WCAG 2 AA (4.5:1). #7a889c measured 3.6:1 and #8a97aa 2.96:1 on white (axe
 * color-contrast, serious, on every settings screen). #5f6b7c keeps the slate hue at 5.4:1 on white and 4.8:1 on
 * the palest panel. Only a LOCKED row's label stays dimmer: WCAG exempts the text of a disabled control, and the dim
 * label is how a locked row reads as locked (its help text stays full strength).
 * Bootstrap's .help-block (#737373) passes on white but not on the Tax panel's tint — darkened on that screen only.
 */
#TaxSettingDiv .help-block,
#TaxSettingDiv .text-muted,
#TaxSettingDiv h4 small{ color:#5f6b7c; }   /* Bootstrap #777 on the panel tint: under 4.5:1 */