.heatmap-viewer-container{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--ej-heatmap-bg, #f8f9fa);border-radius:var(--ej-heatmap-radius, 8px);border:1px solid var(--ej-heatmap-border, #e9ecef)}.heatmap-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;padding:1rem;background:var(--ej-bg-surface, #fff);border-radius:var(--ej-heatmap-radius, 8px);box-shadow:var(--ej-heatmap-shadow, 0 2px 8px rgba(0, 0, 0, 0.1))}.heatmap-control-group{display:flex;flex-direction:column;gap:.25rem;min-width:150px}.heatmap-control-group label{font-size:.75rem;font-weight:600;color:var(--ej-heatmap-text, #495057);text-transform:uppercase;letter-spacing:.5px}.heatmap-select{padding:.5rem .75rem;font-size:.875rem;color:var(--ej-heatmap-text, #495057);background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-heatmap-border, #e9ecef);border-radius:4px;cursor:pointer;transition:border-color .2s ease}.heatmap-select:hover,.heatmap-select:focus{border-color:var(--ej-heatmap-accent, #0d6efd);outline:none}.heatmap-select:focus-visible{outline:2px solid var(--ej-heatmap-accent, #0d6efd);outline-offset:2px}.heatmap-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--ej-text-on-primary, #fff);background:var(--ej-heatmap-accent, #0d6efd);border:none;border-radius:4px;cursor:pointer;transition:opacity .2s ease,transform .1s ease}.heatmap-btn:hover{opacity:.9}.heatmap-btn:active{transform:scale(0.98)}.heatmap-btn:focus-visible{outline:2px solid var(--ej-heatmap-accent, #0d6efd);outline-offset:2px}.heatmap-canvas-wrapper{position:relative;overflow:auto;max-height:600px;background:var(--ej-bg-surface, #fff);border-radius:var(--ej-heatmap-radius, 8px);box-shadow:var(--ej-heatmap-shadow, 0 2px 8px rgba(0, 0, 0, 0.1))}.heatmap-canvas{display:block;max-width:100%}.heatmap-empty{display:flex;align-items:center;justify-content:center;min-height:300px;padding:2rem;color:var(--ej-heatmap-text, #495057);font-size:1rem;text-align:center;background:var(--ej-bg-surface, #fff);border-radius:var(--ej-heatmap-radius, 8px);border:2px dashed var(--ej-heatmap-border, #e9ecef)}@media(max-width: 768px){.heatmap-controls{flex-direction:column;align-items:stretch}.heatmap-control-group{min-width:100%}.heatmap-canvas-wrapper{max-height:400px}}@media(prefers-reduced-motion: reduce){.heatmap-select,.heatmap-btn{transition:none}}.heatmap-dashboard{background:var(--ej-bg-body, #f8fafc);color:var(--ej-color-body, #334155);min-height:80vh}.heatmap-dashboard__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ej-spacing-md, 1rem);background:var(--ej-bg-surface, #fff);border-bottom:1px solid var(--ej-border-color, #e5e7eb);padding:var(--ej-spacing-lg, 1.5rem)}.heatmap-dashboard__title{font-family:var(--ej-font-headings, "Outfit", sans-serif);font-size:1.75rem;font-weight:700;color:var(--ej-color-headings, #1a1a2e);margin:0}.heatmap-dashboard__filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ej-spacing-sm, 0.5rem)}.heatmap-dashboard__period-select{padding:.5rem .75rem;border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-sm, 6px);background:var(--ej-bg-surface, #fff);color:var(--ej-color-body, #334155);font-size:.875rem;cursor:pointer}.heatmap-dashboard__period-select:focus-visible{outline:2px solid var(--ej-color-primary, #ff8c42);outline-offset:2px}.heatmap-dashboard__device-filter,.heatmap-dashboard__event-filter{display:flex;gap:2px;border-radius:var(--ej-radius-sm, 6px);overflow:hidden;border:1px solid var(--ej-border-color, #e5e7eb)}.heatmap-dashboard__device-btn,.heatmap-dashboard__event-btn{padding:.375rem .75rem;border:none;background:var(--ej-bg-surface, #fff);color:var(--ej-color-body, #334155);font-size:.8125rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}.heatmap-dashboard__device-btn:hover,.heatmap-dashboard__event-btn:hover{background:var(--ej-bg-hover, #f1f5f9)}.heatmap-dashboard__device-btn.is-active,.heatmap-dashboard__event-btn.is-active{background:var(--ej-color-primary, #ff8c42);color:var(--ej-color-on-primary, #fff)}.heatmap-dashboard__device-btn:focus-visible,.heatmap-dashboard__event-btn:focus-visible{outline:2px solid var(--ej-color-primary, #ff8c42);outline-offset:-2px}.heatmap-dashboard__metrics{display:grid;gap:var(--ej-spacing-md, 1rem);padding:var(--ej-spacing-lg, 1.5rem);grid-template-columns:repeat(2, 1fr)}@media(min-width: 768px){.heatmap-dashboard__metrics{grid-template-columns:repeat(4, 1fr)}}.heatmap-metric-card{display:flex;align-items:center;gap:var(--ej-spacing-md, 1rem);background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-md, 8px);padding:var(--ej-spacing-md, 1rem) var(--ej-spacing-lg, 1.5rem)}.heatmap-metric-card__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--ej-radius-sm, 6px);background:var(--ej-bg-accent-subtle, #fff7ed);color:var(--ej-color-primary, #ff8c42);flex-shrink:0}.heatmap-metric-card__body{display:flex;flex-direction:column;min-width:0}.heatmap-metric-card__value{font-family:var(--ej-font-headings, "Outfit", sans-serif);font-size:1.5rem;font-weight:700;color:var(--ej-color-headings, #1a1a2e);line-height:1.2}.heatmap-metric-card__title{font-size:.8125rem;color:var(--ej-color-muted, #94a3b8);margin-top:.125rem}.heatmap-metric-card__trend{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;margin-left:auto}.heatmap-metric-card__trend--up{color:var(--ej-color-success, #10b981)}.heatmap-metric-card__trend--down{color:var(--ej-color-danger, #ef4444)}.heatmap-dashboard__content{display:grid;gap:var(--ej-spacing-lg, 1.5rem);padding:0 var(--ej-spacing-lg, 1.5rem) var(--ej-spacing-lg, 1.5rem);grid-template-columns:1fr}@media(min-width: 992px){.heatmap-dashboard__content{grid-template-columns:1fr 300px}}.heatmap-dashboard__section-title{font-family:var(--ej-font-headings, "Outfit", sans-serif);font-size:1rem;font-weight:600;color:var(--ej-color-headings, #1a1a2e);margin:0 0 var(--ej-spacing-sm, 0.5rem)}.heatmap-dashboard__viewer{background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-md, 8px);overflow:hidden}.heatmap-dashboard__viewer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ej-spacing-md, 1rem) var(--ej-spacing-lg, 1.5rem);border-bottom:1px solid var(--ej-border-color, #e5e7eb)}.heatmap-dashboard__canvas-container{position:relative;min-height:400px;background:var(--ej-bg-body, #f8fafc)}.heatmap-dashboard__canvas-container.is-loading::after{content:"";position:absolute;inset:0;background:hsla(0,0%,100%,.7);display:flex;align-items:center;justify-content:center}.heatmap-dashboard__canvas{display:none;width:100%}.heatmap-dashboard__empty-state{display:flex;align-items:center;justify-content:center;min-height:400px;color:var(--ej-color-muted, #94a3b8);font-size:.9375rem;text-align:center;padding:var(--ej-spacing-xl, 2rem)}.heatmap-dashboard__sidebar{display:flex;flex-direction:column;gap:var(--ej-spacing-lg, 1.5rem)}.heatmap-dashboard__page-selector{background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-md, 8px);padding:var(--ej-spacing-md, 1rem)}.heatmap-dashboard__page-search{width:100%;padding:.5rem .75rem;border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-sm, 6px);font-size:.875rem;margin-bottom:var(--ej-spacing-sm, 0.5rem)}.heatmap-dashboard__page-search:focus-visible{outline:2px solid var(--ej-color-primary, #ff8c42);outline-offset:2px}.heatmap-dashboard__page-list{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto}.heatmap-dashboard__page-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-radius:var(--ej-radius-sm, 6px);cursor:pointer;transition:background-color .15s ease}.heatmap-dashboard__page-item:hover{background:var(--ej-bg-hover, #f1f5f9)}.heatmap-dashboard__page-item.is-active{background:var(--ej-bg-accent-subtle, #fff7ed);border-left:3px solid var(--ej-color-primary, #ff8c42)}.heatmap-dashboard__page-item--empty{cursor:default;color:var(--ej-color-muted, #94a3b8);font-style:italic;font-size:.8125rem}.heatmap-dashboard__page-item:focus-visible{outline:2px solid var(--ej-color-primary, #ff8c42);outline-offset:-2px}.heatmap-dashboard__page-path{font-size:.8125rem;color:var(--ej-color-body, #334155);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.heatmap-dashboard__page-events{font-size:.75rem;font-weight:600;color:var(--ej-color-muted, #94a3b8);flex-shrink:0}.heatmap-dashboard__scroll-section{background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-md, 8px);padding:var(--ej-spacing-md, 1rem)}.heatmap-dashboard__scroll-bars{display:flex;flex-direction:column;gap:var(--ej-spacing-sm, 0.5rem)}.heatmap-dashboard__scroll-bar{display:flex;align-items:center;gap:var(--ej-spacing-sm, 0.5rem)}.heatmap-dashboard__scroll-label{font-size:.75rem;font-weight:600;color:var(--ej-color-body, #334155);width:36px;text-align:right;flex-shrink:0}.heatmap-dashboard__scroll-track{flex:1;height:8px;background:var(--ej-bg-body, #f1f5f9);border-radius:4px;overflow:hidden}.heatmap-dashboard__scroll-fill{height:100%;background:var(--ej-color-primary, #ff8c42);border-radius:4px;width:0;transition:width .4s ease}.heatmap-dashboard__scroll-value{font-size:.75rem;font-weight:600;color:var(--ej-color-muted, #94a3b8);width:40px;flex-shrink:0}.heatmap-dashboard__top-elements{background:var(--ej-bg-surface, #fff);border:1px solid var(--ej-border-color, #e5e7eb);border-radius:var(--ej-radius-md, 8px);padding:var(--ej-spacing-md, 1rem)}.heatmap-dashboard__element-list{list-style:none;margin:0;padding:0}.heatmap-dashboard :focus-visible{outline:2px solid var(--ej-color-primary, #ff8c42);outline-offset:2px}@media(prefers-reduced-motion: reduce){.heatmap-dashboard,.heatmap-dashboard *{transition:none !important;animation:none !important}}