/* ========================================
   BANDWIDTH QUOTA PANEL
   Four-stat summary panel with SVG ring
   ======================================== */

/* ─── Panel container ─── */

.bw-quota-panel {
  padding: var(--arp-space-4) var(--arp-space-6);
}

/* ─── Four-stat grid ─── */

.bw-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  align-items: center;
  gap: var(--arp-space-4);
}

/* ─── Individual stat cell ─── */

.bw-quota-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--arp-space-1);
}

.bw-quota-stat-label {
  font-size: var(--bulma-size-7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--arp-text-muted);
}

.bw-quota-stat-value {
  font-size: var(--bulma-size-4);
  font-weight: 700;
  color: var(--arp-text-primary);
  line-height: 1.1;
}

/* ─── TOTAL / QUOTA stat (center column with ring) ─── */

.bw-quota-stat-ring {
  flex-direction: row;
  justify-content: center;
  border-left: 1px solid var(--arp-border);
  border-right: 1px solid var(--arp-border);
  padding: var(--arp-space-2) var(--arp-space-6);
  gap: var(--arp-space-3);
}

.bw-quota-stat-ring-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--arp-space-1);
  text-align: center;
}

.bw-quota-stat-fraction {
  display: flex;
  align-items: baseline;
  gap: var(--arp-space-1-5);
  font-size: var(--bulma-size-5);
  font-weight: 700;
}

.bw-quota-sep {
  color: var(--arp-text-muted);
  font-weight: 400;
}

/* ─── SVG ring ─── */

.bw-ring-svg {
  width: 60px;
  height: 60px;
  display: block;
  flex-shrink: 0;
}

.bw-ring-track {
  stroke: var(--arp-border);
}

.bw-ring-progress {
  stroke: transparent;
}

.bw-ring-progress.is-success {
  stroke: var(--arp-status-success-fg);
}

.bw-ring-progress.is-warning {
  stroke: var(--arp-status-warning-fg);
}

.bw-ring-progress.is-danger {
  stroke: var(--arp-status-danger-fg);
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
  .bw-quota-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--arp-space-4);
  }

  .bw-quota-stat-ring {
    grid-column: 1 / -1;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--arp-border);
    border-bottom: 1px solid var(--arp-border);
    padding: var(--arp-space-4) var(--arp-space-4);
  }

  .bw-quota-stat:last-child {
    grid-column: 1 / -1;
  }
}