/* Sidebar plan card - rendered by web/user/sidebar_usage.jinja2 into the
   framework sidebar footer slot on EVERY panel page, so this must load on every
   panel page (registry trigger: base-sidebar), not just the captcha pages.
   None of these selectors are page-scoped, so the block is a straight move out
   of dashboard_sites.css. */

.pcd-plan-card {
  display: block;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(127, 127, 127, 0.22);
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.07);
}

.pcd-plan-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.pcd-plan-card__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--base-sidebar-text-muted, #8b8494);
}

.pcd-plan-card__badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--base-sidebar-accent, #7c3aed);
  border: 1px solid
    color-mix(in srgb, var(--base-sidebar-accent, #7c3aed) 35%, transparent);
  background: color-mix(
    in srgb,
    var(--base-sidebar-accent, #7c3aed) 10%,
    transparent
  );
}

.pcd-plan-card__meter {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.18);
  overflow: hidden;
  margin-bottom: 8px;
}

.pcd-plan-card__meter .pcd-quota-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--base-sidebar-accent, #7c3aed);
  transition: width 0.4s ease;
}

.pcd-plan-card__meter.pcd-quota-bar--warn .pcd-quota-bar__fill {
  background: #f59e0b;
}

.pcd-plan-card__meter.pcd-quota-bar--over .pcd-quota-bar__fill {
  background: #ef4444;
}

.pcd-plan-card__desc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--base-sidebar-text-muted, #8b8494);
  margin-bottom: 12px;
}

/* Purchased top-up credits, spent after the monthly quota runs out. Gold to
   read as a separate, bankable balance (distinct from the resetting meter). */
.pcd-plan-card__credits {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #d9a441;
  margin-bottom: 12px;
}

.pcd-plan-card__credits i {
  font-size: 12px;
}

.pcd-plan-card__credits strong {
  font-variant-numeric: tabular-nums;
}

/* Dim the tooltip "?" so it reads as a hint, not part of the credit count. */
.pcd-plan-card__credits .tooltip-wrapper {
  color: var(--base-sidebar-text-muted, #8b8494);
  opacity: 0.8;
}

/* base_elements.css styles ALL <button> with !important - neutralize it. The
   selector covers both the <a> (Upgrade plan link) and any <button> variant. */
.pcd-plan-card__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--base-sidebar-accent, #7c3aed) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

.pcd-plan-card__btn:hover {
  background: color-mix(
    in srgb,
    var(--base-sidebar-accent, #7c3aed) 85%,
    #000
  ) !important;
  color: #fff !important;
}