/* ==========================================================
   CLOUDPELIZZON PORTAL
   V8.2 - REPORT ANALYTICS
   ========================================================== */

.cp82-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 18px;
}

.cp82-head small,
.cp82-panel-heading small,
.cp82-chart-head small {
  display: block;

  color: #59e7ff;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .13em;
}

.cp82-head h1 {
  margin: 7px 0 6px;

  font-size: clamp(30px, 3vw, 42px);

  letter-spacing: -.04em;
}

.cp82-head p {
  margin: 0;

  color: #aec4ce;

  font-size: 12px;
}


.cp82-export-actions {
  display: flex;

  gap: 8px;
}

.cp82-export {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 43px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(89, 231, 255, .27);

  background:
    rgba(8, 27, 36, .94);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .07em;

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.cp82-export:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(89, 231, 255, .70);
}

.cp82-export.excel {
  color: #75efb9;
}

.cp82-export.pdf {
  color: #ff899c;
}


.cp82-panel {
  border:
    1px solid
    rgba(89, 231, 255, .15);

  background:
    linear-gradient(
      145deg,
      rgba(14, 31, 40, .97),
      rgba(7, 19, 25, .98)
    );

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.20);
}


.cp82-filter-panel {
  margin-bottom: 13px;

  padding: 18px;
}

.cp82-panel-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 14px;
}

.cp82-panel-heading h2 {
  margin: 4px 0 0;

  font-size: 18px;
}

.cp82-clear {
  color: #80a4b2;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .07em;
}


.cp82-filter-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 10px;
}

.cp82-filter-grid label span {
  display: block;

  margin-bottom: 6px;

  color: #b7ccd5;

  font-size: 9px;
  font-weight: 800;
}

.cp82-filter-grid input,
.cp82-filter-grid select {
  width: 100%;

  min-height: 42px;

  box-sizing: border-box;

  padding:
    0 11px;

  border:
    1px solid
    rgba(89, 190, 220, .27);

  outline: 0;

  background:
    rgba(4, 15, 21, .82);

  color: #edf7fa;
}

.cp82-filter-button {
  align-self: end;

  min-height: 42px;

  border: 0;

  background:
    linear-gradient(
      90deg,
      #59e7ff,
      #4bb9ff
    );

  color: #00141b;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .07em;

  cursor: pointer;
}


.cp82-kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 10px;

  margin-bottom: 13px;
}

.cp82-kpi {
  position: relative;

  overflow: hidden;

  min-height: 116px;

  padding: 17px;

  border:
    1px solid
    rgba(89, 231, 255, .13);

  background:
    linear-gradient(
      145deg,
      rgba(17, 40, 50, .96),
      rgba(8, 23, 30, .96)
    );
}

.cp82-kpi::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 90px;

  top: -45px;
  right: -35px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(89,231,255,.15),
      transparent 70%
    );
}

.cp82-kpi small {
  display: block;

  color: #819ca8;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .07em;
}

.cp82-kpi > strong {
  display: block;

  margin:
    9px 0 5px;

  color: #59e7ff;

  font-size: 31px;
}

.cp82-kpi > strong.time {
  font-size: 23px;
}

.cp82-kpi > span {
  display: block;

  color: #8ca6b1;

  font-size: 8px;
}

.cp82-kpi.success > strong {
  color: #75efb9;
}

.cp82-kpi.warning > strong {
  color: #ffd56a;
}


.cp82-sla-kpi {
  position: relative;

  width: 62px;
  height: 62px;

  margin-top: 5px;
}

.cp82-sla-ring {
  width: 62px;
  height: 62px;

  transform:
    rotate(-90deg);
}

.cp82-sla-ring circle {
  fill: none;

  stroke-width: 4;
}

.cp82-sla-ring .background {
  stroke:
    rgba(255,255,255,.09);
}

.cp82-sla-ring .value {
  stroke: #75efb9;

  stroke-linecap: round;
}

.cp82-sla-kpi strong {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: #75efb9;

  font-size: 12px;
}


.cp82-dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 11px;

  margin-bottom: 13px;
}

.cp82-chart-card {
  min-height: 260px;

  padding: 18px;
}

.cp82-chart-card.cp82-wide {
  grid-column: 1 / -1;
}

.cp82-chart-head {
  margin-bottom: 18px;
}

.cp82-chart-head h3 {
  margin: 4px 0 0;

  font-size: 17px;
}


.cp82-bars {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.cp82-bar-row {
  min-width: 0;
}

.cp82-bar-label {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 5px;
}

.cp82-bar-label span {
  overflow: hidden;

  color: #bfd0d8;

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp82-bar-label strong {
  color: #edf7fa;

  font-size: 9px;
}

.cp82-bar-row svg {
  display: block;

  width: 100%;
  height: 10px;
}

.cp82-bar-row rect.track {
  fill:
    rgba(255,255,255,.07);
}

.cp82-bar-row rect.bar {
  fill: #59e7ff;
}

.cp82-bar-row rect.priority {
  fill: #ffd56a;
}

.cp82-bar-row rect.type {
  fill: #6fa7ff;
}

.cp82-bar-row rect.attendant {
  fill: #75efb9;
}

.cp82-bar-row rect.customer {
  fill: #c592ff;
}


.cp82-evolution {
  display: flex;

  align-items: flex-end;

  gap: 11px;

  min-height: 180px;

  overflow-x: auto;

  padding-top: 12px;
}

.cp82-evolution-item {
  flex:
    1 0 42px;

  min-width: 42px;

  text-align: center;
}

.cp82-evolution-column {
  position: relative;

  height: 145px;
}

.cp82-evolution-column strong {
  display: block;

  margin-bottom: 5px;

  color: #edf7fa;

  font-size: 8px;
}

.cp82-evolution-column svg {
  display: block;

  width: 100%;
  height: 120px;
}

.cp82-evolution-column rect.track {
  fill:
    rgba(255,255,255,.04);
}

.cp82-evolution-column rect.bar {
  fill: #4bb9ff;
}

.cp82-evolution-item > span {
  display: block;

  margin-top: 5px;

  color: #819ca8;

  font-size: 7px;
}


.cp82-no-data {
  width: 100%;

  padding:
    50px 20px;

  text-align: center;

  color: #819ca8;
}


.cp82-table-panel {
  padding: 18px;
}

.cp82-result-count {
  color: #59e7ff;

  font-size: 9px;
}

.cp82-table-scroll {
  overflow: auto;
}

.cp82-table {
  width: 100%;

  min-width: 1100px;

  border-collapse: collapse;
}

.cp82-table th,
.cp82-table td {
  padding:
    12px 11px;

  border-bottom:
    1px solid
    rgba(89,231,255,.08);

  text-align: left;
}

.cp82-table th {
  color: #8099a5;

  font-size: 7px;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .06em;
}

.cp82-table td {
  color: #c3d3da;

  font-size: 9px;
}

.cp82-table tbody tr:nth-child(even) {
  background:
    rgba(255,255,255,.015);
}

.cp82-table tbody tr:hover {
  background:
    rgba(89,231,255,.045);
}

.cp82-table td.subject {
  min-width: 250px;

  color: #edf7fa;

  font-weight: 700;
}

.cp82-table a {
  color: #59e7ff;
}


@media (max-width: 1150px) {

  .cp82-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .cp82-filter-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

}


@media (max-width: 820px) {

  .cp82-head {
    flex-direction: column;
  }

  .cp82-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .cp82-chart-card.cp82-wide {
    grid-column: auto;
  }

  .cp82-export-actions {
    width: 100%;
  }

  .cp82-export {
    flex: 1;
  }

}


@media (max-width: 560px) {

  .cp82-kpi-grid,
  .cp82-filter-grid {
    grid-template-columns: 1fr;
  }

  .cp82-export-actions {
    flex-direction: column;
  }

}