// Overview dashboard
//
// Colours come from the WordPress admin palette: the accent tracks the user's
// chosen admin colour scheme through --wp-admin-theme-color, and the semantic
// tones are the admin palette's own greens, reds, yellows and greys rather than
// a second palette invented for this page. Radii follow the existing admin
// pages: 4px for cards and panels, 3px for controls and chips.

.arraysubs-overview {
  --as-ov-primary: var(--wp-admin-theme-color);
  --as-ov-primary-dark: var(--wp-admin-theme-color-darker-10);
  --as-ov-success: #008a20;
  --as-ov-danger: #d63638;
  --as-ov-warning: #dba617;
  --as-ov-notice: #dba617;
  --as-ov-accent: var(--wp-admin-theme-color);
  --as-ov-muted: #646970;
  --as-ov-heading: #1d2327;
  --as-ov-body: #50575e;
  --as-ov-grid: #dcdcde;
  --as-ov-border: #e4e5e8;
  --as-ov-surface: #f6f7f7;
  --as-ov-axis: #646970;

  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  margin: 0;
  padding: 0;
  color: var(--as-ov-body);

  // ── Toolbar ──────────────────────────────────────
  &__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-md;
    align-items: center;
    justify-content: space-between;
  }

  &__toolbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  &__quick-action.button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 29px;
    padding: 0 10px;
    font-size: 12.5px;
    line-height: 27px;

    svg {
      flex-shrink: 0;
    }
  }

  &__ranges {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--as-ov-primary);
    background: #fff;
    border-radius: 2px;
  }

  &__range {
    padding: 6px 12px;
    border: 0;
    border-right: 1px solid var(--as-ov-primary);
    background: #fff;
    color: var(--as-ov-body);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;

    &:last-child {
      border-right: 0;
    }

    &:hover {
      background: var(--as-ov-surface);
    }

    &.is-active {
      background: var(--as-ov-primary);
      color: #fff;
    }
  }

  &__toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  &__updated {
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__refresh.button {
    display: inline-flex !important;
    gap: 4px;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 26px;
  }

  &__spin {
    animation: arraysubs-overview-spin 1s linear infinite;
  }

  // ── Loading + error ──────────────────────────────
  &__body {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    transition: opacity $transition-fast;

    &.is-busy {
      opacity: 0.55;
    }
  }

  &__error {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--as-ov-danger);
    border-left-width: 4px;
    border-radius: $radius-sm;
    background: #fcf0f1;
    color: var(--as-ov-heading);
    font-size: 13px;

    svg {
      flex-shrink: 0;
      color: var(--as-ov-danger);
    }

    button {
      margin-left: auto;
    }
  }

  &__skeleton {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;

    > *,
    > * > * {
      border-radius: $radius-sm;
      background: linear-gradient(90deg, #f0f0f1 25%, #e5e5e6 37%, #f0f0f1 63%);
      background-size: 400% 100%;
      animation: arraysubs-overview-shimmer 1.4s ease infinite;
    }

    &-hero {
      height: 150px;
      border-radius: $radius-sm !important;
    }

    &-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: $spacing-md;
      background: none !important;
      animation: none !important;
    }

    &-kpi {
      height: 120px;
    }

    &-wide {
      height: 300px;
    }

    &-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: $spacing-md;
      background: none !important;
      animation: none !important;

      div {
        height: 240px;
      }
    }
  }

  // ── Health hero ──────────────────────────────────
  &__hero {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    align-items: center;
    padding: 26px 28px;
    border-radius: $radius-sm;
    background: #1e1e1e;
    color: #fff;
  }

  &__hero-main {
    display: flex;
    flex: 1.4;
    flex-direction: column;
    gap: 12px;
    min-width: 320px;
  }

  &__hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
  }

  &__badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    &--pro {
      background: #fff4e0;
      color: #8a5700;
    }
  }

  &__hero-title {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    text-wrap: pretty;
  }

  &__hero-link {
    display: inline-block;
    align-self: flex-start;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover,
    &:focus {
      color: #fff;
      opacity: 0.85;
    }
  }

  &__hero-metrics {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-wrap: wrap;
  }

  &__hero-mrr {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__hero-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  &__hero-value {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  &__hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
  }

  &__hero-note {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11.5px;
  }

  &__hero-spark {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 210px;
  }

  &__hero-caption {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    text-align: right;
  }

  // ── KPI row ──────────────────────────────────────
  &__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-md;
  }

  &__kpi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--as-ov-border);
    border-radius: $radius-sm;
    background: #fff;
  }

  &__kpi-content {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;

    > div {
      min-width: 0;
    }
  }

  &__kpi-spark {
    flex: 0 0 44%;
    min-width: 0;
    max-width: 220px;
    margin: 0;
    color: var(--as-ov-muted);
    font-size: 10.5px;

    figcaption {
      margin-top: 2px;
      text-align: right;
    }
  }

  &__kpi-spark-empty {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: flex-end;
  }

  &__kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: $radius-sm;

    &--success {
      background: #edfaef;
      color: var(--as-ov-success);
    }

    &--info {
      background: color-mix(
        in srgb,
        var(--wp-admin-theme-color) 6%,
        transparent
      );
      color: var(--as-ov-primary);
    }

    &--accent {
      background: color-mix(
        in srgb,
        var(--wp-admin-theme-color) 6%,
        transparent
      );
      color: var(--as-ov-accent);
    }

    &--notice {
      background: #fcf9e8;
      color: var(--as-ov-warning);
    }
  }

  &__chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    &--up {
      background: #edfaef;
      color: var(--as-ov-success);
    }

    &--down {
      background: #fcf0f1;
      color: var(--as-ov-danger);
    }

    &--flat {
      background: var(--as-ov-surface);
      color: var(--as-ov-muted);
    }
  }

  &__kpi-value {
    color: var(--as-ov-heading);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__kpi-label {
    color: var(--as-ov-muted);
    font-size: 13px;
  }

  &__kpi-link {
    font-size: 12px;
    font-weight: 600;
  }

  &__kpi-note {
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  // ── Cards ────────────────────────────────────────
  &__card {
    padding: 18px 20px;
    border: 1px solid var(--as-ov-border);
    border-radius: $radius-sm;
    background: #fff;
  }

  &__card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }

  &__card-title {
    margin: 0;
    color: var(--as-ov-heading);
    font-size: 14px;
    font-weight: 700;
  }

  &__card-sub {
    margin: 2px 0 0;
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__card-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
  }

  &__footnote {
    margin: 12px 0 0;
    color: var(--as-ov-muted);
    font-size: 11.5px;
  }

  // ── Movement + status mix ────────────────────────
  &__split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border: 1px solid var(--as-ov-border);
    border-radius: $radius-sm;
    background: #fff;
    gap: 8px;
  }

  &__movement {
    padding: 18px 20px;
    min-width: 0;
  }

  &__status {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border-left: 1px solid var(--as-ov-border);
    min-width: 0;
  }

  &__legend {
    display: flex;
    flex-shrink: 0;
    gap: 14px;
    align-items: center;
    color: var(--as-ov-muted);
    font-size: 11.5px;

    span {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    i {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
  }

  &__legend-line {
    width: 14px !important;
    height: 2px !important;
    border-radius: 0 !important;
  }

  &__chart {
    margin-top: 14px;
  }

  &__empty-chart {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    align-items: center;
    justify-content: center;
    height: 196px;
    margin-top: 18px;
    border: 1px dashed var(--as-ov-border);
    border-radius: $radius-sm;
    background: var(--as-ov-surface);
  }

  &__empty-title {
    color: var(--as-ov-heading);
    font-size: 13px;
    font-weight: 600;
  }

  &__empty-text {
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__status-body {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
  }

  &__donut {
    position: relative;
    flex-shrink: 0;
    width: 132px;
    height: 132px;
  }

  &__donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  &__donut-value {
    color: var(--as-ov-heading);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__donut-label {
    color: var(--as-ov-muted);
    font-size: 11px;
  }

  &__status-legend {
    flex: 1 1 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;

    a {
      display: flex;
      gap: $spacing-sm;
      align-items: center;
      padding: 4px 6px;
      border-radius: $radius-sm;
      color: var(--as-ov-body);
      font-size: 12px;
      text-decoration: none;

      &:hover,
      &:focus {
        background: var(--as-ov-surface);
        text-decoration: none;
      }
    }

    i {
      display: inline-block;
      flex-shrink: 0;
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
  }

  &__status-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__status-count {
    color: var(--as-ov-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__status-share {
    width: 38px;
    color: var(--as-ov-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  // ── Card columns ─────────────────────────────────
  &__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-md;
    align-items: stretch;

    &--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));

      > * {
        min-width: 0;
      }
    }
  }

  &__stack {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;

    > * {
      flex-grow: 1;
    }
  }

  // ── Action center ────────────────────────────────
  &__all-clear {
    display: flex;
    gap: $spacing-sm;
    align-items: center;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: $radius-sm;
    background: #edfaef;
    color: var(--as-ov-success);
    font-size: 12.5px;
    font-weight: 600;
  }

  &__signals {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      gap: 12px;
      align-items: center;
      margin: 0;
      padding: 9px 0;
      border-top: 1px solid var(--as-ov-grid);

      &.is-empty {
        opacity: 0.6;
      }
    }
  }

  &__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;

    &--danger {
      background: var(--as-ov-danger);
    }

    &--warning {
      background: var(--as-ov-warning);
    }

    &--notice {
      background: var(--as-ov-notice);
    }

    &--info {
      background: var(--as-ov-primary);
    }
  }

  &__signal-body {
    flex: 1;
    min-width: 0;
  }

  &__signal-label {
    display: block;
    color: var(--as-ov-heading);
    font-size: 13px;
    font-weight: 600;
  }

  &__signal-desc {
    display: block;
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__signal-count {
    color: var(--as-ov-heading);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__signal-action {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--as-ov-border);
    border-radius: $radius-sm;
    color: var(--as-ov-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus {
      border-color: var(--as-ov-primary);
      text-decoration: none;
    }

    &.is-disabled {
      border-color: var(--as-ov-grid);
      color: var(--as-ov-muted);
      font-weight: 500;
    }
  }

  // ── Renewal outlook ──────────────────────────────
  &__windows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
  }

  &__window {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--as-ov-grid);
    border-radius: $radius-sm;
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus {
      border-color: var(--as-ov-primary);
      color: inherit;
      text-decoration: none;
    }

    &.is-default {
      border-color: var(--as-ov-primary);
      background: color-mix(
        in srgb,
        var(--wp-admin-theme-color) 6%,
        transparent
      );
    }
  }

  &__window-head {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
    align-items: baseline;
    justify-content: space-between;
    white-space: nowrap;
    color: var(--as-ov-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  &__window-tag {
    color: var(--as-ov-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  &__window-value {
    margin-top: 4px;
    color: var(--as-ov-heading);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__window-sub {
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__meter {
    height: 5px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--as-ov-grid);

    span {
      display: block;
      height: 5px;
      border-radius: 999px;
      background: var(--as-ov-primary);
    }
  }

  // ── Operations strip ─────────────────────────────
  &__ops {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid var(--as-ov-border);
    border-radius: $radius-sm;
    background: #fff;
  }

  &__ops-title {
    flex-shrink: 0;
    color: var(--as-ov-heading);
    font-size: 12px;
    font-weight: 700;
  }

  &__fact {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;

    &--success svg {
      color: var(--as-ov-success);
    }

    &--warning {
      color: var(--as-ov-warning);

      svg {
        color: var(--as-ov-warning);
      }
    }

    &--danger {
      color: var(--as-ov-danger);

      svg {
        color: var(--as-ov-danger);
      }
    }

    &--muted {
      color: var(--as-ov-muted);

      svg {
        color: var(--as-ov-muted);
      }
    }
  }

  &__ops-link {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
  }

  // ── Compact tables ───────────────────────────────
  &__table {
    margin-top: 12px;
  }

  &__tr {
    display: grid;
    grid-template-columns: 1.3fr 1.5fr 0.7fr 0.8fr minmax(72px, 0.8fr);
    gap: $spacing-sm;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--as-ov-grid);
    color: var(--as-ov-body);
    font-size: 12px;
    text-decoration: none;

    &:hover,
    &:focus {
      background: var(--as-ov-surface);
      color: var(--as-ov-body);
      text-decoration: none;
    }

    > span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .is-right {
      text-align: right;
    }

    &.is-head {
      padding: 0 0 6px;
      border-top: 0;
      color: var(--as-ov-muted);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;

      &:hover {
        background: none;
      }
    }
  }

  &__td-strong {
    color: var(--as-ov-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  &__td-muted {
    color: var(--as-ov-muted);
  }

  &__status-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: $radius-xs;
    color: #fff;
    font-size: 11px;
    font-weight: 600;

    &--success {
      background: var(--as-ov-success);
    }

    &--info {
      background: var(--as-ov-primary);
    }

    &--notice {
      background: var(--as-ov-notice);
      color: #1d2327;
    }

    &--accent {
      background: var(--as-ov-accent);
    }

    &--warning {
      background: var(--as-ov-warning);
    }

    &--danger {
      background: var(--as-ov-danger);
    }

    &--muted {
      background: var(--as-ov-muted);
    }
  }

  // ── Upgrade panel ────────────────────────────────
  &__upgrade {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: color-mix(in srgb, var(--as-ov-primary) 3%, white);

    .arraysubs-overview__upgrade-link.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      margin-top: auto;
      padding: 8px 12px;
      font-size: 13px;
      line-height: 1.4;
      white-space: normal;

      svg {
        flex-shrink: 0;
      }
    }
  }

  &__upgrade-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--as-ov-primary);
    font-size: 12px;
    font-weight: 600;
  }

  &__upgrade-copy {
    h3 {
      margin: 8px 0 0;
      color: var(--as-ov-heading);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
    }
  }

  &__upgrade-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0;
    }

    svg {
      flex-shrink: 0;
      margin-top: 1px;
      color: var(--as-ov-primary);
    }

    strong {
      display: block;
      color: var(--as-ov-heading);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
    }

    p {
      margin: 2px 0 0;
      color: var(--as-ov-muted);
      font-size: 12px;
      line-height: 1.5;
    }
  }

  &__meta {
    margin: 0;
    color: #a7aaad;
    font-size: 11px;
    text-align: center;
  }

  // ── Pro widgets ──────────────────────────────────
  &__section-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
  }

  &__section-title {
    color: var(--as-ov-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  &__section-rule {
    flex: 1;
    height: 1px;
    background: var(--as-ov-grid);
  }

  &__section-note {
    color: var(--as-ov-muted);
    font-size: 11.5px;
  }

  &__pro-pill {
    padding: 1px 7px;
    border-radius: 999px;
    background: #fcf9e8;
    color: #8a5700;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  &__card-title &__pro-pill {
    margin-left: 8px;
    vertical-align: middle;
  }

  &__widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-md;
    align-items: stretch;
  }

  &__widget {
    display: flex;
    flex-direction: column;
    min-width: 0;

    &.is-wide {
      grid-column: span 2;
    }

    &.is-compact {
      padding: 8px 18px;

      .arraysubs-overview__widget-headline {
        display: inline-flex;
        margin: 5px 10px 0 0;
      }

      .arraysubs-overview__empty-text {
        display: inline;
        margin: 0;
      }
    }
  }

  &__widget-empty {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 16px;
    border: 1px dashed var(--as-ov-border);
    border-radius: $radius-sm;
    background: var(--as-ov-surface);
    color: var(--as-ov-muted);
    font-size: 12px;
    line-height: 1.6;

    > svg {
      flex-shrink: 0;
      margin-top: 2px;
    }

    p {
      margin: 0;
    }

    p + p {
      margin-top: 8px;
    }
  }

  &__widget-empty-message {
    color: var(--as-ov-heading);
    font-weight: 600;
  }

  &__widget-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    margin: 12px 0 4px;
  }

  &__widget-value {
    color: var(--as-ov-heading);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    &--risk {
      color: var(--as-ov-danger);
    }
  }

  &__widget-unit {
    color: var(--as-ov-muted);
    font-size: 13px;
    font-weight: 600;
  }

  &__widget-note {
    color: var(--as-ov-muted);
    font-size: 12px;
  }

  &__widget-subhead {
    margin: 14px 0 6px;
    color: var(--as-ov-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  // Meter rows — used by revenue at risk, the product leaderboard, churn
  // drivers and cancellation reasons, so they all read as one family.
  &__meters {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      gap: 10px;
      align-items: center;
      margin: 0 0 9px;
      font-size: 12px;
    }

    &--compact li {
      margin-bottom: 6px;
    }
  }

  &__meter-rank {
    flex: 0 0 16px;
    color: var(--as-ov-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__meter-label {
    flex: 0 0 40%;
    overflow: hidden;
    color: var(--as-ov-body);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__meter-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--as-ov-surface);
  }

  &__meter-fill {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--as-ov-primary);

    &--danger {
      background: var(--as-ov-danger);
    }

    &--warning {
      background: var(--as-ov-warning);
    }

    &--notice {
      background: var(--as-ov-notice);
    }

    &--accent {
      background: var(--as-ov-accent);
    }
  }

  &__meter-value {
    flex: 0 0 auto;
    min-width: 56px;
    color: var(--as-ov-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  &__bands {
    display: flex;
    overflow: hidden;
    height: 10px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--as-ov-surface);
  }

  &__band {
    display: block;
    height: 10px;

    &--danger {
      background: var(--as-ov-danger);
    }

    &--warning {
      background: var(--as-ov-warning);
    }

    &--success {
      background: var(--as-ov-success);
    }
  }

  &__band-legend {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    color: var(--as-ov-muted);
    font-size: 11.5px;

    strong {
      margin-right: 4px;
    }
  }

  &__band-count {
    font-variant-numeric: tabular-nums;

    &--danger {
      color: var(--as-ov-danger);
    }

    &--warning {
      color: var(--as-ov-warning);
    }

    &--success {
      color: var(--as-ov-success);
    }
  }

  &__stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  &__stat-value {
    color: var(--as-ov-heading);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  &__stat-label {
    color: var(--as-ov-muted);
    font-size: 11.5px;
  }

  // ── Responsive ───────────────────────────────────
  @media (max-width: 1024px) {
    &__kpis,
    &__skeleton-kpis {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 1200px) {
    &__widgets,
    &__columns--three {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 960px) {
    &__split,
    &__columns,
    &__skeleton-split {
      grid-template-columns: 1fr;
    }

    &__widgets {
      grid-template-columns: 1fr;
    }

    &__widget.is-wide {
      grid-column: span 1;
    }

    &__status {
      border-top: 1px solid var(--as-ov-border);
      border-left: 0;
    }
  }

  @media (max-width: 782px) {
    &__kpis,
    &__skeleton-kpis,
    &__windows {
      grid-template-columns: 1fr;
    }

    &__hero {
      padding: 20px;
    }

    &__hero-value {
      font-size: 30px;
    }

    &__tr {
      grid-template-columns: 1.2fr 1fr 0.8fr;

      > span:nth-child(3),
      > span:nth-child(4) {
        display: none;
      }
    }
  }
}

@keyframes arraysubs-overview-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes arraysubs-overview-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}