/* ==========================================================================
   Anbo colourful layer — loaded LAST. Adds colour to icons, stat cards, nav,
   quick links and badges without touching any layout.
   ========================================================================== */
:root{--c-blue:#2563EB;--c-cyan:#0891B2;--c-orange:#EA580C;--c-violet:#7C3AED;--c-rose:#E11D48;--c-teal:#0D9488;--c-amber:#D97706;--c-green:#16A34A}
body{background:linear-gradient(180deg,#EEF8F2 0,#F4F7FB 420px,#F4F7FB 100%) fixed}

/* ---- sidebar: every menu icon gets its own colour chip ---- */
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 12px}
.side nav a .ic,.side nav a svg{box-sizing:content-box;width:18px;height:18px;padding:7px;border-radius:11px;background:rgba(255,255,255,.10);color:#fff;flex:none;transition:transform .15s}
.side nav a:hover .ic,.side nav a:hover svg{transform:scale(1.08)}
.side nav a.on .ic,.side nav a.on svg{background:rgba(255,255,255,.22)}
.side nav a[href$="/orders/new"] svg,.side nav a[href$="/orders/new"] .ic{background:linear-gradient(135deg,#34D399,#059669)}
.side nav a[href*="/orders"]:not([href$="/new"]) svg,.side nav a[href*="/orders"]:not([href$="/new"]) .ic{background:linear-gradient(135deg,#FBBF24,#EA580C)}
.side nav a[href$="/live"] svg,.side nav a[href$="/live"] .ic,.side nav a[href*="/zones"] svg,.side nav a[href*="/zones"] .ic{background:linear-gradient(135deg,#22D3EE,#0E7490)}
.side nav a[href*="/riders"] svg,.side nav a[href*="/riders"] .ic,.side nav a[href$="/rider"] svg{background:linear-gradient(135deg,#60A5FA,#1D4ED8)}
.side nav a[href*="/customers"] svg,.side nav a[href*="/customers"] .ic,.side nav a[href*="/profile"] svg,.side nav a[href*="/admins"] svg{background:linear-gradient(135deg,#A78BFA,#6D28D9)}
.side nav a[href*="/payments"] svg,.side nav a[href*="/payouts"] svg,.side nav a[href*="/wallet"] svg,.side nav a[href*="/funds"] svg,.side nav a[href*="/earnings"] svg,.side nav a[href*="/gateways"] svg,.side nav a[href*="/coupons"] svg{background:linear-gradient(135deg,#2DD4BF,#0F766E)}
.side nav a[href*="/reports"] svg,.side nav a[href$="/admin"] svg,.side nav a[href$="/customer"] svg,.side nav a[href$="/rider"] svg{background:linear-gradient(135deg,#F472B6,#BE185D)}
.side nav a[href*="/risk"] svg,.side nav a[href*="/kyc"] svg,.side nav a[href*="/logs"] svg{background:linear-gradient(135deg,#FB7185,#BE123C)}
.side nav a[href*="/notifications"] svg,.side nav a[href*="/alerts"] svg,.side nav a[href*="/support"] svg,.side nav a[href*="/messages"] svg,.side nav a[href*="/tickets"] svg{background:linear-gradient(135deg,#FCD34D,#B45309)}
.side nav a[href*="/addresses"] svg,.side nav a[href*="/locations"] svg{background:linear-gradient(135deg,#4ADE80,#15803D)}
.side nav a.on{background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,.05));box-shadow:inset 3px 0 0 #FBBF24}

/* ---- stat cards: rotating colours ---- */
.stat i{box-shadow:0 8px 16px rgba(0,0,0,.12);color:#fff;background:linear-gradient(135deg,#34D399,#15803D)}
.grid>.card.stat:nth-child(6n+2) i,.grid>a.card.stat:nth-child(6n+2) i{background:linear-gradient(135deg,#60A5FA,#1D4ED8)}
.grid>.card.stat:nth-child(6n+3) i,.grid>a.card.stat:nth-child(6n+3) i{background:linear-gradient(135deg,#FBBF24,#EA580C)}
.grid>.card.stat:nth-child(6n+4) i,.grid>a.card.stat:nth-child(6n+4) i{background:linear-gradient(135deg,#A78BFA,#6D28D9)}
.grid>.card.stat:nth-child(6n+5) i,.grid>a.card.stat:nth-child(6n+5) i{background:linear-gradient(135deg,#FB7185,#BE123C)}
.grid>.card.stat:nth-child(6n+6) i,.grid>a.card.stat:nth-child(6n+6) i{background:linear-gradient(135deg,#22D3EE,#0E7490)}
.card.stat{border-top:3px solid #34D399;background:linear-gradient(180deg,#fff,#F7FCF9)}
.grid>.card.stat:nth-child(6n+2){border-top-color:#60A5FA}.grid>.card.stat:nth-child(6n+3){border-top-color:#FBBF24}
.grid>.card.stat:nth-child(6n+4){border-top-color:#A78BFA}.grid>.card.stat:nth-child(6n+5){border-top-color:#FB7185}.grid>.card.stat:nth-child(6n+6){border-top-color:#22D3EE}
a.card.stat{transition:transform .15s,box-shadow .15s}a.card.stat:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(11,61,36,.14)}

/* ---- quick links ---- */
.qlinks a .ic{color:#fff;background:linear-gradient(135deg,#34D399,#15803D);box-shadow:0 6px 12px rgba(21,128,61,.28)}
.qlinks a:nth-child(5n+2) .ic{background:linear-gradient(135deg,#60A5FA,#1D4ED8);box-shadow:0 6px 12px rgba(29,78,216,.28)}
.qlinks a:nth-child(5n+3) .ic{background:linear-gradient(135deg,#FBBF24,#EA580C);box-shadow:0 6px 12px rgba(234,88,12,.28)}
.qlinks a:nth-child(5n+4) .ic{background:linear-gradient(135deg,#A78BFA,#6D28D9);box-shadow:0 6px 12px rgba(109,40,217,.28)}
.qlinks a:nth-child(5n+5) .ic{background:linear-gradient(135deg,#FB7185,#BE123C);box-shadow:0 6px 12px rgba(190,18,60,.28)}
.qlinks a:hover{transform:translateY(-2px)}

/* ---- service cards: soft shine ---- */
.svc{box-shadow:0 14px 28px rgba(0,0,0,.16)}
.svc i{background:rgba(255,255,255,.95)}
.s-send i{color:#0B63B8}.s-recv i{color:#E58A0A}.s-buy i{color:#0F6B37}.s-od i{color:#0B3D24}.s-purple i{color:#6D28D9}

/* ---- bottom nav on phones ---- */
.bnav a{color:#64748B}
.bnav a.on{color:var(--primary)}
.bnav a.on svg{background:rgba(var(--primary-rgb),.12);border-radius:12px;padding:5px;box-sizing:content-box}

/* ---- headings, tables, badges ---- */
.card h3{position:relative;padding-left:12px}
.card h3:before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:linear-gradient(180deg,#34D399,#F59E0B)}
table th{background:linear-gradient(180deg,#EAF7EF,#DDF1E5)}
table tr:hover td{background:#F5FBF7}
.badge{font-weight:700}
.btn.ghost:hover{background:#E7F5EC}
.top{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#34D399,#60A5FA,#A78BFA,#FB7185,#FBBF24) 1}
.walletcard{background:linear-gradient(135deg,#16A34A,#0D9488 60%,#0E7490)}
.hero-stats>div:nth-child(2){background:linear-gradient(135deg,#F59E0B,#EA580C)}
.hero-stats>div:nth-child(3){background:linear-gradient(135deg,#6366F1,#4338CA)}
@media(max-width:820px){body.panel .top{background:linear-gradient(135deg,#16A34A,#0D9488 60%,#0E7490);border-image:none}}