/* T-AIC-508 / T-AIC-520: direction 04, with Amanda's stronger teal accents.
   Teal identifies actions and selections; blue remains the secondary accent.
   Legacy token aliases keep this a presentation-only change. */
:root {
  --brand-midnight:#061D34;
  --brand-blue:#075FE8;
  --brand-teal:#00B8B0;
  --brand-teal-hover:#27C8BF;
  --brand-teal-ink:#006B66;
  --brand-teal-wash:#E1F5F2;
  --brand-teal-chart:#008B85;
  --brand-background:#EFF4FA;
  --brand-white:#FFFFFF;
  --navy:var(--brand-midnight); --navy-deep:var(--brand-midnight);
  --navy-2:#102D49; --navy-3:#193A59;
  --crimson:var(--brand-blue); --crimson-dark:#054BB8;
  --crimson-soft:var(--brand-blue); --crimson-tint:#EAF1FF;
  --white:var(--brand-white); --page:var(--brand-background);
  --surface:var(--brand-white); --surface-2:#F5F8FC;
  --ink:var(--brand-midnight); --ink-2:#41566D; --ink-3:#53667A;
  --mist:#D5E2F2; --fog:#ACBED3; --bd:#D5DFEB;
  --ok:#08756E; --bad:#C02D40; --warn:#95600D;
}
.side {background:var(--brand-midnight); border:0; padding-top:24px; min-width:0;}
.brand-nav {display:contents;}
.side .logo {width:190px; height:auto; max-height:78px; object-fit:contain; margin:0 6px 24px; background:transparent; border-radius:0;}
.navb {color:#C5D4E6; border-radius:9px; padding:10px 14px;}
.navb.on {background:var(--brand-teal); box-shadow:inset 3px 0 #8CE3DA; color:var(--brand-midnight); font-weight:700;}
.navb.on .badge {background:var(--brand-midnight); color:var(--brand-white);}
.navb:hover {background:#123F4B; color:var(--brand-white);}
.navb.on:hover {background:var(--brand-teal-hover); color:var(--brand-midnight);}
.side .foot {color:#ACBED3; border-top:1px solid #35506A; margin-top:auto; padding-top:18px;}
.main {background:var(--brand-background);}
.topbar {border-bottom-color:var(--bd);}
.topbar h1 {font-weight:700; letter-spacing:-.035em;}
.scard,.mpanel,.cpcard,.plc-card,.tri-list,.tri-read {box-shadow:0 3px 14px -10px rgba(6,29,52,.25);}
.summary {background:var(--brand-teal-wash); border-color:#9BD8D2;}
/* One strong action colour, with dark lettering for readable bright teal. */
.abtn.primary,.abtn.create,.abtn.pri,.tri-act .abtn.pri,.mf-foot .abtn.pri,.chat-in button {
  background:var(--brand-teal); border-color:var(--brand-teal-ink); color:var(--brand-midnight);
}
.abtn.primary:hover,.abtn.create:hover,.abtn.pri:hover,.tri-act .abtn.pri:hover,.mf-foot .abtn.pri:hover,.chat-in button:hover {
  background:var(--brand-teal-hover); border-color:var(--brand-teal-ink); color:var(--brand-midnight);
}
.pbtn.on,.ws-subtab.on {background:var(--brand-teal); border-color:var(--brand-teal-ink); color:var(--brand-midnight);}
.pbtn.on:hover,.ws-subtab.on:hover {background:var(--brand-teal-hover); color:var(--brand-midnight);}
.wk-tab.on,.pt-tab.on,.cp-tab.on {color:var(--brand-teal-ink); border-bottom-color:var(--brand-teal-ink);}
.wk-tab.on .wk-n {background:var(--brand-teal); border-color:var(--brand-teal-ink); color:var(--brand-midnight);}
.abtn.cur,.kfilter button.on,.plc-tags .tag.on {color:var(--brand-teal-ink); border-color:var(--brand-teal-ink);}
.opt.sel {background:var(--brand-teal-wash); border-color:var(--brand-teal-ink);}
.tri.on,.wp-item.on,.chan button.on {background:var(--brand-teal-wash); box-shadow:inset 3px 0 var(--brand-teal-ink);}
.chan button.on {color:var(--brand-teal-ink);}
.user .av,.bell b {background:var(--brand-teal); color:var(--brand-midnight);}
/* The income panel is the dashboard's teal landmark; other metric groups
   retain their own colours, as do cancellations and warning statuses. */
.mpanel.g-income {background:#F1FAF8; border-color:#9BD8D2;}
.mpanel.g-income h4 {background:var(--brand-teal); color:var(--brand-midnight); margin:-12px -14px 8px; padding:12px 14px; border-radius:11px 11px 0 0;}
.mpanel.g-income .grip,.mpanel.g-income:hover .grip {color:var(--brand-midnight);}
.g-income .mrow {border-bottom-color:#C9E5E0;}
.g-income .mrow:not(.lk) b:not(.neg),.g-income .scard:not(.lk) b:not(.down) {color:var(--brand-teal-ink);}
.bar:not(.alt):not(.bad) i,.wcard .prog i {background:var(--brand-teal-chart);}
.st-new,.role-admin,.k-upsell {color:var(--brand-blue); background:#EAF1FF;}
.wt-newbiz {background:var(--brand-blue);}
.wt-renewal {background:var(--brand-midnight); box-shadow:inset 3px 0 var(--brand-teal);}
.logout {color:var(--ink-2); border-color:var(--bd);}
.logout:hover {color:var(--brand-blue); border-color:var(--brand-blue);}
.login {background:radial-gradient(ellipse at 82% 12%,rgba(0,184,176,.24),transparent 58%),radial-gradient(ellipse at 8% 90%,rgba(7,95,232,.12),transparent 48%),var(--brand-midnight);}
.lcard {position:relative; background:var(--brand-midnight); border:1px solid #397078; box-shadow:0 24px 80px rgba(0,0,0,.25); border-radius:18px;}
.lcard::before {content:""; position:absolute; top:0; left:36px; width:64px; height:4px; background:var(--brand-teal); border-radius:0 0 4px 4px;}
.lcard .logo {width:100%; max-width:310px; height:auto; max-height:120px; object-fit:contain; margin:0 auto 24px; background:transparent; border-radius:0;}
.lcard h2 {font-size:22px; color:var(--brand-white);}
.lcard .sub,.lhint,.ltoggle {color:#BECFE2;}
.lcard .lerr {color:#FFB7C0;}
.lcard .lok {color:var(--brand-teal);}
.lbtn {background:var(--brand-teal); border-radius:10px; color:var(--brand-midnight);}
.lbtn:hover {background:var(--brand-teal-hover); color:var(--brand-midnight);}
.ltoggle:hover {color:var(--brand-teal-hover);}
.lcode {border-color:#71869C;}
.lcode:focus {border-color:var(--brand-teal); box-shadow:0 0 0 3px rgba(0,184,176,.2);}
.lcode::placeholder {color:#ACBED3; opacity:1;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--brand-blue); outline-offset:3px;
}
.side :focus-visible,.login :focus-visible {outline-color:var(--brand-teal);}
@media(max-width:860px) {
  .side {display:block; padding:14px 16px; overflow:visible;}
  .side .logo {display:block; width:152px; min-width:152px; max-height:62px; margin:0 0 12px;}
  .brand-nav {display:flex; gap:5px; overflow-x:auto; padding:3px 3px 8px; scroll-padding:3px;}
  .side .navb {flex:0 0 auto; width:auto; min-height:44px;}
}
@media(max-width:420px) {
  .lcard {padding:30px 24px; width:100%;}
  .topbar {gap:10px;}
  .topbar h1 {font-size:24px;}
}