.section-head.is-collapsible[data-v-9fed33f2]{
  width:100%;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  display:flex; align-items:center; gap:.5rem;
  padding-right:.25rem;
  border-radius:8px;
  transition: background-color .15s ease;
}
.section-head.is-collapsible[data-v-9fed33f2]:hover{
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}
.section-head.is-collapsible[data-v-9fed33f2]:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, #fff);
  outline-offset: 2px;
}
.chev[data-v-9fed33f2]{
  color: var(--accent);
  font-size: 1rem;
  transition: transform .2s ease;
  flex-shrink:0;
}
.chev-rot[data-v-9fed33f2]{ transform: rotate(-90deg);
}
.sec-icon[data-v-9fed33f2]{
  color: var(--accent);
  font-size: 1.05rem;
  margin-right: 2px;
}
.summary-pills[data-v-9fed33f2]{
  margin-left:auto;
  font-size:.8rem;
  color:#6b7a86;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  padding-right:.5rem;
}

.section-body[data-v-d65d6b1c]{
  /* keep ChartGrid spacing intact */
}

/* Shell / card */
.insights-shell[data-v-53d1fffa]{
  border:1px solid #e6edf3;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(13,38,76,.08);
  overflow:hidden;
}

/* Header */
.insights-header[data-v-53d1fffa]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:#f7f9fb;
  border-bottom:1px solid #e6edf3;
}
.title-wrap[data-v-53d1fffa]{
  display:flex; align-items:center; gap:10px;
}
.title-wrap .bi-lightbulb[data-v-53d1fffa]{ color:#4F7EB3; font-size:1.1rem;
}
.title[data-v-53d1fffa]{
  margin:0; font-size:1.1rem; font-weight:700; color:#4F7EB3;
}

/* Controls */
.header-controls[data-v-53d1fffa]{ display:flex; align-items:center; gap:8px;
}
.stora-btn-secondary[data-v-53d1fffa]{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
  font-size:.9rem;
}
.stora-btn-secondary[data-v-53d1fffa]:hover{ background:#B2C149;
}
.stora-btn-secondary[data-v-53d1fffa]:disabled{ opacity:.6; cursor:not-allowed;
}
.icon-close[data-v-53d1fffa]{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid #e6edf3;
  background:#fff; color:#425461; cursor:pointer; transition:background .2s ease;
}
.icon-close[data-v-53d1fffa]:hover{ background:#f0f4f8;
}

/* Body */
.insights-body[data-v-53d1fffa]{ padding:16px;
}
.hint[data-v-53d1fffa]{
  font-size:.85rem; color:#425461; margin:0 0 8px 2px;
}

/* Report content */
[data-v-53d1fffa] .report-container{
  display:grid; gap:14px; padding:2px;
}
[data-v-53d1fffa] .zone-card{
  background:#fff; border-radius:10px; border:1px solid #eef2f6;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:16px; font-size:.92rem; color:#425461;
}
[data-v-53d1fffa] .zone-card strong{ color:#B2C149;
}
[data-v-53d1fffa] .zone-card h2{
  margin:0; font-size:1rem; color:#4F7EB3;
  border-bottom:2px solid #f0f2f6; padding:8px 0 10px;
}
[data-v-53d1fffa] .zone-card h3{
  margin:0; font-size:.98rem; color:#425461;
  border-bottom:1px solid #f0f2f6; padding:8px 0 8px;
}
[data-v-53d1fffa] .zone-card ul{ list-style:disc inside; margin:.6rem 0;
}
[data-v-53d1fffa] .zone-card li{ margin-bottom:.4rem;
}

/* Loader */
.loader-overlay[data-v-53d1fffa]{
  position:relative; min-height:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(0deg, rgba(245,247,250,.6), rgba(245,247,250,.6));
  border:1px dashed #e6edf3; border-radius:10px;
}
.loading-copy[data-v-53d1fffa]{ color:#8899a6; font-size:.9rem; margin:0 0 10px;
}
.loader[data-v-53d1fffa]{
  width:24px; padding:2px; aspect-ratio:1;
  border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-53d1fffa 1s infinite linear;
}
@keyframes spinner-53d1fffa {
to { transform: rotate(1turn);
}
}

.chart-wrapper[data-v-b9debb4a] {
  width: 100%;
  position: relative;
}
.chart[data-v-b9debb4a] {
  width: 100%;
  height: 100%;
}
.skeleton[data-v-b9debb4a] {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
  border: 1px solid #e8eef7;
  border-radius: 14px;
}

.heatmap-widget[data-v-10f629dd] {
  position: relative;
  width: 100%;
  height: 100%;
}
.heatmap-overlay[data-v-10f629dd] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  align-items: center;
  background-color: rgba(255, 255, 255);
  z-index: 10;
}
.no-data-message[data-v-10f629dd] {
    color: gray;
    font-size: 14px; /* Adjust font size to match the design */
    font-style: italic; /* Optional for emphasizing no data */
    text-align: center; /* Center the message */
    margin-top: 10px; /* Add some spacing from the top */
    margin-bottom: 20px; /* Add some spacing from the bottom */
    line-height: 1.5; /* Improve readability with line height */
}
.loading-overlay[data-v-10f629dd] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}
.loader[data-v-10f629dd] {
  width: 20px;
  padding: 2px;
  margin-top: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: spinner-10f629dd 1s infinite linear;
}
@keyframes spinner-10f629dd {
to {
    transform: rotate(1turn);
}
}

.chart-widget[data-v-38914c29] {
  position: relative;
  width: 100%;
}
.no-data-message[data-v-38914c29] {
  color: #7a8895;
  font-size: 13px;
  padding: 8px 0;
  text-align: center;
}

/* Loader overlay preserved from your version */
.loading-overlay[data-v-38914c29] {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}
.loader[data-v-38914c29] {
  width: 20px;
  padding: 2px;
  margin-top: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b2c149;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: spinner-38914c29 1s infinite linear;
}
@keyframes spinner-38914c29 {
to {
    transform: rotate(1turn);
}
}

.chart-wrapper[data-v-873e2a2f]{ width:100%; position:relative;
}
.no-data-message[data-v-873e2a2f]{ color:gray; text-align:center; margin:20px 0
}
.loader-overlay[data-v-873e2a2f]{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.8)}
.loader[data-v-873e2a2f]{ width:24px; aspect-ratio:1; border-radius:50%; background:#B2C149; animation:spin-873e2a2f 1s linear infinite
}
@keyframes spin-873e2a2f{
to{ transform:rotate(1turn)
}
}

.chart-wrapper[data-v-10a41d75]{ width:100%; position:relative;
}
.no-data-message[data-v-10a41d75]{ color:gray; text-align:center; margin:20px 0
}
.loader-overlay[data-v-10a41d75]{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.8)}
.loader[data-v-10a41d75]{ width:24px; aspect-ratio:1; border-radius:50%; background:#B2C149; animation:spin-10a41d75 1s linear infinite
}
@keyframes spin-10a41d75{
to{ transform:rotate(1turn)
}
}

/* ============================================================================
   Layout wrappers
============================================================================ */
.hotcold-wrapper[data-v-1de24ece] {
  align-items: center;
  border-radius: 8px;
}
.table-wrapper[data-v-1de24ece] {
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  overflow-x: visible;
}
.hint[data-v-1de24ece] {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #6b7280;
}

/* ============================================================================
   Store summary card (hero KPIs)
============================================================================ */
.intro-and-summary[data-v-1de24ece] { 
  margin-bottom: 8px;
}
.store-summary-card[data-v-1de24ece]{
  min-width: 260px;
  background:#fafafa;
  border:1px solid #e9eef3;
  border-radius:10px;
  padding:10px 12px;
}
.pzi-intro[data-v-1de24ece] {
  margin-bottom: 14px;
  margin-top: 34px;
}
.pzi-intro h5[data-v-1de24ece] {
  margin: 0 0 4px;
  font-weight: 600;
  color: #425461;
}
.pzi-intro p[data-v-1de24ece] {
  margin: 0;
  font-size: 13px;
  color: #6b7a87;
}
.ssc-grid[data-v-1de24ece]{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

/* each KPI column */
.ssc-kpi[data-v-1de24ece]{
  display: flex;
  flex-direction: column;
  align-items: center;         /* centers label + value */
  gap: 4px;
  text-align: center;
}

/* subtle dividers between columns on wide screens */
.ssc-kpi[data-v-1de24ece]:not(:last-child){
  border-right: 1px solid #e9eef3;
  padding-right: 12px;
}
.ssc-label[data-v-1de24ece]{ 
  color:#537786; 
  font-size:.85rem;
}
.ssc-value[data-v-1de24ece]{ 
  font-weight:700; 
  color:#004F6E; 
  font-variant-numeric: tabular-nums;
}
.ssc-danger[data-v-1de24ece]{
  /* Growth Potential — amber, not red. Opportunity, not loss. */
  color:#a56b1f;
}
.ssc-delta[data-v-1de24ece],
.kpi-delta[data-v-1de24ece] {
  margin-top: 4px;
  font-size: 11px;
  color: #7a8895;
  display: flex;
  align-items: center;
  gap: 4px;
}
.delta-arrow[data-v-1de24ece] {
  font-size: 11px;
}
.delta-arrow.up[data-v-1de24ece] {
  color: #2e7d32;   /* green */
}
.delta-arrow.down[data-v-1de24ece] {
  color: #b3261e;   /* red */
}
.delta-arrow.flat[data-v-1de24ece] {
  color: #9aa7b3;   /* neutral */
}
.delta-main[data-v-1de24ece] {
  font-weight: 600;
}
.delta-extra[data-v-1de24ece] {
  opacity: 0.9;
}

/* Growth Potential delta: neutral grey for both directions.
   The efficiency gauge already signals whether the trend is good/bad —
   judging the Growth Potential delta as red/green re-introduces the
   loss-framing the rename was meant to remove. */
.ssc-kpi--missed .delta-arrow.up[data-v-1de24ece],
.ssc-kpi--missed .delta-arrow.down[data-v-1de24ece] {
  color: #7a8895;
}

/* ============================================================================
   Table base
============================================================================ */
table[data-v-1de24ece] {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  color: #004F6E;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.175);
}
td[data-v-1de24ece], th[data-v-1de24ece] {
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  font-size: clamp(0.82rem, 0.35vw + 0.68rem, 0.95rem); /* fluid base size */
  padding: clamp(6px, 0.6vw, 11px) clamp(6px, 0.8vw, 10px);
  background-color: #fff;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.head-cell[data-v-1de24ece] {
  background: rgba(33, 37, 41, 0.03);
  font-weight: 600;
}
.title-cell[data-v-1de24ece] {
  text-align: left;
  min-width: 0;
}
.title-cell-row[data-v-1de24ece] {
  text-align: left;
  min-width: 0;
  font-size: clamp(0.78rem, 0.25vw + 0.7rem, 0.9rem);
}
.zone-name-cell[data-v-1de24ece] {
  font-weight: 400;
  font-size: clamp(0.78rem, 0.25vw + 0.7rem, 0.9rem);
  background: rgba(33, 37, 41, 0.03);
  white-space: normal;
}
th[data-v-1de24ece], .zone-name-cell[data-v-1de24ece], .title-cell[data-v-1de24ece] { 
  line-height: 1.8;
}
.bar-cell[data-v-1de24ece] {
  min-width: 0;
}
.zone-head-name[data-v-1de24ece] {
  font-weight: 600;
  color: #425461;
}
.zone-head-chip[data-v-1de24ece] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;        /* pill, not circle */
  font-size: 12px;
  line-height: 1.3;
  background: #eef2ff;         /* overridden per pattern */
  color: #355b8c;
  gap: 6px;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor:default; user-select:none;
}
.zone-head-chip .chip-ico[data-v-1de24ece] {
  flex: 0 0 auto;
}
.zone-head-chip .chip-text[data-v-1de24ece] {
  min-width: 0;
}
.zone-head-chip .chip-text-short[data-v-1de24ece] {
  display: none;
}

/* reuse pattern colors from Prioritization */
.zone-head-chip.pat-awareness[data-v-1de24ece] { background:#fff0d0; color:#9a6b00;
}
.zone-head-chip.pat-attention[data-v-1de24ece] { background:#fff0f0; color:#9a2727;
}
.zone-head-chip.pat-reach[data-v-1de24ece]     { background:#EAF7F7; color:#2E8B8E;
}
.zone-head-chip.pat-neutral[data-v-1de24ece]   { background:#eef2ff; color:#355b8c;
}
.zone-head-chip.pat-strong[data-v-1de24ece]    { background:#F4FAF5; color:#2f6f3a;
}

/* ============================================================================
   Band headers
============================================================================ */
.band-header td[data-v-1de24ece] {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #23485b;
  background-color: #fafafa;
  border-left: none;
  border-right: none;
}
.band-subtitle[data-v-1de24ece] {
  font-size: 11px;
  color: #7a8895;
  text-transform: none;
  font-weight: 500;
}

/* ============================================================================
   KPI row visuals (Total visitors + ECV/visitor row)
============================================================================ */
/* Hero KPI rows use .kpi-main, which only appears in those wide KPI rows */
.band-traffic .kpi-main[data-v-1de24ece],
.band-economics .kpi-main[data-v-1de24ece] {
  background: #f8fafc;
  border: 1px solid #e9eef3;
  border-radius: 10px;
  padding: 10px 12px;
}
.kpi-main[data-v-1de24ece] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kpi-value[data-v-1de24ece] {
  font-weight: 700;
  font-size: clamp(0.8rem, 1.3vw + 0.4rem, 1.5rem);
  color: #004F6E;
  letter-spacing: 0.2px;
  /* makes digits align nicely */
  font-variant-numeric: tabular-nums;
}
.kpi-sub[data-v-1de24ece] {
  margin-top: 2px;
  font-size: clamp(0.68rem, 0.35vw + 0.58rem, 0.85rem);
  color: #537786;
  font-weight: 500;
}

/* ============================================================================
   Bars (Traffic band)
============================================================================ */
.visitor-bar-outer[data-v-1de24ece],
.pos-bar-outer[data-v-1de24ece] {
  position: relative;
  height: clamp(16px, 2.2vw, 20px);
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
}
.visitor-bar-gradient[data-v-1de24ece] {
  height: 100%;
  background: linear-gradient(to right, #C21500, #FFA500, #2F9E44);
  -webkit-mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: mask-image 0.3s ease, background 0.3s ease;
}
.visitor-bar-gradient.zero-fill[data-v-1de24ece] {
  background: #e6e6e6 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* KPI banner for total store visitors */
.kpi-cell[data-v-1de24ece] {
  padding: 8px 10px;
  background: transparent;
}
.visitor-bar-label[data-v-1de24ece],
.pos-bar-label[data-v-1de24ece] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: #004F6E;
  pointer-events: none;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-bar-fill[data-v-1de24ece] {
  height: 100%;
  background: #e5e7eb; /* light gray fill */
  -webkit-mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: mask-image 0.3s ease, background 0.3s ease;
}
.pos-bar-label[data-v-1de24ece] { color: #9ca3af;
}

/* ============================================================================
   Economics visuals (values & assumptions)
============================================================================ */
.value-cell[data-v-1de24ece] {
  text-align: center;
  font-weight: 600;
  color: #36910d;
  background-color: #f7fff7;
}
.value-cell.lost[data-v-1de24ece] {
  /* Growth Potential table cells — amber, not red. Class name kept for
     diff hygiene; semantics are "opportunity," not "lost." */
  color: #a56b1f;
  background-color: #fff8ec;
}
.assump-cell[data-v-1de24ece] {
  background: #fcfefe;
  padding: 8px 10px;
}
.assump-chip[data-v-1de24ece] {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  color: #23485b;
  background: #f3f6f8;
  border: 1px solid #e3ebef;
}
.summary-row td[data-v-1de24ece] { 
  background: #fbfdfb;
}
.summary-row .summary-cell[data-v-1de24ece] {
  border: 1px solid #e2efe4;
  border-radius: 10px;
  padding: 8px 10px;
}
.pill[data-v-1de24ece] {
  display: inline-block;
  margin: 4px 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
}
.pill-green[data-v-1de24ece] {
  color: #256029;
  background: #e7f6ea;
  border: 1px solid #bfe6c6;
}
.pill-red[data-v-1de24ece] {
  /* Growth Potential totals pill — amber/opportunity, not danger/loss. */
  color: #a56b1f;
  background: #fff4e5;
  border: 1px solid #e9a44a;
}
.small-text[data-v-1de24ece] {
  font-size: 10px;
}

/* ============================================================================
   Scenario sliders (What-if band)
============================================================================ */
.scenario-cell[data-v-1de24ece] {
  background: #fcfefe;
  vertical-align: top;
  padding: 8px 10px;
}
.slider-container[data-v-1de24ece] {
  width: 100%;
}
.slider[data-v-1de24ece] {
  margin-top: 12px;           /* iets kleiner dan 50px zodat het strak in de cel past */
  padding-left: 10px;
  --slider-connect-bg: #B2C149;
  --slider-tooltip-bg: #B2C149;
  --slider-height: 2px;
  --slider-handle-width: 12px;
  --slider-handle-height: 12px;
  --slider-tooltip-line-height: 1.0rem;
  --slider-tooltip-font-size: 0.7rem;
  width: 90%;                 /* breder in de kolom */
}
.slider-block[data-v-1de24ece] { 
  margin-top: 40px;
  margin-bottom: 40px;       /* extra ruimte tussen sliders onderling */
}
.slider-note[data-v-1de24ece] {
  display: inline-block;
  padding-left: 5px;
  padding-top: 12px;
  font-size: small;
}
.note-accent[data-v-1de24ece] { color: #B2C149;
}
.delta-line[data-v-1de24ece] {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #23485b;
}
.delta-daily[data-v-1de24ece] { color: #537786;
}
.delta-subline[data-v-1de24ece] {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #6b7280; /* subtle gray */
}
.scenario-return-pill[data-v-1de24ece] {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #256029;
  background: #e7f6ea;
  border: 1px solid #bfe6c6;
}

/* ============================================================================
   Insights (Why & what to try)
============================================================================ */
.title-cell--top[data-v-1de24ece] { 
  vertical-align: top;
}
.insights-cell[data-v-1de24ece] {
  vertical-align: top;
  padding: 10px 8px;
}
.insights-list[data-v-1de24ece] {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.25rem;
}
.insights-list li[data-v-1de24ece] {
  position: relative;
  padding-left: 14px;
  margin: 4px 0;
  color: #004F6E; /* same blue as your table text */
}

/* tiny bullet */
.insights-list li[data-v-1de24ece]::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #9ca3af; /* subtle gray bullet */
}
.insights-more-btn[data-v-1de24ece] {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #23485b;
  background: #f3f6f8;
  border: 1px solid #e3ebef;
  border-radius: 999px;
  cursor: pointer;
}
.insights-more-btn[data-v-1de24ece]:hover {
  background: #eaf0f4;
}

/* ============================================================================
   Responsive
============================================================================ */
@media (max-width: 1830px) {
.zone-head-chip[data-v-1de24ece] {
    max-width: 150px;
    white-space: normal;             /* allow wrapping */
    text-align: center;                /* or center if you prefer */
}
}
@media (max-width: 1500px) {
.zone-head-chip[data-v-1de24ece] {
    max-width: 120px;
    padding: 3px 10px;
    font-size: 11px;
}
.zone-head-chip .chip-text-full[data-v-1de24ece] {
    display: none;
}
.zone-head-chip .chip-text-short[data-v-1de24ece] {
    display: inline;
}
}
@media (max-width: 1500px) {
.zone-head-chip .chip-text-short[data-v-1de24ece] {
    display: none;
}
}
@media (max-width: 850px) {
  /* Let container grow for the label, but remove white bg/border that caused "extensions" */
.bar-cell .visitor-bar-outer[data-v-1de24ece],
  .bar-cell .pos-bar-outer[data-v-1de24ece] {
    position: relative;
    height: auto;           /* grow for label */
    min-height: 16px;       /* bar height */
    overflow: visible;      /* don't clip label */
    padding-bottom: 6px;    /* space for label */
    background: transparent;
    border: 0;              /* <-- remove white box/border from container */
}
.bar-cell--full .visitor-bar-label--on-dark[data-v-1de24ece] {
    color: #004F6E;             /* your dark blue */
    text-shadow: none;
    margin-top: 16px;           /* a bit more breathing room */
}

  /* Draw a fixed-height track inside the container */
.bar-cell .visitor-bar-outer[data-v-1de24ece]::before,
  .bar-cell .pos-bar-outer[data-v-1de24ece]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 16px;                      /* bar height */
    background: #ffffff;               /* track color */
    border: 1px solid #ddd;            /* track border */
    border-radius: 4px;
    z-index: 0;                        /* behind fill/gradient */
}

  /* Keep the actual fill strips aligned with the track */
.bar-cell .visitor-bar-gradient[data-v-1de24ece],
  .bar-cell .pos-bar-fill[data-v-1de24ece],
  .bar-cell .visitor-bar-solid[data-v-1de24ece] {
    position: relative;
    height: 16px;                      /* same as track */
    border-radius: 4px;
    z-index: 1;                        /* above the track */
}

  /* Labels below the bar */
.bar-cell .visitor-bar-label[data-v-1de24ece],
  .bar-cell .pos-bar-label[data-v-1de24ece] {
    position: static;                  /* no overlay */
    display: block;
    margin-top: 6px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;               /* wrap if needed */
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(0.58rem, 1vw, 0.85rem);
    padding: 0 4px;
}
}

/* stack on small screens */
@media (max-width: 700px){
.ssc-grid[data-v-1de24ece]{
    grid-template-columns: 1fr;
    gap: 8px;
}
.ssc-kpi[data-v-1de24ece]:not(:last-child){
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid #e9eef3;
    padding-bottom: 8px;
}
}
@media (max-width: 500px) {
.table-wrapper th[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece] * {
    font-size: 0.8rem !important;
}
.visitor-bar-outer[data-v-1de24ece] { height: 18px;
}
}
@media (max-width: 475px) {
.table-wrapper th[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece] * {
    font-size: 0.7rem !important;
}
.visitor-bar-outer[data-v-1de24ece] { height: 17px;
}
}
@media (max-width: 440px) {
.table-wrapper th[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece] * {
    font-size: 0.6rem !important;
}
.visitor-bar-outer[data-v-1de24ece] { height: 16px;
}
}
@media (max-width: 410px) {
.table-wrapper th[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece] * {
    font-size: 0.5rem !important;
}
.visitor-bar-outer[data-v-1de24ece] { height: 15px;
}
}
@media (max-width: 375px) {
.table-wrapper th[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece],
  .table-wrapper td[data-v-1de24ece] * {
    font-size: 0.4rem !important;
}
.visitor-bar-outer[data-v-1de24ece] { height: 14px;
}
}

.pzdd[data-v-4eaa3b69]{
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0 24px;
}

/* ---------- Top strip ---------- */
.pzdd-strip[data-v-4eaa3b69]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.strip-kpi[data-v-4eaa3b69]{
  background: #fff;
  border: 1px solid #e6edf3;
  border-left: 4px solid #36910d;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
}
.strip-label[data-v-4eaa3b69]{ color:#6b7a86; font-size:.85rem; font-weight:600;
}
.strip-value[data-v-4eaa3b69]{ color:#1a2a36; font-size:1.7rem; font-weight:700; line-height:1.15; margin-top:4px;
}
.strip-meta[data-v-4eaa3b69]{ color:#6b7a86; font-size:.78rem; margin-top:4px;
}

/* ---------- Empty ---------- */
.pzdd-empty[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  border:1px dashed #d3dbe1;
  border-radius:12px;
  background:#fff;
  color:#425461;
}
.pzdd-empty i[data-v-4eaa3b69]{ font-size:1.6rem; color:#36910d;
}
.pzdd-empty strong[data-v-4eaa3b69]{ display:block; color:#1a2a36;
}
.pzdd-empty span[data-v-4eaa3b69]{ color:#6b7a86; font-size:.9rem;
}

/* ---------- Two-column shell ---------- */
.pzdd-shell[data-v-4eaa3b69]{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
@media (max-width: 900px){
.pzdd-shell[data-v-4eaa3b69]{ grid-template-columns: 1fr;
}
}

/* ---------- Picker ---------- */
.pzdd-picker[data-v-4eaa3b69]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:12px;
  height: fit-content;
  position: sticky;
  top: 80px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
}
.picker-label[data-v-4eaa3b69]{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.5px;
  color:#6b7a86; font-weight:700; padding:4px 6px 8px;
}
.picker-list[data-v-4eaa3b69]{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;
}
.picker-item[data-v-4eaa3b69]{
  cursor:pointer;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.picker-item[data-v-4eaa3b69]:hover{ background:#f4f7fa;
}
.picker-item.active[data-v-4eaa3b69]{
  background:#eef4fb;
  border-color:#a4c2e3;
}
.picker-row[data-v-4eaa3b69]{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.picker-zone[data-v-4eaa3b69]{ font-weight:600; color:#1a2a36;
}
.picker-eur[data-v-4eaa3b69]{ font-size:.8rem; font-weight:700; color:#425461; font-variant-numeric: tabular-nums;
}
.picker-meta[data-v-4eaa3b69]{ margin-top:4px;
}
.pat-pill[data-v-4eaa3b69]{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.7rem; font-weight:700;
  letter-spacing:.2px;
  line-height:1;
}
.pat-pill.big[data-v-4eaa3b69]{ font-size:.78rem; padding:4px 10px;
}

/* ---------- Zone story column ---------- */
.pzdd-zone[data-v-4eaa3b69]{
  display:flex; flex-direction:column; gap:22px;
}
.zone-head[data-v-4eaa3b69]{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding-bottom:6px;
  border-bottom:1px solid #eef3f7;
}
.zone-head h3[data-v-4eaa3b69]{ margin:0; color:#1a2a36; font-size:1.4rem; font-weight:700;
}
.zone-stake[data-v-4eaa3b69]{
  margin-left:auto;
  color:#1a2a36;
  font-weight:600;
  font-size:.95rem;
  background:#fff8e6;
  border:1px solid #ffd97a;
  padding:4px 10px;
  border-radius:999px;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zone-stake.muted[data-v-4eaa3b69]{
  background: #f4f7fa;
  border-color: #d3dbe1;
  color: #6b7a86;
  font-weight: 500;
  cursor: default;
}
.stake-info[data-v-4eaa3b69]{
  font-size: .85rem;
  opacity: .65;
}
.lever-pill[data-v-4eaa3b69]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.lever-pill i[data-v-4eaa3b69]{ font-size: .78rem;
}
.lever-pill.lever-eng[data-v-4eaa3b69]{
  color: #4F7EB3;
  background: color-mix(in srgb, #4F7EB3 12%, #fff);
  border: 1px solid color-mix(in srgb, #4F7EB3 38%, #fff);
}
.lever-pill.lever-conv[data-v-4eaa3b69]{
  color: #6F7C2A;
  background: color-mix(in srgb, #B2C149 18%, #fff);
  border: 1px solid color-mix(in srgb, #B2C149 55%, #fff);
}

/* Inline lever clause inside the within-reach sentence. Same color
   semantics as .lever-pill (blue for engagement, olive for conversion)
   but no chip background — reads as part of the sentence. */
.lever-clause[data-v-4eaa3b69]{
  font-weight: 700;
  white-space: nowrap;
}
.lever-clause.lever-eng[data-v-4eaa3b69]{ color: #4F7EB3;
}
.lever-clause.lever-conv[data-v-4eaa3b69]{ color: #6F7C2A;
}

/* ---------- Dwell callout (tripwire-only zones) ---------- */
.zone-dwell-callout[data-v-4eaa3b69]{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: #eef3f8;
  border: 1px solid #d1dde9;
  border-radius: 10px;
  font-size: .92rem;
  color: #37526b;
}
.zone-dwell-callout i[data-v-4eaa3b69]{ color:#4F7EB3;
}
.dwell-callout-label[data-v-4eaa3b69]{ color:#6b7a86;
}
.dwell-callout-value[data-v-4eaa3b69]{ font-weight:700; color:#1a2a36; font-size:1.05rem;
}
.zone-dwell-callout .conf-chip[data-v-4eaa3b69]{
  margin-left:auto;
  font-size:.72rem;
  padding:2px 8px;
  border-radius:10px;
}
.zone-dwell-callout .conf-chip.conf-high[data-v-4eaa3b69]{   color:#2f6f3a; background:#f4faf5; border:1px solid #bfe2c7;
}
.zone-dwell-callout .conf-chip.conf-medium[data-v-4eaa3b69]{ color:#9a6b00; background:#fff8e6; border:1px solid #ffd97a;
}
.zone-dwell-callout .conf-chip.conf-low[data-v-4eaa3b69]{    color:#8a3a2a; background:#fdecea; border:1px solid #f3b3a8;
}

/* ---------- Funnel ---------- */
.zone-funnel[data-v-4eaa3b69]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:18px 20px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
}
.funnel-title[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:#1a2a36;
  margin-bottom:10px;
}
.funnel-title i[data-v-4eaa3b69]{ color:#36910d;
}
.zone-narrative[data-v-4eaa3b69]{
  display:flex; align-items:flex-start; gap:8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: #fff8e6;
  border: 1px solid #ffd97a;
  border-radius: 8px;
  color: #6a4f00;
  font-size: .92rem;
  line-height: 1.4;
}
.zone-narrative i[data-v-4eaa3b69]{ font-size:1rem; color:#9a6b00; margin-top:2px; flex-shrink:0;
}
.zone-narrative strong[data-v-4eaa3b69]{ color:#1a2a36;
}
.funnel-row[data-v-4eaa3b69]{ margin-bottom: 16px;
}
.funnel-row[data-v-4eaa3b69]:last-child{ margin-bottom: 0;
}
.funnel-row-head[data-v-4eaa3b69]{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:4px;
}
.funnel-label[data-v-4eaa3b69]{ color:#425461; font-weight:600;
}
.funnel-count[data-v-4eaa3b69]{ color:#1a2a36; font-weight:700; font-variant-numeric:tabular-nums;
}
.funnel-bar-wrap[data-v-4eaa3b69]{
  position:relative;
  height: 22px;
  background:#eef3f7;
  border-radius:6px;
  overflow:hidden;
  display:flex; align-items:center;
}
.funnel-bar[data-v-4eaa3b69]{
  position:absolute; left:0; top:0; bottom:0;
  border-radius:6px;
  transition: width .35s ease;
  opacity:.85;
}
.funnel-bar.simulated[data-v-4eaa3b69]{
  background: transparent !important;
  border:2px dashed currentColor;
  opacity:.9;
}
.funnel-pct[data-v-4eaa3b69]{
  position:relative;
  margin-left:10px;
  z-index:1;
  color:#1a2a36;
  font-weight:600;
  font-size:.85rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  cursor:help;
}
.funnel-pct-sub[data-v-4eaa3b69]{
  margin-left:4px;
  color:#6b7a86;
  font-weight:500;
  font-size:.75rem;
}
.funnel-drop[data-v-4eaa3b69]{
  margin-top:4px;
  font-size:.78rem;
  color:#9a2727;
  font-weight:600;
}

/* ---------- Simulator ---------- */
.zone-sim[data-v-4eaa3b69]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:18px 20px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
  display:flex; flex-direction:column; gap:14px;
}
.sim-head[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:#1a2a36;
}
.sim-head i[data-v-4eaa3b69]{ color:#4F7EB3;
}
.sim-reset[data-v-4eaa3b69]{
  margin-left:auto;
  background:transparent;
  border:1px solid #d3dbe1;
  border-radius:999px;
  padding:2px 10px;
  font-size:.78rem;
  color:#425461;
  cursor:pointer;
}
.sim-reset[data-v-4eaa3b69]:hover{ background:#f4f7fa;
}
.sim-grid[data-v-4eaa3b69]{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 720px){
.sim-grid[data-v-4eaa3b69]{ grid-template-columns: 1fr;
}
}
.sim-row label[data-v-4eaa3b69]{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.85rem; color:#425461; font-weight:600;
  margin-bottom:6px;
}
.sim-row label strong[data-v-4eaa3b69]{ color:#1a2a36;
}
.sim-row input[type="range"][data-v-4eaa3b69]{
  width:100%;
  accent-color:#4F7EB3;
}
.sim-row small[data-v-4eaa3b69]{ display:block; color:#6b7a86; font-size:.78rem; margin-top:4px;
}
.sim-result[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:10px;
  background:#f4f7fa;
  border:1px solid #e6edf3;
  color:#425461;
}
.sim-result.positive[data-v-4eaa3b69]{
  background: color-mix(in srgb, #36910d 10%, #fff);
  border-color: color-mix(in srgb, #36910d 35%, #e6edf3);
  color:#1a2a36;
}
.zone-sim.disabled[data-v-4eaa3b69]{
  opacity: .9;
}
.sim-disabled-note[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:#f4f7fa;
  border:1px dashed #d3dbe1;
  border-radius:10px;
  color:#6b7a86;
  font-size:.88rem;
}
.sim-disabled-note i[data-v-4eaa3b69]{ color:#D3A741;
}
.sim-result i[data-v-4eaa3b69]{ font-size:1.1rem; color:#36910d;
}
.sim-result-text strong[data-v-4eaa3b69]{
  font-size:1.05rem;
  color:#1a2a36;
}
.sim-result-text small[data-v-4eaa3b69]{
  display:block;
  color:#6b7a86;
  font-size:.82rem;
  margin-top:2px;
}

/* ---------- Insights ---------- */
.zone-insights[data-v-4eaa3b69]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:18px 20px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
}
/* Strong-state "Performing well" variant: green-tinted background +
   border so the panel reads as good-news rather than the regular
   needs-attention amber Lightbulb style. */
.zone-insights-strong[data-v-4eaa3b69]{
  background: linear-gradient(180deg, #f5fbf6 0%, #ffffff 70%);
  border-color: #cfe8d2;
}
.zone-insights-strong .ins-head[data-v-4eaa3b69]{ color: #1f6b3a;
}
.zone-insights-strong .ins-head i[data-v-4eaa3b69]{ color: #2c9c4a;
}
.zone-insights-strong .ins-changed i[data-v-4eaa3b69]{ color: #2c9c4a;
}
.ins-head[data-v-4eaa3b69]{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:#1a2a36;
  margin-bottom:12px;
}
.ins-head i[data-v-4eaa3b69]{ color:#D3A741;
}
.ins-chips[data-v-4eaa3b69]{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:14px;
}
.ins-chip[data-v-4eaa3b69]{
  display:inline-flex; align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:#eef4fb;
  border:1px solid #d6e1ed;
  color:#355b8c;
  font-size:.75rem;
  font-weight:700;
}
.ins-chip.subtle[data-v-4eaa3b69]{
  background:#f4f7fa;
  border-color:#e6edf3;
  color:#425461;
  font-weight:600;
}
.ins-chip.trend-up[data-v-4eaa3b69]{ color:#2f6f3a; background:#F4FAF5; border-color:#bfe2c7;
}
.ins-chip.trend-down[data-v-4eaa3b69]{ color:#9a2727; background:#fff0f0; border-color:#f1c0c0;
}
.ins-chip.trend-flat[data-v-4eaa3b69]{ color:#425461;
}
.ins-changed[data-v-4eaa3b69]{
  display:flex; align-items:flex-start; gap:8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #f4f7fa;
  border-left: 3px solid #4F7EB3;
  border-radius: 6px;
  color: #1a2a36;
  font-size: .88rem;
  line-height: 1.4;
}
.ins-changed i[data-v-4eaa3b69]{ color:#4F7EB3; margin-top:2px; flex-shrink:0;
}
.ins-changed strong[data-v-4eaa3b69]{ color:#1a2a36;
}
.ins-actions[data-v-4eaa3b69]{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.ins-actions li[data-v-4eaa3b69]{
  display:flex; align-items:flex-start; gap:8px;
  color:#1a2a36;
  font-size:.92rem;
}
.ins-actions i[data-v-4eaa3b69]{ color:#36910d; margin-top:3px; flex-shrink:0;
}
.ins-explainer[data-v-4eaa3b69]{
  margin-top:12px;
  font-size:.82rem;
  color:#6b7a86;
  font-style:italic;
}

.no-data-message[data-v-094b1e9b]{ color:gray; text-align:center; margin:20px 0
}

.no-data-message[data-v-0807938c]{ color:gray; text-align:center; margin:20px 0
}

/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-f7d77afb] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-window[data-v-f7d77afb] {
  background: #fff;
  border-radius: 8px;
  min-width: 400px;
  max-width: 55vw;
  max-height: 90vh;
  overflow: auto; /* modal scrolls, page stays fixed */
  padding: 1rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-left: 300px;
  margin-right: 20px;
}

/* Page scroll lock */
body.modal-open {
  overflow: hidden;
}

/* === Card shell & header/footer === */
.insights-shell[data-v-f7d77afb] {
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
  overflow: hidden;
}
.insights-header[data-v-f7d77afb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-bottom: 1px solid #e6edf3;
}
.title-wrap[data-v-f7d77afb] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-wrap .bi-question-circle[data-v-f7d77afb] {
  color: #4f7eb3;
  font-size: 1.1rem;
}
.title[data-v-f7d77afb] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4f7eb3;
}
.header-controls[data-v-f7d77afb] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-close[data-v-f7d77afb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e6edf3;
  background: #fff;
  color: #425461;
  cursor: pointer;
  transition: background 0.2s ease;
}
.icon-close[data-v-f7d77afb]:hover {
  background: #f0f4f8;
}
.insights-body[data-v-f7d77afb] {
  padding: 16px;
}
.insights-footer[data-v-f7d77afb] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-f7d77afb] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #4f7eb3;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.02s ease;
  font-size: 0.9rem;
}
.stora-btn-secondary[data-v-f7d77afb]:hover {
  background: #b2c149;
}

/* === Stacked content layout === */
.modal-explainer[data-v-f7d77afb] {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.block[data-v-f7d77afb] {
  min-width: 0;
  padding-top: 4px;
}

/* every block that follows another block gets a subtle divider */
.block + .block[data-v-f7d77afb] {
  border-top: 1px solid #e5e7f0;  /* light grey, not your brand blue */
  padding-top: 24px;              /* space between border and heading */
}
.block--example[data-v-f7d77afb] {
  background: #f7fafc;
  border-radius: 8px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7f0;
}

/* formula block */
.pz-formula-card[data-v-f7d77afb] {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pz-formula-row[data-v-f7d77afb] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 14px;
}
.pz-formula-row[data-v-f7d77afb]:last-child {
  margin-bottom: 0;
}
.pz-formula-label[data-v-f7d77afb] {
  font-weight: 600;
  color: #111827;
  min-width: 130px;
}
.pz-formula-eq[data-v-f7d77afb] {
  flex: 1;
  color: #4b5563;
}

/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-f7d77afb] {
  font-size: 13px;
}

/* example bar */
.efficiency-bar[data-v-f7d77afb] {
  height: 10px;
  background: #e9edf3;
  border-radius: 6px;
  overflow: hidden;
}
.efficiency-bar .engaged[data-v-f7d77afb] {
  height: 100%;
  background: #4f7eb3;
}
.table .num[data-v-f7d77afb],
.num[data-v-f7d77afb] {
  text-align: right;
}

/* Responsive tweak: narrower screens */
@media (max-width: 900px) {
.modal-window[data-v-f7d77afb] {
    margin-left: 0;
    margin-right: 0;
    max-width: 95vw;
}
}

.eff-card[data-v-56bc311f] {
  --accent: #36910d;
  background: #fff;
  border: 1px solid #e8eef7;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 0 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
.eff-card--disabled[data-v-56bc311f] {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.eff-title-row[data-v-56bc311f] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0px 0px 4px;
}
.eff-title[data-v-56bc311f] {
  font-weight: 800;
  font-size: 16px;
  color: #2b3a46;
  letter-spacing: .2px;
}
.eff-prev-badge[data-v-56bc311f] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f6fa;
  color: #6b7a87;
  white-space: nowrap;
}

/* Delta color accents */
.eff-prev-badge.delta-up[data-v-56bc311f] {
  background: #E8F7F0;
  color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-56bc311f] {
  background: #FDE7EA;
  color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-56bc311f] {
  background: #f3f6fa;
  color: #6b7a87;
}

/* two columns: gauge | values */
.eff-main[data-v-56bc311f] {
  display: grid;
  /* grid-template-columns: minmax(260px, 1fr) 260px; */
  grid-template-columns: 1fr;
  gap: 16px;
  /* Keep both columns aligned to the top so the right-hand values sit higher */
  align-items: start;
  padding-top: 10px;
  margin-bottom: -90px;
}

/* Gauge fills the left column */
.eff-gauge[data-v-56bc311f] { width: 100%;
}

/* Pull the values up next to the gauge */
/* .eff-values {
  display: grid;
  gap: 12px; */
  /* align-self: start;  */     /* stick to the top of the grid row */
 /*  margin-top: 40px;  */       /* fine-tune vertical alignment */
/* } */
.eff-values[data-v-56bc311f] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px}
.eff-status[data-v-56bc311f] {
  display: grid;
  justify-items: left;
  row-gap: 6px;
  text-align: left;
  padding-bottom: 20px;
}
.eff-help-btn[data-v-56bc311f] {
  border: none;
  background: none;
  margin-left: auto;
  margin-right: 6px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-56bc311f]:hover {
  color: #004F6E;
}
.dot-prev[data-v-56bc311f] {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(143,162,183,0.8); /* align with compare arc */
  display: inline-block;
}
.k-label[data-v-56bc311f] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-56bc311f]   { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-56bc311f] {
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* chip ⟷ text */
}
.chip[data-v-56bc311f] {
  width: 42px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;        /* just the icon inside */
  font-weight: 700;
}
.status-label[data-v-56bc311f] {
  font-weight: 800;
  font-size: 14px;
}
.status-expl[data-v-56bc311f] {
  max-width: 640px;
  color: #556372;
  font-size: 13px;
  line-height: 1.35;
}
.status-hints[data-v-56bc311f] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-56bc311f] {
  margin-top: 8px;
  padding: 10px 6px 6px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hint-chip[data-v-56bc311f] {
  background: #f3f6fa;
  color: #3c4b59;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #e3e9f2;
  white-space: nowrap;
}
.eff-footer-meta[data-v-56bc311f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
  margin-top: 0;
  border-top: 1px solid #eef2f7;
}
.eff-meta-pill[data-v-56bc311f] {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  background: #f5f6f7;
  color: #6b7a87;
  white-space: nowrap;
}
.eff-help-btn[data-v-56bc311f] {
  border: none;
  background: none;
  margin: 0;              /* let flexbox place it */
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-56bc311f]:hover {
  color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-56bc311f] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.eff-main[data-v-56bc311f] { grid-template-columns: 1fr;
}
.eff-values[data-v-56bc311f] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-56bc311f] { justify-content: center;
}
}

/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-6cd9e09f] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-window[data-v-6cd9e09f] {
  background: #fff;
  border-radius: 8px;
  min-width: 400px;
  max-width: 55vw;
  max-height: 90vh;
  overflow: auto; /* modal scrolls, page stays fixed */
  padding: 1rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-left: 300px;
  margin-right: 20px;
}

/* Page scroll lock */
body.modal-open {
  overflow: hidden;
}

/* === Card shell & header/footer === */
.insights-shell[data-v-6cd9e09f] {
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
  overflow: hidden;
}
.insights-header[data-v-6cd9e09f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-bottom: 1px solid #e6edf3;
}
.title-wrap[data-v-6cd9e09f] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-wrap .bi-question-circle[data-v-6cd9e09f] {
  color: #4f7eb3;
  font-size: 1.1rem;
}
.title[data-v-6cd9e09f] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4f7eb3;
}
.header-controls[data-v-6cd9e09f] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-close[data-v-6cd9e09f] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e6edf3;
  background: #fff;
  color: #425461;
  cursor: pointer;
  transition: background 0.2s ease;
}
.icon-close[data-v-6cd9e09f]:hover {
  background: #f0f4f8;
}
.insights-body[data-v-6cd9e09f] {
  padding: 16px;
}
.insights-footer[data-v-6cd9e09f] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-6cd9e09f] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #4f7eb3;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.02s ease;
  font-size: 0.9rem;
}
.stora-btn-secondary[data-v-6cd9e09f]:hover {
  background: #b2c149;
}

/* === Stacked content layout === */
.modal-explainer[data-v-6cd9e09f] {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.block[data-v-6cd9e09f] {
  min-width: 0;
  padding-top: 4px;
}

/* every block that follows another block gets a subtle divider */
.block + .block[data-v-6cd9e09f] {
  border-top: 1px solid #e5e7f0;  /* light grey, not your brand blue */
  padding-top: 24px;              /* space between border and heading */
}
.block--example[data-v-6cd9e09f] {
  background: #f7fafc;
  border-radius: 8px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7f0;
}

/* formula block */
.pz-formula-card[data-v-6cd9e09f] {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pz-formula-row[data-v-6cd9e09f] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 14px;
}
.pz-formula-row[data-v-6cd9e09f]:last-child {
  margin-bottom: 0;
}
.pz-formula-label[data-v-6cd9e09f] {
  font-weight: 600;
  color: #111827;
  min-width: 130px;
}
.pz-formula-eq[data-v-6cd9e09f] {
  flex: 1;
  color: #4b5563;
}

/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-6cd9e09f] {
  font-size: 13px;
}

/* example bar */
.efficiency-bar[data-v-6cd9e09f] {
  height: 10px;
  background: #e9edf3;
  border-radius: 6px;
  overflow: hidden;
}
.efficiency-bar .engaged[data-v-6cd9e09f] {
  height: 100%;
  background: #4f7eb3;
}
.table .num[data-v-6cd9e09f],
.num[data-v-6cd9e09f] {
  text-align: right;
}

/* Framing note: bridges the dashboard's positive label to the
   queueing-theory loss vocabulary used in the formulas below. */
.modal-framing-note[data-v-6cd9e09f] {
  background: #fff8ec;
  border-left: 3px solid #e9a44a;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 18px;
  color: #525a63;
  font-size: 13px;
  line-height: 1.5;
}
.modal-framing-note strong[data-v-6cd9e09f] { color: #2b3a46;
}
.modal-framing-note em[data-v-6cd9e09f] { color: #6b7a87; font-style: italic;
}

/* Responsive tweak: narrower screens */
@media (max-width: 900px) {
.modal-window[data-v-6cd9e09f] {
    margin-left: 0;
    margin-right: 0;
    max-width: 95vw;
}
}

.eff-card[data-v-73544621] {
  --accent: #36910d;
  background: #fff;
  border: 1px solid #e8eef7;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 0 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
.eff-card--disabled[data-v-73544621] {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.eff-title-row[data-v-73544621] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0px 0px 4px;
}
.eff-title[data-v-73544621] {
  font-weight: 800;
  font-size: 16px;
  color: #2b3a46;
  letter-spacing: .2px;
}
.eff-prev-badge[data-v-73544621] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f6fa;
  color: #6b7a87;
  white-space: nowrap;
}

/* Delta color accents */
.eff-prev-badge.delta-up[data-v-73544621] {
  background: #E8F7F0;
  color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-73544621] {
  background: #FDE7EA;
  color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-73544621] {
  background: #f3f6fa;
  color: #6b7a87;
}

/* two columns: gauge | values */
.eff-main[data-v-73544621] {
  display: grid;
  /* grid-template-columns: minmax(260px, 1fr) 260px; */
  grid-template-columns: 1fr;
  gap: 16px;
  /* Keep both columns aligned to the top so the right-hand values sit higher */
  align-items: start;
  padding-top: 10px;
  margin-bottom: -90px;
}

/* Gauge fills the left column */
.eff-gauge[data-v-73544621] { width: 100%;
}

/* Pull the values up next to the gauge */
/* .eff-values {
  display: grid;
  gap: 12px; */
  /* align-self: start;  */     /* stick to the top of the grid row */
 /*  margin-top: 40px;  */       /* fine-tune vertical alignment */
/* } */
.eff-values[data-v-73544621] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px}
.eff-status[data-v-73544621] {
  display: grid;
  justify-items: left;
  row-gap: 6px;
  text-align: left;
  padding-bottom: 20px;
}
.eff-help-btn[data-v-73544621] {
  border: none;
  background: none;
  margin-left: auto;
  margin-right: 6px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-73544621]:hover {
  color: #004F6E;
}
.dot-prev[data-v-73544621] {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(143,162,183,0.8); /* align with compare arc */
  display: inline-block;
}
.k-label[data-v-73544621] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-73544621]   { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-73544621] {
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* chip ⟷ text */
}
.chip[data-v-73544621] {
  width: 42px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;        /* just the icon inside */
  font-weight: 700;
}
.status-label[data-v-73544621] {
  font-weight: 800;
  font-size: 14px;
}
.status-expl[data-v-73544621] {
  max-width: 640px;
  color: #556372;
  font-size: 13px;
  line-height: 1.35;
}
.status-hints[data-v-73544621] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-73544621] {
  margin-top: 8px;
  padding: 10px 6px 6px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hint-chip[data-v-73544621] {
  background: #f3f6fa;
  color: #3c4b59;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #e3e9f2;
  white-space: nowrap;
}
.eff-footer-meta[data-v-73544621] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
  margin-top: 0;
  border-top: 1px solid #eef2f7;
}
.eff-meta-pill[data-v-73544621] {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  background: #f5f6f7;
  color: #6b7a87;
  white-space: nowrap;
}
.eff-help-btn[data-v-73544621] {
  border: none;
  background: none;
  margin: 0;              /* let flexbox place it */
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-73544621]:hover {
  color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-73544621] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.eff-main[data-v-73544621] { grid-template-columns: 1fr;
}
.eff-values[data-v-73544621] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-73544621] { justify-content: center;
}
}

/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-8afcf354] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-window[data-v-8afcf354] {
  background: #fff;
  border-radius: 8px;
  min-width: 400px;
  max-width: 55vw;
  max-height: 90vh;
  overflow: auto; /* modal scrolls, page stays fixed */
  padding: 1rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-left: 300px;
  margin-right: 20px;
}

/* Page scroll lock */
body.modal-open {
  overflow: hidden;
}

/* === Card shell & header/footer === */
.insights-shell[data-v-8afcf354] {
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
  overflow: hidden;
}
.insights-header[data-v-8afcf354] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-bottom: 1px solid #e6edf3;
}
.title-wrap[data-v-8afcf354] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-wrap .bi-question-circle[data-v-8afcf354] {
  color: #4f7eb3;
  font-size: 1.1rem;
}
.title[data-v-8afcf354] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4f7eb3;
}
.header-controls[data-v-8afcf354] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-close[data-v-8afcf354] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e6edf3;
  background: #fff;
  color: #425461;
  cursor: pointer;
  transition: background 0.2s ease;
}
.icon-close[data-v-8afcf354]:hover {
  background: #f0f4f8;
}
.insights-body[data-v-8afcf354] {
  padding: 16px;
}
.insights-footer[data-v-8afcf354] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #f7f9fb;
  border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-8afcf354] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #4f7eb3;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.02s ease;
  font-size: 0.9rem;
}
.stora-btn-secondary[data-v-8afcf354]:hover {
  background: #b2c149;
}

/* === Stacked content layout === */
.modal-explainer[data-v-8afcf354] {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.block[data-v-8afcf354] {
  min-width: 0;
  padding-top: 4px;
}

/* every block that follows another block gets a subtle divider */
.block + .block[data-v-8afcf354] {
  border-top: 1px solid #e5e7f0;  /* light grey, not your brand blue */
  padding-top: 24px;              /* space between border and heading */
}
.block--example[data-v-8afcf354] {
  background: #f7fafc;
  border-radius: 8px;
  padding: 16px 18px 18px;
  border: 1px solid #e5e7f0;
}

/* formula block */
.pz-formula-card[data-v-8afcf354] {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pz-formula-row[data-v-8afcf354] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 14px;
}
.pz-formula-row[data-v-8afcf354]:last-child {
  margin-bottom: 0;
}
.pz-formula-label[data-v-8afcf354] {
  font-weight: 600;
  color: #111827;
  min-width: 130px;
}
.pz-formula-eq[data-v-8afcf354] {
  flex: 1;
  color: #4b5563;
}

/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-8afcf354] {
  font-size: 13px;
}

/* example bar */
.efficiency-bar[data-v-8afcf354] {
  height: 10px;
  background: #e9edf3;
  border-radius: 6px;
  overflow: hidden;
}
.efficiency-bar .engaged[data-v-8afcf354] {
  height: 100%;
  background: #4f7eb3;
}
.table .num[data-v-8afcf354],
.num[data-v-8afcf354] {
  text-align: right;
}

/* Responsive tweak: narrower screens */
/* Framing note: bridges the dashboard's positive label to the
   queueing-theory loss vocabulary used in the formulas below. */
.modal-framing-note[data-v-8afcf354] {
  background: #fff8ec;
  border-left: 3px solid #e9a44a;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 18px;
  color: #525a63;
  font-size: 13px;
  line-height: 1.5;
}
.modal-framing-note strong[data-v-8afcf354] { color: #2b3a46;
}
.modal-framing-note em[data-v-8afcf354] { color: #6b7a87; font-style: italic;
}
@media (max-width: 900px) {
.modal-window[data-v-8afcf354] {
    margin-left: 0;
    margin-right: 0;
    max-width: 95vw;
}
}

.eff-card[data-v-d71fe731] {
  --accent: #36910d;
  background: #fff;
  border: 1px solid #e8eef7;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 0 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
.eff-card--disabled[data-v-d71fe731] {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.eff-title-row[data-v-d71fe731] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0px 0px 4px;
}
.eff-title[data-v-d71fe731] {
  font-weight: 800;
  font-size: 16px;
  color: #2b3a46;
  letter-spacing: .2px;
}
.eff-prev-badge[data-v-d71fe731] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f6fa;
  color: #6b7a87;
  white-space: nowrap;
}

/* Delta color accents */
.eff-prev-badge.delta-up[data-v-d71fe731] {
  background: #E8F7F0;
  color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-d71fe731] {
  background: #FDE7EA;
  color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-d71fe731] {
  background: #f3f6fa;
  color: #6b7a87;
}

/* two columns: gauge | values */
.eff-main[data-v-d71fe731] {
  display: grid;
  /* grid-template-columns: minmax(260px, 1fr) 260px; */
  grid-template-columns: 1fr;
  gap: 16px;
  /* Keep both columns aligned to the top so the right-hand values sit higher */
  align-items: start;
  padding-top: 10px;
  margin-bottom: -90px;
}

/* Gauge fills the left column */
.eff-gauge[data-v-d71fe731] { width: 100%;
}

/* Pull the values up next to the gauge */
/* .eff-values {
  display: grid;
  gap: 12px; */
  /* align-self: start;  */     /* stick to the top of the grid row */
 /*  margin-top: 40px;  */       /* fine-tune vertical alignment */
/* } */
.eff-values[data-v-d71fe731] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px;}
.eff-status[data-v-d71fe731] {
  display: grid;
  justify-items: left;
  row-gap: 6px;
  text-align: left;
  padding-bottom: 20px;
}
.eff-help-btn[data-v-d71fe731] {
  border: none;
  background: none;
  margin-left: auto;
  margin-right: 6px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-d71fe731]:hover {
  color: #004F6E;
}
.dot-prev[data-v-d71fe731] {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(143,162,183,0.8); /* align with compare arc */
  display: inline-block;
}
.k-label[data-v-d71fe731] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-d71fe731]   { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-d71fe731] {
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* chip ⟷ text */
}
.chip[data-v-d71fe731] {
  width: 42px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;        /* just the icon inside */
  font-weight: 700;
}
.status-label[data-v-d71fe731] {
  font-weight: 800;
  font-size: 14px;
}
.status-expl[data-v-d71fe731] {
  max-width: 640px;
  color: #556372;
  font-size: 13px;
  line-height: 1.35;
}
.status-hints[data-v-d71fe731] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-d71fe731] {
  margin-top: 8px;
  padding: 10px 6px 6px;
  border-top: 1px solid #eef2f7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hint-chip[data-v-d71fe731] {
  background: #f3f6fa;
  color: #3c4b59;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #e3e9f2;
  white-space: nowrap;
}
.eff-footer-meta[data-v-d71fe731] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
  margin-top: 0;
  border-top: 1px solid #eef2f7;
}
.eff-meta-pill[data-v-d71fe731] {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  background: #f5f6f7;
  color: #6b7a87;
  white-space: nowrap;
}
.eff-help-btn[data-v-d71fe731] {
  border: none;
  background: none;
  margin: 0;              /* let flexbox place it */
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
}
.eff-help-btn[data-v-d71fe731]:hover {
  color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-d71fe731] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.eff-main[data-v-d71fe731] { grid-template-columns: 1fr;
}
.eff-values[data-v-d71fe731] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-d71fe731] { justify-content: center;
}
}

/* Unsupported period note */
.unsupported[data-v-722f1681] { border:1px solid #ffe6cc; background:#fff8f0; color:#8a5a00; border-radius:12px; padding:14px 16px; margin-top:6px;
}
.unsupported-title[data-v-722f1681] { font-weight:700; margin-bottom:6px;
}
.empty[data-v-722f1681] { padding:18px; background:#f7f9fb; border:1px dashed #d9e3f2; border-radius:10px; color:#8596a7;
}

/* ============================================================
   CARD LIST
============================================================ */
.pz-grid[data-v-722f1681] { display:flex; flex-direction:column; gap:14px;
}

/* Card = left strip + content */
.pz-card[data-v-722f1681] {
  display:grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap:0 16px;
  width:100%;
  border:1px solid #e8eef7; border-radius:14px; background:#fff; padding:12px;
  box-shadow:0 3px 14px rgba(0,0,0,.03); overflow:hidden; box-sizing:border-box;
}
.pz-card-head[data-v-722f1681] { display:flex; flex-direction:column; gap:8px; padding-right:8px; border-right:1px solid #eef2f8;
}
.pz-body[data-v-722f1681] { display:block;
}
.rank[data-v-722f1681] { font-weight:700; color:#6B92C6;
}
.zone[data-v-722f1681] { font-weight:600; color:#425461;
}

/* Chips (pattern + role + strategic) */
.pattern-label[data-v-722f1681], .role-pill[data-v-722f1681], .strategic-pill[data-v-722f1681] {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1.4; /* prevents clipped descenders like “g” */
  cursor:default; user-select:none;
  max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip-ico[data-v-722f1681], .role-pill .emoji[data-v-722f1681] { flex:0 0 auto; filter:saturate(0.9);
}

/* Strategic-role pill — borrowed Intelligence-tab vocabulary. Colors are
   applied inline because the four QUADRANT_META hues are dynamic. The pill
   sits BEFORE the pattern chip so the card reads role → diagnosis → action. */
.strategic-pill[data-v-722f1681] {
  border: 1px solid currentColor;
  /* currentColor would give a too-saturated border at full opacity;
     :style inline already sets `color` to the quadrant color, so we
     dial back the border via opacity. */
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Pattern chip colors */
.pz-card.pat-awareness .pattern-label[data-v-722f1681] { background:#fff0d0; color:#9a6b00;
}
.pz-card.pat-attention .pattern-label[data-v-722f1681] { background:#fff0f0; color:#9a2727;
}
.pz-card.pat-reach     .pattern-label[data-v-722f1681] { background:#EAF7F7; color:#2E8B8E;
}
.pz-card.pat-neutral   .pattern-label[data-v-722f1681] { background:#eef2ff; color:#355b8c;
}
.pattern-strong[data-v-722f1681] { background:#f8fafc;
}

/* Card background tints */
.pz-card.pat-awareness[data-v-722f1681] { border-color:#ffe5b4; background:#fff9f1;
}
.pz-card.pat-attention[data-v-722f1681] { border-color:#ffc4c4; background:#fff4f4;
}
.pz-card.pat-reach[data-v-722f1681]     { border-color:#BFE9E9; background:#F3FBFB;
}
.pz-card.pat-neutral[data-v-722f1681]   { border-color:#e8eef7; background:#f6f8ff;
}

/* Strong performer muted */
.pz-card.pat-strong[data-v-722f1681] { border-color:#e0e6ec; background:#f8fafc; opacity:.75; transition:opacity .2s ease;
}
.pz-card.pat-strong[data-v-722f1681]:hover { opacity:1;
}

/* Keep actionable cards steady on hover */
.pz-card.pat-awareness[data-v-722f1681]:hover { background:#fff9f1; opacity:1;
}
.pz-card.pat-attention[data-v-722f1681]:hover { background:#fff4f4; opacity:1;
}
.pz-card.pat-reach[data-v-722f1681]:hover     { background:#f4fbf5; opacity:1;
}
.pz-card.pat-neutral[data-v-722f1681]:hover   { background:#f6f8ff; opacity:1;
}
.pz-card .num[data-v-722f1681], .pz-card .kpv[data-v-722f1681] { text-align:left;
}
.pz-card.muted[data-v-722f1681] { opacity:.65;
}

/* Role pill colors (mirrors pattern) */
.role-pill[data-v-722f1681] { margin-top:4px; border:1px solid transparent;
}
.pz-card.pat-awareness .role-pill[data-v-722f1681] { background:#fff0d0; color:#9a6b00; border-color:#ffe5b4;
}
.pz-card.pat-attention .role-pill[data-v-722f1681] { background:#fff0f0; color:#9a2727; border-color:#ffc4c4;
}
.pz-card.pat-reach     .role-pill[data-v-722f1681] { background:#EAF7F7; color:#2E8B8E; border-color:#BFE9E9;
}
.pz-card.pat-neutral   .role-pill[data-v-722f1681] { background:#eef2ff; color:#355b8c; border-color:#e8eef7;
}
.pz-card.pat-strong    .role-pill[data-v-722f1681] { background:#F4FAF5; color:#2f6f3a; border-color:#f8fafc;
}
.role-pill .role-text[data-v-722f1681] { overflow:hidden; text-overflow:ellipsis;
}

/* Value grid (right column) */
.pz-row-grid[data-v-722f1681]{
  display:grid;
  grid-template-columns:
    fit-content(7ch)         /* Zone visitors */
    fit-content(8ch)         /* Engaged %     */
    fit-content(8ch)         /* Conversion %  */
    fit-content(10ch)        /* Avg €         */
    fit-content(12ch)        /* Trend         */
    fit-content(18ch)        /* Remaining     */
    fit-content(18ch)        /* Potential €   */
    minmax(260px, 1.4fr);    /* Actions — needs room so quick-win pills don't
                                truncate every label to its first 2-3 words */
  gap:8px 16px; align-items:start; width:100%; min-width:0;
}
.kpl[data-v-722f1681] { font-size:11px; color:#7a8895;
}
.kpv[data-v-722f1681] { font-weight:700; color:#2e3b46;
}
.num[data-v-722f1681] { font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1;
}
.is-empty .kpv[data-v-722f1681], .is-empty .subnote[data-v-722f1681], .kpv.muted[data-v-722f1681] { color:#9aa7b3;
}
.kpl .muted[data-v-722f1681] { color:#7a8895;
}
.col-trend[data-v-722f1681] { grid-template-rows:auto auto 14px;
}
.trend-value[data-v-722f1681] { display:flex; align-items:center; gap:6px;
}
.arrow.up[data-v-722f1681]   { color:#2e7d32;
}
.arrow.down[data-v-722f1681] { color:#b3261e;
}
.arrow.flat[data-v-722f1681] { color:#8fa2b7;
}
.subnote[data-v-722f1681] { font-size:11px; color:#9aa7b3; line-height:14px;
}

/* Remaining potential (Eng/Conv) */
.col-rem[data-v-722f1681] { grid-template-rows:auto auto;
}
.col-rem .kpv[data-v-722f1681] { display:grid; gap:2px; min-width:0;
}
.col-rem .rem-line[data-v-722f1681] { display:flex; align-items:baseline; gap:6px; min-width:0;
}
.rem-label[data-v-722f1681] { font-size:11.5px; font-weight:600; color:#7a8895; letter-spacing:.2px; flex:0 0 auto;
}
.rem-val[data-v-722f1681] { font-size:13px; font-weight:700; color:#2b3a46; min-width:0;
}

/* Focus lever colors (aligned with TopOpportunities) */
.focus[data-v-722f1681] { font-size:13px; color:#354551;
}
.focus .lever.eng[data-v-722f1681]  { color:#4F7EB3;
}
.focus .lever.conv[data-v-722f1681] { color:#B2C149;
}
.pz-card.muted .focus .lever.eng[data-v-722f1681]  { color:#6B92C6;
}
.pz-card.muted .focus .lever.conv[data-v-722f1681] { color:#9FB45A;
}

/* Actions area */
.col-actions[data-v-722f1681], .col-actions .actions-row[data-v-722f1681], .col-actions .suggestion[data-v-722f1681] { min-width:0 !important; max-width:100%; width:100%;
}
.col-actions .actions-row[data-v-722f1681] { display:block !important;
}
.col-actions .suggestion[data-v-722f1681] { display:block; white-space:normal !important; overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}
.actions-pills[data-v-722f1681] { display:flex; flex-wrap:wrap; gap:6px 8px; padding-top:10px;
}
.action-pill[data-v-722f1681] {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#f1f5fb;
  border:1px solid #e2e8f3;
  color:#425461;
  font-size:12px;
  font-weight:600;
  cursor:default;
  user-select:none;
  white-space:nowrap;            /* pill sizes to its label, never wraps the text */
  flex:0 0 auto;
}
.pz-card.pat-awareness .action-pill[data-v-722f1681]{ background:#fff4e1; border-color:#ffe5b4;
}
.pz-card.pat-attention .action-pill[data-v-722f1681]{ background:#ffecec; border-color:#ffc4c4;
}
.pz-card.pat-reach     .action-pill[data-v-722f1681]{ background:#edf7ef; border-color:#cfe8d2;
}
.pz-card.pat-neutral   .action-pill[data-v-722f1681]{ background:#eef4ff; border-color:#e0e8fa;
}
.action-pill .bi[data-v-722f1681] { font-size:13px; opacity:.9;
}
.action-pill[data-v-722f1681]:focus { outline:2px solid #9FC8E3; outline-offset:1px; border-radius:999px;
}


/* ============================================================
   DWELL-ONLY SECTION (tripwire-only zones)
============================================================ */
.dwell-only-section[data-v-59fe5264]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:14px 18px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
}
.dwell-only-head h4[data-v-59fe5264]{
  margin:0 0 4px;
  font-size:.98rem;
  color:#37526b;
  display:flex; align-items:center; gap:8px;
}
.dwell-only-head h4 i[data-v-59fe5264]{ color:#4F7EB3;
}
.dwell-only-head p[data-v-59fe5264]{
  margin:0 0 10px;
  color:#6b7a86;
  font-size:.8rem;
}
.dwell-only-list[data-v-59fe5264]{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.dwell-only-row[data-v-59fe5264]{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:#eef3f8;
  border:1px solid #d1dde9;
  border-radius:8px;
}
.dwell-only-zone[data-v-59fe5264]{ font-weight:600; color:#1a2a36; flex:1;
}
.dwell-only-time[data-v-59fe5264]{ font-weight:700; color:#37526b; font-size:.95rem;
}
.dwell-only-row .conf-chip[data-v-59fe5264]{
  font-size:.7rem;
  padding:2px 8px;
  border-radius:10px;
}
.dwell-only-row .conf-chip.conf-high[data-v-59fe5264]{   color:#2f6f3a; background:#f4faf5; border:1px solid #bfe2c7;
}
.dwell-only-row .conf-chip.conf-medium[data-v-59fe5264]{ color:#9a6b00; background:#fff8e6; border:1px solid #ffd97a;
}
.dwell-only-row .conf-chip.conf-low[data-v-59fe5264]{    color:#8a3a2a; background:#fdecea; border:1px solid #f3b3a8;
}

/* ============================================================
   LAYOUT & HEADER
============================================================ */
.prioritization-panel[data-v-59fe5264] { display:flex; flex-direction:column; gap:16px; overflow-x:hidden;
}
.pz-head.stacked[data-v-59fe5264] { display:flex; flex-direction:column; gap:10px; margin-bottom:6px;
}

/* ROW of gauges */
.gauges-row[data-v-59fe5264] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* Each gauge card container */
.gauge-item[data-v-59fe5264] {
  position: relative;             /* for the help button */
  flex: 1 1 340px;                /* base width ~340px, can grow */
  max-width: 380px;               /* never wider than your current card */
}

/* Let the card fill its column */
.gauge-item .eff-card[data-v-59fe5264] {
  width: 100%;
}

/* Help button still anchored to first gauge */
.pz-help-btn[data-v-59fe5264] {
  position: absolute;
  top: 10px;
  right: 14px;
}
.pz-help-btn[data-v-59fe5264] { position:absolute; top:6px; right:8px; padding:0; margin:0; line-height:1; color:var(--stora-muted);
}
.pz-help-btn[data-v-59fe5264]:hover { color:var(--stora-accent);
}
.title-under-gauge h3[data-v-59fe5264] { margin:0; color:#425461; font-weight:700; padding-top:40px;
}
.subtitle[data-v-59fe5264] { color:#6b7a87; font-size:13px;
}
.subtitle-cross[data-v-59fe5264] { display:block; margin-top:6px; color:#4F7EB3;
}

/* ============================================================
   CHARTS
============================================================ */
.charts-summary[data-v-59fe5264] { display:grid; grid-template-columns:1fr; gap:30px; margin-top:40px;
}
.chart-row[data-v-59fe5264] { display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
.chart-block[data-v-59fe5264] { background:#fff; border:1px solid #e8eef7; border-radius:14px; padding:10px 10px 0; box-shadow:0 3px 10px rgba(0,0,0,.03);
}

/* ============================================================
   MODAL (Allen-style)
============================================================ */
body.modal-open[data-v-59fe5264] { overflow:hidden;
}
.modal-overlay[data-v-59fe5264] { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-window[data-v-59fe5264] { background:#fff; border-radius:8px; min-width:400px; max-width:70vw; max-height:90vh; overflow:auto; padding:1rem; position:relative; box-shadow:0 4px 12px rgba(0,0,0,.3); margin-left:300px; margin-right:20px;
}
.insights-shell[data-v-59fe5264] { border:1px solid #e6edf3; border-radius:12px; box-shadow:0 3px 12px rgba(13,38,76,.08); overflow:hidden;
}
.insights-header[data-v-59fe5264] { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:#f7f9fb; border-bottom:1px solid #e6edf3;
}
.title-wrap[data-v-59fe5264] { display:flex; align-items:center; gap:10px;
}
.title-wrap .bi-question-circle[data-v-59fe5264]{ color:#4F7EB3; font-size:1.1rem;
}
.title[data-v-59fe5264]{ margin:0; font-size:1.1rem; font-weight:700; color:#4F7EB3;
}
.header-controls[data-v-59fe5264]{ display:flex; align-items:center; gap:8px;
}
.icon-close[data-v-59fe5264]{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; border:1px solid #e6edf3; background:#fff; color:#425461; cursor:pointer; transition:background .2s ease;
}
.icon-close[data-v-59fe5264]:hover{ background:#f0f4f8;
}
.insights-body[data-v-59fe5264]{ padding:16px;
}
.insights-footer[data-v-59fe5264]{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; background:#f7f9fb; border-top:1px solid #e6edf3;
}
.stora-btn-secondary[data-v-59fe5264]{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:#4F7EB3; color:#fff; border:0; cursor:pointer; transition:background .2s ease, transform .02s ease; font-size:.9rem;
}
.stora-btn-secondary[data-v-59fe5264]:hover{ background:#B2C149;
}
.modal-explainer[data-v-59fe5264]{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start;
}
.modal-explainer .left[data-v-59fe5264], .modal-explainer .right[data-v-59fe5264] { min-width:0;
}
.efficiency-bar[data-v-59fe5264] { height:10px; background:#e9edf3; border-radius:6px; overflow:hidden;
}
.efficiency-bar .engaged[data-v-59fe5264] { height:100%; background:#4F7EB3;
}
.pz-formula[data-v-59fe5264] { background:#0f172a; color:#e2e8f0; border-radius:10px; padding:10px 12px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; font-size:12.5px; white-space:pre-wrap; margin-bottom:12px;
}
.thin-divider[data-v-59fe5264] { border:0; border-top:1px solid #425461; margin:20px auto; width:80%;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1600px){
.pz-row-grid[data-v-59fe5264]{
    grid-template-columns:
      fit-content(7ch) fit-content(8ch) fit-content(8ch)
      fit-content(10ch) fit-content(10ch) fit-content(18ch)
      fit-content(18ch) 1fr;
    row-gap:10px;
}
.col-actions[data-v-59fe5264]{ grid-column:1 / -1;
}
.chart-row[data-v-59fe5264]{ grid-template-columns:1fr; gap:16px;
}
}
@media (max-width:1400px){
.pz-row-grid[data-v-59fe5264]{ grid-template-columns:1fr 1fr; gap:10px 14px;
}
.col-impact[data-v-59fe5264], .col-actions[data-v-59fe5264]{ grid-column:1 / -1;
}
}
@media (max-width:1250px){
.pz-row-grid[data-v-59fe5264]{ grid-template-columns:1fr; gap:8px;
}
}

.kpi-card[data-v-44efc3ac]{
  --bg:#fff; --fg:#425461; --sub:#6b7a86;
  background:var(--bg); color:var(--fg);
  border:1px solid #e6edf3; border-left:4px solid var(--accent);
  border-radius:12px; padding:12px 14px; box-shadow:0 3px 12px rgba(13,38,76,.06);
  min-height: 88px;
  display:flex; flex-direction:column; justify-content:center;
}
.kpi-card.muted[data-v-44efc3ac]{ opacity:.65; filter:grayscale(.1)
}

/* tripwire variant — semantic "wire" treatment */
.kpi-card.is-tripwire[data-v-44efc3ac]{
  border-left-style: dashed;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, #fff) 0, #fff 60%),
    #fff;
}
.tw-badge[data-v-44efc3ac]{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:auto;
  padding:2px 8px;
  font-size:.65rem; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border:1px dashed color-mix(in srgb, var(--accent) 55%, #fff);
  border-radius:999px;
  line-height:1;
}
.tw-badge i[data-v-44efc3ac]{ font-size:.72rem
}
.kpi-head[data-v-44efc3ac]{ display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem
}
.kpi-icon[data-v-44efc3ac]{ font-size:1rem; opacity:.9; color:var(--accent)
}
.kpi-label[data-v-44efc3ac]{ font-weight:600; letter-spacing:.2px
}

/* value row (prop or slot) – consistent typography */
.kpi-value[data-v-44efc3ac]{ display:flex; align-items:baseline; gap:.4rem
}
.kpi-value .num[data-v-44efc3ac]{ font-weight:700; line-height:1
}
.kpi-value .suffix[data-v-44efc3ac]{ color:var(--sub); font-weight:600
}

/* meta line */
.kpi-meta[data-v-44efc3ac]{ margin-top:.25rem; color:var(--sub); font-size:.85rem
}

/* sizes */
.kpi-sm .num[data-v-44efc3ac]{ font-size:1.2rem
}
.kpi-md .num[data-v-44efc3ac]{ font-size:2rem
}
.kpi-lg .num[data-v-44efc3ac]{ font-size:2.4rem
}

/* unified state view */
.kpi-state[data-v-44efc3ac]{
  display:flex; align-items:center; gap:.5rem; color:#6b7a86; min-height:40px;
}
.state-ico[data-v-44efc3ac]{ font-size:1.1rem; opacity:.8
}
.loader[data-v-44efc3ac]{
  width:18px; height:18px; border-radius:50%;
  background:#B2C149; padding:2px; aspect-ratio:1;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spin-44efc3ac 1s linear infinite;
}
@keyframes spin-44efc3ac{to{transform:rotate(1turn)}}

.panel[data-v-bf700a8d]{
  background:#fff;
  border:1px solid #e6edf3;
  border-left:4px solid var(--accent);       /* ← accent bar */
  border-radius:12px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
  overflow:hidden;                            /* keeps left bar tidy on rounded corners */
  position:relative;
}
.panel.muted[data-v-bf700a8d]{ opacity:.65; filter:grayscale(.1)
}

/* tripwire variant — semantic "wire" treatment */
.panel.is-tripwire[data-v-bf700a8d]{
  border-left-style: dashed;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, #fff) 0, #fff 64px),
    #fff;
}
.panel.is-tripwire .panel-head[data-v-bf700a8d]{
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, #eef3f7);
}
.tw-badge[data-v-bf700a8d]{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:.4rem;
  padding:2px 8px;
  font-size:.7rem; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border:1px dashed color-mix(in srgb, var(--accent) 55%, #fff);
  border-radius:999px;
  line-height:1;
}
.tw-badge i[data-v-bf700a8d]{ font-size:.78rem
}
.panel-head[data-v-bf700a8d]{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; color:#425461;
  border-bottom:1px solid #eef3f7;
}
.panel-head .title[data-v-bf700a8d]{ display:flex; align-items:center; gap:.5rem
}
.panel-head .title i[data-v-bf700a8d]{ color:var(--accent); opacity:.9
}
.panel-head h6[data-v-bf700a8d]{ margin:0; font-weight:700
}
.panel-body[data-v-bf700a8d]{
  position:relative;
  height: var(--panel-h, 320px);
  padding: 6px 8px 10px;
}

/* chart slot gets full space */
.panel-slot[data-v-bf700a8d]{ width:100%; height:100%;
}

/* state view (centered, consistent with KpiCard) */
.state[data-v-bf700a8d]{
  position:absolute; inset:0;
  display:flex; gap:.5rem; align-items:center; justify-content:center;
  padding: 12px 24px;          /* breathing room so long messages don't sit flush */
  color:#6b7a86;
  text-align: center;
}
.state-ico[data-v-bf700a8d]{ font-size:1.1rem; opacity:.85
}
.loader[data-v-bf700a8d]{
  width:18px; height:18px; border-radius:50%;
  background:#B2C149; padding:2px; aspect-ratio:1;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spin-bf700a8d 1s linear infinite;
}
@keyframes spin-bf700a8d{to{transform:rotate(1turn)}}

.dropdown-container[data-v-9d973229] {
  position: relative;
  width: 160px; /* Adjust width as needed */
}
.form-select[data-v-9d973229] {
  color: #4F7EB3;
  padding: 5px 10px;
  border-radius: 4px;
}
.dropdown-with-icon-left[data-v-9d973229] {
  padding-left: 2.5rem; /* Add padding to make room for the icon */
}
.dropdown-icon-left[data-v-9d973229] {
  left: 10px; /* Position icon inside the select box on the left */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  pointer-events: none; /* Prevent interaction with the icon */
  color: #425461; /* Adjust color if needed */
  font-size: 1rem; /* Adjust size if needed */
}

.dropdown-container[data-v-04177ecd] {
  position: relative;
  width: 240px; /* Adjust width as needed */
}
.form-select[data-v-04177ecd] {
  color: #4F7EB3;
  padding: 5px 10px;
  border-radius: 4px;
}
.dropdown-with-icon-left[data-v-04177ecd] {
  padding-left: 2.5rem; /* Add padding to make room for the icon */
}
.dropdown-icon-left[data-v-04177ecd] {
  left: 10px; /* Position icon inside the select box on the left */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  pointer-events: none; /* Prevent interaction with the icon */
  color: #425461; /* Adjust color if needed */
  font-size: 1rem; /* Adjust size if needed */
}

.flowbar[data-v-2c8d2f1c] { padding: 10px 0 6px;
}
.flowbar-head[data-v-2c8d2f1c] {
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
}
.flowbar-title[data-v-2c8d2f1c] {
  font-weight:600; color:#425461; display:flex; align-items:center; gap:8px;
}
.flowbar-title .dot[data-v-2c8d2f1c] { width:8px; height:8px; border-radius:50%; background:#B2C149; display:inline-block;
}
.flowbar-rail[data-v-2c8d2f1c]{
  display:flex; align-items:center; gap:20px; flex-wrap: nowrap; margin-top: 20px;
}
.flowbar-step[data-v-2c8d2f1c]{
  display:flex; align-items:center; gap:8px; position:relative; flex: 0 1 auto;
}
.flowbar-step.active .step-btn[data-v-2c8d2f1c] { border-color:#B2C149; box-shadow:0 0 0 4px rgba(178,193,73,0.18);
}
.flowbar-step.reached:not(.active) .step-btn[data-v-2c8d2f1c] { border-color:#AFC3E5;
}
.flowbar-step.locked .step-btn[data-v-2c8d2f1c] { border-color:#e7e7e7; background:#f7f7f7; cursor:not-allowed;
}
.connector[data-v-2c8d2f1c]{
  height:2px; width:36px; background:#E5EDF6; border-radius:2px; margin-left:12px;
}
.connector.filled[data-v-2c8d2f1c] { background:#6B92C6;
}
.step-btn[data-v-2c8d2f1c] {
  width:38px; height:38px; border-radius:50%; border:2px solid #E5EDF6; background:white;
  display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.step-btn i[data-v-2c8d2f1c] { font-size:18px; color:#6B92C6;
}
.step-label .name[data-v-2c8d2f1c] { font-size:12px; color:#425461; display:flex; align-items:center; gap:6px;
}
.step-label .lock[data-v-2c8d2f1c] { font-size:11px; color:#b0b0b0;
}
.badge[data-v-2c8d2f1c] {
  margin-top:2px; font-size:11px; border-radius:10px; padding:2px 8px; width:max-content;
}
.badge.inc[data-v-2c8d2f1c] { background:#E7F0FA; color:#3566A6;
}
.badge.lock[data-v-2c8d2f1c] { background:#F6F6F6; color:#A1A1A1;
}

/* ====== WRAPPED LAYOUT (prevents scrollbar) ====== */
@media (max-width: 1005px){
.flowbar-rail[data-v-2c8d2f1c]{
    flex-wrap: wrap;        /* **key**: allow wrapping */
    row-gap: 12px;          /* vertical spacing between wrapped rows */
}

  /* let steps take a reasonable column width and wrap to next line */
.flowbar-step[data-v-2c8d2f1c]{
    flex: 1 1 clamp(120px, 22vw, 200px);
    min-width: 0;           /* permit shrinking in narrow containers */
}

  /* connectors become noise when rows wrap → hide them */
.connector[data-v-2c8d2f1c]{ display:none;
}

  /* badges can stay or hide to save space */
  /* .step-label .badge{ display:none; } */

  /* allow labels to wrap to 2 lines cleanly */
.step-label .name[data-v-2c8d2f1c]{
    white-space: normal;
    line-height: 1.15;
}
}
@media (max-width: 920px) {
  /* .step-label .badge { display:none; } */
.flowbar-step[data-v-2c8d2f1c] { min-width: 110px;
}
}

/* ultra-small: stack icon over text inside each step (even denser) */
@media (max-width: 680px){
.flowbar-step[data-v-2c8d2f1c]{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:6px;
}
}

.subpanel[data-v-44910e13] {
  --subpanel-accent: var(--stora-accent, #004F6E);
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: 1px solid #e5eaf0;
  border-left: 4px solid var(--subpanel-accent);
  border-radius: 12px;
  background: #fff;
}
.subpanel--tripwire[data-v-44910e13] {
  border-style: solid dashed dashed dashed;
  border-left-style: dashed;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--subpanel-accent) 4%, #fff) 0, #fff 60%),
    #fff;
}
.subpanel-head[data-v-44910e13] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.subpanel-head .bi[data-v-44910e13] { color: var(--subpanel-accent); font-size: 0.95rem;
}
.subpanel-label[data-v-44910e13] { color: var(--subpanel-accent);
}
.subpanel-count[data-v-44910e13] { color: #98a3ad; font-weight: 600; letter-spacing: 0.04em;
}
.subpanel-modal-pill[data-v-44910e13] {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 0.6rem;
  color: var(--subpanel-accent);
  background: color-mix(in srgb, var(--subpanel-accent) 10%, #fff);
  border: 1px dashed color-mix(in srgb, var(--subpanel-accent) 55%, #fff);
  border-radius: 999px;
  line-height: 1;
}

.ztn-wrap[data-v-928bf0a1]{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  margin: 0 -8px 8px;
  padding: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ztn-wrap.is-stuck[data-v-928bf0a1]{
  border-bottom-color: #e6edf3;
  box-shadow: 0 6px 14px -10px rgba(13,38,76,0.15);
}
.ztn-inner[data-v-928bf0a1]{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 2px 2px 6px;
}
.ztn-inner[data-v-928bf0a1]::-webkit-scrollbar{ height:6px
}
.ztn-inner[data-v-928bf0a1]::-webkit-scrollbar-thumb{ background:#cdd6dd; border-radius:6px
}
.ztn-pill[data-v-928bf0a1]{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e6edf3;
  background: #fff;
  color: #425461;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
  white-space: nowrap;
}
.ztn-pill i[data-v-928bf0a1]{ font-size: .9rem; color: var(--accent); opacity: .9
}
.ztn-pill .tw-mark[data-v-928bf0a1]{
  font-size: .72rem;
  padding: 1px 4px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, #fff);
  border-radius: 999px;
  margin-left: 2px;
  color: var(--accent);
}
.ztn-pill[data-v-928bf0a1]:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, #e6edf3);
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}
.ztn-pill[data-v-928bf0a1]:active{ transform: translateY(1px)
}
.ztn-pill.active[data-v-928bf0a1]{
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  color: color-mix(in srgb, var(--accent) 75%, #1a2a36);
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ztn-pill.active i[data-v-928bf0a1]:first-child{ opacity: 1
}
.ztn-label[data-v-928bf0a1]{ line-height: 1
}

/* Disabled pill — zone type the surface knows about but the current
   account hasn't configured. Greyed out, dashed border, no hover lift,
   click handler is a no-op (handled in template). */
.ztn-pill-disabled[data-v-928bf0a1]{
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed !important;
  background: #f5f7fa;
  color: #94a3b8;
}
.ztn-pill-disabled[data-v-928bf0a1]:hover{
  transform: none;
  box-shadow: none;
  background: #f5f7fa;
}
.ztn-pill-disabled i[data-v-928bf0a1]{ opacity: 0.5;
}

.hero[data-v-3e05a869]{
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-left: 6px solid var(--accent, #36910d);
  border-radius: 16px;
  padding: 28px 32px 26px;
  margin: 8px 0 32px;
  box-shadow: 0 8px 22px -12px rgba(13,38,76,0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-good[data-v-3e05a869]{ --accent: #36910d;
}
.hero-mid[data-v-3e05a869] { --accent: #D3A741;
}
.hero-low[data-v-3e05a869] { --accent: #AD3935;
}
.hero-eyebrow[data-v-3e05a869]{
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.hero-cycler[data-v-3e05a869]{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, #e6edf3);
  border-radius: 999px;
  padding: 2px 4px;
  text-transform: none;
  letter-spacing: 0;
  color: #425461;
}
.cycler-btn[data-v-3e05a869]{
  appearance: none;
  background: transparent;
  border: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--accent);
  font-size: .75rem;
  transition: background-color .15s ease;
}
.cycler-btn[data-v-3e05a869]:hover{ background: color-mix(in srgb, var(--accent) 18%, #fff);
}
.cycler-btn[data-v-3e05a869]:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset: 1px;
}
.cycler-count[data-v-3e05a869]{
  font-size: .68rem;
  font-weight: 700;
  color: #425461;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.hero-state[data-v-3e05a869]{
  margin: 0 0 4px;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #1a2a36;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-pct[data-v-3e05a869]{
  color: var(--accent);
  font-weight: 800;
}
.hero-state-sub[data-v-3e05a869]{
  display: block;
  font-size: 1rem;
  color: #425461;
  font-weight: 400;
  margin-top: 8px;
}
.hero-missed[data-v-3e05a869]{
  /* Growth Potential text in the hero — amber, not red. Opportunity, not loss. */
  color: #A56B1F;
  font-weight: 700;
}
.hero-state-sub[data-v-3e05a869]{
  cursor: help;
}
.hero-state-info[data-v-3e05a869]{
  font-size: .8rem;
  opacity: .55;
  margin-left: 2px;
  vertical-align: baseline;
}
.hero-line[data-v-3e05a869]{
  appearance: none;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, #e6edf3);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: #1a2a36;
  transition: background-color .15s ease, transform .05s ease, border-color .15s ease;
}
.hero-line[data-v-3e05a869]:hover{
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-color: color-mix(in srgb, var(--accent) 45%, #e6edf3);
}
.hero-line[data-v-3e05a869]:active{ transform: translateY(1px)
}
.hero-line[data-v-3e05a869]:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset: 2px;
}

/* Allen-voiced action line — slightly different visual to feel like a colleague's nudge */
.hero-line.allen-line[data-v-3e05a869]{
  background: linear-gradient(90deg, color-mix(in srgb, #4F7EB3 10%, #fff) 0%, color-mix(in srgb, var(--accent) 5%, #fff) 100%);
  border-color: color-mix(in srgb, #4F7EB3 30%, #e6edf3);
}
.hero-line.allen-line[data-v-3e05a869]:hover{
  background: linear-gradient(90deg, color-mix(in srgb, #4F7EB3 18%, #fff) 0%, color-mix(in srgb, var(--accent) 12%, #fff) 100%);
  border-color: color-mix(in srgb, #4F7EB3 50%, #e6edf3);
}
.allen-ico[data-v-3e05a869]{
  color: #4F7EB3 !important;
}
.allen-more[data-v-3e05a869]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-left: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: #4F7EB3;
  background: color-mix(in srgb, #4F7EB3 10%, #fff);
  border: 1px solid color-mix(in srgb, #4F7EB3 35%, #fff);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.allen-more[data-v-3e05a869]:hover{
  background: color-mix(in srgb, #4F7EB3 22%, #fff);
  border-color: #4F7EB3;
}
.allen-more[data-v-3e05a869]:active{ transform: translateY(1px)
}
.allen-more i[data-v-3e05a869]{ font-size: .72rem;
}
.line-ico[data-v-3e05a869]{
  font-size: 1.05rem;
  color: var(--accent);
  flex-shrink: 0;
}
.line-body[data-v-3e05a869]{
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.line-label[data-v-3e05a869]{
  font-weight: 700;
  color: #425461;
  flex-shrink: 0;
}
.line-zone[data-v-3e05a869]{
  color: var(--accent);
  font-weight: 700;
}
.line-meta[data-v-3e05a869]{
  color: #6b7a86;
  font-size: .9rem;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.line-meta .dot[data-v-3e05a869]{ opacity: .55;
}
.line-eur[data-v-3e05a869]{ color: #1a2a36; font-weight: 600;
}

/* Lever clause inline inside the within-reach sentence. Keeps the same
   blue/olive at-a-glance signal the .lever-pill carried, without a
   second visual element. Pairs with the consolidated phrasing
   "≈ €X within reach with +Ypp <lever-clause>". */
.lever-clause[data-v-3e05a869]{
  font-weight: 700;
  white-space: nowrap;
}
.lever-clause.lever-eng[data-v-3e05a869]{ color: #4F7EB3;
}
.lever-clause.lever-conv[data-v-3e05a869]{ color: #6F7C2A;
}

/* Strategic-role chip — sits beside the zone name on the hero. Borrowed
   vocabulary from the Intelligence tab's positioning chart so the user
   sees both "what to do" and "what role this zone plays" without
   leaving the hero. */
.strategic-chip[data-v-3e05a869]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  margin-left: 4px;
  border: 1px solid;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.lever-pill[data-v-3e05a869]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin-left: 6px;
  white-space: nowrap;
}
.lever-pill i[data-v-3e05a869]{ font-size: .72rem;
}
.lever-pill.lever-eng[data-v-3e05a869]{
  color: #4F7EB3;
  background: color-mix(in srgb, #4F7EB3 12%, #fff);
  border: 1px solid color-mix(in srgb, #4F7EB3 35%, #fff);
}
.lever-pill.lever-conv[data-v-3e05a869]{
  color: #6F7C2A;
  background: color-mix(in srgb, #B2C149 18%, #fff);
  border: 1px solid color-mix(in srgb, #B2C149 55%, #fff);
}
.line-text[data-v-3e05a869]{
  color: #1a2a36;
  font-weight: 500;
}
.line-arrow[data-v-3e05a869]{
  color: var(--accent);
  font-size: 1rem;
  opacity: .6;
  transition: opacity .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.hero-line:hover .line-arrow[data-v-3e05a869]{ opacity: 1; transform: translateX(2px);
}
.hero-fallback[data-v-3e05a869]{
  color: #6b7a86;
  font-style: italic;
  font-size: .9rem;
}

/* ------------------------------------------------------------------
 * Hero shell — kept structurally identical to TodayHero so the two
 * heros read as the same family even though the content differs.
 * ----------------------------------------------------------------- */
.hero[data-v-fcc672c2] {
  position: relative;
  background: #fff;
  border: 1px solid #e6edf3;
  border-left: 6px solid var(--accent, #4F7EB3);
  border-radius: 16px;
  padding: 28px 32px 26px;
  margin: 8px 0 32px;
  box-shadow: 0 8px 22px -12px rgba(13, 38, 76, 0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-good[data-v-fcc672c2]    { --accent: #36910d;
}
.hero-mid[data-v-fcc672c2]     { --accent: #D3A741;
}
.hero-neutral[data-v-fcc672c2] { --accent: #4F7EB3;
}
.hero-eyebrow[data-v-fcc672c2] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.hero-state[data-v-fcc672c2] {
  margin: 0 0 4px;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #1a2a36;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-strong[data-v-fcc672c2] {
  font-weight: 800;
}
.hero-pct[data-v-fcc672c2] {
  color: var(--accent);
  font-weight: 800;
}
.hero-state-sub[data-v-fcc672c2] {
  display: block;
  font-size: 1rem;
  color: #425461;
  font-weight: 400;
  margin-top: 8px;
}

/* ------------------------------------------------------------------
 * Inset hero-line — same shape as the commercial hero's opportunity
 * + Allen lines, so the visual rhythm matches.
 * ----------------------------------------------------------------- */
.hero-line[data-v-fcc672c2] {
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, #e6edf3);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #1a2a36;
}

/* Second inset is the operational-pulse slot — uses the same blue tint
   as Allen's line on the commercial hero so the two heros share that
   secondary accent for the operational/auxiliary signal. */
.review-line--ops[data-v-fcc672c2] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #4F7EB3 10%, #fff) 0%,
    color-mix(in srgb, var(--accent) 5%, #fff) 100%
  );
  border-color: color-mix(in srgb, #4F7EB3 30%, #e6edf3);
}
.ops-ico[data-v-fcc672c2] { color: #4F7EB3 !important;
}
.ops-primary[data-v-fcc672c2] { color: #4F7EB3;
}
.line-ico[data-v-fcc672c2] {
  font-size: 1.05rem;
  color: var(--accent);
  flex-shrink: 0;
}
.line-body[data-v-fcc672c2] {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.line-label[data-v-fcc672c2] {
  font-weight: 700;
  color: #425461;
  flex-shrink: 0;
}
.line-zone[data-v-fcc672c2] {
  color: var(--accent);
  font-weight: 700;
}
.line-meta[data-v-fcc672c2] {
  color: #6b7a86;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.line-meta .dot[data-v-fcc672c2] { opacity: 0.55;
}

.sp-shell[data-v-dfc0d100] {
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
  padding: 18px 18px 6px;
  margin-bottom: 24px;
}
.sp-caption[data-v-dfc0d100] {
  font-size: 12px;
  color: #6b7a87;
  line-height: 1.5;
  margin: 0 0 8px;
}
.sp-empty[data-v-dfc0d100] {
  color: #9aa7b3;
  text-align: center;
  padding: 32px 0;
  font-style: italic;
}

/* ============================================================
 SECTION SUMMARY (collapsed-section meta line)
============================================================ */
.sum-pill[data-v-f6378608]{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase;
  line-height:1;
}
.sum-pill i[data-v-f6378608]{ font-size:.72rem
}
.sum-zones[data-v-f6378608]{
  color: var(--accent, #6b7a86);
  background: color-mix(in srgb, var(--accent, #6b7a86) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #6b7a86) 35%, #e6edf3);
}
.sum-tripwire[data-v-f6378608]{
  color: var(--accent, #6b7a86);
  background: color-mix(in srgb, var(--accent, #6b7a86) 10%, #fff);
  border: 1px dashed color-mix(in srgb, var(--accent, #6b7a86) 55%, #fff);
}

/* ============================================================
 SECTION EMPTY STATE (e.g. no entrance configured)
============================================================ */
.section-empty-state[data-v-f6378608]{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:18px 20px;
  background:#fff;
  border:1px dashed #d3dbe1;
  border-radius:12px;
  color:#425461;
}
.section-empty-state .empty-ico[data-v-f6378608]{
  font-size:1.6rem;
  color:#36910d;
  opacity:.85;
  flex-shrink:0;
}
.section-empty-state .empty-text[data-v-f6378608]{
  display:flex; flex-direction:column; gap:2px;
  line-height:1.35;
}
.section-empty-state .empty-text strong[data-v-f6378608]{ color:#1a2a36; font-weight:700
}
.section-empty-state .empty-text span[data-v-f6378608]{ color:#6b7a86; font-size:.9rem
}

/* keep nav above the sticky tab/control headers without overlapping the page */
.data-foundation-pane[data-v-f6378608]{ position: relative;
}

/* "vs your daily average" lift text on the Top Day card */
.best-day-lift[data-v-f6378608]{
  color: #2f6f3a;
  font-weight: 600;
  white-space: nowrap;
}

/* "(est.)" badge on store-level bar-list rows whose value came from Mode C
   (Little's Law) estimation rather than polygon measurement. Cursor goes to
   help so the title tooltip is discoverable. */
.est-badge[data-v-f6378608]{
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9a6b00;
  letter-spacing: 0.2px;
  cursor: help;
}

/* Per-row confidence chip for Mode C dwell estimates. Mirrors the per-zone
   confidence emitted by the backend (high / medium). */
.conf-chip[data-v-f6378608]{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: help;
}
.conf-chip.conf-high[data-v-f6378608]   { color: #15803d; background: #dcfce7; border-color: #86efac;
}
.conf-chip.conf-medium[data-v-f6378608] { color: #b45309; background: #fef3c7; border-color: #fcd34d;
}
/* Bias chips (Phase 3). Visually distinct from confidence chips so a row
   carrying both stays scannable — the bias chip uses an unfilled, outlined
   treatment with red ink for high bias, slate ink for mild bias. */
.conf-chip.conf-mild-bias[data-v-f6378608] { color: #92400e; background: #fffbeb; border-color: #fde68a;
}
.conf-chip.conf-high-bias[data-v-f6378608] { color: #b91c1c; background: #fee2e2; border-color: #fca5a5;
}

/* ============================================================
 TREND CARD CONTENT
============================================================ */
.trend-short[data-v-f6378608] {
  font-weight: 700;
  font-size: 1.0rem;
  line-height: 1.1;
}
.trend-sentence[data-v-f6378608] {
  display: block;
  color: #6b7a86;
  font-size: .9rem;
  line-height: 1.25;
}

/* ============================================================
 BAR-LIST (Visitors/Average dwell lists)
============================================================ */
/* Single-grid layout so the label column auto-sizes to the widest label in
   the chart — single-zone charts get a tight label; charts with longer zone
   names or with the est conf-chip naturally take more label space without
   leaving whitespace in other charts. */
.barlist[data-v-f6378608] { display:grid; grid-template-columns: max-content 1fr auto; gap:10px; align-items:center;
}
.barlist-row[data-v-f6378608] { display:contents;
}
.barlist-label[data-v-f6378608] { color:#425461; white-space:nowrap;
}
.barlist-row.with-chip .barlist-label[data-v-f6378608] { display:inline-flex; align-items:center; gap:6px;
}
.barlist-row.with-chip .barlist-label .conf-chip[data-v-f6378608] { flex-shrink: 0;
}
.barlist-bar[data-v-f6378608] { height:10px; background:#eef3f7; border-radius:999px; overflow:hidden;
}
.barlist-fill[data-v-f6378608] { height:100%; background:#004F6E; border-radius:999px; opacity:.85;
}
.barlist-value[data-v-f6378608] { font-variant-numeric: tabular-nums; color:#2b3a44;
}

/* ============================================================
 FUNNEL TABLE
============================================================ */
.funnelz-table[data-v-f6378608] { display: grid; gap: 8px;
}
.funnelz-row[data-v-f6378608] {
  display: grid;
  grid-template-columns: 1fr .6fr .8fr .9fr .9fr;
  align-items: center;
  gap: 10px;
  padding: .45rem .65rem;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  background: #fff;
}
.funnelz-head[data-v-f6378608] { font-weight: 600; background: #f7fafc;
}
.zone-name[data-v-f6378608] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num[data-v-f6378608] { text-align: right; font-variant-numeric: tabular-nums;
}
.num small[data-v-f6378608] { color: #6b7a86; margin-left: 4px;
}
.funnelz-row .merge-3[data-v-f6378608] { grid-column: 3 / span 3; text-align: center;
}
.funnelz-row .insufficient-msg[data-v-f6378608] { color: #6b7a86; font-style: italic;
}

/* ============================================================
 STATE / UTILITY
============================================================ */
.card-disabled[data-v-f6378608] { opacity: 0.5; pointer-events: none; background-color: #ffffff;
}
.group-disabled[data-v-f6378608] { border: 2px dashed #dcdcdc; background-color: #ffffff; opacity: 0.7;
}

/* ============================================================
 MODAL (Allen’s insights)
============================================================ */
.modal-overlay[data-v-f6378608] {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-window[data-v-f6378608] {
  background: white; border-radius: 8px;
  min-width: 400px; max-width: 90vw; max-height: 90vh;
  overflow: auto; padding: 1rem; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-left: 300px; margin-right: 20px;
}

/* ============================================================
 LOADER (overlay)
============================================================ */
.loader-overlay[data-v-f6378608] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255, 255, 255, 0.8); z-index: 1000;
}
.loader[data-v-f6378608] {
  width: 20px; margin-top: 20px; padding: 2px; aspect-ratio: 1; border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m); mask: var(--_m);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: spinner-f6378608 1s infinite linear;
}
@keyframes spinner-f6378608 {
to { transform: rotate(1turn)
}
}

/* ============================================================
 RESPONSIVE (kept only where still referenced)
============================================================ */
@media (max-width: 1600px) {
.charts-grid[data-v-f6378608] { grid-template-columns: 1fr;
}
.grid-container-product-data[data-v-f6378608] { grid-template-columns: 1fr;
}
}
@media (max-width: 1500px) {
.grid-container-product-data[data-v-f6378608] { grid-template-columns: 1fr;
}
.card-stack[data-v-f6378608] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-right: 0;
}
}
@media (max-width: 1400px) {
.chart-container[data-v-f6378608] { flex-direction: column; gap: 1rem;
}
.chart-wrapper[data-v-f6378608] { flex: 1 1 100%; max-width: 100%;
}
}
@media (max-width: 900px){
.funnelz-row[data-v-f6378608] { grid-template-columns: 1.2fr .6fr .8fr .9fr .9fr;
}
}
@media (max-width: 768px) {
.modal-window[data-v-f6378608] { margin-left: 20px;
}
}
@media (max-width: 600px) {
.grid-container-product-data[data-v-f6378608] { grid-template-columns: 1fr;
}
.card-stack[data-v-f6378608] { display: grid; grid-template-columns: 1fr; gap: 10px; margin-right: 0;
}
}

.panel-min-140[data-v-8e9241c5] .panel-body { min-height: 140px;
}

/* New layout: KPI strip on top, then live tables row below.
   Collapses to a single column on narrow screens. */
.live-grid[data-v-8e9241c5]{
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

/* KPI strip — explicit breakpoints (auto-fit produced unpredictable heights at
   intermediate widths). All panels in a row are forced to equal height via
   align-items: stretch (default) plus the panel filling its grid cell below. */
.kpi-strip[data-v-8e9241c5]{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) and (max-width: 1099px) {
.kpi-strip[data-v-8e9241c5]{ grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.kpi-strip[data-v-8e9241c5]{ grid-template-columns: repeat(3, 1fr);
}
}
/* When Current Occupancy is also shown (4th panel), let it wrap to a 2nd row
   gracefully on the 3-col layout. The 4th item just spans whatever's left. */

/* Make every panel inside the strip fill the grid cell vertically and share
   the tallest's height. Combined with align-items: stretch (default) on the
   grid, this gives uniform heights across the row. */
.kpi-strip[data-v-8e9241c5] >  .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kpi-strip[data-v-8e9241c5] >  .panel .panel-body{
  flex: 1;
  min-height: 200px;       /* prevents the Visitor Count card from collapsing */
  height: auto;            /* override the prop-driven --panel-h */
}

/* Live tables row — Zone Live (polygon) + Tripwire Activity, side by side on wide screens */
.live-tables[data-v-8e9241c5]{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Let the ChartPanel grow with its children */
.auto-h[data-v-8e9241c5] .panel-body{
  height: auto !important;
}
.auto-h[data-v-8e9241c5] .panel-slot{
  height: auto !important;
}
.kpi-row[data-v-8e9241c5] {
  display: grid;
  /* Compact min so a 5-pill panel can fit 2-3 pills per row in even a narrow column.
     Combined with the panel min-height, the panel doesn't grow vertically beyond
     a few rows of pills. */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.kpi-pill[data-v-8e9241c5] {
  background: #f7f9fb;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.kpi-pill p[data-v-8e9241c5] {
  margin: 0 0 2px 0;
  font-size: 1rem;
  font-weight: 400;
}
.kpi-cap[data-v-8e9241c5] {
  color: #6b7a86;
  font-size: 0.72rem;
  line-height: 1.15;
}

/* Keep the big number center-aligned like other KPIs */
.kpi-center[data-v-8e9241c5]{ 
  height:100%; display:flex; align-items:center; justify-content:center;
}
.current-counter[data-v-8e9241c5]{ 
  font-size: clamp(42px, 3.2vw, 56px); color:#36910d;
}
.text-ok[data-v-8e9241c5]{ color:#2F9E44; font-size:1.2rem;
}
.text-warn[data-v-8e9241c5]{ color:#ffd32c; font-size:1.2rem;
}
.table-wrapper[data-v-8e9241c5]{ border:1px solid #e6edf3; border-radius:10px; overflow:hidden;
}
.stora-table[data-v-8e9241c5]{ width:100%; border-collapse:collapse;
}
.stora-table th[data-v-8e9241c5], .stora-table td[data-v-8e9241c5]{ padding:10px; border-bottom:1px solid #eef3f7;
}
.stora-table thead th[data-v-8e9241c5]{
  background:rgba(33,37,41,.03); color:#4F7EB3; text-align:center; font-weight:700; font-size:.9rem;
}
.stora-table tbody tr:last-child td[data-v-8e9241c5]{ border-bottom:0;
}
.icon-cell[data-v-8e9241c5]{ text-align:center;
}

/* Cell that doesn't apply to this zone's geometry (e.g. dwell duration on a tripwire-only zone) */
.na-cell[data-v-8e9241c5]{ color:#aab4be; font-weight:600;
}

/* Small inline glyph next to a zone name to indicate a tripwire is involved */
.geom-marker[data-v-8e9241c5]{ margin-left:6px; color:#4F7EB3; font-size:.78rem; opacity:.85;
}

/* "in" / "out" suffixes alongside directional counts */
.dir-label[data-v-8e9241c5]{ color:#7a8a96; font-size:.78rem; font-weight:500; margin-left:2px;
}

/* Brief flash on a row when a tripwire crossing arrives via socket */
.tripwire-flash td[data-v-8e9241c5]{ animation: tripwire-flash-anim-8e9241c5 .8s ease-out;
}
@keyframes tripwire-flash-anim-8e9241c5{
0%   { background:rgba(178, 193, 73, .35);
}
100% { background:transparent;
}
}
@media (max-width: 1200px){
.live-tables[data-v-8e9241c5]{ grid-template-columns: 1fr;
}
}

.table-wrapper[data-v-24bfa48a]{ border:1px solid #e6edf3; border-radius:10px; overflow:hidden;
}
.stora-table[data-v-24bfa48a]{ width:100%; border-collapse:collapse;
}
.stora-table th[data-v-24bfa48a], .stora-table td[data-v-24bfa48a]{ padding:10px; border-bottom:1px solid #eef3f7;
}
.stora-table thead th[data-v-24bfa48a]{
  background:rgba(33,37,41,.03); color:#4F7EB3; text-align:center; font-weight:700; font-size:.9rem;
}
.stora-table tbody tr:last-child td[data-v-24bfa48a]{ border-bottom:0;
}
.muted[data-v-24bfa48a]{ color:#9aa7b1;
}

/* Cell that doesn't apply to this zone's geometry (e.g. dwell columns on a tripwire-only zone) */
.na-cell[data-v-24bfa48a]{ color:#aab4be; font-weight:600;
}

/* Small inline glyph next to a zone name to indicate a tripwire is involved */
.geom-marker[data-v-24bfa48a]{ margin-left:6px; color:#4F7EB3; font-size:.78rem; opacity:.85;
}

/* visitor bar - unchanged */
.visitor-bar-outer[data-v-24bfa48a]{ position:relative; height:20px; border:1px solid #ddd; border-radius:4px; background:#fff; overflow:hidden;
}
.visitor-bar-gradient[data-v-24bfa48a]{
  height:100%;
  background: linear-gradient(to right, #C21500, #FFA500, #2F9E44);
  -webkit-mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.visitor-bar-gradient.inactive[data-v-24bfa48a]{ background:#e6e6e6 !important; -webkit-mask-image:none !important; mask-image:none !important;
}
.visitor-bar-gradient.zero-fill[data-v-24bfa48a]{ visibility:hidden;
}
.visitor-bar-label[data-v-24bfa48a]{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; color:#2b3a44;
}
.panel-min-140[data-v-24bfa48a] .panel-body { min-height: 140px;
}

/* ---------- Responsive “stack to cards” ---------- */
@media (max-width: 1054px) {
  /* Visually hide the header row but keep it accessible */
.stora-table thead[data-v-24bfa48a] {
    position:absolute;
    width:1px; height:1px; overflow:hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.stora-table[data-v-24bfa48a], .stora-table tbody[data-v-24bfa48a], .stora-table tr[data-v-24bfa48a], .stora-table td[data-v-24bfa48a] { display:block; width:100%;
}
.stora-table tr[data-v-24bfa48a] {
    border:1px solid #e6edf3;
    border-radius:12px;
    padding:10px;
    margin:10px 10px 14px;
    background:#fff;
    box-shadow:0 3px 8px rgba(13,38,76,.05);
}
.stora-table td[data-v-24bfa48a] {
    border:0;
    border-bottom:1px dashed #eef3f7;
    padding:8px 6px;
    display:grid;
    grid-template-columns: 140px 1fr;  /* label | value */
    align-items:center;
    gap:8px;
}
.stora-table td[data-v-24bfa48a]:last-child { border-bottom:0;
}

  /* inject the header name for each cell from data-th="" */
.stora-table td[data-v-24bfa48a]::before {
    content: attr(data-th);
    font-weight:600;
    color:#425461;
    font-size:.9rem;
}

  /* Make percentage bar comfortable in stacked mode */
.visitor-bar-outer[data-v-24bfa48a] { height:18px;
}
}

/* Even narrower: put label above value */
@media (max-width: 520px) {
.stora-table td[data-v-24bfa48a] { grid-template-columns: 1fr;
}
.stora-table td[data-v-24bfa48a]::before {
    margin-bottom: 2px;
}
}

/* Right-aligned action button inside the Section head */
.ask-allen-btn[data-v-b4c9ec52]{
  margin-left: auto;                 /* pushes it to the right within the head */
  background-color:#4f7eb3;
  color:#fff;
  border:0;
  padding:6px 16px;
  border-radius:6px;
  cursor:pointer;
  white-space: nowrap;
  min-width: max-content;
}
.ask-allen-btn[data-v-b4c9ec52]:hover{ background-color:#b2c149;
}

/* Overlay for the popup */
.popup-overlay[data-v-b4c9ec52] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* Popup content */
.popup-content[data-v-b4c9ec52] {
    width: 1000px;
    height: 90vh;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Popup Header */
.popup-header[data-v-b4c9ec52] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color: rgba(33, 37, 42, 0.03);
    border-bottom: 1px solid #ccc;
    color: #4f7eb3;
}
.close-btn[data-v-b4c9ec52] {
  background-color: #4f7eb3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.close-btn[data-v-b4c9ec52]:hover {
  background-color: #b2c149;
  color: #fff;
}
.chat-container[data-v-b4c9ec52] {
  flex-grow: 1;
  overflow-y: auto; /* Enables scrolling */
  padding: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
.chat-messages[data-v-b4c9ec52] {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

/* Scrollbar Styling */
.chat-messages[data-v-b4c9ec52]::-webkit-scrollbar {
    width: 6px;
}
.chat-messages[data-v-b4c9ec52]::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 10px;
}
.chat-messages[data-v-b4c9ec52]::-webkit-scrollbar-track {
    background: transparent;
}

/* General Chat Bubble Styling */
.chat-bubble[data-v-b4c9ec52] {
  max-width: 60%;
  padding: 10px 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}

/* Sender Name */
.chat-sender[data-v-b4c9ec52] {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 5px;
}

/* Chat Timestamp */
.chat-timestamp[data-v-b4c9ec52] {
  font-size: 10px;
  opacity: 0.6;
  align-self: flex-end;
  margin-top: 5px;
}

/* Assistant Message (Left Side) */
.assistant[data-v-b4c9ec52] {
  align-self: flex-start;
  background-color: #f1f1f1;
  color: black;
  border-radius: 15px 15px 15px 0;
  text-align: left;
  margin-left: 10px;
}

/* User Message (Right Side) */
.user[data-v-b4c9ec52] {
  align-self: flex-end;
  background-color: #4f7eb3;
  color: white;
  border-radius: 15px 15px 0 15px;
  text-align: right;
  margin-right: 10px;
}

/* Message Overlapping the Center */
.assistant[data-v-b4c9ec52]::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #f1f1f1;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.user[data-v-b4c9ec52]::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #4f7eb3;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.chat-input[data-v-b4c9ec52] {
  display: flex;
  padding: 15px;
  border-top: 1px solid #ccc;
  background-color: rgba(33, 37, 42, 0.03);
}
.chat-input input[data-v-b4c9ec52] {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.chat-input textarea[data-v-b4c9ec52] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none; /* Prevent manual resize */
  overflow-y: auto;
  min-height: 40px;
  max-height: 150px;
  font-size: 14px;
  line-height: 1.5;
}
.chat-input button[data-v-b4c9ec52] {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4f7eb3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.chat-input button[data-v-b4c9ec52]:hover {
  background-color: #b2c149;
}

/* Prevent background scrolling when the popup is open */
body.modal-open[data-v-b4c9ec52] {
    overflow: hidden;
}

/* Prevent Scrolling from Propagating to the Underlying Page */
.chat-messages[data-v-b4c9ec52]:hover {
    overscroll-behavior: contain;
}
.thinking[data-v-b4c9ec52] {
    opacity: 0.7;
    font-style: italic;
    color: gray;
    animation: fadeInOut-b4c9ec52 1.5s infinite alternate ease-in-out;
}
@keyframes fadeInOut-b4c9ec52 {
0% { opacity: 0.4;
}
100% { opacity: 0.7;
}
}
.loader[data-v-b4c9ec52] {
    width: 80px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #B2C149;
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: spinner-b4c9ec52 1s infinite linear;
}
@keyframes spinner-b4c9ec52 {to{transform: rotate(1turn)}}

/* Mobile: stack title (row 1) and button (row 2) */
@media (max-width: 1080px){
.ask-allen-btn[data-v-b4c9ec52]{ margin-left: 0; width: max-content;
}
}


.card-title[data-v-67556029] {
  color: #4F7EB3;
}
.card[data-v-67556029] {
  width: 27rem;
  margin-bottom: 20px;
}
.dummy-card[data-v-67556029] {
  border-color: #ddd; /* Light gray border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for raised card effect */
  color: #666; /* Gray text color */
}
.cards-container[data-v-67556029] {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    box-sizing: border-box; /* Ensure padding/margin do not affect the size */
}
.counter-card[data-v-67556029] {
    flex: 1 1 100%; /* Fixed width for each counter card */
    box-sizing: border-box;
    min-width: 150px;
}
.counter-card.greyed-out[data-v-67556029] {
    background-color: #f0f0f0; /* Light grey background */
    color: #a0a0a0; /* Grey text color */
}
.counter-card-header[data-v-67556029] {
    padding: 10px;
    text-align: left;
}
.counter-card-title[data-v-67556029] {
    margin: 0; /* Remove default margin */
    font-size: small;
    color: #4F7EB3 !important
}
.count[data-v-67556029] {
    display: block;
    padding: 10px;
}
.zone-table[data-v-67556029] {
  display: flex;
  flex-direction: column;
}
.zone-row[data-v-67556029] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.zone-name[data-v-67556029] {
  flex: 1;
  font-size: small;
}
.zone-count[data-v-67556029] {
  flex: 0 0 50px; /* Fixed width to align counts */
  text-align: right;
  font-size: small;
}
.error-text[data-v-67556029] {
  color: red;
  font-size: small;
  text-align: center;
  margin-top: 10px;
}
.page-head[data-v-67556029]{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 16px 0;
}
.page-title[data-v-67556029]{
  margin:0; font-size:1.25rem; color:#4F7EB3; display:flex; align-items:center; gap:8px;
}
.page-actions[data-v-67556029]{ display:flex; align-items:center; gap:8px;
}
.row[data-v-67556029] {padding-top: 40px;}
.row.row-cols-auto[data-v-67556029]{ gap:22px; justify-content:start;
}
.health-card[data-v-67556029]{
  width: 26rem;
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  box-shadow:0 3px 12px rgba(13,38,76,.08);
  padding:14px 14px 10px; display:flex; flex-direction:column; gap:12px;
}

/* Header */
.health-head[data-v-67556029]{ display:flex; flex-direction:column; gap:10px;
}
.health-title[data-v-67556029]{ margin:0; font-size:1rem; color:#4F7EB3;
}

/* Pills row */
.pill-row[data-v-67556029]{ display:flex; flex-wrap:wrap; gap:8px;
}

/* Chips (reused) */
.chip[data-v-67556029]{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:4px 10px; font-size:.78rem;
  border:1px solid #e6edf3; color:#4F7EB3; background:#f7fbff;
}
.chip-ok[data-v-67556029]{    color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df;
}
.chip-warn[data-v-67556029]{  color:#b66a00; background:#fff7e6; border-color:#ffe7bf;
}
.chip-muted[data-v-67556029]{ color:#81909a; background:#f3f5f7; border-color:#e9eef3;
} /* neutral */
.chip-idle[data-v-67556029]{  color:#b66a00; background:#eef3f7; border-color:#dfe8ef;
} /* 0 visitors */

/* Actions */
.health-actions[data-v-67556029]{
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
  border-top:1px dashed #e6edf3; padding-top:10px;
}

/* Buttons (brand-consistent) */
.stora-btn[data-v-67556029]{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px; border:1px solid transparent;
  background:#4F7EB3; color:#fff; text-decoration:none; font-size:.86rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.stora-btn[data-v-67556029]:hover{ background:#B2C149;
}
.stora-btn.ghost[data-v-67556029]{
  background:#fff; color:#4F7EB3; border-color:#e6edf3;
}
.stora-btn.ghost[data-v-67556029]:hover{
  background:#f4f7fb; border-color:#cfe0f3; color:#4F7EB3;
}
.empty-card[data-v-67556029]{ align-items:center; text-align:center; gap:10px; padding:28px 18px;
}
.empty-icon[data-v-67556029]{ font-size:36px; color:#9aa8b3;
}
.empty-title[data-v-67556029]{ margin:6px 0 0 0; color:#4F7EB3; font-size:1.1rem;
}
.empty-sub[data-v-67556029]{ margin:0; color:#6c7a86; font-size:.9rem;
}
.empty-hint[data-v-67556029]{ margin:8px 0 0 0; color:#6c7a86; font-size:.86rem;
}
.loader[data-v-67556029] {
  width: 80px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #B2C149;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: spinner-67556029 1s infinite linear;
}
@keyframes spinner-67556029 {to{transform: rotate(1turn)}}
.placeholder-animation[data-v-67556029] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-placeholder[data-v-67556029] {
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, transparent 0%, #E0E0E0 50%, transparent 100%);
  background-size: 200% 100%;
  animation: loadingplaceholder-67556029 1.5s ease-in-out infinite;
}
@keyframes loadingplaceholder-67556029 {
0% {
    background-position: 200% 0;
}
100% {
    background-position: -200% 0;
}
}
@media (max-width: 768px) {
.health-card[data-v-67556029]{ width: calc(100vw - 40px);
}
}



.realtime-page[data-v-01fafecb] { position: relative;
}
.section-head[data-v-01fafecb]{
    margin-top: 50px;
}

/* Each top-level section gets its own block; gap between Opportunity Funnel and the live activity area */
.dashboard-section[data-v-01fafecb]{
  padding-top: 20px;
}
.dashboard-section[data-v-01fafecb]:last-child{
  padding-bottom: 40px;
}

/* Fullscreen loader */
.loader-overlay.fullscreen[data-v-01fafecb]{
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8);
}
.loader[data-v-01fafecb] {
  width: 80px; padding: 8px; aspect-ratio: 1; border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m); mask: var(--_m);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: spinner-01fafecb 1s linear infinite;
}
@keyframes spinner-01fafecb {
to { transform: rotate(1turn)
}
}


/* Subcard styling must be replicated here because the parent component's
   <style scoped> block does not bleed into child-component DOM. Keep these
   rules in sync with the .subcard / .subcard-head / .subcard-title /
   .subcard-body / .form-label / .field-help rules in DetectionZoneSettings.vue. */
.subcard[data-v-d3251609]{
  border:1px solid #e6edf3;
  border-radius:12px;
  margin-top:24px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(13,38,76,.05);
}
.subcard-head[data-v-d3251609]{
  padding:10px 12px;
  border-bottom:1px solid #eef3f7;
  background:#f9fbfd;
}
.subcard-title[data-v-d3251609]{ margin:0; color:#4F7EB3; font-weight:800
}
.subcard-body[data-v-d3251609]{ padding:12px 12px
}
.form-label[data-v-d3251609]{
  display:block;
  margin-bottom:.25rem;
  font-weight:700;
  color:#425461;
}
.field-help[data-v-d3251609]{
  margin:-2px 0 8px 0;
  font-size:.78rem;
  line-height:1.35;
  color:#8a99a4;
  font-weight:400;
}
.icon-muted[data-v-d3251609]{ color:#7a8a96
}
.sep[data-v-d3251609]{ margin: 0 6px; color:#7a8a96
}
.radio-row[data-v-d3251609]{ display:flex; gap:18px; flex-wrap:wrap
}
.radio-line[data-v-d3251609]{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px
}
.block[data-v-d3251609]{ margin: 10px 0 14px
}

/* Modal shell (content only; overlay handled by parent) */
.modal-content[data-v-ed9ccad0]{
  display:flex;                 /* NEW */
  flex-direction:column;        /* NEW */
  background:#fff; 
  border-radius:14px; 
  width:min(920px,92vw);
  max-height:86vh; 
  overflow:hidden;              /* moved from auto to hidden */
  box-shadow:0 12px 36px rgba(13,38,76,.18);
  padding:0; 
  z-index:2001;
}

/* Accent spine card */
.kpi-accent[data-v-ed9ccad0]{ 
  position:relative; 
  border:none; 
  border-radius:14px; 
  overflow:hidden;
  display:flex;                 /* NEW */
  flex-direction:column;        /* NEW */
  max-height:inherit;           /* NEW */
}
.kpi-accent[data-v-ed9ccad0]::before{
  content:""; 
  position:absolute; 
  inset:0 auto 0 0; 
  width:8px; 
  background:var(--accent,#4F7EB3);
}

/* Header */
.modal-head[data-v-ed9ccad0]{
  flex:0 0 auto;                /* NEW */
  padding:12px 36px; 
  border-bottom:1px solid #eef3f7; 
  background:#fff;
}
.card-title[data-v-ed9ccad0]{
  margin:0; 
  color:#425461; 
  font-weight:800;
}
.dz-name[data-v-ed9ccad0]{ color:#2b3a44; font-weight:800
}
.zone-type-line[data-v-ed9ccad0]{
  display:flex; 
  align-items:center; 
  gap:8px; 
  margin-top:6px;
}
.zone-dot[data-v-ed9ccad0]{
  width:14px; 
  height:14px; 
  border-radius:4px; 
  display:inline-block;
  box-shadow:0 0 0 2px #fff inset, 0 0 0 1px #dfe7ee;
}
.zone-type-text[data-v-ed9ccad0]{ color:#6b7a86; font-weight:700
}
.form-label-type[data-v-ed9ccad0]{ font-weight:800; color:#425461
}

/* Body (scrollable zone) */
.modal-body[data-v-ed9ccad0]{ 
  flex:1 1 auto;                /* NEW - fills remaining space */
  min-height:0;                 /* NEW - necessary for flex scroll */
  overflow-y:auto;              /* NEW - vertical scroll only */
  overscroll-behavior:contain;  /* NEW */
  -webkit-overflow-scrolling:touch; /* NEW smooth scroll on mobile */
  padding:14px 36px; 
  background:#fff
}

/* Custom scrollbar */
.modal-body[data-v-ed9ccad0]::-webkit-scrollbar{ width:10px;
}
.modal-body[data-v-ed9ccad0]::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:8px;
}
.modal-body[data-v-ed9ccad0]::-webkit-scrollbar-thumb:hover{ background:#b6c2d0;
}
.modal-body[data-v-ed9ccad0]{ scrollbar-width:thin; scrollbar-color:#cfd8e3 transparent;
}
.block[data-v-ed9ccad0]{ margin-bottom:16px
}
.divider-soft[data-v-ed9ccad0]{ border:0; border-top:1px solid #eef3f7; margin:10px 0
}

/* Subcards (section boxes) */
.subcard[data-v-ed9ccad0]{
  border:1px solid #e6edf3;
  border-radius:12px;
  margin-top:24px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(13,38,76,.05);
}
.subcard-head[data-v-ed9ccad0]{
  padding:10px 12px;
  border-bottom:1px solid #eef3f7;
  background:#f9fbfd
}
.subcard-title[data-v-ed9ccad0]{ margin:0; color:#4F7EB3; font-weight:800
}
.subcard-body[data-v-ed9ccad0]{ padding:12px 12px
}

/* Group divider — separates "Zone Settings" subcards from "Tripwire
   Settings" subcards on zones that have both. Sits above the first
   subcard of a group; pulls the subcard's top margin closer so the
   divider visually owns the gap. */
.settings-section-header[data-v-ed9ccad0]{
  margin:28px 0 8px 0;
  padding:0 4px 6px 4px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#4F7EB3;
  border-bottom:2px solid #e6edf3;
}
.settings-section-header + .subcard[data-v-ed9ccad0]{ margin-top:12px
}
.settings-section-header[data-v-ed9ccad0]:first-child{ margin-top:4px
}

/* Labels & inputs */
.form-label[data-v-ed9ccad0]{
  display:block;
  margin-bottom:.25rem;
  font-weight:700;
  color:#425461
}
/* Always-visible one-line subtitle under each setting's label. Sized and
   coloured so it recedes visually — returning users skim past it; new
   users read it for free. If a hint genuinely needs more depth, keep it
   here and split off a separate "Learn more" affordance; do not let this
   line grow into a paragraph. */
.field-help[data-v-ed9ccad0]{
  margin:-2px 0 8px 0;
  font-size:.78rem;
  line-height:1.35;
  color:#8a99a4;
  font-weight:400;
}
.with-help[data-v-ed9ccad0]{ display:inline-flex; align-items:center; gap:6px
}
.form-select[data-v-ed9ccad0], .form-control[data-v-ed9ccad0], .input-group-text[data-v-ed9ccad0]{
  border:1px solid #dfe7ee; 
  border-radius:10px; 
  padding:8px 10px; 
  color:#2b3a44;
  margin-bottom: 36px;
}
.form-select[data-v-ed9ccad0]:focus, .form-control[data-v-ed9ccad0]:focus{
  border-color:#4F7EB3; 
  outline:none; 
  box-shadow:0 0 0 3px rgba(79,126,179,.12);
}
.input-group[data-v-ed9ccad0]{ display:flex; align-items:center; gap:8px
}
.input-group.narrow[data-v-ed9ccad0]{ max-width:300px
}
.input-group-text[data-v-ed9ccad0]{
  background:#f9fbfd; 
  color:#4F7EB3; 
  font-weight:800; 
  border-width:1px;
}

/* Radios */
.radio-row[data-v-ed9ccad0]{ 
  display:flex; 
  gap:18px; 
  flex-wrap:wrap; 
  margin-top:6px
}
.radio-line[data-v-ed9ccad0]{ 
  display:flex; 
  align-items:center; 
  gap:14px; 
  flex-wrap:wrap; 
  margin-top:8px
}
.icon-muted[data-v-ed9ccad0]{ color:#425461; opacity:.9
}
.sep[data-v-ed9ccad0]{ color:#425461
}

/* Slider */
.slider-container[data-v-ed9ccad0]{ width:100%
}
.slider[data-v-ed9ccad0]{
  margin-top:44px;
  margin-left:10px;
  padding-right:10px;
  --slider-connect-bg:#B2C149;
  --slider-tooltip-bg:#B2C149;
  --slider-height:2px;
  --slider-handle-width:12px;
  --slider-handle-height:12px;
  --slider-tooltip-line-height:1rem;
  --slider-tooltip-font-size:.7rem;
  width:100%;
}

/* Tooltip pill */
.tooltip-icon[data-v-ed9ccad0]{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  margin-left:6px; 
  width:18px; 
  height:18px; 
  border-radius:50%;
  font-size:11px; 
  font-weight:700; 
  background:#f0f3f6; 
  color:#6b7a86; 
  cursor:help;
}
.tooltip-icon[data-v-ed9ccad0]:hover{ background:#e6eef4; color:#425461
}

/* Footer */
.modal-foot[data-v-ed9ccad0]{
  flex:0 0 auto;                /* NEW - fixed at bottom */
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  padding:10px 36px; 
  border-top:1px solid #eef3f7; 
  background:#fff;
}
.left-group[data-v-ed9ccad0]{ display:flex; align-items:center; gap:10px
}
.saving[data-v-ed9ccad0]{ display:flex; align-items:center; gap:8px; color:#6b7a86
}

/* Buttons */
.btn-solid[data-v-ed9ccad0], .btn-outline[data-v-ed9ccad0]{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  cursor:pointer; 
  border-radius:10px;
  padding:8px 12px;
}
.btn-solid[data-v-ed9ccad0]{ border:0; color:#fff
}
.btn-solid.ok[data-v-ed9ccad0]{ background:#6C9046
}
.btn-solid.warn[data-v-ed9ccad0]{ background:#f0ad00; color:#1b1b1b
}
.btn-solid[data-v-ed9ccad0]:disabled, .btn-disabled[data-v-ed9ccad0]{ opacity:.55; cursor:not-allowed
}
.btn-outline[data-v-ed9ccad0]{
  border:1px solid #4F7EB3; 
  background:#fff; 
  color:#4F7EB3;
}
.btn-outline[data-v-ed9ccad0]:hover{ background:#4F7EB3; color:#fff
}
.btn-outline-disabled[data-v-ed9ccad0]{ opacity:.55; cursor:not-allowed
}

/* Loaders */
.saver[data-v-ed9ccad0]{
  width:22px; 
  padding:2px; 
  aspect-ratio:1; 
  border-radius:50%;
  background:#B2C149;
  --_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); 
  mask:var(--_m);
  -webkit-mask-composite:source-out; 
  mask-composite:subtract;
  animation:spinner-ed9ccad0 1s linear infinite;
}
@keyframes spinner-ed9ccad0{
to{ transform:rotate(1turn)
}
}

/* Geometry preview at the top of the modal body — shows the camera snapshot
   with the zone's tripwires overlaid and numbered, so the user can see which
   physical line each "Tripwire N" direction block configures. */
.zone-preview[data-v-ed9ccad0]{
  margin: 0 0 16px 0;
  padding: 12px;
  border:1px solid #eef3f7;
  border-radius:12px;
  background:#fafcfe;
}
.zone-preview-frame[data-v-ed9ccad0]{
  position:relative;
  display:inline-block;
  max-width:100%;
  line-height:0;     /* removes the gap below the <img> */
}
.zone-preview-img[data-v-ed9ccad0]{
  display:block;
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  border-radius:8px;
}
.zone-preview-canvas[data-v-ed9ccad0]{
  position:absolute;
  inset:0;
  pointer-events:none;
  width:100%;
  height:100%;
}
.zone-preview-caption[data-v-ed9ccad0]{
  margin: 8px 0 0 0;
  font-size:.8rem;
  color:#7a8a96;
  line-height:1.3;
}

.dz-head[data-v-20e7e2fd]{ margin-top:10px; margin-bottom:8px; color:#425461
}
.dz-note[data-v-20e7e2fd]{ font-size:.9rem; color:#C21500; margin-top:0
}
.draw-banner[data-v-20e7e2fd]{
  display:flex; align-items:center; gap:10px;
  margin: 8px 0;
  padding: 8px 12px;
  border:1px solid #4F7EB3;
  background:#f8fbff;
  color:#425461;
  border-radius:10px;
  font-size:.9rem;
}
.draw-banner i[data-v-20e7e2fd]{ color:#4F7EB3
}
.draw-banner-actions[data-v-20e7e2fd]{ margin-left:auto; display:flex; gap:6px
}
.frame-container[data-v-20e7e2fd]{ max-width:100%; overflow:hidden; padding-top:10px
}
.frame-content[data-v-20e7e2fd]{ position:relative; max-width:100%; max-height:1000px; overflow:auto; cursor:default
}
.frame-content.active[data-v-20e7e2fd]{ cursor:crosshair
}
.frame-content img[data-v-20e7e2fd]{ width:auto; height:auto; max-width:none; max-height:none
}
.frame-content.disabled[data-v-20e7e2fd] { cursor: not-allowed;
}
.canvas[data-v-20e7e2fd]{ position:absolute; top:0; left:0; pointer-events:none
}
.center[data-v-20e7e2fd]{ display:flex; align-items:center; justify-content:center; padding:40px 0
}
.fallback[data-v-20e7e2fd]{ padding:40px 0; text-align:center; color:#999
}
.dot[data-v-20e7e2fd]{
  position:absolute; width:6px; height:6px; background:#e63946; border-radius:50%;
  transform:translate(-50%, -50%);
}
.dot.tripwire-dot[data-v-20e7e2fd]{
  width:10px; height:10px; background:#4F7EB3;
  box-shadow:0 0 0 2px #fff;
}

/* Grid */
.zone-grid[data-v-20e7e2fd]{
  display:grid; grid-template-columns: 1.4fr 1.5fr 1.6fr 1.4fr; gap:0; margin-top:18px;
  border:1px solid #eef3f7; border-radius:12px; overflow:hidden;
}
.zone-row[data-v-20e7e2fd]{ display:contents
}
.zone-row[data-v-20e7e2fd] > *{ padding:10px 12px; border-bottom:1px solid #eef3f7; background:#fff
}
.zone-row[data-v-20e7e2fd]:last-child > *{ border-bottom:none
}
.header[data-v-20e7e2fd] > *{
  background:#f8fbff; color:#4F7EB3; font-weight:800; border-bottom:1px solid #e6edf3;
}

/* Inputs + actions */
.input[data-v-20e7e2fd]{
  width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:8px 10px;
  background:#fff; color:#2b3a44; outline:none;
}
.input[data-v-20e7e2fd]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.actions[data-v-20e7e2fd]{ display:flex; gap:8px; align-items:center; flex-wrap:wrap
}
.icon-btn[data-v-20e7e2fd]{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e6edf3; background:#fff; color:#6C9046;
  width:34px; height:34px; border-radius:8px; cursor:pointer;
}
.icon-btn[data-v-20e7e2fd]:hover{ background:#f4f9ff
}
.icon-btn.danger[data-v-20e7e2fd]{ color:#C21500
}
.icon-btn.ok[data-v-20e7e2fd]{ color:#fff; background:#6C9046; border-color:#6C9046
}
.icon-btn.ok[data-v-20e7e2fd]:disabled{ background:#dde6dd; color:#fff; border-color:#dde6dd
}
.icon-btn[data-v-20e7e2fd]:disabled{ opacity:.45; cursor:not-allowed
}

/* Geometry chips */
.geometry-cell[data-v-20e7e2fd]{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.geom-chip[data-v-20e7e2fd]{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#f4f7fb; border:1px solid #e6edf3; color:#7a8a96;
  cursor:pointer; font-size:.85rem; font-weight:600;
}
.geom-chip[data-v-20e7e2fd]:hover:not(:disabled){ background:#eaf1f8; color:#4F7EB3
}
.geom-chip.is-set[data-v-20e7e2fd]{ background:#eaf3e2; color:#3f6b16; border-color:#cfe1bb
}
.geom-chip.is-set[data-v-20e7e2fd]:hover{ background:#dfeed1
}
.geom-chip.is-active[data-v-20e7e2fd]{
  background:#fff7e0; color:#a96a00; border-color:#f3d98a;
  box-shadow:0 0 0 3px rgba(243,217,138,.35);
}
.geom-chip[data-v-20e7e2fd]:disabled{ opacity:.5; cursor:not-allowed
}
.geom-chip .chip-label[data-v-20e7e2fd]{ font-weight:700
}
.geom-chip .status-icon[data-v-20e7e2fd]{ color:#3f6b16
}
.geom-chip.readonly[data-v-20e7e2fd]{ cursor:default; opacity:.85
}
.geom-chip.readonly[data-v-20e7e2fd]:hover{ background:#f4f7fb; color:#7a8a96
}
.geom-chip.readonly.is-set[data-v-20e7e2fd]:hover{ background:#eaf3e2; color:#3f6b16
}

/* "+ Tripwire" / "+ Add tripwire" chip — visually distinct from the set/active chips */
.geom-chip.add-chip[data-v-20e7e2fd]{
  background:#ffffff; color:#4F7EB3; border-style:dashed;
}
.geom-chip.add-chip[data-v-20e7e2fd]:hover:not(:disabled){
  background:#eaf1f8; color:#4F7EB3;
}

/* Take new picture */
.btn-outline[data-v-20e7e2fd]{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  border:1px solid #4F7EB3; color:#4F7EB3; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn-outline[data-v-20e7e2fd]:hover{ background:#4F7EB3; color:#fff
}
.btn-outline[data-v-20e7e2fd]:disabled,
.btn-outline[disabled][data-v-20e7e2fd] {
  opacity: .55;
  cursor: not-allowed;
  background: #f0f4f8;
  color: #9aa8b4;
  border-color: #d3dbe3;
}
.btn-outline[data-v-20e7e2fd]:disabled:hover,
.btn-outline[disabled][data-v-20e7e2fd]:hover {
  background: #f0f4f8;
  color: #9aa8b4;
}
.mt[data-v-20e7e2fd]{ margin-top:16px
}

/* Modal */
.modal-overlay[data-v-20e7e2fd]{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:2000; overflow:hidden;
}

/* Loader */
.loader[data-v-20e7e2fd]{
  width:60px; padding:8px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-20e7e2fd 1s linear infinite;
}
@keyframes spinner-20e7e2fd{
to{ transform:rotate(1turn)
}
}

/* ====== Header ====== */
.section-head[data-v-03f44d71]{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
  border-left:6px solid var(--accent,#4F7EB3);
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:12px 14px; margin:10px 0 14px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.title[data-v-03f44d71]{ margin:0; font-weight:800; color:#425461; display:flex; align-items:center; gap:8px
}
.icon-inline[data-v-03f44d71]{
  border:1px solid #e6edf3; background:#fff; color:#4F7EB3;
  width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-inline[data-v-03f44d71]:hover{ background:#f4f9ff
}
.head-left[data-v-03f44d71]{ display:flex; flex-direction:column; gap:10px
}
.head-actions[data-v-03f44d71]{ display:flex; gap:10px; flex-wrap:wrap
}
.name-edit[data-v-03f44d71]{ max-width:520px
}
.input[data-v-03f44d71]{
  width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:10px 12px; background:#fff; color:#2b3a44; outline:none;
}
.input.center[data-v-03f44d71]{ text-align:center
}
.input[data-v-03f44d71]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.banner-warn[data-v-03f44d71]{
  display:inline-block; background:#fff7e6; color:#b66a00; border:1px solid #ffe4b0;
  padding:8px 10px; border-radius:10px; font-size:.9rem; font-weight:600;
}

/* ====== Card ====== */
.kpi-accent[data-v-03f44d71]{ position:relative; border:none; box-shadow:0 4px 18px rgba(13,38,76,.06); border-radius:14px
}
.kpi-accent[data-v-03f44d71]::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent,#4F7EB3);
  border-radius:14px 0 0 14px;
}
.form-head[data-v-03f44d71]{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eef3f7;
}
.form-title[data-v-03f44d71]{ margin:0; color:#4F7EB3; font-weight:800
}
.card-body[data-v-03f44d71]{ padding:14px 16px
}

/* camera stream read-only block */
.read-block[data-v-03f44d71]{ margin-bottom:12px
}
.read-label[data-v-03f44d71]{ display:block; font-weight:700; color:#425461; margin-bottom:4px
}
.read-value[data-v-03f44d71]{ margin:0; background:#f8fbff; border:1px dashed #e6edf3; border-radius:10px; padding:10px 12px
}
.muted[data-v-03f44d71]{ color:#6b7a86; word-break:break-all
}

/* DZ area */
.dz-wrap[data-v-03f44d71]{ margin-top:12px
}

/* footer */
.form-actions[data-v-03f44d71]{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #eef3f7;
}
.saving[data-v-03f44d71]{ margin-right:auto; display:flex; align-items:center; gap:8px; color:#6b7a86
}

/* ====== Buttons ====== */
.btn-outline[data-v-03f44d71]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn-outline[data-v-03f44d71]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-03f44d71]{
  display:inline-flex; align-items:center; gap:8px; border:0; color:#fff;
  padding:8px 14px; border-radius:10px; cursor:pointer;
}
.btn-solid.ok[data-v-03f44d71]{ background:#6C9046
}
.btn-solid.danger[data-v-03f44d71]{ background:#C21500
}
.btn-solid[data-v-03f44d71]:disabled{ opacity:.55; cursor:not-allowed
}

/* ====== Loaders ====== */
.loader-wrap[data-v-03f44d71]{ display:flex; justify-content:center; padding:16px 0
}
.loader[data-v-03f44d71]{
  width:80px; padding:8px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-03f44d71 1s linear infinite;
}
.saver[data-v-03f44d71]{
  width:22px; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-03f44d71 1s linear infinite;
}
@keyframes spinner-03f44d71{
to{ transform:rotate(1turn)
}
}

.chart-wrapper[data-v-eb38730d] {
  width: 100%;
  height: 460px; /* or whatever fixed height you want */
}
.chart[data-v-eb38730d] {
  width: 100%;
  height: 100%;
}

.chart[data-v-ea0f6d40]{ width:100%; height:100%;
}

.chart[data-v-924a3ad3]{ width:100%; height:100%;
}

.chart-container[data-v-2849076f] {
  width: 100%;
  height: 100%;
}

.chart-container[data-v-1a34e799] {
  width: 100%;
  height: 100%;
}

.chart-container[data-v-9aad26df] {
  width: 100%;
  height: 100%;
}

.chart-container[data-v-ae83f131] {
  width: 100%;
  height: 100%;
}

.segmentation-widget[data-v-62d45e8b] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ring-chart-container[data-v-62d45e8b] {
  position: relative;
  width: 200px;
  height: 200px;
}
.ring-chart[data-v-62d45e8b] {
  width: 100%;
  height: 100%;
}
.center-text[data-v-62d45e8b] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.center-text p[data-v-62d45e8b] {
  margin: 2px 0;
}
.center-text .total[data-v-62d45e8b] {
  font-size: 24px;
  font-weight: bold;
}
.center-text .label[data-v-62d45e8b] {
  color: #888;
}
.center-text .avg-duration[data-v-62d45e8b] {
  font-size: 12px;
  margin-top: 4px;
}
.segments[data-v-62d45e8b] {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 20px;
  flex-wrap: wrap;
}
.segment[data-v-62d45e8b] {
  text-align: center;
  margin: 0 10px;
}
.segment .icon[data-v-62d45e8b] {
  font-size: 24px;
  margin-bottom: 4px;
}
.segment .value[data-v-62d45e8b] {
  font-size: 14px;
  color: #555;
}

.usage-widget[data-v-fd2981ae] {
  position: relative;
  width: 100%;
}
.gauge-chart[data-v-fd2981ae] {
  width: 100%;
  height: 460px;
}
.center-text[data-v-fd2981ae] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.center-text .percentage[data-v-fd2981ae] {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
}
.center-text .label[data-v-fd2981ae] {
  font-size: 12px;
  color: #666;
  margin: 2px 0 0;
}


.bar-chart[data-v-cdef9440] {
  width: 100%;
  height: 200px;
}

/* same wrapping behavior as the Trends widget */
.mini-cards[data-v-692138d8]{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.mini-card[data-v-692138d8]{
  display:flex;
  align-items:flex-start;
  background:#f7fafc;
  border:1px solid #e6edf3;
  border-radius:12px;
  padding:14px;
}
.main-icon[data-v-692138d8]{
  font-size:1.8rem;
  margin-right:.6rem;
  flex-shrink:0;
}
.mini-details[data-v-692138d8]{ flex:1
}
h6[data-v-692138d8]{
  margin:0 0 .35rem;
  font-size:1rem;
  font-weight:700;
}
.badge[data-v-692138d8]{
  display:inline-block;
  color:#fff;
  background:#4F7EB3;     /* overridden by inline style on Trends, here we keep neutral */
  border-radius:12px;
  padding:.18rem .5rem;
  font-size:.85rem;
  margin-bottom:.35rem;
}
.explanation[data-v-692138d8]{
  margin:0;
  font-size:.9rem;
  color:#6b7a86;
  line-height:1.3;
}

.trends-widget[data-v-63fe7cd1] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.trend-block[data-v-63fe7cd1]{
  display:flex; align-items:flex-start; gap:.6rem;
  background:#f9fbfd;
  border:1px solid #e6edf3;
  border-radius:10px;
  padding:.8rem .9rem;
}
.main-icon[data-v-63fe7cd1]{ font-size:1.6rem; margin-top:.1rem; flex-shrink:0;
}
.trend-details[data-v-63fe7cd1]{ flex:1; min-width:0;
}
.trend-details h6[data-v-63fe7cd1]{ margin:0 0 .35rem; font-size:1rem; font-weight:600; color:#425461;
}
.badge[data-v-63fe7cd1]{ display:inline-block; color:#fff; border-radius:999px; padding:.15rem .5rem; font-size:.8rem; line-height:1; margin-bottom:.35rem;
}
.explanation[data-v-63fe7cd1]{ margin:0; font-size:.88rem; color:#6b7a86; overflow-wrap:anywhere;
}

.highlight-block[data-v-d34c5f12] {
  align-items: center;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 0.8rem;
}
.title-badge[data-v-d34c5f12] {
    color: white;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
}
.table-wrapper[data-v-d34c5f12] {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
}
table[data-v-d34c5f12] {
    width: 100%; /* Ensure the table fills its container */
    border-collapse: collapse; /* Use 'separate' to allow border-radius to work */
    border-spacing: 0; /* Optional: Adjust spacing between cells */
    border-radius: 0.375rem; /* Adjust the radius to match the card's corners */
    overflow: hidden; /* Prevent content from overflowing the rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.175); /* Optional: Adds a border around the table */
}
th[data-v-d34c5f12], td[data-v-d34c5f12] {
    border: 1px solid rgba(0, 0, 0, 0.175); /* Ensures consistent borders */
    padding: 8px;
    text-align: center;
    font-size: small;
    background-color: white;
}
th[data-v-d34c5f12] {
    padding: 11px; /* Adds space around the content */
    text-align: center; /* Aligns text to the center */
    font-size: small; /* Adjusts font size */
    background-color: rgba(33, 37, 41, 0.03); /* Sets background color */
}
th[data-v-d34c5f12]:first-child {
    border-top-left-radius: 0.375rem; /* Rounded corner for the top-left */
}
th[data-v-d34c5f12]:last-child {
    border-top-right-radius: 0.375rem; /* Rounded corner for the top-right */
}
tr:last-child td[data-v-d34c5f12]:first-child {
    border-bottom-left-radius: 0.375rem; /* Rounded corner for the bottom-left */
}
tr:last-child td[data-v-d34c5f12]:last-child {
    border-bottom-right-radius: 0.375rem; /* Rounded corner for the bottom-right */
}
.visitor-bar-outer[data-v-d34c5f12] {
  position: relative;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
}
.visitor-bar-gradient[data-v-d34c5f12] {
  height: 100%;
  background: linear-gradient(to right, #C21500, #FFA500, #2F9E44);
  -webkit-mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  mask-image: linear-gradient(to right, black var(--bar-fill), transparent var(--bar-fill));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: mask-image 0.3s ease, background 0.3s ease;
}

/* When camera is inactive */
.visitor-bar-gradient.inactive[data-v-d34c5f12] {
  background: #e6e6e6 !important; /* Light gray fill */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.visitor-bar-gradient.zero-fill[data-v-d34c5f12] {
  visibility: hidden;
}
.visitor-bar-label[data-v-d34c5f12] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 20px;
  color: #000;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 500px) {
.table-wrapper th[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12] * {
    font-size: 0.8rem !important;
}
}
@media (max-width: 475px) {
.table-wrapper th[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12] * {
    font-size: 0.7rem !important;
}
}
@media (max-width: 440px) {
.table-wrapper th[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12] * {
    font-size: 0.6rem !important;
}
}
@media (max-width: 410px) {
.table-wrapper th[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12] * {
    font-size: 0.5rem !important;
}
}
@media (max-width: 375px) {
.table-wrapper th[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12],
  .table-wrapper td[data-v-d34c5f12] * {
    font-size: 0.4rem !important;
}
}

.date-picker-container[data-v-00d52ca3] {
    display: flex;
    justify-content: start;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 25px;
    gap: 10px;
    flex-wrap: wrap;
}


/* keep your segmented styles (from our earlier version) */
.granularity-wrap[data-v-911cc6b7]{ font-size:.9rem
}
.segmented[data-v-911cc6b7]{ display:inline-grid; grid-auto-flow:column; border:1px solid #e6edf3; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(13,38,76,.05)
}
.segmented-title[data-v-911cc6b7]{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; padding:0
}
.segmented-input[data-v-911cc6b7]{ position:absolute; opacity:0; pointer-events:none
}
.segmented-btn[data-v-911cc6b7]{ padding:8px 14px; cursor:pointer; color:#425461; background:#fff; border-right:1px solid #e6edf3; font-weight:600; transition:background .15s,color .15s,box-shadow .15s
}
.segmented-btn[data-v-911cc6b7]:last-of-type{ border-right:0
}
.segmented-btn[data-v-911cc6b7]:hover{ background:#f7fbff; color:#4F7EB3
}
.segmented-input:checked + .segmented-btn[data-v-911cc6b7]{ background:#f4f7fb; color:#2b3a44; box-shadow: inset 3px 0 0 0 #B2C149
}
.segmented-input:focus + .segmented-btn[data-v-911cc6b7]{ box-shadow:0 0 0 0.18rem #B2C14944
}
.segmented[disabled] .segmented-btn[data-v-911cc6b7]{ cursor:not-allowed; color:#9aa7b1; background:#f6f7f9
}
.segmented[disabled] .segmented-input:checked + .segmented-btn[data-v-911cc6b7]{ box-shadow: inset 3px 0 0 0 #cfd6da
}

/* 6-col grid so two x 3-span = side-by-side; 6-span = full width */
.row2-grid[data-v-5d85302d] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.row2-item[data-v-5d85302d] { min-width: 0;
}       /* allow charts to shrink nicely */
.row2-span-3[data-v-5d85302d] { grid-column: span 3;
}
.row2-span-6[data-v-5d85302d] { grid-column: span 6;
}
.zone-row4[data-v-5d85302d] {
  /* ChartGrid already sets display:grid; we only override columns/gap */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Small note under header */
.same-id-note[data-v-5d85302d]{
  color:#C24500; font-size:.9rem; padding-left:.5rem; margin:.4rem 0 .2rem;
}

/* Inline toolbar area atop a panel (for the granularity radios) */
.grid-panel-toolbar[data-v-5d85302d]{
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

/* Tripwire-only zone layout — 6-column grid so each row can split independently.

   Daily granularity:
     Row 1: Crossings (4/6 = 2/3) | Top Highlights (2/6 = 1/3)
     Row 2: Heatmap   (3/6 = 1/2) | Trends + Avg Comparison stacked (3/6 = 1/2)

   Hourly granularity (Crossings line gets the full width):
     Row 1: Crossings (full)
     Row 2: Highlights (3/6) | Heatmap (3/6)
     Row 3: Trends + Avg Comparison side-by-side (full row, flex row)

   align-items: start lets the heatmap be a bit taller than the right-column
   stack without stretching the row (no whitespace forced into the stack). */
.tripwire-layout-grid[data-v-5d85302d]{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "crossings crossings crossings crossings highlights   highlights"
    "heatmap   heatmap   heatmap   trends-stk trends-stk  trends-stk";
  gap: 16px;
  align-items: start;
}
.tw-area-crossings[data-v-5d85302d]    { grid-area: crossings;
}
.tw-area-highlights[data-v-5d85302d]   { grid-area: highlights;
}
.tw-area-heatmap[data-v-5d85302d]      { grid-area: heatmap;
}
.tw-area-trends-stack[data-v-5d85302d] {
  grid-area: trends-stk;
  display: flex; flex-direction: column; gap: 16px;
}

/* Force the Top Highlights subcards into a single stacked column when used
   inside the narrow tripwire-mode column (the component's own auto-fit grid
   would otherwise re-multi-column at wider screens). */
.tw-area-highlights[data-v-5d85302d] .mini-cards{
  grid-template-columns: 1fr;
}
.tripwire-layout-grid.tripwire-hourly[data-v-5d85302d]{
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "crossings  crossings  crossings  crossings  crossings  crossings"
    "highlights highlights highlights heatmap    heatmap    heatmap"
    "trends-stk trends-stk trends-stk trends-stk trends-stk trends-stk";
}
/* Hourly: stack flips to a row so trends and avg sit side-by-side. */
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-5d85302d]{
  flex-direction: row;
}
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-5d85302d] > *{
  flex: 1;
}
@media (max-width: 1024px){
.tripwire-layout-grid[data-v-5d85302d],
  .tripwire-layout-grid.tripwire-hourly[data-v-5d85302d]{
    grid-template-columns: 1fr;
    grid-template-areas:
      "crossings"
      "highlights"
      "heatmap"
      "trends-stk";
}
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-5d85302d]{
    flex-direction: column;
}
}

/* Compact override — tighter inner padding for the tripwire mode panels so
   the dense grid doesn't waste pixels on chrome. */
.tw-compact[data-v-5d85302d] .panel-body{
  padding: 8px 10px;
}
.tw-compact[data-v-5d85302d] .panel-head{
  padding: 6px 10px;
}

/* "% of Total" stat display inside its compact panel */
.pct-of-total[data-v-5d85302d]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
}
.pct-of-total .pct-value[data-v-5d85302d]{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.pct-of-total .pct-context[data-v-5d85302d]{
  font-size: 0.85rem;
  color: #6b7a86;
  text-align: center;
}

/* Estimated Avg Dwell (Mode C — Little's Law) */
.dwell-estimate[data-v-5d85302d]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
  text-align: center;
}
.dwell-value-row[data-v-5d85302d]{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.dwell-value[data-v-5d85302d]{
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dwell-conf[data-v-5d85302d]{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: help;
}
/* The backend only emits 'high' or 'medium' — anything weaker is gated as
   "no estimate" and the panel falls through to its empty-state copy. */
.dwell-conf.conf-high[data-v-5d85302d]{   color: #2f6f3a; background: #f4faf5; border: 1px solid #bfe2c7;
}
.dwell-conf.conf-medium[data-v-5d85302d]{ color: #9a6b00; background: #fff8e6; border: 1px solid #ffd97a;
}
.dwell-context[data-v-5d85302d]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: #6b7a86;
  cursor: help;
}
.dwell-context i[data-v-5d85302d]{ opacity: .7;
}
.hourly-chip-row[data-v-5d85302d]{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.hourly-chip[data-v-5d85302d]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f5f7;
  color: #4a5764;
  border: 1px solid #e3e8ed;
}
.hourly-chip strong[data-v-5d85302d]{ color: #2a3540; font-weight: 600;
}
.hourly-chip-peak[data-v-5d85302d]{
  background: #fff1de;
  border-color: #ffce80;
  color: #8a5400;
}
.hourly-chip-peak strong[data-v-5d85302d]{ color: #6b3f00;
}
.grid-panel-toolbar.tripwire-toolbar[data-v-5d85302d]{
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.tripwire-totals[data-v-5d85302d]{
  display: flex; gap: 10px; flex-wrap: wrap;
}
.tw-pill[data-v-5d85302d]{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .85rem; color: #2b3a44;
  border: 1px solid #e6edf3; background: #f9fbfd;
}
.tw-pill i[data-v-5d85302d]{ opacity: .8
}
.tw-pill.tw-in[data-v-5d85302d]{ color: #4F7EB3
}
.tw-pill.tw-out[data-v-5d85302d]{ color: #6C9046
}
.tw-pill b[data-v-5d85302d]{ color: #2b3a44; font-weight: 600
}

/* Only affect this Trends panel */
.panel-trends[data-v-5d85302d] .panel-body{
  height: auto;           /* override var(--panel-h) result */
  min-height: 120px;      /* keeps a nice base height at wide screens */
}
.panel-top-visitors[data-v-5d85302d] .panel-body {
  height: auto;            /* override fixed height */
  min-height: 120px;       /* keep a tidy base height */
}

/* Let content define its own height when parent is height:auto */
.panel-trends[data-v-5d85302d] .panel-slot{
  height: auto;
}
.chart-vert-stack[data-v-5d85302d]{
  display: grid;
  grid-auto-rows: minmax(0, auto);
  gap: 12px;         /* match ChartGrid gap */
}

/* Empty state text for panels where strategy is insufficient */
.empty-fallback[data-v-5d85302d]{
  margin-top: 140px; text-align: center; color: #425461; font-style: italic;
}

/* Geometry chip in the section header */
.zone-geom-chip[data-v-5d85302d]{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:#f4f7fb; border:1px solid #e6edf3; color:#425461;
  font-size:.82rem; font-weight:600;
}
.zone-geom-chip i[data-v-5d85302d]{ color:#4F7EB3
}
.zone-geom-text[data-v-5d85302d]{ font-weight:700
}

/* Wrapper */
/* Width is intentionally not set to 100% so the explicit left/right margins
   on the wrapping div actually inset from the page edges (matching the
   store-level Data tab layout). */
.dashboard-wrapper[data-v-5d85302d] { overflow-x:hidden; padding-bottom: 40px;}

/* Loader overlay (keep) */
.loader-overlay[data-v-5d85302d] {
  position: absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background-color: rgba(255,255,255,0.8); z-index: 1000;
}
.loader[data-v-5d85302d] { width:160px; margin-top:0; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation: spinner-5d85302d 1s infinite linear;
}
@keyframes spinner-5d85302d {
to { transform: rotate(1turn)
}
}

/* Modal (keep) */
.modal-overlay[data-v-5d85302d] {
  position: fixed; inset:0; background: rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-window[data-v-5d85302d] {
  background:white; border-radius:8px; min-width:400px; max-width:90vw; max-height:90vh;
  overflow:auto; padding:1rem; position:relative; box-shadow:0 4px 12px rgba(0,0,0,0.3);
  margin-left:300px; margin-right:20px;
}

/* 3-up grid for the first row */
.chart-grid--3[data-v-5d85302d] { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1520px){
.chart-grid--3[data-v-5d85302d] { grid-template-columns: repeat(2, minmax(0,1fr));
}
.row2-grid[data-v-5d85302d] { grid-template-columns: 1fr;
}
.row2-span-3[data-v-5d85302d], .row2-span-6[data-v-5d85302d] { grid-column: 1 / -1;
}
.zone-row4[data-v-5d85302d] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 1250px){
.chart-grid--3[data-v-5d85302d] { grid-template-columns: 1fr;
}
}

/* 2-up inner grid for the split “per day” panels (collapses nicely) */
.chart-grid--2[data-v-5d85302d] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1250px){
.chart-grid--2[data-v-5d85302d] { grid-template-columns: 1fr;
}
}


.block-head[data-v-05705610]{ margin:10px 0 8px; color:#425461
}
.grid-inline[data-v-05705610]{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
}
@media (max-width:680px){
.grid-inline[data-v-05705610]{ grid-template-columns:1fr
}
}
.input[data-v-05705610]{
  width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:10px 12px;
  background:#fff; color:#2b3a44; outline:none;
}
.input[data-v-05705610]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.btn-solid[data-v-05705610]{
  display:inline-flex; align-items:center; gap:8px; border:0; color:#fff;
  padding:10px 14px; border-radius:10px; cursor:pointer;
}
.btn-solid.primary[data-v-05705610]{ background:#4F7EB3
}
.btn-solid.primary[data-v-05705610]:hover{ filter:brightness(.96)
}
.loading-wrap[data-v-05705610]{ padding:16px 0
}
.loader[data-v-05705610]{
  width:42px; padding:6px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-05705610 1s linear infinite;
}
@keyframes spinner-05705610{
to{ transform:rotate(1turn)
}
}
.frame-container[data-v-05705610]{ padding-top:10px
}

/* --- Section header --- */
.section-head[data-v-62a2d68e]{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-left:6px solid var(--accent,#4F7EB3);
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:12px 14px; margin:10px 0 14px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.title[data-v-62a2d68e]{ margin:0; font-weight:800; color:#425461
}
.head-actions[data-v-62a2d68e]{ display:flex; gap:10px; flex-wrap:wrap
}

/* --- Buttons --- */
.btn-outline[data-v-62a2d68e]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn-outline[data-v-62a2d68e]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-62a2d68e]{
  display:inline-flex; align-items:center; gap:8px;
  border:0; color:#fff; padding:8px 14px; border-radius:10px; cursor:pointer;
}
.btn-solid.ok[data-v-62a2d68e]{ background:#6C9046
}
.btn-solid.ok.is-disabled[data-v-62a2d68e],
.btn-solid.ok[data-v-62a2d68e]:disabled{ opacity:.6; cursor:not-allowed
}

/* --- Card + form --- */
.form-card[data-v-62a2d68e]{ border:none; box-shadow:0 4px 18px rgba(13,38,76,.06); border-radius:14px
}
.kpi-accent[data-v-62a2d68e]{ position:relative
}
.kpi-accent[data-v-62a2d68e]::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent,#4F7EB3);
  border-radius:14px 0 0 14px;
}
.form-head[data-v-62a2d68e]{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px;
  border-bottom:1px solid #eef3f7;
}
.form-title[data-v-62a2d68e]{ margin:0; color:#4F7EB3; font-weight:800
}
.card-body[data-v-62a2d68e]{ padding:14px 16px
}
.form-wrap[data-v-62a2d68e]{ max-width:860px
}
.form-row[data-v-62a2d68e]{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px
}
.form-label[data-v-62a2d68e]{ color:#425461; font-weight:700
}
.input[data-v-62a2d68e]{
  width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:10px 12px;
  background:#fff; color:#2b3a44; outline:none;
}
.input[data-v-62a2d68e]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.dz-wrap[data-v-62a2d68e]{ margin-top:16px
}

/* footer */
.form-actions[data-v-62a2d68e]{
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #eef3f7;
}
.saving[data-v-62a2d68e]{ display:flex; align-items:center; gap:8px; margin-right:auto; color:#6b7a86
}

/* loader */
.saver[data-v-62a2d68e]{
  width:22px; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-62a2d68e 1s linear infinite;
}
@keyframes spinner-62a2d68e{
to{ transform:rotate(1turn)
}
}

.live-stream-container[data-v-dc26a242]{ display:flex; flex-direction:column;
}
.stream-container[data-v-dc26a242]{ width:100%; display:flex; justify-content:space-between;
}
.stream-item[data-v-dc26a242]{ width:100%; position:relative;
}

/* --- Buttons (unchanged brand colors) --- */
.btn-primary-start[data-v-dc26a242]{ background-color:#6C9046 !important; border:none !important;
}
.btn-primary-start[data-v-dc26a242]:disabled{ background:#a9a9a9 !important; cursor:not-allowed !important; border:none !important;
}
.btn-primary[data-v-dc26a242]{ background-color:#4F7EB3 !important; border:none !important;
}
.btn-primary[data-v-dc26a242]:hover{ background-color:#B2C149 !important;
}

/* --- Stream “card” --- */
.stream-frame[data-v-dc26a242]{
  /* card visuals */
  background:#0f1113;               /* dark backdrop behind the video */
  border:1px solid #e6edf3;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(13,38,76,.08);
  padding:8px;

  /* layout */
  width:100%;
}

/* keep a stable video window height; the inner content stays responsive */
.frame-content[data-v-dc26a242]{
  position:relative;
  width:100%;
  /* 16:9 window; grows/shrinks responsively */
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:10px;
  background:#0b0f14;               /* fallback if no frame yet */
}

/* video image scales to fit without distortion */
.frame-content img[data-v-dc26a242]{
  width:100%;
  height:100%;
  object-fit:contain;                /* show full frame, no crop */
  display:block;
}

/* canvas follows the visible box exactly */
#zoneCanvas[data-v-dc26a242]{
  position:absolute;
  inset:0;                          /* top/right/bottom/left:0 */
  pointer-events:none;
  width:100%;
  height:100%;
}

/* centered overlay loader */
.loading-overlay[data-v-dc26a242]{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(0deg, rgba(15,17,19,0.45), rgba(15,17,19,0.45));
  z-index:2;
}

/* brand loader */
.loader[data-v-dc26a242]{
  width:48px;
  padding:8px;
  aspect-ratio:1;
  border-radius:50%;
  background:#B2C149;
  --_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-dc26a242 1s infinite linear;
}
@keyframes spinner-dc26a242{
to{ transform:rotate(1turn)
}
}


/* -------------------------------------------------------------------
   Sections — each row groups one metric type for all zones, separated
   by a labeled header and a subtle row tint so the eye can scan one
   metric across zones in a single horizontal sweep.
   ------------------------------------------------------------------- */
.kpi-section[data-v-2f6c42d3]{
  border-radius:14px;
  padding:12px 14px 14px;
  margin-bottom:18px;
}
.kpi-section.tone-visits[data-v-2f6c42d3]     { background: rgba(79, 126, 179, .045)
}
.kpi-section.tone-crossings[data-v-2f6c42d3]  { background: rgba(178, 193, 73, .055)
}
.kpi-section.tone-dwell[data-v-2f6c42d3]      { background: rgba(127, 89, 178, .045)
}
.section-head[data-v-2f6c42d3]{
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 10px 4px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:#52606b; text-transform:uppercase;
}
.section-icon[data-v-2f6c42d3]{ font-size:.95rem; color:#7a8893
}

/* -------------------------------------------------------------------
   Tighter card grid — Option B tunes the minmax floor down so 4–5
   compact cards fit per row on a typical laptop instead of 2–3.
   ------------------------------------------------------------------- */
.kpi-grid[data-v-2f6c42d3]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.kpi-card[data-v-2f6c42d3]{
  background:#fff;
  border:none;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(13,38,76,.05);
  padding:10px 12px 10px 14px;
  display:flex; flex-direction:column;
  gap:6px;
  min-height:88px;
  position:relative;
}
.kpi-card.kpi-accent[data-v-2f6c42d3]::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background: var(--accent);
  border-radius:10px 0 0 10px;
  opacity:.95;
}
.kpi-head[data-v-2f6c42d3]{
  display:flex; flex-direction:column; gap:1px;
  padding-bottom:4px;
  border-bottom:1px solid #eef2f6;
}
.kpi-title[data-v-2f6c42d3]{
  margin:0;
  font-size:.88rem; font-weight:500; line-height:1.15;
  color:#2b3a44;
  display:flex; align-items:center; gap:.35rem;
}
.kpi-glyph[data-v-2f6c42d3]{ font-size:.78rem; color:#6b7a86; opacity:.8
}
.kpi-sub[data-v-2f6c42d3]{ font-size:.68rem; color:#81909a; font-weight:600; letter-spacing:.02em
}

/* Single-number value */
.kpi-value[data-v-2f6c42d3]{ display:flex; align-items:center; min-height:28px; padding-top:2px
}
.kpi-number[data-v-2f6c42d3]{ font-size: clamp(16px, 1.9vw, 22px); font-weight:700; color:#2b3a44
}

/* Directional in/out duo */
.kpi-duo[data-v-2f6c42d3]{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:2px
}
.kpi-pill[data-v-2f6c42d3]{
  border:1px solid #e6edf3; border-radius:8px; padding:5px 7px;
  background:#f9fbfd;
  display:flex; flex-direction:column; gap:1px;
  min-width:0;
}
.kpi-pill .label[data-v-2f6c42d3]{ font-size:.68rem; color:#6b7a86; font-weight:500
}
.kpi-pill .val[data-v-2f6c42d3]{ font-size: clamp(14px, 1.6vw, 18px); font-weight:600; color:#2b3a44
}
.no-zones-container[data-v-2f6c42d3]{
  display:flex; justify-content:center; align-items:center; text-align:center;
  width:100%; color:#c1c9cf; margin:16px 0;
}
.loader[data-v-2f6c42d3]{
  width:18px; height:18px; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-2f6c42d3 1s linear infinite;
}
.loader.tiny[data-v-2f6c42d3]{ width:16px; height:16px
}
@keyframes spinner-2f6c42d3{
to{ transform:rotate(1turn)
}
}
@media (max-width: 600px){
.kpi-grid[data-v-2f6c42d3]{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
}
}

/* Active tab with red background and white text */
.nav-tabs[data-v-2480fb8a] {
  --bs-nav-tabs-link-active-color: #ffffff !important;
  --bs-nav-tabs-link-active-bg: #4F7EB3 !important;
  --bs-nav-tabs-border-color: #000000 !important;
  --bs-nav-tabs-link-hover-border-color: #000000 !important;
}
.nav[data-v-2480fb8a] {
  --bs-nav-tabs-link-active-border-color: #000000 !important;
  --bs-nav-link-hover-color: #4F7EB3 !important;
  --bs-nav-link-color: #425461 !important;
}
.card-title[data-v-2480fb8a]{ color:#4F7EB3 !important
}

/* --- Section Head --- */
.section-head[data-v-2480fb8a]{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-left:4px solid var(--accent,#4F7EB3);
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:10px 12px; margin:6px 0 12px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.section-head .title[data-v-2480fb8a]{ margin:0; font-weight:700; color:#425461
}
.head-left[data-v-2480fb8a]{ display:flex; flex-direction:column; gap:8px
}
.head-actions[data-v-2480fb8a]{ display:flex; align-items:center; gap:8px; flex-wrap:wrap
}

/* Chips */
.chip-row[data-v-2480fb8a]{ display:flex; gap:8px; flex-wrap:wrap
}
.chip[data-v-2480fb8a]{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:4px 10px; font-size:.78rem;
  border:1px solid #e6edf3; color:#4F7EB3; background:#f7fbff;
}
.chip-ok[data-v-2480fb8a]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df
}
.chip-warn[data-v-2480fb8a]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf
}
.chip-muted[data-v-2480fb8a]{ color:#81909a; background:#f3f5f7
}

/* Buttons */
.btn-ghost[data-v-2480fb8a]{
  background:#f7fbff; color:#4F7EB3; border:1px solid #e6edf3;
  border-radius:8px; padding:6px 12px; cursor:pointer;
}
.btn-ghost[data-v-2480fb8a]:hover{ background:#eef6ff
}
.btn-outline[data-v-2480fb8a]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; padding:6px 12px;
  border-radius:8px; text-decoration:none;
}
.btn-outline[data-v-2480fb8a]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-2480fb8a]{
  border:0; border-radius:8px; padding:8px 14px; color:#fff; cursor:pointer;
}
.btn-solid.ok[data-v-2480fb8a]{ background:#6C9046
}
.btn-solid.ok[data-v-2480fb8a]:disabled{ background:#95b376
}
.btn-solid.danger[data-v-2480fb8a]{ background:#C21500
}
.btn-solid.danger[data-v-2480fb8a]:disabled{ background:#de8f85
}

/* Live stream */
.live-stream-wrapper[data-v-2480fb8a]{ width:100%
}
.live-stream-frame[data-v-2480fb8a]{
  margin-bottom:12px; border:1px solid #e6edf3; border-radius:12px;
  background:#fafafa; padding:8px;
}

/* Sticky controls panel */
.panelish[data-v-2480fb8a]{
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:10px 12px; box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.sticky-section[data-v-2480fb8a]{
  position:sticky; top:0; z-index:5; margin-bottom:14px;
  background:#fff;
}
.top-row[data-v-2480fb8a]{ display:flex; flex-wrap:wrap; gap:16px; align-items:center
}
.form-check-label[data-v-2480fb8a],.form-check-input[data-v-2480fb8a]{ margin:0; display:flex; align-items:center
}
.data-mode-switch[data-v-2480fb8a]{ font-size:14px
}
.form-check-input[data-v-2480fb8a]{ margin-right:6px
}

/* ========== KPI Grid & Card (shared) ========== */
.kpi-grid[data-v-2480fb8a]{
  /* one responsive grid for all KPI blocks */
  --kpi-gap: 16px;
  --kpi-min: 220px; /* default pill width */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kpi-min), 1fr));
  gap: var(--kpi-gap);
  align-items: stretch;
}
@media (min-width: 1600px){
.kpi-grid[data-v-2480fb8a]{ --kpi-min: 260px }
}
@media (max-width: 1200px){
.kpi-grid[data-v-2480fb8a]{ --kpi-min: 200px }
}
@media (max-width: 600px) {
.kpi-grid[data-v-2480fb8a]{ --kpi-min: 180px }
}
.kpi-card[data-v-2480fb8a]{
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-height:120px;        /* consistent default height */
}

/* size variants you can mix in if needed */
.kpi-sm[data-v-2480fb8a]{ min-height:100px
}
.kpi-lg[data-v-2480fb8a]{ min-height:120px
}

/* Internal layout */
.kpi-head[data-v-2480fb8a]{ display:flex; align-items:center; gap:.6rem; color:#425461
}
.kpi-icon[data-v-2480fb8a]{ color:var(--accent, #4F7EB3); opacity:.95; font-size:1.05rem
}
.kpi-title[data-v-2480fb8a]{ margin:0; font-size:.95rem; font-weight:500; line-height:1.1
}
.kpi-sub[data-v-2480fb8a]{ margin-left:.35rem; font-size:.72rem; color:#81909a; font-weight:600
}
.kpi-value[data-v-2480fb8a]{ margin-top:.25rem; display:flex; align-items:center
}
.kpi-number[data-v-2480fb8a]{ font-size: clamp(16px, 2.4vw, 22px); font-weight:700; color:#2b3a44
}

/* two-column “combined” values (in/out) */
.kpi-duo[data-v-2480fb8a]{ display:grid; grid-template-columns:1fr 1fr; gap:10px
}
.kpi-pill[data-v-2480fb8a]{
  border:1px solid #e6edf3; border-radius:10px; padding:8px 10px; background:#f9fbfd;
  display:flex; flex-direction:column; gap:2px
}
.kpi-pill .label[data-v-2480fb8a]{ font-size:.75rem; color:#6b7a86; font-weight:400
}
.kpi-pill .val[data-v-2480fb8a]{ font-size: clamp(14px, 1.8vw, 20px); font-weight:500; color:#2b3a44
}

/* Live cards keep a fixed light bg (no gradient) */
.kpi-card.kpi-live[data-v-2480fb8a]{
  background:#f8fbff;
}

/* Remove borders on all KPI cards */
.kpi-card[data-v-2480fb8a]{
  border:none;                 /* was 1px solid #e6edf3 */
  position:relative;           /* needed for the accent spine */
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}

/* Left accent spine (like other KPI cards across app) */
.kpi-accent[data-v-2480fb8a]::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;            /* left edge */
  width:6px;                   /* spine width */
  background: var(--accent);
  border-radius:12px 0 0 12px; /* rounded like your global cards */
  opacity:.95;
}

/* Greyed out state for clarity */
.kpi-card.kpi-live.greyed-out[data-v-2480fb8a]{
  background:#f4f4f4;
}

/* ========== Option B: labeled metric sections ==========
   Each metric type (Live activity, Visits, Crossings, Avg dwell)
   gets its own subtly tinted band with a header so the eye can
   scan one metric across zones in a single horizontal sweep. */
.kpi-section[data-v-2480fb8a]{
  border-radius:14px;
  padding:12px 14px 14px;
  margin-bottom:18px;
}
.kpi-section.tone-live[data-v-2480fb8a]{ background: rgba(108, 144, 70, .055)
}

/* Override the page-level .section-head specifically inside .kpi-section. */
.kpi-section .section-head[data-v-2480fb8a]{
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 10px 4px;
  padding:0; border:none; background:transparent; box-shadow:none;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:#52606b; text-transform:uppercase;
}
.kpi-section .section-icon[data-v-2480fb8a]{ font-size:.95rem; color:#7a8893
}

/* Tighter card grid for the section bands — Option B trades hero
   prominence for density so 4–5 cards fit per row on a laptop. */
.kpi-section .kpi-grid.tight[data-v-2480fb8a]{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.kpi-section .kpi-grid.tight .kpi-card[data-v-2480fb8a]{
  padding:10px 12px 10px 14px;
  min-height:88px;
  gap:6px;
}
.kpi-section .kpi-grid.tight .kpi-card.kpi-accent[data-v-2480fb8a]::before{
  width:4px;
  border-radius:10px 0 0 10px;
}
.kpi-section .kpi-grid.tight .kpi-head[data-v-2480fb8a]{
  flex-direction:column; align-items:flex-start; gap:1px;
  padding-bottom:4px;
  border-bottom:1px solid #eef2f6;
}
.kpi-section .kpi-grid.tight .kpi-title[data-v-2480fb8a]{
  font-size:.88rem; font-weight:500;
}
.kpi-section .kpi-grid.tight .kpi-sub[data-v-2480fb8a]{ margin-left:0
}
.kpi-section .kpi-grid.tight .kpi-value[data-v-2480fb8a]{ min-height:28px
}
.kpi-section .kpi-grid.tight .kpi-number[data-v-2480fb8a]{
  font-size: clamp(16px, 1.9vw, 22px);
}

/* ========== Section/grid glue ========== */
/* Stage holds both grids and lets them share the SAME column size */
.kpi-stage[data-v-2480fb8a]{
  /* change this once and both grids track it */
  --kpi-min: 260px;   /* card min width */
  --kpi-gap: 18px;    /* grid gap */
}

/* Each grid (parent and child) uses the same variables */
.kpi-grid[data-v-2480fb8a]{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min), 1fr));
  gap: var(--kpi-gap);
  align-items: stretch;
  width: 100%;
}

/* full-width items (e.g., sticky filters, live stream row) */
.kpi-span-full[data-v-2480fb8a]{ grid-column: 1 / -1;
}

/* a consistent visual gap between grids  */
.kpi-grid + .kpi-grid[data-v-2480fb8a]{ margin-top: 22px;
}

/* Optional responsive nudge for tighter screens */
@media (max-width: 1200px){
.kpi-stage[data-v-2480fb8a]{ --kpi-min: 220px }
}
@media (max-width: 700px) {
.kpi-stage[data-v-2480fb8a]{ --kpi-min: 180px }
}

/* Clean, consistent sticky filter box as a card */
.sticky-filter[data-v-2480fb8a]{
  position:sticky; top:0; z-index:2; background:#fff;
  border:1px solid #e6edf3; border-radius:12px; box-shadow:0 3px 12px rgba(13,38,76,.06);
  padding:12px 14px;
}

/* Legacy helpers kept (used elsewhere in file) */
.stream-counter-container[data-v-2480fb8a]{ display:flex; flex-direction:column; gap:25px; margin-top:20px; margin-left:15px; box-sizing:border-box
}
/* Counters now renders labeled metric sections internally; stack them
   vertically rather than wrapping side-by-side. */
.cards-container[data-v-2480fb8a]{ display:flex; flex-direction:column; gap:0; flex:1; box-sizing:border-box
}
.flex-break[data-v-2480fb8a]{ flex-basis:100%; height:0
}
.button-row[data-v-2480fb8a]{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 14px
}

/* Collapsible transition */
.roll-enter-active[data-v-2480fb8a], .roll-leave-active[data-v-2480fb8a]{ transition: transform .35s ease, opacity .35s ease
}
.roll-enter[data-v-2480fb8a], .roll-leave-to[data-v-2480fb8a]{ transform:scaleY(0); opacity:0; transform-origin:top
}

/* Small screens */
@media (max-width:768px){
.stream-counter-container[data-v-2480fb8a]{ margin-left:0
}
.kpi-grid[data-v-2480fb8a]{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
}
}


/* ---------- Loader ---------- */
.loader-wrap[data-v-13d21897]{
  position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center;
}
.loader[data-v-13d21897]{
  width:80px; padding:8px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-13d21897 1s linear infinite;
}
@keyframes spinner-13d21897{
to{ transform:rotate(1turn)
}
}

/* ---------- Header ---------- */
.section-head[data-v-13d21897]{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-left:6px solid var(--accent,#4F7EB3);
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:12px 14px; margin:10px 0 14px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.title[data-v-13d21897]{ margin:0; font-weight:800; color:#425461
}
.head-left[data-v-13d21897]{ display:flex; align-items:center; gap:10px
}
.head-actions[data-v-13d21897]{ display:flex; gap:10px; flex-wrap:wrap
}

/* ---------- Buttons ---------- */
.btn-outline[data-v-13d21897]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn-outline[data-v-13d21897]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-13d21897]{
  display:inline-flex; align-items:center; gap:8px;
  border:0; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer;
  background:#6C9046;
}
.btn-solid.ok[data-v-13d21897]{ background:#6C9046
}
.btn-solid.danger[data-v-13d21897]{ background:#C21500
}
.btn-solid[data-v-13d21897]:disabled{ opacity:.6; cursor:not-allowed
}

/* Big plus tile for empty state */
.big-square[data-v-13d21897]{
  width:72px; height:72px; border-radius:14px; justify-content:center;
  font-size:22px;
}

/* ---------- Page Card ---------- */
.page-card[data-v-13d21897]{ border:none; box-shadow:0 4px 18px rgba(13,38,76,.06); border-radius:14px
}
.footer-actions[data-v-13d21897]{ display:flex; justify-content:flex-end; gap:10px; margin-bottom: 20px;}

/* ---------- Block Card with accent spine ---------- */
.block-card[data-v-13d21897]{
  position:relative; border:none; border-radius:14px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
  margin-bottom:18px; padding:10px 12px;
}
.kpi-accent[data-v-13d21897]::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent,#4F7EB3);
  border-radius:14px 0 0 14px;
}
.block-head[data-v-13d21897]{ display:flex; align-items:center; gap:10px; padding:6px 4px
}
.block-icon[data-v-13d21897]{ font-size:1.2rem; color:#4F7EB3
}
.block-title[data-v-13d21897]{ margin:0; font-weight:800; color:#425461
}
.block-body[data-v-13d21897]{ padding:6px 4px 10px
}

/* ---------- Empty State ---------- */
.empty-card[data-v-13d21897]{
  border:1px dashed #e6edf3; border-radius:12px; padding:16px; background:#fafcfe;
  display:flex; align-items:center; justify-content:center;
}
.empty-cta[data-v-13d21897]{ display:flex; align-items:center; gap:16px; flex-wrap:wrap
}
.empty-text[data-v-13d21897]{ display:flex; flex-direction:column; gap:4px
}
.empty-title[data-v-13d21897]{ margin:0; font-weight:700; color:#4F7EB3
}
.empty-sub[data-v-13d21897]{ margin:0; color:#667684
}

/* ---------- Connections grid & pills ---------- */
.conn-grid[data-v-13d21897]{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px; margin-top:4px;
}
.conn-pill[data-v-13d21897]{
  display:flex; align-items:center; gap:10px;
  background:#fff; color:#4F7EB3; border:1px solid #4F7EB3;
  border-radius:12px; padding:10px 12px; height:52px;
  box-shadow:0 2px 8px rgba(13,38,76,.04);
  cursor:pointer; text-align:left;
}
.conn-pill i[data-v-13d21897]{ font-size:1.1rem
}
.conn-pill.selected[data-v-13d21897]{ background:#4F7EB3; color:#fff; border-color:#4F7EB3
}
.conn-pill.disabled[data-v-13d21897]{ cursor:not-allowed; opacity:.65
}

/* ---------- Block footer ---------- */
.block-footer[data-v-13d21897]{
  display:flex; gap:10px; justify-content:flex-end; padding:6px 4px 2px;
}

/* ---------- Disabled links ---------- */
.disabled-router-link[data-v-13d21897]{
  pointer-events:none; cursor:not-allowed; opacity:.6;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 600px){
.title[data-v-13d21897]{ font-size:1.1rem
}
.conn-grid[data-v-13d21897]{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))
}
}

/* ---------- Header ---------- */
.section-head[data-v-515c8371]{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-left:6px solid var(--accent,#4F7EB3);
  background:#fff; border:1px solid #e6edf3; border-radius:12px;
  padding:12px 14px; margin:10px 0 14px;
  box-shadow:0 3px 12px rgba(13,38,76,.06);
}
.title[data-v-515c8371]{ margin:0; font-weight:800; color:#425461
}
.head-actions[data-v-515c8371]{ display:flex; gap:10px; flex-wrap:wrap
}

/* ---------- Buttons ---------- */
.btn-outline[data-v-515c8371]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.btn-outline[data-v-515c8371]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-515c8371]{
  display:inline-flex; align-items:center; gap:8px;
  border:0; color:#fff; padding:8px 14px; border-radius:10px; cursor:pointer;
}
.btn-solid.ok[data-v-515c8371]{ background:#6C9046
}
.btn-solid.ok.is-disabled[data-v-515c8371],
.btn-solid.ok[data-v-515c8371]:disabled{ opacity:.6; cursor:not-allowed
}

/* ---------- Form Card ---------- */
.form-card[data-v-515c8371]{ border:none; box-shadow:0 4px 18px rgba(13,38,76,.06); border-radius:14px
}
.kpi-accent[data-v-515c8371]{ position:relative
}
.kpi-accent[data-v-515c8371]::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent,#4F7EB3);
  border-radius:14px 0 0 14px;
}
.form-head[data-v-515c8371]{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px;
  border-bottom:1px solid #eef3f7;
}
.form-title[data-v-515c8371]{ margin:0; color:#4F7EB3; font-weight:800
}
.type-chip[data-v-515c8371]{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  background:#f7fbff; color:#4F7EB3; border:1px solid #e6edf3; border-radius:999px;
  font-size:.84rem; font-weight:700;
}
.card-body[data-v-515c8371]{ padding:14px 16px
}

/* ---------- Form Layout ---------- */
.form-wrap[data-v-515c8371]{ max-width:760px
}
.form-row[data-v-515c8371]{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px
}
.form-label[data-v-515c8371]{ color:#425461; font-weight:700
}
.form-label.sub[data-v-515c8371]{ color:#4F7EB3; font-weight:700
}
.input[data-v-515c8371]{
  width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:10px 12px;
  background:#fff; color:#2b3a44; outline:none;
}
.input[data-v-515c8371]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}

/* Group (for weather) */
.group[data-v-515c8371]{ margin-top:6px; border:1px solid #eef3f7; border-radius:12px; padding:12px
}
.group-head[data-v-515c8371]{ display:flex; align-items:center; gap:8px; color:#4F7EB3; font-weight:800; margin-bottom:10px
}
.grid-2[data-v-515c8371]{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width: 720px){
.grid-2[data-v-515c8371]{ grid-template-columns:1fr
}
}

/* ---------- Footer ---------- */
.form-actions[data-v-515c8371]{
  display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #eef3f7;
}
.saving[data-v-515c8371]{ display:flex; align-items:center; gap:8px; margin-right:auto; color:#6b7a86
}

/* ---------- Loader (saving) ---------- */
.saver[data-v-515c8371]{
  width:22px; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-515c8371 1s linear infinite;
}
@keyframes spinner-515c8371{
to{ transform:rotate(1turn)
}
}

.kpi-accent[data-v-422b6784] {
  position: relative;
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(13, 38, 76, 0.06);
  overflow: hidden;
}
.kpi-accent[data-v-422b6784]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--accent, #4F7EB3);
}
.form-head[data-v-422b6784] {
  padding: 14px 16px;
  border-bottom: 1px solid #eef3f7;
  background: #fff;
}
.form-title[data-v-422b6784] {
  margin: 0;
  color: #4F7EB3;
  font-weight: 800;
  text-align: center;
}
.alert.info[data-v-422b6784] {
  background: #f2f8fc;
  color: #425461;
  border-left: 4px solid #4F7EB3;
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title[data-v-422b6784] {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #425461;
}
.weekday-grid[data-v-422b6784] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.day-box[data-v-422b6784] {
  flex: 1 1 240px;
  max-width: 260px;
  background: #fafbfc;
  border: 1px solid #e5eaf0;
  border-radius: 10px;
  padding: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.day-header[data-v-422b6784] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.day-name[data-v-422b6784] {
  font-weight: 600;
  color: #4F7EB3;
}
.toggle[data-v-422b6784] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #425461;
}
.toggle.small[data-v-422b6784] {
  font-size: 0.8rem;
}
.day-options[data-v-422b6784] {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.time-row[data-v-422b6784] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.inputs[data-v-422b6784] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
input[type="time"][data-v-422b6784] {
  width: 90px;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid #ccd3da;
  border-radius: 6px;
  color: #425461;
}
input[type="time"][data-v-422b6784]:focus {
  border-color: #B2C149;
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(178, 193, 73, 0.25);
}
.remove[data-v-422b6784] {
  position: absolute;
  top: 4px;
  right: 8px;
  color: #C21500;
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
}
.add-box[data-v-422b6784] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-outline[data-v-422b6784] {
  border: 1px solid #4F7EB3;
  color: #4F7EB3;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}
.btn-outline[data-v-422b6784]:hover {
  background: #4F7EB3;
  color: #fff;
}
.btn-solid.ok[data-v-422b6784] {
  background: #6C9046;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
}
button[data-v-422b6784]:disabled,
.btn-solid[data-v-422b6784]:disabled,
.btn-outline[data-v-422b6784]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(40%);
}
.btn-solid[data-v-422b6784]:disabled {
  background: #c9cfd6 !important;
  color: #fff !important;
}
.form-actions[data-v-422b6784] {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.divider-soft[data-v-422b6784] {
  border: 0;
  border-top: 1px solid #eef3f7;
  margin: 1.5rem 0;
}
.datepicker-inline[data-v-422b6784] {
  max-width: 180px;
}

.settings-page[data-v-7beef2b4] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.section-head[data-v-7beef2b4] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 6px solid var(--accent, #4F7EB3);
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 3px 12px rgba(13, 38, 76, 0.06);
}
.title[data-v-7beef2b4] {
  margin: 0;
  font-weight: 800;
  color: #425461;
}
.subtitle[data-v-7beef2b4] {
  margin: 2px 0 0;
  color: #6b7a86;
  font-size: 0.9rem;
}
.btn-outline[data-v-7beef2b4] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #4F7EB3;
  color: #4F7EB3;
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline[data-v-7beef2b4]:hover {
  background: #4F7EB3;
  color: #fff;
}
.btn-solid[data-v-7beef2b4] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 8px 12px;
  border: none;
  color: #fff;
  cursor: pointer;
}
.btn-solid.ok[data-v-7beef2b4] {
  background: #6C9046;
}
.btn-solid.danger[data-v-7beef2b4] {
  background: #C21500;
}
button[data-v-7beef2b4]:disabled,
.btn-solid[data-v-7beef2b4]:disabled,
.btn-outline[data-v-7beef2b4]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(40%);
}
.btn-solid[data-v-7beef2b4]:disabled {
  background: #c9cfd6 !important;
  color: #fff !important;
}
.kpi-accent[data-v-7beef2b4] {
  position: relative;
  border: none;
  box-shadow: 0 4px 18px rgba(13, 38, 76, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
.kpi-accent[data-v-7beef2b4]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--accent, #4F7EB3);
}
.form-head[data-v-7beef2b4] {
  padding: 12px 16px;
  border-bottom: 1px solid #eef3f7;
  background: #fff;
}
.form-title[data-v-7beef2b4] {
  margin: 0;
  color: #4F7EB3;
  font-weight: 800;
}
.card-body[data-v-7beef2b4] {
  padding: 14px 16px;
}
.form-label[data-v-7beef2b4] {
  font-weight: 700;
  color: #425461;
}
.muted[data-v-7beef2b4] {
  color: #6b7a86;
  margin-top: 4px;
}
.slider-container[data-v-7beef2b4] {
  width: 100%;
}
.slider[data-v-7beef2b4] {
  margin-top: 44px;
  --slider-connect-bg: #B2C149;
  --slider-tooltip-bg: #B2C149;
  --slider-height: 2px;
  --slider-handle-width: 12px;
  --slider-handle-height: 12px;
}
.form-actions[data-v-7beef2b4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #eef3f7;
}
.saving[data-v-7beef2b4] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7a86;
  margin-right: auto;
}
.checklist[data-v-7beef2b4] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.check-item[data-v-7beef2b4] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #425461;
}
.user-table[data-v-7beef2b4] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.user-table th[data-v-7beef2b4] {
  color: #B2C149;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e6edf3;
}
.user-table td[data-v-7beef2b4] {
  padding: 6px 10px;
  border-bottom: 1px solid #f2f5f7;
  color: #425461;
}
.form-control.small[data-v-7beef2b4],
.form-select.small[data-v-7beef2b4] {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
}
.actions[data-v-7beef2b4] {
  display: flex;
  gap: 6px;
}
.loader[data-v-7beef2b4],
.saver[data-v-7beef2b4] {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%, #000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: spinner-7beef2b4 1s linear infinite;
}
@keyframes spinner-7beef2b4 {
to {
    transform: rotate(1turn);
}
}
.divider-soft[data-v-7beef2b4] {
  border: 0;
  border-top: 1px solid #eef3f7;
  margin: 10px 0;
}
.flex-break[data-v-7beef2b4] {
  height: 10px;
}

.header-row[data-v-f0b18838] {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.auth-head[data-v-f0b18838]{
  display:flex; align-items:center; gap:10px; margin-bottom: 12px;
}
.auth-head .flex-1[data-v-f0b18838]{ flex:1;
}
.back-spacer[data-v-f0b18838]{ width:82px;
} /* keeps title centered */
.btn-outline[data-v-f0b18838]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; padding:6px 12px;
  border-radius:8px; text-decoration:none; background:#f7fbff;
}
.btn-outline[data-v-f0b18838]:hover{ background:#4F7EB3; color:#fff
}
.back-btn i[data-v-f0b18838]{ font-size:1rem
}

/* Brand primary */
.stora-btn-primary[data-v-f0b18838]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
}
.stora-btn-primary[data-v-f0b18838]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-f0b18838]:disabled{ opacity:.7; cursor:not-allowed;
}

/* Sections */
.section-title[data-v-f0b18838] { color:#425461; font-weight:700; margin-bottom:.25rem;
}
.section-rule[data-v-f0b18838]  { border-top:1px solid #e3e6ea; margin:0 0 1rem 0;
}

/* Inputs */
.form-control[data-v-f0b18838]{ max-width: 100%;
}

/* Feedback / loader / popup / notification (re-use from your auth pages) */
.error-message[data-v-f0b18838]{ margin-top: 12px; color:#C21500;
}
.popup[data-v-f0b18838]{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.loader[data-v-f0b18838]{
  width:80px; padding:8px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation:spinner-f0b18838 1s infinite linear;
}
@keyframes spinner-f0b18838{
to{ transform:rotate(1turn)
}
}
.notification[data-v-f0b18838]{
  position:fixed; top:5%; left:50%; transform:translateX(-50%);
  padding:10px 20px; background:#d4edda; color:#155724;
  border:1px solid #c3e6cb; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,.2);
  z-index:1000; text-align:center;
}

/* Layout */
.login-shell[data-v-76059ae0] { min-height: 100vh; padding: 24px;
}
.login-loader[data-v-76059ae0] { display:flex; justify-content:center; align-items:flex-start; width:100%;
}
.login-card[data-v-76059ae0] { width: 100%; max-width: 480px;
}

/* Primary action (aligns with Storalytic colors) */
.stora-btn-primary[data-v-76059ae0]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
}
.stora-btn-primary[data-v-76059ae0]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-76059ae0]:disabled{ opacity:.7; cursor:not-allowed;
}
.btn-password-toggle[data-v-76059ae0] {
    background-color: white;
    border: 1px solid;
    border-color: #CED4DA;
}
.form-control[data-v-76059ae0] {
  max-width: 500px;
}
.error-message[data-v-76059ae0]{
    margin-bottom: 15px;
    color: #C21500;
}
.loader[data-v-76059ae0] {
  width: 80px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #B2C149;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: spinner-76059ae0 1s infinite linear;
}
@keyframes spinner-76059ae0 {to{transform: rotate(1turn)}}

/* Layout mirrors login */
.auth-shell[data-v-8759632c] { min-height: 100vh; padding: 24px;
}
.auth-card[data-v-8759632c] { width: 100%; max-width: 540px;
}

/* Header row: back button + centered title */
.auth-head[data-v-8759632c]{
  display:flex; align-items:center; gap:10px; margin-bottom: 12px;
}
.auth-head .flex-1[data-v-8759632c]{ flex:1;
}
.back-spacer[data-v-8759632c]{ width:82px;
} /* roughly the width of the back button to keep title truly centered */

/* Brand outline button (matches your other pages) */
.btn-outline[data-v-8759632c]{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #4F7EB3; color:#4F7EB3; padding:6px 12px;
  border-radius:8px; text-decoration:none;
  background:#f7fbff;
}
.btn-outline[data-v-8759632c]:hover{ background:#4F7EB3; color:#fff
}
.back-btn i[data-v-8759632c]{ font-size:1rem
}

/* Primary action (Storalytic colors) */
.stora-btn-primary[data-v-8759632c]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
}
.stora-btn-primary[data-v-8759632c]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-8759632c]:disabled{ opacity:.7; cursor:not-allowed;
}

/* Inputs look consistent with login */
.form-control[data-v-8759632c] {
  max-width: 500px;
}

/* Messages */
.error-message[data-v-8759632c]{ color:#C21500;
}
.success-message[data-v-8759632c]{ color:#2c7a3f;
}

/* Card spacing similar to login */
.card[data-v-8759632c] { margin-top: 2rem;
}
@media (max-width: 420px){
.back-spacer[data-v-8759632c]{ display:none;
}
.auth-head[data-v-8759632c]{ gap:6px;
}
.auth-head h2[data-v-8759632c]{ font-size:1.25rem;
}
}

/* Layout (same rhythm as login/change) */
.auth-shell[data-v-2b0fb2e6] { min-height: 100vh; padding: 24px;
}
.auth-card[data-v-2b0fb2e6]  { width: 100%; max-width: 480px;
}

/* Header row */
.card-head[data-v-2b0fb2e6]{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
.title[data-v-2b0fb2e6]{ margin:0 auto; font-size:1.5rem; font-weight:700; color:#425461;
}

/* Back button */
.btn-back[data-v-2b0fb2e6]{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px; text-decoration:none;
  color:#4F7EB3; border:1px solid #e6edf3; background:#f7fbff;
}
.btn-back[data-v-2b0fb2e6]:hover{ background:#eef6ff
}

/* Primary action (brand) */
.stora-btn-primary[data-v-2b0fb2e6]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
}
.stora-btn-primary[data-v-2b0fb2e6]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-2b0fb2e6]:disabled{ opacity:.7; cursor:not-allowed;
}

/* Keep input width tidy like login */
.form-control[data-v-2b0fb2e6]{ max-width: 500px;
}

/* Layout to match login/change */
.auth-shell[data-v-5c90e31b] { min-height: 100vh; padding: 24px;
}
.auth-card[data-v-5c90e31b]  { width: 100%; max-width: 480px;
}
.title[data-v-5c90e31b]      { color:#425461; font-weight:700;
}

/* Primary action (brand) */
.stora-btn-primary[data-v-5c90e31b]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; border-radius:8px;
  background:#4F7EB3; color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
}
.stora-btn-primary[data-v-5c90e31b]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-5c90e31b]:disabled{ opacity:.7; cursor:not-allowed;
}

/* Keep input width tidy like login */
.form-control[data-v-5c90e31b]{ max-width: 500px;
}

.select-company[data-v-fd9a80ac] { padding: 2rem;
}
.sidebar-logo img[data-v-fd9a80ac] {
  width: 100px; height: auto; margin-bottom: 0; margin-left: -8px;
}
.super-msg[data-v-fd9a80ac] { color: #425461;
}
.loader-container[data-v-fd9a80ac] { display:flex; justify-content:center; padding:4rem 0;
}

/* Right-side info in the Section head */
.user-info[data-v-fd9a80ac] {
  color:#425461; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.logout-link[data-v-fd9a80ac] { color:#4F7EB3; cursor:pointer; text-decoration:none; padding-left:5px;
}

/* Make each company tile clickable while reusing KpiCard visuals */
.company-grid[data-v-fd9a80ac] { padding-top: 12px;
}
.company-card[data-v-fd9a80ac] { cursor: pointer;
}
.company-card[data-v-fd9a80ac] .kpi-card { transition: box-shadow .2s ease, transform .02s ease;
}
.company-card[data-v-fd9a80ac]:hover .kpi-card { box-shadow: 0 6px 14px rgba(13,38,76,.08);
}
.company-meta[data-v-fd9a80ac] { color:#6b7a86;
}
.stora-btn[data-v-fd9a80ac] {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  font-weight:600; border:0; cursor:pointer;
  box-shadow:0 4px 10px rgba(13,38,76,.08);
  transition:transform .02s ease, box-shadow .2s ease, background .2s ease;
}
.stora-btn.primary[data-v-fd9a80ac] {
  background:#4F7EB3; color:#fff;
}
.stora-btn.primary[data-v-fd9a80ac]:hover {
  background:#476fa0; box-shadow:0 8px 18px rgba(13,38,76,.12);
}
.stora-btn.with-icon i[data-v-fd9a80ac] { font-size:1.1rem; line-height:1;
}
.stora-btn[data-v-fd9a80ac]:active { transform:translateY(1px);
}

/* Loader (reuse your token look) */
.loader[data-v-fd9a80ac] {
  width: 80px; padding: 8px; aspect-ratio: 1; border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m); mask: var(--_m);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: spinner-fd9a80ac 1s infinite linear;
}
@keyframes spinner-fd9a80ac {
to { transform: rotate(1turn)
}
}

/* ============================================================
 TREND CARD CONTENT
============================================================ */
.trend-short[data-v-841c802b] {
  font-weight: 700;
  font-size: 1.0rem;
  line-height: 1.1;
}
.trend-sentence[data-v-841c802b] {
  display: block;
  color: #6b7a86;
  font-size: .9rem;
  line-height: 1.25;
}

/* ============================================================
 BAR-LIST (Visitors/Average dwell lists)
============================================================ */
/* Single-grid layout (mirrors production) so the label column auto-sizes
   to the widest label — single-zone charts get a tight label; charts
   with longer names or conf-chips take more space without forcing
   whitespace in other charts. */
.barlist[data-v-841c802b] { display:grid; grid-template-columns: max-content 1fr auto; gap:10px; align-items:center;
}
.barlist-row[data-v-841c802b] { display:contents;
}
.barlist-label[data-v-841c802b] { color:#425461; white-space:nowrap;
}
.barlist-row.with-chip .barlist-label[data-v-841c802b] { display:inline-flex; align-items:center; gap:6px;
}
.barlist-row.with-chip .barlist-label .conf-chip[data-v-841c802b] { flex-shrink: 0;
}
.barlist-bar[data-v-841c802b] { height:10px; background:#eef3f7; border-radius:999px; overflow:hidden;
}
.barlist-fill[data-v-841c802b] { height:100%; background:#004F6E; border-radius:999px; opacity:.85;
}
.barlist-value[data-v-841c802b] { font-variant-numeric: tabular-nums; color:#2b3a44;
}

/* Confidence / bias chips (Mode C tripwire dwell). Mirrors production
   FixedWidgets.vue — backend emits only 'high' or 'medium'; anything
   weaker is suppressed entirely. Bias chips share the same shape so a
   row carrying both stays scannable, but use outlined treatments to
   stay visually distinct. */
.conf-chip[data-v-841c802b]{
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: help;
}
.conf-chip.conf-high[data-v-841c802b]      { color: #15803d; background: #dcfce7; border-color: #86efac;
}
.conf-chip.conf-medium[data-v-841c802b]    { color: #b45309; background: #fef3c7; border-color: #fcd34d;
}
.conf-chip.conf-mild-bias[data-v-841c802b] { color: #92400e; background: #fffbeb; border-color: #fde68a;
}
.conf-chip.conf-high-bias[data-v-841c802b] { color: #b91c1c; background: #fee2e2; border-color: #fca5a5;
}

/* ============================================================
 FUNNEL TABLE
============================================================ */
.funnelz-table[data-v-841c802b] { display: grid; gap: 8px;
}
.funnelz-row[data-v-841c802b] {
  display: grid;
  grid-template-columns: 1fr .6fr .8fr .9fr .9fr;
  align-items: center;
  gap: 10px;
  padding: .45rem .65rem;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  background: #fff;
}
.funnelz-head[data-v-841c802b] { font-weight: 600; background: #f7fafc;
}
.zone-name[data-v-841c802b] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num[data-v-841c802b] { text-align: right; font-variant-numeric: tabular-nums;
}
.num small[data-v-841c802b] { color: #6b7a86; margin-left: 4px;
}
.funnelz-row .merge-3[data-v-841c802b] { grid-column: 3 / span 3; text-align: center;
}
.funnelz-row .insufficient-msg[data-v-841c802b] { color: #6b7a86; font-style: italic;
}

/* ============================================================
 STATE / UTILITY
============================================================ */
.card-disabled[data-v-841c802b] { opacity: 0.5; pointer-events: none; background-color: #ffffff;
}
.group-disabled[data-v-841c802b] { border: 2px dashed #dcdcdc; background-color: #ffffff; opacity: 0.7;
}

/* ============================================================
 MODAL (Allen’s insights)
============================================================ */
.toggle-popup[data-v-841c802b]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* redundant for buttons, but keeps hover effects off */
}
.modal-overlay[data-v-841c802b] {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-window[data-v-841c802b] {
  background: white; border-radius: 8px;
  min-width: 400px; max-width: 90vw; max-height: 90vh;
  overflow: auto; padding: 1rem; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-left: 300px; margin-right: 20px;
}

/* ============================================================
 LOADER (overlay)
============================================================ */
.loader-overlay[data-v-841c802b] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(255, 255, 255, 0.8); z-index: 1000;
}
.loader[data-v-841c802b] {
  width: 20px; margin-top: 20px; padding: 2px; aspect-ratio: 1; border-radius: 50%;
  background: #B2C149;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m); mask: var(--_m);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: spinner-841c802b 1s infinite linear;
}
@keyframes spinner-841c802b {
to { transform: rotate(1turn)
}
}

/* ============================================================
 RESPONSIVE (kept only where still referenced)
============================================================ */
@media (max-width: 1600px) {
.charts-grid[data-v-841c802b] { grid-template-columns: 1fr;
}
.grid-container-product-data[data-v-841c802b] { grid-template-columns: 1fr;
}
}
@media (max-width: 1500px) {
.grid-container-product-data[data-v-841c802b] { grid-template-columns: 1fr;
}
.card-stack[data-v-841c802b] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-right: 0;
}
}
@media (max-width: 1400px) {
.chart-container[data-v-841c802b] { flex-direction: column; gap: 1rem;
}
.chart-wrapper[data-v-841c802b] { flex: 1 1 100%; max-width: 100%;
}
}
@media (max-width: 900px){
.funnelz-row[data-v-841c802b] { grid-template-columns: 1.2fr .6fr .8fr .9fr .9fr;
}
}
@media (max-width: 768px) {
.modal-window[data-v-841c802b] { margin-left: 20px;
}
}
@media (max-width: 600px) {
.grid-container-product-data[data-v-841c802b] { grid-template-columns: 1fr;
}
.card-stack[data-v-841c802b] { display: grid; grid-template-columns: 1fr; gap: 10px; margin-right: 0;
}
}

/* ============================================================
 SECTION SUMMARY (collapsed-section meta line)
 Mirrors production FixedWidgets.vue so each section header's
 zone-count + tripwire-count pills pick up the section's accent
 colour (zones = solid border, tripwires = dashed border).
============================================================ */
.sum-pill[data-v-841c802b]{
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1;
}
.sum-pill i[data-v-841c802b]{ font-size: .72rem
}
.sum-zones[data-v-841c802b]{
    color: var(--accent, #6b7a86);
    background: color-mix(in srgb, var(--accent, #6b7a86) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, #6b7a86) 35%, #e6edf3);
}
.sum-tripwire[data-v-841c802b]{
    color: var(--accent, #6b7a86);
    background: color-mix(in srgb, var(--accent, #6b7a86) 10%, #fff);
    border: 1px dashed color-mix(in srgb, var(--accent, #6b7a86) 55%, #fff);
}

/* Greyed-out wrapper around a real <Section> used as a teaser for zone
   types the demo isn't configured for. Matches the layout of any other
   Section in the data tab (collapsible chevron, badge, sum-pills) so
   viewers see the full customer-journey structure — but desaturated to
   a neutral grey and click-disabled.
   The underlying <section> still carries a data-section-id, so the
   sticky ZoneTypeNav's IntersectionObserver tracks scroll position
   normally when the user passes over these teasers. */

/* Override the SectionHead's --accent variable so the chevron + icon
   render in neutral grey instead of the zone-type accent color.
   The !important is required because SectionHead sets --accent inline
   via :style="{ '--accent': accent }", and inline styles otherwise win. */
.section-greyed[data-v-841c802b] .section-head{
    --accent: #94a3b8 !important;
    cursor: not-allowed !important;
    pointer-events: none;  /* swallow clicks on the chevron/title */
}
.section-greyed[data-v-841c802b] .section-head .chev,
.section-greyed[data-v-841c802b] .section-head .sec-icon{
    color: #94a3b8 !important;
}
.section-greyed[data-v-841c802b] .section-head:hover{
    background: transparent !important;
}

/* Mute the title text and the mode badge so the whole row reads as
   inactive. Sum-pills get a slightly faded look but stay readable so
   the zone/tripwire counts remain legible. */
.section-greyed[data-v-841c802b] .section-head h5{
    color: #94a3b8;
}
.section-greyed[data-v-841c802b] .section-head .mode-badge{
    opacity: 0.6;
    filter: grayscale(1);
}
.section-greyed[data-v-841c802b] .summary-pills{
    color: #94a3b8;
}
.section-greyed[data-v-841c802b] .sum-pill{
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}
.section-greyed[data-v-841c802b] .sum-pill i{
    color: #94a3b8 !important;
}

/* The wrapper itself stays click-receptive (so the cursor shows over
   the whole row, not just the head), but a click on it does nothing
   since pointer-events on the inner head are off. */
.section-greyed[data-v-841c802b]{
    cursor: not-allowed;
}


@keyframes fadeInOut-e9275e88 {
0% { opacity: 0.4;
}
100% { opacity: 0.7;
}
}
.loader[data-v-e9275e88] {
    width: 80px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #B2C149;
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: spinner-e9275e88 1s infinite linear;
}
@keyframes spinner-e9275e88 {to{transform: rotate(1turn)}}

/* Mobile: stack title (row 1) and button (row 2) */
@media (max-width: 1080px){
.ask-allen-btn[data-v-e9275e88]{ margin-left: 0; width: max-content;
}
}


/* 6-col grid so two x 3-span = side-by-side; 6-span = full width */
.row2-grid[data-v-561d6c87] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.row2-item[data-v-561d6c87] { min-width: 0;
}       /* allow charts to shrink nicely */
.row2-span-3[data-v-561d6c87] { grid-column: span 3;
}
.row2-span-6[data-v-561d6c87] { grid-column: span 6;
}
.zone-row4[data-v-561d6c87] {
  /* ChartGrid already sets display:grid; we only override columns/gap */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Small note under header */
.same-id-note[data-v-561d6c87]{
  color:#C24500; font-size:.9rem; padding-left:.5rem; margin:.4rem 0 .2rem;
}

/* Inline toolbar area atop a panel (for the granularity radios) */
.grid-panel-toolbar[data-v-561d6c87]{
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

/* Only affect this Trends panel */
.panel-trends[data-v-561d6c87] .panel-body{
  height: auto;           /* override var(--panel-h) result */
  min-height: 120px;      /* keeps a nice base height at wide screens */
}
.panel-top-visitors[data-v-561d6c87] .panel-body {
  height: auto;            /* override fixed height */
  min-height: 120px;       /* keep a tidy base height */
}

/* Let content define its own height when parent is height:auto */
.panel-trends[data-v-561d6c87] .panel-slot{
  height: auto;
}
.chart-vert-stack[data-v-561d6c87]{
  display: grid;
  grid-auto-rows: minmax(0, auto);
  gap: 12px;         /* match ChartGrid gap */
}

/* Empty state text for panels where strategy is insufficient */
.empty-fallback[data-v-561d6c87]{
  margin-top: 140px; text-align: center; color: #425461; font-style: italic;
}

/* Wrapper */
.dashboard-wrapper[data-v-561d6c87] { width:100%; overflow-x:hidden; padding-bottom: 40px;}

/* Loader overlay (keep) */
.loader-overlay[data-v-561d6c87] {
  position: absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background-color: rgba(255,255,255,0.8); z-index: 1000;
}
.loader[data-v-561d6c87] { width:160px; margin-top:0; padding:2px; aspect-ratio:1; border-radius:50%;
  background:#B2C149;
  --_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
  -webkit-mask:var(--_m); mask:var(--_m);
  -webkit-mask-composite:source-out; mask-composite:subtract;
  animation: spinner-561d6c87 1s infinite linear;
}
@keyframes spinner-561d6c87 {
to { transform: rotate(1turn)
}
}

/* Modal (keep) */
.toggle-popup[data-v-561d6c87]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* redundant for buttons, but keeps hover effects off */
}
.modal-overlay[data-v-561d6c87] {
  position: fixed; inset:0; background: rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-window[data-v-561d6c87] {
  background:white; border-radius:8px; min-width:400px; max-width:90vw; max-height:90vh;
  overflow:auto; padding:1rem; position:relative; box-shadow:0 4px 12px rgba(0,0,0,0.3);
  margin-left:300px; margin-right:20px;
}

/* 3-up grid for the first row */
.chart-grid--3[data-v-561d6c87] { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1520px){
.chart-grid--3[data-v-561d6c87] { grid-template-columns: repeat(2, minmax(0,1fr));
}
.row2-grid[data-v-561d6c87] { grid-template-columns: 1fr;
}
.row2-span-3[data-v-561d6c87], .row2-span-6[data-v-561d6c87] { grid-column: 1 / -1;
}
.zone-row4[data-v-561d6c87] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 1250px){
.chart-grid--3[data-v-561d6c87] { grid-template-columns: 1fr;
}
}

/* 2-up inner grid for the split “per day” panels (collapses nicely) */
.chart-grid--2[data-v-561d6c87] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1250px){
.chart-grid--2[data-v-561d6c87] { grid-template-columns: 1fr;
}
}

/* ============================================================
   Tripwire-only mode grid (mirrors production DetectionZoneData.vue).
   ============================================================ */
.tripwire-layout-grid[data-v-561d6c87]{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "crossings crossings crossings crossings highlights highlights"
    "heatmap   heatmap   heatmap   trends-stk trends-stk trends-stk";
  gap: 16px;
  align-items: start;
}
.tw-area-crossings[data-v-561d6c87]    { grid-area: crossings;
}
.tw-area-highlights[data-v-561d6c87]   { grid-area: highlights;
}
.tw-area-heatmap[data-v-561d6c87]      { grid-area: heatmap;
}
.tw-area-trends-stack[data-v-561d6c87] {
  grid-area: trends-stk;
  display: flex; flex-direction: column; gap: 16px;
}
.tw-area-highlights[data-v-561d6c87] .mini-cards{ grid-template-columns: 1fr;
}
.tripwire-layout-grid.tripwire-hourly[data-v-561d6c87]{
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "crossings  crossings  crossings  crossings  crossings  crossings"
    "highlights highlights highlights heatmap    heatmap    heatmap"
    "trends-stk trends-stk trends-stk trends-stk trends-stk trends-stk";
}
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-561d6c87]{ flex-direction: row;
}
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-561d6c87] > *{ flex: 1;
}
@media (max-width: 1024px){
.tripwire-layout-grid[data-v-561d6c87],
  .tripwire-layout-grid.tripwire-hourly[data-v-561d6c87]{
    grid-template-columns: 1fr;
    grid-template-areas:
      "crossings"
      "highlights"
      "heatmap"
      "trends-stk";
}
.tripwire-layout-grid.tripwire-hourly .tw-area-trends-stack[data-v-561d6c87]{ flex-direction: column;
}
}
.tw-compact[data-v-561d6c87] .panel-body{ padding: 8px 10px;
}
.tw-compact[data-v-561d6c87] .panel-head{ padding: 6px 10px;
}
.pct-of-total[data-v-561d6c87]{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 4px;
}
.pct-of-total .pct-value[data-v-561d6c87]{ font-size: 2.4rem; font-weight: 700; line-height: 1;
}
.pct-of-total .pct-context[data-v-561d6c87]{ font-size: 0.85rem; color: #6b7a86; text-align: center;
}
.dwell-estimate[data-v-561d6c87]{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 6px; text-align: center;
}
.dwell-value-row[data-v-561d6c87]{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.dwell-value[data-v-561d6c87]{ font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.dwell-conf[data-v-561d6c87]{
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; cursor: help;
}
.dwell-conf.conf-high[data-v-561d6c87]{   color: #2f6f3a; background: #f4faf5; border: 1px solid #bfe2c7;
}
.dwell-conf.conf-medium[data-v-561d6c87]{ color: #9a6b00; background: #fff8e6; border: 1px solid #ffd97a;
}
.dwell-context[data-v-561d6c87]{
  display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: #6b7a86; cursor: help;
}
.dwell-context i[data-v-561d6c87]{ opacity: .7;
}
.grid-panel-toolbar.tripwire-toolbar[data-v-561d6c87]{ justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.tripwire-totals[data-v-561d6c87]{ display: flex; gap: 10px; flex-wrap: wrap;
}
.tw-pill[data-v-561d6c87]{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .85rem; color: #2b3a44;
  border: 1px solid #e6edf3; background: #f9fbfd;
}
.tw-pill i[data-v-561d6c87]{ opacity: .8
}
.tw-pill.tw-in[data-v-561d6c87]{ color: #4F7EB3
}
.tw-pill.tw-out[data-v-561d6c87]{ color: #6C9046
}
.tw-pill b[data-v-561d6c87]{ color: #2b3a44; font-weight: 600
}


/* Brand tokens */
[data-v-29b869b0]:root {
  --stora-primary: #4F7EB3;
  --stora-accent:  #B2C149;
  --stora-text:    #425461;
  --stora-border:  #e6edf3;
  --stora-bg:      #ffffff;
}

/* Shell */
.notifications-sidebar[data-v-29b869b0]{
  position: fixed;
  right: 0; top: 0;
  height: 100vh; width: 400px;
  background: var(--stora-bg);
  border-left: 1px solid var(--stora-border);
  box-shadow: -6px 0 18px rgba(13,38,76,.10);
  z-index: 9999;
  display: flex; flex-direction: column;
  overflow-y: auto;          /* add */
  overscroll-behavior: contain; /* optional: stop scroll chaining */
  scrollbar-gutter: stable;     /* optional: reserve space for scrollbar */
}
.notifications-sidebar.hidden[data-v-29b869b0]{ display:none;
}

/* Sticky topbar */
.sidebar-topbar[data-v-29b869b0]{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--stora-bg);
  border-bottom: 1px solid var(--stora-border);
}
.sidebar-title[data-v-29b869b0]{
  margin:0; font-size: 1.05rem; font-weight: 700; color: var(--stora-primary);
}

/* Close button (header) */
.icon-btn.close[data-v-29b869b0]{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #d7dee6;
  background: #eef2f7;               /* light grey pill so it stands out */
  color: #425461;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn.close[data-v-29b869b0]:hover{
  background: #4F7EB3;               /* brand hover */
  border-color: #4F7EB3;
  color: #fff;
}
.icon-btn.close[data-v-29b869b0]:focus-visible{
  outline: 2px solid #B2C149;
  outline-offset: 2px;
}

/* Bulk actions (sticky) */
.bulk-actions[data-v-29b869b0]{
  position: sticky; top: 56px; z-index: 1; /* below header */
  display:flex; align-items:center; justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(180deg, #fff 75%, #fff0 100%);
  border-bottom: 1px solid var(--stora-border);
}

/* List area scroll */
.notifications-list[data-v-29b869b0]{
  display: block;                   /* override flex */
  padding: 16px 14px 24px;
}

/* Add vertical space between cards */
.notifications-list > .notification-card[data-v-29b869b0]{
  margin-bottom: 24px;              /* space below each card */
}

/* No extra space after the last one */
.notifications-list > .notification-card[data-v-29b869b0]:last-child{
  margin-bottom: 0;
}

/* Cards */
.notification-card[data-v-29b869b0]{
  position: relative;
  display: grid;
  grid-template-columns: 6px 36px 1fr;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--stora-border);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
  padding: 12px 12px 12px 0; /* left padding handled by accent strip column */
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.notification-card[data-v-29b869b0]:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13,38,76,.10);
}
.notification-card.selected[data-v-29b869b0]{
  border-color: var(--stora-primary);
  box-shadow: 0 6px 18px rgba(79,126,179,.18);
}

/* Accent strip uses the same color style as icon */
.accent-strip[data-v-29b869b0]{
  grid-column: 1;
  align-self: stretch;            /* full card height */
  width: 8px;                     /* make it a bit more visible */
  background: currentColor;       /* uses the 'color' from :style */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Per-card close (top-right) */
.icon-btn.card-close[data-v-29b869b0]{
  position: absolute; top: 6px; right: 8px;
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; color: var(--stora-text);
  border: 1px solid transparent;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.icon-btn.card-close[data-v-29b869b0]:hover{
  background: #f6f8fa; border-color: var(--stora-border);
}

/* Icon column */
.icon[data-v-29b869b0]{
  grid-column: 2;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 2px;
}
.icon i[data-v-29b869b0]{ font-size: 20px;
}

/* Details column */
.details[data-v-29b869b0]{
  grid-column: 3;
  color: var(--stora-text);
  font-size: .92rem;
}
.meta[data-v-29b869b0]{
  margin-top: 6px;
}
.timestamp[data-v-29b869b0]{
  font-size: .78rem; color:#8393a1; font-style: italic;
}

/* Actions */
.actions[data-v-29b869b0]{
  margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap;
}

/* Buttons */
.stora-btn[data-v-29b869b0]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:6px 10px; border-radius:8px;
  background: var(--stora-primary); color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
  font-size: .9rem;
}
.stora-btn[data-v-29b869b0]:hover{ background: var(--stora-accent);
}
.stora-btn[data-v-29b869b0]:disabled{ opacity:.5; cursor:not-allowed;
}
.stora-btn.success[data-v-29b869b0]{ background:#6C9046;
}
.stora-btn.success[data-v-29b869b0]:hover{ background:#5b7a3b;
}
.stora-btn-danger[data-v-29b869b0]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:6px 10px; border-radius:8px;
  background:#C21500; color:#fff; border:1px solid #C21500; cursor:pointer;
  transition: filter .2s ease;
  font-size:.9rem;
}
.stora-btn-danger[data-v-29b869b0]:hover{ filter: brightness(0.95);
}
.stora-btn-danger.subtle[data-v-29b869b0]{
  background:#fff; color:#C21500; border:1px solid #C21500;
}
.stora-btn-danger.subtle[data-v-29b869b0]:disabled{ opacity:.4; cursor:not-allowed;
}

/* Linky button */
.stora-link[data-v-29b869b0]{
  background:transparent; border:0; color: var(--stora-primary);
  text-decoration: underline; cursor:pointer; padding: 4px 2px; font-size:.9rem;
}
.stora-link[data-v-29b869b0]:hover{ color: var(--stora-accent);
}

/* Empty state */
.empty-state[data-v-29b869b0]{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#6c757d; padding: 0 24px;
}
.zen-icon[data-v-29b869b0]{ font-size: 64px; filter: grayscale(1) brightness(1.15); margin-bottom: 12px;
}

/* Transitions */
.slide-enter-active[data-v-29b869b0], .slide-leave-active[data-v-29b869b0]{ transition: all .25s ease;
}
.slide-enter-from[data-v-29b869b0]{ opacity:0; transform: translateY(-8px);
}
.slide-enter-to[data-v-29b869b0]  { opacity:1; transform: translateY(0);
}
.slide-leave-from[data-v-29b869b0]{ opacity:1; transform: translateY(0);
}
.slide-leave-to[data-v-29b869b0]  { opacity:0; transform: translateY(8px);
}

/* Scrollbar polish (webkit) */
.notifications-list[data-v-29b869b0]::-webkit-scrollbar{ width: 10px;
}
.notifications-list[data-v-29b869b0]::-webkit-scrollbar-thumb{
  background: #e8edf2; border-radius: 8px; border: 2px solid #fff;
}
.notifications-list[data-v-29b869b0]::-webkit-scrollbar-thumb:hover{ background: #d7e0ea;
}

/* Responsiveness */
@media (max-width: 480px){
.notifications-sidebar[data-v-29b869b0]{ width: 100vw;
}
.bulk-actions[data-v-29b869b0]{ top: 56px;
}
}

/* Backdrop for mobile */
.sidebar-backdrop[data-v-70c52b8a]{
  position:fixed; inset:0; background:rgba(10,14,18,.45);
  z-index:1095;
}

/* Shell */
.sidebar[data-v-70c52b8a]{
  position:fixed; top:0; left:0; z-index:1100;
  width:300px; height:100vh; display:flex; flex-direction:column;
  background:#ffffff;
  border-right:1px solid #e6edf3;
  box-shadow:2px 0 12px rgba(13,38,76,.08);
  padding:12px 12px 10px;
  overflow-y:auto;
  transition:transform .28s ease;
}

/* Mobile slide */
.sidebar.small-screen[data-v-70c52b8a]{ transform:translateX(-102%); height:100vh;
}
.sidebar.open.small-screen[data-v-70c52b8a]{ transform:translateX(0);
}

/* Close button (mobile) */
.close-btn[data-v-70c52b8a]{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid #e6edf3; background:#fff; color:#425461;
  display:inline-flex; align-items:center; justify-content:center;
}
.close-btn[data-v-70c52b8a]:hover{ background:#f0f4f8;
}

/* Header band */
.sidebar-head[data-v-70c52b8a]{
  display:grid;
  grid-template-columns: 1fr auto;  /* logo left, bell right */
  grid-template-rows: auto auto;    /* company name on row 2 */
  align-items:center;
  gap:8px 10px;
  padding:6px 6px;
  background:#fff;
  border-radius:10px;
}
.sidebar-logo[data-v-70c52b8a]{
  grid-column:1 / 2;
  grid-row:1 / 2;
  height:80px;              /* cap the logo height */
  width:auto;               /* keep aspect ratio */
  object-fit:contain;
  display:block;
  margin:0;                 /* no extra space */
  margin-left: -15px;
}
.company-name[data-v-70c52b8a]{
  grid-column:1 / -1;       /* span both columns */
  grid-row:2 / 3;
  color:#425461; font-weight:600; font-size:.9rem;
  line-height:1.25;
  white-space:normal;       /* allow wrapping */
  overflow-wrap:anywhere;   /* break long words */
  word-break:break-word;    /* safety */
  margin-top:2px;
}
.bell-btn[data-v-70c52b8a]{
  grid-column:2 / 3;
  grid-row:1 / 2;
  position:relative;
  border:1px solid #e6edf3;
  background:#fff; color:#425461;
  width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bell-btn[data-v-70c52b8a]:hover{ background:#f0f4f8;
}
.notification-badge[data-v-70c52b8a]{
  position:absolute; top:-4px; right:-4px;
  background:#C21500; color:#fff; border-radius:999px;
  padding:0 6px; font-size:.65rem; line-height:16px;
}

/* Tighten the divider so links start right after header */
.thin-divider[data-v-70c52b8a]{ border:0; border-top:1px solid #eef2f6; margin:6px 0;
}
.thin-divider-sub[data-v-70c52b8a]{ border:0; border-top:1px dashed #e6edf3; margin:2px 14px;
}

/* Section titles */
.sub-title[data-v-70c52b8a]{
  font-size:.92rem; color:#4F7EB3; font-weight:700;
  padding:6px 10px 2px; display:flex; align-items:center; gap:8px;
}

/* Link lists */
.main-links[data-v-70c52b8a]{ padding:0 6px; margin-top:4px;}
.nav-link[data-v-70c52b8a], .flow-link[data-v-70c52b8a]{
  display:block; text-decoration:none;
  color:#425461; font-size:.86rem; padding:6px 12px; border-radius:8px;
  margin:2px 6px; transition:background .15s ease, color .15s ease;
}
.nav-link[data-v-70c52b8a]:hover, .flow-link[data-v-70c52b8a]:hover{ background:#f4f7fb; color:#4F7EB3;
}

/* Active pill */
.active-link[data-v-70c52b8a]{
  color:#4F7EB3 !important; background:#eef5ff;
  border-left:3px solid #B2C149; padding-left:9px;
  font-weight:700;
}

/* Nested lists */
.flow-list[data-v-70c52b8a], .detection-zone-list[data-v-70c52b8a]{ padding:4px 6px 4px 28px;
}

/* Geometry indicator before a zone name */
.geom-glyph[data-v-70c52b8a]{
  display:inline-flex; align-items:center; gap:3px;
  margin-right:6px; color:#7a8a96; font-size:.78rem;
}
.flow-link.active-link .geom-glyph[data-v-70c52b8a],
.flow-link:hover .geom-glyph[data-v-70c52b8a]{ color:#4F7EB3;
}

/* Expandable headers */
.expandable-header-cameras[data-v-70c52b8a],
.expandable-header-detection-zones[data-v-70c52b8a]{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  color:#425461; font-size:.86rem; padding:8px 12px; margin:2px 6px; border-radius:8px;
}
.expandable-header-cameras[data-v-70c52b8a]:hover,
.expandable-header-detection-zones[data-v-70c52b8a]:hover{ background:#f7f9fb;
}
.triangle-icon[data-v-70c52b8a]{
  display:inline-block; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #425461;
  transform:rotate(-90deg); transition:transform .2s ease;
}
.triangle-icon.expanded[data-v-70c52b8a]{ transform:rotate(0deg);
}

/* Footer */
.sidebar-footer[data-v-70c52b8a]{ margin-top:auto; padding:8px 6px 4px; color:#425461; font-size:.75rem;
}
.connection-status[data-v-70c52b8a]{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.status-label[data-v-70c52b8a]{ font-weight:700; color:#425461;
}
.chip[data-v-70c52b8a]{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:4px 10px; font-size:.78rem;
  border:1px solid #e6edf3; color:#4F7EB3; background:#f7fbff;
}
.chip-ok[data-v-70c52b8a]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df;
}
.chip-warn[data-v-70c52b8a]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf;
}

/* Links aligned with the left edge like the labels/icons above */
.footer-link[data-v-70c52b8a]{
  padding:6px 0; margin:0; border-radius:0;
  color:#425461; font-size:.76rem;
}
.footer-link[data-v-70c52b8a]:hover{ background:transparent; color:#4F7EB3;
}

/* user row in one line, wraps nicely if needed */
.settings-container .user-row[data-v-70c52b8a]{
  display:flex; align-items:center; flex-wrap:wrap;
  column-gap:2px;                 /* space between items on same line */
  row-gap:4px;                    /* tight gap when it wraps */
  padding:4px 0;
  color:#425461; font-size:.78rem;
}

/* name wraps naturally */
.settings-container .user-row .user-name[data-v-70c52b8a]{ white-space:normal;
}
.settings-container .user-row i.bi-person-fill[data-v-70c52b8a]{
  margin-right: 1px; /* explicit icon gap before the name */
}

/* small gap around the dot */
.settings-container .user-row .dot[data-v-70c52b8a]{
  color:#9aa8b3;
  margin:0 6px;
}

/* button styled as a link; pointer cursor */
.settings-container .user-row .logout-link-btn[data-v-70c52b8a]{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:0;
  color:#4F7EB3; font:inherit; cursor:pointer;
  line-height:1.2;
}
.settings-container .user-row .logout-link-btn[data-v-70c52b8a]:hover{ text-decoration:underline;
}

/* if you MUST keep <a class="logout-link"> instead of the button, enforce inline */
.settings-container .user-row .logout-link[data-v-70c52b8a]{
  display:inline !important;
  margin:0 !important; padding:0 !important;
  color:#4F7EB3; cursor:pointer; text-decoration:none;
}
.settings-container .user-row .logout-link[data-v-70c52b8a]:hover{ text-decoration:underline;
}

/* Top bar icons (mobile) */
.hamburger[data-v-70c52b8a]{
  position:fixed; top:10px; left:10px; z-index:1100;
  font-size:26px; color:#425461; cursor:pointer;
}
.mobile-bell[data-v-70c52b8a]{
  position:fixed; top:12px; left:54px; z-index:1100; color:#425461; cursor:pointer;
}
.notification-bell[data-v-70c52b8a]{ position:relative;
}

/* Scrollbar (webkit) */
.sidebar[data-v-70c52b8a]::-webkit-scrollbar{ width:10px;
}
.sidebar[data-v-70c52b8a]::-webkit-scrollbar-thumb{ background:#e6edf3; border-radius:10px;
}
.sidebar[data-v-70c52b8a]::-webkit-scrollbar-thumb:hover{ background:#d7e2ee;
}

/* Responsive width */
@media (max-width: 992px){
.sidebar[data-v-70c52b8a]{ width:280px;
}
}
@media (max-width: 768px){
.sidebar[data-v-70c52b8a]{ width:56vw;
}

    /* move the close a hair inward & smaller */
.close-btn[data-v-70c52b8a]{
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
}

    /* reserve space on the right of the header equal to the close button width */
.sidebar-head[data-v-70c52b8a]{
        padding-right: 56px;   /* 32px button + ~24px breathing room */
}

    /* nudge/smaller bell so it never bumps the close button */
.bell-btn[data-v-70c52b8a]{
        width: 32px;
        height: 32px;
        margin-right: 4px;      /* tiny inset from the header edge */
        justify-self: end;      /* keep it at the right of grid column */
}
.notification-badge[data-v-70c52b8a]{
        top: -3px;
        right: -3px;
}
}

/* Brand tokens */
[data-v-f530d4b9]:root {
  --stora-primary: #4F7EB3;
  --stora-accent:  #B2C149;
  --stora-text:    #425461;
  --stora-border:  #e6edf3;
  --stora-bg:      #ffffff;
}

/* Shell */
.notifications-sidebar[data-v-f530d4b9]{
  position: fixed;
  right: 0; top: 0;
  height: 100vh; width: 400px;
  background: var(--stora-bg);
  border-left: 1px solid var(--stora-border);
  box-shadow: -6px 0 18px rgba(13,38,76,.10);
  z-index: 9999;
  display: flex; flex-direction: column;
  overflow-y: auto;          /* add */
  overscroll-behavior: contain; /* optional: stop scroll chaining */
  scrollbar-gutter: stable;     /* optional: reserve space for scrollbar */
}
.notifications-sidebar.hidden[data-v-f530d4b9]{ display:none;
}

/* Sticky topbar */
.sidebar-topbar[data-v-f530d4b9]{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--stora-bg);
  border-bottom: 1px solid var(--stora-border);
}
.sidebar-title[data-v-f530d4b9]{
  margin:0; font-size: 1.05rem; font-weight: 700; color: var(--stora-primary);
}

/* Close button (header) */
.icon-btn.close[data-v-f530d4b9]{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #d7dee6;
  background: #eef2f7;               /* light grey pill so it stands out */
  color: #425461;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn.close[data-v-f530d4b9]:hover{
  background: #4F7EB3;               /* brand hover */
  border-color: #4F7EB3;
  color: #fff;
}
.icon-btn.close[data-v-f530d4b9]:focus-visible{
  outline: 2px solid #B2C149;
  outline-offset: 2px;
}

/* Bulk actions (sticky) */
.bulk-actions[data-v-f530d4b9]{
  position: sticky; top: 56px; z-index: 1; /* below header */
  display:flex; align-items:center; justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(180deg, #fff 75%, #fff0 100%);
  border-bottom: 1px solid var(--stora-border);
}

/* List area scroll */
.notifications-list[data-v-f530d4b9]{
  display: block;                   /* override flex */
  padding: 16px 14px 24px;
}

/* Add vertical space between cards */
.notifications-list > .notification-card[data-v-f530d4b9]{
  margin-bottom: 24px;              /* space below each card */
}

/* No extra space after the last one */
.notifications-list > .notification-card[data-v-f530d4b9]:last-child{
  margin-bottom: 0;
}

/* Cards */
.notification-card[data-v-f530d4b9]{
  position: relative;
  display: grid;
  grid-template-columns: 6px 36px 1fr;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--stora-border);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(13,38,76,.06);
  padding: 12px 12px 12px 0; /* left padding handled by accent strip column */
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.notification-card[data-v-f530d4b9]:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13,38,76,.10);
}
.notification-card.selected[data-v-f530d4b9]{
  border-color: var(--stora-primary);
  box-shadow: 0 6px 18px rgba(79,126,179,.18);
}

/* Accent strip uses the same color style as icon */
.accent-strip[data-v-f530d4b9]{
  grid-column: 1;
  align-self: stretch;            /* full card height */
  width: 8px;                     /* make it a bit more visible */
  background: currentColor;       /* uses the 'color' from :style */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Per-card close (top-right) */
.icon-btn.card-close[data-v-f530d4b9]{
  position: absolute; top: 6px; right: 8px;
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; color: var(--stora-text);
  border: 1px solid transparent;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.icon-btn.card-close[data-v-f530d4b9]:hover{
  background: #f6f8fa; border-color: var(--stora-border);
}

/* Icon column */
.icon[data-v-f530d4b9]{
  grid-column: 2;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 2px;
}
.icon i[data-v-f530d4b9]{ font-size: 20px;
}

/* Details column */
.details[data-v-f530d4b9]{
  grid-column: 3;
  color: var(--stora-text);
  font-size: .92rem;
}
.meta[data-v-f530d4b9]{
  margin-top: 6px;
}
.timestamp[data-v-f530d4b9]{
  font-size: .78rem; color:#8393a1; font-style: italic;
}

/* Actions */
.actions[data-v-f530d4b9]{
  margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap;
}

/* Buttons */
.stora-btn[data-v-f530d4b9]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:6px 10px; border-radius:8px;
  background: var(--stora-primary); color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
  font-size: .9rem;
}
.stora-btn[data-v-f530d4b9]:hover{ background: var(--stora-accent);
}
.stora-btn[data-v-f530d4b9]:disabled{ opacity:.5; cursor:not-allowed;
}
.stora-btn.success[data-v-f530d4b9]{ background:#6C9046;
}
.stora-btn.success[data-v-f530d4b9]:hover{ background:#5b7a3b;
}
.stora-btn-danger[data-v-f530d4b9]{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:6px 10px; border-radius:8px;
  background:#C21500; color:#fff; border:1px solid #C21500; cursor:pointer;
  transition: filter .2s ease;
  font-size:.9rem;
}
.stora-btn-danger[data-v-f530d4b9]:hover{ filter: brightness(0.95);
}
.stora-btn-danger.subtle[data-v-f530d4b9]{
  background:#fff; color:#C21500; border:1px solid #C21500;
}
.stora-btn-danger.subtle[data-v-f530d4b9]:disabled{ opacity:.4; cursor:not-allowed;
}

/* Linky button */
.stora-link[data-v-f530d4b9]{
  background:transparent; border:0; color: var(--stora-primary);
  text-decoration: underline; cursor:pointer; padding: 4px 2px; font-size:.9rem;
}
.stora-link[data-v-f530d4b9]:hover{ color: var(--stora-accent);
}

/* Empty state */
.empty-state[data-v-f530d4b9]{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#6c757d; padding: 0 24px;
}
.zen-icon[data-v-f530d4b9]{ font-size: 64px; filter: grayscale(1) brightness(1.15); margin-bottom: 12px;
}

/* Transitions */
.slide-enter-active[data-v-f530d4b9], .slide-leave-active[data-v-f530d4b9]{ transition: all .25s ease;
}
.slide-enter-from[data-v-f530d4b9]{ opacity:0; transform: translateY(-8px);
}
.slide-enter-to[data-v-f530d4b9]  { opacity:1; transform: translateY(0);
}
.slide-leave-from[data-v-f530d4b9]{ opacity:1; transform: translateY(0);
}
.slide-leave-to[data-v-f530d4b9]  { opacity:0; transform: translateY(8px);
}

/* Scrollbar polish (webkit) */
.notifications-list[data-v-f530d4b9]::-webkit-scrollbar{ width: 10px;
}
.notifications-list[data-v-f530d4b9]::-webkit-scrollbar-thumb{
  background: #e8edf2; border-radius: 8px; border: 2px solid #fff;
}
.notifications-list[data-v-f530d4b9]::-webkit-scrollbar-thumb:hover{ background: #d7e0ea;
}

/* Responsiveness */
@media (max-width: 480px){
.notifications-sidebar[data-v-f530d4b9]{ width: 100vw;
}
.bulk-actions[data-v-f530d4b9]{ top: 56px;
}
}

/* Backdrop for mobile */
.sidebar-backdrop[data-v-0f3f6256]{
  position:fixed; inset:0; background:rgba(10,14,18,.45);
  z-index:1095;
}

/* Shell */
.sidebar[data-v-0f3f6256]{
  position:fixed; top:0; left:0; z-index:1100;
  width:300px; height:100vh; display:flex; flex-direction:column;
  background:#ffffff;
  border-right:1px solid #e6edf3;
  box-shadow:2px 0 12px rgba(13,38,76,.08);
  padding:12px 12px 10px;
  overflow-y:auto;
  transition:transform .28s ease;
}

/* Mobile slide */
.sidebar.small-screen[data-v-0f3f6256]{ transform:translateX(-102%); height:100vh;
}
.sidebar.open.small-screen[data-v-0f3f6256]{ transform:translateX(0);
}

/* Close button (mobile) */
.close-btn[data-v-0f3f6256]{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid #e6edf3; background:#fff; color:#425461;
  display:inline-flex; align-items:center; justify-content:center;
}
.close-btn[data-v-0f3f6256]:hover{ background:#f0f4f8;
}

/* Header band */
.sidebar-head[data-v-0f3f6256]{
  display:grid;
  grid-template-columns: 1fr auto;  /* logo left, bell right */
  grid-template-rows: auto auto;    /* company name on row 2 */
  align-items:center;
  gap:8px 10px;
  padding:6px 6px;
  background:#fff;
  border-radius:10px;
}
.sidebar-logo[data-v-0f3f6256]{
  grid-column:1 / 2;
  grid-row:1 / 2;
  height:80px;              /* cap the logo height */
  width:auto;               /* keep aspect ratio */
  object-fit:contain;
  display:block;
  margin:0;                 /* no extra space */
  margin-left: -15px;
}
.company-name[data-v-0f3f6256]{
  grid-column:1 / -1;       /* span both columns */
  grid-row:2 / 3;
  color:#425461; font-weight:600; font-size:.9rem;
  line-height:1.25;
  white-space:normal;       /* allow wrapping */
  overflow-wrap:anywhere;   /* break long words */
  word-break:break-word;    /* safety */
  margin-top:2px;
}
.bell-btn[data-v-0f3f6256]{
  grid-column:2 / 3;
  grid-row:1 / 2;
  position:relative;
  border:1px solid #e6edf3;
  background:#fff; color:#425461;
  width:36px; height:36px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bell-btn[data-v-0f3f6256]:hover{ background:#f0f4f8;
}
.notification-badge[data-v-0f3f6256]{
  position:absolute; top:-4px; right:-4px;
  background:#C21500; color:#fff; border-radius:999px;
  padding:0 6px; font-size:.65rem; line-height:16px;
}

/* Tighten the divider so links start right after header */
.thin-divider[data-v-0f3f6256]{ border:0; border-top:1px solid #eef2f6; margin:6px 0;
}
.thin-divider-sub[data-v-0f3f6256]{ border:0; border-top:1px dashed #e6edf3; margin:2px 14px;
}

/* Section titles */
.sub-title[data-v-0f3f6256]{
  font-size:.92rem; color:#4F7EB3; font-weight:700;
  padding:6px 10px 2px; display:flex; align-items:center; gap:8px;
}

/* Link lists */
.main-links[data-v-0f3f6256]{ padding:0 6px; margin-top:4px;}
.nav-link[data-v-0f3f6256], .flow-link[data-v-0f3f6256]{
  display:block; text-decoration:none;
  color:#425461; font-size:.86rem; padding:1px 12px; border-radius:8px;
  margin:2px 6px; transition:background .15s ease, color .15s ease;
}
.nav-link[data-v-0f3f6256]:hover, .flow-link[data-v-0f3f6256]:hover{ background:#f4f7fb; color:#4F7EB3;
}

/* Active pill */
.active-link[data-v-0f3f6256]{
  color:#4F7EB3 !important; background:#eef5ff;
  border-left:3px solid #B2C149; padding-left:9px;
  font-weight:700;
}

/* Nested lists */
.flow-list[data-v-0f3f6256], .detection-zone-list[data-v-0f3f6256]{ padding:4px 6px 4px 28px;
}

/* Geometry indicator before a zone name */
.geom-glyph[data-v-0f3f6256]{
  display:inline-flex; align-items:center; gap:3px;
  margin-right:6px; color:#7a8a96; font-size:.78rem;
}
.flow-link.active-link .geom-glyph[data-v-0f3f6256],
.flow-link:hover .geom-glyph[data-v-0f3f6256]{ color:#4F7EB3;
}

/* Expandable headers */
.expandable-header-cameras[data-v-0f3f6256],
.expandable-header-detection-zones[data-v-0f3f6256]{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  color:#425461; font-size:.86rem; padding:1px 12px; margin:0px 6px; border-radius:8px;
}
.expandable-header-cameras[data-v-0f3f6256]:hover,
.expandable-header-detection-zones[data-v-0f3f6256]:hover{ background:#f7f9fb;
}
.triangle-icon[data-v-0f3f6256]{
  display:inline-block; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #425461;
  transform:rotate(-90deg); transition:transform .2s ease;
}
.triangle-icon.expanded[data-v-0f3f6256]{ transform:rotate(0deg);
}

/* Footer */
.sidebar-footer[data-v-0f3f6256]{ margin-top:auto; padding:8px 6px 4px; color:#425461; font-size:.75rem;
}
.connection-status[data-v-0f3f6256]{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.status-label[data-v-0f3f6256]{ font-weight:700; color:#425461;
}
.chip[data-v-0f3f6256]{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:4px 10px; font-size:.78rem;
  border:1px solid #e6edf3; color:#4F7EB3; background:#f7fbff;
}
.chip-ok[data-v-0f3f6256]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df;
}
.chip-warn[data-v-0f3f6256]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf;
}

/* Links aligned with the left edge like the labels/icons above */
.footer-link[data-v-0f3f6256]{
  padding:6px 0; margin:0; border-radius:0;
  color:#425461; font-size:.76rem;
}
.footer-link[data-v-0f3f6256]:hover{ background:transparent; color:#4F7EB3;
}

/* user row in one line, wraps nicely if needed */
.settings-container .user-row[data-v-0f3f6256]{
  display:flex; align-items:center; flex-wrap:wrap;
  column-gap:2px;                 /* space between items on same line */
  row-gap:4px;                    /* tight gap when it wraps */
  padding:4px 0;
  color:#425461; font-size:.78rem;
}

/* name wraps naturally */
.settings-container .user-row .user-name[data-v-0f3f6256]{ white-space:normal;
}
.settings-container .user-row i.bi-person-fill[data-v-0f3f6256]{
  margin-right: 1px; /* explicit icon gap before the name */
}

/* small gap around the dot */
.settings-container .user-row .dot[data-v-0f3f6256]{
  color:#9aa8b3;
  margin:0 6px;
}

/* button styled as a link; pointer cursor */
.settings-container .user-row .logout-link-btn[data-v-0f3f6256]{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:0;
  color:#4F7EB3; font:inherit; cursor:pointer;
  line-height:1.2;
}
.settings-container .user-row .logout-link-btn[data-v-0f3f6256]:hover{ text-decoration:underline;
}

/* if you MUST keep <a class="logout-link"> instead of the button, enforce inline */
.settings-container .user-row .logout-link[data-v-0f3f6256]{
  display:inline !important;
  margin:0 !important; padding:0 !important;
  color:#4F7EB3; cursor:pointer; text-decoration:none;
}
.settings-container .user-row .logout-link[data-v-0f3f6256]:hover{ text-decoration:underline;
}

/* Top bar icons (mobile) */
.hamburger[data-v-0f3f6256]{
  position:fixed; top:10px; left:10px; z-index:1100;
  font-size:26px; color:#425461; cursor:pointer;
}
.mobile-bell[data-v-0f3f6256]{
  position:fixed; top:12px; left:54px; z-index:1100; color:#425461; cursor:pointer;
}
.notification-bell[data-v-0f3f6256]{ position:relative;
}
.disabled-link[data-v-0f3f6256] {
  color: #9ca3af !important;     /* light grey */
  font-style: italic;
  pointer-events: none;           /* visually and functionally disabled */
  opacity: 0.8;
}
.nav-link[data-v-0f3f6256],
.nav-sublink[data-v-0f3f6256] {
  display: block;
  padding: 3px 10px;
  text-decoration: none;
}
.submenu-title[data-v-0f3f6256] { cursor: default;
}
.submenu[data-v-0f3f6256] { list-style: none; margin: 6px 0 0; padding-left: 12px;
}

/* Scrollbar (webkit) */
.sidebar[data-v-0f3f6256]::-webkit-scrollbar{ width:10px;
}
.sidebar[data-v-0f3f6256]::-webkit-scrollbar-thumb{ background:#e6edf3; border-radius:10px;
}
.sidebar[data-v-0f3f6256]::-webkit-scrollbar-thumb:hover{ background:#d7e2ee;
}

/* Responsive width */
@media (max-width: 992px){
.sidebar[data-v-0f3f6256]{ width:280px;
}
}
@media (max-width: 768px){
.sidebar[data-v-0f3f6256]{ width:56vw;
}

    /* move the close a hair inward & smaller */
.close-btn[data-v-0f3f6256]{
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
}

    /* reserve space on the right of the header equal to the close button width */
.sidebar-head[data-v-0f3f6256]{
        padding-right: 56px;   /* 32px button + ~24px breathing room */
}

    /* nudge/smaller bell so it never bumps the close button */
.bell-btn[data-v-0f3f6256]{
        width: 32px;
        height: 32px;
        margin-right: 4px;      /* tiny inset from the header edge */
        justify-self: end;      /* keep it at the right of grid column */
}
.notification-badge[data-v-0f3f6256]{
        top: -3px;
        right: -3px;
}
}

/* Greyed-out zone-type tease header (lock chip on the right). Used for
   zone types that aren't backed by demo synthetic data — keeps the viewer
   aware they exist as features in the live product. */
.zone-type-tease-lock[data-v-0f3f6256]{
    margin-left: 6px;
    font-size: 0.75em;
    opacity: 0.6;
}
.expandable-header-detection-zones.disabled-link[data-v-0f3f6256]{
    cursor: not-allowed;
    pointer-events: auto;
}
.expandable-header-detection-zones.disabled-link .triangle-icon[data-v-0f3f6256]{
    opacity: 0.4;
}

/* Page content adjustments */
.content[data-v-86e41341] {
  margin-left: 280px; /* Adjust based on sidebar width */
  padding: 20px;
  width: calc(100% - 280px);
}
.content--full[data-v-86e41341] {
  margin-left: 0 !important;
  width: 100% !important;
}
@media (max-width: 768px) {
.content[data-v-86e41341],
  .content--full[data-v-86e41341] {
    margin-left: 0;
    width: 100%;
}
}