/* Shell / card */
.insights-shell[data-v-fe1e9287]{
border:1px solid #e6edf3;
border-radius:12px;
box-shadow:0 3px 12px rgba(13,38,76,.08);
overflow:hidden;
}
/* Header */
.insights-header[data-v-fe1e9287]{
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-fe1e9287]{
display:flex; align-items:center; gap:10px;
}
.title-wrap .bi-lightbulb[data-v-fe1e9287]{ color:#4F7EB3; font-size:1.1rem;
}
.title[data-v-fe1e9287]{
margin:0; font-size:1.1rem; font-weight:700; color:#4F7EB3;
}
/* Controls */
.header-controls[data-v-fe1e9287]{ display:flex; align-items:center; gap:8px;
}
.stora-btn-secondary[data-v-fe1e9287]{
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-fe1e9287]:hover{ background:#B2C149;
}
.stora-btn-secondary[data-v-fe1e9287]:disabled{ opacity:.6; cursor:not-allowed;
}
.icon-close[data-v-fe1e9287]{
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-fe1e9287]:hover{ background:#f0f4f8;
}
/* Body */
.insights-body[data-v-fe1e9287]{ padding:16px;
}
.hint[data-v-fe1e9287]{
font-size:.85rem; color:#425461; margin:0 0 8px 2px;
}
/* Report content */
[data-v-fe1e9287] .report-container{
display:grid; gap:14px; padding:2px;
}
[data-v-fe1e9287] .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-fe1e9287] .zone-card strong{ color:#B2C149;
}
[data-v-fe1e9287] .zone-card h2{
margin:0; font-size:1rem; color:#4F7EB3;
border-bottom:2px solid #f0f2f6; padding:8px 0 10px;
}
[data-v-fe1e9287] .zone-card h3{
margin:0; font-size:.98rem; color:#425461;
border-bottom:1px solid #f0f2f6; padding:8px 0 8px;
}
[data-v-fe1e9287] .zone-card ul{ list-style:disc inside; margin:.6rem 0;
}
[data-v-fe1e9287] .zone-card li{ margin-bottom:.4rem;
}
/* Loader */
.loader-overlay[data-v-fe1e9287]{
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-fe1e9287]{ color:#8899a6; font-size:.9rem; margin:0 0 10px;
}
.loader[data-v-fe1e9287]{
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-fe1e9287 1s infinite linear;
}
@keyframes spinner-fe1e9287 {
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-09918c69] {
position: relative;
width: 100%;
height: 100%;
}
.heatmap-overlay[data-v-09918c69] {
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-09918c69] {
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-09918c69] {
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-09918c69] {
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-09918c69 1s infinite linear;
}
@keyframes spinner-09918c69 {
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-fd89b8cf] {
align-items: center;
border-radius: 8px;
}
.table-wrapper[data-v-fd89b8cf] {
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 0.375rem;
overflow-x: visible;
}
.hint[data-v-fd89b8cf] {
margin-top: 6px;
font-size: 0.72rem;
color: #6b7280;
}
/* ============================================================================
Store summary card (hero KPIs)
============================================================================ */
.intro-and-summary[data-v-fd89b8cf] {
margin-bottom: 8px;
}
.store-summary-card[data-v-fd89b8cf]{
min-width: 260px;
background:#fafafa;
border:1px solid #e9eef3;
border-radius:10px;
padding:10px 12px;
}
.pzi-intro[data-v-fd89b8cf] {
margin-bottom: 14px;
margin-top: 34px;
}
.pzi-intro h5[data-v-fd89b8cf] {
margin: 0 0 4px;
font-weight: 600;
color: #425461;
}
.pzi-intro p[data-v-fd89b8cf] {
margin: 0;
font-size: 13px;
color: #6b7a87;
}
.ssc-grid[data-v-fd89b8cf]{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-items: center;
}
/* each KPI column */
.ssc-kpi[data-v-fd89b8cf]{
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-fd89b8cf]:not(:last-child){
border-right: 1px solid #e9eef3;
padding-right: 12px;
}
.ssc-label[data-v-fd89b8cf]{
color:#537786;
font-size:.85rem;
}
.ssc-value[data-v-fd89b8cf]{
font-weight:700;
color:#004F6E;
font-variant-numeric: tabular-nums;
}
.ssc-danger[data-v-fd89b8cf]{
color:#7a0911;
}
.ssc-delta[data-v-fd89b8cf],
.kpi-delta[data-v-fd89b8cf] {
margin-top: 4px;
font-size: 11px;
color: #7a8895;
display: flex;
align-items: center;
gap: 4px;
}
.delta-arrow[data-v-fd89b8cf] {
font-size: 11px;
}
.delta-arrow.up[data-v-fd89b8cf] {
color: #2e7d32; /* green */
}
.delta-arrow.down[data-v-fd89b8cf] {
color: #b3261e; /* red */
}
.delta-arrow.flat[data-v-fd89b8cf] {
color: #9aa7b3; /* neutral */
}
.delta-main[data-v-fd89b8cf] {
font-weight: 600;
}
.delta-extra[data-v-fd89b8cf] {
opacity: 0.9;
}
/* For Missed Value: inverted meaning */
.ssc-kpi--missed .delta-arrow.up[data-v-fd89b8cf] {
color: #b3261e; /* more missed € = bad */
}
.ssc-kpi--missed .delta-arrow.down[data-v-fd89b8cf] {
color: #2e7d32; /* less missed € = good */
}
/* ============================================================================
Table base
============================================================================ */
table[data-v-fd89b8cf] {
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-fd89b8cf], th[data-v-fd89b8cf] {
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-fd89b8cf] {
background: rgba(33, 37, 41, 0.03);
font-weight: 600;
}
.title-cell[data-v-fd89b8cf] {
text-align: left;
min-width: 0;
}
.title-cell-row[data-v-fd89b8cf] {
text-align: left;
min-width: 0;
font-size: clamp(0.78rem, 0.25vw + 0.7rem, 0.9rem);
}
.zone-name-cell[data-v-fd89b8cf] {
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-fd89b8cf], .zone-name-cell[data-v-fd89b8cf], .title-cell[data-v-fd89b8cf] {
line-height: 1.8;
}
.bar-cell[data-v-fd89b8cf] {
min-width: 0;
}
.zone-head-name[data-v-fd89b8cf] {
font-weight: 600;
color: #425461;
}
.zone-head-chip[data-v-fd89b8cf] {
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-fd89b8cf] {
flex: 0 0 auto;
}
.zone-head-chip .chip-text[data-v-fd89b8cf] {
min-width: 0;
}
.zone-head-chip .chip-text-short[data-v-fd89b8cf] {
display: none;
}
/* reuse pattern colors from Prioritization */
.zone-head-chip.pat-awareness[data-v-fd89b8cf] { background:#fff0d0; color:#9a6b00;
}
.zone-head-chip.pat-attention[data-v-fd89b8cf] { background:#fff0f0; color:#9a2727;
}
.zone-head-chip.pat-reach[data-v-fd89b8cf] { background:#EAF7F7; color:#2E8B8E;
}
.zone-head-chip.pat-neutral[data-v-fd89b8cf] { background:#eef2ff; color:#355b8c;
}
.zone-head-chip.pat-strong[data-v-fd89b8cf] { background:#F4FAF5; color:#2f6f3a;
}
/* ============================================================================
Band headers
============================================================================ */
.band-header td[data-v-fd89b8cf] {
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-fd89b8cf] {
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-fd89b8cf],
.band-economics .kpi-main[data-v-fd89b8cf] {
background: #f8fafc;
border: 1px solid #e9eef3;
border-radius: 10px;
padding: 10px 12px;
}
.kpi-main[data-v-fd89b8cf] {
display: flex;
flex-direction: column;
align-items: center;
}
.kpi-value[data-v-fd89b8cf] {
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-fd89b8cf] {
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-fd89b8cf],
.pos-bar-outer[data-v-fd89b8cf] {
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-fd89b8cf] {
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-fd89b8cf] {
background: #e6e6e6 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* KPI banner for total store visitors */
.kpi-cell[data-v-fd89b8cf] {
padding: 8px 10px;
background: transparent;
}
.visitor-bar-label[data-v-fd89b8cf],
.pos-bar-label[data-v-fd89b8cf] {
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-fd89b8cf] {
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-fd89b8cf] { color: #9ca3af;
}
/* ============================================================================
Economics visuals (values & assumptions)
============================================================================ */
.value-cell[data-v-fd89b8cf] {
text-align: center;
font-weight: 600;
color: #36910d;
background-color: #f7fff7;
}
.value-cell.lost[data-v-fd89b8cf] {
color: #c21500;
background-color: #fff5f5;
}
.assump-cell[data-v-fd89b8cf] {
background: #fcfefe;
padding: 8px 10px;
}
.assump-chip[data-v-fd89b8cf] {
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-fd89b8cf] {
background: #fbfdfb;
}
.summary-row .summary-cell[data-v-fd89b8cf] {
border: 1px solid #e2efe4;
border-radius: 10px;
padding: 8px 10px;
}
.pill[data-v-fd89b8cf] {
display: inline-block;
margin: 4px 8px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 0.85rem;
}
.pill-green[data-v-fd89b8cf] {
color: #256029;
background: #e7f6ea;
border: 1px solid #bfe6c6;
}
.pill-red[data-v-fd89b8cf] {
color: #7a0911;
background: #fde8ea;
border: 1px solid #f6c2c7;
}
.small-text[data-v-fd89b8cf] {
font-size: 10px;
}
/* ============================================================================
Scenario sliders (What-if band)
============================================================================ */
.scenario-cell[data-v-fd89b8cf] {
background: #fcfefe;
vertical-align: top;
padding: 8px 10px;
}
.slider-container[data-v-fd89b8cf] {
width: 100%;
}
.slider[data-v-fd89b8cf] {
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-fd89b8cf] {
margin-top: 40px;
margin-bottom: 40px; /* extra ruimte tussen sliders onderling */
}
.slider-note[data-v-fd89b8cf] {
display: inline-block;
padding-left: 5px;
padding-top: 12px;
font-size: small;
}
.note-accent[data-v-fd89b8cf] { color: #B2C149;
}
.delta-line[data-v-fd89b8cf] {
margin-top: 8px;
font-size: 0.85rem;
color: #23485b;
}
.delta-daily[data-v-fd89b8cf] { color: #537786;
}
.delta-subline[data-v-fd89b8cf] {
margin-top: 2px;
font-size: 0.78rem;
color: #6b7280; /* subtle gray */
}
.scenario-return-pill[data-v-fd89b8cf] {
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-fd89b8cf] {
vertical-align: top;
}
.insights-cell[data-v-fd89b8cf] {
vertical-align: top;
padding: 10px 8px;
}
.insights-list[data-v-fd89b8cf] {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
font-size: 0.82rem;
line-height: 1.25rem;
}
.insights-list li[data-v-fd89b8cf] {
position: relative;
padding-left: 14px;
margin: 4px 0;
color: #004F6E; /* same blue as your table text */
}
/* tiny bullet */
.insights-list li[data-v-fd89b8cf]::before {
content: '•';
position: absolute;
left: 0;
top: 0;
color: #9ca3af; /* subtle gray bullet */
}
.insights-more-btn[data-v-fd89b8cf] {
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-fd89b8cf]:hover {
background: #eaf0f4;
}
/* ============================================================================
Responsive
============================================================================ */
@media (max-width: 1830px) {
.zone-head-chip[data-v-fd89b8cf] {
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-fd89b8cf] {
max-width: 120px;
padding: 3px 10px;
font-size: 11px;
}
.zone-head-chip .chip-text-full[data-v-fd89b8cf] {
display: none;
}
.zone-head-chip .chip-text-short[data-v-fd89b8cf] {
display: inline;
}
}
@media (max-width: 1500px) {
.zone-head-chip .chip-text-short[data-v-fd89b8cf] {
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-fd89b8cf],
.bar-cell .pos-bar-outer[data-v-fd89b8cf] {
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-fd89b8cf] {
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-fd89b8cf]::before,
.bar-cell .pos-bar-outer[data-v-fd89b8cf]::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-fd89b8cf],
.bar-cell .pos-bar-fill[data-v-fd89b8cf],
.bar-cell .visitor-bar-solid[data-v-fd89b8cf] {
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-fd89b8cf],
.bar-cell .pos-bar-label[data-v-fd89b8cf] {
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-fd89b8cf]{
grid-template-columns: 1fr;
gap: 8px;
}
.ssc-kpi[data-v-fd89b8cf]: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-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf] * {
font-size: 0.8rem !important;
}
.visitor-bar-outer[data-v-fd89b8cf] { height: 18px;
}
}
@media (max-width: 475px) {
.table-wrapper th[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf] * {
font-size: 0.7rem !important;
}
.visitor-bar-outer[data-v-fd89b8cf] { height: 17px;
}
}
@media (max-width: 440px) {
.table-wrapper th[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf] * {
font-size: 0.6rem !important;
}
.visitor-bar-outer[data-v-fd89b8cf] { height: 16px;
}
}
@media (max-width: 410px) {
.table-wrapper th[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf] * {
font-size: 0.5rem !important;
}
.visitor-bar-outer[data-v-fd89b8cf] { height: 15px;
}
}
@media (max-width: 375px) {
.table-wrapper th[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf],
.table-wrapper td[data-v-fd89b8cf] * {
font-size: 0.4rem !important;
}
.visitor-bar-outer[data-v-fd89b8cf] { height: 14px;
}
}
.no-data-message[data-v-e7aaf221]{ color:gray; text-align:center; margin:20px 0
}
.no-data-message[data-v-611ba391]{ color:gray; text-align:center; margin:20px 0
}
/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-83b7165a] {
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-83b7165a] {
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-83b7165a] {
border: 1px solid #e6edf3;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
overflow: hidden;
}
.insights-header[data-v-83b7165a] {
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-83b7165a] {
display: flex;
align-items: center;
gap: 10px;
}
.title-wrap .bi-question-circle[data-v-83b7165a] {
color: #4f7eb3;
font-size: 1.1rem;
}
.title[data-v-83b7165a] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #4f7eb3;
}
.header-controls[data-v-83b7165a] {
display: flex;
align-items: center;
gap: 8px;
}
.icon-close[data-v-83b7165a] {
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-83b7165a]:hover {
background: #f0f4f8;
}
.insights-body[data-v-83b7165a] {
padding: 16px;
}
.insights-footer[data-v-83b7165a] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
background: #f7f9fb;
border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-83b7165a] {
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-83b7165a]:hover {
background: #b2c149;
}
/* === Stacked content layout === */
.modal-explainer[data-v-83b7165a] {
display: flex;
flex-direction: column;
gap: 28px;
align-items: stretch;
}
.block[data-v-83b7165a] {
min-width: 0;
padding-top: 4px;
}
/* every block that follows another block gets a subtle divider */
.block + .block[data-v-83b7165a] {
border-top: 1px solid #e5e7f0; /* light grey, not your brand blue */
padding-top: 24px; /* space between border and heading */
}
.block--example[data-v-83b7165a] {
background: #f7fafc;
border-radius: 8px;
padding: 16px 18px 18px;
border: 1px solid #e5e7f0;
}
/* formula block */
.pz-formula-card[data-v-83b7165a] {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
}
.pz-formula-row[data-v-83b7165a] {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-bottom: 14px;
}
.pz-formula-row[data-v-83b7165a]:last-child {
margin-bottom: 0;
}
.pz-formula-label[data-v-83b7165a] {
font-weight: 600;
color: #111827;
min-width: 130px;
}
.pz-formula-eq[data-v-83b7165a] {
flex: 1;
color: #4b5563;
}
/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-83b7165a] {
font-size: 13px;
}
/* example bar */
.efficiency-bar[data-v-83b7165a] {
height: 10px;
background: #e9edf3;
border-radius: 6px;
overflow: hidden;
}
.efficiency-bar .engaged[data-v-83b7165a] {
height: 100%;
background: #4f7eb3;
}
.table .num[data-v-83b7165a],
.num[data-v-83b7165a] {
text-align: right;
}
/* Responsive tweak: narrower screens */
@media (max-width: 900px) {
.modal-window[data-v-83b7165a] {
margin-left: 0;
margin-right: 0;
max-width: 95vw;
}
}
.eff-card[data-v-9c4107f2] {
--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-9c4107f2] {
opacity: 0.55;
filter: grayscale(0.25);
}
.eff-title-row[data-v-9c4107f2] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 0px 0px 4px;
}
.eff-title[data-v-9c4107f2] {
font-weight: 800;
font-size: 16px;
color: #2b3a46;
letter-spacing: .2px;
}
.eff-prev-badge[data-v-9c4107f2] {
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-9c4107f2] {
background: #E8F7F0;
color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-9c4107f2] {
background: #FDE7EA;
color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-9c4107f2] {
background: #f3f6fa;
color: #6b7a87;
}
/* two columns: gauge | values */
.eff-main[data-v-9c4107f2] {
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-9c4107f2] { 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-9c4107f2] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px}
.eff-status[data-v-9c4107f2] {
display: grid;
justify-items: left;
row-gap: 6px;
text-align: left;
padding-bottom: 20px;
}
.eff-help-btn[data-v-9c4107f2] {
border: none;
background: none;
margin-left: auto;
margin-right: 6px;
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-9c4107f2]:hover {
color: #004F6E;
}
.dot-prev[data-v-9c4107f2] {
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-9c4107f2] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-9c4107f2] { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-9c4107f2] {
display: inline-flex;
align-items: center;
gap: 10px; /* chip ⟷ text */
}
.chip[data-v-9c4107f2] {
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-9c4107f2] {
font-weight: 800;
font-size: 14px;
}
.status-expl[data-v-9c4107f2] {
max-width: 640px;
color: #556372;
font-size: 13px;
line-height: 1.35;
}
.status-hints[data-v-9c4107f2] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-9c4107f2] {
margin-top: 8px;
padding: 10px 6px 6px;
border-top: 1px solid #eef2f7;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hint-chip[data-v-9c4107f2] {
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-9c4107f2] {
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-9c4107f2] {
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-9c4107f2] {
border: none;
background: none;
margin: 0; /* let flexbox place it */
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-9c4107f2]:hover {
color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-9c4107f2] {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.eff-main[data-v-9c4107f2] { grid-template-columns: 1fr;
}
.eff-values[data-v-9c4107f2] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-9c4107f2] { justify-content: center;
}
}
/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-adb474ea] {
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-adb474ea] {
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-adb474ea] {
border: 1px solid #e6edf3;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
overflow: hidden;
}
.insights-header[data-v-adb474ea] {
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-adb474ea] {
display: flex;
align-items: center;
gap: 10px;
}
.title-wrap .bi-question-circle[data-v-adb474ea] {
color: #4f7eb3;
font-size: 1.1rem;
}
.title[data-v-adb474ea] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #4f7eb3;
}
.header-controls[data-v-adb474ea] {
display: flex;
align-items: center;
gap: 8px;
}
.icon-close[data-v-adb474ea] {
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-adb474ea]:hover {
background: #f0f4f8;
}
.insights-body[data-v-adb474ea] {
padding: 16px;
}
.insights-footer[data-v-adb474ea] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
background: #f7f9fb;
border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-adb474ea] {
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-adb474ea]:hover {
background: #b2c149;
}
/* === Stacked content layout === */
.modal-explainer[data-v-adb474ea] {
display: flex;
flex-direction: column;
gap: 28px;
align-items: stretch;
}
.block[data-v-adb474ea] {
min-width: 0;
padding-top: 4px;
}
/* every block that follows another block gets a subtle divider */
.block + .block[data-v-adb474ea] {
border-top: 1px solid #e5e7f0; /* light grey, not your brand blue */
padding-top: 24px; /* space between border and heading */
}
.block--example[data-v-adb474ea] {
background: #f7fafc;
border-radius: 8px;
padding: 16px 18px 18px;
border: 1px solid #e5e7f0;
}
/* formula block */
.pz-formula-card[data-v-adb474ea] {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
}
.pz-formula-row[data-v-adb474ea] {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-bottom: 14px;
}
.pz-formula-row[data-v-adb474ea]:last-child {
margin-bottom: 0;
}
.pz-formula-label[data-v-adb474ea] {
font-weight: 600;
color: #111827;
min-width: 130px;
}
.pz-formula-eq[data-v-adb474ea] {
flex: 1;
color: #4b5563;
}
/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-adb474ea] {
font-size: 13px;
}
/* example bar */
.efficiency-bar[data-v-adb474ea] {
height: 10px;
background: #e9edf3;
border-radius: 6px;
overflow: hidden;
}
.efficiency-bar .engaged[data-v-adb474ea] {
height: 100%;
background: #4f7eb3;
}
.table .num[data-v-adb474ea],
.num[data-v-adb474ea] {
text-align: right;
}
/* Responsive tweak: narrower screens */
@media (max-width: 900px) {
.modal-window[data-v-adb474ea] {
margin-left: 0;
margin-right: 0;
max-width: 95vw;
}
}
.eff-card[data-v-be4bab22] {
--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-be4bab22] {
opacity: 0.55;
filter: grayscale(0.25);
}
.eff-title-row[data-v-be4bab22] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 0px 0px 4px;
}
.eff-title[data-v-be4bab22] {
font-weight: 800;
font-size: 16px;
color: #2b3a46;
letter-spacing: .2px;
}
.eff-prev-badge[data-v-be4bab22] {
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-be4bab22] {
background: #E8F7F0;
color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-be4bab22] {
background: #FDE7EA;
color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-be4bab22] {
background: #f3f6fa;
color: #6b7a87;
}
/* two columns: gauge | values */
.eff-main[data-v-be4bab22] {
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-be4bab22] { 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-be4bab22] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px}
.eff-status[data-v-be4bab22] {
display: grid;
justify-items: left;
row-gap: 6px;
text-align: left;
padding-bottom: 20px;
}
.eff-help-btn[data-v-be4bab22] {
border: none;
background: none;
margin-left: auto;
margin-right: 6px;
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-be4bab22]:hover {
color: #004F6E;
}
.dot-prev[data-v-be4bab22] {
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-be4bab22] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-be4bab22] { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-be4bab22] {
display: inline-flex;
align-items: center;
gap: 10px; /* chip ⟷ text */
}
.chip[data-v-be4bab22] {
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-be4bab22] {
font-weight: 800;
font-size: 14px;
}
.status-expl[data-v-be4bab22] {
max-width: 640px;
color: #556372;
font-size: 13px;
line-height: 1.35;
}
.status-hints[data-v-be4bab22] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-be4bab22] {
margin-top: 8px;
padding: 10px 6px 6px;
border-top: 1px solid #eef2f7;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hint-chip[data-v-be4bab22] {
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-be4bab22] {
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-be4bab22] {
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-be4bab22] {
border: none;
background: none;
margin: 0; /* let flexbox place it */
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-be4bab22]:hover {
color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-be4bab22] {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.eff-main[data-v-be4bab22] { grid-template-columns: 1fr;
}
.eff-values[data-v-be4bab22] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-be4bab22] { justify-content: center;
}
}
/* === Overlay & window (same geometry) === */
.modal-overlay[data-v-939eeeed] {
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-939eeeed] {
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-939eeeed] {
border: 1px solid #e6edf3;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(13, 38, 76, 0.08);
overflow: hidden;
}
.insights-header[data-v-939eeeed] {
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-939eeeed] {
display: flex;
align-items: center;
gap: 10px;
}
.title-wrap .bi-question-circle[data-v-939eeeed] {
color: #4f7eb3;
font-size: 1.1rem;
}
.title[data-v-939eeeed] {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #4f7eb3;
}
.header-controls[data-v-939eeeed] {
display: flex;
align-items: center;
gap: 8px;
}
.icon-close[data-v-939eeeed] {
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-939eeeed]:hover {
background: #f0f4f8;
}
.insights-body[data-v-939eeeed] {
padding: 16px;
}
.insights-footer[data-v-939eeeed] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
background: #f7f9fb;
border-top: 1px solid #e6edf3;
}
.stora-btn-secondary[data-v-939eeeed] {
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-939eeeed]:hover {
background: #b2c149;
}
/* === Stacked content layout === */
.modal-explainer[data-v-939eeeed] {
display: flex;
flex-direction: column;
gap: 28px;
align-items: stretch;
}
.block[data-v-939eeeed] {
min-width: 0;
padding-top: 4px;
}
/* every block that follows another block gets a subtle divider */
.block + .block[data-v-939eeeed] {
border-top: 1px solid #e5e7f0; /* light grey, not your brand blue */
padding-top: 24px; /* space between border and heading */
}
.block--example[data-v-939eeeed] {
background: #f7fafc;
border-radius: 8px;
padding: 16px 18px 18px;
border: 1px solid #e5e7f0;
}
/* formula block */
.pz-formula-card[data-v-939eeeed] {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
}
.pz-formula-row[data-v-939eeeed] {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-bottom: 14px;
}
.pz-formula-row[data-v-939eeeed]:last-child {
margin-bottom: 0;
}
.pz-formula-label[data-v-939eeeed] {
font-weight: 600;
color: #111827;
min-width: 130px;
}
.pz-formula-eq[data-v-939eeeed] {
flex: 1;
color: #4b5563;
}
/* Optional: slightly smaller text inside the card */
.pz-formula-card[data-v-939eeeed] {
font-size: 13px;
}
/* example bar */
.efficiency-bar[data-v-939eeeed] {
height: 10px;
background: #e9edf3;
border-radius: 6px;
overflow: hidden;
}
.efficiency-bar .engaged[data-v-939eeeed] {
height: 100%;
background: #4f7eb3;
}
.table .num[data-v-939eeeed],
.num[data-v-939eeeed] {
text-align: right;
}
/* Responsive tweak: narrower screens */
@media (max-width: 900px) {
.modal-window[data-v-939eeeed] {
margin-left: 0;
margin-right: 0;
max-width: 95vw;
}
}
.eff-card[data-v-f09e30e6] {
--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-f09e30e6] {
opacity: 0.55;
filter: grayscale(0.25);
}
.eff-title-row[data-v-f09e30e6] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 0px 0px 4px;
}
.eff-title[data-v-f09e30e6] {
font-weight: 800;
font-size: 16px;
color: #2b3a46;
letter-spacing: .2px;
}
.eff-prev-badge[data-v-f09e30e6] {
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-f09e30e6] {
background: #E8F7F0;
color: #2C6F58;
}
.eff-prev-badge.delta-down[data-v-f09e30e6] {
background: #FDE7EA;
color: #B44A55;
}
.eff-prev-badge.delta-flat[data-v-f09e30e6] {
background: #f3f6fa;
color: #6b7a87;
}
/* two columns: gauge | values */
.eff-main[data-v-f09e30e6] {
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-f09e30e6] { 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-f09e30e6] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px; gap:30px;}
.eff-status[data-v-f09e30e6] {
display: grid;
justify-items: left;
row-gap: 6px;
text-align: left;
padding-bottom: 20px;
}
.eff-help-btn[data-v-f09e30e6] {
border: none;
background: none;
margin-left: auto;
margin-right: 6px;
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-f09e30e6]:hover {
color: #004F6E;
}
.dot-prev[data-v-f09e30e6] {
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-f09e30e6] { color: #6b7a87; font-size: 12px;
}
.k-val[data-v-f09e30e6] { color: #2b3a46; font-weight: 800; font-size: 18px;
}
.status-top[data-v-f09e30e6] {
display: inline-flex;
align-items: center;
gap: 10px; /* chip ⟷ text */
}
.chip[data-v-f09e30e6] {
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-f09e30e6] {
font-weight: 800;
font-size: 14px;
}
.status-expl[data-v-f09e30e6] {
max-width: 640px;
color: #556372;
font-size: 13px;
line-height: 1.35;
}
.status-hints[data-v-f09e30e6] { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.eff-hints-footer[data-v-f09e30e6] {
margin-top: 8px;
padding: 10px 6px 6px;
border-top: 1px solid #eef2f7;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hint-chip[data-v-f09e30e6] {
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-f09e30e6] {
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-f09e30e6] {
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-f09e30e6] {
border: none;
background: none;
margin: 0; /* let flexbox place it */
line-height: 1;
cursor: pointer;
color: #9ca3af;
}
.eff-help-btn[data-v-f09e30e6]:hover {
color: #004F6E;
}
@media (max-width: 900px) {
.eff-title-row[data-v-f09e30e6] {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.eff-main[data-v-f09e30e6] { grid-template-columns: 1fr;
}
.eff-values[data-v-f09e30e6] { display: flex; justify-self: center; margin-top: -110px; margin-bottom: 100px;}
.eff-hints-footer[data-v-f09e30e6] { justify-content: center;
}
}
/* Unsupported period note */
.unsupported[data-v-936542cd] { border:1px solid #ffe6cc; background:#fff8f0; color:#8a5a00; border-radius:12px; padding:14px 16px; margin-top:6px;
}
.unsupported-title[data-v-936542cd] { font-weight:700; margin-bottom:6px;
}
.empty[data-v-936542cd] { padding:18px; background:#f7f9fb; border:1px dashed #d9e3f2; border-radius:10px; color:#8596a7;
}
/* ============================================================
CARD LIST
============================================================ */
.pz-grid[data-v-936542cd] { display:flex; flex-direction:column; gap:14px;
}
/* Card = left strip + content */
.pz-card[data-v-936542cd] {
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-936542cd] { display:flex; flex-direction:column; gap:8px; padding-right:8px; border-right:1px solid #eef2f8;
}
.pz-body[data-v-936542cd] { display:block;
}
.rank[data-v-936542cd] { font-weight:700; color:#6B92C6;
}
.zone[data-v-936542cd] { font-weight:600; color:#425461;
}
/* Chips (pattern + role) */
.pattern-label[data-v-936542cd], .role-pill[data-v-936542cd] {
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-936542cd], .role-pill .emoji[data-v-936542cd] { flex:0 0 auto; filter:saturate(0.9);
}
/* Pattern chip colors */
.pz-card.pat-awareness .pattern-label[data-v-936542cd] { background:#fff0d0; color:#9a6b00;
}
.pz-card.pat-attention .pattern-label[data-v-936542cd] { background:#fff0f0; color:#9a2727;
}
.pz-card.pat-reach .pattern-label[data-v-936542cd] { background:#EAF7F7; color:#2E8B8E;
}
.pz-card.pat-neutral .pattern-label[data-v-936542cd] { background:#eef2ff; color:#355b8c;
}
.pattern-strong[data-v-936542cd] { background:#f8fafc;
}
/* Card background tints */
.pz-card.pat-awareness[data-v-936542cd] { border-color:#ffe5b4; background:#fff9f1;
}
.pz-card.pat-attention[data-v-936542cd] { border-color:#ffc4c4; background:#fff4f4;
}
.pz-card.pat-reach[data-v-936542cd] { border-color:#BFE9E9; background:#F3FBFB;
}
.pz-card.pat-neutral[data-v-936542cd] { border-color:#e8eef7; background:#f6f8ff;
}
/* Strong performer muted */
.pz-card.pat-strong[data-v-936542cd] { border-color:#e0e6ec; background:#f8fafc; opacity:.75; transition:opacity .2s ease;
}
.pz-card.pat-strong[data-v-936542cd]:hover { opacity:1;
}
/* Keep actionable cards steady on hover */
.pz-card.pat-awareness[data-v-936542cd]:hover { background:#fff9f1; opacity:1;
}
.pz-card.pat-attention[data-v-936542cd]:hover { background:#fff4f4; opacity:1;
}
.pz-card.pat-reach[data-v-936542cd]:hover { background:#f4fbf5; opacity:1;
}
.pz-card.pat-neutral[data-v-936542cd]:hover { background:#f6f8ff; opacity:1;
}
.pz-card .num[data-v-936542cd], .pz-card .kpv[data-v-936542cd] { text-align:left;
}
.pz-card.muted[data-v-936542cd] { opacity:.65;
}
/* Role pill colors (mirrors pattern) */
.role-pill[data-v-936542cd] { margin-top:4px; border:1px solid transparent;
}
.pz-card.pat-awareness .role-pill[data-v-936542cd] { background:#fff0d0; color:#9a6b00; border-color:#ffe5b4;
}
.pz-card.pat-attention .role-pill[data-v-936542cd] { background:#fff0f0; color:#9a2727; border-color:#ffc4c4;
}
.pz-card.pat-reach .role-pill[data-v-936542cd] { background:#EAF7F7; color:#2E8B8E; border-color:#BFE9E9;
}
.pz-card.pat-neutral .role-pill[data-v-936542cd] { background:#eef2ff; color:#355b8c; border-color:#e8eef7;
}
.pz-card.pat-strong .role-pill[data-v-936542cd] { background:#F4FAF5; color:#2f6f3a; border-color:#f8fafc;
}
.role-pill .role-text[data-v-936542cd] { overflow:hidden; text-overflow:ellipsis;
}
/* Value grid (right column) */
.pz-row-grid[data-v-936542cd]{
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 € */
1fr; /* Actions */
gap:8px 16px; align-items:start; width:100%; min-width:0;
}
.kpl[data-v-936542cd] { font-size:11px; color:#7a8895;
}
.kpv[data-v-936542cd] { font-weight:700; color:#2e3b46;
}
.num[data-v-936542cd] { font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1;
}
.is-empty .kpv[data-v-936542cd], .is-empty .subnote[data-v-936542cd], .kpv.muted[data-v-936542cd] { color:#9aa7b3;
}
.kpl .muted[data-v-936542cd] { color:#7a8895;
}
.col-trend[data-v-936542cd] { grid-template-rows:auto auto 14px;
}
.trend-value[data-v-936542cd] { display:flex; align-items:center; gap:6px;
}
.arrow.up[data-v-936542cd] { color:#2e7d32;
}
.arrow.down[data-v-936542cd] { color:#b3261e;
}
.arrow.flat[data-v-936542cd] { color:#8fa2b7;
}
.subnote[data-v-936542cd] { font-size:11px; color:#9aa7b3; line-height:14px;
}
/* Remaining potential (Eng/Conv) */
.col-rem[data-v-936542cd] { grid-template-rows:auto auto;
}
.col-rem .kpv[data-v-936542cd] { display:grid; gap:2px; min-width:0;
}
.col-rem .rem-line[data-v-936542cd] { display:flex; align-items:baseline; gap:6px; min-width:0;
}
.rem-label[data-v-936542cd] { font-size:11.5px; font-weight:600; color:#7a8895; letter-spacing:.2px; flex:0 0 auto;
}
.rem-val[data-v-936542cd] { font-size:13px; font-weight:700; color:#2b3a46; min-width:0;
}
/* Focus lever colors (aligned with TopOpportunities) */
.focus[data-v-936542cd] { font-size:13px; color:#354551;
}
.focus .lever.eng[data-v-936542cd] { color:#4F7EB3;
}
.focus .lever.conv[data-v-936542cd] { color:#B2C149;
}
.pz-card.muted .focus .lever.eng[data-v-936542cd] { color:#6B92C6;
}
.pz-card.muted .focus .lever.conv[data-v-936542cd] { color:#9FB45A;
}
/* Actions area */
.col-actions[data-v-936542cd], .col-actions .actions-row[data-v-936542cd], .col-actions .suggestion[data-v-936542cd] { min-width:0 !important; max-width:100%; width:100%;
}
.col-actions .actions-row[data-v-936542cd] { display:block !important;
}
.col-actions .suggestion[data-v-936542cd] { display:block; white-space:normal !important; overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}
.actions-pills[data-v-936542cd] { display:flex; flex-wrap:wrap; gap:6px 8px; padding-top:10px;
}
.action-pill[data-v-936542cd] { 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; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-card.pat-awareness .action-pill[data-v-936542cd]{ background:#fff4e1; border-color:#ffe5b4;
}
.pz-card.pat-attention .action-pill[data-v-936542cd]{ background:#ffecec; border-color:#ffc4c4;
}
.pz-card.pat-reach .action-pill[data-v-936542cd]{ background:#edf7ef; border-color:#cfe8d2;
}
.pz-card.pat-neutral .action-pill[data-v-936542cd]{ background:#eef4ff; border-color:#e0e8fa;
}
.action-pill .bi[data-v-936542cd] { font-size:13px; opacity:.9;
}
.action-pill[data-v-936542cd]:focus { outline:2px solid #9FC8E3; outline-offset:1px; border-radius:999px;
}
/* ============================================================
LAYOUT & HEADER
============================================================ */
.prioritization-panel[data-v-74c0b120] { display:flex; flex-direction:column; gap:16px; overflow-x:hidden;
}
.pz-head.stacked[data-v-74c0b120] { display:flex; flex-direction:column; gap:10px; margin-bottom:6px;
}
/* ROW of gauges */
.gauges-row[data-v-74c0b120] {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
/* Each gauge card container */
.gauge-item[data-v-74c0b120] {
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-74c0b120] {
width: 100%;
}
/* Help button still anchored to first gauge */
.pz-help-btn[data-v-74c0b120] {
position: absolute;
top: 10px;
right: 14px;
}
.pz-help-btn[data-v-74c0b120] { position:absolute; top:6px; right:8px; padding:0; margin:0; line-height:1; color:var(--stora-muted);
}
.pz-help-btn[data-v-74c0b120]:hover { color:var(--stora-accent);
}
.title-under-gauge h3[data-v-74c0b120] { margin:0; color:#425461; font-weight:700; padding-top:40px;
}
.subtitle[data-v-74c0b120] { color:#6b7a87; font-size:13px;
}
/* ============================================================
CHARTS
============================================================ */
.charts-summary[data-v-74c0b120] { display:grid; grid-template-columns:1fr; gap:30px; margin-top:40px;
}
.chart-row[data-v-74c0b120] { display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
.chart-block[data-v-74c0b120] { 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-74c0b120] { overflow:hidden;
}
.modal-overlay[data-v-74c0b120] { 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-74c0b120] { 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-74c0b120] { border:1px solid #e6edf3; border-radius:12px; box-shadow:0 3px 12px rgba(13,38,76,.08); overflow:hidden;
}
.insights-header[data-v-74c0b120] { 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-74c0b120] { display:flex; align-items:center; gap:10px;
}
.title-wrap .bi-question-circle[data-v-74c0b120]{ color:#4F7EB3; font-size:1.1rem;
}
.title[data-v-74c0b120]{ margin:0; font-size:1.1rem; font-weight:700; color:#4F7EB3;
}
.header-controls[data-v-74c0b120]{ display:flex; align-items:center; gap:8px;
}
.icon-close[data-v-74c0b120]{ 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-74c0b120]:hover{ background:#f0f4f8;
}
.insights-body[data-v-74c0b120]{ padding:16px;
}
.insights-footer[data-v-74c0b120]{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; background:#f7f9fb; border-top:1px solid #e6edf3;
}
.stora-btn-secondary[data-v-74c0b120]{ 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-74c0b120]:hover{ background:#B2C149;
}
.modal-explainer[data-v-74c0b120]{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start;
}
.modal-explainer .left[data-v-74c0b120], .modal-explainer .right[data-v-74c0b120] { min-width:0;
}
.efficiency-bar[data-v-74c0b120] { height:10px; background:#e9edf3; border-radius:6px; overflow:hidden;
}
.efficiency-bar .engaged[data-v-74c0b120] { height:100%; background:#4F7EB3;
}
.pz-formula[data-v-74c0b120] { 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-74c0b120] { border:0; border-top:1px solid #425461; margin:20px auto; width:80%;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1600px){
.pz-row-grid[data-v-74c0b120]{
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-74c0b120]{ grid-column:1 / -1;
}
.chart-row[data-v-74c0b120]{ grid-template-columns:1fr; gap:16px;
}
}
@media (max-width:1400px){
.pz-row-grid[data-v-74c0b120]{ grid-template-columns:1fr 1fr; gap:10px 14px;
}
.col-impact[data-v-74c0b120], .col-actions[data-v-74c0b120]{ grid-column:1 / -1;
}
}
@media (max-width:1250px){
.pz-row-grid[data-v-74c0b120]{ grid-template-columns:1fr; gap:8px;
}
}
.kpi-card[data-v-34482c43]{
--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-34482c43]{ opacity:.65; filter:grayscale(.1)
}
.kpi-head[data-v-34482c43]{ display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem
}
.kpi-icon[data-v-34482c43]{ font-size:1rem; opacity:.9; color:var(--accent)
}
.kpi-label[data-v-34482c43]{ font-weight:600; letter-spacing:.2px
}
/* value row (prop or slot) – consistent typography */
.kpi-value[data-v-34482c43]{ display:flex; align-items:baseline; gap:.4rem
}
.kpi-value .num[data-v-34482c43]{ font-weight:700; line-height:1
}
.kpi-value .suffix[data-v-34482c43]{ color:var(--sub); font-weight:600
}
/* meta line */
.kpi-meta[data-v-34482c43]{ margin-top:.25rem; color:var(--sub); font-size:.85rem
}
/* sizes */
.kpi-sm .num[data-v-34482c43]{ font-size:1.2rem
}
.kpi-md .num[data-v-34482c43]{ font-size:2rem
}
.kpi-lg .num[data-v-34482c43]{ font-size:2.4rem
}
/* unified state view */
.kpi-state[data-v-34482c43]{
display:flex; align-items:center; gap:.5rem; color:#6b7a86; min-height:40px;
}
.state-ico[data-v-34482c43]{ font-size:1.1rem; opacity:.8
}
.loader[data-v-34482c43]{
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-34482c43 1s linear infinite;
}
@keyframes spin-34482c43{to{transform:rotate(1turn)}}
.panel[data-v-5f5cbe98]{
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 */
}
.panel.muted[data-v-5f5cbe98]{ opacity:.65; filter:grayscale(.1)
}
.panel-head[data-v-5f5cbe98]{
display:flex; justify-content:space-between; align-items:center;
padding:10px 12px; color:#425461;
border-bottom:1px solid #eef3f7;
}
.panel-head .title[data-v-5f5cbe98]{ display:flex; align-items:center; gap:.5rem
}
.panel-head .title i[data-v-5f5cbe98]{ color:var(--accent); opacity:.9
}
.panel-head h6[data-v-5f5cbe98]{ margin:0; font-weight:700
}
.panel-body[data-v-5f5cbe98]{
position:relative;
height: var(--panel-h, 320px);
padding: 6px 8px 10px;
}
/* chart slot gets full space */
.panel-slot[data-v-5f5cbe98]{ width:100%; height:100%;
}
/* state view (centered, consistent with KpiCard) */
.state[data-v-5f5cbe98]{
position:absolute; inset:0;
display:flex; gap:.5rem; align-items:center; justify-content:center;
color:#6b7a86;
}
.state-ico[data-v-5f5cbe98]{ font-size:1.1rem; opacity:.85
}
.loader[data-v-5f5cbe98]{
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-5f5cbe98 1s linear infinite;
}
@keyframes spin-5f5cbe98{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;
}
}
/* ============================================================
TREND CARD CONTENT
============================================================ */
.trend-short[data-v-4928655b] {
font-weight: 700;
font-size: 1.0rem;
line-height: 1.1;
}
.trend-sentence[data-v-4928655b] {
display: block;
color: #6b7a86;
font-size: .9rem;
line-height: 1.25;
}
/* ============================================================
BAR-LIST (Visitors/Average dwell lists)
============================================================ */
.barlist[data-v-4928655b] { display:flex; flex-direction:column; gap:10px;
}
.barlist-row[data-v-4928655b] { display:grid; grid-template-columns: 160px 1fr auto; align-items:center; gap:10px;
}
.barlist-label[data-v-4928655b] { color:#425461; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barlist-bar[data-v-4928655b] { height:10px; background:#eef3f7; border-radius:999px; overflow:hidden;
}
.barlist-fill[data-v-4928655b] { height:100%; background:#004F6E; border-radius:999px; opacity:.85;
}
.barlist-value[data-v-4928655b] { font-variant-numeric: tabular-nums; color:#2b3a44;
}
/* ============================================================
FUNNEL TABLE
============================================================ */
.funnelz-table[data-v-4928655b] { display: grid; gap: 8px;
}
.funnelz-row[data-v-4928655b] {
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-4928655b] { font-weight: 600; background: #f7fafc;
}
.zone-name[data-v-4928655b] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num[data-v-4928655b] { text-align: right; font-variant-numeric: tabular-nums;
}
.num small[data-v-4928655b] { color: #6b7a86; margin-left: 4px;
}
.funnelz-row .merge-3[data-v-4928655b] { grid-column: 3 / span 3; text-align: center;
}
.funnelz-row .insufficient-msg[data-v-4928655b] { color: #6b7a86; font-style: italic;
}
/* ============================================================
STATE / UTILITY
============================================================ */
.card-disabled[data-v-4928655b] { opacity: 0.5; pointer-events: none; background-color: #ffffff;
}
.group-disabled[data-v-4928655b] { border: 2px dashed #dcdcdc; background-color: #ffffff; opacity: 0.7;
}
/* ============================================================
MODAL (Allen’s insights)
============================================================ */
.modal-overlay[data-v-4928655b] {
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-4928655b] {
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-4928655b] {
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-4928655b] {
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-4928655b 1s infinite linear;
}
@keyframes spinner-4928655b {
to { transform: rotate(1turn)
}
}
/* ============================================================
RESPONSIVE (kept only where still referenced)
============================================================ */
@media (max-width: 1600px) {
.charts-grid[data-v-4928655b] { grid-template-columns: 1fr;
}
.grid-container-product-data[data-v-4928655b] { grid-template-columns: 1fr;
}
}
@media (max-width: 1500px) {
.grid-container-product-data[data-v-4928655b] { grid-template-columns: 1fr;
}
.card-stack[data-v-4928655b] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-right: 0;
}
}
@media (max-width: 1400px) {
.chart-container[data-v-4928655b] { flex-direction: column; gap: 1rem;
}
.chart-wrapper[data-v-4928655b] { flex: 1 1 100%; max-width: 100%;
}
}
@media (max-width: 900px){
.funnelz-row[data-v-4928655b] { grid-template-columns: 1.2fr .6fr .8fr .9fr .9fr;
}
}
@media (max-width: 768px) {
.modal-window[data-v-4928655b] { margin-left: 20px;
}
}
@media (max-width: 600px) {
.grid-container-product-data[data-v-4928655b] { grid-template-columns: 1fr;
}
.card-stack[data-v-4928655b] { display: grid; grid-template-columns: 1fr; gap: 10px; margin-right: 0;
}
}
.panel-min-140[data-v-216ac0bd] .panel-body { min-height: 140px;
}
/* 2 columns with gap; collapse to 1 under 1200px */
.live-two-col[data-v-216ac0bd]{
display: grid;
grid-template-columns: 1fr 1.25fr; /* tweak ratio as you like */
gap: 16px;
align-items: start; /* so right table doesn’t stretch tall left */
margin-top: 12px;
}
/* vertical spacing for stacked panels on the left */
.stack[data-v-216ac0bd] > * + *{ margin-top: 12px;
}
/* Remove unwanted top spacing from the first chart in each column */
.live-left[data-v-216ac0bd] > *:first-child,
.live-right[data-v-216ac0bd] > *:first-child {
margin-top: 0 !important;
}
/* Let the ChartPanel grow with its children */
.auto-h[data-v-216ac0bd] .panel-body{
height: auto !important;
}
.auto-h[data-v-216ac0bd] .panel-slot{
height: auto !important;
}
.kpi-row[data-v-216ac0bd] {
display: grid;
/* ↓ smaller min width so 4–5 can fit on wide screens */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
align-items: stretch;
}
.kpi-pill[data-v-216ac0bd] {
background: #f7f9fb;
border: 1px solid #e6edf3;
border-radius: 12px;
padding: 10px 12px; /* tighter padding */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 360px; /* smaller cap so they don't get too wide */
width: 100%;
justify-self: center;
}
.kpi-pill p[data-v-216ac0bd] {
margin: 0 0 4px 0;
font-size: 0.95rem; /* slightly smaller number */
font-weight: 400;
}
.kpi-cap[data-v-216ac0bd] {
color: #6b7a86;
font-size: 0.8rem;
line-height: 1.15;
}
/* Keep the big number center-aligned like other KPIs */
.kpi-center[data-v-216ac0bd]{
height:100%; display:flex; align-items:center; justify-content:center;
}
.current-counter[data-v-216ac0bd]{
font-size: clamp(42px, 3.2vw, 56px); color:#36910d;
}
.text-ok[data-v-216ac0bd]{ color:#2F9E44; font-size:1.2rem;
}
.text-warn[data-v-216ac0bd]{ color:#ffd32c; font-size:1.2rem;
}
.table-wrapper[data-v-216ac0bd]{ border:1px solid #e6edf3; border-radius:10px; overflow:hidden;
}
.stora-table[data-v-216ac0bd]{ width:100%; border-collapse:collapse;
}
.stora-table th[data-v-216ac0bd], .stora-table td[data-v-216ac0bd]{ padding:10px; border-bottom:1px solid #eef3f7;
}
.stora-table thead th[data-v-216ac0bd]{
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-216ac0bd]{ border-bottom:0;
}
.icon-cell[data-v-216ac0bd]{ text-align:center;
}
/* Optional: allow even denser rows on very wide screens */
@media (min-width: 1600px) {
.kpi-row[data-v-216ac0bd] {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
}
@media (max-width: 1200px){
.live-two-col[data-v-216ac0bd]{ grid-template-columns: 1fr;
}
.live-left[data-v-216ac0bd], .live-right[data-v-216ac0bd]{ grid-column: 1;
}
}
/* Optional: tighter layout on small screens */
@media (max-width: 880px) {
.kpi-row[data-v-216ac0bd] { grid-template-columns: 1fr;
}
.kpi-pill[data-v-216ac0bd] { max-width: 520px;
}
}
.table-wrapper[data-v-e61e9740]{ border:1px solid #e6edf3; border-radius:10px; overflow:hidden;
}
.stora-table[data-v-e61e9740]{ width:100%; border-collapse:collapse;
}
.stora-table th[data-v-e61e9740], .stora-table td[data-v-e61e9740]{ padding:10px; border-bottom:1px solid #eef3f7;
}
.stora-table thead th[data-v-e61e9740]{
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-e61e9740]{ border-bottom:0;
}
.muted[data-v-e61e9740]{ color:#9aa7b1;
}
/* visitor bar - unchanged */
.visitor-bar-outer[data-v-e61e9740]{ position:relative; height:20px; border:1px solid #ddd; border-radius:4px; background:#fff; overflow:hidden;
}
.visitor-bar-gradient[data-v-e61e9740]{
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-e61e9740]{ background:#e6e6e6 !important; -webkit-mask-image:none !important; mask-image:none !important;
}
.visitor-bar-gradient.zero-fill[data-v-e61e9740]{ visibility:hidden;
}
.visitor-bar-label[data-v-e61e9740]{
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-e61e9740] .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-e61e9740] {
position:absolute;
width:1px; height:1px; overflow:hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.stora-table[data-v-e61e9740], .stora-table tbody[data-v-e61e9740], .stora-table tr[data-v-e61e9740], .stora-table td[data-v-e61e9740] { display:block; width:100%;
}
.stora-table tr[data-v-e61e9740] {
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-e61e9740] {
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-e61e9740]:last-child { border-bottom:0;
}
/* inject the header name for each cell from data-th="" */
.stora-table td[data-v-e61e9740]::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-e61e9740] { height:18px;
}
}
/* Even narrower: put label above value */
@media (max-width: 520px) {
.stora-table td[data-v-e61e9740] { grid-template-columns: 1fr;
}
.stora-table td[data-v-e61e9740]::before {
margin-bottom: 2px;
}
}
/* Right-aligned action button inside the Section head */
.ask-allen-btn[data-v-5f27028e]{
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-5f27028e]:hover{ background-color:#b2c149;
}
/* Overlay for the popup */
.popup-overlay[data-v-5f27028e] {
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-5f27028e] {
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-5f27028e] {
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-5f27028e] {
background-color: #4f7eb3;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.close-btn[data-v-5f27028e]:hover {
background-color: #b2c149;
color: #fff;
}
.chat-container[data-v-5f27028e] {
flex-grow: 1;
overflow-y: auto; /* Enables scrolling */
padding: 15px;
background-color: white;
display: flex;
flex-direction: column;
}
.chat-messages[data-v-5f27028e] {
flex-grow: 1;
overflow-y: auto;
padding: 15px;
background-color: white;
display: flex;
flex-direction: column;
}
/* Scrollbar Styling */
.chat-messages[data-v-5f27028e]::-webkit-scrollbar {
width: 6px;
}
.chat-messages[data-v-5f27028e]::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 10px;
}
.chat-messages[data-v-5f27028e]::-webkit-scrollbar-track {
background: transparent;
}
/* General Chat Bubble Styling */
.chat-bubble[data-v-5f27028e] {
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-5f27028e] {
font-weight: bold;
font-size: 12px;
margin-bottom: 5px;
}
/* Chat Timestamp */
.chat-timestamp[data-v-5f27028e] {
font-size: 10px;
opacity: 0.6;
align-self: flex-end;
margin-top: 5px;
}
/* Assistant Message (Left Side) */
.assistant[data-v-5f27028e] {
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-5f27028e] {
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-5f27028e]::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-5f27028e]::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-5f27028e] {
display: flex;
padding: 15px;
border-top: 1px solid #ccc;
background-color: rgba(33, 37, 42, 0.03);
}
.chat-input input[data-v-5f27028e] {
flex: 1;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.chat-input textarea[data-v-5f27028e] {
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-5f27028e] {
margin-left: 10px;
padding: 10px 15px;
background-color: #4f7eb3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.chat-input button[data-v-5f27028e]:hover {
background-color: #b2c149;
}
/* Prevent background scrolling when the popup is open */
body.modal-open[data-v-5f27028e] {
overflow: hidden;
}
/* Prevent Scrolling from Propagating to the Underlying Page */
.chat-messages[data-v-5f27028e]:hover {
overscroll-behavior: contain;
}
.thinking[data-v-5f27028e] {
opacity: 0.7;
font-style: italic;
color: gray;
animation: fadeInOut-5f27028e 1.5s infinite alternate ease-in-out;
}
@keyframes fadeInOut-5f27028e {
0% { opacity: 0.4;
}
100% { opacity: 0.7;
}
}
.loader[data-v-5f27028e] {
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-5f27028e 1s infinite linear;
}
@keyframes spinner-5f27028e {to{transform: rotate(1turn)}}
/* Mobile: stack title (row 1) and button (row 2) */
@media (max-width: 1080px){
.ask-allen-btn[data-v-5f27028e]{ 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-3507ada3] { position: relative;
}
.section-head[data-v-3507ada3]{
margin-top: 50px;
}
/* 2-col -> 1-col responsive grid (like other pages) */
.live-grid[data-v-3507ada3]{
display: grid;
grid-template-columns: 1fr;
padding-top: 20px;
padding-bottom: 40px;
}
/* Fullscreen loader */
.loader-overlay.fullscreen[data-v-3507ada3]{
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.8);
}
.loader[data-v-3507ada3] {
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-3507ada3 1s linear infinite;
}
@keyframes spinner-3507ada3 {
to { transform: rotate(1turn)
}
}
/* Modal shell (content only; overlay handled by parent) */
.modal-content[data-v-c077f2e8]{
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-c077f2e8]{
position:relative;
border:none;
border-radius:14px;
overflow:hidden;
display:flex; /* NEW */
flex-direction:column; /* NEW */
max-height:inherit; /* NEW */
}
.kpi-accent[data-v-c077f2e8]::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:8px;
background:var(--accent,#4F7EB3);
}
/* Header */
.modal-head[data-v-c077f2e8]{
flex:0 0 auto; /* NEW */
padding:12px 36px;
border-bottom:1px solid #eef3f7;
background:#fff;
}
.card-title[data-v-c077f2e8]{
margin:0;
color:#425461;
font-weight:800;
}
.dz-name[data-v-c077f2e8]{ color:#2b3a44; font-weight:800
}
.zone-type-line[data-v-c077f2e8]{
display:flex;
align-items:center;
gap:8px;
margin-top:6px;
}
.zone-dot[data-v-c077f2e8]{
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-c077f2e8]{ color:#6b7a86; font-weight:700
}
.form-label-type[data-v-c077f2e8]{ font-weight:800; color:#425461
}
/* Body (scrollable zone) */
.modal-body[data-v-c077f2e8]{
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-c077f2e8]::-webkit-scrollbar{ width:10px;
}
.modal-body[data-v-c077f2e8]::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:8px;
}
.modal-body[data-v-c077f2e8]::-webkit-scrollbar-thumb:hover{ background:#b6c2d0;
}
.modal-body[data-v-c077f2e8]{ scrollbar-width:thin; scrollbar-color:#cfd8e3 transparent;
}
.block[data-v-c077f2e8]{ margin-bottom:16px
}
.divider-soft[data-v-c077f2e8]{ border:0; border-top:1px solid #eef3f7; margin:10px 0
}
/* Subcards (section boxes) */
.subcard[data-v-c077f2e8]{
border:1px solid #e6edf3;
border-radius:12px;
margin-top:66px;
overflow:hidden;
box-shadow:0 2px 8px rgba(13,38,76,.05);
}
.subcard-head[data-v-c077f2e8]{
padding:10px 12px;
border-bottom:1px solid #eef3f7;
background:#f9fbfd
}
.subcard-title[data-v-c077f2e8]{ margin:0; color:#4F7EB3; font-weight:800
}
.subcard-body[data-v-c077f2e8]{ padding:12px 12px
}
/* Labels & inputs */
.form-label[data-v-c077f2e8]{
display:block;
margin-bottom:.35rem;
font-weight:700;
color:#425461
}
.with-help[data-v-c077f2e8]{ display:inline-flex; align-items:center; gap:6px
}
.form-select[data-v-c077f2e8], .form-control[data-v-c077f2e8], .input-group-text[data-v-c077f2e8]{
border:1px solid #dfe7ee;
border-radius:10px;
padding:8px 10px;
color:#2b3a44;
margin-bottom: 36px;
}
.form-select[data-v-c077f2e8]:focus, .form-control[data-v-c077f2e8]:focus{
border-color:#4F7EB3;
outline:none;
box-shadow:0 0 0 3px rgba(79,126,179,.12);
}
.input-group[data-v-c077f2e8]{ display:flex; align-items:center; gap:8px
}
.input-group.narrow[data-v-c077f2e8]{ max-width:300px
}
.input-group-text[data-v-c077f2e8]{
background:#f9fbfd;
color:#4F7EB3;
font-weight:800;
border-width:1px;
}
/* Radios */
.radio-row[data-v-c077f2e8]{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:6px
}
.radio-line[data-v-c077f2e8]{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
margin-top:8px
}
.icon-muted[data-v-c077f2e8]{ color:#425461; opacity:.9
}
.sep[data-v-c077f2e8]{ color:#425461
}
/* Slider */
.slider-container[data-v-c077f2e8]{ width:100%
}
.slider[data-v-c077f2e8]{
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-c077f2e8]{
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-c077f2e8]:hover{ background:#e6eef4; color:#425461
}
/* Footer */
.modal-foot[data-v-c077f2e8]{
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-c077f2e8]{ display:flex; align-items:center; gap:10px
}
.saving[data-v-c077f2e8]{ display:flex; align-items:center; gap:8px; color:#6b7a86
}
/* Buttons */
.btn-solid[data-v-c077f2e8], .btn-outline[data-v-c077f2e8]{
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
border-radius:10px;
padding:8px 12px;
}
.btn-solid[data-v-c077f2e8]{ border:0; color:#fff
}
.btn-solid.ok[data-v-c077f2e8]{ background:#6C9046
}
.btn-solid.warn[data-v-c077f2e8]{ background:#f0ad00; color:#1b1b1b
}
.btn-solid[data-v-c077f2e8]:disabled, .btn-disabled[data-v-c077f2e8]{ opacity:.55; cursor:not-allowed
}
.btn-outline[data-v-c077f2e8]{
border:1px solid #4F7EB3;
background:#fff;
color:#4F7EB3;
}
.btn-outline[data-v-c077f2e8]:hover{ background:#4F7EB3; color:#fff
}
.btn-outline-disabled[data-v-c077f2e8]{ opacity:.55; cursor:not-allowed
}
/* Loaders */
.saver[data-v-c077f2e8]{
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-c077f2e8 1s linear infinite;
}
@keyframes spinner-c077f2e8{
to{ transform:rotate(1turn)
}
}
.dz-head[data-v-73c73bac]{ margin-top:10px; margin-bottom:8px; color:#425461
}
.dz-note[data-v-73c73bac]{ font-size:.9rem; color:#C21500; margin-top:0
}
.frame-container[data-v-73c73bac]{ max-width:100%; overflow:hidden; padding-top:10px
}
.frame-content[data-v-73c73bac]{ position:relative; max-width:100%; max-height:1000px; overflow:auto
}
.frame-content img[data-v-73c73bac]{ width:auto; height:auto; max-width:none; max-height:none
}
/* show visually that editing is disabled */
.frame-content.disabled[data-v-73c73bac] {
cursor: not-allowed;
}
.canvas[data-v-73c73bac]{ position:absolute; top:0; left:0; pointer-events:none
}
.center[data-v-73c73bac]{ display:flex; align-items:center; justify-content:center; padding:40px 0
}
.fallback[data-v-73c73bac]{ padding:40px 0; text-align:center; color:#999
}
.dot[data-v-73c73bac]{
position:absolute; width:6px; height:6px; background:#e63946; border-radius:50%;
transform:translate(-50%, -50%);
}
/* Grid */
.zone-grid[data-v-73c73bac]{
display:grid; grid-template-columns: 2fr 1.5fr 1.2fr; gap:0; margin-top:18px;
border:1px solid #eef3f7; border-radius:12px; overflow:hidden;
}
.zone-row[data-v-73c73bac]{ display:contents
}
.zone-row[data-v-73c73bac] > *{ padding:10px 12px; border-bottom:1px solid #eef3f7; background:#fff
}
.zone-row[data-v-73c73bac]:last-child > *{ border-bottom:none
}
.header[data-v-73c73bac] > *{
background:#f8fbff; color:#4F7EB3; font-weight:800; border-bottom:1px solid #e6edf3;
}
/* Inputs + actions */
.input[data-v-73c73bac]{
width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:8px 10px;
background:#fff; color:#2b3a44; outline:none;
}
.input[data-v-73c73bac]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.actions[data-v-73c73bac]{ display:flex; gap:8px; align-items:center
}
.icon-btn[data-v-73c73bac]{
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-73c73bac]:hover{ background:#f4f9ff
}
.icon-btn.danger[data-v-73c73bac]{ color:#C21500
}
.icon-btn[data-v-73c73bac]:disabled{ opacity:.45; cursor:not-allowed
}
/* Take new picture */
.btn-outline[data-v-73c73bac]{
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-73c73bac]:hover{ background:#4F7EB3; color:#fff
}
/* Disabled look for outline buttons */
.btn-outline[data-v-73c73bac]:disabled,
.btn-outline[disabled][data-v-73c73bac] {
opacity: .55;
cursor: not-allowed;
background: #f0f4f8;
color: #9aa8b4;
border-color: #d3dbe3;
}
/* Prevent hover style when disabled */
.btn-outline[data-v-73c73bac]:disabled:hover,
.btn-outline[disabled][data-v-73c73bac]:hover {
background: #f0f4f8;
color: #9aa8b4;
}
.mt[data-v-73c73bac]{ margin-top:16px
}
/* Modal */
.modal-overlay[data-v-73c73bac]{
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-73c73bac]{
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-73c73bac 1s linear infinite;
}
@keyframes spinner-73c73bac{
to{ transform:rotate(1turn)
}
}
/* ====== Header ====== */
.section-head[data-v-08630dbf]{
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-08630dbf]{ margin:0; font-weight:800; color:#425461; display:flex; align-items:center; gap:8px
}
.icon-inline[data-v-08630dbf]{
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-08630dbf]:hover{ background:#f4f9ff
}
.head-left[data-v-08630dbf]{ display:flex; flex-direction:column; gap:10px
}
.head-actions[data-v-08630dbf]{ display:flex; gap:10px; flex-wrap:wrap
}
.name-edit[data-v-08630dbf]{ max-width:520px
}
.input[data-v-08630dbf]{
width:100%; border:1px solid #dfe7ee; border-radius:10px; padding:10px 12px; background:#fff; color:#2b3a44; outline:none;
}
.input.center[data-v-08630dbf]{ text-align:center
}
.input[data-v-08630dbf]:focus{ border-color:#4F7EB3; box-shadow:0 0 0 3px rgba(79,126,179,.12)
}
.banner-warn[data-v-08630dbf]{
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-08630dbf]{ position:relative; border:none; box-shadow:0 4px 18px rgba(13,38,76,.06); border-radius:14px
}
.kpi-accent[data-v-08630dbf]::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-08630dbf]{
display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eef3f7;
}
.form-title[data-v-08630dbf]{ margin:0; color:#4F7EB3; font-weight:800
}
.card-body[data-v-08630dbf]{ padding:14px 16px
}
/* camera stream read-only block */
.read-block[data-v-08630dbf]{ margin-bottom:12px
}
.read-label[data-v-08630dbf]{ display:block; font-weight:700; color:#425461; margin-bottom:4px
}
.read-value[data-v-08630dbf]{ margin:0; background:#f8fbff; border:1px dashed #e6edf3; border-radius:10px; padding:10px 12px
}
.muted[data-v-08630dbf]{ color:#6b7a86; word-break:break-all
}
/* DZ area */
.dz-wrap[data-v-08630dbf]{ margin-top:12px
}
/* footer */
.form-actions[data-v-08630dbf]{
display:flex; gap:10px; align-items:center; justify-content:flex-end;
padding:12px 16px; border-top:1px solid #eef3f7;
}
.saving[data-v-08630dbf]{ margin-right:auto; display:flex; align-items:center; gap:8px; color:#6b7a86
}
/* ====== Buttons ====== */
.btn-outline[data-v-08630dbf]{
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-08630dbf]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-08630dbf]{
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-08630dbf]{ background:#6C9046
}
.btn-solid.danger[data-v-08630dbf]{ background:#C21500
}
.btn-solid[data-v-08630dbf]:disabled{ opacity:.55; cursor:not-allowed
}
/* ====== Loaders ====== */
.loader-wrap[data-v-08630dbf]{ display:flex; justify-content:center; padding:16px 0
}
.loader[data-v-08630dbf]{
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-08630dbf 1s linear infinite;
}
.saver[data-v-08630dbf]{
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-08630dbf 1s linear infinite;
}
@keyframes spinner-08630dbf{
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-c7f7de80] {
width: 100%;
height: 100%;
}
.chart-container[data-v-1a34e799] {
width: 100%;
height: 100%;
}
.chart-container[data-v-9aad26df] {
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-0e5327ac] {
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-0e409328] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
align-items: stretch;
}
.trend-block[data-v-0e409328]{
display:flex; align-items:flex-start; gap:.6rem;
background:#f9fbfd;
border:1px solid #e6edf3;
border-radius:10px;
padding:.8rem .9rem;
}
.main-icon[data-v-0e409328]{ font-size:1.6rem; margin-top:.1rem; flex-shrink:0;
}
.trend-details[data-v-0e409328]{ flex:1; min-width:0;
}
.trend-details h6[data-v-0e409328]{ margin:0 0 .35rem; font-size:1rem; font-weight:600; color:#425461;
}
.badge[data-v-0e409328]{ display:inline-block; color:#fff; border-radius:999px; padding:.15rem .5rem; font-size:.8rem; line-height:1; margin-bottom:.35rem;
}
.explanation[data-v-0e409328]{ 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-0171160e] {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.row2-item[data-v-0171160e] { min-width: 0;
} /* allow charts to shrink nicely */
.row2-span-3[data-v-0171160e] { grid-column: span 3;
}
.row2-span-6[data-v-0171160e] { grid-column: span 6;
}
.zone-row4[data-v-0171160e] {
/* 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-0171160e]{
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-0171160e]{
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
/* Only affect this Trends panel */
.panel-trends[data-v-0171160e] .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-0171160e] .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-0171160e] .panel-slot{
height: auto;
}
.chart-vert-stack[data-v-0171160e]{
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-0171160e]{
margin-top: 140px; text-align: center; color: #425461; font-style: italic;
}
/* Wrapper */
.dashboard-wrapper[data-v-0171160e] { width:100%; overflow-x:hidden; padding-bottom: 40px;}
/* Loader overlay (keep) */
.loader-overlay[data-v-0171160e] {
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-0171160e] { 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-0171160e 1s infinite linear;
}
@keyframes spinner-0171160e {
to { transform: rotate(1turn)
}
}
/* Modal (keep) */
.modal-overlay[data-v-0171160e] {
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-0171160e] {
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-0171160e] { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1520px){
.chart-grid--3[data-v-0171160e] { grid-template-columns: repeat(2, minmax(0,1fr));
}
.row2-grid[data-v-0171160e] { grid-template-columns: 1fr;
}
.row2-span-3[data-v-0171160e], .row2-span-6[data-v-0171160e] { grid-column: 1 / -1;
}
.zone-row4[data-v-0171160e] {
grid-template-columns: 1fr;
}
}
@media (max-width: 1250px){
.chart-grid--3[data-v-0171160e] { grid-template-columns: 1fr;
}
}
/* 2-up inner grid for the split “per day” panels (collapses nicely) */
.chart-grid--2[data-v-0171160e] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1250px){
.chart-grid--2[data-v-0171160e] { 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-80c3a124]{ display:flex; flex-direction:column;
}
.stream-container[data-v-80c3a124]{ width:100%; display:flex; justify-content:space-between;
}
.stream-item[data-v-80c3a124]{ width:100%; position:relative;
}
/* --- Buttons (unchanged brand colors) --- */
.btn-primary-start[data-v-80c3a124]{ background-color:#6C9046 !important; border:none !important;
}
.btn-primary-start[data-v-80c3a124]:disabled{ background:#a9a9a9 !important; cursor:not-allowed !important; border:none !important;
}
.btn-primary[data-v-80c3a124]{ background-color:#4F7EB3 !important; border:none !important;
}
.btn-primary[data-v-80c3a124]:hover{ background-color:#B2C149 !important;
}
/* --- Stream “card” --- */
.stream-frame[data-v-80c3a124]{
/* 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-80c3a124]{
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-80c3a124]{
width:100%;
height:100%;
object-fit:contain; /* show full frame, no crop */
display:block;
}
/* canvas follows the visible box exactly */
#zoneCanvas[data-v-80c3a124]{
position:absolute;
inset:0; /* top/right/bottom/left:0 */
pointer-events:none;
width:100%;
height:100%;
}
/* centered overlay loader */
.loading-overlay[data-v-80c3a124]{
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-80c3a124]{
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-80c3a124 1s infinite linear;
}
@keyframes spinner-80c3a124{
to{ transform:rotate(1turn)
}
}
/* Inherit the layout variables from the parent .kpi-stage */
.kpi-grid[data-v-3ac0293d]{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min, 260px), 1fr));
gap: var(--kpi-gap, 18px);
align-items: stretch;
width: 100%;
}
/* Same card shell as live */
.kpi-card[data-v-3ac0293d]{
background:#fff;
border:none;
border-radius:14px;
box-shadow:0 3px 12px rgba(13,38,76,.06);
padding:14px 16px;
display:flex; flex-direction:column;
min-height:120px;
position:relative;
}
/* Left accent spine identical to parent */
.kpi-card.kpi-accent[data-v-3ac0293d]::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:6px;
background: var(--accent);
border-radius:14px 0 0 14px;
opacity:.95;
}
/* Head/title row */
.kpi-head[data-v-3ac0293d]{ display:flex; align-items:center; gap:.6rem; color:#425461
}
.kpi-icon[data-v-3ac0293d]{ color:var(--accent,#4F7EB3); opacity:.95; font-size:1.05rem
}
.kpi-title[data-v-3ac0293d]{ margin:0; font-size:.95rem; font-weight:500; line-height:1.1
}
.kpi-sub[data-v-3ac0293d]{ font-size:.72rem; color:#81909a; font-weight:600
}
/* Main value */
.kpi-value[data-v-3ac0293d]{ display:flex; align-items:flex-end; min-height:42px
}
.kpi-number[data-v-3ac0293d]{ font-size: clamp(16px, 2.4vw, 22px); font-weight:700; color:#2b3a44
}
/* Duo (combined in/out) */
.kpi-duo[data-v-3ac0293d]{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px
}
.kpi-pill[data-v-3ac0293d]{
border:1px solid #e6edf3; border-radius:10px; padding:8px 10px; background:#f9fbfd;
display:flex; flex-direction:column; gap:2px
}
.kpi-pill .label[data-v-3ac0293d]{ font-size:.75rem; color:#6b7a86; font-weight:400
}
.kpi-pill .val[data-v-3ac0293d]{ font-size: clamp(14px, 1.8vw, 20px); font-weight:500; color:#2b3a44
}
/* No zones */
.no-zones-container[data-v-3ac0293d]{
display:flex; justify-content:center; align-items:center; text-align:center;
width:100%; color:#c1c9cf; margin:16px 0;
}
/* Tiny loader (brand color kept) */
.loader[data-v-3ac0293d]{
width:20px; height: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-3ac0293d 1s linear infinite;
}
.loader.tiny[data-v-3ac0293d]{ width:18px; height:18px
}
@keyframes spinner-3ac0293d{
to{ transform:rotate(1turn)
}
}
/* Active tab with red background and white text */
.nav-tabs[data-v-d8c03a52] {
--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-d8c03a52] {
--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-d8c03a52]{ color:#4F7EB3 !important
}
/* --- Section Head --- */
.section-head[data-v-d8c03a52]{
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-d8c03a52]{ margin:0; font-weight:700; color:#425461
}
.head-left[data-v-d8c03a52]{ display:flex; flex-direction:column; gap:8px
}
.head-actions[data-v-d8c03a52]{ display:flex; align-items:center; gap:8px; flex-wrap:wrap
}
/* Chips */
.chip-row[data-v-d8c03a52]{ display:flex; gap:8px; flex-wrap:wrap
}
.chip[data-v-d8c03a52]{
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-d8c03a52]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df
}
.chip-warn[data-v-d8c03a52]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf
}
.chip-muted[data-v-d8c03a52]{ color:#81909a; background:#f3f5f7
}
/* Buttons */
.btn-ghost[data-v-d8c03a52]{
background:#f7fbff; color:#4F7EB3; border:1px solid #e6edf3;
border-radius:8px; padding:6px 12px; cursor:pointer;
}
.btn-ghost[data-v-d8c03a52]:hover{ background:#eef6ff
}
.btn-outline[data-v-d8c03a52]{
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-d8c03a52]:hover{ background:#4F7EB3; color:#fff
}
.btn-solid[data-v-d8c03a52]{
border:0; border-radius:8px; padding:8px 14px; color:#fff; cursor:pointer;
}
.btn-solid.ok[data-v-d8c03a52]{ background:#6C9046
}
.btn-solid.ok[data-v-d8c03a52]:disabled{ background:#95b376
}
.btn-solid.danger[data-v-d8c03a52]{ background:#C21500
}
.btn-solid.danger[data-v-d8c03a52]:disabled{ background:#de8f85
}
/* Live stream */
.live-stream-wrapper[data-v-d8c03a52]{ width:100%
}
.live-stream-frame[data-v-d8c03a52]{
margin-bottom:12px; border:1px solid #e6edf3; border-radius:12px;
background:#fafafa; padding:8px;
}
/* Sticky controls panel */
.panelish[data-v-d8c03a52]{
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-d8c03a52]{
position:sticky; top:0; z-index:5; margin-bottom:14px;
background:#fff;
}
.top-row[data-v-d8c03a52]{ display:flex; flex-wrap:wrap; gap:16px; align-items:center
}
.form-check-label[data-v-d8c03a52],.form-check-input[data-v-d8c03a52]{ margin:0; display:flex; align-items:center
}
.data-mode-switch[data-v-d8c03a52]{ font-size:14px
}
.form-check-input[data-v-d8c03a52]{ margin-right:6px
}
/* ========== KPI Grid & Card (shared) ========== */
.kpi-grid[data-v-d8c03a52]{
/* 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-d8c03a52]{ --kpi-min: 260px }
}
@media (max-width: 1200px){
.kpi-grid[data-v-d8c03a52]{ --kpi-min: 200px }
}
@media (max-width: 600px) {
.kpi-grid[data-v-d8c03a52]{ --kpi-min: 180px }
}
.kpi-card[data-v-d8c03a52]{
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-d8c03a52]{ min-height:100px
}
.kpi-lg[data-v-d8c03a52]{ min-height:120px
}
/* Internal layout */
.kpi-head[data-v-d8c03a52]{ display:flex; align-items:center; gap:.6rem; color:#425461
}
.kpi-icon[data-v-d8c03a52]{ color:var(--accent, #4F7EB3); opacity:.95; font-size:1.05rem
}
.kpi-title[data-v-d8c03a52]{ margin:0; font-size:.95rem; font-weight:500; line-height:1.1
}
.kpi-sub[data-v-d8c03a52]{ margin-left:.35rem; font-size:.72rem; color:#81909a; font-weight:600
}
.kpi-value[data-v-d8c03a52]{ margin-top:.25rem; display:flex; align-items:center
}
.kpi-number[data-v-d8c03a52]{ font-size: clamp(16px, 2.4vw, 22px); font-weight:700; color:#2b3a44
}
/* two-column “combined” values (in/out) */
.kpi-duo[data-v-d8c03a52]{ display:grid; grid-template-columns:1fr 1fr; gap:10px
}
.kpi-pill[data-v-d8c03a52]{
border:1px solid #e6edf3; border-radius:10px; padding:8px 10px; background:#f9fbfd;
display:flex; flex-direction:column; gap:2px
}
.kpi-pill .label[data-v-d8c03a52]{ font-size:.75rem; color:#6b7a86; font-weight:400
}
.kpi-pill .val[data-v-d8c03a52]{ 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-d8c03a52]{
background:#f8fbff;
}
/* Remove borders on all KPI cards */
.kpi-card[data-v-d8c03a52]{
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-d8c03a52]::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-d8c03a52]{
background:#f4f4f4;
}
/* ========== Section/grid glue ========== */
/* Stage holds both grids and lets them share the SAME column size */
.kpi-stage[data-v-d8c03a52]{
/* 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-d8c03a52]{
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-d8c03a52]{ grid-column: 1 / -1;
}
/* a consistent visual gap between grids */
.kpi-grid + .kpi-grid[data-v-d8c03a52]{ margin-top: 22px;
}
/* Optional responsive nudge for tighter screens */
@media (max-width: 1200px){
.kpi-stage[data-v-d8c03a52]{ --kpi-min: 220px }
}
@media (max-width: 700px) {
.kpi-stage[data-v-d8c03a52]{ --kpi-min: 180px }
}
/* Clean, consistent sticky filter box as a card */
.sticky-filter[data-v-d8c03a52]{
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-d8c03a52]{ display:flex; flex-direction:column; gap:25px; margin-top:20px; margin-left:15px; box-sizing:border-box
}
.cards-container[data-v-d8c03a52]{ display:flex; flex-wrap:wrap; gap:25px; flex:1; box-sizing:border-box
}
.flex-break[data-v-d8c03a52]{ flex-basis:100%; height:0
}
.button-row[data-v-d8c03a52]{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 14px
}
/* Collapsible transition */
.roll-enter-active[data-v-d8c03a52], .roll-leave-active[data-v-d8c03a52]{ transition: transform .35s ease, opacity .35s ease
}
.roll-enter[data-v-d8c03a52], .roll-leave-to[data-v-d8c03a52]{ transform:scaleY(0); opacity:0; transform-origin:top
}
/* Small screens */
@media (max-width:768px){
.stream-counter-container[data-v-d8c03a52]{ margin-left:0
}
.kpi-grid[data-v-d8c03a52]{ 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-15f56527] {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.section-head[data-v-15f56527] {
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-15f56527] {
margin: 0;
font-weight: 800;
color: #425461;
}
.subtitle[data-v-15f56527] {
margin: 2px 0 0;
color: #6b7a86;
font-size: 0.9rem;
}
.btn-outline[data-v-15f56527] {
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-15f56527]:hover {
background: #4F7EB3;
color: #fff;
}
.btn-solid[data-v-15f56527] {
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-15f56527] {
background: #6C9046;
}
.btn-solid.danger[data-v-15f56527] {
background: #C21500;
}
button[data-v-15f56527]:disabled,
.btn-solid[data-v-15f56527]:disabled,
.btn-outline[data-v-15f56527]:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(40%);
}
.btn-solid[data-v-15f56527]:disabled {
background: #c9cfd6 !important;
color: #fff !important;
}
.kpi-accent[data-v-15f56527] {
position: relative;
border: none;
box-shadow: 0 4px 18px rgba(13, 38, 76, 0.06);
border-radius: 14px;
overflow: hidden;
}
.kpi-accent[data-v-15f56527]::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 6px;
background: var(--accent, #4F7EB3);
}
.form-head[data-v-15f56527] {
padding: 12px 16px;
border-bottom: 1px solid #eef3f7;
background: #fff;
}
.form-title[data-v-15f56527] {
margin: 0;
color: #4F7EB3;
font-weight: 800;
}
.card-body[data-v-15f56527] {
padding: 14px 16px;
}
.form-label[data-v-15f56527] {
font-weight: 700;
color: #425461;
}
.muted[data-v-15f56527] {
color: #6b7a86;
margin-top: 4px;
}
.slider-container[data-v-15f56527] {
width: 100%;
}
.slider[data-v-15f56527] {
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-15f56527] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid #eef3f7;
}
.saving[data-v-15f56527] {
display: flex;
align-items: center;
gap: 8px;
color: #6b7a86;
margin-right: auto;
}
.checklist[data-v-15f56527] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.check-item[data-v-15f56527] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #425461;
}
.user-table[data-v-15f56527] {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.user-table th[data-v-15f56527] {
color: #B2C149;
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid #e6edf3;
}
.user-table td[data-v-15f56527] {
padding: 6px 10px;
border-bottom: 1px solid #f2f5f7;
color: #425461;
}
.form-control.small[data-v-15f56527],
.form-select.small[data-v-15f56527] {
font-size: 0.85rem;
padding: 6px 8px;
border-radius: 8px;
}
.actions[data-v-15f56527] {
display: flex;
gap: 6px;
}
.loader[data-v-15f56527],
.saver[data-v-15f56527] {
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-15f56527 1s linear infinite;
}
@keyframes spinner-15f56527 {
to {
transform: rotate(1turn);
}
}
.divider-soft[data-v-15f56527] {
border: 0;
border-top: 1px solid #eef3f7;
margin: 10px 0;
}
.flex-break[data-v-15f56527] {
height: 10px;
}
.header-row[data-v-a79c9456] {
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.auth-head[data-v-a79c9456]{
display:flex; align-items:center; gap:10px; margin-bottom: 12px;
}
.auth-head .flex-1[data-v-a79c9456]{ flex:1;
}
.back-spacer[data-v-a79c9456]{ width:82px;
} /* keeps title centered */
.btn-outline[data-v-a79c9456]{
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-a79c9456]:hover{ background:#4F7EB3; color:#fff
}
.back-btn i[data-v-a79c9456]{ font-size:1rem
}
/* Brand primary */
.stora-btn-primary[data-v-a79c9456]{
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-a79c9456]:hover{ background:#B2C149;
}
.stora-btn-primary[data-v-a79c9456]:disabled{ opacity:.7; cursor:not-allowed;
}
/* Sections */
.section-title[data-v-a79c9456] { color:#425461; font-weight:700; margin-bottom:.25rem;
}
.section-rule[data-v-a79c9456] { border-top:1px solid #e3e6ea; margin:0 0 1rem 0;
}
/* Inputs */
.form-control[data-v-a79c9456]{ max-width: 100%;
}
/* Feedback / loader / popup / notification (re-use from your auth pages) */
.error-message[data-v-a79c9456]{ margin-top: 12px; color:#C21500;
}
.popup[data-v-a79c9456]{
position:fixed; inset:0; background:rgba(0,0,0,.4);
display:flex; align-items:center; justify-content:center; z-index:1000;
}
.loader[data-v-a79c9456]{
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-a79c9456 1s infinite linear;
}
@keyframes spinner-a79c9456{
to{ transform:rotate(1turn)
}
}
.notification[data-v-a79c9456]{
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)
}
}
/* ============================================================================
Layout wrappers
============================================================================ */
.hotcold-wrapper[data-v-c38ed08f] {
align-items: center;
border-radius: 8px;
}
.table-wrapper[data-v-c38ed08f] {
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 0.375rem;
overflow-x: visible;
}
.hint[data-v-c38ed08f] {
margin-top: 6px;
font-size: 0.72rem;
color: #6b7280;
}
/* ============================================================================
Store summary card (hero KPIs)
============================================================================ */
.intro-and-summary[data-v-c38ed08f] {
margin-bottom: 8px;
}
.store-summary-card[data-v-c38ed08f]{
min-width: 260px;
background:#fafafa;
border:1px solid #e9eef3;
border-radius:10px;
padding:10px 12px;
}
.pzi-intro h5[data-v-c38ed08f] {
margin: 0 0 4px;
font-weight: 600;
color: #425461;
}
.pzi-intro p[data-v-c38ed08f] {
margin: 0;
font-size: 13px;
color: #6b7a87;
}
.ssc-grid[data-v-c38ed08f]{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-items: center;
}
/* each KPI column */
.ssc-kpi[data-v-c38ed08f]{
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-c38ed08f]:not(:last-child){
border-right: 1px solid #e9eef3;
padding-right: 12px;
}
.ssc-label[data-v-c38ed08f]{
color:#537786;
font-size:.85rem;
}
.ssc-value[data-v-c38ed08f]{
font-weight:700;
color:#004F6E;
font-variant-numeric: tabular-nums;
}
.ssc-danger[data-v-c38ed08f]{
color:#7a0911;
}
.ssc-delta[data-v-c38ed08f],
.kpi-delta[data-v-c38ed08f] {
margin-top: 4px;
font-size: 11px;
color: #7a8895;
display: flex;
align-items: center;
gap: 4px;
}
.delta-arrow[data-v-c38ed08f] {
font-size: 11px;
}
.delta-arrow.up[data-v-c38ed08f] {
color: #2e7d32; /* green */
}
.delta-arrow.down[data-v-c38ed08f] {
color: #b3261e; /* red */
}
.delta-arrow.flat[data-v-c38ed08f] {
color: #9aa7b3; /* neutral */
}
.delta-main[data-v-c38ed08f] {
font-weight: 600;
}
.delta-extra[data-v-c38ed08f] {
opacity: 0.9;
}
/* For Missed Value: inverted meaning */
.ssc-kpi--missed .delta-arrow.up[data-v-c38ed08f] {
color: #b3261e; /* more missed € = bad */
}
.ssc-kpi--missed .delta-arrow.down[data-v-c38ed08f] {
color: #2e7d32; /* less missed € = good */
}
/* ============================================================================
Table base
============================================================================ */
table[data-v-c38ed08f] {
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-c38ed08f], th[data-v-c38ed08f] {
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-c38ed08f] {
background: rgba(33, 37, 41, 0.03);
font-weight: 600;
}
.title-cell[data-v-c38ed08f] {
text-align: left;
min-width: 0;
}
.title-cell-row[data-v-c38ed08f] {
text-align: left;
min-width: 0;
font-size: clamp(0.78rem, 0.25vw + 0.7rem, 0.9rem);
}
.zone-name-cell[data-v-c38ed08f] {
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-c38ed08f], .zone-name-cell[data-v-c38ed08f], .title-cell[data-v-c38ed08f] {
line-height: 1.8;
}
.bar-cell[data-v-c38ed08f] {
min-width: 0;
}
.zone-head-name[data-v-c38ed08f] {
font-weight: 600;
color: #425461;
}
.zone-head-chip[data-v-c38ed08f] {
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-c38ed08f] {
flex: 0 0 auto;
}
.zone-head-chip .chip-text[data-v-c38ed08f] {
min-width: 0;
}
.zone-head-chip .chip-text-short[data-v-c38ed08f] {
display: none;
}
/* reuse pattern colors from Prioritization */
.zone-head-chip.pat-awareness[data-v-c38ed08f] { background:#fff0d0; color:#9a6b00;
}
.zone-head-chip.pat-attention[data-v-c38ed08f] { background:#fff0f0; color:#9a2727;
}
.zone-head-chip.pat-reach[data-v-c38ed08f] { background:#EAF7F7; color:#2E8B8E;
}
.zone-head-chip.pat-neutral[data-v-c38ed08f] { background:#eef2ff; color:#355b8c;
}
.zone-head-chip.pat-strong[data-v-c38ed08f] { background:#F4FAF5; color:#2f6f3a;
}
/* ============================================================================
Band headers
============================================================================ */
.band-header td[data-v-c38ed08f] {
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-c38ed08f] {
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-c38ed08f],
.band-economics .kpi-main[data-v-c38ed08f] {
background: #f8fafc;
border: 1px solid #e9eef3;
border-radius: 10px;
padding: 10px 12px;
}
.kpi-main[data-v-c38ed08f] {
display: flex;
flex-direction: column;
align-items: center;
}
.kpi-value[data-v-c38ed08f] {
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-c38ed08f] {
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-c38ed08f],
.pos-bar-outer[data-v-c38ed08f] {
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-c38ed08f] {
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-c38ed08f] {
background: #e6e6e6 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* KPI banner for total store visitors */
.kpi-cell[data-v-c38ed08f] {
padding: 8px 10px;
background: transparent;
}
.visitor-bar-label[data-v-c38ed08f],
.pos-bar-label[data-v-c38ed08f] {
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-c38ed08f] {
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-c38ed08f] { color: #9ca3af;
}
/* ============================================================================
Economics visuals (values & assumptions)
============================================================================ */
.value-cell[data-v-c38ed08f] {
text-align: center;
font-weight: 600;
color: #36910d;
background-color: #f7fff7;
}
.value-cell.lost[data-v-c38ed08f] {
color: #c21500;
background-color: #fff5f5;
}
.assump-cell[data-v-c38ed08f] {
background: #fcfefe;
padding: 8px 10px;
}
.assump-chip[data-v-c38ed08f] {
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-c38ed08f] {
background: #fbfdfb;
}
.summary-row .summary-cell[data-v-c38ed08f] {
border: 1px solid #e2efe4;
border-radius: 10px;
padding: 8px 10px;
}
.pill[data-v-c38ed08f] {
display: inline-block;
margin: 4px 8px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 0.85rem;
}
.pill-green[data-v-c38ed08f] {
color: #256029;
background: #e7f6ea;
border: 1px solid #bfe6c6;
}
.pill-red[data-v-c38ed08f] {
color: #7a0911;
background: #fde8ea;
border: 1px solid #f6c2c7;
}
.small-text[data-v-c38ed08f] {
font-size: 10px;
}
/* ============================================================================
Scenario sliders (What-if band)
============================================================================ */
.scenario-cell[data-v-c38ed08f] {
background: #fcfefe;
vertical-align: top;
padding: 8px 10px;
}
.slider-container[data-v-c38ed08f] {
width: 100%;
}
.slider[data-v-c38ed08f] {
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-c38ed08f] {
margin-top: 40px;
margin-bottom: 40px; /* extra ruimte tussen sliders onderling */
}
.slider-note[data-v-c38ed08f] {
display: inline-block;
padding-left: 5px;
padding-top: 12px;
font-size: small;
}
.note-accent[data-v-c38ed08f] { color: #B2C149;
}
.delta-line[data-v-c38ed08f] {
margin-top: 8px;
font-size: 0.85rem;
color: #23485b;
}
.delta-daily[data-v-c38ed08f] { color: #537786;
}
.delta-subline[data-v-c38ed08f] {
margin-top: 2px;
font-size: 0.78rem;
color: #6b7280; /* subtle gray */
}
.scenario-return-pill[data-v-c38ed08f] {
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-c38ed08f] {
vertical-align: top;
}
.insights-cell[data-v-c38ed08f] {
vertical-align: top;
padding: 10px 8px;
}
.insights-list[data-v-c38ed08f] {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
font-size: 0.82rem;
line-height: 1.25rem;
}
.insights-list li[data-v-c38ed08f] {
position: relative;
padding-left: 14px;
margin: 4px 0;
color: #004F6E; /* same blue as your table text */
}
/* tiny bullet */
.insights-list li[data-v-c38ed08f]::before {
content: '•';
position: absolute;
left: 0;
top: 0;
color: #9ca3af; /* subtle gray bullet */
}
.insights-more-btn[data-v-c38ed08f] {
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-c38ed08f]:hover {
background: #eaf0f4;
}
/* ============================================================================
Responsive
============================================================================ */
@media (max-width: 1830px) {
.zone-head-chip[data-v-c38ed08f] {
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-c38ed08f] {
max-width: 120px;
padding: 3px 10px;
font-size: 11px;
}
.zone-head-chip .chip-text-full[data-v-c38ed08f] {
display: none;
}
.zone-head-chip .chip-text-short[data-v-c38ed08f] {
display: inline;
}
}
@media (max-width: 1500px) {
.zone-head-chip .chip-text-short[data-v-c38ed08f] {
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-c38ed08f],
.bar-cell .pos-bar-outer[data-v-c38ed08f] {
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-c38ed08f] {
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-c38ed08f]::before,
.bar-cell .pos-bar-outer[data-v-c38ed08f]::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-c38ed08f],
.bar-cell .pos-bar-fill[data-v-c38ed08f],
.bar-cell .visitor-bar-solid[data-v-c38ed08f] {
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-c38ed08f],
.bar-cell .pos-bar-label[data-v-c38ed08f] {
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-c38ed08f]{
grid-template-columns: 1fr;
gap: 8px;
}
.ssc-kpi[data-v-c38ed08f]: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-c38ed08f],
.table-wrapper td[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f] * {
font-size: 0.8rem !important;
}
.visitor-bar-outer[data-v-c38ed08f] { height: 18px;
}
}
@media (max-width: 475px) {
.table-wrapper th[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f] * {
font-size: 0.7rem !important;
}
.visitor-bar-outer[data-v-c38ed08f] { height: 17px;
}
}
@media (max-width: 440px) {
.table-wrapper th[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f] * {
font-size: 0.6rem !important;
}
.visitor-bar-outer[data-v-c38ed08f] { height: 16px;
}
}
@media (max-width: 410px) {
.table-wrapper th[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f] * {
font-size: 0.5rem !important;
}
.visitor-bar-outer[data-v-c38ed08f] { height: 15px;
}
}
@media (max-width: 375px) {
.table-wrapper th[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f],
.table-wrapper td[data-v-c38ed08f] * {
font-size: 0.4rem !important;
}
.visitor-bar-outer[data-v-c38ed08f] { height: 14px;
}
}
/* ============================================================
TREND CARD CONTENT
============================================================ */
.trend-short[data-v-b54e5598] {
font-weight: 700;
font-size: 1.0rem;
line-height: 1.1;
}
.trend-sentence[data-v-b54e5598] {
display: block;
color: #6b7a86;
font-size: .9rem;
line-height: 1.25;
}
/* ============================================================
BAR-LIST (Visitors/Average dwell lists)
============================================================ */
.barlist[data-v-b54e5598] { display:flex; flex-direction:column; gap:10px;
}
.barlist-row[data-v-b54e5598] { display:grid; grid-template-columns: 160px 1fr auto; align-items:center; gap:10px;
}
.barlist-label[data-v-b54e5598] { color:#425461; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barlist-bar[data-v-b54e5598] { height:10px; background:#eef3f7; border-radius:999px; overflow:hidden;
}
.barlist-fill[data-v-b54e5598] { height:100%; background:#004F6E; border-radius:999px; opacity:.85;
}
.barlist-value[data-v-b54e5598] { font-variant-numeric: tabular-nums; color:#2b3a44;
}
/* ============================================================
FUNNEL TABLE
============================================================ */
.funnelz-table[data-v-b54e5598] { display: grid; gap: 8px;
}
.funnelz-row[data-v-b54e5598] {
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-b54e5598] { font-weight: 600; background: #f7fafc;
}
.zone-name[data-v-b54e5598] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num[data-v-b54e5598] { text-align: right; font-variant-numeric: tabular-nums;
}
.num small[data-v-b54e5598] { color: #6b7a86; margin-left: 4px;
}
.funnelz-row .merge-3[data-v-b54e5598] { grid-column: 3 / span 3; text-align: center;
}
.funnelz-row .insufficient-msg[data-v-b54e5598] { color: #6b7a86; font-style: italic;
}
/* ============================================================
STATE / UTILITY
============================================================ */
.card-disabled[data-v-b54e5598] { opacity: 0.5; pointer-events: none; background-color: #ffffff;
}
.group-disabled[data-v-b54e5598] { border: 2px dashed #dcdcdc; background-color: #ffffff; opacity: 0.7;
}
/* ============================================================
MODAL (Allen’s insights)
============================================================ */
.toggle-popup[data-v-b54e5598]:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none; /* redundant for buttons, but keeps hover effects off */
}
.modal-overlay[data-v-b54e5598] {
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-b54e5598] {
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-b54e5598] {
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-b54e5598] {
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-b54e5598 1s infinite linear;
}
@keyframes spinner-b54e5598 {
to { transform: rotate(1turn)
}
}
/* ============================================================
RESPONSIVE (kept only where still referenced)
============================================================ */
@media (max-width: 1600px) {
.charts-grid[data-v-b54e5598] { grid-template-columns: 1fr;
}
.grid-container-product-data[data-v-b54e5598] { grid-template-columns: 1fr;
}
}
@media (max-width: 1500px) {
.grid-container-product-data[data-v-b54e5598] { grid-template-columns: 1fr;
}
.card-stack[data-v-b54e5598] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-right: 0;
}
}
@media (max-width: 1400px) {
.chart-container[data-v-b54e5598] { flex-direction: column; gap: 1rem;
}
.chart-wrapper[data-v-b54e5598] { flex: 1 1 100%; max-width: 100%;
}
}
@media (max-width: 900px){
.funnelz-row[data-v-b54e5598] { grid-template-columns: 1.2fr .6fr .8fr .9fr .9fr;
}
}
@media (max-width: 768px) {
.modal-window[data-v-b54e5598] { margin-left: 20px;
}
}
@media (max-width: 600px) {
.grid-container-product-data[data-v-b54e5598] { grid-template-columns: 1fr;
}
.card-stack[data-v-b54e5598] { display: grid; grid-template-columns: 1fr; gap: 10px; margin-right: 0;
}
}
@keyframes fadeInOut-a605cbe6 {
0% { opacity: 0.4;
}
100% { opacity: 0.7;
}
}
.loader[data-v-a605cbe6] {
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-a605cbe6 1s infinite linear;
}
@keyframes spinner-a605cbe6 {to{transform: rotate(1turn)}}
/* Mobile: stack title (row 1) and button (row 2) */
@media (max-width: 1080px){
.ask-allen-btn[data-v-a605cbe6]{ 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-f58e2650] {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.row2-item[data-v-f58e2650] { min-width: 0;
} /* allow charts to shrink nicely */
.row2-span-3[data-v-f58e2650] { grid-column: span 3;
}
.row2-span-6[data-v-f58e2650] { grid-column: span 6;
}
.zone-row4[data-v-f58e2650] {
/* 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-f58e2650]{
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-f58e2650]{
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
/* Only affect this Trends panel */
.panel-trends[data-v-f58e2650] .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-f58e2650] .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-f58e2650] .panel-slot{
height: auto;
}
.chart-vert-stack[data-v-f58e2650]{
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-f58e2650]{
margin-top: 140px; text-align: center; color: #425461; font-style: italic;
}
/* Wrapper */
.dashboard-wrapper[data-v-f58e2650] { width:100%; overflow-x:hidden; padding-bottom: 40px;}
/* Loader overlay (keep) */
.loader-overlay[data-v-f58e2650] {
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-f58e2650] { 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-f58e2650 1s infinite linear;
}
@keyframes spinner-f58e2650 {
to { transform: rotate(1turn)
}
}
/* Modal (keep) */
.toggle-popup[data-v-f58e2650]:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none; /* redundant for buttons, but keeps hover effects off */
}
.modal-overlay[data-v-f58e2650] {
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-f58e2650] {
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-f58e2650] { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1520px){
.chart-grid--3[data-v-f58e2650] { grid-template-columns: repeat(2, minmax(0,1fr));
}
.row2-grid[data-v-f58e2650] { grid-template-columns: 1fr;
}
.row2-span-3[data-v-f58e2650], .row2-span-6[data-v-f58e2650] { grid-column: 1 / -1;
}
.zone-row4[data-v-f58e2650] {
grid-template-columns: 1fr;
}
}
@media (max-width: 1250px){
.chart-grid--3[data-v-f58e2650] { grid-template-columns: 1fr;
}
}
/* 2-up inner grid for the split “per day” panels (collapses nicely) */
.chart-grid--2[data-v-f58e2650] { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1250px){
.chart-grid--2[data-v-f58e2650] { grid-template-columns: 1fr;
}
}
/* 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-68a977b8]{
position:fixed; inset:0; background:rgba(10,14,18,.45);
z-index:1095;
}
/* Shell */
.sidebar[data-v-68a977b8]{
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-68a977b8]{ transform:translateX(-102%); height:100vh;
}
.sidebar.open.small-screen[data-v-68a977b8]{ transform:translateX(0);
}
/* Close button (mobile) */
.close-btn[data-v-68a977b8]{
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-68a977b8]:hover{ background:#f0f4f8;
}
/* Header band */
.sidebar-head[data-v-68a977b8]{
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-68a977b8]{
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-68a977b8]{
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-68a977b8]{
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-68a977b8]:hover{ background:#f0f4f8;
}
.notification-badge[data-v-68a977b8]{
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-68a977b8]{ border:0; border-top:1px solid #eef2f6; margin:6px 0;
}
.thin-divider-sub[data-v-68a977b8]{ border:0; border-top:1px dashed #e6edf3; margin:2px 14px;
}
/* Section titles */
.sub-title[data-v-68a977b8]{
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-68a977b8]{ padding:0 6px; margin-top:4px;}
.nav-link[data-v-68a977b8], .flow-link[data-v-68a977b8]{
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-68a977b8]:hover, .flow-link[data-v-68a977b8]:hover{ background:#f4f7fb; color:#4F7EB3;
}
/* Active pill */
.active-link[data-v-68a977b8]{
color:#4F7EB3 !important; background:#eef5ff;
border-left:3px solid #B2C149; padding-left:9px;
font-weight:700;
}
/* Nested lists */
.flow-list[data-v-68a977b8], .detection-zone-list[data-v-68a977b8]{ padding:4px 6px 4px 28px;
}
/* Expandable headers */
.expandable-header-cameras[data-v-68a977b8],
.expandable-header-detection-zones[data-v-68a977b8]{
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-68a977b8]:hover,
.expandable-header-detection-zones[data-v-68a977b8]:hover{ background:#f7f9fb;
}
.triangle-icon[data-v-68a977b8]{
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-68a977b8]{ transform:rotate(0deg);
}
/* Footer */
.sidebar-footer[data-v-68a977b8]{ margin-top:auto; padding:8px 6px 4px; color:#425461; font-size:.75rem;
}
.connection-status[data-v-68a977b8]{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.status-label[data-v-68a977b8]{ font-weight:700; color:#425461;
}
.chip[data-v-68a977b8]{
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-68a977b8]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df;
}
.chip-warn[data-v-68a977b8]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf;
}
/* Links aligned with the left edge like the labels/icons above */
.footer-link[data-v-68a977b8]{
padding:6px 0; margin:0; border-radius:0;
color:#425461; font-size:.76rem;
}
.footer-link[data-v-68a977b8]:hover{ background:transparent; color:#4F7EB3;
}
/* user row in one line, wraps nicely if needed */
.settings-container .user-row[data-v-68a977b8]{
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-68a977b8]{ white-space:normal;
}
.settings-container .user-row i.bi-person-fill[data-v-68a977b8]{
margin-right: 1px; /* explicit icon gap before the name */
}
/* small gap around the dot */
.settings-container .user-row .dot[data-v-68a977b8]{
color:#9aa8b3;
margin:0 6px;
}
/* button styled as a link; pointer cursor */
.settings-container .user-row .logout-link-btn[data-v-68a977b8]{
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-68a977b8]:hover{ text-decoration:underline;
}
/* if you MUST keep instead of the button, enforce inline */
.settings-container .user-row .logout-link[data-v-68a977b8]{
display:inline !important;
margin:0 !important; padding:0 !important;
color:#4F7EB3; cursor:pointer; text-decoration:none;
}
.settings-container .user-row .logout-link[data-v-68a977b8]:hover{ text-decoration:underline;
}
/* Top bar icons (mobile) */
.hamburger[data-v-68a977b8]{
position:fixed; top:10px; left:10px; z-index:1100;
font-size:26px; color:#425461; cursor:pointer;
}
.mobile-bell[data-v-68a977b8]{
position:fixed; top:12px; left:54px; z-index:1100; color:#425461; cursor:pointer;
}
.notification-bell[data-v-68a977b8]{ position:relative;
}
/* Scrollbar (webkit) */
.sidebar[data-v-68a977b8]::-webkit-scrollbar{ width:10px;
}
.sidebar[data-v-68a977b8]::-webkit-scrollbar-thumb{ background:#e6edf3; border-radius:10px;
}
.sidebar[data-v-68a977b8]::-webkit-scrollbar-thumb:hover{ background:#d7e2ee;
}
/* Responsive width */
@media (max-width: 992px){
.sidebar[data-v-68a977b8]{ width:280px;
}
}
@media (max-width: 768px){
.sidebar[data-v-68a977b8]{ width:56vw;
}
/* move the close a hair inward & smaller */
.close-btn[data-v-68a977b8]{
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-68a977b8]{
padding-right: 56px; /* 32px button + ~24px breathing room */
}
/* nudge/smaller bell so it never bumps the close button */
.bell-btn[data-v-68a977b8]{
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-68a977b8]{
top: -3px;
right: -3px;
}
}
/* Brand tokens */
[data-v-c2223baf]:root {
--stora-primary: #4F7EB3;
--stora-accent: #B2C149;
--stora-text: #425461;
--stora-border: #e6edf3;
--stora-bg: #ffffff;
}
/* Shell */
.notifications-sidebar[data-v-c2223baf]{
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-c2223baf]{ display:none;
}
/* Sticky topbar */
.sidebar-topbar[data-v-c2223baf]{
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-c2223baf]{
margin:0; font-size: 1.05rem; font-weight: 700; color: var(--stora-primary);
}
/* Close button (header) */
.icon-btn.close[data-v-c2223baf]{
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-c2223baf]:hover{
background: #4F7EB3; /* brand hover */
border-color: #4F7EB3;
color: #fff;
}
.icon-btn.close[data-v-c2223baf]:focus-visible{
outline: 2px solid #B2C149;
outline-offset: 2px;
}
/* Bulk actions (sticky) */
.bulk-actions[data-v-c2223baf]{
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-c2223baf]{
display: block; /* override flex */
padding: 16px 14px 24px;
}
/* Add vertical space between cards */
.notifications-list > .notification-card[data-v-c2223baf]{
margin-bottom: 24px; /* space below each card */
}
/* No extra space after the last one */
.notifications-list > .notification-card[data-v-c2223baf]:last-child{
margin-bottom: 0;
}
/* Cards */
.notification-card[data-v-c2223baf]{
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-c2223baf]:hover{
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(13,38,76,.10);
}
.notification-card.selected[data-v-c2223baf]{
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-c2223baf]{
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-c2223baf]{
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-c2223baf]:hover{
background: #f6f8fa; border-color: var(--stora-border);
}
/* Icon column */
.icon[data-v-c2223baf]{
grid-column: 2;
display:flex; align-items:flex-start; justify-content:center;
padding-top: 2px;
}
.icon i[data-v-c2223baf]{ font-size: 20px;
}
/* Details column */
.details[data-v-c2223baf]{
grid-column: 3;
color: var(--stora-text);
font-size: .92rem;
}
.meta[data-v-c2223baf]{
margin-top: 6px;
}
.timestamp[data-v-c2223baf]{
font-size: .78rem; color:#8393a1; font-style: italic;
}
/* Actions */
.actions[data-v-c2223baf]{
margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap;
}
/* Buttons */
.stora-btn[data-v-c2223baf]{
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-c2223baf]:hover{ background: var(--stora-accent);
}
.stora-btn[data-v-c2223baf]:disabled{ opacity:.5; cursor:not-allowed;
}
.stora-btn.success[data-v-c2223baf]{ background:#6C9046;
}
.stora-btn.success[data-v-c2223baf]:hover{ background:#5b7a3b;
}
.stora-btn-danger[data-v-c2223baf]{
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-c2223baf]:hover{ filter: brightness(0.95);
}
.stora-btn-danger.subtle[data-v-c2223baf]{
background:#fff; color:#C21500; border:1px solid #C21500;
}
.stora-btn-danger.subtle[data-v-c2223baf]:disabled{ opacity:.4; cursor:not-allowed;
}
/* Linky button */
.stora-link[data-v-c2223baf]{
background:transparent; border:0; color: var(--stora-primary);
text-decoration: underline; cursor:pointer; padding: 4px 2px; font-size:.9rem;
}
.stora-link[data-v-c2223baf]:hover{ color: var(--stora-accent);
}
/* Empty state */
.empty-state[data-v-c2223baf]{
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-c2223baf]{ font-size: 64px; filter: grayscale(1) brightness(1.15); margin-bottom: 12px;
}
/* Transitions */
.slide-enter-active[data-v-c2223baf], .slide-leave-active[data-v-c2223baf]{ transition: all .25s ease;
}
.slide-enter-from[data-v-c2223baf]{ opacity:0; transform: translateY(-8px);
}
.slide-enter-to[data-v-c2223baf] { opacity:1; transform: translateY(0);
}
.slide-leave-from[data-v-c2223baf]{ opacity:1; transform: translateY(0);
}
.slide-leave-to[data-v-c2223baf] { opacity:0; transform: translateY(8px);
}
/* Scrollbar polish (webkit) */
.notifications-list[data-v-c2223baf]::-webkit-scrollbar{ width: 10px;
}
.notifications-list[data-v-c2223baf]::-webkit-scrollbar-thumb{
background: #e8edf2; border-radius: 8px; border: 2px solid #fff;
}
.notifications-list[data-v-c2223baf]::-webkit-scrollbar-thumb:hover{ background: #d7e0ea;
}
/* Responsiveness */
@media (max-width: 480px){
.notifications-sidebar[data-v-c2223baf]{ width: 100vw;
}
.bulk-actions[data-v-c2223baf]{ top: 56px;
}
}
/* Backdrop for mobile */
.sidebar-backdrop[data-v-e73d974b]{
position:fixed; inset:0; background:rgba(10,14,18,.45);
z-index:1095;
}
/* Shell */
.sidebar[data-v-e73d974b]{
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-e73d974b]{ transform:translateX(-102%); height:100vh;
}
.sidebar.open.small-screen[data-v-e73d974b]{ transform:translateX(0);
}
/* Close button (mobile) */
.close-btn[data-v-e73d974b]{
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-e73d974b]:hover{ background:#f0f4f8;
}
/* Header band */
.sidebar-head[data-v-e73d974b]{
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-e73d974b]{
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-e73d974b]{
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-e73d974b]{
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-e73d974b]:hover{ background:#f0f4f8;
}
.notification-badge[data-v-e73d974b]{
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-e73d974b]{ border:0; border-top:1px solid #eef2f6; margin:6px 0;
}
.thin-divider-sub[data-v-e73d974b]{ border:0; border-top:1px dashed #e6edf3; margin:2px 14px;
}
/* Section titles */
.sub-title[data-v-e73d974b]{
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-e73d974b]{ padding:0 6px; margin-top:4px;}
.nav-link[data-v-e73d974b], .flow-link[data-v-e73d974b]{
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-e73d974b]:hover, .flow-link[data-v-e73d974b]:hover{ background:#f4f7fb; color:#4F7EB3;
}
/* Active pill */
.active-link[data-v-e73d974b]{
color:#4F7EB3 !important; background:#eef5ff;
border-left:3px solid #B2C149; padding-left:9px;
font-weight:700;
}
/* Nested lists */
.flow-list[data-v-e73d974b], .detection-zone-list[data-v-e73d974b]{ padding:4px 6px 4px 28px;
}
/* Expandable headers */
.expandable-header-cameras[data-v-e73d974b],
.expandable-header-detection-zones[data-v-e73d974b]{
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-e73d974b]:hover,
.expandable-header-detection-zones[data-v-e73d974b]:hover{ background:#f7f9fb;
}
.triangle-icon[data-v-e73d974b]{
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-e73d974b]{ transform:rotate(0deg);
}
/* Footer */
.sidebar-footer[data-v-e73d974b]{ margin-top:auto; padding:8px 6px 4px; color:#425461; font-size:.75rem;
}
.connection-status[data-v-e73d974b]{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.status-label[data-v-e73d974b]{ font-weight:700; color:#425461;
}
.chip[data-v-e73d974b]{
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-e73d974b]{ color:#2c7a3f; background:#f3fbf5; border-color:#d9f1df;
}
.chip-warn[data-v-e73d974b]{ color:#b66a00; background:#fff7e6; border-color:#ffe7bf;
}
/* Links aligned with the left edge like the labels/icons above */
.footer-link[data-v-e73d974b]{
padding:6px 0; margin:0; border-radius:0;
color:#425461; font-size:.76rem;
}
.footer-link[data-v-e73d974b]:hover{ background:transparent; color:#4F7EB3;
}
/* user row in one line, wraps nicely if needed */
.settings-container .user-row[data-v-e73d974b]{
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-e73d974b]{ white-space:normal;
}
.settings-container .user-row i.bi-person-fill[data-v-e73d974b]{
margin-right: 1px; /* explicit icon gap before the name */
}
/* small gap around the dot */
.settings-container .user-row .dot[data-v-e73d974b]{
color:#9aa8b3;
margin:0 6px;
}
/* button styled as a link; pointer cursor */
.settings-container .user-row .logout-link-btn[data-v-e73d974b]{
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-e73d974b]:hover{ text-decoration:underline;
}
/* if you MUST keep instead of the button, enforce inline */
.settings-container .user-row .logout-link[data-v-e73d974b]{
display:inline !important;
margin:0 !important; padding:0 !important;
color:#4F7EB3; cursor:pointer; text-decoration:none;
}
.settings-container .user-row .logout-link[data-v-e73d974b]:hover{ text-decoration:underline;
}
/* Top bar icons (mobile) */
.hamburger[data-v-e73d974b]{
position:fixed; top:10px; left:10px; z-index:1100;
font-size:26px; color:#425461; cursor:pointer;
}
.mobile-bell[data-v-e73d974b]{
position:fixed; top:12px; left:54px; z-index:1100; color:#425461; cursor:pointer;
}
.notification-bell[data-v-e73d974b]{ position:relative;
}
.disabled-link[data-v-e73d974b] {
color: #9ca3af !important; /* light grey */
font-style: italic;
pointer-events: none; /* visually and functionally disabled */
opacity: 0.8;
}
.nav-link[data-v-e73d974b],
.nav-sublink[data-v-e73d974b] {
display: block;
padding: 3px 10px;
text-decoration: none;
}
.submenu-title[data-v-e73d974b] { cursor: default;
}
.submenu[data-v-e73d974b] { list-style: none; margin: 6px 0 0; padding-left: 12px;
}
/* Scrollbar (webkit) */
.sidebar[data-v-e73d974b]::-webkit-scrollbar{ width:10px;
}
.sidebar[data-v-e73d974b]::-webkit-scrollbar-thumb{ background:#e6edf3; border-radius:10px;
}
.sidebar[data-v-e73d974b]::-webkit-scrollbar-thumb:hover{ background:#d7e2ee;
}
/* Responsive width */
@media (max-width: 992px){
.sidebar[data-v-e73d974b]{ width:280px;
}
}
@media (max-width: 768px){
.sidebar[data-v-e73d974b]{ width:56vw;
}
/* move the close a hair inward & smaller */
.close-btn[data-v-e73d974b]{
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-e73d974b]{
padding-right: 56px; /* 32px button + ~24px breathing room */
}
/* nudge/smaller bell so it never bumps the close button */
.bell-btn[data-v-e73d974b]{
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-e73d974b]{
top: -3px;
right: -3px;
}
}
/* 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%;
}
}