/* ==========================================================================
   Payinfy consoles (pf-console.css) · 21 Oct 2026
   The payinfy.com look for console.payinfy.com: the sign-in pages, the merchant and PSP consoles and the back office.
   Loaded only with BRAND_CONSOLE_THEME=payinfy (App\Support\Whitelabel\ConsoleTheme), right after the payminati
   scaffold (../pm/pm-console.css), which supplies the structure. Every value is a token of
   design-system/payinfy-option2/pages/app.md (MASTER: ~/payinfy-site/design-system/payinfy-option2/MASTER.md).
   Every rule is scoped to body.pf-console (the field's rules to its own .pf-field markup, which only this theme prints),
   so the Payminati and Payee Global consoles never match one.

   Three layers:
   1. tokens: MASTER's palette as --pf-*, and the scaffold's --pm-* tokens remapped to them, so every scaffold rule
      draws Payinfy without a rule of its own;
   2. deltas where a token is not enough: raised panels with a hairline and shadow-1, --surface-2 menus with a cobalt
      mark, cobalt focus, --danger errors, proportional figures, no sheen;
   3. the field ("Guilloche"): the mark's rings and a cobalt light, fixed at z-index -1.
   All colour literals live in the token block.
   ========================================================================== */

@font-face{ font-family:'Mona Sans Variable'; src:url('fonts/mona-sans-latin-wdth-normal.woff2') format('woff2-variations'); font-weight:200 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'JetBrains Mono Variable'; src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- 1. tokens ---------- */
body.pm-console.pf-console{
  /* MASTER palette, namespaced (pg-app.css owns --ink, --line, --acc ...) */
  --pf-surface:#F4F7FC; --pf-surface-2:#EAF0FA; --pf-raised:#FFFFFF; --pf-ink:#0A1630; --pf-ink-2:#33425E; --pf-ink-3:#56657F;
  --pf-line:#D6DFEE; --pf-line-strong:#7C8DAD; --pf-accent:#1D4ED8; --pf-accent-press:#1A44BD; --pf-accent-brand:#3D7BFF; --pf-on-accent:#FFFFFF;
  --pf-ok:#0E7A4F; --pf-warn:#8A5A00; --pf-danger:#9F1D2B; --pf-focus:#3D7BFF; --pf-accent-rgb:29,78,216;
  --pf-pool:radial-gradient(closest-side, color-mix(in srgb, var(--pf-accent-brand) 22%, transparent), transparent);
  --pf-shadow-1:0 1px 2px rgba(10, 22, 48, 0.06), 0 12px 24px -16px rgba(10, 22, 48, 0.22);
  --pf-shadow-cta:0 12px 24px -12px rgba(29, 78, 216, 0.55);
  --pf-s11:192px; --pf-d-reveal:560ms; --pf-ease-out:cubic-bezier(0.16, 1, 0.3, 1); --pf-z:-1;
  /* the scaffold's palette -> Payinfy (app.md "Palette jobs in the app") */
  --pm-void:var(--pf-surface); --pm-panel:var(--pf-raised); --pm-panel-hover:var(--pf-surface-2); --pm-tile:var(--pf-raised);
  --pm-ink:var(--pf-ink); --pm-ink-body:var(--pf-ink-2); --pm-ink-muted:var(--pf-ink-3); --pm-ink-hint:var(--pf-ink-3);
  --pm-line:var(--pf-line); --pm-line-2:var(--pf-line-strong);
  --pm-accent:var(--pf-accent); --pm-accent-hover:var(--pf-accent-press); --pm-on-accent:var(--pf-on-accent);
  --pm-wash:color-mix(in srgb, var(--pf-accent) 6%, transparent); --pm-scrim:color-mix(in srgb, var(--pf-ink) 6%, transparent);
  --pm-veil:color-mix(in srgb, var(--pf-ink) 35%, transparent);
  --pm-glass:color-mix(in srgb, var(--pf-surface) 88%, transparent); --pm-blur:blur(12px); --pm-sheen:none;
  --pm-red:var(--pf-danger); --pm-red-wash:color-mix(in srgb, var(--pf-danger) 10%, transparent); --pm-red-edge:color-mix(in srgb, var(--pf-danger) 35%, transparent);
  --pm-ok:var(--pf-ok); --pm-ok-dot:var(--pf-ok); --pm-ok-wash:color-mix(in srgb, var(--pf-ok) 10%, transparent); --pm-ok-edge:color-mix(in srgb, var(--pf-ok) 35%, transparent);
  --pm-warn:var(--pf-warn); --pm-warn-dot:var(--pf-warn); --pm-warn-wash:color-mix(in srgb, var(--pf-warn) 10%, transparent); --pm-warn-edge:color-mix(in srgb, var(--pf-warn) 35%, transparent);
  --pm-err:var(--pf-danger); --pm-err-dot:var(--pf-danger); --pm-err-wash:var(--pm-red-wash); --pm-err-edge:var(--pm-red-edge);
  --pm-info:var(--pf-ink-2); --pm-info-wash:color-mix(in srgb, var(--pf-accent) 6%, transparent);
  --pm-net-rgb:var(--pf-accent-rgb);   /* the scaffold derives ::selection and --acc-rgb washes from it: cobalt here */
  /* type (app.md "Type in the app") */
  --pm-display:'Mona Sans Variable','Helvetica Neue',Arial,system-ui,sans-serif;
  --pm-body:'Mona Sans Variable','Helvetica Neue',Arial,system-ui,sans-serif;
  --pm-mono:'JetBrains Mono Variable',ui-monospace,'SF Mono',Menlo,monospace;
  --pm-fs-code:clamp(2.75rem, 1.5rem + 5vw, 3.5rem); --pm-fs-kpi:32px; --pm-fs-h1:36px; --pm-fs-page:28px; --pm-fs-h3:20px; --pm-fs-title:16px; --pm-fs-title-sm:14px; --pm-fs-name:14px;
  --pm-fs-body:14px; --pm-fs-nav:14px; --pm-fs-button:14px; --pm-fs-field:14px; --pm-fs-input:16px; --pm-fs-small:14px; --pm-fs-table:14px;
  --pm-fs-label:12px; --pm-track-label:.12em; --pm-track-tight:.06em;
  /* spacing on MASTER's 4px scale (app.md "Spacing and sizes in the app") */
  --pm-s1:4px; --pm-s2:8px; --pm-s3:12px; --pm-s4:16px; --pm-s5:24px; --pm-s6:24px; --pm-s7:32px; --pm-s8:32px; --pm-s10:48px; --pm-s12:48px; --pm-s16:64px;
  --pm-r-panel:16px; --pm-r-tile:12px; --pm-r-pill:999px;
  --pm-touch:44px; --pm-ctl:40px; --pm-cta:48px; --pm-logo-h:32px; --pm-mark:4px; --pm-dot:8px; --pm-sub:40px;
  /* motion (MASTER bands) */
  --pm-ease:var(--pf-ease-out); --pm-t-press:140ms; --pm-t-hover:140ms; --pm-t-drawer:240ms; --pm-t-sheen:240ms; --pm-press:.98;
}
/* the console's own tokens: the scaffold maps the accent family to ink; Payinfy's accent is cobalt */
html body.pg-app.pm-console.pf-console, html body.pf-console .pg-scope{
  --acc:var(--pf-accent); --acc-deep:var(--pf-accent-press); --acc-lite:var(--pf-accent-brand); --acc-rgb:var(--pf-accent-rgb);
  --acc-wash:color-mix(in srgb, var(--pf-accent) 6%, transparent); --focus-ring:0 0 0 1px var(--pf-accent);
  --flash-bg:var(--pf-ink); --scrim:var(--pm-veil);
}

/* ---------- 2. deltas ---------- */
/* type: Mona Sans display widths; numerals proportional (its tabular zero is slashed and reads as code) */
body.pf-console h1, body.pf-console h2, body.pf-console h3, body.pf-console h4, body.pf-console h5, body.pf-console h6{ font-stretch:104%; }
body.pf-console .pg-auth-card h1, body.pm-console.pf-console.pg-gw .gw-title{ font-weight:580; font-stretch:106%; letter-spacing:-.035em; }
body.pf-console .pg-kpi h3, body.pf-console .pg-kpi .pg-kpi-v, body.pg-admin.pf-console .pc-content .card-body > h6.text-muted + h4,
body.pf-console .pgc-kpi-v, body.pf-console .pg-kpi-value, body.pg-live--mantis.pf-console .pc-content .card-body > h4{
  font-weight:520 !important; letter-spacing:-.02em !important; font-variant-numeric:proportional-nums lining-nums !important; }
body.pm-console.pf-console.pg-gw .gw-code{ font-variant-numeric:proportional-nums lining-nums; }
body.pf-console .pgc-cap, body.pf-console .pg-aside-role, body.pf-console .pg-crumb .bc, body.pf-console .table thead th, body.pf-console .pg-eyebrow,
body.pf-console .pg-card-h2, body.pf-console .card .card-header h5, body.pf-console .card .card-title{ font-weight:500 !important; }

/* focus: MASTER's ring (2px --focus, 3px offset) everywhere; fields add a cobalt border */
body.pg-app.pm-console.pf-console :focus-visible, body.pg-app.pm-console.pf-console .pg-on-maroon:focus-visible,
body.pg-app.pm-console.pf-console .pg-on-maroon :focus-visible, body.pg-app.pm-console.pf-console .pc-sidebar :focus-visible{ outline-color:var(--pf-focus) !important; }
body.pf-console .pgc-toggle:focus-visible ~ .pgc-top .pgc-burger{ outline-color:var(--pf-focus); }
body.pf-console .pg-input:focus, body.pf-console .pg-auth-card .pg-input:focus, body.pf-console .form-control:focus, body.pf-console .form-select:focus,
body.pf-console .select2-container--focus .select2-selection, body.pf-console .select2-container--open .select2-selection{
  border-color:var(--pf-accent) !important; box-shadow:0 0 0 1px var(--pf-accent) !important; }
body.pf-console .form-check-input:checked{ background-color:var(--pf-accent) !important; border-color:var(--pf-accent) !important; }

/* menus: --surface-2 panels; hover a 6% cobalt wash; active a raised tile with the cobalt mark (--accent-brand) */
body.pf-console .pgc-side, body.pf-console .pg-auth-aside, body.pg-admin.pf-console .pc-sidebar, body.pg-admin.pf-console .pc-sidebar .navbar-wrapper{ background:var(--pf-surface-2); }
body.pf-console .pgc-link:hover, body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item:hover > .pc-link,
body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item > .pc-link:focus-visible, body.pf-console .pgc-sublink:hover,
body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:hover > .pc-link, body.pf-console .pgc-group[open] > .pgc-link.is-active:hover{ background:var(--pm-wash); }
body.pf-console .pgc-link.is-active::before, body.pf-console .pg-aside-menu .mi.is-active::before, body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before,
body.pf-console .pgc-sublink.is-active::before, body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link::before{ background:var(--pf-accent-brand); }
body.pf-console .pgc-link.is-active .pgc-ic, body.pf-console .pg-aside-menu .mi.is-active svg, body.pg-admin.pf-console .pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon{ color:var(--pf-accent); }
body.pf-console .pf-logo{ border-radius:0; }

/* panels: raised white on the ground, a hairline and shadow-1 (MASTER "Depth"); nested panels flat */
body.pf-console .card, body.pf-console .pg-card, body.pf-console .pg-auth-card, body.pf-console .card.pg-kpi,
body.pg-admin.pf-console .pc-content .card:has(> .card-body > h6.text-muted + h4), body.pg-live--mantis.pf-console .pc-content .card:has(> .card-body > h6.text-muted + h4),
body.pm-console.pf-console.pg-gw .gw-card{
  background:var(--pf-raised) !important; border:1px solid var(--pf-line) !important; box-shadow:var(--pf-shadow-1) !important; }
body.pf-console .card .card, body.pf-console .card .pg-card{ box-shadow:inset 0 0 0 1px var(--pf-line) !important; border:0 !important; }
/* the back-office dashboard's KPI rows set .card.samerow{height:80%} inline, which clips "Total Count" under the card's
   edge; here a row stays equal-height (the stretched column) and no card is shorter than its content */
body.pf-console .card.samerow{ height:calc(100% - var(--pm-s4)); }
body.pf-console .card:hover{ box-shadow:var(--pf-shadow-1) !important; }
body.pf-console .table thead th, body.pf-console .table > thead > tr > th, body.pf-console .table-light th{ background:var(--pf-surface-2) !important; }
body.pf-console .modal-content{ box-shadow:var(--pf-shadow-1) !important; border-color:var(--pf-line) !important; }
body.pf-console .modal-backdrop.show{ background:var(--pf-ink); opacity:.35 !important; }   /* pg-app.css forces .26 */
body.pf-console .pgc-dd-menu, body.pf-console .dropdown-menu{ box-shadow:var(--pf-shadow-1) !important; }

/* buttons: the primary darkens and gains --shadow-cta on hover; ghosts take a cobalt border */
@media (hover:hover) and (pointer:fine){
  body.pf-console .btn-primary:hover, body.pf-console .pg-btn-primary:hover{ box-shadow:var(--pf-shadow-cta) !important; }
  body.pf-console .btn-secondary:hover, body.pf-console .btn-light:hover, body.pf-console .btn-outline-primary:hover, body.pf-console .btn-outline-secondary:hover,
  body.pf-console .pg-btn-secondary:hover, body.pf-console .pg-btn-sm:hover, body.pf-console .pg-iconbtn:hover, body.pg-admin.pf-console .pc-header .pc-head-link.pg-iconbtn:hover,
  body.pg-admin.pf-console .pc-header .pc-head-link.pg-head-pill:hover{ border-color:var(--pf-accent) !important; }
}
body.pf-console .btn-primary::after, body.pf-console .pg-btn-primary::after{ content:none; }

/* links, status and selection: cobalt where the scaffold used ink */
body.pf-console .text-primary{ color:var(--pf-accent) !important; }
body.pf-console .page-item.active .page-link, body.pf-console .nav-pills .nav-link.active{ background:var(--pf-accent) !important; border-color:var(--pf-accent) !important; color:var(--pf-on-accent) !important; }
body.pf-console .nav-tabs .nav-link.active{ border-color:var(--pf-accent) !important; }
body.pf-console .progress-bar, body.pf-console .bg-primary{ background-color:var(--pf-accent) !important; }
body.pf-console .border-primary{ border-color:var(--pf-accent) !important; }
body.pf-console .pgc-badge, body.pg-admin.pf-console .pc-header .badge{ background:var(--pf-accent) !important; }
body.pf-console .pg-safe li svg{ color:var(--pf-accent); }

/* errors: --danger text (7.8:1 on white), so the scaffold's ink-plus-dot workaround is not needed */
body.pf-console .pg-help.pg-err, body.pf-console .invalid-feedback, body.pf-console label.error, body.pf-console span.error, body.pf-console .text-danger.pg-err,
body.pf-console .text-danger, body.pf-console .pg-alert.is-err, body.pf-console .alert-danger, body.pf-console .badge.bg-danger, body.pf-console .badge.bg-soft-danger,
body.pf-console .badge.badge-danger, body.pf-console .badge.badge-light-danger, body.pf-console .badge.bg-light-danger, body.pf-console .pg-pill.is-err{ color:var(--pf-danger) !important; }
body.pf-console .pg-help.pg-err::before, body.pf-console .invalid-feedback::before, body.pf-console label.error::before, body.pf-console span.error::before{ content:none; }

@media (prefers-reduced-motion:reduce){
  body.pf-console .card, body.pf-console .btn{ transition:none !important; }
}

/* ---------- 3. the field ---------- */
/* ---------- the field: "Guilloche" (design-system/payinfy-option2/pages/app.md, "The background field") ----------
   Ground --pf-surface; the light (MASTER's --pool) under a --pf-surface stencil with the 26 rings of the mark cut out as 1px holes,
   then the same rings at --accent 6%. Only .pf-orbit moves: pf-field.js writes its transform twice a second along the
   infinity path. Without the script, and under reduced motion, it rests at the still frame below (phase .405 of the loop). */
.pf-field{ position:fixed; inset:0; z-index:var(--pf-z); pointer-events:none; overflow:hidden; contain:strict; background:var(--pf-surface);
  --pf-u:max(100vw / 1000, 100vh / 1000); --pf-light:calc(var(--pf-s11) * 3);
  --pf-ax:260; --pf-ay:130; --pf-period:80; --pf-tick:500; --pf-phase:.405; }
@supports (container-type:size){ .pf-field{ container-type:size; } .pf-stage{ --pf-u:max(100cqw / 1000, 100cqh / 1000); } }
@media (max-width:640px){ .pf-field{ --pf-light:calc(var(--pf-s11) * 2); } }
.pf-stage{ position:absolute; left:50%; top:50%; width:calc(1000 * var(--pf-u)); height:calc(1000 * var(--pf-u)); transform:translate(-50%, -50%); }
.pf-orbit{ position:absolute; left:82%; top:34%; width:0; height:0; will-change:transform; transform:translate(calc(147 * var(--pf-u)), calc(-121 * var(--pf-u))); }
.pf-light{ position:absolute; display:block; width:var(--pf-light); height:var(--pf-light); left:calc(var(--pf-light) / -2); top:calc(var(--pf-light) / -2);
  border-radius:50%; background:var(--pf-pool); opacity:0; animation:pf-in var(--pf-d-reveal) var(--pf-ease-out) forwards; }
.pf-engrave{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.pf-engrave .pf-sheet{ fill:var(--pf-surface); }
.pf-engrave .pf-lines{ stroke:var(--pf-accent); stroke-opacity:.06; }
@keyframes pf-in{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pf-light{ animation:none; opacity:1; } }
@media print{ .pf-field{ display:none; } }