/* ==============================================================
   LegalSavvy CRM — "EMBER" design system
   Deep navy command surface · ember-orange energy · mobile-app feel
   Loaded AFTER bootstrap/style.min.css — overrides it by design.
   Re-skin the whole product from the two brand lines below.
============================================================== */
:root{
  --navy:#0E2A4E;
  --ember:#F26C0D;
  /* Solid fill for anything carrying WHITE text. #F26C0D under white is only
     3.03:1 - below AA - and these are read all day. #C4540A is 4.55:1 and still
     unmistakably ember. --ember stays bright for accents, icons and borders. */
  --ember-press:#C4540A;

  --navy-2:#17406F; --navy-3:#2A5E9B; --navy-ink:#0A1E38;
  --navy-soft:#E8EFF7; --navy-glow:rgba(14,42,78,.3);
  --ember-2:#FF9243; --ember-3:#FFB877; --ember-ink:#A84306;
  --ember-soft:#FFEEE1; --ember-glow:rgba(242,108,13,.34);

  --canvas:#F6F5F2; --canvas-2:#EDEBE6;
  --card:#FFFFFF; --card-2:#FAF9F6;
  /* Contrast-checked against --card #FFF: 17.98 / 9.85 / 5.16 / 3.40.
     The old --ink-3 sat at 4.11 and --ink-4 at 2.14, which is a strain over a
     full shift. Hierarchy now comes from weight and size as much as lightness. */
  --ink:#101722; --ink-2:#3A4453; --ink-3:#5E6877; --ink-4:#677180;
  --hair:#EAE8E3; --hair-2:#DEDBD4;

  --mint:#DCF0E4; --mint-ink:#17714A;
  --rose:#FCE2E4; --rose-ink:#B33F4F;
  --sand:var(--ember-soft); --sand-ink:var(--ember-ink);
  --sea:#DDEAF7; --sea-ink:#215F94;
  --lav:var(--navy-soft); --lav-ink:var(--navy);

  --r-xl:22px; --r-lg:17px; --r-md:12px; --r-sm:9px; --pill:999px;
  --sh:0 1px 2px rgba(16,23,34,.04),0 10px 30px -14px rgba(14,42,78,.16);
  --sh-md:0 1px 2px rgba(16,23,34,.05),0 14px 32px -14px rgba(14,42,78,.26);
  --sh-hi:0 22px 50px -20px rgba(14,42,78,.3);
  --sh-float:0 36px 84px -28px rgba(10,30,56,.42);
  --sh-ember:0 16px 38px -14px var(--ember-glow);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.34,1);
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --rail:250px;
}
html[data-ember-theme="dark"]{
  --ember-press:#C4540A;
  --navy-soft:#12243C; --navy-glow:rgba(60,120,200,.34);
  --ember-soft:#31200F; --ember-ink:#FFA75C;
  --canvas:#080D15; --canvas-2:#0E1622;
  --card:#101927; --card-2:#152134;
  /* against --card #101927: 15.56 / 10.87 / 7.16 / 5.12 (was 2.52 for --ink-4) */
  --ink:#EDF1F7; --ink-2:#C2CCDA; --ink-3:#9AA6B8; --ink-4:#7F8B9E;
  --hair:#1B2534; --hair-2:#243144;
  --mint:#0F2A1E; --mint-ink:#5FCB94;
  --rose:#2C1A1E; --rose-ink:#E8899A;
  --sea:#102434; --sea-ink:#69B4E2;
  --lav:#12243C; --lav-ink:#9FC2E8;
  --sh:0 1px 2px rgba(0,0,0,.4),0 12px 34px -16px rgba(0,0,0,.7);
  --sh-md:0 1px 2px rgba(0,0,0,.45),0 14px 34px -14px rgba(0,0,0,.78);
  --sh-hi:0 24px 54px -20px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
body{
  font-family:var(--sans)!important;
  background:var(--canvas)!important;
  color:var(--ink)!important;
  font-size:14px;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
}
body,p,span,div,td,th,li,label,a,h1,h2,h3,h4,h5,h6{font-family:var(--sans)}
p{color:var(--ink-2);font-size:13.5px;line-height:1.62}
h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.035em;font-weight:750}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--ember)}
hr{border-color:var(--hair);opacity:1}
small,.small{font-size:11.5px}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:8px}
::selection{background:var(--ember-soft);color:var(--ember-ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:99px;border:2.5px solid var(--canvas)}
.num,.tabular{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.045em}
/* Theme swap: kill every transition for the frame in which the tokens change,
   so nothing is left mid-tween on a stale colour. */
html.ember-theming,html.ember-theming *,html.ember-theming *::before,html.ember-theming *::after{
  transition:none!important;animation-duration:0s!important;
}
img,svg{max-width:100%}

/* ==============================================================
   SHELL — maps the legacy .page-wrapper / .body-wrapper markup
   onto the Ember two-column command surface. No view edits needed.
============================================================== */
.page-wrapper{
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  min-height:100vh;
  background:var(--canvas);
  width:100%;
  overflow:visible;
}
.body-wrapper{
  min-width:0;
  position:relative;
  background:transparent;
  padding:16px 14px 72px;
  /* The legacy theme positioned its sidebar fixed and pushed the content over
     with margin-left:270px (87px when mini). The Ember rail is grid column 1,
     so that margin is 270px of dead space on the left of EVERY page. Kill it
     for both sidebartypes and both text directions. */
  margin-left:0!important;
  margin-right:0!important;
}
.body-wrapper::before{
  content:"";position:fixed;top:0;right:0;width:60vw;height:60vh;z-index:0;pointer-events:none;opacity:.45;
  background:radial-gradient(circle at 80% 8%,var(--ember-glow),transparent 55%);
}
.body-wrapper>*{position:relative;z-index:1}
.body-wrapper>.container-fluid{
  /* full width: the old 1440px cap left wide blank gutters on big screens,
     worst with the rail collapsed */
  max-width:none!important;
  /* The legacy theme reserved 115-200px of top padding to clear its old
     fixed header (padding-top is set !important in style.min.css). The Ember
     shell has no fixed header, so that space is dead on every page. */
  padding:0!important;
  margin-inline:auto;
}

/* ---------- sidebar rail ---------- */
.ember-side{
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  padding:20px 13px 26px;
  display:flex;flex-direction:column;
  background:linear-gradient(185deg,var(--navy-ink),#06121F 70%);
  color:#93A3B8;
  scrollbar-width:none;
  z-index:60;
}
.ember-side::-webkit-scrollbar{display:none}
.ember-side::before{
  content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.045;
  pointer-events:none;mix-blend-mode:overlay;
}
.ember-side::after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;top:-120px;left:-80px;
  background:radial-gradient(circle,var(--ember-glow),transparent 68%);filter:blur(20px);pointer-events:none;
}
.ember-brand{
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:2;
}
.ember-brand img{height:27px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
/* One wordmark, two inks: the black art on light surfaces, the white art on dark
   ones. Both are the same artwork with a transparent knockout for the tagline,
   so neither needs a plate behind it. */
.brand-logo{display:block}
.brand-logo.brand-dark{display:none}
html[data-ember-theme="dark"] .brand-logo.brand-light{display:none}
html[data-ember-theme="dark"] .brand-logo.brand-dark{display:block}
.ember-brand{margin:6px 8px 22px}
/* Collapsed rail: the wordmark is too wide to read, so show the mark alone. */
.rail-mini .ember-brand .bfall{display:flex!important;justify-content:center}
.rail-mini .ember-brand .bfall>span:not(.bmark){display:none}
.ember-brand .bfall{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.04em;color:#fff;
}
.ember-brand .bmark{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--ember),var(--ember-2));box-shadow:0 8px 18px -6px var(--ember-glow);
}
.ember-brand em{font-style:normal;color:var(--ember-2)}

.nav-label{
  font-size:10px;font-weight:700;color:#4E5F76;margin:16px 13px 7px;letter-spacing:.1em;
  text-transform:uppercase;position:relative;z-index:2;
}
.ember-side .nav-item{
  display:flex;align-items:center;gap:11px;padding:10.5px 12px;border-radius:11px;
  font-weight:600;font-size:13px;width:100%;color:#93A3B8;margin-bottom:2px;
  position:relative;z-index:2;text-decoration:none;
  transition:color .25s,background .25s,padding-left .35s var(--ease);
}
.ember-side .nav-item svg{flex:none;opacity:.7;transition:opacity .25s}
.ember-side .nav-item>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ember-side .nav-item:hover{color:#fff;background:rgba(255,255,255,.055);padding-left:16px}
.ember-side .nav-item:hover svg{opacity:1}
.ember-side .nav-item.active{background:rgba(255,255,255,.07);color:#fff}
.ember-side .nav-item.active svg{opacity:1;color:var(--ember-2)}
.ember-side .nav-item.active::before{
  content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 99px 99px 0;background:var(--ember);
  box-shadow:0 0 14px 1px var(--ember-glow);
}
.nav-badge{
  margin-left:auto;background:var(--ember-press);color:#fff;font-size:10px;font-weight:750;
  padding:2.5px 8px;border-radius:var(--pill);flex:none;
}
/* collapsible group */
.nav-group>.nav-item .caret{margin-left:auto;transition:transform .3s var(--ease);flex:none;opacity:.55}
.nav-group.open>.nav-item .caret{transform:rotate(180deg)}
.nav-sub{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);
  position:relative;z-index:2;
}
.nav-group.open .nav-sub{grid-template-rows:1fr}
.nav-sub>div{overflow:hidden}
.nav-sub .nav-item{
  font-size:12.5px;padding:8.5px 12px 8.5px 40px;font-weight:550;
}
.nav-sub .nav-item::after{
  content:"";position:absolute;left:23px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;
}
.nav-sub .nav-item.active::before{display:none}
.nav-sub .nav-item.active::after{opacity:1;background:var(--ember-2)}
.nav-sub .nav-item:hover{padding-left:44px}

.side-card{
  margin-top:auto;border-radius:var(--r-lg);padding:15px;position:relative;overflow:hidden;z-index:2;
  background:linear-gradient(140deg,rgba(242,108,13,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);
}
.side-card b{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:#fff;letter-spacing:-.02em}
.side-card p{font-size:11.5px;line-height:1.5;margin-bottom:11px;color:#93A3B8}
.side-card .btn{background:var(--ember-press);color:#fff;padding:8px 15px;font-size:12px;width:100%;justify-content:center}
.side-card .btn:hover{background:var(--ember-2);color:#fff}

/* mini / collapsed rail */
.page-wrapper.rail-mini{grid-template-columns:76px 1fr}
.rail-mini .ember-side .nav-item{justify-content:center;padding:12px 0}
.rail-mini .ember-side .nav-item>span:not(.bmark),
.rail-mini .nav-label,.rail-mini .side-card,.rail-mini .ember-brand img,
.rail-mini .nav-badge,.rail-mini .caret,.rail-mini .nav-sub{display:none}
.rail-mini .ember-brand{justify-content:center;margin-inline:0}
.rail-mini .ember-side .nav-item:hover{padding-left:0}
.rail-collapse{
  /* fixed, not absolute: the rail's overflow-x:hidden clipped the half that
     sat past its edge, so the toggle was barely visible */
  position:fixed;top:30px;left:calc(var(--rail) - 12px);width:24px;height:24px;border-radius:50%;
  background:var(--navy);border:1px solid rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;z-index:6;transition:transform .3s,background .25s;
}
.rail-collapse:hover{transform:scale(1.14);background:var(--ember);border-color:var(--ember)}
.rail-mini .rail-collapse svg{transform:rotate(180deg)}
.rail-mini .rail-collapse{left:64px}
.rail-collapse:focus-visible{outline:2px solid var(--ember-2);outline-offset:2px}

/* ==============================================================
   TOPBAR / MOBILE APP HEADER / BOTTOM TABS
============================================================== */
.ember-top{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;min-height:44px;
}
.ember-search{
  flex:1;max-width:390px;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--pill);
  padding:10px 17px;color:var(--ink-4);box-shadow:var(--sh);cursor:pointer;
  transition:border-color .25s,box-shadow .25s;
}
.ember-search:hover,.ember-search:focus-within{border-color:var(--ember);box-shadow:0 0 0 4px var(--ember-soft)}
.ember-search input{border:none;outline:none;flex:1;color:var(--ink);background:none;cursor:pointer;font-size:13px;min-width:0}
.ember-search .kbd{
  font-size:10px;border:1px solid var(--hair-2);border-radius:6px;padding:2.5px 7px;font-weight:700;flex:none;
  color:var(--ink-3);
}
.ember-top .right{margin-left:auto;display:flex;align-items:center;gap:8px}

.icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--hair);
  display:grid;place-items:center;flex:none;color:var(--ink-2);padding:0;
  transition:transform .4s var(--spring),border-color .25s,background .25s,color .25s;
}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--ember);color:var(--ember)}
.icon-btn svg{transition:transform .35s var(--spring)}
.icon-btn:hover svg{transform:rotate(-8deg)}
.icon-btn.sm{width:31px;height:31px}
.icon-btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.icon-btn.dark:hover{background:var(--ember-press);border-color:var(--ember-press);color:#fff}
.icon-btn.has-dot{position:relative}
.icon-btn.has-dot::after{
  content:"";position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--ember);border:2px solid var(--card);
}
.ember-ava{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:var(--canvas-2);
  outline:2px solid var(--card);box-shadow:0 0 0 2px var(--ember);
}
.ember-ava-txt{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff;
  font-weight:750;font-size:13px;text-transform:uppercase;
  outline:2px solid var(--card);box-shadow:0 0 0 2px var(--ember);
}

/* notification / user popovers */
.pop-wrap{position:relative}
.ember-pop{
  position:absolute;top:47px;right:0;width:min(326px,88vw);background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-float);padding:12px;
  z-index:1040;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .25s,transform .3s var(--spring);
}
.ember-pop.open{opacity:1;pointer-events:auto;transform:none}
/* ember.js lifts popovers to <body> and pins them under their button, so no
   page card, band or sticky table header can paint over them, and the phone
   header's profile button works even though the desktop topbar is hidden */
.ember-pop.floating{position:fixed;top:var(--pop-t,60px);right:var(--pop-r,16px);z-index:1065;max-height:calc(100vh - var(--pop-t,60px) - 12px);overflow-y:auto}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 9px}
.pop-head b{font-size:13px;font-weight:750}
.pop-head button,.pop-head a{font-size:11px;color:var(--ember);font-weight:700;background:none;border:none;padding:0}
.n-item{display:flex;gap:11px;padding:10px 8px;border-radius:var(--r-md);transition:background .2s;text-decoration:none}
.n-item:hover{background:var(--card-2)}
.n-ic{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:12.5px;font-weight:750}
.n-item b{display:block;font-size:12px;font-weight:700;color:var(--ink)}
.n-item p{font-size:11px;color:var(--ink-3);margin:2px 0 0;line-height:1.45}
.n-item time{font-size:10px;color:var(--ink-4);font-weight:650;margin-top:4px;display:block}
.pop-empty{padding:26px 12px;text-align:center;color:var(--ink-4);font-size:12.5px}

/* mobile app header + bottom tab bar (hidden on desktop) */
.ember-mobile-bar,.ember-tabs{display:none}
/* the phone tab bar (z 1070) must sit under an open modal's backdrop (1050), not over the dialog */
body.modal-open .ember-tabs{z-index:1040!important}

/* ==============================================================
   PAGE HEAD
============================================================== */
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}
.page-head .crumbs{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-4);font-weight:500;margin-bottom:8px;flex-wrap:wrap;
}
.page-head .crumbs a{color:var(--ink-4)}
.page-head .crumbs a:hover{color:var(--ember)}
.page-head .crumbs i{width:4px;height:4px;border-radius:50%;background:var(--hair-2);flex:none}
.page-head .crumbs b{color:var(--ink-2);font-weight:650}
.eyebrow{
  font-size:10.5px;font-weight:750;color:var(--ember);margin-bottom:8px;letter-spacing:.11em;
  text-transform:uppercase;display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:99px;background:var(--ember);flex:none}
.page-title{font-size:clamp(23px,2.4vw,31px);font-weight:750;letter-spacing:-.042em;line-height:1.06;margin:0;color:var(--ink)}
.page-sub{color:var(--ink-3);margin-top:8px;font-size:13px;max-width:60ch;line-height:1.6}
.head-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* legacy breadcrumb banner cards become the Ember page head.
   Scoped with :has(.breadcrumb) so ONLY the page banner goes navy —
   the same bg-light-* classes are also used for pale KPI tiles. */
.card.bg-light-info:has(.breadcrumb),
.card.bg-light-primary:has(.breadcrumb){
  /* Glow is a background layer, not a pseudo-element: a pseudo needs either
     z-index:-1 (invisible behind this opaque fill) or isolation, and isolation
     would trap the action dropdowns inside this card's stacking context. */
  background:
    radial-gradient(430px 300px at 88% -20%,var(--ember-glow),transparent 62%),
    linear-gradient(140deg,#123456 0%,#0B2340 46%,#071827 100%)!important;
  border:none!important;color:#EAF1FA!important;border-radius:var(--r-xl)!important;
  /* NOT overflow:hidden - the Export / action dropdowns live in this card and
     were being cut off at the card's bottom edge. */
  box-shadow:var(--sh-hi)!important;overflow:visible;position:relative;
}
.card.bg-light-info:has(.breadcrumb)::after,
.card.bg-light-primary:has(.breadcrumb)::after{
  content:none;
}
.card.bg-light-info:has(.breadcrumb) h1,.card.bg-light-info:has(.breadcrumb) h2,
.card.bg-light-info:has(.breadcrumb) h3,.card.bg-light-info:has(.breadcrumb) h4,
.card.bg-light-info:has(.breadcrumb) h5,.card.bg-light-info:has(.breadcrumb) h6,
.card.bg-light-primary:has(.breadcrumb) h4,.card.bg-light-primary:has(.breadcrumb) h5{
  color:#fff!important;letter-spacing:-.038em;
}
.card.bg-light-info:has(.breadcrumb) .breadcrumb-item,
.card.bg-light-info:has(.breadcrumb) .breadcrumb-item a,
.card.bg-light-info:has(.breadcrumb) .text-muted,
.card.bg-light-info:has(.breadcrumb) p,
.card.bg-light-primary:has(.breadcrumb) .breadcrumb-item,
.card.bg-light-primary:has(.breadcrumb) .breadcrumb-item a{color:#9FB2C8!important}
.card.bg-light-info:has(.breadcrumb) .breadcrumb-item.active,
.card.bg-light-primary:has(.breadcrumb) .breadcrumb-item.active{color:var(--ember-3)!important}
.card.bg-light-info:has(.breadcrumb) .breadcrumb-item a:hover{color:var(--ember-2)!important}
.card.bg-light-info:has(.breadcrumb) img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}

/* --- page-head layout -------------------------------------------------
   Almost every view builds this banner as a Bootstrap .row with a col-8
   title and a col-4 holding 1-4 action buttons. At anything below a very
   wide screen col-4 is far too narrow, so the buttons wrap one-per-line
   into a ragged staircase. Re-lay the banner row as flex: the title takes
   the slack, the actions size to content, right-aligned, wrapping as a
   group. Applies to every page that uses the banner. */
.card.bg-light-info:has(.breadcrumb)>.card-body>.row,
.card.bg-light-primary:has(.breadcrumb)>.card-body>.row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 18px;margin:0;--bs-gutter-x:0;--bs-gutter-y:0;
}
.card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"],
.card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]{
  width:auto;max-width:100%;flex:0 1 auto;padding:0;
}
.card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"]:first-child,
.card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]:first-child{
  flex:1 1 260px;min-width:0;
}
/* the action column: one right-aligned row that wraps as a whole */
.card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child),
.card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child){
  display:flex;justify-content:flex-end;flex:0 1 auto;
}
.card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child)>div,
.card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child)>div{
  display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:9px;width:auto;text-align:right!important;
}
.card.bg-light-info:has(.breadcrumb) .btn,
.card.bg-light-primary:has(.breadcrumb) .btn{margin:0!important;white-space:nowrap}
.card.bg-light-info:has(.breadcrumb) .breadcrumb{margin:0}
/* translucent action button that reads correctly on the navy page head */
.btn-head-ghost{
  background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.22)!important;
  color:#EAF1FA!important;font-weight:600;font-size:13px;border-radius:11px;padding:9px 15px;
  display:inline-flex;align-items:center;gap:7px;line-height:1.2;
  transition:background .2s,border-color .2s,transform .2s;
}
.btn-head-ghost:hover,.btn-head-ghost:focus-visible,.show>.btn-head-ghost{
  background:rgba(255,255,255,.17)!important;border-color:rgba(255,255,255,.4)!important;
  color:#fff!important;transform:translateY(-1px);
}
.btn-head-ghost i{font-size:16px;line-height:1}

/* The views pin this bar at top:70px, which was the legacy fixed header's
   height. The Ember shell has no fixed desktop header, so that offset left a
   strip of scrolled-past content visible above the bar. */
.body-wrapper .sticky-action-bar{
  top:14px!important;background:var(--card)!important;
  border:1px solid var(--hair)!important;border-radius:var(--r-lg)!important;
  box-shadow:0 10px 30px -14px rgba(11,35,64,.28)!important;
}
/* mask the 14px strip above the pinned bar, otherwise the content scrolling
   underneath shows through the gap between it and the viewport edge */
.body-wrapper .sticky-action-bar::before{
  content:"";position:absolute;left:-14px;right:-14px;top:-16px;height:18px;
  background:var(--canvas);pointer-events:none;
}
.btn-head-ghost.dropdown-toggle::after{margin-left:2px;opacity:.7}
.head-actions .dropdown{display:inline-flex}
@media (max-width:767.98px){.head-actions .dropdown{flex:1 1 auto}
.head-actions .dropdown>.btn{width:100%;justify-content:center}}

/* ---- stage tiles that double as filters -------------------------------
   Used by the eSign pipeline; any screen with a small set of mutually
   exclusive states can reuse it. Real <button>s, so they are keyboard
   reachable and can report which one is applied. */
.stat-filters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;margin-bottom:16px;
}
.stat-filter{
  --sf:var(--ink-3);
  position:relative;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:15px 16px 14px;display:flex;flex-direction:column;gap:2px;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;
  box-shadow:var(--sh);
}
.stat-filter::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sf);
  opacity:.85;
}
.stat-filter:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--hair-2)}
.stat-filter:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.stat-filter .sf-n{
  font-size:26px;font-weight:750;letter-spacing:-.045em;color:var(--ink);line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.stat-filter .sf-l{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.stat-filter .sf-h{font-size:11px;color:var(--ink-3);line-height:1.45}
.stat-filter[aria-pressed="true"]{
  border-color:var(--sf);box-shadow:0 0 0 1px var(--sf) inset,var(--sh-md);
}
.stat-filter[aria-pressed="true"] .sf-l{color:var(--sf)}
.stat-filter.tone-neutral{--sf:var(--ink-3)}
.stat-filter.tone-ember{--sf:var(--ember-ink)}
.stat-filter.tone-sea{--sf:var(--sea-ink)}
.stat-filter.tone-mint{--sf:var(--mint-ink)}
.stat-filter.tone-rose{--sf:var(--rose-ink)}
@media (max-width:575.98px){
  .stat-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-filter{padding:12px 13px}
  .stat-filter .sf-n{font-size:22px}
  .stat-filter .sf-h{display:none}
}

/* ---- segmented summary bar: a whole dataset as one bar (on a .band) ----
   Shared by eSign (contract stages) and Drop Clients (decisions). */
.pipe-bar{
  display:flex;height:12px;border-radius:99px;overflow:hidden;margin-top:20px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.pipe-bar i{display:block;height:100%;transition:width 1s var(--ease)}
.pipe-bar i+i{box-shadow:-1px 0 0 rgba(7,24,39,.55)}
.pb-signed{background:#5FCB94} .pb-company{background:#69B4E2}
.pb-client{background:linear-gradient(90deg,#F26C0D,#FF9243)}
.pb-expired{background:#E8899A} .pb-none{background:rgba(255,255,255,.18)}
.pipe-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;font-size:11.5px;color:#B8C6D6;font-weight:600}
.pipe-legend span{display:inline-flex;align-items:center;gap:6px}
.pipe-legend i{width:8px;height:8px;border-radius:3px;display:inline-block}


/* tiles that link rather than toggle (server-side filters) */
a.stat-filter{text-decoration:none;color:inherit}
.stat-filter[aria-current="page"]{border-color:var(--sf);box-shadow:0 0 0 1px var(--sf) inset,var(--sh-md)}
.stat-filter[aria-current="page"] .sf-l{color:var(--sf)}
/* ---- stage tiles: icon, share, meter ---- */
.stat-filter .sf-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stat-filter .sf-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--sf) 13%,transparent);color:var(--sf);
}
.stat-filter .sf-share{
  font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--canvas-2);border-radius:99px;padding:3px 8px;font-variant-numeric:tabular-nums;
}
.stat-filter .sf-meter{display:block;height:4px;border-radius:99px;background:var(--canvas-2);margin-top:11px;overflow:hidden}
.stat-filter .sf-meter i{display:block;height:100%;border-radius:99px;background:var(--sf)}


/* ---- filter bar: a responsive field grid used by the list screens ---- */
.filter-bar{padding:17px 18px!important}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px 16px;align-items:end}
.fb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-field>label{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}
.fb-field .form-control,.fb-field .form-select:not(.select2-hidden-accessible),
.fb-field .select2-container{width:100%!important;min-width:0}
.fb-grow{grid-column:span 2}
/* Action cluster. It takes a full row of the grid rather than one column,
   because sharing a ~220px track with 3 buttons just wraps them one per line. */
.fb-actions{
  grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;min-width:0;
}
.fb-actions .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fb-search{position:relative}
.fb-search>i{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-4);font-size:17px;pointer-events:none;
}
.fb-search .form-control{padding-left:39px}
select.select2-hidden-accessible{
  width:1px!important;height:1px!important;max-width:1px!important;min-width:0!important;
  padding:0!important;border:0!important;overflow:hidden!important;
  position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
}

/* =============================================================
   TABLE -> CARDS on phones.
   A 6-column table in a 316px scroller is not a mobile app. Any table
   marked .table-cards whose <td>s carry data-label collapses into one
   card per row, with the label on the left and the value on the right.
   DataTables keeps working: sorting, paging and search are all DOM-based.
============================================================= */
@media (max-width:900px){
  .table-cards .table-responsive,.table-responsive.table-cards,
  .table-cards.dataTables_wrapper .table-responsive{overflow:visible!important}
  .table-cards table,.table-cards tbody,.table-cards tr,.table-cards td{
    display:block;width:auto!important;max-width:100%;
  }
  .table-cards thead{display:none}
  .table-cards table{border-spacing:0;min-width:0!important}
  .table-cards tbody tr{
    background:var(--card);border:1px solid var(--hair);border-radius:16px;
    padding:14px 15px;margin-bottom:12px;box-shadow:var(--sh);
  }
  .table-cards tbody tr:last-child{margin-bottom:2px}
  /* empty-state / colspan rows keep their natural single-cell layout */
  /* <tfoot> totals: the cells were set to display:block while the tfoot kept
     table-footer-group, so they stacked into the first column as a narrow
     strip of boxes. Lay the footer out as its own summary card. */
  .table-cards tfoot{display:block;width:100%}
  .table-cards tfoot tr{
    display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
    background:var(--canvas-2);border:1px solid var(--hair);border-radius:14px;
    padding:12px 15px;margin-top:4px;
  }
  .table-cards tfoot td,.table-cards tfoot th{
    display:block;border:none!important;padding:5px 0!important;background:transparent!important;
  }
  .table-cards tfoot td:nth-child(odd),.table-cards tfoot th:nth-child(odd){
    text-align:left!important;font-size:11.5px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .table-cards tfoot td:nth-child(even),.table-cards tfoot th:nth-child(even){
    text-align:right!important;font-weight:750;color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .table-cards tbody tr.tr-plain{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
  .table-cards tbody tr.tr-plain td{
    border:none!important;background:transparent!important;
    text-align:center!important;color:var(--ink-3);font-weight:600;
  }
  /* .table-bordered draws a grid on every cell, which reads as a box-in-a-box
     once the row is already a card */
  .table-cards table,.table-cards .table-bordered,
  .table-cards .table-bordered>:not(caption)>*>*{border:none!important}
  .table-cards .dataTables_length,.table-cards .dataTables_filter{text-align:left}
  .table-cards tbody tr.tr-plain td{display:block;text-align:center!important;padding:26px 10px!important}
  .table-cards tbody tr.tr-plain td::before{display:none}
  .table-cards tbody td{
    border:none!important;padding:7px 0!important;
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    text-align:right!important;
  }
  .table-cards tbody td::before{padding-top:1px}
  .table-cards .c-stat{align-items:flex-end}
  .table-cards tbody td::before{
    content:attr(data-label);flex:none;text-align:left;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-3);
  }
  .table-cards tbody td:not([data-label])::before{display:none}
  /* cells that own the whole width of the card */
  .table-cards tbody td.td-full{display:block;text-align:left!important}
  .table-cards tbody td.td-full::before{display:none}
  .table-cards tbody td.td-head{padding-bottom:11px!important;border-bottom:1px solid var(--hair)!important}
  .table-cards tbody td.td-foot{
    padding-top:12px!important;margin-top:4px;border-top:1px solid var(--hair)!important;
  }
  .table-cards tbody td.td-foot>*{justify-content:flex-start!important}
  /* right-hand values keep their own internal alignment */
  .table-cards .c-coll{align-items:flex-end;min-width:0}
  .table-cards .c-collbar{width:auto;min-width:120px}
  .table-cards .c-adv{justify-content:flex-end;max-width:none}
  .table-cards .c-acts{justify-content:space-between;width:100%}
  .table-cards .c-acts .btn{flex:1 1 auto;justify-content:center}
  .table-cards .dataTables_wrapper .dataTables_paginate{margin-top:6px}
  /* views that style td:first/last-child as row-card ends leave a stray
     fill once the row is stacked */
  .table-cards tbody td{background:transparent!important;border-left:none!important;border-radius:0!important}
  /* DataTables' own search box: label above, full-width field */
  .dataTables_wrapper .dataTables_filter label{
    display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  }
  .dataTables_wrapper .dataTables_filter input{width:100%!important;min-width:0!important;margin:0!important}
}

@media (max-width:767.98px){
  .fb-grid{grid-template-columns:1fr}
  .fb-grow{grid-column:span 1}
  .fb-actions{width:100%;justify-content:flex-start}
  .fb-actions .btn{flex:1 1 auto;justify-content:center}
  .filter-bar{padding:15px 15px!important}
}
.card.bg-light-info:has(.breadcrumb)>.card-body{padding:24px 26px!important}
@media (max-width:767.98px){
  .card.bg-light-info:has(.breadcrumb)>.card-body{padding:18px 17px!important}
  .card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child),
  .card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child){
    width:100%;justify-content:flex-start;
  }
  .card.bg-light-info:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child)>div,
  .card.bg-light-primary:has(.breadcrumb)>.card-body>.row>[class*="col-"]:last-child:not(:first-child)>div{
    justify-content:flex-start;width:100%;
  }
  .card.bg-light-info:has(.breadcrumb) .btn{flex:1 1 auto;justify-content:center}
}

/* pale stat tiles (same classes, no breadcrumb) stay light and readable */
.card.bg-light-primary,.card.bg-light-info,
.card.bg-light-success,.card.bg-light-danger,.card.bg-light-warning{
  border:1px solid var(--hair)!important;border-radius:var(--r-xl)!important;
  box-shadow:var(--sh)!important;color:var(--ink)!important;
}
.card.bg-light-primary{background:var(--ember-soft)!important}
.card.bg-light-info{background:var(--sea)!important}
.card.bg-light-success{background:var(--mint)!important}
.card.bg-light-danger{background:var(--rose)!important}
.card.bg-light-warning{background:var(--ember-soft)!important}
.card.bg-light-primary h1,.card.bg-light-primary h2,.card.bg-light-primary h3,
.card.bg-light-primary h4,.card.bg-light-primary h5,.card.bg-light-primary h6,
.card.bg-light-primary p,.card.bg-light-primary span:not(.badge):not(.chip){color:var(--ember-ink)!important}
.card.bg-light-info:not(:has(.breadcrumb)) h1,.card.bg-light-info:not(:has(.breadcrumb)) h2,
.card.bg-light-info:not(:has(.breadcrumb)) h3,.card.bg-light-info:not(:has(.breadcrumb)) h4,
.card.bg-light-info:not(:has(.breadcrumb)) h5,.card.bg-light-info:not(:has(.breadcrumb)) h6,
.card.bg-light-info:not(:has(.breadcrumb)) p{color:var(--sea-ink)!important}
.card.zoom-in{transition:transform .45s var(--spring),box-shadow .4s}
.card.zoom-in:hover{transform:translateY(-4px);box-shadow:var(--sh-hi)!important}

.breadcrumb{margin:0;padding:0;background:none;font-size:11.5px;gap:2px}
.breadcrumb-item{color:var(--ink-4);font-weight:550}
.breadcrumb-item+.breadcrumb-item::before{color:var(--hair-2);content:"›";padding:0 7px}
.breadcrumb-item.active{color:var(--ink-2);font-weight:650}

/* ==============================================================
   BOOTSTRAP COMPONENT RESKIN
   Every legacy view keeps its markup; only the look changes.
============================================================== */

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  box-shadow:var(--sh)!important;
  margin-bottom:16px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.card.shadow-none{box-shadow:var(--sh)!important}
.card-body{padding:20px}

/* Legacy cards put their padding on .card-body. Template-style cards hold
   content directly, so they need the padding on the card itself — without
   this, charts and text run edge-to-edge. */
.card:not(:has(> .card-body)){padding:21px;position:relative}
.card.pad-sm{padding:17px}
.card-header{
  background:transparent;border-bottom:1px solid var(--hair);
  padding:16px 20px;font-weight:750;letter-spacing:-.028em;color:var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.card-footer{background:var(--card-2);border-top:1px solid var(--hair);padding:14px 20px;border-radius:0 0 var(--r-xl) var(--r-xl)}
.card-title{font-size:15px;font-weight:750;letter-spacing:-.028em;color:var(--ink);margin-bottom:4px}
.card-subtitle{font-size:11.5px;color:var(--ink-3);font-weight:500}
.card.card-hover:hover,.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--sh-hi)!important;border-color:var(--hair-2)}

/* ---------- buttons ---------- */
.btn{
  --bs-btn-border-radius:var(--pill);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 21px;border-radius:var(--pill);
  font-weight:650;font-size:13px;letter-spacing:-.01em;line-height:1.2;
  border:1px solid transparent;position:relative;
  transition:transform .4s var(--spring),box-shadow .35s,background .25s,color .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.btn-sm,.btn-group-sm>.btn{padding:8px 15px;font-size:12.5px}
.btn.btn-lg{padding:14px 26px;font-size:14.5px}
.btn i,.btn .ti{font-size:16px;line-height:1}

.btn-primary,.btn-theme{
  /* Was a gradient of --ember -> --ember-2 (#FF9243), which puts white text on
     a 2.4:1 background at the light end. These are the most-clicked controls in
     the app, read all day, so the fill runs across the accessible range
     instead and the bright ember is kept for the glow. */
  background:linear-gradient(120deg,var(--ember-press),#AE4907);
  border-color:transparent;color:#fff;box-shadow:var(--sh-ember);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.btn-theme:hover,.btn-primary.active,.btn-primary:first-child:active{
  background:linear-gradient(120deg,var(--ember),var(--ember-press))!important;
  border-color:transparent!important;color:#fff!important;box-shadow:var(--sh-ember)!important;
}
.btn-dark,.btn-secondary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-dark:hover,.btn-secondary:hover,.btn-dark:active,.btn-secondary:active{
  background:var(--navy-2)!important;border-color:var(--navy-2)!important;color:#fff!important;box-shadow:var(--sh-ember)!important;
}
.btn-success{background:var(--mint-ink);border-color:var(--mint-ink);color:#fff}
.btn-success:hover,.btn-success:active{background:#0F5C3B!important;border-color:#0F5C3B!important;color:#fff!important}
.btn-danger{background:var(--rose-ink);border-color:var(--rose-ink);color:#fff}
.btn-danger:hover,.btn-danger:active{background:#94303F!important;border-color:#94303F!important;color:#fff!important}
.btn-warning{background:var(--ember-3);border-color:var(--ember-3);color:var(--ember-ink)}
.btn-warning:hover,.btn-warning:active{background:var(--ember-2)!important;border-color:var(--ember-2)!important;color:#fff!important}
.btn-info{background:var(--sea-ink);border-color:var(--sea-ink);color:#fff}
.btn-info:hover,.btn-info:active{background:#194B76!important;border-color:#194B76!important;color:#fff!important}
.btn-light,.btn-white{background:var(--card);border-color:var(--hair-2);color:var(--ink)}
.btn-light:hover,.btn-white:hover{background:var(--card-2)!important;border-color:var(--ember)!important;color:var(--ember)!important}
.btn-link{color:var(--ember);text-decoration:none;box-shadow:none;padding-inline:6px}
.btn-link:hover{color:var(--ember-ink);text-decoration:underline}

/* soft "light-*" variants used all over the legacy views */
.btn-light-primary{background:var(--ember-soft);color:var(--ember-ink);border-color:transparent}
.btn-light-primary:hover{background:var(--ember-press);color:#fff}
.btn-light-info{background:var(--sea);color:var(--sea-ink);border-color:transparent}
.btn-light-info:hover{background:var(--sea-ink);color:#fff}
.btn-light-success{background:var(--mint);color:var(--mint-ink);border-color:transparent}
.btn-light-success:hover{background:var(--mint-ink);color:#fff}
.btn-light-danger{background:var(--rose);color:var(--rose-ink);border-color:transparent}
.btn-light-danger:hover{background:var(--rose-ink);color:#fff}
.btn-light-warning{background:var(--ember-soft);color:var(--ember-ink);border-color:transparent}
.btn-light-warning:hover{background:var(--ember-2);color:#fff}

/* outline variants */
.btn-outline-primary,.btn-outline-theme{
  background:transparent;border-color:var(--ember);
  /* --ember as text on white is 3.03:1; the border keeps the brand colour */
  color:var(--ember-ink);
}
.btn-outline-primary:hover,.btn-outline-theme:hover,.btn-outline-primary:active{background:var(--ember-press)!important;border-color:var(--ember-press)!important;color:#fff!important}
.btn-outline-secondary{background:transparent;border-color:var(--hair-2);color:var(--ink-2)}
.btn-outline-secondary:hover,.btn-outline-secondary:active{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.btn-outline-dark{background:transparent;border-color:var(--navy);color:var(--navy)}

/* ---- disabled buttons -------------------------------------------------
   Every .btn-* remap above has specificity 0,1,0. The legacy theme styles
   .btn-success:disabled / .btn-outline-primary:disabled at 0,2,0, so a
   disabled button jumped back to the old Modernize palette - that is the
   mint #13deb9 "Create Payment Link" and the blue #5d87ff "Record".
   One neutral treatment for all of them: a disabled control should read as
   unavailable, not as a differently-coloured live button. */
.btn:disabled,.btn.disabled,.btn[disabled],fieldset:disabled .btn,
a.btn.disabled,.btn-primary:disabled,.btn-success:disabled,.btn-info:disabled,
.btn-warning:disabled,.btn-danger:disabled,.btn-secondary:disabled,.btn-dark:disabled,
.btn-outline-primary:disabled,.btn-outline-secondary:disabled,.btn-outline-success:disabled,
.btn-outline-info:disabled,.btn-outline-warning:disabled,.btn-outline-danger:disabled,
.btn-outline-dark:disabled{
  background:var(--canvas-2)!important;background-image:none!important;
  border-color:var(--hair-2)!important;color:var(--ink-4)!important;
  box-shadow:none!important;opacity:1!important;cursor:not-allowed;transform:none!important;
}
.btn:disabled:hover,.btn.disabled:hover,.btn[disabled]:hover{
  background:var(--canvas-2)!important;border-color:var(--hair-2)!important;
  color:var(--ink-4)!important;transform:none!important;
}

/* ---- dropdowns must never be clipped by their container ----------------
   Menus live inside cards, sticky bars and .table-responsive scrollers. Let
   the container open up while a menu inside it is showing. */
.table-responsive:has(.dropdown-menu.show),
.dataTables_wrapper:has(.dropdown-menu.show),
.table-container:has(.dropdown-menu.show),
.card:has(.dropdown-menu.show){overflow:visible!important}
.dropdown-menu{z-index:1080}
/* Sibling cards paint in source order, so a menu in an earlier card would sit
   under the next one. Lift whichever card currently owns an open menu. */
.card:has(.dropdown-menu.show),.sticky-action-bar:has(.dropdown-menu.show),
.filter-bar:has(.dropdown-menu.show),tr:has(.dropdown-menu.show){position:relative;z-index:1080}
.sticky-action-bar .dropdown-menu,.ember-mobile-bar .dropdown-menu{z-index:1085}

.btn-outline-dark:hover,.btn-outline-dark:active{background:var(--navy)!important;color:#fff!important}
.btn-outline-danger{background:transparent;border-color:var(--rose-ink);color:var(--rose-ink)}
.btn-outline-danger:hover,.btn-outline-danger:active{background:var(--rose-ink)!important;border-color:var(--rose-ink)!important;color:#fff!important}
.btn-outline-success{background:transparent;border-color:var(--mint-ink);color:var(--mint-ink)}
.btn-outline-success:hover,.btn-outline-success:active{background:var(--mint-ink)!important;border-color:var(--mint-ink)!important;color:#fff!important}
.btn-outline-info{background:transparent;border-color:var(--sea-ink);color:var(--sea-ink)}
.btn-outline-info:hover,.btn-outline-info:active{background:var(--sea-ink)!important;border-color:var(--sea-ink)!important;color:#fff!important}
.btn-outline-warning{background:transparent;border-color:var(--ember-2);color:var(--ember-ink)}
.btn-outline-warning:hover,.btn-outline-warning:active{background:var(--ember-2)!important;border-color:var(--ember-2)!important;color:#fff!important}

.btn-group>.btn{border-radius:0}
.btn-group>.btn:first-child{border-top-left-radius:var(--pill);border-bottom-left-radius:var(--pill)}
.btn-group>.btn:last-child{border-top-right-radius:var(--pill);border-bottom-right-radius:var(--pill)}
.btn-group>.btn:hover{transform:none;z-index:2}
.btn-close{
  border-radius:50%;opacity:.55;padding:9px;background-size:11px;
  transition:opacity .2s,transform .3s var(--spring);
}
.btn-close:hover{opacity:1;transform:rotate(90deg)}

/* ---------- forms ---------- */
.form-label,.field-label,.form-label-theme{
  font-size:11px;font-weight:750;color:var(--ink-2);margin-bottom:7px;
  letter-spacing:.045em;text-transform:uppercase;display:block;
}
.form-control,.form-select,.form-control-theme,.form-select-theme,.dataTables_filter input,.dataTables_length select{
  width:100%;padding:12px 15px;border-radius:var(--r-md)!important;
  border:1.5px solid var(--hair-2)!important;background:var(--card);color:var(--ink);
  font-size:14px;line-height:1.4;box-shadow:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.form-control:disabled,.form-select:disabled,.form-control[readonly],
.form-control:disabled::placeholder{
  background:var(--canvas-2)!important;border-color:var(--hair)!important;
  color:var(--ink-3)!important;cursor:not-allowed;box-shadow:none!important;
}

.form-control:hover,.form-select:hover{background:var(--card-2)}
.form-control:focus,.form-select:focus,.dataTables_filter input:focus{
  outline:none;border-color:var(--ember)!important;background:var(--card);
  box-shadow:0 0 0 4px var(--ember-soft)!important;color:var(--ink);
}
.form-control::placeholder{color:var(--ink-4)}
.form-control:disabled,.form-control[readonly],.form-select:disabled{background:var(--canvas-2);color:var(--ink-3);cursor:not-allowed}
.form-control-sm,.form-select-sm{padding:8.5px 12px;font-size:13px}
.form-control-lg{padding:15px 18px;font-size:15px}
textarea.form-control{min-height:104px;line-height:1.6;resize:vertical}
.form-select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737E8F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
}
.form-text{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.form-group{margin-bottom:16px}
.input-group{border-radius:var(--r-md);overflow:hidden;border:1.5px solid var(--hair-2);background:var(--card)}
.input-group:focus-within{border-color:var(--ember);box-shadow:0 0 0 4px var(--ember-soft)}
.input-group>.form-control,.input-group>.form-select{border:none!important;box-shadow:none!important;border-radius:0!important}
.input-group>.form-control:focus{box-shadow:none!important}
.input-group-text{
  background:var(--card-2);border:none;border-right:1px solid var(--hair);
  color:var(--ink-3);font-size:12.5px;font-weight:650;padding:0 14px;
}
.input-group>.btn{border-radius:0;transform:none!important}

.form-check{padding-left:1.8em;min-height:22px}
.form-check-input{
  width:19px;height:19px;margin-left:-1.8em;margin-top:.15em;
  border:1.8px solid var(--hair-2);background-color:var(--card);
  transition:background-color .25s,border-color .25s,transform .3s var(--spring);cursor:pointer;
}
.form-check-input:checked{background-color:var(--ember);border-color:var(--ember)}
.form-check-input:focus{border-color:var(--ember);box-shadow:0 0 0 4px var(--ember-soft)}
.form-check-label{font-size:13px;color:var(--ink-2);cursor:pointer;font-weight:550}
.form-switch .form-check-input{width:44px;height:24px;border-radius:var(--pill);margin-top:0}
.form-switch .form-check-input:checked{background-color:var(--ember);border-color:var(--ember)}
.btn-check:checked+.btn{background:var(--ember-press)!important;border-color:var(--ember-press)!important;color:#fff!important}

/* ---------- tables ---------- */
.table{
  --bs-table-bg:transparent;--bs-table-color:var(--ink);
  --bs-table-border-color:var(--hair);
  --bs-table-striped-bg:var(--card-2);--bs-table-striped-color:var(--ink);
  --bs-table-hover-bg:var(--card-2);--bs-table-hover-color:var(--ink);
  width:100%;margin-bottom:0;vertical-align:middle;color:var(--ink);
  border-color:var(--hair);
}
.table>:not(caption)>*>*{background-color:transparent}
.table thead th,.table>thead>tr>th,th{
  text-align:left;font-size:10.5px;font-weight:750;color:var(--ink-3);
  padding:12px 14px;border-bottom:1px solid var(--hair);
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  background:var(--card-2)!important;
}
.table tbody td,.table>tbody>tr>td,td{
  padding:13px 14px;border-bottom:1px solid var(--hair);font-size:12.8px;
  vertical-align:middle;color:var(--ink-2);
}
.table tbody tr{transition:background .2s}
.table tbody tr:hover{background:var(--card-2)}
.table tbody tr:last-child td{border-bottom:none}
.table-bordered,.table-bordered>:not(caption)>*,.table-bordered>:not(caption)>*>*{border-color:var(--hair)}
.table-light,.table-light>th{background:var(--card-2)!important;color:var(--ink-2)!important}
.table-dark{--bs-table-bg:var(--navy);--bs-table-color:#fff;--bs-table-border-color:rgba(255,255,255,.1)}
.table-dark th,.table-dark td{background:var(--navy)!important;color:#fff!important;border-color:rgba(255,255,255,.1)!important}
.table-responsive,.table-container{
  overflow-x:auto!important;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--card);
}
.table-responsive>.table,.table-container>.table{margin-bottom:0}
/* Standing alone the scroller reads as its own card. Inside a .card that is a
   box drawn inside a box, so drop the chrome and let the card own the edge. */
.card .table-responsive,.card .table-container,
.card .dataTables_wrapper,.card-body .table-responsive,.card-body .table-container{
  border:none;background:transparent;border-radius:0;
}
.table-responsive::-webkit-scrollbar{height:8px}
tr.sticky-head,.sticky-head th{background:var(--card-2)!important}
td.sticky-name{background:var(--card-2)!important}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5.5px 11px;border-radius:var(--pill);
  font-size:11px;font-weight:700;letter-spacing:-.005em;line-height:1.3;white-space:nowrap;
}
.badge.bg-primary,.badge-primary{background:var(--ember-soft)!important;color:var(--ember-ink)!important}
.badge.bg-success,.badge-success{background:var(--mint)!important;color:var(--mint-ink)!important}
.badge.bg-danger,.badge-danger{background:var(--rose)!important;color:var(--rose-ink)!important}
.badge.bg-warning,.badge-warning{background:var(--ember-soft)!important;color:var(--ember-ink)!important}
.badge.bg-info,.badge-info{background:var(--sea)!important;color:var(--sea-ink)!important}
.badge.bg-secondary,.badge-default{background:var(--navy-soft)!important;color:var(--navy)!important}
.badge.bg-dark{background:var(--navy)!important;color:#fff!important}
.badge.bg-light{background:var(--canvas-2)!important;color:var(--ink-2)!important}

/* ---------- alerts ---------- */
.alert{
  border-radius:var(--r-lg);border:1px solid transparent;padding:14px 18px;
  font-size:13px;font-weight:600;display:flex;align-items:center;gap:11px;
}
.alert-success{background:var(--mint);color:var(--mint-ink);border-color:transparent}
.alert-danger,.alert-light-danger{background:var(--rose);color:var(--rose-ink);border-color:transparent}
.alert-warning{background:var(--ember-soft);color:var(--ember-ink);border-color:transparent}
.alert-info{background:var(--sea);color:var(--sea-ink);border-color:transparent}
.alert-primary{background:var(--ember-soft);color:var(--ember-ink);border-color:transparent}

/* ---------- modals ---------- */
.modal-content{
  border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--card);
  box-shadow:var(--sh-float);overflow:hidden;
}
.modal-header{
  border-bottom:1px solid var(--hair);padding:18px 22px;background:var(--card);
}
.modal-title{font-size:16px;font-weight:750;letter-spacing:-.03em;color:var(--ink)}
.modal-body{padding:22px;color:var(--ink-2)}
.modal-footer{border-top:1px solid var(--hair);padding:15px 22px;background:var(--card-2);gap:9px}
.modal-backdrop.show{opacity:.5;background:#071423}
.modal.fade .modal-dialog{transition:transform .4s var(--ease),opacity .3s;transform:translateY(18px) scale(.985)}
.modal.show .modal-dialog{transform:none}
.modal-header .btn-close-white,.modal-header.bg-primary{background:var(--navy)!important;color:#fff}
.modal-header.bg-primary .modal-title{color:#fff}

/* ---------- dropdowns ---------- */
.dropdown-menu{
  border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--card);
  box-shadow:var(--sh-float);padding:8px;min-width:190px;
}
.dropdown-item{
  border-radius:var(--r-sm);padding:9.5px 12px;font-size:13px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;transition:background .2s,color .2s;
}
.dropdown-item:hover,.dropdown-item:focus{background:var(--ember-soft);color:var(--ember-ink)}
.dropdown-item.active,.dropdown-item:active{background:var(--ember-press);color:#fff}
.dropdown-divider{border-color:var(--hair);margin:6px 0}
.dropdown-toggle::after{margin-left:7px;opacity:.5}

/* ---------- nav tabs / pills ---------- */
.nav-tabs{border-bottom:1px solid var(--hair);gap:4px}
.nav-tabs .nav-link{
  border:none;border-bottom:2.5px solid transparent;border-radius:0;
  padding:11px 16px;font-size:13px;font-weight:700;color:var(--ink-3);
  transition:color .25s,border-color .25s;
}
.nav-tabs .nav-link:hover{color:var(--ember);border-bottom-color:var(--ember-soft)}
.nav-tabs .nav-link.active{color:var(--ember);background:transparent;border-bottom-color:var(--ember)}
.nav-pills{gap:6px}
.nav-pills .nav-link{
  border-radius:var(--pill);padding:9px 17px;font-size:12.5px;font-weight:700;color:var(--ink-3);
  background:var(--canvas-2);transition:all .25s;
}
.nav-pills .nav-link:hover{color:var(--ember)}
.nav-pills .nav-link.active{background:var(--navy);color:#fff}

/* ---------- pagination ---------- */
.pagination{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:16px 0 0;align-items:center;justify-content:center}
.pagination .page-link,.pagination a{
  display:grid;place-items:center;min-width:36px;height:36px;padding:0 11px;
  border-radius:10px!important;border:1px solid var(--hair-2)!important;
  background:var(--card)!important;color:var(--ink-2)!important;
  font-weight:650;font-size:12.5px;text-decoration:none;margin:0;
  transition:transform .3s var(--spring),border-color .25s,background .25s,color .25s;
}
.pagination .page-link:hover,.pagination a:hover{
  transform:translateY(-2px);border-color:var(--ember)!important;
  background:var(--card)!important;color:var(--ember)!important;
}
.pagination .active .page-link,.pagination .page-item.active .page-link,.pagination .active a{
  background:var(--ember-press)!important;border-color:var(--ember-press)!important;color:#fff!important;
}
.pagination .disabled .page-link,.pagination .disabled a,.pagination .disabled{
  color:var(--ink-4)!important;pointer-events:none;opacity:.55;
}
li.pagination-item{height:auto}
.pagination-container,.pagination-wrapper{display:flex;justify-content:center;margin-top:8px}

/* ---------- list groups / accordion / progress ---------- */
.list-group{border-radius:var(--r-lg);overflow:hidden}
.list-group-item{
  background:var(--card);border-color:var(--hair);color:var(--ink-2);
  padding:13px 16px;font-size:13px;
}
.list-group-item:hover{background:var(--card-2)}
.list-group-item.active{background:var(--navy);border-color:var(--navy);color:#fff}
.accordion-item{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg)!important;
  margin-bottom:9px;overflow:hidden;
}
.accordion-button{
  background:var(--card);color:var(--ink);font-weight:700;font-size:13.5px;padding:15px 18px;box-shadow:none;
}
.accordion-button:not(.collapsed){background:var(--ember-soft);color:var(--ember-ink);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 4px var(--ember-soft);border-color:var(--ember)}
.accordion-button::after{filter:none}
.accordion-body{padding:16px 18px;color:var(--ink-2);font-size:13px}
.progress{
  height:7px;border-radius:99px;background:var(--canvas-2);overflow:hidden;
}
.progress-bar{background:linear-gradient(90deg,var(--ember),var(--ember-2));border-radius:99px}
.spinner-border,.spinner-grow{color:var(--ember)}

/* ---------- offcanvas ---------- */
.offcanvas{background:var(--card);color:var(--ink);border:none;box-shadow:var(--sh-float)}
.offcanvas-header{border-bottom:1px solid var(--hair);padding:18px 20px}
.offcanvas-body{padding:20px}

/* ==============================================================
   PLUGIN RESKIN — DataTables · Select2 · toastr · ApexCharts
============================================================== */
.dataTables_wrapper{padding:0}
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{
  margin-bottom:14px;font-size:12.5px;color:var(--ink-3);font-weight:600;
}
.dataTables_wrapper .dataTables_length select{width:auto;display:inline-block;padding:7px 30px 7px 12px;margin:0 7px}
/* The length + search row: DataTables emits them as two bootstrap columns
   that stack with a large gap. Put them on one line, opposite ends, with the
   same vertical rhythm as the rest of the card. */
.dataTables_wrapper>.row:first-child{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;margin:0 0 14px;--bs-gutter-x:0;--bs-gutter-y:0;
}
.dataTables_wrapper>.row:first-child>[class*="col"]{width:auto;flex:0 1 auto;padding:0}
.dataTables_wrapper .dataTables_length label,.dataTables_wrapper .dataTables_filter label{
  margin:0;display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);
  font-size:12px;font-weight:600;
}
/* DataTables has two layouts: the bootstrap5 integration wraps its controls in
   .row (handled above), and the plain build drops them straight into the
   wrapper, where they stack with a gap. Grid the bare one onto the same
   length-left / search-right rhythm. */
.dataTables_wrapper:not(:has(>.row)){
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;
}
.dataTables_wrapper:not(:has(>.row))>.dataTables_length{grid-area:1/1;margin:0;justify-self:start}
.dataTables_wrapper:not(:has(>.row))>.dataTables_filter{grid-area:1/2;margin:0;justify-self:end;text-align:right}
.dataTables_wrapper:not(:has(>.row))>table,
.dataTables_wrapper:not(:has(>.row))>.table-responsive,
.dataTables_wrapper:not(:has(>.row))>.dataTables_scroll{grid-column:1/-1}
.dataTables_wrapper:not(:has(>.row))>.dataTables_info{grid-column:1;justify-self:start;padding-top:0}
.dataTables_wrapper:not(:has(>.row))>.dataTables_paginate{grid-column:2;justify-self:end;padding-top:0;margin-bottom:0}
@media (max-width:900px){
  .dataTables_wrapper:not(:has(>.row)){grid-template-columns:minmax(0,1fr)}
  .dataTables_wrapper:not(:has(>.row))>*{grid-column:1!important;grid-area:auto!important;justify-self:stretch!important}
  /* stretched grid items still centred their inline-flex label; pin it left */
  .dataTables_wrapper:not(:has(>.row))>.dataTables_length,
  .dataTables_wrapper:not(:has(>.row))>.dataTables_filter{
    text-align:left;display:flex;justify-content:flex-start;
  }
  .dataTables_wrapper:not(:has(>.row))>.dataTables_length>label,
  .dataTables_wrapper:not(:has(>.row))>.dataTables_filter>label{margin-right:auto;width:100%}
}

/* tfoot totals read as a summary strip, not another data row */
.table tfoot td,.table tfoot th{
  border-top:1px solid var(--hair-2)!important;border-bottom:none!important;
  font-weight:700;color:var(--ink);padding:14px 14px;background:var(--canvas-2);
}
.table tfoot tr:first-child td:first-child{border-bottom-left-radius:12px}
.table tfoot tr:last-child td:last-child{border-bottom-right-radius:12px}
.dataTables_empty{color:var(--ink-3);padding:34px 12px!important;font-weight:600}

.dataTables_wrapper .dataTables_filter input{width:auto;min-width:210px;display:inline-block;margin-left:9px;padding:9px 15px}
.dataTables_wrapper .dataTables_info{font-size:12px;color:var(--ink-3);padding-top:14px;font-weight:600}
.dataTables_wrapper .dataTables_paginate{padding-top:12px;margin-bottom:20px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:10px!important;border:1px solid var(--hair-2)!important;
  background:var(--card)!important;color:var(--ink-2)!important;
  padding:7px 13px!important;margin:0 2px;font-weight:650;font-size:12.5px;cursor:pointer;
  transition:transform .3s var(--spring),border-color .25s,color .25s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  transform:translateY(-2px);border-color:var(--ember)!important;
  background:var(--card)!important;color:var(--ember)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.45;pointer-events:none}
.dataTables_wrapper .dataTables_paginate{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end;
}
.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 4px;color:var(--ink-4)}
/* footer row: count on the left, pager on the right, stacked on phones */
.dataTables_wrapper .row:last-child{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0;
  --bs-gutter-x:0;
}
.dataTables_wrapper .row:last-child>[class*="col"]{width:auto;flex:1 1 auto;padding:0}
@media (max-width:900px){
  .dataTables_wrapper .dataTables_paginate{justify-content:center;gap:4px;width:100%}
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    padding:7px 11px;font-size:12.5px;min-width:0;
  }
  /* 32 numbered pages will not fit a phone; keep first/last, current and
     its neighbours, and let Prev/Next do the walking */
  .dataTables_wrapper .dataTables_paginate span .paginate_button:not(.current):not(:first-child):not(:last-child){display:none}
  .dataTables_wrapper .dataTables_info{width:100%;text-align:center;padding-top:6px}
  .dataTables_wrapper .dataTables_length{width:100%;justify-content:center;display:flex;align-items:center}
}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border:1.5px solid var(--hair-2)!important;border-radius:var(--r-md)!important;
  background:var(--card)!important;min-height:47px;padding:6px 8px;
  transition:border-color .25s,box-shadow .25s;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--ember)!important;box-shadow:0 0 0 4px var(--ember-soft);outline:none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:33px;color:var(--ink);padding-left:8px;font-size:14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:45px}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--navy-soft)!important;color:var(--navy)!important;
  border:none!important;border-radius:var(--pill)!important;
  padding:5px 11px 5px 9px;font-size:12px;font-weight:700;margin:3px 4px 3px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color:var(--navy)!important;margin-right:5px;font-weight:700;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--ember)!important}
.select2-dropdown{
  border:1px solid var(--hair)!important;border-radius:var(--r-md)!important;
  background:var(--card);box-shadow:var(--sh-float);overflow:hidden;
}
.select2-search--dropdown .select2-search__field{
  border:1.5px solid var(--hair-2)!important;border-radius:var(--r-sm);padding:9px 12px;background:var(--card);color:var(--ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--ember-soft)!important;color:var(--ember-ink)!important;
}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--canvas-2);color:var(--ink)}
.select2-results__option{padding:9px 12px;font-size:13px}

#toast-container>div{
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-float)!important;
  opacity:1!important;font-size:13px;font-weight:600;padding:15px 18px 15px 50px;
}
#toast-container>.toast-success{background-color:var(--mint-ink)!important}
#toast-container>.toast-error{background-color:var(--rose-ink)!important}
#toast-container>.toast-warning{background-color:var(--ember)!important}
#toast-container>.toast-info{background-color:var(--navy)!important}

.apexcharts-tooltip{
  border-radius:var(--r-md)!important;border:none!important;
  box-shadow:var(--sh-float)!important;background:var(--navy)!important;color:#fff!important;
}
.apexcharts-tooltip-title{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.1)!important;font-weight:750}
.apexcharts-legend-text{color:var(--ink-2)!important;font-family:var(--sans)!important;font-size:12px!important;font-weight:600}
.apexcharts-xaxistooltip,.apexcharts-yaxistooltip{background:var(--navy)!important;color:#fff!important;border:none!important}
.apexcharts-text{fill:var(--ink-3)!important;font-family:var(--sans)!important}
.apexcharts-gridline{stroke:var(--hair)!important}

/* ==============================================================
   EMBER NATIVE COMPONENTS (used by the new dashboards & heads)
============================================================== */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5.5px 12px;border-radius:var(--pill);
  font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:-.01em;
}
.chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.chip .dot.pulse{animation:emberPulse 2s infinite}
@keyframes emberPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chip.mint{background:var(--mint);color:var(--mint-ink)}
.chip.rose{background:var(--rose);color:var(--rose-ink)}
.chip.sea{background:var(--sea);color:var(--sea-ink)}
.chip.iris{background:var(--navy-soft);color:var(--navy)}
.chip.ember{background:var(--ember-soft);color:var(--ember-ink)}
.chip.line{border:1px solid var(--hair-2);color:var(--ink-2)}
.chip.glass{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px)}

/* command band (hero) */
.band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:26px 28px;color:#EAF1FA;
  background:linear-gradient(140deg,#123456 0%,#0B2340 46%,#071827 100%);
  box-shadow:var(--sh-hi);margin-bottom:16px;
}
.band::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.band .aur{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none}
.band .a1{width:420px;height:420px;background:var(--ember);opacity:.42;top:-190px;right:-90px}
.band .a2{width:300px;height:300px;background:#2E77C9;opacity:.4;bottom:-180px;left:22%}
.band .a3{width:200px;height:200px;background:#FFB877;opacity:.22;top:38%;right:24%}
.band .rings{position:absolute;right:-70px;top:-90px;width:400px;height:400px;pointer-events:none;opacity:.5}
.band .rings i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(255,255,255,.11)}
.band .rings i:nth-child(1){width:190px;height:190px}
.band .rings i:nth-child(2){width:280px;height:280px}
.band .rings i:nth-child(3){width:370px;height:370px}
.band-inner{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center;z-index:2}
.band-eyebrow{
  font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-3);
  display:flex;align-items:center;gap:9px;margin-bottom:13px;
}
.band-eyebrow::before{content:"";width:16px;height:2px;background:var(--ember);border-radius:99px;flex:none}
.band h2{font-size:clamp(20px,2.1vw,27px);font-weight:750;letter-spacing:-.04em;line-height:1.16;margin-bottom:10px;color:#fff}
.band h2 em{font-style:normal;color:var(--ember-2)}
.band p{font-size:13px;color:#9FB2C8;line-height:1.62;max-width:46ch;margin:0}
.band-metrics{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.bm span{font-size:10px;font-weight:700;color:#7E93AC;letter-spacing:.07em;text-transform:uppercase;display:block}
.bm b{font-size:22px;font-weight:750;letter-spacing:-.045em;display:block;margin-top:5px;color:#fff}
.band-side{display:flex;flex-direction:column;gap:11px}
.glass-tile{
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  padding:14px 16px;backdrop-filter:blur(14px);display:flex;align-items:center;gap:13px;
  transition:transform .4s var(--spring),background .3s;
}
.glass-tile:hover{transform:translateX(-4px);background:rgba(255,255,255,.11)}
.glass-tile .gi{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--ember),var(--ember-2));color:#fff;font-weight:750;font-size:14px;
}
.glass-tile b{font-size:16px;font-weight:750;letter-spacing:-.035em;display:block;color:#fff}
.glass-tile span{font-size:11px;color:#9FB2C8;display:block;margin-top:2px}
.band-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden;margin-top:17px}
.band-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--ember-3));width:0;transition:width 1.2s var(--ease)}
.band-foot{display:flex;justify-content:space-between;font-size:11px;color:#9FB2C8;margin-top:9px;font-weight:600;gap:12px;flex-wrap:wrap}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpis.k2{grid-template-columns:repeat(2,1fr)}
.kpi{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--sh);padding:19px;display:flex;flex-direction:column;gap:10px;
  overflow:hidden;position:relative;text-decoration:none;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
a.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh-hi);border-color:var(--hair-2)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:750;font-size:15px;flex:none}
.kpi-num{font-size:27px;font-weight:750;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi-lbl{color:var(--ink-3);font-size:11.5px;margin-top:5px;font-weight:600;line-height:1.4}
.kpi-foot{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;margin-top:2px}

/* status tiles */
.status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.status-tile{
  border-radius:var(--r-lg);padding:15px;display:flex;flex-direction:column;gap:14px;
  border:1px solid rgba(255,255,255,.6);text-decoration:none;color:inherit;
  transition:transform .45s var(--spring),box-shadow .4s;
}
.status-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-hi)}
html[data-ember-theme="dark"] .status-tile{border-color:transparent}
.st-top{display:flex;align-items:center;gap:10px}
.st-name{font-weight:750;font-size:12.5px;letter-spacing:-.025em}
.st-sub{font-size:10.5px;opacity:.72;margin-top:1px}
.st-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.st-bottom span{font-size:10px;opacity:.75;line-height:1.4}
.st-bottom b{display:block;font-weight:700}
.st-pill{background:var(--card);border-radius:var(--pill);padding:5px 11px;font-weight:750;font-size:10px;flex:none}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento .b2{grid-column:span 2}.bento .b3{grid-column:span 3}
.bento .b4{grid-column:span 4}.bento .b6{grid-column:span 6}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:9px}
.fn-row{display:grid;grid-template-columns:minmax(80px,110px) 1fr 54px;align-items:center;gap:12px}
.fn-lbl{font-size:11.5px;font-weight:650;color:var(--ink-2)}
.fn-track{height:26px;border-radius:8px;background:var(--canvas-2);overflow:hidden}
.fn-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--navy-3),var(--navy));width:0;transition:width 1s var(--ease)}
.fn-row.hot .fn-fill{background:linear-gradient(90deg,var(--ember-2),var(--ember))}
.fn-val{font-size:12px;font-weight:750;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* generic rows / timeline */
.row-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.row-item:last-child{border:none}
.row-name{font-weight:700;font-size:12.5px;letter-spacing:-.02em;color:var(--ink)}
.row-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
.row-right{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-4);font-weight:650;flex:none}
.mini-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:13px;font-weight:750}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px;flex-wrap:wrap}
.section-title{font-size:15px;font-weight:750;letter-spacing:-.028em;color:var(--ink);margin:0}
.section-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-weight:500}
.accent-rule{height:3px;width:34px;border-radius:99px;background:var(--ember);margin-bottom:12px}
.empty-state{padding:44px 20px;text-align:center;color:var(--ink-4)}
.empty-state .ei{
  width:56px;height:56px;border-radius:18px;background:var(--canvas-2);color:var(--ink-4);
  display:grid;place-items:center;margin:0 auto 14px;
}
.empty-state b{display:block;font-size:14px;font-weight:750;color:var(--ink-2);margin-bottom:5px}
.empty-state p{font-size:12.5px;color:var(--ink-4);margin:0}

/* toast */
#emberToast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--navy-ink);color:#fff;padding:13px 24px;border-radius:var(--pill);
  font-weight:650;font-size:13px;opacity:0;pointer-events:none;z-index:2000;box-shadow:var(--sh-float);
  transition:transform .45s var(--spring),opacity .35s;
}
#emberToast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* scroll reveal — content is visible by default and only hidden once
   ember.js has confirmed it can animate it back in. If the script fails to
   load, or IntersectionObserver never fires, the page still renders. */
html.ember-anim .reveal{opacity:0;transform:translateY(18px)}
html.ember-anim .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease)}

/* ---------- command palette ---------- */
.ember-cmd-veil{
  position:fixed;inset:0;background:rgba(7,20,35,.5);backdrop-filter:blur(7px);
  z-index:1500;opacity:0;pointer-events:none;transition:opacity .3s;
  display:grid;place-items:start center;padding-top:12vh;
}
.ember-cmd-veil.open{opacity:1;pointer-events:auto}
.ember-cmd{
  width:min(570px,92vw);background:var(--card);border-radius:var(--r-xl);
  box-shadow:var(--sh-float);overflow:hidden;border:1px solid var(--hair);
  transform:translateY(-14px) scale(.97);transition:transform .35s var(--spring);
}
.ember-cmd-veil.open .ember-cmd{transform:none}
.ember-cmd-in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hair);color:var(--ink-3)}
.ember-cmd-in input{flex:1;border:none;outline:none;font-size:15px;font-weight:500;background:none;color:var(--ink);min-width:0}
.ember-cmd-in .kbd{font-size:10px;border:1px solid var(--hair-2);border-radius:6px;padding:2.5px 7px;font-weight:700;flex:none}
.ember-cmd-list{max-height:56vh;overflow-y:auto;padding:8px}
.ember-cmd-sec{font-size:10px;font-weight:750;color:var(--ink-4);padding:11px 13px 5px;letter-spacing:.08em;text-transform:uppercase}
.ember-cmd-item{
  display:flex;align-items:center;gap:12px;padding:10.5px 13px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
}
.ember-cmd-item .ico{
  width:28px;height:28px;border-radius:9px;background:var(--canvas-2);display:grid;place-items:center;
  color:var(--ink-3);flex:none;font-size:14px;font-weight:750;
}
.ember-cmd-item.on{background:var(--ember-soft);color:var(--ember-ink)}
.ember-cmd-item.on .ico{background:var(--ember-press);color:#fff}
.ember-cmd-empty{padding:32px;text-align:center;color:var(--ink-4);font-size:12.5px}
@media (max-width:900px){
  .ember-cmd-veil{padding-top:0;place-items:end center}
  .ember-cmd{width:100%;border-radius:24px 24px 0 0;transform:translateY(100%)}
  .ember-cmd-list{max-height:62vh;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ==============================================================
   AUTH — split sign-in screen
============================================================== */
.ember-login{
  position:fixed;inset:0;display:grid;grid-template-columns:1.02fr .98fr;
  background:var(--canvas);overflow:auto;
}
.l-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:8vh 6vw;position:relative;min-width:0;
}
.l-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 26px}
.l-brand img{height:62px;width:auto;max-width:min(320px,100%);object-fit:contain}
.l-brand .bfall{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.04em;color:var(--ink)}
.l-brand .bmark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(135deg,var(--ember),var(--ember-2));box-shadow:0 8px 18px -6px var(--ember-glow);
}
.l-brand em{font-style:normal;color:var(--ember)}
.l-inner{max-width:430px;width:100%;margin:0 auto}
.l-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,58px);
  line-height:1.03;margin-bottom:16px;letter-spacing:-.01em;color:var(--ink);
}
.l-title em{font-style:italic;color:var(--ember)}
.l-sub{color:var(--ink-3);font-size:14px;margin-bottom:34px;max-width:44ch;line-height:1.7}
.l-inner .form-label{margin-bottom:8px}
.l-inner .mb-3,.l-inner .mb-4{margin-bottom:15px!important}
.login-btn{width:100%;justify-content:center;padding:16px;font-size:15px;margin-top:8px}
/* the sign-in action must read as the primary step, also on a dark sheet
   (the generic dark-theme .btn-dark rule further down uses !important) */
html[data-ember-theme="dark"] .login-btn.btn-dark{background:var(--ember)!important;border-color:var(--ember)!important;color:#fff!important}
html[data-ember-theme="dark"] .login-btn.btn-dark:hover,
html[data-ember-theme="dark"] .login-btn.btn-dark:active{background:var(--ember-press)!important;border-color:var(--ember-press)!important;color:#fff!important}
.l-note{font-size:12px;color:var(--ink-4);margin-top:20px;line-height:1.6}
.l-error{
  background:var(--rose);color:var(--rose-ink);border-radius:var(--r-md);
  padding:12px 15px;font-size:12.5px;font-weight:650;margin-bottom:16px;
}

.l-right{
  margin:14px;border-radius:26px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#123456,#071827);
  display:flex;align-items:flex-end;padding:48px;border:1px solid rgba(255,255,255,.08);
}
.l-right::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay}
.orbit{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(255,255,255,.09);transform:translate(-50%,-50%)}
.orbit.o1{width:min(46vw,520px);height:min(46vw,520px)}
.orbit.o2{width:min(32vw,360px);height:min(32vw,360px);border-color:rgba(255,255,255,.06)}
.orbit .sat{
  position:absolute;top:-5px;left:50%;width:11px;height:11px;border-radius:50%;
  background:var(--ember-2);box-shadow:0 0 26px 5px rgba(242,108,13,.55);
}
.g-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.g-blob.gb1{width:440px;height:440px;background:var(--ember);top:-160px;right:-120px}
.g-blob.gb2{width:300px;height:300px;background:#2E77C9;bottom:-140px;left:-90px;opacity:.3}
.l-quote{position:relative;color:#F5F4F8;max-width:38ch;z-index:2}
.l-quote h2{
  font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);line-height:1.18;
  margin-bottom:14px;font-weight:400;color:#fff;
}
.l-quote h2 em{font-style:italic;color:var(--ember-2)}
.l-quote p{font-size:13px;color:#9FB2C8;line-height:1.7;margin:0}

/* OTP entry — four boxes that mirror into a single hidden field */
.otp-row{display:flex;gap:10px}
.otp-row input{
  flex:1;min-width:0;height:58px;text-align:center;font-size:21px;font-weight:750;
  border:1.5px solid var(--hair-2);border-radius:var(--r-md);background:var(--card);color:var(--ink);
  transition:border-color .25s,box-shadow .25s,transform .3s var(--spring);
  font-variant-numeric:tabular-nums;
}
.otp-row input:focus{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 4px var(--ember-soft);transform:translateY(-3px);
}
.otp-row input.filled{border-color:var(--ember);background:var(--ember-soft)}

/* Role line: carries the quote on a phone, where the right panel is hidden. */
.l-line{margin:26px 0 0;padding:16px 18px;border-radius:18px;border:1px solid var(--hair);background:var(--card-2);position:relative}
.l-line::before{content:"\201C";position:absolute;top:2px;left:12px;font-family:var(--serif);font-size:42px;line-height:1;color:var(--ember);opacity:.35}
.l-line blockquote{margin:0 0 6px;padding-left:20px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;color:var(--ink)}
.l-line figcaption{padding-left:20px;font-size:10.5px;font-weight:780;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.l-foot{text-align:center;margin-top:20px;font-size:11.5px;color:var(--ink-4)}
@media (min-width:901px){ .l-line{display:none} }

/* ---------- phone sign-in: one centred card on a drifting aurora ----------
   The card follows the theme: light card on a warm light wash, dark card on a
   deep navy one. */
@media (max-width:900px){
  .ember-login{grid-template-columns:1fr;position:static;min-height:100dvh;background:var(--canvas)}
  .l-right{display:none}
  .l-left{
    display:grid;place-items:center;min-height:100dvh;background:none;
    padding:calc(28px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }
  /* aurora: two soft lights that drift behind the card */
  .l-left::before,.l-left::after{
    content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);
  }
  .l-left::before{
    width:460px;height:460px;top:-190px;left:-110px;background:rgba(242,108,13,.26);
    animation:authDrift1 16s ease-in-out infinite;
  }
  .l-left::after{
    width:400px;height:400px;bottom:-200px;right:-130px;background:rgba(46,119,201,.20);
    animation:authDrift2 19s ease-in-out infinite;
  }
  @keyframes authDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(42px,34px)}}
  @keyframes authDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-30px)}}
  @media (prefers-reduced-motion:reduce){ .l-left::before,.l-left::after{animation:none} }

  /* the card holds everything: brand, headline, form, quote */
  .l-inner{
    position:relative;z-index:1;width:100%;max-width:440px;margin:0;
    /* solid, not backdrop-filter: the blur costs a full-screen composite on
       every frame in the Android WebView and drops text on some devices */
    background:var(--card);border:1px solid var(--hair);border-radius:28px;
    padding:28px 20px 22px;box-shadow:0 28px 64px -30px rgba(16,24,40,.45);
  }
  .l-brand{margin:0 0 20px;justify-content:center}
  .l-brand img{height:46px;max-width:64vw}
  .l-title{font-size:28px;line-height:1.12;margin:0 0 8px;text-align:center}
  .l-sub{font-size:13px;line-height:1.6;margin:0 0 22px;max-width:none;text-align:center}
  .l-inner .form-label{font-size:10.5px;font-weight:780;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
  .l-inner .form-control{height:54px;border-radius:16px;font-size:16px}
  .otp-row{gap:8px}
  .otp-row input{height:58px;font-size:21px;border-radius:16px}
  .login-btn{
    /* !important: something in the ported template CSS keeps shrinking this to
       fit its label on phones, and the button has to span the card */
    width:100%!important;padding:17px;border-radius:16px;font-size:15.5px;margin-top:16px;font-weight:780;
    background:linear-gradient(135deg,var(--ember),var(--ember-2))!important;border:0!important;color:#fff!important;
    box-shadow:0 16px 30px -16px rgba(242,108,13,.7);
  }
  .login-btn:active{transform:scale(.99)}
  /* quote reads as a line, not a box */
  .l-line{margin:20px 0 0;padding:16px 0 0;background:none;border:0;border-top:1px solid var(--hair);border-radius:0}
  .l-line::before{display:none}
  .l-line blockquote{padding:0;font-size:14px;text-align:center;margin:0 0 6px;color:var(--ink-2)}
  .l-line figcaption{padding:0;text-align:center}
  .l-note{margin-top:14px;text-align:center}
  .l-foot{margin-top:14px}
  .l-error{margin-bottom:14px}
  body:has(.ember-login){padding-bottom:0!important}

  /* ---- dark theme: deep wash, dark card, white wordmark ---- */
  html[data-ember-theme="dark"] .ember-login{background:#070F1A}
  html[data-ember-theme="dark"] .l-left::before{background:rgba(242,108,13,.42)}
  html[data-ember-theme="dark"] .l-left::after{background:rgba(46,119,201,.34)}
  html[data-ember-theme="dark"] .l-inner{
    background:linear-gradient(180deg,rgba(23,38,58,.96),rgba(12,22,36,.97));
    border-color:rgba(255,255,255,.10);box-shadow:0 30px 70px -32px rgba(0,0,0,.75);
  }
  html[data-ember-theme="dark"] .l-title{color:#F7F5F2}
  html[data-ember-theme="dark"] .l-sub{color:#9BADC4}
  html[data-ember-theme="dark"] .l-inner .form-label{color:#8FA3BC}
  html[data-ember-theme="dark"] .l-inner .form-control,
  html[data-ember-theme="dark"] .otp-row input{
    background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.12)!important;color:#F7F5F2!important;
  }
  html[data-ember-theme="dark"] .l-inner .form-control::placeholder{color:#7A8DA5}
  html[data-ember-theme="dark"] .l-inner .form-control:focus{
    border-color:var(--ember)!important;box-shadow:0 0 0 4px rgba(242,108,13,.18)!important;background:rgba(255,255,255,.08)!important;
  }
  html[data-ember-theme="dark"] .otp-row input.filled{border-color:var(--ember);background:rgba(242,108,13,.16)}
  html[data-ember-theme="dark"] .l-line{border-top-color:rgba(255,255,255,.09)}
  html[data-ember-theme="dark"] .l-line blockquote{color:#C6D3E2}
  html[data-ember-theme="dark"] .l-line figcaption,
  html[data-ember-theme="dark"] .l-foot{color:#6F8399}
  html[data-ember-theme="dark"] .l-note{color:#8FA3BC}
  html[data-ember-theme="dark"] #otpStatus{color:#5FD6A6!important}
  html[data-ember-theme="dark"] .l-error{background:rgba(224,68,90,.16);color:#F7B9C2}
}
@media (max-width:380px){
  .l-inner{padding:24px 16px 18px;border-radius:24px}
  .l-title{font-size:26px}
  .l-brand img{height:42px}
}

/* ==============================================================
   LEGACY UTILITY OVERRIDES
   Old theme colours that would otherwise clash with Ember.
============================================================== */
/* Solid Bootstrap background utilities (used on stat cards, headers, chips).
   Badges keep their own soft treatment — .badge.bg-* is more specific.

   These MUST honour Bootstrap's .bg-opacity-* utilities. Views pair them as
   `bg-success bg-opacity-10 text-success` to get a pale tint behind a coloured
   icon; hard-setting a solid colour made the tile solid green with a green
   icon on it, i.e. an invisible icon. Bootstrap drives opacity through
   --bs-bg-opacity, so the colours are declared as rgb triples and composed. */
.bg-primary{--e-rgb:14,42,78}
.bg-secondary{--e-rgb:115,126,143}
.bg-success{--e-rgb:23,113,74}
.bg-danger{--e-rgb:179,63,79}
.bg-warning{--e-rgb:242,108,13}
.bg-info{--e-rgb:33,95,148}
.bg-dark{--e-rgb:8,20,36}
.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-dark{
  background:rgba(var(--e-rgb),var(--bs-bg-opacity,1))!important;color:#fff!important;
}
/* A tinted tile is a light surface, so its text must go back to ink. */
.bg-opacity-10,.bg-opacity-25{color:inherit!important}
.bg-primary.bg-opacity-10,.bg-primary.bg-opacity-25{color:var(--navy)!important}
.bg-success.bg-opacity-10,.bg-success.bg-opacity-25{color:var(--mint-ink)!important}
.bg-danger.bg-opacity-10,.bg-danger.bg-opacity-25{color:var(--rose-ink)!important}
.bg-warning.bg-opacity-10,.bg-warning.bg-opacity-25{color:var(--ember-ink)!important}
.bg-info.bg-opacity-10,.bg-info.bg-opacity-25{color:var(--sea-ink)!important}
.card.bg-primary,.card.bg-success,.card.bg-danger,.card.bg-warning,.card.bg-info,.card.bg-dark{
  border:none!important;border-radius:var(--r-xl)!important;box-shadow:var(--sh-hi)!important;
}
.card.bg-primary .card-title,.card.bg-success .card-title,.card.bg-danger .card-title,
.card.bg-warning .card-title,.card.bg-info .card-title,.card.bg-dark .card-title,
.card.bg-primary h1,.card.bg-primary h2,.card.bg-primary h3,.card.bg-primary h4,.card.bg-primary h5,
.card.bg-info h1,.card.bg-info h2,.card.bg-info h3,.card.bg-info h4,.card.bg-info h5,
.card.bg-success h2,.card.bg-danger h2,.card.bg-warning h2{color:#fff!important}
.card.bg-primary small,.card.bg-info small,.card.bg-success small,
.card.bg-danger small,.card.bg-warning small{color:rgba(255,255,255,.75)!important}

.bg-light-info,.bg-light-primary{background:var(--sea)!important}
.bg-light-success{background:var(--mint)!important}
.bg-light-danger{background:var(--rose)!important}
.bg-light-warning{background:var(--ember-soft)!important}
.bg-light{background:var(--canvas-2)!important}
.bg-warning-soft{background:var(--ember-soft)!important}
.text-primary{color:var(--ember)!important}
.text-info{color:var(--sea-ink)!important}
.text-success{color:var(--mint-ink)!important}
.text-danger{color:var(--rose-ink)!important}
.text-warning{color:var(--ember-ink)!important}
.text-dark{color:var(--ink)!important}
.text-muted{color:var(--ink-3)!important}
.text-secondary{color:var(--ink-3)!important}
.border{border-color:var(--hair)!important}
.border-top,.border-bottom,.border-start,.border-end{border-color:var(--hair)!important}
.rounded{border-radius:var(--r-md)!important}
.rounded-circle{border-radius:50%!important}
.shadow,.shadow-sm,.shadow-lg{box-shadow:var(--sh)!important}
.fw-semibold{font-weight:650!important}
.fw-bold,.fw600{font-weight:750!important}
.fs-2{font-size:12px!important}.fs-3{font-size:13px!important}
.fs-4{font-size:14px!important}.fs-5{font-size:15.5px!important}
.fs-6{font-size:17px!important}.fs-7{font-size:19px!important}
.useravtar{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:750;font-size:13px;text-transform:uppercase;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--navy-2),var(--navy));
}
.filtercolmn{
  background:var(--card)!important;border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:19px!important;box-shadow:var(--sh)!important;margin-bottom:16px!important;
}
.ti{line-height:1}
/* legacy Modernize chrome that the Ember shell replaces */
.app-header,.brand-logo.on-light,.sidebar-nav .sidebar-item .sidebar-link{}

/* ==============================================================
   RESPONSIVE SAFETY NET  (<=1200px: tablet + mobile)
   The legacy views were written desktop-first: many tables sit
   outside a .table-responsive wrapper, and filter controls carry
   inline pixel widths. Rather than editing ~40 view files, these
   rules make both classes of markup fluid everywhere at once.
============================================================== */
@media (max-width:1200px){
  /* A table with no responsive wrapper becomes its own scroll box, so it
     never widens the page. Tables already wrapped are left alone. */
  .body-wrapper *:not(.table-responsive):not(.table-container):not(.dataTables_wrapper) > table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .body-wrapper *:not(.table-responsive):not(.table-container):not(.dataTables_wrapper) > table > thead,
  .body-wrapper *:not(.table-responsive):not(.table-container):not(.dataTables_wrapper) > table > tbody,
  .body-wrapper *:not(.table-responsive):not(.table-container):not(.dataTables_wrapper) > table > tfoot{
    display:table;
    width:100%;
    min-width:max-content;
  }

  /* Inline desktop widths (style="width:250px") must never exceed the screen. */
  .body-wrapper [style*="width"]:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(col):not(colgroup){
    max-width:100%!important;
  }
  .body-wrapper .form-control[style*="width"],
  .body-wrapper .form-select[style*="width"],
  .body-wrapper .select2-container[style*="width"],
  .body-wrapper div[style*="width"]:has(> .form-select),
  .body-wrapper div[style*="width"]:has(> .form-control),
  .body-wrapper div[style*="width"]:has(> .select2-container){
    width:100%!important;
  }

  /* Images and embeds keep inside their column. */
  .body-wrapper img,.body-wrapper canvas,.body-wrapper svg,.body-wrapper iframe{max-width:100%}

  /* Long unbroken strings (ids, URLs, emails) wrap instead of pushing out. */
  /* break-word, NOT anywhere: `anywhere` feeds into min-content sizing, which
     lets the table layout algorithm crush a column to a single character. */
  .body-wrapper td,.body-wrapper th,.body-wrapper .card-body{overflow-wrap:break-word}
  .body-wrapper td a[href^="mailto"],.body-wrapper td .client-email{overflow-wrap:anywhere}
}

/* ==============================================================
   RESPONSIVE — tablet
============================================================== */
@media (max-width:1300px){
  :root{--rail:230px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento .b3,.bento .b4,.bento .b6{grid-column:span 4}
  .band-inner{grid-template-columns:1fr;gap:22px}
  .status-row{grid-template-columns:repeat(2,1fr)}
}

/* ==============================================================
   MOBILE APP SHELL  (≤900px)
   Slide-in sidebar sheet · sticky app header · bottom tab bar
   Snap-scroll carousels · 44px targets · 16px inputs · safe areas
============================================================== */
@media (max-width:900px){
  /* clip, NOT hidden: overflow-x:hidden makes <body> a scroll container, and
     the sticky mobile bar then anchors to a box that never scrolls, so it
     scrolls away with the page. `clip` suppresses the same overflow without
     creating a scroll container. */
  html,body{overflow-x:clip}
  body{
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
    -webkit-tap-highlight-color:transparent;
  }
  .page-wrapper{grid-template-columns:1fr;display:block}
  .body-wrapper{padding:0 14px 24px}
  .body-wrapper>.container-fluid{max-width:100%!important}

  /* sidebar becomes a slide-in sheet */
  .ember-side{
    position:fixed;left:0;top:0;bottom:0;height:100dvh;
    width:82vw;max-width:300px;z-index:1090;
    transform:translateX(-102%);transition:transform .4s var(--ease);
    box-shadow:var(--sh-float);padding-top:calc(20px + env(safe-area-inset-top));
  }
  .ember-side.open{transform:none}
  .rail-collapse{display:none}
  .ember-scrim{
    position:fixed;inset:0;background:rgba(7,20,35,.5);backdrop-filter:blur(4px);
    z-index:1080;opacity:0;pointer-events:none;transition:opacity .35s;
  }
  .ember-scrim.open{opacity:1;pointer-events:auto}

  /* sticky translucent app header */
  .ember-top{display:none}
  .ember-mobile-bar{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:1050;
    margin:0 -14px 14px;padding:calc(10px + env(safe-area-inset-top)) 14px 11px;
    background:color-mix(in srgb,var(--canvas) 88%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--hair);
  }
  .ember-mobile-bar .mlogo{height:32px;width:auto;max-width:132px;object-fit:contain}
  .ember-mobile-bar .mtitle{
    font-size:15px;font-weight:750;letter-spacing:-.03em;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .ember-mobile-bar .right{margin-left:auto;display:flex;gap:7px;flex:none}

  /* bottom tab bar with raised FAB */
  .ember-tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1070;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--card) 92%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--hair);box-shadow:0 -8px 30px -18px rgba(10,30,56,.4);
  }
  .mtab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px;border-radius:13px;color:var(--ink-4);font-size:9.5px;font-weight:700;
    position:relative;text-decoration:none;min-width:0;
    transition:color .25s,transform .3s var(--spring);
  }
  .mtab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mtab svg{width:21px;height:21px;flex:none}
  .mtab:active{transform:scale(.9)}
  .mtab.active{color:var(--ember)}
  .mtab.active::before{content:"";position:absolute;top:0;width:22px;height:3px;border-radius:99px;background:var(--ember)}
  .mtab.fab{flex:none;width:58px}
  .mtab.fab .fabi{
    width:46px;height:46px;border-radius:16px;color:#fff;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--ember),var(--ember-2));
    box-shadow:var(--sh-ember);margin-top:-17px;
  }
  .mtab.fab span{display:none}

  /* density + touch targets */
  .icon-btn{width:42px;height:42px}
  .icon-btn.sm{width:36px;height:36px}
  .btn{padding:13px 20px;font-size:14px;min-height:44px}
  .btn.btn-sm,.btn-group-sm>.btn{padding:10px 16px;font-size:13px;min-height:40px}
  .card{border-radius:20px;margin-bottom:13px}
  .card-body{padding:16px}
  .card-header,.modal-header{padding:15px 16px}
  .modal-body{padding:17px}
  .modal-footer{padding:13px 16px}
  .page-head{margin-bottom:14px}
  .page-title{font-size:23px}
  .page-head .crumbs{display:none}
  .head-actions{width:100%}
  .head-actions>.btn{flex:1}
  /* 16px inputs stop iOS zoom-on-focus */
  .form-control,.form-select,textarea.form-control,
  .select2-container--default .select2-selection--single .select2-selection__rendered{font-size:16px}
  .form-control,.form-select{padding:14px 15px}

  /* band compresses */
  .band{padding:21px 18px;border-radius:20px}
  .band h2{font-size:21px}
  .band-metrics{gap:17px;margin-top:17px}
  .bm b{font-size:19px}
  .glass-tile{padding:13px 14px}
  .band .rings{display:none}

  /* horizontal snap carousels instead of cramped grids */
  .kpis,.status-row{
    display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -14px 14px;padding:2px 14px 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .kpis::-webkit-scrollbar,.status-row::-webkit-scrollbar{display:none}
  .kpis>*,.status-row>*{flex:0 0 76%;scroll-snap-align:start}
  .bento{grid-template-columns:1fr}
  .bento .b2,.bento .b3,.bento .b4,.bento .b6{grid-column:span 1}

  /* tables scroll inside their own container, never the page */
  .table-responsive,.table-container{border-radius:var(--r-lg)}
  .table thead th{font-size:9.5px;padding:10px 12px}
  .table tbody td{padding:11px 12px;font-size:12.2px}
  .dataTables_wrapper .dataTables_filter input{min-width:0;width:100%;margin:7px 0 0}
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{width:100%;text-align:left}
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label{width:100%;text-align:left;align-items:flex-start}

  .modal-dialog{margin:.5rem;max-width:calc(100% - 1rem)}
  .modal-dialog-centered{min-height:calc(100% - 1rem)}
  /* bottom-sheet modals */
  .modal.ember-sheet .modal-dialog{
    position:fixed;left:0;right:0;bottom:0;margin:0;max-width:100%;
  }
  .modal.ember-sheet .modal-content{
    border-radius:26px 26px 0 0;max-height:88dvh;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .ember-pop{
    position:fixed;left:12px;right:12px;top:auto;
    bottom:calc(86px + env(safe-area-inset-bottom));width:auto;
  }
  .ember-pop.floating{top:auto;right:12px;max-height:calc(100dvh - 170px)}
  .row{--bs-gutter-x:0.9rem}

  /* Legacy page banners use fixed col-8/col-9 + col-3/col-4 splits, which
     squeeze the action buttons into slivers on a phone. Stack them instead. */
  .card.bg-light-info:has(.breadcrumb) .row > [class*="col-"],
  .card.bg-light-primary:has(.breadcrumb) .row > [class*="col-"]{
    width:100%;flex:0 0 100%;max-width:100%;
  }
  .card.bg-light-info:has(.breadcrumb) .row > [class*="col-"]:not(:first-child){
    margin-top:14px;display:flex;flex-direction:column;gap:9px;align-items:stretch;
  }
  .card.bg-light-info:has(.breadcrumb) .btn,
  .card.bg-light-primary:has(.breadcrumb) .btn{width:100%;justify-content:center}
  .card.bg-light-info:has(.breadcrumb) img{display:none}

  /* Inline filter rows wrap instead of overflowing. */
  .filtercolmn .row > [class*="col-"]{width:100%;flex:0 0 100%;max-width:100%;margin-bottom:10px}
  .card-body > .d-flex:not(.flex-column){flex-wrap:wrap;gap:9px}
  .dataTables_wrapper .dataTables_length{width:100%}

  /* 46 views lay out a title and an action-button group on one line with
     .d-flex.justify-content-between. On a phone that pushes the buttons off
     the right edge, so those rows wrap and the buttons go full width. */
  .body-wrapper .d-flex.justify-content-between:not(.flex-column),
  .body-wrapper .d-flex.align-items-center.justify-content-between{
    flex-wrap:wrap;
  }
  .body-wrapper .d-flex.justify-content-between > .d-flex:not(.flex-column){
    flex-wrap:wrap;
  }
  .body-wrapper .d-flex.justify-content-between > .d-flex:has(> .btn){
    width:100%;
  }
  .body-wrapper .d-flex.justify-content-between > .d-flex:has(> .btn) > .btn{
    flex:1 1 auto;justify-content:center;
  }
  /* Sticky sub-headers were offset for the old fixed header. */
  .body-wrapper .sticky-action-bar{position:static;top:auto;margin-bottom:14px}

  /* Filter bars across the app hard-code desktop pixel widths inline
     (style="width:250px"). On a phone those overflow the card, so any
     inline-width wrapper around a form control becomes fluid instead. */
  .card div[style*="width"]:has(> .form-select),
  .card div[style*="width"]:has(> .form-control),
  .card div[style*="width"]:has(> .select2-container){width:100%!important}
  .card .form-select[style*="width"],
  .card .form-control[style*="width"],
  .card .select2-container[style*="width"]{width:100%!important}

  /* …and the label + control pairs stack rather than squeezing. */
  .card .d-flex.align-items-center:has(> label + div),
  .card .d-flex.align-items-center:has(> label + select),
  .card .d-flex.align-items-center:has(> label + input){
    flex-wrap:wrap;width:100%;
  }
  .card .d-flex.align-items-center > label[for]{margin:0 0 6px;width:100%}
}

/* Tablet: a carousel here left a third card sliced through the middle of a
   number, which reads as breakage rather than as an affordance. There is room
   to wrap, so wrap - carousels stay for phones only. */
@media (min-width:600px) and (max-width:900px){
  .kpis,.status-row{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
    gap:12px;margin:0 0 14px!important;padding:0!important;
    overflow:visible!important;scroll-snap-type:none;
  }
  .kpis>*,.status-row>*{flex:none;scroll-snap-align:none}
  .kanban-column{flex:0 0 58%}
  .card.bg-light-info:has(.breadcrumb) .row > [class*="col-"]:not(:first-child){
    flex-direction:row;flex-wrap:wrap;
  }
  .card.bg-light-info:has(.breadcrumb) .btn{width:auto;flex:1 1 45%}
  .body-wrapper{padding-left:20px;padding-right:20px}
}

@media (max-width:576px){
  .kpis>*,.status-row>*{flex:0 0 84%}
  .band h2{font-size:19px}
  .page-title{font-size:21px}
  .btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.ember-anim .reveal{opacity:1;transform:none}
}

/* print — keep documents clean */
@media print{
  .ember-side,.ember-top,.ember-mobile-bar,.ember-tabs,.head-actions,.rail-collapse{display:none!important}
  .page-wrapper{display:block}
  .body-wrapper{padding:0}
  .card{box-shadow:none!important;border:1px solid #ddd}
}

/* --- ember as a foreground on light surfaces ---------------------------
   #F26C0D as text on white is 3.03:1. --ember-ink is the readable member of
   the ramp; --ember stays for fills, borders, icons and chart series. */
.text-primary,.text-theme{color:var(--ember-ink)!important}
.bg-light-primary .text-primary,.bg-light-primary.text-primary,
.bg-light-warning .text-warning{color:var(--ember-ink)!important}
.text-muted,.text-secondary{color:var(--ink-3)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button{color:var(--ink-2)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--ember-soft)!important;color:var(--ember-ink)!important;border-color:transparent!important;
}
html[data-ember-theme="dark"] .text-primary,
html[data-ember-theme="dark"] .text-theme{color:var(--ember-ink)!important}
html[data-ember-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button{color:var(--ink-2)!important}

/* ==============================================================
   DARK MODE CORRECTIONS
   The legacy views predate the theme and hard-code light surfaces and dark
   text, both through Bootstrap utilities (.bg-light appears in 24 client
   views, .text-muted in 24, .text-dark in 12) and through their own per-view
   classes (.section-card / .section-header / .field-* recur across 4-7 views).
   Editing every view is not viable, so correct them centrally.
   Also: --navy is a brand constant and is NOT re-defined for dark, so any
   utility using it as a FOREGROUND is invisible on a dark canvas.
============================================================== */
html[data-ember-theme="dark"] .bg-white,
html[data-ember-theme="dark"] .bg-body,
html[data-ember-theme="dark"] .bg-body-tertiary{background-color:var(--card)!important}
html[data-ember-theme="dark"] .bg-light{background-color:var(--canvas-2)!important;color:var(--ink)!important}
html[data-ember-theme="dark"] .text-dark,
html[data-ember-theme="dark"] .text-black,
html[data-ember-theme="dark"] .text-body{color:var(--ink)!important}
html[data-ember-theme="dark"] .text-muted,
html[data-ember-theme="dark"] .text-secondary{color:var(--ink-3)!important}
html[data-ember-theme="dark"] .border,
html[data-ember-theme="dark"] .border-light,
html[data-ember-theme="dark"] .border-top,html[data-ember-theme="dark"] .border-bottom,
html[data-ember-theme="dark"] .border-start,html[data-ember-theme="dark"] .border-end{
  border-color:var(--hair)!important;
}
html[data-ember-theme="dark"] .table-light,
html[data-ember-theme="dark"] .table-light>*>*{
  --bs-table-bg:var(--canvas-2);background-color:var(--canvas-2)!important;color:var(--ink)!important;
}
/* Solid semantic buttons. In dark the *-ink tokens are deliberately LIGHT
   (they are text colours for dark surfaces), so using them as a fill under
   white text gave 1.7-2.5:1. Keep the bright fill, put the dark canvas on top:
   mint 9.69, rose 7.86, sea 8.55, amber 11.47. */
html[data-ember-theme="dark"] .btn-success,
html[data-ember-theme="dark"] .btn-danger,
html[data-ember-theme="dark"] .btn-info,
html[data-ember-theme="dark"] .btn-warning{color:var(--canvas)!important;font-weight:700}
html[data-ember-theme="dark"] .btn-success:hover,html[data-ember-theme="dark"] .btn-success:active,
html[data-ember-theme="dark"] .btn-danger:hover,html[data-ember-theme="dark"] .btn-danger:active,
html[data-ember-theme="dark"] .btn-info:hover,html[data-ember-theme="dark"] .btn-info:active,
html[data-ember-theme="dark"] .btn-warning:hover,html[data-ember-theme="dark"] .btn-warning:active{
  color:var(--canvas)!important;filter:brightness(1.08);
}
html[data-ember-theme="dark"] .btn-success:hover{background:var(--mint-ink)!important;border-color:var(--mint-ink)!important}
html[data-ember-theme="dark"] .btn-danger:hover{background:var(--rose-ink)!important;border-color:var(--rose-ink)!important}
html[data-ember-theme="dark"] .btn-info:hover{background:var(--sea-ink)!important;border-color:var(--sea-ink)!important}
/* the same applies to solid semantic badges */
html[data-ember-theme="dark"] .badge.bg-success,
html[data-ember-theme="dark"] .badge.bg-danger,
html[data-ember-theme="dark"] .badge.bg-info,
html[data-ember-theme="dark"] .badge.bg-warning{color:var(--canvas)!important}

/* navy-as-foreground */
html[data-ember-theme="dark"] .btn-outline-dark{border-color:var(--hair-2)!important;color:var(--ink)!important}
html[data-ember-theme="dark"] .btn-outline-dark:hover,
html[data-ember-theme="dark"] .btn-outline-dark:active{background:var(--ink-2)!important;color:var(--canvas)!important}
html[data-ember-theme="dark"] .btn-dark,
html[data-ember-theme="dark"] .btn-secondary{
  background:var(--canvas-2)!important;border-color:var(--hair-2)!important;color:var(--ink)!important;
}
html[data-ember-theme="dark"] .btn-light,html[data-ember-theme="dark"] .btn-white{
  background:var(--canvas-2)!important;border-color:var(--hair-2)!important;color:var(--ink)!important;
}
/* per-view section cards used across the client / payment screens */
html[data-ember-theme="dark"] .section-card,
html[data-ember-theme="dark"] .premium-card,
html[data-ember-theme="dark"] .detail-card{
  background:var(--card)!important;border-color:var(--hair)!important;box-shadow:var(--sh)!important;
}
html[data-ember-theme="dark"] .section-header{
  background:var(--canvas-2)!important;border-bottom-color:var(--hair)!important;
}
html[data-ember-theme="dark"] .section-header:hover{background:var(--hair)!important}
html[data-ember-theme="dark"] .section-header h5,
html[data-ember-theme="dark"] .field-value{color:var(--ink)!important}
html[data-ember-theme="dark"] .field-label{color:var(--ink-3)!important}
/* pale status pills the views hard-code */
html[data-ember-theme="dark"] .badge-signed{background:var(--mint)!important;color:var(--mint-ink)!important}
html[data-ember-theme="dark"] .badge-unsigned{background:var(--ember-soft)!important;color:var(--ember-ink)!important}
/* the command-palette hint chip */
html[data-ember-theme="dark"] .kbd{color:var(--ink-3)!important;border-color:var(--hair-2)!important}
/* table headings were 2.31 against the card */
html[data-ember-theme="dark"] .table thead th,
html[data-ember-theme="dark"] #config-table thead th{color:var(--ink-3)!important}
/* Modernize's pale .bg-light-* badges keep their light tint in dark mode, so
   their matching .text-* stays dark on light-grey. Re-tint the pair. */
html[data-ember-theme="dark"] .bg-light-secondary{background:var(--canvas-2)!important;color:var(--ink-2)!important}
html[data-ember-theme="dark"] .bg-light-secondary.text-secondary,
html[data-ember-theme="dark"] .bg-light-secondary .text-secondary{color:var(--ink-2)!important}
html[data-ember-theme="dark"] .bg-light-primary{background:var(--navy-soft)!important;color:var(--ember-ink)!important}
html[data-ember-theme="dark"] .bg-light-success{background:var(--mint)!important;color:var(--mint-ink)!important}
html[data-ember-theme="dark"] .bg-light-danger{background:var(--rose)!important;color:var(--rose-ink)!important}
html[data-ember-theme="dark"] .bg-light-warning{background:var(--ember-soft)!important;color:var(--ember-ink)!important}
html[data-ember-theme="dark"] .bg-light-info{background:var(--sea)!important;color:var(--sea-ink)!important}
html[data-ember-theme="dark"] .badge.bg-light-secondary,
html[data-ember-theme="dark"] .badge.bg-light-secondary.text-secondary{color:var(--ink-2)!important}

/* CKEditor ships its own light chrome; tone the frame so it is not a slab */
html[data-ember-theme="dark"] .cke_chrome,html[data-ember-theme="dark"] .cke_inner,
html[data-ember-theme="dark"] .cke_top,html[data-ember-theme="dark"] .cke_bottom{
  background:var(--canvas-2)!important;border-color:var(--hair)!important;
}
html[data-ember-theme="dark"] .cke_button_label,
html[data-ember-theme="dark"] .cke_combo_text,
html[data-ember-theme="dark"] .cke_combo_inlinelabel,
html[data-ember-theme="dark"] .cke_path_item{color:var(--ink-2)!important}
html[data-ember-theme="dark"] .cke_button_icon,
html[data-ember-theme="dark"] .cke_combo_arrow{filter:invert(1) brightness(1.6)}
html[data-ember-theme="dark"] .cke_resizer{border-color:transparent var(--ink-4) transparent transparent!important}
/* the editing surface itself stays a white page - you are editing a document,
   and a light canvas there is the expected behaviour, as in desktop editors */
html[data-ember-theme="dark"] .cke_wysiwyg_frame{border-radius:0 0 10px 10px}