/* Merchant Administration Portal additions to platform.css (pf-* classes are shared). Append-only per page; logical properties, tokens only, no inline styles. */

/* Unpaged tables (branches, QR codes...): a plain accessible table that scrolls sideways inside its card on narrow screens. */
.mc-table-wrap{ overflow-x:auto; min-width:0; }
.mc-table{ width:100%; border-collapse:collapse; font-size:14px; }
.mc-table th, .mc-table td{ text-align:start; padding:10px 12px; border-block-end:1px solid var(--line); vertical-align:middle; }
.mc-table th{ color:var(--ink-3); font-size:12.5px; font-weight:800; white-space:nowrap; }
.mc-table td .rc-ltr{ unicode-bidi:plaintext; }
.mc-check{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.mc-check input{ margin-block-start:3px; inline-size:18px; block-size:18px; flex:none; }
@media (pointer:coarse){ .mc-check{ min-height:44px; } }

/* QR codes + displays */
.mc-table{ width:100%; }
.mc-table th, .mc-table td{ text-align:start; vertical-align:middle; padding:10px 8px; }
.mc-qr-img{ display:block; width:80px; height:80px; border-radius:8px; background:#fff; border:1px solid var(--line); }
.mc-empty{ text-align:center; color:var(--ink-3); padding-block:30px; }
.mc-check{ display:flex; gap:10px; align-items:center; min-height:44px; }
.mc-code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:28px; letter-spacing:.12em; font-weight:800; }
.mc-url{ overflow-wrap:anywhere; font-size:13px; }
.mc-table .btn{ text-decoration:none; }
@media (max-width:760px){ .pf-table-wrap{ overflow-x:auto; } }

/* Color preview chips are SVG rects whose fill attribute is set from script: the CSP forbids style attributes. */
.mc-color-row{ display:flex; gap:10px; align-items:center; }
.mc-color-row .rc-input{ flex:1; min-width:0; }
.mc-swatch{ inline-size:36px; block-size:36px; flex:none; color:var(--line); }
.mc-swatch rect{ stroke:currentColor; stroke-width:1.5; }

/* Team + Roles */
.mc-assignments{ min-width:0; border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.mc-assignments legend{ font-weight:800; padding:0; margin-block-end:8px; }
.mc-assign{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; margin-block-end:10px; }
.mc-chip{ display:inline-block; padding:3px 9px; border-radius:999px; background:var(--secondary-action-bg); font-size:13px; color:var(--ink-2); margin-block:2px; }
.mr-role{ padding-block:14px; border-block-start:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.mr-role:first-child{ border-block-start:0; }
.mr-role h3{ margin:0 0 4px; }
.mr-role p{ margin:0; }
.mr-perms summary{ cursor:pointer; color:var(--primary-text); font-size:14px; }
.mr-group{ border:0; padding:0; margin:0 0 12px; min-width:0; }
.mr-group h4, .mr-group legend{ font-size:13px; color:var(--ink-3); margin:10px 0 6px; padding:0; text-transform:uppercase; }
.mr-group ul{ margin:0; padding-inline-start:20px; }
.mr-check{ display:flex; gap:10px; align-items:flex-start; padding:4px 0; cursor:pointer; }
@media (max-width:640px){ .mc-assign{ grid-template-columns:1fr; } }
@media (pointer:coarse){ .mr-check{ min-height:44px; align-items:center; } .mr-perms summary{ min-height:44px; display:flex; align-items:center; } }

/* orders + dashboard */
.md-queue-row{ display:grid; grid-template-columns:120px 1fr auto auto; gap:12px; align-items:center; padding-block:10px; border-block-end:1px solid var(--line); }
.md-queue-row:last-child{ border-block-end:0; }
.md-queue-row span:nth-child(2){ overflow-wrap:anywhere; min-width:0; }
.rc-field small{ display:block; margin-block-start:4px; }
@media (max-width:640px){ .md-queue-row{ grid-template-columns:1fr auto; } .md-queue-row .pf-muted{ grid-column:1/-1; } }
.rc-field > .mc-color-row{ font-size:inherit; font-weight:inherit; color:inherit; }

/* Reports: SVG charts are built in script with attributes only (no style attributes under the CSP). */
.mc-chart{ inline-size:100%; block-size:auto; display:block; color:var(--ink-3); }
.mc-chart .mc-bar{ fill:var(--primary); }
.mc-chart .mc-axis{ stroke:var(--line); stroke-width:1; }
.mc-chart text{ fill:currentColor; font-size:11px; font-family:inherit; }
.mc-details{ border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.mc-details summary{ cursor:pointer; font-weight:700; font-size:14px; min-height:28px; }
.mc-details .mc-table-wrap{ max-block-size:320px; overflow:auto; margin-block-start:10px; }
@media (pointer:coarse){ .mc-details summary{ min-height:44px; display:flex; align-items:center; } }

/* Metric tiles on merchant pages: as many equal columns as fit, so 3 or 5 tiles never leave an orphan row. */
.pf-page .pf-metrics{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
#md-live > .pf-section-head{ align-items:center; }

/* Pills and chips never break inside a narrow cell: the responsive table hides lower-priority columns instead. */
.pf-table td .tag, .mc-table td .tag, .mc-chip, .md-queue-row .tag{ white-space:nowrap; }
.mc-table td{ min-inline-size:0; }
.md-queue-row span:nth-child(2){ text-align:start; }

/* DataTables' sort arrow sits in the header's end padding; keep the label clear of it in narrow columns. */
.pf-table thead th.dt-orderable-asc, .pf-table thead th.dt-orderable-desc, .pf-table thead th.dt-ordering-asc, .pf-table thead th.dt-ordering-desc{ padding-inline-end:26px !important; }

/* A notice at the top of a dialog needs air before the content that follows it. */
.pf-dialog .pf-notice{ margin-block-end:16px; }

/* QR print sheet: preview in the dialog, and the only thing that prints. */
.mc-sheet{ --sheet-accent:#5840ef; --sheet-accent-2:#8f7bff; margin:12px auto; max-width:420px; padding:28px 24px; text-align:center; background:#fff; color:#111; border:6px solid var(--sheet-accent); border-radius:20px; }
.mc-sheet-merchant{ margin:0; font-size:26px; font-weight:800; }
.mc-sheet-branch{ margin:4px 0 14px; color:#444; font-size:16px; }
.mc-sheet-caption{ margin:0 0 12px; font-size:20px; font-weight:800; color:var(--sheet-accent); }
.mc-sheet-qr{ display:block; width:100%; max-width:360px; height:auto; margin:0 auto; border:4px solid var(--sheet-accent-2); border-radius:12px; }
.mc-sheet-label{ margin:12px 0 0; font-size:15px; color:#444; }
@media print{
  body *{ visibility:hidden; }
  #mc-print-sheet, #mc-print-sheet *{ visibility:visible; }
  #mc-print-sheet{ position:absolute; inset-block-start:0; inset-inline:0; margin:0 auto; max-width:none; width:16cm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .mc-sheet-qr{ max-width:none; width:12cm; }
}