/* ═══════════════════════════════════════════════════════════════
 *  sz_overview.css — Solarz Overview Page Styles
 *  Scoped: .reports--wrapper + .sz-* prefixes only
 *  Rollback: remove from nginx sub_filter + reload
 * ═══════════════════════════════════════════════════════════════ */





/* === FOUC Prevention + Loading Spinner ===
 * CSS loads before Vue renders → no flash of old layout.
 * Shows a Solarz-branded spinner while JS reorganizes cards.
 * JS adds .sz-overview-ready → spinner fades out, content fades in.
 */

/* Loading spinner (pure CSS, shown via ::before on wrapper) */
.reports--wrapper:not(.sz-overview-ready) {
  position: relative;
  min-height: 60vh;
}
.reports--wrapper:not(.sz-overview-ready)::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid #E8E8E8;
  border-top-color: #388E3C;
  border-radius: 50%;
  animation: sz-spin 0.7s linear infinite;
  z-index: 10;
}
@keyframes sz-spin { to { transform: rotate(360deg); } }

/* Hide content until ready */
.reports--wrapper .flex.flex-col.gap-4.pb-6 {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* Show when JS signals ready */
.reports--wrapper.sz-overview-ready .flex.flex-col.gap-4.pb-6 {
  opacity: 1 !important;
}

/* Remove spinner when ready */
.reports--wrapper.sz-overview-ready::before {
  display: none !important;
}

/* Safety: auto-show after 6s if JS fails */
@keyframes sz-safety-show {
  to { opacity: 1; }
}
.reports--wrapper .flex.flex-col.gap-4.pb-6 {
  animation: sz-safety-show 0s 6s forwards !important;
}
.reports--wrapper.sz-overview-ready .flex.flex-col.gap-4.pb-6 {
  animation: none !important;
}

/* Hide native heatmap grid (replaced by line chart) */
.reports--wrapper .flex.flex-row.flex-wrap .card-body > div:not([data-sz-lc-wrapper]):not([data-sz-res-wrapper]) {
  display: none !important;
}
.reports--wrapper .card-body [data-sz-lc-wrapper],
.reports--wrapper .card-body [data-sz-res-wrapper] {
  display: block !important;
}

/* === End FOUC Prevention === */

/* ====== Section 1: Overview Layout ====== */

.reports--wrapper > .mx-auto {
  max-width: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.reports--wrapper section.pt-10 {
  display: none !important;
}

.reports--wrapper {
  padding-top: 0 !important;
}

.reports--wrapper .flex.flex-col.gap-4.pb-6 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.reports--wrapper > .mx-auto > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.sz-overview-top-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.sz-overview-top-row > [data-sz-tokens-card] {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}

.sz-overview-top-row > [data-sz-tokens-card] .sz-tokens-card {
  height: 100%;
}

.sz-overview-top-row > .flex {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}

/* Global card styles */
.reports--wrapper .rounded-xl {
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid #D4D4D4 !important;
  background: #FFFFFF !important;
}

.dark .reports--wrapper .rounded-xl {
  border-color: rgba(255,255,255,0.1) !important;
}

.reports--wrapper [class*="bg-n-teal"] {
  display: none !important;
}

/* Global button style */
.reports--wrapper .card-header button {
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  height: 32px !important;
  padding: 4px 8px 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}

.reports--wrapper .card-header button:not(:has(> span)) {
  padding: 4px !important;
  width: 32px !important;
}

.dark .reports--wrapper .card-header button {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #E5E7EB !important;
}

.reports--wrapper .card-header .flex.flex-row.items-center.justify-end {
  gap: 4px !important;
}

/* Stats cards in top row */
.sz-overview-top-row .rounded-xl {
  padding: 12px !important;
  min-height: auto !important;
  height: 100%;
  overflow: visible;
}

.sz-overview-top-row .card-header {
  margin-bottom: 12px !important;
}

.sz-overview-top-row .card-body h3 {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #525252 !important;
}

.dark .sz-overview-top-row .card-body h3 {
  color: #9CA3AF !important;
}

.sz-overview-top-row .card-body p {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  color: #11361A !important;
}

.dark .sz-overview-top-row .card-body p {
  color: #E5E7EB !important;
}

.sz-overview-top-row .card-body > div {
  padding-bottom: 0 !important;
}

/* Stats metrics: ensure items don't collide */
.sz-overview-top-row .card-body {
  gap: 2px 12px !important;
}

.sz-overview-top-row .card-body h3 {
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sz-overview-top-row .card-body > div {
  overflow: hidden !important;
}

/* Trafego de conversa card */
.sz-second-row-right .rounded-xl {
  padding: 0 !important;
  min-height: auto !important;
}

.sz-second-row-right .card-header {
  padding: 12px 12px 8px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.sz-second-row-right h5 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

.sz-second-row-right .card-body {
  padding: 0 12px 12px !important;
}

/* Rows 2, 3 & 4: 50/50 layout */
.sz-overview-second-row {
  align-items: stretch !important;
}

.sz-overview-third-row,
.sz-overview-fourth-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.sz-row-half-left,
.sz-row-half-right {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}

.sz-second-row-left .sz-bots-card,
.sz-second-row-right .rounded-xl,
.sz-row-half-left .rounded-xl,
.sz-row-half-right .rounded-xl {
  height: 100% !important;
}

.sz-row-half-left > .flex.flex-row.flex-wrap,
.sz-row-half-right > .flex.flex-row.flex-wrap {
  height: 100%;
}

/* Intermediate breakpoint: zoom 120% / small laptops */
@media (max-width: 1200px) {
  .sz-overview-top-row {
    flex-wrap: wrap;
  }
  .sz-overview-top-row > [data-sz-tokens-card] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .sz-overview-top-row > .flex {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .sz-overview-top-row {
    flex-direction: column;
  }
  .sz-overview-top-row > [data-sz-tokens-card] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sz-overview-second-row,
  .sz-overview-third-row,
  .sz-overview-fourth-row {
    flex-direction: column;
  }
  .sz-second-row-left,
  .sz-second-row-right,
  .sz-row-half-left,
  .sz-row-half-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}



/* Stats inner cards: allow wrapping on narrow containers */
.sz-overview-top-row > .flex > .rounded-xl {
  min-width: 200px;
}
@media (max-width: 500px) {
  .sz-overview-top-row > .flex {
    flex-direction: column !important;
  }
  .sz-overview-top-row > .flex > .rounded-xl {
    min-width: auto;
  }
}

/* ====== Section 2: Tokens Usage Card ====== */

.sz-tokens-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
  border-radius: 8px;
  width: 100%;
}

.sz-tokens-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.sz-tokens-title-wrap {
  display: flex;
  flex-direction: column;
}

.sz-tokens-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px;
  margin: 0 !important;
}

.sz-tokens-subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.sz-tokens-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.sz-tokens-btn:hover {
  filter: brightness(0.95);
}

.sz-tokens-bars {
  display: flex;
  gap: 32px;
}

.sz-tokens-bar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sz-tokens-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sz-tokens-bar-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.sz-tokens-bar-label svg {
  flex-shrink: 0;
}

.sz-tokens-bar-pct {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sz-tokens-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Progress track — Figma: content-box, 8px height, 3px border */
.sz-tokens-track {
  box-sizing: content-box;
  position: relative;
  width: 100%;
  height: 8px;
  border: 3px solid;
  border-radius: 12px;
  overflow: hidden;
}

/* Fill — Figma: 8px absolute height, 0.8s easeOutQuart */
.sz-tokens-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  border-radius: 12px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sz-tokens-counter {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
}


/* ====== Section 3: Bots Utilization Card ====== */

.sz-overview-second-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.sz-second-row-left {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}

.sz-second-row-right {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}

@media (max-width: 768px) {
  .sz-overview-second-row {
    flex-direction: column;
  }
  .sz-second-row-left,
  .sz-second-row-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.sz-bots-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  width: 100%;
  height: 400px;
}

.sz-bots-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 12px 8px;
}

.sz-bots-title-wrap {
  display: flex;
  flex-direction: column;
}

.sz-bots-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px;
  margin: 0 !important;
}

.sz-bots-subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

/* Bots card header buttons */
.sz-bots-export-btn:hover,
.sz-bots-download-btn:hover {
  filter: brightness(0.95);
}

.sz-bots-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 24px;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.sz-bots-chart-wrap {
  position: relative;
  width: 250px;
  height: 250px;
  flex-shrink: 0;
}

.sz-bots-chart-wrap svg circle[data-sz-bot-ring]:hover {
  filter: brightness(1.15);
}

/* Tooltip */
.sz-bots-tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-20%, -50%);
  filter: drop-shadow(0px 4px 10px rgba(15, 23, 42, 0.1));
  pointer-events: none;
  z-index: 2;
}

.sz-bots-tooltip-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #000000;
  flex-shrink: 0;
}

.sz-bots-tooltip-box {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  background: #000000;
  border-radius: 4px;
}

.sz-bots-tooltip-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: #FFFFFF;
  white-space: nowrap;
}

.sz-bots-tooltip-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sz-bots-tooltip-dot {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sz-bots-tooltip-count {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* Console — Figma: font-size 8px */
.sz-bots-console {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 272px;
  border: 1px solid;
  border-radius: 12px;
  overflow: hidden;
}

.sz-bots-console-scroll {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 16px;
}

.sz-bots-console-scroll::-webkit-scrollbar { width: 8px; }
.sz-bots-console-scroll::-webkit-scrollbar-track { background: transparent; }
.sz-bots-console-scroll::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 4px; }

.sz-bots-log-line { white-space: nowrap; }

.sz-bots-console-fade-top,
.sz-bots-console-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 23px;
  pointer-events: none;
}

.sz-bots-console-fade-top { top: 0; }
.sz-bots-console-fade-bottom { bottom: 0; }

/* Legend */
.sz-bots-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 12px;
}

.sz-bots-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sz-bots-legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  flex-shrink: 0;
}

.sz-bots-legend-item span:last-child {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}


/* ====== Section 4: Agent Bar Chart ====== */

.sz-bc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sz-bc-sub {
  font-size: 13px;
  margin: 0 0 8px 0;
  font-weight: 400;
  opacity: 0.7;
}

.sz-bc-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sz-bc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
}

.sz-bc-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  width: 100px;
  flex-shrink: 0;
}

.sz-bc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sz-bc-avatar-txt {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.sz-bc-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

.sz-bc-bar-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
}

.sz-bc-bar-track {
  position: relative;
  flex: 1;
  height: 24px;
  border-radius: 6px;
  overflow: visible;
}

.sz-bc-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.sz-bc-bar-unatt {
  left: 0;
  z-index: 2;
  border-radius: 6px 0 0 6px;
  border-right: 2px solid rgba(255,255,255,0.6);
}

.dark .sz-bc-bar-unatt {
  border-right-color: rgba(0,0,0,0.3);
}

.sz-bc-bar-open {
  z-index: 1;
  border-radius: 0 6px 6px 0;
}

.sz-bc-bar-unatt:only-of-type {
  border-radius: 6px;
  border-right: none;
}

.sz-bc-bar-open:only-of-type {
  border-radius: 6px;
}

.sz-bc-gridline {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 0;
  border-left: 1px dashed;
  z-index: 0;
  pointer-events: none;
}

.sz-bc-gridline:first-child {
  border-left-style: solid;
}

.sz-bc-val {
  font-size: 13px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.sz-bc-xaxis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 8px;
}

.sz-bc-agent-spacer {
  min-width: 100px;
  width: 100px;
  flex-shrink: 0;
}

.sz-bc-axis-labels {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.sz-bc-axis-labels span {
  font-size: 11px;
  font-weight: 400;
}

.sz-bc-val-spacer {
  min-width: 28px;
  width: 28px;
  flex-shrink: 0;
}

.sz-bc-legend {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 16px;
  padding-top: 4px;
}

.sz-bc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sz-bc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sz-bc-legend-item span:last-child {
  font-size: 13px;
  font-weight: 400;
}

.sz-bc-tooltip-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  cursor: default;
}

.sz-bc-bar:hover {
  filter: brightness(1.1);
}

.sz-bc-container {
  width: 100%;
}


/* ====== Section 5: Team Bar Chart ====== */

.sz-tc { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sz-tc-area { display: flex; flex-direction: column; gap: 12px; }

.sz-tc-row { display: flex; align-items: center; gap: 12px; height: 32px; }

.sz-tc-agent { display: flex; align-items: center; gap: 8px; min-width: 100px; width: 100px; flex-shrink: 0; }

.sz-tc-avatar-txt {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sz-tc-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;
}

.sz-tc-bar-wrap { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; }

.sz-tc-bar-track { position: relative; flex: 1; height: 24px; border-radius: 6px; overflow: visible; }

.sz-tc-bar {
  position: absolute; top: 0; height: 100%;
  border-radius: 6px; transition: width 0.4s ease;
}

.sz-tc-bar-unatt {
  left: 0; z-index: 2;
  border-radius: 6px 0 0 6px;
  border-right: 2px solid rgba(255,255,255,0.6);
}

.dark .sz-tc-bar-unatt { border-right-color: rgba(0,0,0,0.3); }

.sz-tc-bar-open { z-index: 1; border-radius: 0 6px 6px 0; }

.sz-tc-bar-unatt:only-of-type { border-radius: 6px; border-right: none; }
.sz-tc-bar-open:only-of-type { border-radius: 6px; }

.sz-tc-gridline {
  position: absolute; top: -8px; bottom: -8px; width: 0;
  border-left: 1px dashed; z-index: 0; pointer-events: none;
}
.sz-tc-gridline:first-child { border-left-style: solid; }

.sz-tc-val { font-size: 13px; font-weight: 600; min-width: 28px; text-align: right; flex-shrink: 0; }

.sz-tc-xaxis { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 8px; }
.sz-tc-agent-spacer { min-width: 100px; width: 100px; flex-shrink: 0; }
.sz-tc-axis-labels { display: flex; justify-content: space-between; flex: 1; }
.sz-tc-axis-labels span { font-size: 11px; font-weight: 400; }
.sz-tc-val-spacer { min-width: 28px; width: 28px; flex-shrink: 0; }

.sz-tc-legend { display: flex; justify-content: flex-end; gap: 20px; margin-top: 16px; padding-top: 4px; }
.sz-tc-legend-item { display: flex; align-items: center; gap: 6px; }
.sz-tc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sz-tc-legend-item span:last-child { font-size: 13px; font-weight: 400; }

.sz-tc-tooltip-zone {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 3; cursor: default;
}

.sz-tc-bar:hover { filter: brightness(1.1); }
.sz-tc-container { width: 100%; }


/* ====== Section 6: Overview Dropdown Styling (Figma) ====== */

.reports--wrapper .relative > div.absolute.rounded-xl {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  width: 284px !important;
  min-width: 284px !important;
  padding: 4px !important;
  gap: 4px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04) !important;
  height: auto !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl > .sticky {
  padding: 12px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: -4px -4px 4px -4px !important;
  border-radius: 12px 12px 0 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl input[type="search"] {
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  height: 36px !important;
  font-size: 14px !important;
  color: #000000 !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl button {
  height: 44px !important;
  min-height: 44px !important;
  padding: 12px !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  border: none !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Chat icon — only on Conversas (top row) dropdown items */
.sz-overview-top-row .relative > div.absolute.rounded-xl button::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.5 3h13A1.5 1.5 0 0118 4.5v8a1.5 1.5 0 01-1.5 1.5H10l-4.5 3.5V14H3.5A1.5 1.5 0 012 12.5v-8A1.5 1.5 0 013.5 3z' stroke='%23525252' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='6' y1='7.5' x2='14' y2='7.5' stroke='%23525252' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='6' y1='10.5' x2='11' y2='10.5' stroke='%23525252' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px !important;
}

/* Calendar icon — Tráfego da conversa + Resoluções dropdown items */
.sz-second-row-right .relative > div.absolute.rounded-xl button::before,
.sz-row-half-right .relative > div.absolute.rounded-xl button::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='1.5' stroke='%23525252' stroke-width='1.5'/%3E%3Cline x1='2.5' y1='8.5' x2='17.5' y2='8.5' stroke='%23525252' stroke-width='1.5'/%3E%3Cline x1='6' y1='2.5' x2='6' y2='5.5' stroke='%23525252' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='14' y1='2.5' x2='14' y2='5.5' stroke='%23525252' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl button > span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000000 !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  line-height: 20px !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl button:hover {
  background: #F5F5F5 !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl button.bg-n-alpha-1 {
  background: #EEF6F0 !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl button.bg-n-alpha-1::after {
  content: '';
  display: block !important;
  width: 10px !important;
  height: 6px !important;
  border-left: 1.5px solid #388E3C !important;
  border-bottom: 1.5px solid #388E3C !important;
  transform: rotate(-45deg) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  margin-top: -4px !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl p {
  padding: 8px 12px 4px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #525252 !important;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  line-height: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
}

.reports--wrapper .relative > div.absolute.rounded-xl .h-px {
  display: none !important;
}


/* ====== Section 7: Card Entrance Animations ====== */

/* Cards start hidden */
.reports--wrapper .rounded-xl,
.reports--wrapper [data-sz-tokens-card],
.reports--wrapper .sz-overview-top-row,
.reports--wrapper .sz-overview-second-row,
.reports--wrapper .sz-overview-third-row,
.reports--wrapper .sz-overview-fourth-row,
.reports--wrapper .flex.flex-row.flex-wrap {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1);
}

/* Reveal when ready */
.sz-overview-ready .rounded-xl,
.sz-overview-ready [data-sz-tokens-card],
.sz-overview-ready .sz-overview-top-row,
.sz-overview-ready .sz-overview-second-row,
.sz-overview-ready .sz-overview-third-row,
.sz-overview-ready .sz-overview-fourth-row,
.sz-overview-ready .flex.flex-row.flex-wrap {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays per row */
.sz-overview-ready .sz-overview-top-row,
.sz-overview-ready .sz-overview-top-row .rounded-xl,
.sz-overview-ready .sz-overview-top-row [data-sz-tokens-card] {
  transition-delay: 0s;
}
.sz-overview-ready .sz-overview-second-row,
.sz-overview-ready .sz-overview-second-row .rounded-xl {
  transition-delay: 0.07s;
}
.sz-overview-ready .sz-overview-third-row .sz-row-half-left,
.sz-overview-ready .sz-overview-third-row .sz-row-half-left .rounded-xl {
  transition-delay: 0.14s;
}
.sz-overview-ready .sz-overview-third-row .sz-row-half-right,
.sz-overview-ready .sz-overview-third-row .sz-row-half-right .rounded-xl {
  transition-delay: 0.14s;
}
.sz-overview-ready .sz-overview-fourth-row,
.sz-overview-ready .sz-overview-fourth-row .rounded-xl {
  transition-delay: 0.21s;
}
.sz-overview-ready .sz-overview-fifth-row,
.sz-overview-ready .sz-overview-fifth-row .rounded-xl {
  transition-delay: 0.28s;
}

/* Bar chart width animation */
.sz-bc-bar, .sz-tc-bar {
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1) !important;
}
.sz-bar-animate {
  width: 0 !important;
}

/* Token progress bar fill animation */
.sz-tokens-fill {
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1) !important;
}
.sz-fill-animate {
  width: 0 !important;
}

/* Metric value slide-up */
@keyframes szSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   8. RESPONSIVE MOBILE — Reports Overview
   3 breakpoints: 1024px (tablet), 768px (small tablet), 480px (phone)
   ==================================================================== */

/* Safety: prevent horizontal overflow */
.reports--wrapper {
  overflow-x: hidden;
}

/* ---- BREAKPOINT 1: Tablets (max-width: 1024px) ---- */
@media (max-width: 1024px) {
  .sz-overview-top-row,
  .sz-overview-second-row,
  .sz-overview-third-row,
  .sz-overview-fourth-row {
    gap: 12px !important;
  }
  .reports--wrapper .flex.flex-col.gap-4.pb-6 {
    gap: 12px !important;
  }
  .sz-tokens-bars {
    gap: 16px !important;
  }
  .sz-bots-chart-wrap {
    width: 200px !important;
    height: 200px !important;
  }
  .sz-bots-chart-wrap svg {
    width: 200px !important;
    height: 200px !important;
  }
  .sz-bots-console {
    height: 220px !important;
  }
  .sz-bots-body {
    gap: 16px !important;
    padding: 12px 16px !important;
  }
  .sz-bc-agent,
  .sz-tc-agent {
    min-width: 80px !important;
    width: 80px !important;
  }
  .sz-bc-agent-spacer,
  .sz-tc-agent-spacer {
    min-width: 80px !important;
    width: 80px !important;
  }
  .sz-bc-name,
  .sz-tc-name {
    max-width: 44px !important;
  }
  [data-sz-lc-wrapper],
  [data-sz-res-wrapper] {
    height: 240px !important;
  }
}

/* ---- BREAKPOINT 2: Small tablets (max-width: 768px) ---- */
@media (max-width: 768px) {
  /* Stack all rows vertically */
  .sz-overview-top-row {
    flex-direction: column !important;
  }
  .sz-overview-top-row > [data-sz-tokens-card] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .sz-overview-second-row,
  .sz-overview-third-row,
  .sz-overview-fourth-row {
    flex-direction: column !important;
  }
  .sz-second-row-left,
  .sz-second-row-right,
  .sz-row-half-left,
  .sz-row-half-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .sz-overview-top-row > .flex {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .sz-overview-top-row > .flex > * {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .sz-tokens-bars {
    gap: 12px !important;
  }
  .sz-tokens-card {
    padding: 10px !important;
  }
  .sz-bots-body {
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px !important;
    gap: 16px !important;
  }
  .sz-bots-chart-wrap {
    width: 200px !important;
    height: 200px !important;
    flex-shrink: 0 !important;
  }
  .sz-bots-chart-wrap svg {
    width: 200px !important;
    height: 200px !important;
  }
  .sz-bots-console {
    width: 100% !important;
    height: 200px !important;
  }
  .sz-bots-legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .sz-bots-legend-item span:last-child {
    font-size: 11px !important;
  }
  .sz-bots-header {
    padding: 10px 12px 6px !important;
  }
  .sz-bc-agent,
  .sz-tc-agent {
    min-width: 80px !important;
    width: 80px !important;
  }
  .sz-bc-agent-spacer,
  .sz-tc-agent-spacer {
    min-width: 80px !important;
    width: 80px !important;
  }
  .sz-bc-name,
  .sz-tc-name {
    max-width: 44px !important;
    font-size: 12px !important;
  }
  .sz-bc-row,
  .sz-tc-row {
    gap: 8px !important;
  }
  .sz-bc-xaxis,
  .sz-tc-xaxis {
    gap: 8px !important;
  }
  [data-sz-lc-wrapper],
  [data-sz-res-wrapper] {
    height: 220px !important;
  }
  .reports--wrapper .card-header button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .reports--wrapper .relative > div.absolute.rounded-xl {
    max-width: calc(100vw - 32px) !important;
  }
  .sz-second-row-right .card-body,
  .sz-row-half-right .card-body,
  .sz-row-half-left .card-body {
    padding: 8px !important;
  }
  .sz-overview-top-row,
  .sz-overview-second-row,
  .sz-overview-third-row,
  .sz-overview-fourth-row {
    gap: 12px !important;
  }
  .reports--wrapper .flex.flex-col.gap-4.pb-6 {
    gap: 12px !important;
    padding-bottom: 16px !important;
  }
}

/* ---- BREAKPOINT 3: Phones (max-width: 480px) ---- */
@media (max-width: 480px) {
  .reports--wrapper .flex.flex-col.gap-4.pb-6 {
    gap: 10px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .sz-overview-top-row,
  .sz-overview-second-row,
  .sz-overview-third-row,
  .sz-overview-fourth-row {
    gap: 10px !important;
  }
  .reports--wrapper h5,
  .sz-bots-title,
  .sz-tokens-title {
    font-size: 14px !important;
  }
  .sz-overview-top-row .card-body h3 {
    font-size: 18px !important;
  }
  .sz-overview-top-row .card-body p {
    font-size: 11px !important;
  }
  .sz-tokens-bars {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .sz-tokens-bar-section {
    flex: 1 1 100% !important;
  }
  .sz-tokens-card {
    padding: 8px !important;
  }
  .sz-tokens-btn {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .sz-tokens-bar-label span {
    font-size: 12px !important;
  }
  .sz-tokens-counter {
    font-size: 9px !important;
  }
  .sz-bots-chart-wrap {
    width: 160px !important;
    height: 160px !important;
  }
  .sz-bots-chart-wrap svg {
    width: 160px !important;
    height: 160px !important;
  }
  .sz-bots-console {
    height: 160px !important;
  }
  .sz-bots-body {
    padding: 8px !important;
    gap: 12px !important;
  }
  .sz-bots-header {
    padding: 8px 8px 4px !important;
  }
  .sz-bots-legend {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .sz-bots-legend-dot {
    width: 12px !important;
    height: 12px !important;
  }
  .sz-bots-legend-item span:last-child {
    font-size: 10px !important;
  }
  .sz-bots-console-scroll {
    font-size: 9px !important;
    padding: 10px !important;
    line-height: 14px !important;
  }
  .sz-bc-agent,
  .sz-tc-agent {
    min-width: 60px !important;
    width: 60px !important;
    gap: 4px !important;
  }
  .sz-bc-agent-spacer,
  .sz-tc-agent-spacer {
    min-width: 60px !important;
    width: 60px !important;
  }
  .sz-bc-avatar,
  .sz-bc-avatar-txt,
  .sz-tc-avatar-txt {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
  }
  .sz-bc-name,
  .sz-tc-name {
    max-width: 32px !important;
    font-size: 11px !important;
  }
  .sz-bc-val,
  .sz-tc-val {
    min-width: 22px !important;
    font-size: 11px !important;
  }
  .sz-bc-val-spacer,
  .sz-tc-val-spacer {
    min-width: 22px !important;
    width: 22px !important;
  }
  .sz-bc-row,
  .sz-tc-row {
    gap: 6px !important;
    height: 28px !important;
  }
  .sz-bc-bar-track,
  .sz-tc-bar-track {
    height: 20px !important;
  }
  .sz-bc-xaxis,
  .sz-tc-xaxis {
    gap: 6px !important;
  }
  .sz-bc-axis-labels span,
  .sz-tc-axis-labels span {
    font-size: 9px !important;
  }
  .sz-bc-legend,
  .sz-tc-legend {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .sz-bc-legend-item span,
  .sz-tc-legend-item span {
    font-size: 11px !important;
  }
  .sz-bc-dot,
  .sz-tc-dot {
    width: 8px !important;
    height: 8px !important;
  }
  [data-sz-lc-wrapper],
  [data-sz-res-wrapper] {
    height: 180px !important;
  }
  .sz-second-row-right .card-body,
  .sz-row-half-right .card-body,
  .sz-row-half-left .card-body {
    padding: 6px !important;
  }
  .sz-second-row-right .card-header,
  .sz-row-half-right .card-header,
  .sz-row-half-left .card-header {
    padding: 8px 8px 4px !important;
  }
  .reports--wrapper .card-header button {
    font-size: 10px !important;
    padding: 3px 6px !important;
    min-height: 26px !important;
  }
  .reports--wrapper .relative > div.absolute.rounded-xl {
    max-width: calc(100vw - 16px) !important;
    font-size: 13px !important;
  }
  .sz-stats-subtitle span,
  .sz-bots-subtitle span,
  .sz-tokens-subtitle span {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
}


/* ====== KPI Row ====== */
.sz-kpi-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
.sz-kpi-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  gap: 8px;
  height: 92px;
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
}
.dark .sz-kpi-card {
  border-color: #2D2F36;
  background: #1F2125;
}
/* Override inner metric styles */
.sz-kpi-card .flex-1.min-w-0 {
  padding-bottom: 0 !important;
  width: 100%;
}
.sz-kpi-card h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #262626 !important;
  margin: 0 !important;
}
.dark .sz-kpi-card h3 {
  color: #E5E7EB !important;
}
.sz-kpi-card p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  color: #11361A !important;
  margin: 0 !important;
}
.dark .sz-kpi-card p {
  color: #4ADE80 !important;
}

@media (max-width: 1200px) {
  .sz-kpi-row { flex-wrap: wrap; }
  .sz-kpi-card { flex: 0 0 calc(25% - 12px); }
}
@media (max-width: 768px) {
  .sz-kpi-card { flex: 0 0 calc(50% - 8px); }
}

/* KPI icon + label row */
.sz-kpi-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sz-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Tokens card full width when outside topRow */
[data-sz-tokens-card] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide original stats container but keep in DOM for Vue */
.sz-stats-hidden {
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
/* KPI clone card styles */
.sz-kpi-card h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #262626 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.dark .sz-kpi-card h3 { color: #E5E7EB !important; }
.sz-kpi-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  color: #11361A !important;
  margin: 0 !important;
}
.dark .sz-kpi-val { color: #4ADE80 !important; }

/* Chart Network Row */
.sz-overview-chart-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}
.sz-chart-row-left,
.sz-chart-row-right {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}
.sz-chart-row-right .rounded-xl {
  height: 100% !important;
}
@media (max-width: 768px) {
  .sz-overview-chart-row { flex-direction: column; }
  .sz-chart-row-left, .sz-chart-row-right { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Etiquetas Row */
.sz-overview-etiquetas-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}
.sz-et-row-left,
.sz-et-row-right {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px);
  min-width: 0;
}
.sz-et-row-right .rounded-xl {
  height: 100% !important;
}
@media (max-width: 768px) {
  .sz-overview-etiquetas-row { flex-direction: column; }
  .sz-et-row-left, .sz-et-row-right { flex: 0 0 100% !important; max-width: 100% !important; }
}