/* EVO Services client portal + admin: shared styles (matches the main website)
   Radius rule: buttons + chips = full pill, cards/panels = 22px, inputs = 12px. */
@font-face{font-family:"Outfit"; src:url("outfit.woff2") format("woff2"); font-weight:100 900; font-display:swap}
:root{
  --blue:#3066D5; --blue-hover:#2554b8; --green:#71C588; --chart:#3066D5;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eff2f7;
  --ink:#0c111b; --ink-2:#2b3240; --muted:#586173; --line:#e3e7ee; --line-2:#d3d9e3; --grid:#e8ecf2;
  --link:#2a5bc4; --tint:#eaf0fd; --tint-green:#e5f5ec;
  --up:#1b7a44; --up-bg:#e3f4ea; --down:#b42318; --down-bg:#fbe9e7; --flat:#586173; --flat-bg:#eef1f5;
  --dark:#0b1020; --on-dark:#eef1f7; --on-dark-2:#a7b1c6; --dark-line:rgba(255,255,255,.1);
  --err:#b42318; --ok:#1b7a44;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -10px rgba(26,45,90,.16);
  --shadow-lg:0 2px 6px rgba(16,24,40,.05), 0 28px 64px -22px rgba(26,45,90,.32);
  --ease:cubic-bezier(.23,1,.32,1);
  --r-card:22px; --r-input:12px;
  --font:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --chart:#5B86E5;
    --bg:#090c13; --surface:#11161f; --surface-2:#171e2b;
    --ink:#eef1f6; --ink-2:#cfd5df; --muted:#9aa4b5; --line:#222a38; --line-2:#2f394b; --grid:#1d2432;
    --link:#8aabf3; --tint:#152039; --tint-green:#10261a; --dark:#0d1428;
    --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 30px 70px -24px rgba(0,0,0,.8);
    --up:#7fd6a0; --up-bg:#15301f; --down:#ff8a80; --down-bg:#3a1c1a; --flat:#9ba5b6; --flat-bg:#1f2632;
    --err:#ff8a80; --ok:#7fd6a0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
  }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); font-size:16px; line-height:1.5; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; min-height:100dvh}
h1,h2,h3,h4{line-height:1.12; letter-spacing:-.02em; margin:0; font-weight:700; text-wrap:balance}
p{margin:0}
a{color:var(--link)}
.ic{width:1em; height:1em; flex:none; fill:currentColor; display:inline-block; vertical-align:-.125em}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px}
.muted{color:var(--muted)}

/* Logo (the EVO Services artwork) */
.logo{display:inline-flex; align-items:center; line-height:0; text-decoration:none; --logo-h:28px}
.logo img{height:var(--logo-h); width:auto; display:block}
.logo .dk{display:none}
@media (prefers-color-scheme:dark){ .logo img{display:none} .logo .dk{display:block} }
.logo.on-dark img{display:none} .logo.on-dark .dk{display:block}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none}
.skip:focus{top:16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; white-space:nowrap; font:inherit; font-weight:600; font-size:15.5px; line-height:1; border-radius:999px; min-height:48px; padding:0 20px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .16s var(--ease), background-color .2s ease, border-color .2s ease}
.btn:active{transform:scale(.97)}
.btn .ic{font-size:17px}
.btn-primary{background:var(--blue); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -8px rgba(48,102,213,.7)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:0 1px 2px rgba(16,24,40,.06)}
.btn-danger{background:transparent; color:var(--err); border-color:color-mix(in srgb, var(--err) 40%, var(--line))}
.btn-sm{min-height:40px; padding:0 16px; font-size:14.5px}
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:var(--blue-hover)} .btn-ghost:hover{border-color:var(--ink-2)} }
.btn[disabled]{opacity:.6; cursor:progress}
.btn-block{width:100%}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--link); text-decoration:underline; cursor:pointer}

/* Top bar */
.topbar{position:sticky; top:0; z-index:20; padding:12px 16px}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px; padding:0 10px 0 16px; border-radius:999px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow:var(--shadow); backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px)}
.topbar .right{display:flex; align-items:center; gap:10px; min-width:0}
.who{font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:30vw}
@media (max-width:560px){ .who{display:none} }
.demo-banner{background:var(--tint); border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); text-align:center; padding:8px 16px}

/* Cards & forms */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow)}
.auth{max-width:460px; margin:40px auto; padding:32px; box-shadow:var(--shadow-lg); border-radius:28px}
.auth h1{font-size:32px; letter-spacing:-.03em}
.auth .sub{color:var(--muted); margin-top:6px}
@media (max-width:480px){ .auth{margin:24px 16px; padding:22px 18px} }
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--surface-2); border-radius:999px; margin:22px 0 4px}
.tabs button{font:inherit; font-size:14.5px; font-weight:600; border:0; border-radius:999px; padding:9px 10px; background:transparent; color:var(--muted); cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.field{display:grid; gap:6px; margin-top:16px; min-width:0}
.field > label,.field > .label{font-weight:600; font-size:15px}
.field .help{font-size:13.5px; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=month],input[type=date],select,textarea{
  width:100%; min-height:48px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-input); padding:11px 13px; transition:border-color .15s ease, box-shadow .15s ease}
textarea{min-height:96px; resize:vertical}
select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent)}
.msg{margin-top:14px; padding:12px 14px; border-radius:12px; font-size:14.5px}
.msg.err{background:color-mix(in srgb, var(--err) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--err) 35%, var(--line))}
.msg.ok{background:var(--tint-green); border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line))}
.stack{display:grid; gap:10px; margin-top:20px}
.center-note{max-width:540px; margin:48px auto; padding:32px; text-align:left; border-radius:28px; box-shadow:var(--shadow-lg)}
.center-note h1{font-size:28px; letter-spacing:-.03em}
.center-note p{color:var(--muted); margin-top:10px}
.center-note .stack{margin-top:22px}
.loading{display:grid; place-items:center; min-height:50vh; color:var(--muted)}
.spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); font-size:14.5px; font-weight:500; color:var(--ink-2)}
.chip input:checked + span{border-color:var(--blue); background:var(--tint); color:var(--ink)}
.chip input:focus-visible + span{outline:3px solid var(--blue); outline-offset:2px}

/* Change badges (status: always icon + words, never colour alone) */
.delta{display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.delta.up{color:var(--up); background:var(--up-bg)}
.delta.down{color:var(--down); background:var(--down-bg)}
.delta.flat{color:var(--flat); background:var(--flat-bg)}
.delta .ph{font-size:14px}

/* Tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:15px}
th{text-align:left; font-size:13px; font-weight:600; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:12px; border-bottom:1px solid var(--grid); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}