@charset "UTF-8";
/*!
 * AZ Dashboard Component v2.0.0
 * Self-contained dashboard layout for AZ UI Kit — stat tiles, alert hub,
 * action queues, quick actions, gauge/meter/spotlight/segbar widgets.
 * Pure CSS grid/flex, NO Bootstrap dependency.
 * Copyright 2026 Tunet Ltd · Licensed under MIT
 */
.az-ic {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.14em;
}

.az-dash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.az-dash-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
  align-items: start;
}

.az-dash-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .az-dash-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .az-dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.az-dash-2col {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.az-dash-1col {
  grid-template-columns: 1fr;
}

.az-dash-charts {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.az-kpi {
  position: relative;
  display: block;
  padding: 1rem 1.15rem 1.1rem;
}

.az-kpi-icon {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: auto;
  height: auto;
  font-size: 1rem;
  line-height: 1;
  color: rgba(236, 238, 244, 0.4);
  background: none;
  border-radius: 0;
}

svg.az-kpi-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.az-kpi-body {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.45rem;
  min-width: 0;
}

.az-kpi-value {
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.05;
  color: #eceef4;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.az-kpi-label {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(236, 238, 244, 0.62);
  padding-right: 1.5rem;
}

.az-kpi-sublabel {
  font-size: 0.72rem;
  color: rgba(236, 238, 244, 0.4);
}

.az-kpi--positive .az-kpi-icon {
  color: #35c46f;
}

.az-kpi--warning .az-kpi-icon {
  color: #e6b84a;
}

.az-kpi--danger .az-kpi-icon {
  color: #f06a6a;
}

.az-kpi--info .az-kpi-icon {
  color: rgba(236, 238, 244, 0.4);
}

.az-dash-card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.9rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #eceef4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.az-dash-card-title i, .az-dash-card-title .az-ic {
  width: 1.1rem;
  font-size: 0.9rem;
  text-align: center;
  flex-shrink: 0;
  color: rgba(236, 238, 244, 0.4);
}
.az-dash-card-title .az-ic {
  height: 1rem;
}

.az-dash-card-body {
  padding: 1rem 1.15rem 1.15rem;
}

.az-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}

.az-alert {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.3;
  text-decoration: none;
  color: #eceef4;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.az-alert:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
}

.az-bento-card a.az-alert,
.az-bento-card a.az-queue-item {
  display: flex;
}

.az-alert > i,
.az-alert > .az-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 0.9rem;
  color: rgba(236, 238, 244, 0.62);
  background: rgba(255, 255, 255, 0.06);
}

.az-alert > .az-ic {
  padding: 8px;
  box-sizing: border-box;
}

.az-alert span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(236, 238, 244, 0.62);
}

.az-alert-count {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
  color: #eceef4;
  font-variant-numeric: tabular-nums;
}

.az-alert::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.3;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.az-alert:hover::after {
  opacity: 0.6;
  transform: rotate(45deg) translate(1px, -1px);
}

.az-alert--positive {
  border-color: rgba(53, 196, 111, 0.22);
}
.az-alert--positive > i, .az-alert--positive > .az-ic {
  color: #35c46f;
  background: rgba(36, 192, 99, 0.13);
}
.az-alert--positive .az-alert-count {
  color: #35c46f;
}
.az-alert--positive:hover {
  border-color: rgba(53, 196, 111, 0.4);
  background: rgba(36, 192, 99, 0.05);
}

.az-alert--negative {
  border-color: rgba(240, 106, 106, 0.25);
}
.az-alert--negative > i, .az-alert--negative > .az-ic {
  color: #f06a6a;
  background: rgba(250, 85, 85, 0.13);
}
.az-alert--negative .az-alert-count {
  color: #f06a6a;
}
.az-alert--negative:hover {
  border-color: rgba(240, 106, 106, 0.45);
  background: rgba(250, 85, 85, 0.05);
}

.az-alert--neutral {
  cursor: pointer;
}
.az-alert--neutral > i, .az-alert--neutral > .az-ic {
  color: #f6b73c;
  background: rgba(246, 183, 60, 0.1);
}
.az-alert--neutral span {
  flex-direction: row;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #eceef4;
}
.az-alert--neutral:hover {
  background: rgba(246, 183, 60, 0.06);
  border-color: rgba(246, 183, 60, 0.3);
}

.az-queue-list {
  display: flex;
  flex-direction: column;
}

.az-queue-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  color: #eceef4;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background 0.15s ease;
}
.az-queue-item:last-child {
  box-shadow: none;
}
.az-queue-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.az-queue-item i, .az-queue-item .az-ic {
  width: 1.05rem;
  font-size: 0.85rem;
  text-align: center;
  flex-shrink: 0;
  color: rgba(236, 238, 244, 0.4);
}

.az-queue-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.az-queue-meta {
  font-size: 0.78rem;
  color: rgba(236, 238, 244, 0.62);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.az-queue-empty {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.5rem;
  font-size: 0.875rem;
  color: rgba(236, 238, 244, 0.62);
}
.az-queue-empty i, .az-queue-empty .az-ic {
  color: #35c46f;
}

.az-queue-footer {
  margin-top: 0.75rem;
  text-align: right;
}
.az-queue-footer a {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f6b73c;
  text-decoration: none;
}
.az-queue-footer a:hover {
  text-decoration: underline;
}

.az-dash-card-pad {
  padding: 1.15rem;
}

.az-bento-card:has(.az-chart) .az-dash-card-pad {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.az-dash-1col .az-dash-card-pad [data-az-calendar] {
  max-width: 880px;
  margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Extended widgets — radial gauge, progress meters, spotlight rows.
 * Same bento/token language as the KPI + chart cards above. Rendered by the
 * platform dashboards' bespoke widget row (see dashboard/home.html ›
 * block dashboard-charts). All pure CSS/SVG — no chart engine required.
 * ────────────────────────────────────────────────────────────────────────── */
/* ── Grid symmetry ─────────────────────────────────────────────────────────
 * Every card in the KPI, chart and widget grids shares one height, and its
 * body fills the card so content is vertically centred. This makes each row
 * a clean band regardless of how much a given card holds. */
.az-dash-kpis,
.az-dash-charts {
  align-items: stretch;
}

.az-dash-charts > .az-bento-card {
  display: flex;
  flex-direction: column;
  min-height: 452px;
}

.az-dash-charts > .az-bento-card > .az-dash-card-pad {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Radial score gauge (az-gauge) ─────────────────────────────────────────
 * Score-in-a-ring. Drive it from the card element with two custom props:
 *   style="--az-gauge-pct: 82; --az-gauge-color: #3d8bfd;"
 * The SVG arc is painted with a same-hue gradient (defs in the markup).       */
.az-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
}

.az-gauge-ring {
  position: relative;
  width: 182px;
  height: 182px;
  flex-shrink: 0;
}
.az-gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-origin: center;
}

.az-gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 15;
}

/* Gradient stops inherit the card's --az-gauge-color; different opacity gives
 * the arc a subtle sheen from thick to thin. */
.az-gauge-stop-a {
  stop-color: var(--az-gauge-color, #35c46f);
  stop-opacity: 1;
}

.az-gauge-stop-b {
  stop-color: var(--az-gauge-color, #35c46f);
  stop-opacity: 0.55;
}

.az-gauge-fill {
  --az-circ: 540.35; /* 2π·86 — keep in sync with the SVG circle's r */
  fill: none;
  stroke: url(#azGaugeGrad);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: var(--az-circ);
  stroke-dashoffset: calc(var(--az-circ) * (1 - var(--az-gauge-pct, 0) / 100));
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.az-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.az-gauge-score {
  font-size: 2.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #eceef4;
  font-variant-numeric: tabular-nums;
}
.az-gauge-score small {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(236, 238, 244, 0.4);
  letter-spacing: 0;
}

.az-gauge-grade {
  margin-top: 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--az-gauge-color, #35c46f);
  background: color-mix(in srgb, var(--az-gauge-color, #35c46f) 14%, transparent);
}

/* Band scale — shows which grade the score falls in. */
.az-gauge-scale {
  display: flex;
  gap: 5px;
  width: 100%;
  margin-top: auto;
}

.az-gauge-scale-seg {
  flex: 1;
  padding: 0.4rem 0.2rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(236, 238, 244, 0.4);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.az-gauge-scale-seg.is-active {
  color: var(--seg, #eceef4);
  border-color: var(--seg, #eceef4);
  background: color-mix(in srgb, var(--seg, #eceef4) 14%, transparent);
}

.az-gauge-caption {
  margin: 0;
  max-width: 36ch;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
  color: rgba(236, 238, 244, 0.62);
}

/* ── Progress meters (az-meter) ────────────────────────────────────────────
 * Labelled horizontal bars. Drive each fill with:
 *   style="width: 88%; --az-meter-color: #24c063;"                          */
.az-meter-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
}

.az-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.az-meter-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #eceef4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.az-meter-label i, .az-meter-label .az-ic {
  width: 1.05rem;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(236, 238, 244, 0.4);
}

.az-meter-value {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #eceef4;
  font-variant-numeric: tabular-nums;
}

.az-meter-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.az-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: var(--az-meter-color, #35c46f);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Spotlight rows (az-spotlight) ─────────────────────────────────────────
 * Icon · value/label · status pill. Tone = positive|negative|neutral drives
 * both the icon tint and the pill colour.                                     */
.az-spotlight-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.az-spotlight-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background 0.15s ease;
}
.az-spotlight-row:last-child {
  box-shadow: none;
}
.az-spotlight-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

.az-spotlight-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 0.9rem;
  color: rgba(236, 238, 244, 0.62);
  background: rgba(255, 255, 255, 0.06);
}
.az-spotlight-icon .az-ic {
  width: 1rem;
  height: 1rem;
}

.az-spotlight-row--negative .az-spotlight-icon {
  color: #f06a6a;
  background: rgba(250, 85, 85, 0.13);
}

.az-spotlight-row--positive .az-spotlight-icon {
  color: #35c46f;
  background: rgba(36, 192, 99, 0.13);
}

.az-spotlight-row--neutral .az-spotlight-icon {
  color: rgba(236, 238, 244, 0.62);
  background: rgba(255, 255, 255, 0.06);
}

.az-spotlight-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.az-spotlight-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.az-spotlight-value {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
  color: #eceef4;
  font-variant-numeric: tabular-nums;
}

.az-spotlight-label {
  font-size: 0.8rem;
  line-height: 1.3;
  color: rgba(236, 238, 244, 0.62);
}

/* Status pill — dot-prefix treatment so state reads at a glance. */
.az-spotlight-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.az-spotlight-trend::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.az-spotlight-trend--positive {
  color: #35c46f;
  background: rgba(36, 192, 99, 0.13);
}

.az-spotlight-trend--negative {
  color: #f06a6a;
  background: rgba(250, 85, 85, 0.13);
}

.az-spotlight-trend--neutral {
  color: rgba(236, 238, 244, 0.62);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Segmented distribution bar (az-segbar) ────────────────────────────────
 * A single stacked bar + 2×2 legend. Each segment: width % + colour inline.  */
.az-segbar {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
}

.az-segbar-track {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.az-segbar-seg {
  height: 100%;
  min-width: 3px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.az-segbar-seg + .az-segbar-seg {
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.55);
}

.az-segbar-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.5rem;
}

.az-segbar-key {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: rgba(236, 238, 244, 0.62);
}
.az-segbar-key .dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}
.az-segbar-key b {
  margin-left: auto;
  font-weight: 600;
  color: #eceef4;
  font-variant-numeric: tabular-nums;
}

.az-segbar-caption {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(236, 238, 244, 0.62);
}

/* ── Responsive ────────────────────────────────────────────────────────────
 * Tablet: keep the equal-height chart/widget cards but drop the tall desktop
 * floor so 2–3-up rows don't over-stretch. */
@media (max-width: 1100px) {
  .az-dash-charts > .az-bento-card {
    min-height: 380px;
  }
}
/* Phone: let cards size to their content (single column — nothing to equalise),
 * and tighten titles, padding and gaps so nothing feels oversized. */
@media (max-width: 600px) {
  .az-dash {
    gap: 0.85rem;
  }
  .az-dash-grid {
    gap: 0.85rem;
  }
  .az-dash-charts > .az-bento-card {
    min-height: 0;
  }
  .az-dash-card-title {
    padding: 0.85rem 1rem;
  }
  .az-dash-card-pad {
    padding: 1rem;
  }
  .az-dash-card-body {
    padding: 0.9rem 1rem 1rem;
  }
  .az-kpi {
    padding: 0.85rem 1rem 0.95rem;
  }
  .az-kpi-value {
    font-size: 1.45rem;
  }
  .az-alert-grid {
    grid-template-columns: 1fr;
  }
  .az-gauge-ring {
    width: 168px;
    height: 168px;
  }
}

/*# sourceMappingURL=az-dashboard.css.map */