/* Wave 3 Edge screens; uses global theme variables and logical properties so Arabic RTL and English LTR share one sheet. */
.edge-workspace { width: 100%; direction: inherit; display: flex; flex-direction: column; gap: 1rem; }
.edge-status-card, .edge-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.edge-card + .edge-card { margin-block-start: 0; }
.edge-card h2, .edge-card h3 { margin: 0 0 .5rem; color: var(--text); font-size: 1.1rem; }
.edge-status-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.edge-status-heading h1 { margin: 0; font-size: 1.25rem; color: var(--text); }
.edge-status-heading p, .edge-status-muted, .edge-status-note { color: var(--muted); margin: .35rem 0 0; }
.edge-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.edge-status-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edge-status-grid > div { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.edge-status-grid dt { color: var(--muted); font-size: .8rem; }
.edge-status-grid dd { color: var(--text); font-weight: 700; margin: .25rem 0 0; overflow-wrap: anywhere; }
.edge-status-grid dd.edge-dd-plain { font-weight: 400; line-height: 1.45; }
.edge-status-note { line-height: 1.5; }
.edge-status-reasons { color: var(--muted); margin: .75rem 0 0; padding-inline-start: 1.25rem; }
.edge-status-error { color: var(--danger); font-weight: 600; }
.edge-status-refresh:focus-visible, .edge-tab:focus-visible, .edge-form button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Tabs */
.edge-tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-block-end: 1px solid var(--line); padding-block-end: .5rem; }
.edge-tab { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .9rem; cursor: pointer; font: inherit; }
.edge-tab.is-active { color: var(--text); border-color: var(--brand); font-weight: 700; }
.edge-panel[hidden] { display: none; }

/* Forms */
.edge-form { display: grid; gap: .75rem; margin-block: .75rem; }
.edge-form-inline { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.edge-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .85rem; }
.edge-form input, .edge-form textarea { width: 100%; box-sizing: border-box; background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem; font: inherit; }
.edge-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: start; }
/* A list in a till form stands level with the text boxes beside it. It kept the app-wide 10 px
   padding and normal line height, so on Add a till the Shop list stood 52 px against the name's 44 px
   (walk, 2026-09-24). Only the block padding and the font: the arrow and its room belong to the
   app-wide select rule. */
.edge-form select { padding-block: .5rem; font: inherit; }
.edge-form-result { margin: .25rem 0 0; min-height: 1.25rem; }
.edge-form-success { color: var(--success); font-weight: 600; }
.edge-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Badges and callouts */
.edge-badge { display: inline-block; border-radius: 999px; padding: .15rem .65rem; font-size: .8rem; font-weight: 700; border: 1px solid var(--line); color: var(--text); background: var(--sunken); }
.edge-badge-active, .edge-badge-approved, .edge-badge-mode-active_edge { color: var(--success); }
.edge-badge-paused, .edge-badge-pending, .edge-badge-waiting, .edge-badge-mode-read_only, .edge-badge-mode-standalone { color: var(--brand); }
.edge-badge-blocked, .edge-badge-declined, .edge-badge-mode-locked, .edge-badge-mode-disabled { color: var(--danger); }
.edge-callout { border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); padding: .75rem 1rem; margin-block: .75rem; background: var(--sunken); }
.edge-callout p { margin: .35rem 0 0; color: var(--muted); }
.edge-callout-success { border-inline-start-color: var(--success); }
.edge-callout-warning { border-inline-start-color: var(--danger); }

/* Tables and lists */
.edge-table-wrap { overflow-x: auto; }
.edge-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.edge-table th, .edge-table td { text-align: start; padding: .5rem .6rem; border-block-end: 1px solid var(--line); vertical-align: top; }
.edge-table th { color: var(--muted); font-weight: 600; }
.edge-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.edge-id-list { margin: 0; padding-inline-start: 1rem; }
.edge-request { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-block-start: .75rem; background: var(--sunken); }
.edge-request header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .5rem; }

/* Local users (T044/T061) */
.edge-user-editor td { background: var(--sunken); border-inline-start: 4px solid var(--brand); }
.edge-user-editor .edge-form { margin-block: .25rem; }
.edge-users-table .edge-actions { justify-content: flex-start; }
.edge-users-table .edge-badge { margin-inline-start: .35rem; }

/* POS and returns outcomes */
.edge-pos-outcome { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-block: .5rem; font-weight: 600; }
.edge-pos-outcome-success { color: var(--success); background: var(--surface); }
.edge-pos-outcome-blocked { color: var(--danger); background: var(--surface); }
.edge-return-blocked { flex-basis: 100%; text-align: start; }

@media (max-width: 520px) {
  .edge-status-heading { align-items: stretch; flex-direction: column; }
  .edge-status-grid, .edge-status-grid-3, .edge-form-inline { grid-template-columns: 1fr; }
  .edge-status-refresh, .edge-form button, .edge-tab { width: 100%; }
}
@media (max-width: 900px) { .edge-status-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .edge-workspace * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Branches and enrollment codes (TASK-2026-042) */
.edge-enroll-code-value { font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; margin: 0; user-select: all; }
.edge-badge-open { color: var(--success); }
.edge-badge-used, .edge-badge-expired, .edge-badge-revoked, .edge-badge-retired, .edge-badge-locked { color: var(--muted); }
.edge-badge-provisioned, .edge-badge-paired, .edge-badge-read_only { color: var(--brand); }
.edge-codes-table td:last-child { text-align: end; }

/* ─── Shops and Problems (TASK-2026-046) ─────────────────────────────────────────
   Head office's own console. TASK-2026-191 lane O redrew both pages with the Settings group's `set-` classes (app.css), so what is
   left here is what still has a user: the paste box's row of buttons, the step bar of the till's own page (this_till.js), and the
   account band (below). */
.shops-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The step bar of the till's own page (this_till.js). */
.shops-steps { display: flex; gap: var(--space-1); list-style: none; margin: var(--space-4) 0; padding: 0; }
.shops-steps li { flex: 1; display: grid; gap: var(--space-1); }
.shops-step-bar { height: 3px; border-radius: 2px; background: var(--line); }
.shops-steps li.is-done .shops-step-bar, .shops-steps li.is-now .shops-step-bar { background: var(--brand); }
.shops-step-cap { font-size: .74rem; color: var(--text-muted); }
.shops-steps li.is-now .shops-step-cap { color: var(--brand); font-weight: 600; }

/* Faults: a page with nothing refused. */
.problems-clear { color: var(--success); }

@media (max-width: 520px) {
  .shops-steps .shops-step-cap { display: none; }
}

/* One line on the dashboard when the shops need something (TASK-2026-046). Hidden by the attribute
   alone, so it is never given a display of its own. */
.shops-note {
  display: grid;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--success);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
}
.shops-note[hidden] { display: none; }
.shops-note.is-busy { border-inline-start-color: var(--danger); }
.shops-note-head { font-weight: 600; }
.shops-note-body { color: var(--muted); font-size: 0.9rem; }

/* ─── The till's own strip (TASK-2026-046, milestone 2) ──────────────────────────
   The only thing about this PC a cashier needs daily, where they already are. A banned till is red
   across the whole sales screen and impossible to glance past (answer 43); the others are quiet.
   `[hidden]` is guarded because this declares a display — rule 5, the fifth instance. */
.till-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-block-end: var(--space-3);
  font-size: 0.9rem;
}
.till-strip[hidden] { display: none; }
.till-strip-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; margin-block-start: 6px; }
.till-strip-say { display: grid; gap: 1px; }
.till-strip-say strong { font-weight: 700; }
.till-strip-say span { opacity: 0.92; font-size: 0.85rem; }
.till-strip.is-selling { background: var(--success-tint); color: var(--success); }
.till-strip.is-offline { background: var(--warning-tint); color: var(--warning); }
.till-strip.is-warned  { background: var(--warning-tint); color: var(--warning); }
/* Not a soft tint: head office has stopped this till and a cashier must not discover it mid-basket. */
.till-strip.is-banned { background: var(--danger); color: var(--on-fill); }
.till-strip.is-banned .till-strip-say span { opacity: 1; }

/* --- This till: the page behind the sales screen's one link (TASK-2026-046, milestone 2) ------
   Headed sections divided by a hairline rather than five separate cards, which is the shape the
   owner approved. No lead paragraphs, so the headings and the labels carry the page. */
.till-sect { border-block-start: 1px solid var(--line); padding-block: 1rem 0.25rem; container-type: inline-size; }
.till-sect:first-child { border-block-start: 0; padding-block-start: 0; }
.till-sect[hidden] { display: none; }
/* A row of short facts, not a stack of them: the owner asked about this, because a 10rem floor
   needs 342px before two will sit abreast and a phone has less. Named counts rather than auto-fit,
   for two reasons: there are exactly four facts, so two-by-two and one-row-of-four are the only
   shapes that read as a set (auto-fit picked three and left one orphan on a second row), and this
   app's root font is 14px, so a rem floor is 12% smaller here than the same number of px in the
   drawing. */
.till-facts { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The room the section actually has, not the width of the window: this page sits inside a sidebar
   on a PC and inside nothing on a phone, and the window cannot tell those apart. */
@container (min-width: 34rem) {
  .till-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.till-fact-key { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.2rem; }
.till-fact-value { font-size: 0.95rem; color: var(--text); font-variant-numeric: tabular-nums; }
.till-rows { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.till-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border-block-end: 1px solid var(--line); font-size: 0.9rem; color: var(--text); }
.till-row:last-child { border-block-end: 0; }
.till-row span:last-child { color: var(--muted); }
.till-cap { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); }
/* Rule 5, fourth outage: .edge-form is a grid, so the attribute alone would not hide one. */
.edge-form[hidden] { display: none; }

/* The four jobs that used to live on the old nine-tab page (TASK-2026-046, milestone 6). A row
   somebody tapped, what can be done to it, and the one panel that opens. None of this is toggled
   with the `hidden` attribute — a panel nobody opened is not in the document at all — so rule 5
   has nothing to bite here. */
.till-row[data-open] { cursor: pointer; }
.till-row[data-open]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.till-row.is-open { background: var(--tint); }
.till-rowacts {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg); border-block-end: 1px solid var(--line);
}
.till-rows > .till-rowacts:last-child { border-block-end: 0; }
.till-rowacts .btn { font-size: .8rem; padding: 0.3rem 0.6rem; }
.till-panel {
  display: grid; gap: var(--space-3); margin-block-start: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--sunken);
}
.till-nested { display: grid; gap: var(--space-3); }
/* The one place prose is allowed on this page: not under a heading, but inside an action somebody
   chose — and for two of them it is the only warning they will get. */
.till-lead { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.till-field { display: grid; gap: var(--space-1); font-size: .8rem; font-weight: 600; color: var(--muted); }
.till-field input, .till-field select, .till-field textarea {
  font: inherit; font-weight: 400; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.4rem 0.6rem; width: 100%; box-sizing: border-box;
}
.till-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; text-align: start; }
.till-panel-do { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.till-print { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; word-break: break-all; color: var(--text); }
.till-in { color: var(--success); font-weight: 600; }
.till-out { color: var(--warning); font-weight: 600; }
/* The stepper is the one the Add a till wizard uses, and the site-wide rule drops its captions
   under 520px. A four-step restore is met once, with a PC already dead, and four unnamed bars are
   no use then — so inside a panel the words stay and the row folds in two instead. The measurement
   is the section's own width, because this page sits inside a sidebar on a PC and inside nothing
   on a phone, and the window cannot tell those apart. */
.till-panel .shops-steps { flex-wrap: wrap; margin: 0; }
@container (max-width: 34rem) {
  .till-panel .shops-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .till-panel .shops-steps .shops-step-cap { display: block; }
}

/* --- The account, above the tills (TASK-2026-046, slice 1f) -----------------------------------
   What the plan allows and how long it has. Every number arrives decided, so this only paints. */
.shops-account-band { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); padding: 0.9rem 1rem; margin-block-end: 1rem; }
.shops-account-band.is-over { border-color: var(--danger); }
.shops-account-top { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; margin-block-end: 0.75rem; }
.shops-account-top strong { font-size: 1rem; color: var(--text); }
.shops-account-facts { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shops-account-key { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.2rem; }
.shops-account-value { font-size: 0.95rem; color: var(--text); font-variant-numeric: tabular-nums; }
.shops-account-value.is-over { color: var(--danger); font-weight: 700; }
.shops-paste-form textarea { width: 100%; box-sizing: border-box; background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; direction: ltr; text-align: start; }
/* The room the band actually has, not the width of the window: this page sits inside a sidebar. */
.shops-account-band { container-type: inline-size; }
@container (min-width: 34rem) {
  .shops-account-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}