/* Firestore usage — js/quota.js
   The Spark free tier's daily ceiling (50k reads / 20k writes / 20k deletes,
   per project) made visible before it is hit: three meters, where the traffic
   came from, and a week of history.

   One custom property, --qlv, carries the pressure colour. Set it once on a
   .quota-lv-* element and every bar, dot and number inside inherits it — which
   is what keeps the ok/warn/critical states honest across light and dark. */

.quota-lv-ok       { --qlv: #2f7150; --qlv-soft: rgba(68, 131, 97, 0.14); }
.quota-lv-warn     { --qlv: #b45f06; --qlv-soft: rgba(217, 115, 13, 0.15); }
.quota-lv-critical { --qlv: #c0342f; --qlv-soft: rgba(212, 76, 71, 0.14); }

/* Dark mode needs the same hues lifted off the background to stay readable. */
[data-theme="dark"] .quota-lv-ok       { --qlv: #7fc9a2; --qlv-soft: rgba(68, 131, 97, 0.22); }
[data-theme="dark"] .quota-lv-warn     { --qlv: #eda75c; --qlv-soft: rgba(217, 115, 13, 0.22); }
[data-theme="dark"] .quota-lv-critical { --qlv: #f08b86; --qlv-soft: rgba(212, 76, 71, 0.22); }

.quota-modal { width: min(660px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.quota-body { padding: 4px 22px 20px; overflow: auto; }

/* ------------------------------------------------------------ status line */
.quota-status {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin: 10px 0 16px;
  border-radius: 10px; background: var(--qlv-soft);
  font-size: 12.5px; line-height: 1.55; color: var(--text-light);
}
.quota-status strong { color: var(--qlv); font-weight: 650; }
.quota-status-dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--qlv);
  flex: none; margin-top: 5px;
}
.quota-status-text { min-width: 0; }

/* ---------------------------------------------------------------- meters */
.quota-meters { display: flex; flex-direction: column; gap: 12px; }
.quota-meter {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-hover);
}
.quota-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quota-meter-name { font-size: 13px; font-weight: 600; color: var(--text); }
.quota-meter-num {
  font-size: 13px; font-weight: 650; color: var(--qlv);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quota-meter-of { color: var(--text-faint); font-weight: 400; }

.quota-bar {
  height: 7px; margin: 9px 0 7px; border-radius: 999px;
  background: var(--bg-input); overflow: hidden;
}
.quota-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--qlv); min-width: 2px;
  transition: width 0.25s ease;
}

.quota-meter-foot { display: flex; align-items: baseline; gap: 8px; }
.quota-meter-pct {
  font-size: 12px; font-weight: 600; color: var(--qlv);
  font-variant-numeric: tabular-nums; flex: none;
}
.quota-meter-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }

/* --------------------------------------------------------------- sections */
.quota-sec-title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text); margin: 20px 0 8px;
}
.quota-sec-note { font-size: 11px; font-weight: 400; color: var(--text-faint); }

.quota-advice { margin: 0; padding: 0 0 0 18px; }
.quota-advice li {
  font-size: 12.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 6px;
}

/* ------------------------------------------------------- label breakdown */
.quota-list { display: flex; flex-direction: column; gap: 2px; }
.quota-row {
  display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px;
}
.quota-row:hover { background: var(--bg-hover); }
.quota-row-label {
  font-size: 12.5px; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quota-row-bar { height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.quota-row-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.quota-row-n {
  font-size: 11.5px; color: var(--text-light); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quota-row-sep { color: var(--text-faint); padding: 0 4px; }

.quota-empty { font-size: 13px; color: var(--text-faint); padding: 10px 4px; }

/* ------------------------------------------------------------- sparkline */
.quota-spark {
  display: flex; align-items: flex-end; gap: 6px;
  height: 92px; padding: 8px 10px 0;
  border: 1px solid var(--border); border-radius: 10px;
}
.quota-spark-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
}
.quota-spark-bar {
  display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 2px 2px;
  background: var(--qlv); opacity: 0.85;
}
.quota-spark-col:hover .quota-spark-bar { opacity: 1; }
.quota-spark-day {
  font-size: 10.5px; color: var(--text-faint); line-height: 1;
  padding-bottom: 6px; white-space: nowrap;
}

/* ------------------------------------------------------------ honesty note */
.quota-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 18px; padding: 11px 13px; border-radius: 10px;
  background: var(--bg-input); color: var(--text-light);
  font-size: 12px; line-height: 1.6;
}
.quota-note strong { color: var(--text); }
.quota-note em { font-style: italic; }
.quota-note .ic { flex: none; margin-top: 2px; color: var(--text-faint); }

/* ---------------------------------------------------------------- actions */
.quota-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.quota-btn {
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px; padding: 7px 13px;
  border-radius: var(--radius-ctl, 7px); cursor: pointer; white-space: nowrap;
}
.quota-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.quota-actions-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; flex: 1; min-width: 190px; }

@media (max-width: 620px) {
  .quota-row { grid-template-columns: 1fr auto; }
  .quota-row-bar { display: none; }
  .quota-meter-hint { display: none; }
  .quota-spark { height: 78px; }
}