/* ============================================================================
AJMONEY — Bold Brand theme (v2) · build-free, plain CSS
----------------------------------------------------------------------------
Everything is scoped under `.aj-v2`, set on for every panel
(retailer / distributor / SD / admin).
Pure re-skin: no markup structure, routes, JS hooks or flows depend on this.
Load AFTER the compiled Tailwind bundle so these rules win.
============================================================================ */
.aj-v2{
--aj-blue-50:#eff6fc;--aj-blue-100:#dceaf5;--aj-blue-200:#b9d5eb;--aj-blue-300:#8db9dd;
--aj-blue-400:#5e99cc;--aj-blue-500:#387BBD;--aj-blue-600:#2d62a0;--aj-blue-700:#264f82;
--aj-blue-900:#16253d;
--aj-orange-50:#fff8eb;--aj-orange-300:#ffbe4a;--aj-orange-400:#ffa920;
--aj-orange-500:#F59507;--aj-orange-600:#d97002;--aj-orange-700:#b44d06;
--aj-surface:#ffffff;--aj-surface-2:#f4f9ff;--aj-surface-3:#e8f1fc;
--aj-border:#e1e9f4;--aj-border-strong:#ccdaec;
--aj-ink:#101d30;--aj-muted:#566780;--aj-faint:#8493a7;
--aj-success:#15a34a;--aj-success-bg:#e6f7ee;
--aj-danger:#dc2626;--aj-warn:#d97706;--aj-warn-bg:#fef3e2;--aj-info:#2563eb;
--aj-shadow-sm:0 1px 2px rgba(16,28,46,.06),0 1px 3px rgba(16,28,46,.07);
--aj-shadow-md:0 6px 18px rgba(16,28,46,.09),0 2px 6px rgba(16,28,46,.05);
--aj-blue-glow:0 10px 26px rgba(45,98,160,.24);
--aj-orange-glow:0 8px 22px rgba(245,149,7,.30);
--aj-hero:linear-gradient(118deg,#16253d 0%,#264f82 46%,#2f6bab 100%);
--aj-hero-orange:linear-gradient(118deg,#b44d06 0%,#d97002 55%,#f5a623 100%);
--aj-radius:14px;--aj-radius-lg:20px;--aj-pill:999px;
}
/* ---- vibrant light page wash --------------------------------------------- */
body.aj-v2{
background:
radial-gradient(1100px 520px at 6% -10%, rgba(56,123,189,.15), transparent 60%),
radial-gradient(1000px 500px at 100% -6%, rgba(245,149,7,.13), transparent 58%),
radial-gradient(900px 900px at 96% 110%, rgba(56,123,189,.09), transparent 60%),
#eaf1fb;
background-attachment:fixed;
}
/* ---- shell: top header --------------------------------------------------- */
.aj-v2 header.sticky{
box-shadow:0 4px 20px rgba(16,28,46,.06);
border-bottom:1px solid var(--aj-border);
}
/* ---- shell: horizontal menu -> gradient bar with pill tabs --------------- */
.aj-v2 .menu-nav{
background:var(--aj-hero-orange);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.aj-v2 .menu-nav nav{gap:.35rem;padding-top:.4rem;padding-bottom:.4rem;}
.aj-v2 .menu-item{
flex-direction:row; /* icon LEFT of label, not stacked on top */
align-items:center;
gap:7px;
font-weight:700;
font-size:13px;
border-radius:var(--aj-pill); /* full pill — both corners rounded */
padding:.5rem .95rem;
color:rgba(255,255,255,.94);
transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.aj-v2 .menu-item .menu-icon{width:16px;height:16px;}
.aj-v2 .menu-item::after{display:none;} /* drop the old underline marker */
.aj-v2 .menu-item:hover{background:rgba(255,255,255,.2);color:#fff;}
.aj-v2 .menu-item.active,
.aj-v2 .menu-dropdown:hover .menu-item{
background:#fff;color:var(--aj-orange-700);box-shadow:0 4px 12px rgba(0,0,0,.14);
}
.aj-v2 .menu-item-activation{background:rgba(255,255,255,.2);}
.aj-v2 .menu-item-activation:hover{background:rgba(255,255,255,.32);}
/* keep JS-positioned submenu behaviour; only refresh its look */
.aj-v2 .submenu{
border-radius:16px;border:1px solid var(--aj-border);
box-shadow:0 18px 44px rgba(16,28,46,.16);
}
/* ---- shell: footer ------------------------------------------------------- */
.aj-v2 footer{border-radius:22px 22px 0 0;}
/* ==========================================================================
Reusable components (namespaced aj-*) — used by the dashboard now and the
rest of the retailer pages in later phases.
========================================================================== */
.aj-hero{
position:relative;overflow:hidden;color:#fff;
background:var(--aj-hero);border-radius:var(--aj-radius-lg);
padding:24px 26px;box-shadow:var(--aj-blue-glow);
display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center;
}
.aj-hero::after{
content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(245,149,7,.34),transparent 62%);
}
.aj-hero>*{position:relative;z-index:1;}
.aj-hero-eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--aj-orange-300);}
.aj-hero-name{font-size:21px;font-weight:800;margin-top:5px;letter-spacing:-.01em;}
.aj-hero-sub{color:rgba(255,255,255,.78);font-size:13px;margin-top:3px;}
.aj-hero-bal-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.72);font-weight:700;}
.aj-hero-bal{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums;}
.aj-hero-bal .cur{font-size:18px;font-weight:700;opacity:.85;margin-right:3px;}
.aj-qa{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.aj-btn{
display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:12px;text-decoration:none;
transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.aj-btn svg{width:17px;height:17px;}
.aj-btn:hover{transform:translateY(-2px);}
.aj-btn-primary{background:var(--aj-orange-500);color:#fff;box-shadow:var(--aj-orange-glow);}
.aj-btn-primary:hover{background:var(--aj-orange-600);}
.aj-btn-blue{background:var(--aj-blue-500);color:#fff;box-shadow:var(--aj-blue-glow);}
.aj-btn-blue:hover{background:var(--aj-blue-600);}
.aj-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);}
.aj-btn-ghost:hover{background:rgba(255,255,255,.24);}
.aj-card{
background:var(--aj-surface);border:1px solid var(--aj-border);
border-radius:var(--aj-radius-lg);box-shadow:var(--aj-shadow-sm);
}
.aj-section-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px;}
.aj-section-head h2{font-size:17px;font-weight:800;color:var(--aj-ink);}
.aj-section-head .aj-link{font-size:13px;font-weight:700;color:var(--aj-blue-600);text-decoration:none;}
/* service tiles */
.aj-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.aj-svc{
position:relative;overflow:hidden;
display:flex;flex-direction:column;gap:12px;text-align:left;text-decoration:none;
background:var(--aj-hero);color:#fff;
border:1px solid rgba(255,255,255,.08);border-radius:var(--aj-radius-lg);padding:18px;
box-shadow:var(--aj-blue-glow);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.aj-svc::after{
content:"";position:absolute;right:-40px;top:-46px;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(245,149,7,.28),transparent 62%);pointer-events:none;
}
.aj-svc>*{position:relative;z-index:1;}
.aj-svc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(22,37,61,.4);border-color:rgba(255,255,255,.22);}
.aj-svc-ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;}
.aj-svc-ic svg{width:26px;height:26px;}
.aj-svc-name{font-size:14.5px;font-weight:800;color:#fff;}
.aj-svc-desc{font-size:12px;color:rgba(255,255,255,.72);line-height:1.45;}
/* header info cards (Avl. balance / bank-down / user details) — hero gradient */
.aj-v2 .aj-hcard{
position:relative;overflow:hidden;
background:var(--aj-hero);
border:1px solid rgba(255,255,255,.10);
border-left:4px solid var(--aj-orange-500);
box-shadow:var(--aj-blue-glow);
}
.aj-v2 .aj-hcard .text-gray-900{color:#fff;}
.aj-v2 .aj-hcard .text-gray-400,
.aj-v2 .aj-hcard .text-gray-500{color:rgba(255,255,255,.72);}
.aj-v2 .aj-hcard .text-green-600{color:#4ade80;}
.aj-v2 .aj-hcard .bg-gray-200{background:rgba(255,255,255,.16);}
/* ==========================================================================
Form inputs — one consistent field style across every retailer page.
Targets the elements directly so existing forms pick it up automatically.
========================================================================== */
.aj-v2 input:not([type]),
.aj-v2 input[type="text"],
.aj-v2 input[type="number"],
.aj-v2 input[type="tel"],
.aj-v2 input[type="email"],
.aj-v2 input[type="password"],
.aj-v2 input[type="search"],
.aj-v2 input[type="url"],
.aj-v2 input[type="date"],
.aj-v2 input[type="datetime-local"],
.aj-v2 input[type="month"],
.aj-v2 input[type="time"],
.aj-v2 textarea,
.aj-v2 select{
border:1px solid var(--aj-border-strong);
background:var(--aj-surface);
color:var(--aj-ink);
border-radius:11px;
padding:11px 13px;
font-size:14px;
font-family:inherit;
transition:border .15s ease,box-shadow .15s ease;
}
.aj-v2 input:not([type])::placeholder,
.aj-v2 input[type="text"]::placeholder,
.aj-v2 input[type="number"]::placeholder,
.aj-v2 input[type="tel"]::placeholder,
.aj-v2 input[type="email"]::placeholder,
.aj-v2 input[type="password"]::placeholder,
.aj-v2 input[type="search"]::placeholder,
.aj-v2 input[type="url"]::placeholder,
.aj-v2 textarea::placeholder{color:var(--aj-faint);}
.aj-v2 input:not([type]):focus,
.aj-v2 input[type="text"]:focus,
.aj-v2 input[type="number"]:focus,
.aj-v2 input[type="tel"]:focus,
.aj-v2 input[type="email"]:focus,
.aj-v2 input[type="password"]:focus,
.aj-v2 input[type="search"]:focus,
.aj-v2 input[type="url"]:focus,
.aj-v2 input[type="date"]:focus,
.aj-v2 input[type="datetime-local"]:focus,
.aj-v2 input[type="month"]:focus,
.aj-v2 input[type="time"]:focus,
.aj-v2 textarea:focus,
.aj-v2 select:focus{
outline:none;
border-color:var(--aj-blue-500);
box-shadow:0 0 0 3px rgba(56,123,189,.16);
}
.aj-v2 input:disabled,
.aj-v2 textarea:disabled,
.aj-v2 select:disabled{background:var(--aj-surface-2);color:var(--aj-muted);cursor:not-allowed;}
/* Inputs that reserve space for an icon (Tailwind pl-*/pr-* utilities) must keep
that padding — the rule above sets a `padding` shorthand that would otherwise
clobber it and text would sit under the icon (login fields, Recharge ₹, etc.). */
.aj-v2 input.pl-8{padding-left:2rem;}
.aj-v2 input.pl-10{padding-left:2.5rem;}
.aj-v2 input.pl-11{padding-left:2.75rem;}
.aj-v2 input.pr-9{padding-right:2.25rem;}
.aj-v2 input.pr-10{padding-right:2.5rem;}
.aj-v2 input.pr-12{padding-right:3rem;}
/* Form field labels — design-preview "Label" type: uppercase, spaced, bold, muted.
Scoped to block-level labels so inline radio/checkbox option labels stay normal. */
.aj-v2 label.block{
font-size:11px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--aj-muted);
}
/* Drop the number-input spinner arrows (up/down) on amount & numeric fields. */
.aj-v2 input[type="number"]::-webkit-outer-spin-button,
.aj-v2 input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.aj-v2 input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
/* dashboard snapshot stat cards */
.aj-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px;}
.aj-stat{
background:linear-gradient(180deg,#fff,var(--aj-surface-2));
border:1px solid var(--aj-border);border-radius:var(--aj-radius-lg);
padding:18px;box-shadow:var(--aj-shadow-sm);position:relative;overflow:hidden;
transition:box-shadow .18s ease,transform .14s ease;
}
.aj-stat:hover{box-shadow:var(--aj-shadow-md);transform:translateY(-3px);}
.aj-stat-top{display:flex;justify-content:space-between;align-items:flex-start;}
.aj-stat-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;}
.aj-stat-ic svg{width:21px;height:21px;stroke-width:1.9;fill:none;}
.aj-stat-l{font-size:12px;color:var(--aj-muted);font-weight:700;margin-top:14px;}
.aj-stat-v{font-size:25px;font-weight:800;margin-top:2px;letter-spacing:-.02em;color:var(--aj-ink);font-variant-numeric:tabular-nums;}
.aj-stat-t{font-size:11.5px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:4px;}
.aj-up{color:var(--aj-success);}
.aj-down{color:var(--aj-danger);}
.aj-muted-t{color:var(--aj-faint);}
/* per-category tint, derived from the icon colour (graceful no-op on old browsers) */
.aj-stat:has(.aj-t-blue){background:linear-gradient(180deg,#fff,#eff6fd);}
.aj-stat:has(.aj-t-green){background:linear-gradient(180deg,#fff,#edf9f2);}
.aj-stat:has(.aj-t-orange){background:linear-gradient(180deg,#fff,#fff6ea);}
.aj-stat:has(.aj-t-violet){background:linear-gradient(180deg,#fff,#f4f0fe);}
/* recent-transactions panel */
.aj-recent{padding:4px 0;overflow:hidden;}
.aj-recent-row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--aj-border);transition:background-color .12s ease;}
.aj-recent-row:last-child{border-bottom:none;}
.aj-recent-row:hover{background:var(--aj-surface-2);}
.aj-recent-main{flex:1;min-width:0;}
.aj-recent-title{font-size:13.5px;font-weight:700;color:var(--aj-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aj-recent-sub{font-size:11.5px;color:var(--aj-faint);margin-top:1px;font-family:ui-monospace,Menlo,monospace;}
.aj-recent-amt{font-size:14px;font-weight:800;color:var(--aj-ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.aj-chip{display:inline-flex;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--aj-surface-3);color:var(--aj-blue-700);white-space:nowrap;flex-shrink:0;}
.aj-recent-empty{padding:30px;text-align:center;color:var(--aj-faint);font-size:13px;}
@media (max-width:560px){
.aj-recent-row{flex-wrap:wrap;gap:8px 12px;}
.aj-recent-main{order:3;flex-basis:100%;}
}
/* service-page inner panels — soften the flat gray sub-cards to the cool tint */
.aj-v2 .bg-gray-50.rounded-xl,
.aj-v2 .bg-gray-50.rounded-2xl{background:var(--aj-surface-2)!important;border:1px solid var(--aj-border);}
.aj-v2 .border-dashed{border-color:var(--aj-border-strong);}
/* Service-page data tables (DMT recipients, settlement, report grids) — swap the
flat brand-blue header for the gradient hero, soften the grid, add row hover. */
.aj-v2 thead tr[style*="387BBD"],
.aj-v2 thead tr[style*="387bbd"]{background:var(--aj-hero)!important;}
.aj-v2 .dmt-rcpt-grid th, .aj-v2 .dmt-rcpt-grid td,
.aj-v2 .report-grid th, .aj-v2 .report-grid td{border-color:#e5edf6!important;}
.aj-v2 .dmt-rcpt-grid th, .aj-v2 .report-grid th{padding-top:12px;padding-bottom:12px;letter-spacing:.03em;}
.aj-v2 .dmt-rcpt-grid td, .aj-v2 .report-grid td{padding-top:11px;padding-bottom:11px;}
.aj-v2 .dmt-rcpt-grid tbody tr:hover,
.aj-v2 .report-grid tbody tr:hover{background:var(--aj-surface-2);}
/* Rebrand off-brand red accent tiles (inline #e3534a, e.g. DMT remitter icons)
to the brand blue so service pages stay on-palette. */
.aj-v2 [style*="e3534a"]{background-color:var(--aj-blue-500)!important;}
/* Service action buttons — subtle hover lift for the pill/rounded buttons. */
.aj-v2 button.rounded-lg:not(:disabled),
.aj-v2 button.rounded-xl:not(:disabled){transition:transform .12s ease, box-shadow .12s ease;}
.aj-v2 button.rounded-lg:not(:disabled):hover,
.aj-v2 button.rounded-xl:not(:disabled):hover{transform:translateY(-1px);}
@media (prefers-reduced-motion:reduce){
.aj-v2 button.rounded-lg,.aj-v2 button.rounded-xl{transition:none;}
.aj-v2 button.rounded-lg:hover,.aj-v2 button.rounded-xl:hover{transform:none;}
}
/* ==========================================================================
Login (guest layout) — approved split-panel design (design-preview.html).
Scoped to .aj-login / .ajl-*; form fields, routes and the forgot-password
modal are untouched.
========================================================================== */
.aj-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
background:radial-gradient(1100px 700px at 15% -10%, #eaf2fd, #dbe8f6);}
.ajl-card{width:100%;max-width:1040px;display:grid;grid-template-columns:1.04fr 1fr;background:#fff;
border-radius:26px;overflow:hidden;box-shadow:0 30px 72px rgba(8,20,40,.28);}
.ajl-brand{background:var(--aj-hero);color:#fff;padding:42px 40px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.ajl-brand::after{content:"";position:absolute;left:-80px;bottom:-80px;width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,rgba(245,149,7,.3),transparent 60%);}
.ajl-brand::before{content:"";position:absolute;inset:0;opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.2px);background-size:22px 22px;
-webkit-mask-image:linear-gradient(160deg,#000 20%,transparent 72%);mask-image:linear-gradient(160deg,#000 20%,transparent 72%);}
.ajl-brand>*{position:relative;z-index:1;}
.ajl-logo{display:flex;align-items:center;gap:11px;}
.ajl-logo-mark{width:44px;height:44px;border-radius:12px;background:var(--aj-hero-orange);display:grid;place-items:center;box-shadow:var(--aj-orange-glow);flex-shrink:0;}
.ajl-logo-mark svg{width:24px;height:24px;stroke:#fff;stroke-width:2.1;fill:none;}
.ajl-logo b{font-weight:800;font-size:18px;letter-spacing:.02em;display:block;line-height:1.1;}
.ajl-logo span{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;}
.ajl-illus{margin:24px 0 6px;display:flex;justify-content:center;}
.ajl-illus svg{width:100%;max-width:330px;height:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.28));}
.ajl-illus .floaty{animation:floaty 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.ajl-illus .floaty2{animation:floaty 5.5s ease-in-out infinite .6s;transform-box:fill-box;transform-origin:center;}
.ajl-title{font-size:29px;font-weight:800;line-height:1.15;margin-top:auto;}
.ajl-sub{color:rgba(255,255,255,.8);font-size:14px;margin-top:12px;max-width:34ch;}
.ajl-feats{display:flex;flex-direction:column;gap:11px;margin-top:22px;}
.ajl-feat{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;}
.ajl-feat .fic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);display:grid;place-items:center;flex-shrink:0;}
.ajl-feat .fic svg{width:17px;height:17px;stroke:#fff;stroke-width:1.8;fill:none;}
.ajl-form{padding:44px 42px;display:flex;flex-direction:column;justify-content:center;gap:16px;}
.ajl-form h2{font-size:25px;font-weight:800;color:var(--aj-ink);}
.ajl-lead{color:var(--aj-muted);font-size:14px;margin-top:4px;}
.ajl-divider{display:flex;align-items:center;gap:12px;color:var(--aj-faint);font-size:12px;font-weight:600;}
.ajl-divider::before,.ajl-divider::after{content:"";flex:1;height:1px;background:var(--aj-border);}
.ajl-secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 18px;
border:1px solid var(--aj-border-strong);border-radius:12px;font-weight:700;font-size:14px;color:var(--aj-ink);
text-decoration:none;transition:background .15s ease, box-shadow .15s ease;}
.ajl-secondary:hover{background:var(--aj-surface-2);box-shadow:var(--aj-shadow-sm);}
.ajl-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--aj-faint);}
.ajl-footer a{color:var(--aj-blue-600);font-weight:700;text-decoration:none;}
.aj-login form button[type="submit"]{background:var(--aj-hero-orange)!important;border:none!important;color:#fff;
box-shadow:0 10px 24px rgba(245,149,7,.35)!important;transition:transform .12s ease, box-shadow .12s ease, background .15s ease;}
.aj-login form button[type="submit"]:hover{background:var(--aj-orange-600)!important;transform:translateY(-2px)!important;}
.aj-login input:focus{border-color:var(--aj-blue-500)!important;box-shadow:0 0 0 3px rgba(56,123,189,.18)!important;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){
.ajl-card{grid-template-columns:1fr;max-width:440px;}
.ajl-brand{display:none;}
.aj-login{padding:16px;}
}
@media (prefers-reduced-motion:reduce){
.ajl-illus .floaty,.ajl-illus .floaty2{animation:none;}
.aj-login form button[type="submit"]{transition:none;}
.aj-login form button[type="submit"]:hover{transform:none!important;}
}
@media (max-width:1040px){ .aj-stats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .aj-stats{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .aj-stat{transition:none;} }
/* colour tints for icons / accents */
.aj-t-blue{background:var(--aj-blue-50);color:var(--aj-blue-600);}
.aj-t-orange{background:var(--aj-orange-50);color:var(--aj-orange-600);}
.aj-t-green{background:#e6f7ee;color:#0d7a37;}
.aj-t-violet{background:#f0ecfe;color:#6d3bd6;}
.aj-t-teal{background:#e3f6f4;color:#0f9488;}
.aj-t-pink{background:#fdeaf2;color:#d1417f;}
.aj-t-indigo{background:#e9ecfd;color:#4257c9;}
/* badges (for later phases / tables) */
.aj-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
padding:4px 11px;border-radius:var(--aj-pill);line-height:1.4;}
.aj-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.aj-badge-ok{background:var(--aj-success-bg);color:#0d7a37;}
.aj-badge-pend{background:var(--aj-warn-bg);color:#a55a05;}
.aj-badge-fail{background:#fdeaea;color:#b21d1d;}
@media (max-width:1040px){ .aj-svc-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .aj-svc-grid{grid-template-columns:repeat(2,1fr);} .aj-hero-bal{font-size:27px;} }
@media (prefers-reduced-motion:reduce){ .aj-btn,.aj-svc{transition:none;} }
/* ==========================================================================
Inner-page polish — lifts every retailer page (reports, wallet, forms,
tables, stat cards) with no markup change. All scoped to .aj-v2, so it
rides on the classes the app already uses.
========================================================================== */
/* Cards (bg-white rounded-xl/2xl card-shadow) — crisper shadow + a hairline
ring so panels read cleanly against the vibrant background. */
.aj-v2 .card-shadow{
box-shadow:0 0 0 1px rgba(24,44,74,.04), 0 2px 4px rgba(16,28,46,.05), 0 14px 28px -14px rgba(16,28,46,.16);
transition:box-shadow .18s ease;
}
.aj-v2 .card-shadow:hover{
box-shadow:0 0 0 1px rgba(24,44,74,.06), 0 10px 30px -10px rgba(16,28,46,.2);
}
/* Stat-card / wallet-display icon bubbles get a touch more presence. */
.aj-v2 .card-shadow .rounded-full svg{filter:saturate(1.05);}
/* Form controls — unify the radius with the new cards (visual only). */
.aj-v2 input:where([type=text],[type=number],[type=email],[type=password],[type=tel],[type=search],[type=date],[type=url]),
.aj-v2 select,
.aj-v2 textarea{ border-radius:11px; }
/* Tables — smooth hover + a hair more spacing on headers. */
.aj-v2 table thead th{ letter-spacing:.03em; }
.aj-v2 table tbody tr{ transition:background-color .12s ease; }
/* Primary submit buttons — subtle lift so actions feel alive. */
.aj-v2 button[type="submit"]{ transition:transform .12s ease, box-shadow .12s ease; }
.aj-v2 button[type="submit"]:hover{ transform:translateY(-1px); }
/* Badges (x-badge: rounded-full pill) — slightly bolder for legibility. */
.aj-v2 .rounded-full.text-xs.font-medium{ font-weight:600; letter-spacing:.01em; }
/* Service / inner page header — icon chip + title, no accent-rail cliché.
Applied by wrapping the existing /
in `.aj-page-head`; the inner
markup and its classes are untouched. */
.aj-v2 .aj-page-head{display:flex;align-items:center;gap:14px;}
.aj-v2 .aj-page-head .aj-ph-ic{
width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;
background:var(--aj-hero);box-shadow:var(--aj-blue-glow);
}
.aj-v2 .aj-page-head .aj-ph-ic svg{width:25px;height:25px;stroke:#fff;stroke-width:1.7;fill:none;}
.aj-v2 .aj-page-head h1{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--aj-ink);}
.aj-v2 .aj-page-head p{color:var(--aj-muted);}
/* ==========================================================================
Report pages — eyebrow header + right action, and the filter bar.
Matches design-preview .pagehead / .eyebrow / .filters.
========================================================================== */
.aj-v2 .aj-eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--aj-orange-600);margin-bottom:6px;}
.aj-v2 .aj-rep-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.aj-v2 .aj-rep-head h1{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--aj-ink);}
.aj-v2 .aj-rep-head p{font-size:13.5px;color:var(--aj-muted);margin-top:3px;}
.aj-v2 .aj-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.aj-v2 .aj-filters .aj-field{min-width:150px;flex:1;display:flex;flex-direction:column;gap:6px;}
.aj-v2 .aj-filters .aj-field label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aj-muted);}
.aj-v2 .aj-filters .aj-actions{display:flex;gap:8px;margin-left:auto;align-items:flex-end;}
.aj-btn-sm{padding:8px 14px;font-size:13px;border-radius:10px;}
/* Dashboard stat cards (x-stat-card) — navy service-card look, for admin /
distributor / super-distributor dashboards. */
.aj-v2 .aj-scard{
position:relative;overflow:hidden;
background:var(--aj-hero)!important;color:#fff;
border:1px solid rgba(255,255,255,.08);
border-radius:var(--aj-radius-lg);
box-shadow:var(--aj-blue-glow);
}
.aj-v2 .aj-scard::after{
content:"";position:absolute;right:-40px;top:-46px;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(245,149,7,.28),transparent 62%);pointer-events:none;
}
.aj-v2 .aj-scard > *{position:relative;z-index:1;}
.aj-v2 .aj-scard .text-gray-500{color:rgba(255,255,255,.72)!important;}
.aj-v2 .aj-scard .text-gray-900{color:#fff!important;}
.aj-v2 .aj-scard .text-gray-400{color:rgba(255,255,255,.6)!important;}
/* Light ghost button — for use on white surfaces (e.g. filter "Clear"). */
.aj-btn-light{background:var(--aj-surface);color:var(--aj-ink);border:1px solid var(--aj-border-strong);}
.aj-btn-light:hover{background:var(--aj-surface-2);box-shadow:var(--aj-shadow-sm);}
@media (prefers-reduced-motion:reduce){
.aj-v2 .card-shadow,.aj-v2 button[type="submit"],.aj-v2 table tbody tr{transition:none;}
.aj-v2 button[type="submit"]:hover{transform:none;}
}