/* Payneor Signature — the new system's light theme (chosen 2026-10-25).
   Brand blue flowing into teal on the sidebar, Payneor lime highlights, crisp white
   cards on a cool off-white page. It restyles the existing light theme ("mint") so
   every screen, saved preference and theme switch keeps working; the dark theme is
   unchanged. `html[...]` outranks the base `[data-theme]` rules it overrides. */
html[data-theme="mint"]{
  --bg:#f3f8fa;--bg2:#ffffff;--card:#ffffff;--card2:#f6fafb;
  --line:#e1ecf1;--txt:#0d2a3a;--mut:#5f7d8c;--dim:#93aab5;
  --gold:#c08a1e;--gold2:#9c6f15;--grn:#3b7d14;--red:#c0392b;
  --blu:#00568a;--pur:#6a5ad8;--cyn:#00568a;--ora:#c07a2e;
  --teal:#0f7b85;--pink:#c15a86;--accent:#00568a;
  --sh:0 14px 30px -18px rgba(0,60,90,.35);--r:16px;
  --nm-out:0 4px 14px -10px rgba(0,60,90,.25);--nm-out-sm:0 2px 8px -4px rgba(0,60,90,.18);--nm-in:inset 0 0 0 1px #dbe8ee;
  --sig-grad:linear-gradient(165deg,#00375a 0%,#00568a 45%,#0f7b85 100%);
  --sig-btn:linear-gradient(135deg,#00568a,#0f7b85);
  --sig-strip:linear-gradient(90deg,#00568a,#0f7b85,#8dc63f);
  --lime:#8dc63f;
}
html[data-theme="mint"] body{background:linear-gradient(180deg,#f2f8fb 0%,#f7faf4 100%) fixed;font-family:'Sora','Plus Jakarta Sans',sans-serif}

/* sidebar */
html[data-theme="mint"] .side{background:var(--sig-grad);border-right:none;box-shadow:6px 0 24px -12px rgba(0,40,70,.55);color:#cfe6f2;
  /* text inside the sidebar that uses the page colours (build stamp, counts) must read on blue */
  --txt:#ffffff;--mut:rgba(207,230,242,.78);--dim:rgba(207,230,242,.55);--grn:#b5e47a;--gold:#f3d58f;--cyn:#bfe6f5;--red:#ff9b8f}
html[data-theme="mint"] .brand{border-bottom:1px solid rgba(255,255,255,.12)}
html[data-theme="mint"] .brand-icon{background:var(--lime);color:#0b2a12}
html[data-theme="mint"] .brand-name{color:#fff}
html[data-theme="mint"] .brand-name span{color:#a6dd5a}
html[data-theme="mint"] .brand-sub{color:rgba(207,230,242,.7)}
html[data-theme="mint"] .nav-grp{color:rgba(207,230,242,.55)}
html[data-theme="mint"] .nav-item{color:#cfe6f2;border:1px solid transparent;box-shadow:none;background:transparent}
html[data-theme="mint"] .nav-item:hover{background:rgba(255,255,255,.09);color:#fff;box-shadow:none}
html[data-theme="mint"] .nav-item.on{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);border-color:transparent;font-weight:600}
html[data-theme="mint"] .nav-item.on svg{color:#a6dd5a;stroke:#a6dd5a}
html[data-theme="mint"] .nav-badge{background:var(--lime);color:#0b2a12}
html[data-theme="mint"] .side-foot{border-top:1px solid rgba(255,255,255,.12);color:rgba(207,230,242,.6)}
html[data-theme="mint"] .side input,html[data-theme="mint"] .side select,html[data-theme="mint"] .side .btn{color:#0d2a3a}
html[data-theme="mint"] .side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}

/* top bar */
html[data-theme="mint"] .topbar{background:rgba(255,255,255,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
html[data-theme="mint"] .topbar h2,html[data-theme="mint"] .panel h3,html[data-theme="mint"] .modal-head h3{font-family:'Sora',sans-serif;letter-spacing:-.2px;color:#0d2a3a}

/* cards, KPI tiles, panels */
html[data-theme="mint"] .kpi{background:#fff;border:1px solid var(--line);box-shadow:var(--nm-out);border-radius:16px}
html[data-theme="mint"] .kpi::before{display:block;height:3px;background:var(--sig-strip)}
html[data-theme="mint"] .kpi:hover{box-shadow:var(--sh)}
html[data-theme="mint"] .panel,html[data-theme="mint"] .card{background:#fff;border:1px solid var(--line);box-shadow:var(--nm-out);border-radius:16px}

/* buttons */
html[data-theme="mint"] .btn{background:#fff;border:1px solid #d6e5ec;box-shadow:none;color:#0d2a3a}
html[data-theme="mint"] .btn:hover{border-color:#0f7b85;color:#00568a;box-shadow:0 2px 8px -4px rgba(0,86,138,.35)}
html[data-theme="mint"] .btn.pri{background:var(--sig-btn);color:#fff;border:none;box-shadow:0 8px 20px -10px rgba(0,86,138,.7)}
html[data-theme="mint"] .btn.pri:hover{filter:brightness(1.08);color:#fff}
html[data-theme="mint"] .icon-btn{background:#fff;border:1px solid #d6e5ec;box-shadow:none;color:#5f7d8c}
html[data-theme="mint"] .icon-btn:hover{color:#00568a;border-color:#0f7b85;box-shadow:none}

/* forms */
html[data-theme="mint"] input,html[data-theme="mint"] select,html[data-theme="mint"] textarea{background:#fff;border:1px solid #d6e5ec;box-shadow:none;color:#0d2a3a}
html[data-theme="mint"] input:focus,html[data-theme="mint"] select:focus,html[data-theme="mint"] textarea:focus{border-color:#0f7b85;box-shadow:0 0 0 3px rgba(15,123,133,.15);outline:none}
html[data-theme="mint"] select option,html[data-theme="mint"] select optgroup{background:#fff;color:#0d2a3a}
html[data-theme="mint"] input[type=checkbox],html[data-theme="mint"] input[type=radio]{accent-color:#00568a}

/* tables */
html[data-theme="mint"] .tbl-wrap{border:1px solid var(--line);box-shadow:none;border-radius:14px;background:#fff}
html[data-theme="mint"] thead th{background:#f4f9fb;border-bottom:1px solid var(--line);color:#5f7d8c}
html[data-theme="mint"] tbody td{border-bottom:1px solid #edf3f6;color:#0d2a3a}
html[data-theme="mint"] tbody tr:hover{background:#f1f8f4}

/* dialogs */
html[data-theme="mint"] .modal{background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -20px rgba(0,40,70,.45)}
html[data-theme="mint"] .modal-head{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f6fbfd,#fff)}
html[data-theme="mint"] .modal-foot{border-top:1px solid var(--line);background:#fafcfd}

/* Financial names its sidebar sections .nav-sec */
html[data-theme="mint"] .nav-sec{color:rgba(207,230,242,.55)}
html[data-theme="mint"] .side-foot .who{color:rgba(207,230,242,.75)}
html[data-theme="mint"] .kpi::before{content:"";position:absolute;top:0;left:0;right:0}
/* the theme picker is a white box inside the blue sidebar: give it dark text again */
html[data-theme="mint"] .side .th-dd{--txt:#0d2a3a;--mut:#5f7d8c;color:#0d2a3a}