/* Just2Pay application branding. Existing view modules and status semantics remain authoritative. */
:root{--saj-canvas:#f6f7fb;--saj-surface:#fff;--saj-ink:#152544;--saj-muted:#596a82;--saj-line:#e3e8f0;--saj-brand:#0b1f4d;--saj-selected:#edf2ff;--saj-focus:#1d4ed8;--saj-gold:#e7cfa3;--saj-action:#1d4ed8;--navy:#0b1f4d;--gold:#e7cfa3;--accent:#e7cfa3;--line:#e3e8f0;--muted:#596a82;--saj-radius:14px}
:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #739cf2;outline-offset:3px}html{scroll-padding-block:90px 115px}body{background:var(--saj-canvas)}
#workspace .sidebar{background:var(--saj-brand);border:0;color:#c1cee2;padding:26px 17px}#workspace .sidebar .brand{color:white;align-items:center;margin-bottom:30px}#workspace .brand img{background:white;border-radius:11px;width:43px;height:43px;padding:3px}#workspace .brand span{font-size:1.3125rem;letter-spacing:-.5px}#workspace .brand small{color:#b1c0d9;font-size:0.8125rem;letter-spacing:1px}#workspace .nav-group h2{color:#99accb;font-size:0.8125rem;font-weight:500}#workspace .sidebar .nav{color:#b7c6df;border-radius:9px;min-height:45px;font-size:0.8125rem;font-weight:500}#workspace .sidebar .nav:hover{background:#20375d;color:#fff}#workspace .sidebar .nav.active{background:#263d63;color:#fff;box-shadow:inset 3px 0 var(--saj-gold)}[dir=rtl] #workspace .sidebar .nav.active{box-shadow:inset -3px 0 var(--saj-gold)}#workspace .sidebar .connection{color:#bccbe2;border-color:#354a6e}#workspace .sidebar .connection small{color:#9eb2cf}#workspace .pilot-note{background:#162f55;border:1px solid #33486b;border-radius:10px;color:var(--saj-gold)}#workspace .pilot-note p{color:#c2cce0}#workspace .topbar{background:white}#workspace #content .primary,#modal-body .primary{background:var(--saj-action);border-color:var(--saj-action);color:white}#workspace #content .primary:hover:not(:disabled),#modal-body .primary:hover:not(:disabled){background:#1741b5}#workspace #content .panel{border-radius:14px;box-shadow:none}#workspace #content .panel-head{background:#fff}#workspace .destination-tile{border-radius:12px}#workspace .destination-tile:hover{border-color:#99b1e4;background:#f7f9ff}#workspace #primary-navigation button.active{background:#edf2ff;color:var(--saj-action)}#workspace footer{font-size:0.8125rem;color:#77869c}#workspace :is(.notification-card,.template-card,.metric){border-radius:12px}
#login.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh;background:#fff;color:var(--saj-ink)}#login .login-panel{max-width:none;width:100%;padding:30px 44px 24px;display:flex;flex-direction:column;justify-content:initial;min-width:0;border:0;background:white;order:0}#login .login-top{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:42px}#login .login-workspace-label{font-size:0.8125rem;color:#77859a}#login-language{width:auto;max-width:130px;min-height:40px;border:1px solid var(--saj-line);border-radius:8px;background:white;color:#465975;padding:8px 12px;font:inherit;font-size:0.8125rem}#login .login-form-content{max-width:405px;width:100%;margin:auto;padding:35px 0}#login .login-wordmark{display:flex;align-items:center;gap:11px;width:max-content;margin-bottom:35px;color:var(--saj-brand);text-decoration:none}#login .login-wordmark img{width:47px;height:47px;object-fit:contain;background:#fff;border:1px solid #edf0f6;border-radius:11px;padding:3px}#login .login-wordmark>span{font-size:1.5rem;font-weight:700;letter-spacing:-.7px}#login .login-wordmark small{display:block;font-size:0.8125rem;font-weight:500;letter-spacing:1.8px;color:#7788a2;margin-top:3px}.brand-gold{color:#ae874a}#login .eyebrow{font-size:0.8125rem;letter-spacing:1.4px;color:#9b7a44;font-weight:600}#login h2{font-size:2.125rem;line-height:1.3;letter-spacing:-1px;margin:12px 0 9px;color:var(--saj-brand);font-weight:600}#login #login-description{font-size:0.8125rem;line-height:1.8;color:#6b7b92;margin:0 0 28px}#login .field{margin:0 0 20px;min-width:0}#login .field label{font-size:0.8125rem;font-weight:600;color:#3f536f;margin:0 0 9px;display:block}#login .field input{width:100%;height:48px;min-height:48px;border:1px solid #dce3ee;border-radius:8px;padding:12px 14px;background:white;color:#253c5b;font:inherit;font-size:0.875rem;box-shadow:0 1px 2px #15254403}#login .field input:focus{border-color:#82a2ed}#login .login-password-wrap{position:relative}#login .login-password-wrap input{padding:12px 48px;direction:ltr;text-align:start}#login-password-toggle{position:absolute;inset-inline-end:3px;top:3px;width:42px;height:42px;min-height:42px;border:0;border-radius:6px;display:grid;place-items:center;background:transparent;color:#7e8ca2}#login-password-toggle:hover{background:#f4f6fb}#login-password-toggle svg{width:18px;height:18px}#login .login-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 5px}#login .remember-device{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:#586980;margin:0}#login .remember-device input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--saj-action)}#forgot-password{border:0;background:none;color:var(--saj-action);font-size:0.8125rem;min-height:40px;padding:5px 0;white-space:nowrap}#login .login-remember-note{font-size:0.8125rem;color:#6b7b92;margin:0 0 18px;line-height:1.6}#login .login-submit{width:100%;min-height:47px;border:1px solid var(--saj-action);border-radius:8px;background:var(--saj-action);color:white;font-size:0.8125rem;font-weight:600;padding:12px 16px}#login .login-submit:hover:not(:disabled){background:#1741b5}#login .login-submit:disabled{opacity:.65;cursor:wait}#login .login-fallback{margin-top:19px;font-size:0.8125rem;color:#6b7b92;line-height:1.8;border-top:1px solid #edf0f5;padding-top:8px}#login .login-fallback summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:9px}#login .login-fallback summary:before{content:'+';font-size:1rem;color:#7890b2}#login .login-fallback[open] summary:before{content:'−'}#login .login-fallback p{font-size:0.8125rem;line-height:1.8;margin:8px 0}#login .secondary{background:white;color:var(--saj-brand);border:1px solid var(--saj-line);border-radius:8px;min-height:42px;font-size:0.8125rem;padding:9px 14px;width:100%}#login #install-app-login{margin-top:12px}#login .safe-note{color:#6b7b92;font-size:0.8125rem;line-height:1.7;margin-top:13px}#login .login-bottom{display:flex;justify-content:space-between;gap:12px;color:#8793a5;font-size:0.8125rem;line-height:1.7}#login .login-brand{min-width:0;max-width:none;width:auto;min-height:100dvh;background:var(--saj-brand);color:white;padding:35px 42px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;order:1}#login .login-brand:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse,#000,transparent 70%);pointer-events:none}#login .login-brand>*{position:relative;z-index:1}#login .login-brand-top,#login .login-brand-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:0.8125rem;color:#8fa4c8}#login .login-brand-top span:first-child{color:var(--saj-gold);font-size:1rem;font-weight:600}#login .login-brand-center{max-width:430px;text-align:center;margin:50px auto;width:100%}#login .login-logo-orbit{position:relative;margin:0 auto 45px;width:160px;height:160px;border:1px solid #e7cfa316;border-radius:50%;box-shadow:0 0 0 32px #ffffff03,0 0 0 65px #ffffff02;display:grid;place-items:center}#login .login-logo-orbit img{width:100px;height:100px;object-fit:contain;border-radius:23px;background:#fff;padding:7px;box-shadow:0 0 40px #e7cfa30c;margin:0}#login .login-product{font-size:2.4375rem;font-weight:600;letter-spacing:-1.4px;color:#fff;margin:0 0 15px;line-height:1.2}#login .login-product span{color:var(--saj-gold)}#login .login-brand h1{font-size:1.4375rem;line-height:1.5;font-weight:500;letter-spacing:-.4px;color:white;margin:0 0 14px}#login .login-brand .lead{font-size:0.8125rem;line-height:1.9;max-width:310px;color:#a5b6d1;margin:0 auto}#login .brand-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:17px;margin-top:30px;font-size:0.8125rem;color:#b7c6e1}#login .brand-note span{color:#b7c6e1}#login .brand-note span:before{content:'✓';color:var(--saj-gold);margin-inline-end:5px}[dir=rtl] #login h2,[dir=rtl] #login .login-brand h1{letter-spacing:0}[dir=rtl] #login .eyebrow{letter-spacing:0}#login #login-email{direction:ltr;text-align:start}
@media(max-width:1000px){#login .login-panel{padding:25px}#login .login-brand{padding:30px}#login .login-brand h1{font-size:1.3125rem}}
@media(max-width:760px){#login.login{display:flex;flex-direction:column;min-height:100dvh}#login .login-brand{display:none}#login .login-panel{padding:20px 24px;min-height:100dvh;width:100%;margin:0;max-width:none}#login .login-form-content{padding:30px 0;max-width:420px}#login .login-wordmark{margin-bottom:28px}#login h2{font-size:1.9375rem}#login #login-description{font-size:0.8125rem;margin-bottom:25px}#login .field input{font-size:1rem}#login .login-bottom{flex-wrap:wrap;font-size:0.8125rem}#login .remember-device{font-size:0.8125rem}#forgot-password{font-size:0.8125rem}#login .login-options{gap:8px}.keyboard-open #login .login-bottom{display:none}#workspace .topbar{row-gap:10px}#workspace #content .actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media(prefers-contrast:more){#login .field input{border-color:#73839d}#login .login-workspace-label,#login .login-bottom{color:#52647e}}
#login .login-panel{border-radius:0;box-shadow:none;margin:0}
.saj-country-flag{object-fit:cover;border-radius:3px;vertical-align:middle;box-shadow:0 0 0 1px #0b1f4d12}.saj-status-badge{font-size:0.8125rem;padding:5px 9px;border-radius:6px;display:inline-block}.saj-status-neutral{background:#eef1f7;color:#53657d}.saj-status-success{background:#eaf7f0;color:#14684f}.saj-status-warning{background:#fff6e4;color:#76500e}.saj-status-danger{background:#fff0f1;color:#a32e3d}.saj-status-info{background:#edf2ff;color:#264dad}.saj-inline-alert{border:1px solid currentColor;border-radius:10px;padding:15px 18px;line-height:1.7}.saj-inline-alert p{margin:5px 0 0}.saj-metric-card{background:white;border:1px solid var(--saj-line);border-radius:12px;padding:20px}.saj-metric-card h3{font-size:0.8125rem;color:var(--saj-muted)}.saj-metric-value{font-size:1.75rem;font-weight:600;margin:12px 0}.saj-metric-value small{font-size:0.8125rem;font-weight:400}.saj-metric-card dl{font-size:0.8125rem;color:var(--saj-muted)}.saj-metric-card dl div{display:flex;gap:8px}.saj-metric-card dt{font-weight:500}.saj-metric-card dd{margin:0}
/* Retain the live product name in both languages; SAJ-IQ stays an internal identifier. */
#workspace .brand span{font-size:1rem;letter-spacing:-.3px;min-width:0}#login .login-wordmark>span{font-size:1.375rem}#login .login-product{font-size:2.125rem}

@media(max-width:760px){#login #login-language{font-size:1rem;min-height:44px}#login .remember-device{min-height:44px}#login #forgot-password{min-height:44px}}

/* Visible language choices; the existing internal controls retain their guards. */
.language-bar{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;direction:ltr}
.language-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:70px;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--saj-brand);font:inherit;font-size:0.875rem;font-weight:750;line-height:1.2;white-space:nowrap}
.language-button img{width:24px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #172d4c14,0 1px 3px #172d4c26;flex:0 0 24px}
.language-button:hover{background:#f3f6fc}.language-button[aria-pressed=true]{background:#eaf0ff;color:var(--saj-action,#2452d6)}
#login .login-top{flex-wrap:wrap;gap:10px}#login .login-workspace-label{flex:1;min-width:80px}
#workspace .topbar{height:auto}
@media(max-width:520px){.workspace-language-bar{grid-column:1/-1;grid-row:2;justify-self:start}.topbar #connection-selector{grid-row:3}.language-button{min-width:64px;padding:10px;font-size:0.875rem}}

/* Dark brand artwork is shown directly on the navy sign-in surface. */
#login .login-logo-orbit img{background:transparent;padding:0}
#workspace .sidebar .brand img{background:transparent;padding:0}

/* Shared bilingual typography. Relative sizes respect browser text preferences. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/staff/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-weight:100 900;font-display:swap;src:url('/staff/assets/fonts/noto-sans-arabic-arabic-wght-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
:root{--saj-reading-line:1.6;--saj-heading-line:1.4;--saj-text-xs:.8125rem;--saj-text-sm:.875rem;--saj-text-md:1rem;--saj-text-lg:1.125rem;--saj-muted:#53627a}
html{font-size:100%}html[lang=ar]{--saj-reading-line:1.75;--saj-heading-line:1.65}
body{font-family:var(--saj-font);font-size:1rem;line-height:var(--saj-reading-line)}
body :is(button,input,select,textarea){font-family:var(--saj-font)}
#workspace #content,#modal-body{font-size:1rem;line-height:var(--saj-reading-line)}
#workspace #content h1{font-size:1.75rem;font-weight:700;line-height:var(--saj-heading-line)}
#workspace #content h2,#modal .dialog-head h2{font-size:1.25rem;font-weight:600;line-height:var(--saj-heading-line)}
#workspace #content h3,#modal-body h3{font-size:1.125rem;font-weight:600;line-height:var(--saj-heading-line)}
#workspace #content p,#modal-body p,#workspace #content :is(.preview,.bubble p,.template-card p,.notice),#modal-body :is(.preview,.notice){font-size:1rem;line-height:var(--saj-reading-line)}
#workspace #content :is(label,legend),#modal-body :is(label,legend),#login label{font-size:.875rem;font-weight:500;line-height:var(--saj-reading-line);color:var(--saj-muted)}
#workspace #content :is(input,select,textarea),#modal-body :is(input,select,textarea),#login :is(input,select,textarea){font-size:1rem;line-height:1.5}
#workspace #content :is(button,.primary,.secondary,.danger),#modal-body :is(button,.primary,.secondary,.danger),#login button,.account-popover button{font-size:.9375rem;font-weight:500;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
#workspace #content :is(small,.small,.quiet,.badge,.languages,.preview-title,.bubble small),#modal-body :is(small,.small,.quiet,.badge),#login :is(small,.login-footnote){font-size:.8125rem;line-height:var(--saj-reading-line)}
#workspace #content :is(table,th,td),#modal-body :is(table,th,td){font-size:.875rem;line-height:var(--saj-reading-line)}
#workspace #content td p,#modal-body td p{font-size:.875rem}
#workspace #content :is(.stat-label,.saj-metric-card h3){font-size:.875rem;font-weight:500}
#workspace #content :is(.stat strong,.saj-metric-value){font-size:2rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
#workspace #content :is(.destination-tile strong,.contact-row strong){font-size:1rem;font-weight:600}
#workspace #content .contact-row p{font-size:.875rem;line-height:var(--saj-reading-line)}
#workspace #content .field,#modal-body .field{margin-bottom:1.25rem}
#workspace #content .form-grid,#modal-body .form-grid{gap:1.25rem}
#workspace #content :is(.panel-head,.page-heading){gap:1rem}
#workspace #content .panel-head h2{font-size:1.25rem}
#workspace .sidebar .nav,#workspace #shell-context button,#workspace .section-picker select{font-size:.9375rem;font-weight:500;line-height:1.5}
#workspace #shell-scope,#workspace .section-label,#workspace .section-picker>span{font-size:.8125rem;line-height:var(--saj-reading-line)}
#workspace #page-crumb{font-size:1rem;line-height:1.5}
#workspace .topbar #connection-select{font-size:.875rem;line-height:1.5}
#workspace .topbar{height:auto;min-width:0}#workspace .topbar-title{min-width:0;flex:1 1 auto}#workspace .topbar .account{min-width:0;flex:0 1 auto}
#workspace .language-button,#login .language-button{font-size:.9375rem;font-weight:700}
#login h2{font-size:1.75rem;line-height:var(--saj-heading-line)}
#login :is(#login-description,.login-brand .lead){font-size:1rem;line-height:var(--saj-reading-line)}
#login .login-brand h1{font-size:1.75rem;line-height:var(--saj-heading-line)}
#login :is(.login-workspace-label,.eyebrow,.brand-note,.login-brand-bottom){font-size:.8125rem;line-height:var(--saj-reading-line)}
#toast,#app-update{font-size:.9375rem;line-height:var(--saj-reading-line)}
#toast{max-width:calc(100vw - 2rem);overflow-wrap:anywhere}
[dir=rtl] :is(h1,h2,h3,h4,.eyebrow,.section-label,.nav-group h2){letter-spacing:normal}
@media(max-width:1000px){#primary-navigation button{font-size:.8125rem;font-weight:500;line-height:1.4;min-height:4.25rem}#primary-navigation span{white-space:normal;overflow-wrap:normal;hyphens:auto}#primary-navigation{align-items:stretch}#workspace .sidebar .nav{font-size:.9375rem}}
@media(max-width:600px){#workspace #content h1,#login h2{font-size:1.5rem}#workspace #content .panel-head{padding:1rem}#login .login-top{align-items:center}#login .login-workspace-label{flex:1 1 5rem}#workspace #content .actions{flex-wrap:wrap}}
/* Give longer English labels room without shrinking the narrow-phone text. */
@media(max-width:380px){html[lang=en] #primary-navigation{grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1.15fr) minmax(0,.8fr);inset-inline:6px;gap:2px;padding:5px}}
/* Enlarged text may wrap inside navigation cells; never crop a destination. */
@media(max-width:1000px){#primary-navigation span{overflow-wrap:anywhere}#workspace #content{padding-bottom:calc(9rem + env(safe-area-inset-bottom))}}
#login .field input{font-size:1rem;height:auto;min-height:3rem}
#login .field label,#login .remember-device{font-size:.875rem;font-weight:500;line-height:var(--saj-reading-line)}
#login #login-description{font-size:1rem;line-height:var(--saj-reading-line);color:var(--saj-muted)}
#login :is(.login-bottom,.login-remember-note,.safe-note){color:var(--saj-muted)}