/* ==========================================================
   Dashboard  (/dash/)
   Uses theme tokens from style.css — works in both light & redpill.
   ========================================================== */

/* ---- Layout ---- */
.dash-wrap {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.dash-header {
  margin-bottom: 2rem;
}

.dash-title {
  font-size: 1.75rem;
  margin: 0 0 0.25rem;
}

.dash-greeting {
  margin: 0;
  opacity: 0.7;
  font-size: 0.95rem;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 680px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Card ---- */
.dash-card {
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, rgba(0,0,0,.12));
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dash-card__title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0;
}

.dash-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ---- Plan row ---- */
.dash-plan-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dash-plan-name {
  font-size: 1.5rem;
  font-weight: 700;
}

/* ---- Badges ---- */
.dash-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
}

.dash-badge--active  { background: #16a34a22; color: #16a34a; }
.dash-badge--trial   { background: #2563eb22; color: #2563eb; }
.dash-badge--expired,
.dash-badge--none    { background: #71717a22; color: #71717a; }
.dash-badge--past-due{ background: #dc262622; color: #dc2626; }
.dash-badge--warn    { background: #f59e0b22; color: #b45309; }

/* Redpill overrides */
body.redpill .dash-badge--active   { background: #00ffcc22; color: #00ffcc; }
body.redpill .dash-badge--trial    { background: #60a5fa22; color: #60a5fa; }
body.redpill .dash-badge--expired,
body.redpill .dash-badge--none     { background: #a1a1aa22; color: #a1a1aa; }
body.redpill .dash-badge--past-due { background: #f8717122; color: #f87171; }
body.redpill .dash-badge--warn     { background: #fbbf2422; color: #fbbf24; }

/* ---- Meta (definition list pairs) ---- */
.dash-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}

.dash-meta dt {
  font-weight: 600;
  opacity: 0.7;
}

.dash-meta dd {
  margin: 0;
}

/* ---- Buttons ---- */
.dash-btn {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.dash-btn--primary {
  background: var(--accent-color);
  color: var(--bg-color);
}
.dash-btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.dash-btn--secondary {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--border-color);
}
.dash-btn--secondary:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* ---- Usage meter bar ---- */
.dash-meter__bar {
  width: 100%;
  height: 10px;
  background: var(--border-color, #e4e4e7);
  border-radius: 999px;
  overflow: hidden;
}

.dash-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-color);
  transition: width 0.4s ease;
}

.dash-meter--warn .dash-meter__fill  { background: #f59e0b; }
.dash-meter--danger .dash-meter__fill { background: #dc2626; }

.dash-meter__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: 0.35rem;
}

/* ---- Unlimited usage ---- */
.dash-usage-unlimited {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-usage-big {
  font-size: 1.6rem;
  font-weight: 700;
}

.dash-usage-label {
  opacity: 0.6;
  font-size: 0.9rem;
}

/* ---- Warnings ---- */
.dash-warning {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5em 0.75em;
  border-radius: 8px;
  margin: 0;
}

.dash-warning--yellow {
  background: #fef3c722;
  color: #b45309;
}
.dash-warning--red {
  background: #fee2e222;
  color: #dc2626;
}

body.redpill .dash-warning--yellow { background: #fbbf2418; color: #fbbf24; }
body.redpill .dash-warning--red    { background: #f8717118; color: #f87171; }

/* ---- Muted paragraph ---- */
.dash-muted {
  opacity: 0.55;
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Preferences form ---- */
.dash-prefs-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dash-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dash-field label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.7;
}

.dash-field select,
.dash-field input[type="text"] {
  padding: 0.45em 0.6em;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  font-size: 0.9rem;
}

.dash-field--toggle {
  flex-direction: row;
  align-items: center;
}

.dash-field--toggle label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  font-weight: 500;
  cursor: pointer;
}

.dash-prefs-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.dash-prefs-status {
  font-size: 0.85rem;
  font-weight: 600;
}

.dash-prefs-status--ok   { color: #16a34a; }
.dash-prefs-status--err  { color: #dc2626; }

body.redpill .dash-prefs-status--ok  { color: #00ffcc; }
body.redpill .dash-prefs-status--err { color: #f87171; }

/* -------------------------------------------------------
 *  Atomic pref shortcodes (.dash-pref-field)
 *  Inherit font-size from parent so Gutenberg Typography
 *  controls on the wrapping Group/Paragraph block work.
 * -------------------------------------------------------*/
.dash-pref-field {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: inherit;       /* key: inherits from Gutenberg block */
}

.dash-pref-field label {
  font-size: inherit;
  font-weight: 600;
  opacity: 0.75;
}

.dash-pref-field select,
.dash-pref-field input[type="text"] {
  font-size: inherit;       /* matches whatever the parent sets */
  padding: 0.5em 0.75em;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  max-width: 100%;
  width: 100%;
}

.dash-pref-field--toggle {
  flex-direction: row;
  align-items: center;
}

.dash-pref-field--toggle label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  opacity: 1;
  font-weight: 500;
  cursor: pointer;
}

.dash-pref-field--toggle input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
}

/* Usage warning inline spans */
.dash-usage-warn {
  font-weight: 600;
  font-size: inherit;
}
.dash-usage-warn--danger  { color: #dc2626; }
.dash-usage-warn--caution { color: #f59e0b; }
body.redpill .dash-usage-warn--danger  { color: #f87171; }
body.redpill .dash-usage-warn--caution { color: #fbbf24; }