/* ***** FONTS ***** */
@import url('https://fonts.cdnfonts.com/css/aribau-grotesk-trial');


@font-face {
  font-family: "Aribau Grotesk";
  src: url('font/AribauGrotesk-Regular.ttf') format('truetype'),
      url('font/AribauGrotesk-Regular.woff') format('woff'),
      url('font/AribauGrotesk-Regular.woff2') format('woff2'),
      url('font/AribauGrotesk-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Point Book';
    src: url('font/Point-Book.eot');
    src: url('font/Point-Book.eot?#iefix') format('embedded-opentype'),
        url('font/Point-Book.woff2') format('woff2'),
        url('font/Point-Book.woff') format('woff'),
        url('font/Point-Book.ttf') format('truetype'),
        url('font/Point-Book.svg#Point-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Point';
    src: url('font/Point-Black.eot');
    src: url('font/Point-Black.eot?#iefix') format('embedded-opentype'),
        url('font/Point-Black.woff2') format('woff2'),
        url('font/Point-Black.woff') format('woff'),
        url('font/Point-Black.ttf') format('truetype'),
        url('font/Point-Black.svg#Point-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Point';
    src: url('font/Point-Bold.eot');
    src: url('font/Point-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Point-Bold.woff2') format('woff2'),
        url('font/Point-Bold.woff') format('woff'),
        url('font/Point-Bold.ttf') format('truetype'),
        url('font/Point-Bold.svg#Point-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Point';
    src: url('font/Point-Regular.eot');
    src: url('font/Point-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Point-Regular.woff2') format('woff2'),
        url('font/Point-Regular.woff') format('woff'),
        url('font/Point-Regular.ttf') format('truetype'),
        url('font/Point-Regular.svg#Point-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Point Extra';
    src: url('font/Point-ExtraBold.eot');
    src: url('font/Point-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('font/Point-ExtraBold.woff2') format('woff2'),
        url('font/Point-ExtraBold.woff') format('woff'),
        url('font/Point-ExtraBold.ttf') format('truetype'),
        url('font/Point-ExtraBold.svg#Point-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Point Semi';
    src: url('font/Point-SemiBold.eot');
    src: url('font/Point-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('font/Point-SemiBold.woff2') format('woff2'),
        url('font/Point-SemiBold.woff') format('woff'),
        url('font/Point-SemiBold.ttf') format('truetype'),
        url('font/Point-SemiBold.svg#Point-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}





/* ***** ACE DESIGN TOKENS ***** */

:root {
  /* Brand */
  --ace-navy: #023C5B;
  --ace-navy-deep: #0c1a2e;
  --ace-navy-mid: #034b73;
  --ace-blue: #5AC8F2;
  --ace-blue-hover: #48b8e0;
  --ace-ice: #E6F7FD;
  --ace-green: #A3D971;
  --ace-mint: #DBF0C7;
  --ace-coral: #FF7182;
  --ace-amber: #F6B472;
  --ace-kdp-red: #C41230;

  /* Surfaces */
  --ace-surface: #ffffff;
  --ace-surface-alt: #f8f9fc;
  --ace-surface-hover: #f1f5f9;

  /* Text */
  --ace-text: #1e293b;
  --ace-text-secondary: #64748b;
  --ace-text-muted: #94a3b8;
  --ace-text-inverse: #ffffff;

  /* Borders */
  --ace-border: #e8ecf4;
  --ace-border-soft: #f1f5f9;

  /* Shadows — subtle */
  --ace-shadow-sm: 0 1px 3px rgba(2,60,91,0.06);
  --ace-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --ace-shadow-lg: 0 4px 16px rgba(0,0,0,0.10);
  --ace-shadow-card: 0 1px 4px rgba(0,0,0,0.06);

  /* Radii */
  --ace-radius-sm: 6px;
  --ace-radius-md: 10px;
  --ace-radius-lg: 14px;
  --ace-radius-xl: 16px;
  --ace-radius-pill: 20px;

  /* Flat backgrounds (no gradients) */
  --ace-grad-hero: #023C5B;
  --ace-grad-hero-compact: #023C5B;
  --ace-grad-surface: #ffffff;
  --ace-grad-table-head: #023C5B;

  /* Semantic */
  --ace-positive: #A3D971;
  --ace-negative: #FF7182;
  --ace-warning: #F6B472;
  --ace-info: #5AC8F2;

  /* Overlay */
  --ace-overlay: rgba(12,26,46,0.85);

  /* ── Channel Colors (Phase 4: centralized from JS) ── */
  --ace-channel-lcbo: #023C5B;
  --ace-channel-grocery: #27ae60;
  --ace-channel-conv: #e67e22;
  --ace-channel-agency: #9b59b6;
  --ace-channel-onprem: #d35400;

  /* ── Urgency Scale (Phase 4: centralized from JS) ── */
  --ace-urgency-low: #A3D971;
  --ace-urgency-med: #F6B472;
  --ace-urgency-high: #FF7182;
  --ace-urgency-critical: #C41230;

  /* ── Typography Scale (Phase 3: strict rules) ── */
  --ace-font-display: 'Point Extra', 'Point', system-ui, sans-serif;
  --ace-font-heading: 'Point', system-ui, sans-serif;
  --ace-font-body: 'Point Book', 'Point', system-ui, sans-serif;
  --ace-font-mono: 'SF Mono', 'Fira Code', monospace;

  --ace-text-hero: 2rem;
  --ace-text-h1: 1.3rem;
  --ace-text-h2: 1.15rem;
  --ace-text-h3: 1.05rem;
  --ace-text-body: 0.875rem;
  --ace-text-sm: 0.8rem;
  --ace-text-xs: 0.75rem;
  --ace-text-xxs: 0.68rem;

  --ace-leading-tight: 1.2;
  --ace-leading-normal: 1.5;
  --ace-leading-relaxed: 1.65;

  /* ── Focus Ring (Phase 5: accessibility) ── */
  --ace-focus-ring: 0 0 0 2px var(--ace-surface), 0 0 0 4px var(--ace-blue);

  /* ── Transition (Phase 5: consistent timing) ── */
  --ace-transition-fast: 150ms ease;
  --ace-transition-normal: 250ms ease;
  --ace-transition-slow: 350ms ease;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS MANAGEMENT (Phase 5: accessibility)
   ══════════════════════════════════════════════════════════════ */

/* Keyboard-only focus rings — outline-based so it doesn't fight box-shadow */
:focus-visible {
  outline: 2px solid var(--ace-blue);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   TOUCH TARGET HELPER (Phase 5: opt-in 44px WCAG 2.5.8)
   ══════════════════════════════════════════════════════════════ */

/* Opt-in class — apply .ace-touch-target where needed, not globally */
@media (pointer: coarse) {
  .ace-touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SKELETON SCREENS (Phase 5: loading patterns)
   ══════════════════════════════════════════════════════════════ */

@keyframes ace-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ace-skeleton {
  background: linear-gradient(
    90deg,
    var(--ace-surface-alt) 25%,
    var(--ace-surface-hover) 50%,
    var(--ace-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: ace-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ace-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* Pre-built skeleton shapes */
.ace-skeleton--text {
  height: 14px;
  width: 80%;
  margin-bottom: 8px;
}

.ace-skeleton--title {
  height: 22px;
  width: 60%;
  margin-bottom: 12px;
}

.ace-skeleton--card {
  height: 120px;
  border-radius: var(--ace-radius-md);
}

.ace-skeleton--kpi {
  height: 80px;
  border-radius: var(--ace-radius-lg);
}

.ace-skeleton--row {
  height: 44px;
  margin-bottom: 4px;
}

/* Dark variant for Route Manager glass theme */
.ace-skeleton--dark {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: ace-shimmer 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   IMPROVED ERROR STATES (Phase 5: actionable errors)
   ══════════════════════════════════════════════════════════════ */

.ace-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--ace-negative);
  border-radius: var(--ace-radius-sm);
  padding: 12px 16px;
  color: #991b1b;
  font-size: var(--ace-text-sm);
  line-height: var(--ace-leading-normal);
}

.ace-error-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.ace-error-action {
  margin-top: 8px;
  font-size: var(--ace-text-xs);
  color: #b91c1c;
}

.ace-error-action a,
.ace-error-action button {
  color: #b91c1c;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   IMPROVED EMPTY STATES (Phase 5: guide users to action)
   ══════════════════════════════════════════════════════════════ */

.ace-empty-guided {
  text-align: center;
  padding: 48px 24px;
  color: var(--ace-text-secondary);
}

.ace-empty-guided .ace-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

.ace-empty-guided h3 {
  font-size: var(--ace-text-body);
  font-weight: 700;
  color: var(--ace-text);
  margin: 0 0 8px;
}

.ace-empty-guided p {
  font-size: var(--ace-text-sm);
  color: var(--ace-text-muted);
  margin: 0 0 16px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--ace-leading-normal);
}

.ace-empty-guided .ace-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--ace-navy);
  color: var(--ace-text-inverse);
  border: none;
  border-radius: var(--ace-radius-md);
  font-size: var(--ace-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ace-transition-fast);
  font-family: inherit;
}

.ace-empty-guided .ace-empty-cta:hover {
  background: var(--ace-navy-mid);
}

/* ══════════════════════════════════════════════════════════════
   BUTTON LOADING STATE (Phase 5: prevent double-submit)
   ══════════════════════════════════════════════════════════════ */

.ace-btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ace-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ace-spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION (Phase 5: accessibility)
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ***** STYLES ***** */

html {
  scroll-behavior: smooth;

  position: relative;

  margin: 0;
  padding: 0;

  height: 100%;
}

body {
    --nav-width: 200px;
    margin: 0 0 0 0;

    font-family: 'Point';
    font-size: 18px;
    color: white;

    height: 100%;

    text-align: center;

    background-image: none;
    background: #0c1a2e;
    background-attachment: fixed;
    background-color: #0c1a2e;
}

/* Market brand-picker panels.
   The shell above is dark and sets `color: white`, but every market view draws
   its controls on WHITE cards, so any element that does not set its own colour
   inherits that white and renders invisible. The picker panels emit their brand
   labels as bare <span>, which made the entire brand list unreadable on
   ab/bc/mb/sk chain, weekly, monthly and acd pages — the checkboxes showed but
   the names only appeared if you dragged to select the text.
   Scoped to the shared id suffix (11 pickers today) so any picker added later
   inherits the fix instead of repeating the bug. */
[id$="-brand-picker"] {
    color: #1e293b;
}

/* The page itself never side-scrolls: wide content must scroll inside its
   own wrapper (.ace-table-scroll / .dash-matrix-scroll / gridjs-wrapper).
   clip, not hidden: clip creates no scroll container, so position: sticky
   (.headernav) and window scroll behavior are unaffected. Also absorbs the
   sidebar push offsets (#app.sb-open margin-right: -350px) that otherwise
   make the document wider than the viewport. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

#aceapp-header {
  transition: margin-left .2s;
}

#mySidenav {
  transition: margin-left .2s;
}

#app {
  /* height: 92%; */
  /* Both margins: the sidebar push sets margin-left AND margin-right
     (-rail width). Transitioning only margin-left made margin-right snap,
     so every open/close briefly (or, with a stuck class, permanently)
     rendered the centered page content ~175px off-center. */
  transition: margin-left .2s, margin-right .2s;
}

/* Rep view: no sidebar. Non-admins work entirely inside their territory page;
   hide the whole sidebar (#mySidenav) + the hamburger and reflow content to
   full width. Header stays so reps can reach My Account / log out. Toggled by
   index.js setting html[data-rep-no-sidebar="1"] for non-admins (removed for
   admins). Belt-and-suspenders: zero --nav-width AND the explicit offsets. */
html[data-rep-no-sidebar="1"] { --nav-width: 0px; }
html[data-rep-no-sidebar="1"] #mySidenav,
html[data-rep-no-sidebar="1"] .sidenav,
html[data-rep-no-sidebar="1"] #left-nav { display: none !important; }
html[data-rep-no-sidebar="1"] #app { margin-left: 0 !important; }
html[data-rep-no-sidebar="1"] body { padding-left: 0 !important; }

/* Rep home-link: sits where the hamburger would be, only shown for reps
   (hidden by default below). Capped width + ellipsis so it can never reach
   the absolutely-centered logo on narrow phones, same defensive pattern as
   the header province-select fix. */
#rep-home-link { display: none; }
html[data-rep-no-sidebar="1"] #rep-home-link {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  float: left;
  margin-left: 16px;
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ace-blue);
  color: var(--ace-navy);
  font-family: 'Point', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Measured live: without border-box, max-width excludes the 12px*2 padding,
     letting the rendered box overlap the logo on phones. logo box left edge
     is 50vw-100 (index.css .header-logo); leave an 8px gap past that. */
  max-width: calc(50vw - 124px);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
html[data-rep-no-sidebar="1"] #rep-home-link:hover { background: var(--ace-blue-hover); }
/* Below this width "Home" plus the arrow doesn't reliably clear the logo even
   at the max-width cap above; drop to arrow-only rather than let ellipsis
   truncate mid-word (measured "← M" — reads as broken, not abbreviated). */
@media (max-width: 400px) {
  html[data-rep-no-sidebar="1"] #rep-home-link .rep-home-label { display: none; }
}



/* Colors */

span.dark-blue {
  color: var(--ace-navy);
}

span.light-blue {
  color: #54c8f5;
}


/* Login */

.loginWrapper {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.loginDiv {
  display: table-cell;
  vertical-align: middle;
}

.loginForm {
  width: 300px;
  /* 30px side padding each way is outside the width (content-box) */
  max-width: calc(100vw - 80px);

  color: black;
  background-color: white;
  border-radius: 10px;

  padding-bottom: 0px;

  padding-right: 30px;
  padding-left: 30px;
}

.loginForm h1, .loginForm h2, .loginForm p {
  text-align: left;
  padding-left: 15px;

  color: #023C5A;
}

.loginForm h1 {
  padding-top: 50px;

  font-size: 35px;
  font-family: 'Point Extra';
}

.loginForm h2 {
  margin-bottom: 50px;
  line-height: 25px;

  font-size: 25px;
  font-family: 'Point Book';
}

.loginForm h2 b {
  font-family: 'Point';
}

.loginForm p {
  margin-bottom: 5px;
  margin-top: 0px;

  font-family: 'Point Extra';
  font-size: 15px;
}

.loginForm input, #login-btn, #forgot-pass-btn {
  width: 90%;
  height: 40px;
  margin-bottom: 40px;

  border: solid 1px #023C5A;
  border-radius: 5px;

  padding-left: 10px;

  font-family: 'Point';
  color: #023C5A;
}

.loginForm #pass-form {
  margin-bottom: 50px;
}

.loginForm #login-btn {
  color: white;
  background-color: #023C5A;
  height: 60px;

  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-left: 0px;

  font-family: 'Point Extra';
  font-size: 18px;

  cursor: pointer;
}

.loginForm #forgot-pass-btn {
  color: white;
  background-color: lightgray;
  height: 50px;

  border: none;
  border-radius: 5px;
  margin-bottom: 50px;
  padding-left: 0px;

  font-family: 'Point Extra';
  font-size: 18px;

  cursor: pointer;
}


/* LOADER SPINNER */
.loader-wrapper {
  width: 100%;
  height: 100%;
  z-index: 1001;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #023C5A;
  display:flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}

.loader-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s linear;
}


/* ABSTRACT (ALL) PAGES */
.headernav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;

  background: white;
  /* iOS notch / Dynamic Island: pad past the safe-area inset so the back
     button and logo clear the status bar. Falls back to 20px on devices
     that don't expose env(safe-area-inset-top). Requires viewport-fit=cover
     in the page <meta viewport>. */
  padding-top: max(20px, env(safe-area-inset-top, 20px));
  padding-bottom: 0px;

  height: 40px;

  z-index: 1000;

  text-align: center;
  padding-right: 10px;

  filter: drop-shadow(0px -8px 10px var(--ace-navy));
}

.header-logo {
  position: absolute;
  /* Deterministic centering: left 50% + the -100px half-width offset.
     Previously relied on the static inline position after floats. */
  left: 50%;

  width: 200px;
  height: 35px;

  margin-left: -100px;

  top: 17px;

  font-family: 'Point';
  font-weight: Bold;
  font-size: 21px;

  color: var(--ace-navy);
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 250px;
  z-index: 1;

  right: 20px;
  margin-top: 40px;

  border: 2px solid var(--ace-navy);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.dropdown-content a {
  color: black;
  padding: 15px 16px;
  text-decoration: none;
  display: block;

  text-align: left;
  font-family: 'Point Book';
}

.dropdown-content a:hover {
  background-color: #E5F8FF;
}

.dropdown-content #menu-stores:hover {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.dropdown-show {
  display: block;
}


.sidenav {
  height: 100%; /* 100% Full-height */
  width: 350px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--ace-navy);
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */

  z-index: 1300;

  text-align: left;
  font-family: 'Point Semi';

  /*
  -webkit-transform: translateX(-700px;);
  -ms-transform: translateX(-700px);
  transform: translateX(-700px);
  */
  margin-left: -350px;
}

.side-nav-open {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

.left-nav {
  height: 20px;
  width: 20px;
  margin-left: 20px;
  margin-right: -50px;
  float: left;

  padding-top: 0px;

  cursor: pointer;
}

.right-nav {
  height: 20px;
  width: 20px;
  margin-left: -50px;
  margin-right: 20px;
  float: right;

  padding-top: 8px;

  cursor: pointer;
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  color: white;
  display: block;
  transition: 0.3s;

  padding: 10px;
  padding-left: 20px;
  align-items: center;
  background-color: var(--ace-navy-deep);
  margin-bottom: 5px;
  font-family: 'Aribau Grotesk TRIAL';
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
}

a.snm.clickable:hover {
  background-color: #54c8f5;
}

a.snm.clickable:hover > svg > path {
  fill: white;
}

svg.sb-dot-icon {
  padding-top: 2.5px; padding-bottom: 2.5px; margin-right: 15px;
}

svg.sb-pin-icon {
  margin-right: 15px;
}

.sidenav > a:nth-child(2) {
  margin-top: 35px;
}

.sidenav > h1.top-sn-h {
  margin-top: 35px;
}

.sidenav .main-rep {
  margin-top: 150px;
  margin-bottom: 25px;

  font-size: 25px;
  line-height: 20px;
}

.sidenav .main-rep-mini {
  font-size: 18px;
  color: #54c8f5;
  margin-left: 7px;
  margin-top: 2px;
}

.nav-icon {
  height: 20px;
  padding-right: 15px;
  margin-bottom: 0px;
}

.clickable {
  vertical-align: middle;
  margin: auto;
  display: flex;

  line-height: 10px;
}

/* When you mouse over the navigation links, change their color */
.clickable:hover {
  /* text-decoration: underline; */
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  font-weight: 100;
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 25px;
  margin-left: 50px;
  color: white;

  padding-top: 22px;
}

.sidenav .sidenav-logo {
  position: absolute;

  background-image: url('../img/abg_logo_white.png');
  background-size: 120px 55px;
  background-repeat: no-repeat;

  width: 130px;
  height: 75px;

  top: 20px;
  left: 0px;
  margin-left: 110px;
  margin-top: 18px;
}


div.home-top-row {
  display: inline;
}

h1.metrics-hm {
  margin-bottom: 45px !important;
  color: white;
}

h1.links-hm {
  margin-bottom: 30px !important;
  color: white;
}

div.details-d {
  display: inline-flex;
  width: 100%;

  margin-bottom: 10px;
}

h1.detail-head {
  margin: 0 !important;
  font-size: 20px !important;
  padding: 0 !important;
}

h2.detail-data {
  margin: 0;
  margin-right: 0px;
  margin-left: auto;
  font-size: 20px !important;
  color: #5CC9F3 !important;
  font-weight: 700 !important;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.home-row {
  float: left;

  width: 100%;
  /* height: 100%; */

  box-sizing: border-box;
  display: flex;

  padding: 30px;
  margin-bottom: 50px;

  height: min-content;
}

.home-row .leader-widget, .wc-widget, .seltzer-widget, .table-widget, .details-widget {
  border-radius: 10px;

  text-align: left;
}

.home-row .leader-widget {
  width: 40%;
  padding: 20px 30px;  /* top and bottom 20, right and left 30 */

  margin-right: 30px;
  background-color: white;

  height: min-content;
  margin-bottom: 50px;
}

.home-row .table-widget {
  width: 73%;
  padding: 20px;

  padding-top: 5px;

  background-color: white;

  background: linear-gradient(180deg, var(--ace-navy) 70px, white 70px);
  height: min-content;

  padding-bottom: 30px;

  margin-bottom: 50px;
}

.home-row .details-widget {
  width: 23%;
  padding: 20px;
  margin-right: 30px;

  padding-top: 5px;

  background: linear-gradient(180deg, var(--ace-navy) 70px, white 70px);

  height: min-content;
}

div.details-widget.territory {
  width: 22vw;
}

div.details-widget.territory.btm {
  margin-top: 20px;
}

div.details-widget.store {
  width: 22vw;
  background: linear-gradient(180deg, var(--ace-navy) 75px, #E5F8FF 75px);
}

.home-row .detail-head {
  margin-bottom: 20px;
  line-height: 20px;

  font-family: 'Point Semi';
}

.detail-right {
  float: right;
  padding-top: 10px;
  font-size: 30px;

  color: #5CC9F3;
}

.detail-right.priority {
  font-family: 'Point Extra'; text-decoration: underline 5px #5CC9F350;
}

.home-row h1 {
  font-size: 22px;
  color: var(--ace-navy);
  font-family: 'Point Extra';
  font-weight: bold;

  margin-bottom: 0px;
}

.home-row .table-widget h1 {
  color: white;

  margin-bottom: 45px;
}

.home-row .details-widget h1 {
  color: white;
  margin-bottom: 20px;
}

.home-row .details-widget .detail-head {
  color: var(--ace-navy);
}

.home-row h2 {
  font-size: 15px;
  color: var(--ace-navy);
  font-family: 'Point';
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 0px;
}

.home-row .wc-widget, .seltzer-widget {
  width: 23%;
  padding: 20px;
  margin-right: 30px;

  background-color: white;

  height: min-content;
}

.home-row .seltzer-widget {
  margin-right: 0px;
}


/* Clear floats after the columns */
.home-row:after {
  content: "";
  display: table;
  clear: both;
}

.territory-top, .store-top {
  color: white;

  font-size: 15;
  font-family: 'Point Extra';
  font-weight: bold;
  height: 35px;
  width: 100%;

  padding-top: 10px;
}

.territory-top {
  background-color: var(--ace-navy);
}

.store-top {
  background-color: #54c8f5;
}

.content-div {
  border-top: 2px solid #3a3a3c;

  width: 500px;
  max-width: calc(100vw - 30px);
  margin: auto;

  padding-top: 35px;
  padding-bottom: 35px;
}

.content-div-bottom {
  border-bottom: 2px solid #3a3a3c;
  margin-bottom: 175px;
}

.content-div h1 {
  font-size: 20px;
  font-weight: bold;

  margin-bottom: -10px;
}

.content-div h1.top-title {
  font-weight: 300;
  font-size: 25px;
  line-height: 25px;

  margin-top: 10px;
  margin-bottom: 10px;
}

.content-div h2 {
  font-size: 17px;
  font-weight: normal;
}

.menu-style {
  margin: auto;

  margin-top: 30px;
  margin-bottom: 30px;

  display: block;
}

.leaderboard-div

.align-right {
  float: right;
}

.align-left {
  float: left;
}

.footer-text {
  font-size: 15px;
  color: white;
}

.leaderboard-row {
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;

  border-top: 2px solid #023C5A;

  color: #023C5A;
  font-weight: bold;
  font-family: 'Point';
  font-size: 18px;
}

.leaderboard-row-right {
  float: right;
  color: #5CA875;

  margin-top: -5px;

  font-size: 25px;
  font-family: 'Point Extra';
}


/* Account */
.account-widget {
  border-radius: 10px;
  text-align: left;

  width: 400px;
  max-width: calc(100vw - 30px);
  min-height: 625px;

  margin-top: 50px;
  padding-bottom: 20px;

  background-color: white;

  text-align: center;
}

.account-widget img {
  background-color: white;
  height: 40%;
  width: 100%;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  object-fit: cover;
}

.account-widget h1 {
  margin-top: 30px;
  margin-left: 30px;
  margin-bottom: 30px;

  text-align: left;
}

.account-widget h2 {
  text-align: left;
  margin-left: 30px;
}

.account-widget button {
  width: 85%;
  margin-bottom: 10px;

  border-radius: 5px;

  font-family: 'Point Extra';
  font-size: 18px;
  cursor: pointer;
}

.account-widget #save-btn {
  margin-top: 35px;
  height: 70px;

  background-color: var(--ace-navy);
  border: none;
  color: white;
}

.account-widget #signout-btn {
  background-color: white;
  border: 1px solid grey;

  font-family: 'Point';

  height: 50px;
  color: grey;
  margin-top: 10px;
}

.account-widget #signout-btn:hover {
  background-color: #ED493E;
  border: none;

  font-family: 'Point';

  height: 50px;
  color: white;
}

.account-widget #change-pw-section {
  margin: 30px 0 5px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
}

.account-widget .change-pw-heading {
  font-size: 16px;
  margin-bottom: 14px;
}

.account-widget .pw-input {
  display: block;
  width: 85%;
  margin: 0 auto 10px;
  padding: 12px 14px;
  box-sizing: border-box;

  border: 1px solid #ccc;
  border-radius: 5px;

  font-family: 'Point';
  font-size: 15px;
}

.account-widget .pw-input:focus {
  outline: none;
  border-color: var(--ace-navy);
}

.account-widget #change-pw-btn {
  margin-top: 5px;
  height: 50px;

  background-color: var(--ace-navy);
  border: none;
  color: white;

  font-family: 'Point';
}

.account-widget #change-pw-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.links-button {
  height: 45px;
  width: 100%;
  border: none;
  border-radius: 5px;

  margin-top: 12px;

  font-family: 'Point';
  font-weight: bold;

  cursor: pointer;

  background-color: #54c8f5;
  color: white;
}

.links-button.lostrev {
  background-color: #cc252c;
}

.links-button.agency {
  background-color: #c380ff;
}

.links-button.agency-metrics {
  background-color: #662c85;
}

.links-button.inventory {
  background-color: #f56909;
}

.links-button.stores {
  background-color: #003a5c;
}


.opportunity-button {
  height: 40px;
  width: 120px;
  border: none;
  border-radius: 5px;

  position: absolute;

  margin-top: 12px;
  right: 50px;

  font-family: 'Point';
  font-weight: bold;

  cursor: pointer;

  background-color: #54c8f5;
  color: white;
}

.opportunity-button.delisted {
  margin-right: 135px;
  opacity: 100;
}

.opportunity-button.listed, .opportunity-button.inventory, .opportunity-button.lostrev {
  opacity: 0.5;
}

.opportunity-button.inventory {
  background-color: #f56909;
}

.opportunity-button.lostrev {
  background-color: #cc252c;
}

.opportunity-button.csv {
  margin-right: 270px;
  opacity: 100;

  background-color: #0f9d58;
}

.opportunity-button.skinny {
  width: 110px;
}


.toggle {
  position: absolute;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .onoff {
  color: #fff;
  display: inline-block;
  font-size: 15px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.slider {
  display: inline-block;
  cursor: pointer;
  background-color: #333;
  transition: 0.4s;
  /* Fluid below 440px viewports; the checked-state translate below must
     use the same expression so the knob lands flush at the right edge. */
  width: min(400px, calc(100vw - 40px));
  height: 50px;

  margin-top: 7px;
}

.slider:before {
  content: "";
  position: absolute;
  height: 30px;
  width: 180px;
  background-color: #fff;
  transition: 0.4s;
  top: 10px;
  left: 10px;

  margin-top: 7px;
}

.slide-title {
  position: fixed;
  margin-left: 50px;
  margin-top: 20px;
}

input:checked + .slider {
  background-color: blue;
}

input:checked + .slider:before {
  /* travel = slider width - knob 180px - 2x10px inset */
  transform: translateX(calc(min(400px, 100vw - 40px) - 200px));
}

.slider.round {
  border-radius: 5px;
}
.slider.round::before {
  border-radius: 5px;
}


.gridjs-table {
  width: 100%;
}



.home-row .table-widget .confirm-checkoff-warning {
  color: black; font-size: 15px; font-family: 'Point'; margin-bottom: 30px; opacity: 0.5;
}

.home-row .table-widget .confirm-checkoff-h1 {
  color: black; font-size: 25px; font-family: 'Point'; margin-bottom: -10px; color:#f5690a;
}

.home-row .table-widget .confirm-checkoff-h2 {
  color: black; font-size: 20px; font-family: 'Point'; font-weight: normal; margin-bottom: 30px;
}

h1.territory-opp {
  display: inline-block;
}

div.table-b-d {
  width: 100%;
  margin-bottom: 20px;
  height: fit-content;
  width: 390px;
  margin-right: 0px;
  margin-left: auto;
  margin-top: -80px;
}
div.table-b-d.store {
  width: 530px;
}
div.table-b-d.store.wider {
  width: 610px;
}

button.table-b {
  position: static;
  margin: 0 !important;
  width: 120px;
  margin-right: 10px !important;
}
button.table-b:last-child {
  margin-right: 0px !important;
}

div.gridjs-search {
  width: 100%;
  max-width: 375px;
}
input.gridjs-search-input {
  width: 100%;
}
th.gridjs-th-sort > div.gridjs-th-content {
  font-family: 'Point Extra';
}
td.gridjs-td {
  font-family: 'Point';
}
h1.links-hm.agency {
  margin-bottom: 30px;
}

div.details-widget.agency.metrics {
  margin-top: 20px;
}
div.table-widget.agency {
  background: linear-gradient(180deg, #461b5e 70px, white 70px);
}
button.table-b.solo {
  width: 100% !important;
  padding-left: 15px;
  padding-right: 15px;
}

a.ist-b-ist {
  text-decoration: underline;
  color: #780901;
  font-weight: bold;
  cursor: pointer;
}
a.ist-b-ign {
  text-decoration: underline;
  color: gray;
  font-weight: bold;
  cursor: pointer;
  float: right;
}
br.ist-br {
  display: none;
}

#mySidenav.sb-open {
  margin-left: 0px !important;
}
#aceapp-header.sb-open {
  margin-left: 350px !important;
}
#app.sb-open {
  margin-left: 350px !important;
  margin-right: -350px !important;
}

#mySidenav {
  margin-left: -354px !important;
  border-right: 2px solid var(--ace-navy);
  border-left: 2px solid var(--ace-navy);
}
#aceapp-header {
  margin-left: 0px !important;
}
#app {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
#leftnav {
  display: block;
}
/* Sidebar close X — visible on all viewport sizes when sidebar is open.
   Mobile media query below overrides to inline-flow positioning. */
a.close-nav-mb {
  display: block;
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  z-index: 20;
  cursor: pointer;
  transition: background-color .15s;
  box-sizing: border-box;
}
a.close-nav-mb:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
a.close-nav-mb > svg {
  display: block;
  width: 16px;
  height: 16px;
}

h1.sb-t-hm {
  font-size: 12px;
  font-family: 'Aribau Grotesk TRIAL';
  margin-left: 15px;
  margin-top: 0px;
  margin-bottom: 10px;
  color: #7caecc;
  font-weight: 600;
}

div.table-widget > div:first-child.mult {
  align-items: center;
  display: inline-flex;
  margin-top: 12px;
  margin-bottom: 30px;
}

div.home-row div.table-widget h1.territory-op.mult {
  margin: 0;
}

div.table-b-d.mult {
  margin-top: auto;
  margin-bottom: auto;
}

div.gridjs-summary {
  font-family: 'Point';
  font-size: 15px;
}

div.details-d:last-child {
  margin-bottom: 0px !important;
}


div.ai-cont {
  width: 90vw;
  height: calc(100% - 80px);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

div.ai-btm {
  position: fixed;
  bottom: 30px;
  left: 5vw;
  width: 90vw;
}

div.ai-btm > input.msg-box {
  width: calc(100% - 65px);
  max-width: 635px;
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  border-radius: 5px;
  border: none;
  padding-left: 15px;
  padding-right: 50px;
  background-color: white;
  border: 1px solid #e2e2e2;
  font-size: 15px;
  color: black;
  font-family: 'Aribau Grotesk';
  font-weight: 400;
}

div.ai-btm > button.msg-submit {
  width: 30px;
  height: 30px;
  margin-left: -45px;
  margin-top: auto;
  margin-bottom: auto;
  border: none;
  background-color: #54c8f5;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: ease-in-out 0.1s;
}

div.ai-btm > button.msg-submit:hover {
  transform: scale(1.1);
}

div.ai-line {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #80808030;
  margin-top: 20px;
  margin-bottom: 20px;
}

div.chat-cont {
  width: 100%;
  height: fit-content;
  padding-bottom: 100px;
}

/* ── Welcome state ── */
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 80px;
  text-align: center;
  margin-top: -30px;
}

.chat-welcome-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f7fc 0%, #d0effa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.chat-welcome-title {
  font-size: 19px;
  font-weight: 700;
  color: #04395E;
  margin: 0 0 4px 0;
  font-family: 'Point', sans-serif;
}

.chat-welcome-sub {
  font-size: 13px;
  color: #7a8a9e;
  margin: 0 0 20px 0;
  font-family: 'Aribau Grotesk';
  max-width: 340px;
  line-height: 1.4;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 480px;
}

.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #334155;
  font-size: 12.5px;
  font-family: 'Aribau Grotesk';
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.chat-chip:hover {
  border-color: #54c8f5;
  background: #f0faff;
  color: #04395E;
  box-shadow: 0 2px 8px rgba(84,200,245,0.15);
  transform: translateY(-1px);
}

.chat-chip:active {
  transform: translateY(0);
}

.chip-icon {
  display: flex;
  align-items: center;
  color: #54c8f5;
}

.chat-chip:hover .chip-icon {
  color: #04395E;
}

div.ai-msg.hidden {
  opacity: 0 !important;
}

div.ai-msg {
  width: 100%;
  padding: 0px;
  height: fit-content;
  display: flex;
  margin-bottom: 20px;
}

div.ai-msg:not(.response) > div.text-cont > div.ai-text {
  background: #04395E;
  border-radius: 10px;
  padding: 10px 14px;
}
div.ai-msg:not(.response) > div.text-cont > div.ai-text > h3 {
  color: #fff !important;
}

div.ai-msg.response {
  margin-bottom: 20px;
}

div.ai-msg.response > div.text-cont > div.ai-text {
  background: #f8fafc;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 12px 15px;
}

div.ai-msg.response > div.text-cont > div.ai-text > h3 {
  color: #334155;
}

div.ai-msg > div.profile {
  width: fit-content;
  height: fit-content;
  margin-right: 25px;
}

div.ai-msg > div.profile > h1 {
  font-size: 12px;
  margin: 0;
  color: #04395E;
  text-align: left;
  width: 80px;
}

div.ai-msg > div.profile > h1 > span {
  color: #54C8F5;
}

div.ai-msg > div.profile > h3 {
  font-size: 11px;
  color: #c3c3c3;
  margin: 1px 0 0 0;
  font-family: 'Aribau Grotesk';
  text-align: left;
}

div.ai-msg > div.profile > img {
  margin-top: 2px;
}

div.ai-msg > div.text-cont {
  width: calc(100% - 55px);
}

div.ai-msg > div.text-cont > div.ai-text {
  width: fit-content;
}

div.ai-msg > div.text-cont > div.ai-text > h3 {
  font-size: 14px;
  font-weight: normal;
  color: #1e293b;
  font-family: 'Aribau Grotesk';
  text-align: left;
  margin: 0;
  line-height: 1.55;
}

div.ai-msg > div.text-cont > div.ai-text > h3 p {
  margin: 0 0 10px 0;
}
div.ai-msg > div.text-cont > div.ai-text > h3 p:last-child { margin-bottom: 0; }

div.ai-msg > div.text-cont > div.ai-text > h3 strong {
  font-weight: 600;
  color: #04395E;
}

div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-h1 {
  font-size: 15px;
  font-weight: 700;
  color: #04395E;
  margin: 12px 0 4px 0;
}
div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-h2 {
  font-size: 14px;
  font-weight: 600;
  color: #04395E;
  margin: 10px 0 3px 0;
}
div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-h3 {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 8px 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-bullet {
  padding-left: 14px;
  position: relative;
  margin: 4px 0;
}
div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-bullet::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: #54c8f5;
  font-weight: bold;
}
div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-bullet .ai-resp-num {
  color: #54c8f5;
  font-weight: 600;
}
div.ai-msg > div.text-cont > div.ai-text > h3 .ai-resp-bullet:has(.ai-resp-num)::before {
  content: none;
}

div.ai-msg > div.text-cont > div.ai-feedback {
  margin-top: 15px;
  margin-left: 0px;
  width: fit-content;
  display: flex;
}

div.ai-msg > div.text-cont > div.ai-feedback > button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.selected {
  opacity: 1;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.hidden {
  opacity: 0.3;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.rg {
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  background-color: #f2f2f2;
  margin-right: 20px;
  border: 1px solid #d3d3d3;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.rg > svg {
  margin: auto 0 auto 0;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.rg > h2 {
  font-family: 'Aribau Grotesk';
  font-size: 13px;
  font-weight: bold;
  margin: auto auto auto 8px;
  color: #5c5c5c;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.p {
  background-color: #54c8f5;
  margin-right: 10px;
}

div.ai-msg > div.text-cont > div.ai-feedback > button.n {
  background-color: #f55454;
  margin: 0;
}

a.ai-resp-store-link {
  font-size: 15px;
  padding: 0;
  font-size: 15px;
  color: #54c8f5;
  font-weight: bold;
  font-family: 'Point', sans-serif;
}

div.ai-feedback-cont {
  /* 100% not 100vw: 100vw includes the scrollbar and forces h-overflow */
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--ace-navy)99;
  z-index: 5000;
}

div.ai-feedback-cont.hidden {
  display: none;
}

div.ai-feedback-d {
  background-color: white;
  margin: 20vh auto auto auto;
  height: fit-content;
  width: 90%;
  max-width: 400px;
  border-radius: 10px;
  padding: 20px;
}

div.ai-feedback-top {
  width: 100%;
  height: fit-content;
  display: flex;
  vertical-align: middle;
  margin-bottom: 20px;
}

div.ai-feedback-top > h1 {
  font-size: 15px;
  color: black;
  margin: auto auto auto 0;
  font-family: 'Point', sans-serif;
  font-weight: bold;
}

div.ai-feedback-top > button {
  height: 30px;
  width: 30px;
  margin: 0 0 0 auto;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

div.ai-feedback-mid {
  width: 100%;
  height: fit-content;
  margin-bottom: 25px;
}

div.ai-feedback-mid > button {
  width: 100%;
  padding-left: 15px;
  height: 40px;
  font-size: 13px;
  background-color: #F2F2F2;
  border-radius: 5px;
  border: none;
  text-align: left;
  margin-bottom: 15px;
  cursor: pointer;
  font-family: 'Aribau Grotesk TRIAL';
  font-weight: bold;
  color: #808080;
  transition: ease-in-out 0.2s;
}

div.ai-feedback-mid > button.selected {
  background-color: #04395E;
  color: white;
}

div.ai-feedback-mid > button:hover {
  transform: scale(1.05);
}

div.ai-feedback-mid > button:last-child {
  margin-bottom: 0px;
}

div.ai-feedback-btm {
  margin-bottom: 20px;
}

div.ai-feedback-btm > h2 {
  font-size: 14px;
  margin: 0;
  color: #808080;
  text-align: left;
  margin-bottom: 10px;
  font-family: 'Point', sans-serif;
  font-weight: bold;
}

div.ai-feedback-btm > textarea {
  width: calc(100% - 20px);
  background-color: #f2f2f2;
  border-radius: 5px;
  border: none;
  height: 125px;
  vertical-align: top;
  resize: none;
  padding: 10px;
  font-family: 'Aribau Grotesk';
}

button.ai-feedback-submit {
  width: 100%;
  height: 45px;
  font-size: 13px;
  background-color: #54C8F5;
  color: white;
  border: none;
  border-radius: 5px;
  font-family: 'Aribau Grotesk TRIAL';
  font-weight: bold;
  cursor: pointer;
  transition: ease-in-out 0.2s;
}

button.ai-feedback-submit:hover {
  transform: scale(1.05);
}

button.ai-feedback-submit.hidden {
  opacity: 0.3;
}

button.ai-feedback-submit.hidden:hover {
  transform: none;
}

.ai-seg-control {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 auto 20px auto;
  width: 50%;
  min-width: min(300px, 100%);
}

.ai-seg-control input[type="radio"] {
  display: none;
}

.ai-seg-control label {
  flex: 1;
  padding: 8px 0 8px 0;
  text-align: center;
  cursor: pointer;
  color: black;
  font-size: 15px;
}

.ai-seg-control input[type="radio"]:checked + label {
  background-color: var(--ace-navy);
  color: white;
  font-size: 15px;
}


.lds-loader div { box-sizing: border-box!important }
.lds-loader > div {
  position: absolute;
  width: 54px;
  height: 54px;
  top: 73px;
  left: 73px;
  border-radius: 50%;
  border: 6px solid #000;
  border-color: #04395e transparent #04395e transparent;
  animation: lds-loader 1s linear infinite;
}
.lds-loader > div:nth-child(2) { border-color: transparent }
.lds-loader > div:nth-child(2) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.lds-loader > div:nth-child(2) div:before, .lds-loader > div:nth-child(2) div:after { 
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  top: -6px;
  left: 18px;
  background: #04395e;
  border-radius: 50%;
  box-shadow: 0 48px 0 0 #04395e;
}
.lds-loader > div:nth-child(2) div:after { 
  left: -6px;
  top: 18px;
  box-shadow: 48px 0 0 0 #04395e;
}
.lds-loader-cont {
  height: fit-content;
  padding: 5px 0 5px 0;
  display: flex;
  overflow: hidden;
}
div.lds-loader-cont > h3 {
  margin: 0 0 30px 30px;
  font-size: 12px;
  font-family: 'Point Semi';
  color: #04395e;
}
div.lds-loader {
  position: relative;
  transform: translateZ(0) scale(0.25);
  backface-visibility: hidden;
  transform-origin: 0 0;
  margin: -18px 10px 0 -18px;
}
div.lds-loader div { box-sizing: content-box; }
@keyframes lds-loader {
  0% { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}




@media screen and (max-width: 1200px) {
  div.table-widget > div.mult:first-child {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  div.home-row div.table-widget h1.territory-opp.mult {
    margin-bottom: 45px;
  }
  div.details-widget.territory.mbtwn {
    margin-bottom: 20px;
  }
  h1.territory-opp.smbtmmrg {
    margin-bottom: 25px !important;
  }
  div.home-row {
    display: block;
  }
  div.home-top-row {
    display: inline-flex;
    width: 100%;
    margin-bottom: 10px;
  }
  div.table-widget {
    width: calc(100% - 40px) !important;
  }
  div.details-widget.territory.btm {
    margin-top: 0px !important;
    margin-right: 0px;
    background: linear-gradient(180deg, var(--ace-navy) 45px, white 45px);
    padding-bottom: 10px !important;
  }
  div.details-widget.territory {
    width: calc(50% - 30px) !important;
    margin-right: 10px;
    background: linear-gradient(180deg, var(--ace-navy) 45px, white 45px);
  }
  div.details-widget.store {
    width: calc(50% - 30px) !important;
    margin-right: 10px;
    background: linear-gradient(180deg, var(--ace-navy) 45px, #E5F8FF 45px);
  }
  div.details-widget.agency {
    width: calc(50% - 30px) !important;
    background: linear-gradient(180deg, #461b5e 45px, white 45px) !important;
    margin-right: 10px;
  }
  div.details-widget.agency.metrics {
    margin-top: 0px;
  }
  div.details-widget.agency-store {
    width: calc(50% - 30px) !important;
    background: linear-gradient(180deg, #461b5e 45px, white 45px) !important;
    margin-right: 10px;
    padding-bottom: 10px;
    margin-top: 0px !important;
  }
  div.details-widget.ist {
    width: calc(50% - 30px) !important;
    background: linear-gradient(180deg, #780901 45px, white 45px) !important;
    margin-bottom: 20px;
  }
  h1.metrics-hm {
    font-size: 15px !important;
    margin: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 32px !important;
  }
  h1.links-hm {
    margin: 0 !important;
    font-size: 15px !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
  }
  h1.detail-head {
    font-size: 20px !important;
    margin-top: 0px !important;
  }
  div.details-d {
    margin-bottom: 10px !important;
  }
  button.table-b {
    margin: 0px !important;
    position: static !important;
    margin-right: 10px !important;
    width: calc(33% - 10px) !important;
    height: 50px !important;
  }
  button.table-b.store {
    margin: 0px !important;
    position: static !important;
    margin-right: 10px !important;
    width: calc(25% - 13px) !important;
    height: 50px !important;
  }
  button.table-b.store.skinny {
    width: calc(25% - 15px) !important;
    margin-bottom: 10px !important;
  }
  button.table-b.csv {
    margin-right: 0px !important;
  }
  div.table-b-d {
    margin: 0px !important;
    width: 100% !important;
    /* margin-bottom: 20px !important; */
  }
  div.table-b-d.solo {
    margin-top: -80px !important;
    margin-bottom: 20px !important;
    margin-left: auto !important;
    margin-right: 0px !important;
    width: fit-content !important;
  }
  div.table-b-d.store {
    margin-bottom: 15px !important;
  }
  div.table-b-d.solo > button.table-b {
    height: 40px !important;
  }
  div.home-row.account {
    display: flex;
  }
  div.home-row.home {
    display: flex;
  }
}

@media screen and (max-width: 1000px) {
  div.home-row div.leader-widget, div.home-row div.wc-widget, div.home-row div.seltzer-widget {
    width: calc(100% - 30px);
    padding: 15px;
    margin-bottom: 15px;
  }
  div.home-row div.leader-widget, div.home-row div.wc-widget {
    margin-right: 15px;
  }
  p.leaderboard-row {
    padding: 10px;
    font-size: 15px;
  }
  p.leaderboard-row:last-child {
    padding: 0px;
  }
  span.leaderboard-row-right {
    font-size: 20px;
  }
  h1.home-widget-hm {
    margin-top: 0px;
    font-size: 22px;
    margin-bottom: 5px;
  }
  h2.home-widget-hs {
    font-size: 15px;
    margin-bottom: 20px !important;
  }
}

@media screen and (max-width: 875px) {
  div.home-row.home {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  div.home-row {
    padding: 15px;
  }
  th.gridjs-th-sort {
    padding: 10px !important;
  }
  th.gridjs-th-sort > div.gridjs-th-content {
    font-size: 15px;
    margin-top: 2px;
  }
  div.home-top-row {
    display: block;
    width: 100%;
    margin-bottom: 0px;
  }
  div.table-widget {
    width: calc(100% - 40px) !important;
  }
  div.details-widget {
    width: calc(100% - 40px) !important;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  div.details-widget.territory.btm {
    margin-top: 0px !important;
    margin-right: 0px;
    background: linear-gradient(180deg, var(--ace-navy) 45px, white 45px);
    padding-bottom: 10px !important;
    margin-bottom: 10px;
  }
  div.details-widget.territory {
    width: calc(100% - 40px) !important;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  div.details-widget.store {
    width: calc(100% - 40px) !important;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  div.details-widget.agency {
    background: linear-gradient(180deg, #461b5e 45px, white 45px) !important;
    width: calc(100% - 40px) !important;
  }
  div.details-widget.agency-store {
    background: linear-gradient(180deg, #461b5e 45px, white 45px) !important;
    width: calc(100% - 40px) !important;
  }
  div.details-widget.agency.metrics {
    margin-top: 0px;
    padding-bottom: 10px !important;
  }
  div.details-widget.ist {
    width: calc(100% - 40px) !important;
  }
  div.table-widget.ist {
    background: linear-gradient(180deg, #780901 45px, white 45px) !important;
  }
  td.gridjs-td {
    font-size: 14px !important;
    padding: 5px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  h1.territory-opp {
    margin: 0 !important;
    font-size: 15px !important;
    margin-top: 8px !important;
    margin-bottom: 40px !important;
  }
  button.table-b {
    margin: 0px !important;
    position: static !important;
    margin-right: 10px !important;
    width: calc(33% - 10px) !important;
    height: 50px !important;
  }
  button.table-b.store {
    margin: 0px !important;
    position: static !important;
    margin-right: 10px !important;
    width: calc(25% - 11px) !important;
    height: 50px !important;
  }
  button.table-b.csv {
    margin-right: 0px !important;
  }
  div.table-b-d, div.table-b-d.solo {
    margin: 0px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  div.table-b-d.store {
    margin: 0px !important;
    width: 100% !important;
    margin-bottom: 0px !important;
  }
  div.table-b-d.store > button {
    margin: 0px !important;
    width: calc(50% - 10px) !important;
    margin-right: 15px !important;
    margin-bottom: 15px !important;
  }
  div.table-b-d.store > button.skinny {
    width: calc(50% - 18px) !important;
  }
  button.opportunity-button.table-b.store.listed {
    margin-right: 0px !important;
  }
  button.opportunity-button.table-b.store.csv {
    margin-right: 0px !important;
  }
  div.table-widget {
    background: linear-gradient(180deg, var(--ace-navy) 45px, white 45px) !important;
  }
  div.table-widget.agency {
    background: linear-gradient(180deg, #461b5e 45px, white 45px) !important;
  }
  div.territory-top {
    font-size: 15px;
    padding-top: 15px;
  }
  a.ist-b-ist {
    float: left;
    margin-left: 10px;
  }
  a.ist-b-ign {
    float: left;
    margin-left: 10px;
    margin-top: 20px;
  }
  br.ist-br {
    display: block;
  }
  div.territory-top.elong {
    padding-bottom: 15px !important;
  }
  h2#my-email {
    margin-bottom: 10px;
  }
  h2.uid-hs {
    margin-bottom: 25px;
    font-size: 12px;
  }
  a.close-nav-mb {
    display: block;
    margin-top: 15px;
    position: relative;
    margin-bottom: 10px;
    background-color: transparent;
  }
  div.sidenav > a:nth-child(2) {
    margin-top: 0px;
  }
  div.sidenav {
    padding-bottom: 45px;
  }
  a.snm.clickable:last-child {
    margin-bottom: 80px;
  }
  a.sidenav-logo {
    margin-left: calc(50vw - 60px) !important;
    margin-top: 30px !important;
  }
  #leftnav.sb-open {
    display: none;
  }
  #app.sb-open {
    overflow: hidden;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  /* Counterpart to the #app un-push above: without this the header stays
     shoved 350px right behind the full-width sidebar overlay. */
  #aceapp-header.sb-open {
    margin-left: 0px !important;
  }
  div.sidenav.sb-open {
    width: calc(100% - 4px);
  }
  div.headernav.sb-open > a.header-logo {
    display: none;
  }
  div.gridjs-pagination {
    text-align: center;
  }
  div.gridjs-pages {
    margin-left: auto;
    margin-right: auto;
    float: none !important;
    display: inline-flex !important;
  }
  div.gridjs-pages > button {
    display: none;
  }
  div.gridjs-pages > button.gridjs-currentPage, div.gridjs-pages > button[title=Previous], div.gridjs-pages > button[title=Next] {
    display: block;
  }
  div.gridjs-summary {
    float: none !important;
    text-align: center;
    margin-bottom: 10px;
  }
  div.details-d:last-child {
    margin-bottom: 5px !important;
  }
}

/* ============================================================
   SIDEBAR V1 — Navy refined (flag-gated via body[data-sidebar-v1])
   Legacy sidebar (mySidenav direct children) shown by default.
   When body[data-sidebar-v1] is set, legacy is hidden and V1 shows.
   ============================================================ */
body[data-sidebar-v1] #mySidenav [data-legacy-sidebar] { display: none !important; }
body:not([data-sidebar-v1]) #mySidenav [data-v1-sidebar]  { display: none !important; }

/* V1 narrows the rail to 248px (legacy is 350px). Closed: slid off left. Open: flush at x=0.
   !important required everywhere because legacy #mySidenav rules use it.
   Closed offset is -252px, not -248px: #mySidenav carries 2px left + 2px right
   borders (content-box), so -248px left a 4px sliver overlapping #app.
   (Legacy gets this right: 350px rail, -354px offset.) */
body[data-sidebar-v1] #mySidenav { width: 248px !important; margin-left: -252px !important; padding: 0 !important; }
body[data-sidebar-v1] #mySidenav.sb-open { margin-left: 0 !important; }
body[data-sidebar-v1] #aceapp-header.sb-open { margin-left: 248px !important; }
/* margin-right must be overridden too: without it the legacy 350px-rail rule
   (#app.sb-open margin-right: -350px) still applies under V1, so the open
   state was asymmetric (ml 248 / mr -350) and page content sat off-center. */
body[data-sidebar-v1] #app.sb-open { margin-left: 248px !important; margin-right: -248px !important; }

/* V1 surface */
.sidenav.sb1,
.sidenav .sb1 {
  background:#0c1a2e; color:#a9b6c4; padding: 14px 10px 10px;
  display:flex; flex-direction:column; gap:4px; border-right:1px solid #1c2a3f;
  min-height: 100vh;
  /* dvh where supported: on iOS Safari 100vh overshoots the visible viewport
     (URL bar), pushing the footer rep card below the fold. */
  min-height: 100dvh;
  font-family: 'Manrope', 'Point', system-ui, sans-serif;
}

.sidenav .sb1-top { padding: 0 8px 12px; }
.sidenav .sb1-mkt {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(90,200,242,0.12); color: #cfeaf7;
  padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  border: 1px solid rgba(90,200,242,0.25);
  cursor: pointer;
  position: relative;
}
.sidenav .sb1-mkt svg.sb1-glyph { color: #FF7182; }
/* The chip hosts THE province switcher: an invisible native select stretched
   over the whole chip, so tapping it opens the native picker. Replaces the
   old header dropdown; all JS keeps addressing #province-select by id.
   16px font so iOS never auto-zooms on focus. */
.sidenav .sb1-mkt #province-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Keyboard focus lands on the invisible select; paint the ring on the chip. */
.sidenav .sb1-mkt:focus-within {
  outline: 2px solid var(--ace-blue);
  outline-offset: 2px;
}

.sidenav .sb1-search {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 6px 12px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  color: #7d8b9b;
}
.sidenav .sb1-search input {
  flex: 1; background: transparent; border: 0; outline: 0; color: #e2e8f0; font-size: 12px;
  font-family: inherit;
}
.sidenav .sb1-search kbd {
  font-family: 'SF Mono', monospace; font-size: 10px; color: #7d8b9b;
  background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px;
}

.sidenav .sb1-group { padding: 8px 0 6px; border-top: 1px solid rgba(255,255,255,0.04); }
.sidenav .sb1-group:first-of-type { border-top: 0; }
.sidenav .sb1-sec {
  padding: 4px 14px 6px; font-size: 10px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: #5a6a7d;
}

.sidenav .sb1-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin: 1px 4px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #a9b6c4;
  text-decoration: none; cursor: pointer; position: relative;
}
.sidenav .sb1-item:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
.sidenav .sb1-item .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidenav .sb1-item svg { opacity: .75; flex-shrink: 0; color: currentColor; }
.sidenav .sb1-item.is-active {
  background: rgba(90,200,242,0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(90,200,242,0.25);
}
.sidenav .sb1-item.is-active::before {
  content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: #5AC8F2;
}
.sidenav .sb1-item.is-active svg { color: #5AC8F2; opacity: 1; }

.sidenav .sb1-count {
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: #cfd9e3;
}
.sidenav .sb1-count.warn { background: rgba(246,180,114,0.18); color: #F6B472; }
.sidenav .sb1-count.crit { background: rgba(255,113,130,0.18); color: #FF7182; }

.sidenav .sb1-pin { padding: 0 0 8px; margin: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidenav .sb1-item.is-pin {
  background: linear-gradient(180deg, rgba(90,200,242,0.10), rgba(90,200,242,0.04));
  color: #e2e8f0; box-shadow: inset 0 0 0 1px rgba(90,200,242,0.18);
  margin: 0 4px;
}
.sidenav .sb1-item.is-pin svg { color: #5AC8F2; opacity: 1; }
.sidenav .sb1-kbd {
  font-family: 'SF Mono', monospace; font-size: 9.5px;
  background: rgba(255,255,255,0.08); color: #a9b6c4;
  padding: 1px 5px; border-radius: 4px; letter-spacing: .4px;
}

.sidenav .sb1-meta { font-size: 10px; color: #5a6a7d; font-weight: 600; letter-spacing: .2px; }

.sidenav .sb1-toggle {
  background: transparent; border: 0; width: calc(100% - 8px); text-align: left;
  font: inherit; color: #7d8b9b; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; margin: 1px 4px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
.sidenav .sb1-toggle:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
.sidenav .sb1-toggle svg { transition: transform .15s ease; flex-shrink: 0; }
.sidenav .sb1-toggle.is-open svg { transform: rotate(90deg); color: #5AC8F2; }
.sidenav .sb1-toggle .lbl { flex: 1; min-width: 0; }

.sidenav .sb1-reps {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 4px 4px 14px; padding: 4px 0 4px 4px;
  max-height: 220px; overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.sidenav .sb1-reps[hidden] { display: none; }
.sidenav .sb1-reps::-webkit-scrollbar { width: 4px; }
.sidenav .sb1-reps::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.sidenav .sb1-rep-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; margin: 0 2px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: #8b97a6;
  text-decoration: none; cursor: pointer;
}
.sidenav .sb1-rep-item:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
.sidenav .sb1-rep-item.is-active { background: rgba(90,200,242,0.12); color: #fff; }
.sidenav .sb1-rep-item .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidenav .sb1-repdot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: #cfd9e3;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 800; letter-spacing: .2px;
  flex-shrink: 0;
}

.sidenav .sb1-foot { margin-top: auto; padding: 10px 6px max(4px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.06); }
.sidenav .sb1-rep {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.sidenav .sb1-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #5AC8F2, #023C5B);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.sidenav .sb1-rep .nm { font-size: 12px; font-weight: 800; color: #e2e8f0; line-height: 1.2; }
.sidenav .sb1-rep .rl { font-size: 10px; color: #7d8b9b; letter-spacing: .3px; margin-top: 1px; }

/* Mobile-narrow: V1 sidebar fills width when open, as a pure overlay.
   Closed: fully off-screen left (-100% clears the rail; borders are absorbed
   by the body overflow-x clip). Open: header and #app stay put; the rail is
   an opaque fixed overlay above them, so pushing them a full viewport right
   (the old calc(100% - 4px)) only made the document 2x wide and horizontally
   scrollable behind the nav. */
@media (max-width: 700px) {
  body[data-sidebar-v1] #mySidenav { width: calc(100% - 4px) !important; margin-left: -100% !important; }
  body[data-sidebar-v1] #mySidenav.sb-open { margin-left: 0 !important; }
  body[data-sidebar-v1] #aceapp-header.sb-open,
  body[data-sidebar-v1] #app.sb-open { margin-left: 0 !important; }
}