/* ============================================================
   Pointloop — brand layer (light · teal / white / sunset-ochre)
   Loaded AFTER style.css to re-theme the legacy dark UI.
   Tokens mirror the AEO design system.
   ============================================================ */
:root{
  --pl-teal:#0F766E;        --pl-teal-700:#0B5C56;   --pl-teal-300:#5EEAD4;
  --pl-ochre:#C27310;       --pl-ochre-400:#E0913B;
  --pl-ink:#0F1B19;         --pl-body:#33433F;       --pl-muted:#6B7C78;
  --pl-bg:#F4F7F6;          --pl-card:#FFFFFF;        --pl-line:#E4ECEA;
  --pl-radius:16px;         --pl-shadow:0 10px 30px -12px rgba(15,118,110,.18);
  --pl-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- base ---------- */
body.bdy,body.bg{background:var(--pl-bg)!important;color:var(--pl-body)!important;font-family:var(--pl-font)!important;}
body.bdy.over,body.bg.over{background:var(--pl-bg)!important;}
.fnt,.fnt1{font-family:var(--pl-font)!important;}
h1,h2,h3,h4,h5,h6,.fsw{font-family:var(--pl-font)!important;color:var(--pl-ink);font-weight:700;letter-spacing:-.01em;}
a{color:var(--pl-teal);}
hr{border:0;border-top:1px solid var(--pl-line)!important;background:transparent!important;}

/* ---------- top navbar (user app) ---------- */
.navbar.nab,.nav.nab{background:#fff!important;border-bottom:1px solid var(--pl-line);box-shadow:0 2px 14px -10px rgba(15,27,25,.25);}
.navbar-brand.bjr h4,.navbar-brand h4{margin:0;}
.pl-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.pl-brand .pl-word{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--pl-ink);}
.pl-brand .pl-word b{color:var(--pl-teal);font-weight:800;}
.pl-mark{color:var(--pl-teal);width:30px;height:30px;display:block;}
.nav-icon .ic{color:var(--pl-teal)!important;font-size:18px;}
.nav-icon:hover .ic{color:var(--pl-ochre)!important;}
.notification-icon[data-count]{position:relative;}
.notification-icon[data-count]:after{content:attr(data-count);position:absolute;top:-8px;right:-10px;background:var(--pl-ochre);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:9px;padding:0 4px;}

/* ---------- welcome heading ---------- */
.fsw{font-size:26px;}
.name .fsw{color:var(--pl-ink);}

/* ---------- cards ---------- */
.cir,.cib{border-radius:var(--pl-radius);}
.pl-card{background:var(--pl-card)!important;border:1px solid var(--pl-line);border-radius:var(--pl-radius);box-shadow:var(--pl-shadow);color:var(--pl-body)!important;}
.pl-card b,.pl-card .digit,.pl-card .fw-bold,.pl-card .date-format,.pl-card .btmod{color:var(--pl-ink)!important;}
.pl-card .date-format{color:var(--pl-muted)!important;font-size:12px;}

/* ---------- balance hero (teal gradient, keeps existing text-white) ---------- */
.pl-hero{background:linear-gradient(135deg,var(--pl-teal) 0%,var(--pl-teal-700) 100%)!important;border:none!important;border-radius:var(--pl-radius);box-shadow:0 18px 40px -16px rgba(15,118,110,.55);color:#fff!important;position:relative;overflow:hidden;}
.pl-hero:before{content:"";position:absolute;width:240px;height:240px;right:-60px;top:-80px;background:radial-gradient(circle,rgba(94,234,212,.35),transparent 70%);}
.pl-hero b,.pl-hero .text-white,.pl-hero span,.pl-hero div{color:#fff;}
.pl-hero .term i{color:rgba(255,255,255,.7)!important;}
.pl-hero hr{border-top:1px solid rgba(255,255,255,.18)!important;}
.pl-hero .fas.fa-sync{color:var(--pl-teal-300)!important;}
.radial-progress .bjr.w,.radial-progress text{fill:#fff!important;}
/* dissolve the legacy dark inner panel so the teal hero reads as one card */
.pl-hero .cib,.pl-hero .cir,.pl-hero .rw{background:transparent!important;box-shadow:none!important;border:none!important;}
.pl-hero>b{font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:.85;font-weight:600;}

/* category dots in the hero breakdown */
.transaction-highlight{display:inline-block;width:10px;height:10px;border-radius:50%;}
.bgg{background:var(--pl-teal-300)!important;}
.bgg1{background:var(--pl-ochre)!important;}
.bgg2{background:#9AE6B4!important;}
.bgg3{background:#fff!important;}

/* ---------- currency unit (was the ` PROM glyph) ---------- */
.bjr,.sjr{font-family:var(--pl-font)!important;}
.pl-unit{font-size:.62em;font-weight:700;letter-spacing:.04em;text-transform:lowercase;opacity:.85;margin-left:2px;}

/* ---------- action buttons (right rail) ---------- */
.wb.hbtn,.hbtn{background:#fff!important;color:var(--pl-ink)!important;border:1px solid var(--pl-line)!important;border-radius:12px!important;box-shadow:0 6px 16px -10px rgba(15,27,25,.3);font-weight:600;transition:.15s;}
.wb.hbtn:hover,.hbtn:hover{border-color:var(--pl-teal)!important;color:var(--pl-teal)!important;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(15,118,110,.4);}
.hbtn img,.hbtn .hic{filter:none;}

/* ---------- history list ---------- */
.list-group-item.cib{background:transparent!important;border:0!important;border-bottom:1px solid var(--pl-line)!important;border-radius:0!important;padding:14px 4px;color:var(--pl-ink)!important;}
.list-group-item .btmod{background:none;border:0;font-weight:600;color:var(--pl-ink)!important;padding:0;cursor:pointer;}
.list-group-item .btmod:hover{color:var(--pl-teal)!important;}
.history-points .sjr{color:var(--pl-muted)!important;font-weight:600;}
.badge.bg-success{background:#0E9F6E!important;}
.badge.bg-danger{background:#E11D48!important;}
.badge.bg-primary{background:var(--pl-teal)!important;}
.badge.bg-primary-pink{background:var(--pl-ochre)!important;color:#fff!important;}

/* ---------- LOGIN ---------- */
body.bg.over{min-height:100vh;}
.pl-login{min-height:100vh;display:flex;}
.pl-login__brand{flex:1;background:linear-gradient(150deg,var(--pl-teal) 0%,var(--pl-teal-700) 100%);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.pl-login__brand:before{content:"";position:absolute;width:420px;height:420px;right:-120px;bottom:-140px;background:radial-gradient(circle,rgba(94,234,212,.30),transparent 70%);}
.pl-login__brand .pl-mark{color:#fff;width:44px;height:44px;}
.pl-login__brand h2{color:#fff;font-size:34px;line-height:1.18;margin:22px 0 14px;max-width:14ch;}
.pl-login__brand p{color:rgba(255,255,255,.82);font-size:16px;max-width:42ch;}
.pl-login__brand .pl-chips{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px;}
.pl-login__brand .pl-chips span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 13px;border-radius:999px;font-size:13px;}
.pl-login__form{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;}
.pl-login__form .pl-formwrap{width:100%;max-width:400px;color:var(--pl-body);}
.pl-login__form h1.fs{color:var(--pl-ink);font-size:28px;margin-bottom:4px;}
.pl-login__form .pl-sub{color:var(--pl-muted);margin-bottom:22px;}
.pl-login__form label{color:var(--pl-ink)!important;font-size:13px;font-weight:600;margin-bottom:6px;}
.pl-login__form .fld,.pl-login__form .form-control{background:#fff!important;border:1px solid var(--pl-line)!important;border-radius:10px!important;color:var(--pl-ink)!important;padding:12px 14px!important;height:auto!important;}
.pl-login__form .fld:focus{border-color:var(--pl-teal)!important;box-shadow:0 0 0 3px rgba(15,118,110,.12)!important;}
.pl-login__form .container,.pl-login__form .text-white,.pl-login__form a.text-white{color:var(--pl-muted)!important;}
.pl-login__form a{color:var(--pl-teal)!important;}
.pl-login__form input[type=submit].btn,.pl-login__form .btn-block{background:var(--pl-teal)!important;border:none!important;color:#fff!important;border-radius:10px!important;padding:12px!important;font-weight:700;}
.pl-login__form input[type=submit].btn:hover{background:var(--pl-teal-700)!important;}
.pl-login__form .fld2{background:#fff!important;color:var(--pl-ink)!important;border:1px solid var(--pl-line)!important;border-radius:10px!important;font-weight:600;}
.pl-login__form .fld2:hover{border-color:var(--pl-teal)!important;color:var(--pl-teal)!important;}
.pl-login__form .gf{color:var(--pl-teal);}
.pl-login__form .field-icon{color:var(--pl-muted);}
@media(max-width:991px){.pl-login__brand{display:none;}}

/* ---------- footer ---------- */
footer.cib,footer.fld,.pl-foot{background:transparent!important;color:var(--pl-muted)!important;border-top:1px solid var(--pl-line);font-size:13px;}
footer a{color:var(--pl-teal)!important;}

/* ---------- modals (re-theme every legacy .cib modal to light) ---------- */
.modal-content,.modal-content.cib{background:#fff!important;color:var(--pl-ink)!important;border:1px solid var(--pl-line)!important;border-radius:18px!important;box-shadow:0 24px 60px -20px rgba(15,27,25,.35);}
.modal-header{border-bottom:1px solid var(--pl-line)!important;padding:18px 22px;}
.modal-footer{border-top:1px solid var(--pl-line)!important;}
.modal-title,.modal-body h3,.modal-body h5,.modal-content label{color:var(--pl-ink)!important;}
.modal-body,.modal-body p,.modal-body span,.modal-content .date-format{color:var(--pl-body)!important;}
.modal .close,.modal .close .de,.modal .close span{color:var(--pl-muted)!important;opacity:1;text-decoration:none;}
.modal .close:hover span{color:var(--pl-ink)!important;}
.modal-content .btn-block,.modal-content .btn-primary{background:var(--pl-teal)!important;border:none!important;color:#fff!important;border-radius:10px!important;font-weight:600;padding:11px!important;}
.modal-content .btn-block:hover{background:var(--pl-teal-700)!important;}
.modal-content .form-control,.modal-content .fld,.modal-content input,.modal-content select,.modal-content textarea{background:#fff!important;border:1px solid var(--pl-line)!important;border-radius:10px!important;color:var(--pl-ink)!important;}
.modal-content .form-control:focus,.modal-content .fld:focus{border-color:var(--pl-teal)!important;box-shadow:0 0 0 3px rgba(15,118,110,.12)!important;}
.modal-content .pl-unit{color:var(--pl-teal)!important;}

/* tidy bootstrap buttons globally inside app */
.btn-primary{background:var(--pl-teal)!important;border-color:var(--pl-teal)!important;}
.btn-primary:hover{background:var(--pl-teal-700)!important;border-color:var(--pl-teal-700)!important;}
.btn-outline-primary,.outline-btn{color:var(--pl-teal)!important;border:1px solid var(--pl-teal)!important;}