/* The shared confirmation dialog.
 *
 * `dialogs.js` is loaded by the back office, the POS and the PLATFORM CONSOLE, and its rules
 * lived in `app.css`, which the platform console does not load. So every confirmation there
 * rendered as unstyled block elements appended to the end of the page — no backdrop, no box,
 * full width, at the bottom, below everything else. Including the one asking whether to sign
 * out, and the one reporting that a tenant deletion had removed nothing.
 *
 * A component used by three shells cannot have its appearance in one shell's stylesheet. It is
 * here, and all three load it.
 *
 * `.btn` and `.field` come with it for the same reason: the dialog's buttons and inputs carry
 * those classes, so moving the dialog without them would have produced a correctly positioned
 * box full of unstyled controls — a subtler version of the same bug.
 */

.btn{display:inline-block;background:var(--brand);color:var(--on-brand);border:1px solid transparent;
  padding:12px 18px;font:inherit;font-weight:700;border-radius:var(--radius-md);cursor:pointer}
.btn:hover{filter:brightness(.96)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn.secondary:hover{border-color:var(--brand);color:var(--brand-strong)}
.btn.good{background:var(--success);color:var(--on-success)}
.btn.danger{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}
.field{display:block;width:100%;margin-bottom:var(--sp-2)}
input.field,select.field,textarea.field{background:var(--surface);border:1px solid var(--border);
  color:var(--text);padding:12px 13px;border-radius:var(--radius-md);font:inherit}
input.field:focus,select.field:focus,textarea.field:focus{outline:none;border-color:var(--brand);
  box-shadow:var(--focus-ring)}

.dlg-backdrop{position:fixed;inset:0;z-index:var(--z-dialog);background:rgba(20,33,61,.42);
  display:flex;align-items:center;justify-content:center;padding:18px}
body.dlg-open{overflow:hidden}
.dlg{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  width:min(420px,100%);padding:20px;box-shadow:0 18px 60px rgba(20,33,61,.28)}
/* A dialog about to move money or stock reads differently from one asking a question. */
.dlg.danger{border-color:var(--danger)}
.dlg-title{margin:0 0 10px;font-size:17px}
/* 11.71.0 (console audit): a dialog's title in normal case on every page — the console's own h3 rule (upper case, faded)
   reached it */
.dlg .dlg-title{text-transform:none;letter-spacing:normal;opacity:1;color:var(--text)}
/* 10.89.0: the title with a ✕ beside it — a 44px target, at the inline end. */
.dlg-head{display:flex;align-items:flex-start;gap:var(--sp-2)}
.dlg-head .dlg-title{flex:1;min-width:0;overflow-wrap:anywhere}
.dlg-x{flex:0 0 auto;inline-size:44px;block-size:44px;margin:-10px;margin-inline-start:0;display:inline-grid;place-items:center;
  border:0;border-radius:var(--radius-md);background:none;color:var(--muted);font:inherit;font-size:16px;cursor:pointer}
.dlg-x:is(:hover,:focus-visible){background:var(--panel2);color:var(--text);outline:none;box-shadow:var(--focus-ring)}
.dlg-body{margin:0 0 16px}
.dlg-msg{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.55;white-space:pre-line}
.dlg-field{display:block}
.dlg-label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.dlg-input-row{display:flex;align-items:stretch;gap:8px}
.dlg-input-row .field{flex:1;min-width:0;font-size:17px}
/* The currency or unit sits beside the field rather than inside the label, so what is
   being typed is unambiguous at a glance. */
.dlg-prefix{display:flex;align-items:center;padding:0 11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2);color:var(--muted);font-size:13px;font-weight:600;
  white-space:nowrap}
.dlg-figure{display:flex;justify-content:center;margin:var(--sp-2) 0}
.dlg-figure svg{inline-size:min(220px,60vw);block-size:auto;border-radius:var(--radius-md)}
.dlg-secret{margin:0 0 var(--sp-3);text-align:center;font-family:ui-monospace,monospace;font-size:13px;user-select:all;overflow-wrap:anywhere}
.dlg-rules{margin:var(--sp-2) 0 0;padding-inline-start:var(--sp-6);color:var(--muted);font-size:13px;line-height:1.55}
.dlg-error{margin:8px 0 0;color:var(--danger-text);font-size:13px;min-height:1.2em}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-actions .btn{width:auto;padding:10px 16px;font-size:14px}
.dlg-choices{display:grid;gap:8px;max-block-size:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain}   /* 10.90.0: a long list (who signs) scrolls inside the dialog */
.dlg-choices .btn{width:100%}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}

@media(max-width:520px){
  /* On a phone it comes up from the bottom, where the thumb is. */
  .dlg-backdrop{align-items:flex-end;padding:0}
  .dlg{width:100%;border-radius:16px 16px 0 0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .dlg-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){ .dlg{transition:none} }
/* Two values side by side, for a field two people changed (7.98). Logical properties only, so
   the columns follow the reading direction and the label leads in both languages. */
.dlg-conflict{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 4px}
.dlg-conflict th,.dlg-conflict td{padding:6px 8px;text-align:start;border-block-end:1px solid var(--line);vertical-align:top}
.dlg-conflict tr:first-child th{font-weight:600;color:var(--muted)}
.dlg-conflict td{overflow-wrap:anywhere}

/* 11.66.0: the Passkeys panel (passkeys.js, app.js passkeysPanel, platform.js pPasskeysPanel) — each passkey a row with
   its name and dates, and Remove beside it; the recent sign-ins as a quiet list. */
.pk-list{list-style:none;padding:0;margin:var(--sp-2) 0 var(--sp-3)}
.pk-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-block-end:1px solid var(--line)}
.pk-item .pk-text{min-width:0;overflow-wrap:anywhere}
.pk-item .btn,.pk-item button{width:auto;flex:0 0 auto}
.pk-history{margin:var(--sp-1) 0 0;padding-inline-start:var(--sp-4);font-size:13px;color:var(--text-muted)}
.pk-history li{margin:2px 0}