/* ==========================================================================
   nx-dashboard-v2.css — user dashboard (X51). Additive; load after nx-system.
   All widths are pre-set classes (dv2-w0 … dv2-w100) rather than inline
   style attributes, so the strict CSP (script-src 'self') and any
   style-src policy are satisfied without exceptions.
   ========================================================================== */

.dv2{display:grid;gap:var(--space-4,16px);max-width:900px;margin:0 auto;width:100%}

/* Layout independence. dashboard.php nests several grids — .dash-brief-grid is
   230px + 1fr — and a block dropped inside one becomes a grid ITEM, inheriting
   a 230px track. These two lines make the panel span its parent whatever it
   lands in, so placement cannot silently squeeze it into a sidebar. */
.dv2{grid-column:1/-1}
.dash-brief-grid > .dv2,
.dash-plan > .dv2,
.dash-metrics > .dv2{grid-column:1/-1;max-width:none}

.dv2-card{background:var(--panel,#0a1928);border:1px solid var(--line,rgba(150,210,245,.18));
  border-radius:var(--radius-md,12px);padding:var(--space-4,18px)}

.dv2-eyebrow{margin:0 0 10px;font:600 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#16D9FF)}
.dv2-eyebrow-sub{margin-top:20px}

/* --- access --- */
.dv2-plan-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dv2-plan{font-size:2rem;font-weight:800;line-height:1.1;color:var(--accent-3,#39FFD0)}
.dv2-badge{font:600 .78rem/1 ui-monospace,monospace;padding:7px 13px;border-radius:999px;
  border:1px solid currentColor}
.dv2-ok{color:var(--ok,#53F28D)} .dv2-warn{color:var(--warn,#FFBD4A)}
.dv2-crit{color:var(--crit,#FF657A)} .dv2-muted{color:var(--muted,#B6C4D3)}

.dv2-note{margin:10px 0 0;color:var(--muted,#B6C4D3);font-size:.9rem;line-height:1.5}
.dv2-small{font-size:.82rem}
.dv2-note a{color:var(--accent,#16D9FF)}

.dv2-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.dv2-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:11px 20px;border-radius:10px;font-weight:700;text-decoration:none;
  background:var(--grad-primary,linear-gradient(135deg,#22E0FF,#278CFF));color:#04141b}
.dv2-btn-ghost{background:none;border:1px solid var(--line,rgba(150,210,245,.4));
  color:var(--ink,#F3F8FC)}

/* --- meters --- */
.dv2-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dv2-big{font-size:2.1rem;font-weight:800;color:var(--ink,#F3F8FC)}
.dv2-of{font-size:1.1rem;font-weight:600;color:var(--muted,#B6C4D3)}
.dv2-remain{color:var(--muted,#B6C4D3);font-size:.9rem}

.dv2-bar{height:10px;border-radius:6px;background:rgba(150,210,245,.12);overflow:hidden;margin-top:10px}
.dv2-bar-thin{height:6px}
.dv2-bar-fill{display:block;height:100%;border-radius:6px;background:var(--ok,#53F28D)}
.dv2-bar-fill.dv2-warn{background:var(--warn,#FFBD4A)}
.dv2-bar-fill.dv2-crit{background:var(--crit,#FF657A)}
.dv2-bar-fill.dv2-cap{background:var(--accent-2,#9D74FF)}

.dv2-sub{margin:16px 0 0;font-size:.86rem;color:var(--muted,#B6C4D3)}
.dv2-help{display:block;font-size:.78rem;color:var(--faint,#7F93A8);margin-top:3px}

.dv2-alert{margin:14px 0 0;padding:11px 13px;border-radius:8px;font-size:.88rem;
  background:rgba(150,210,245,.07);border-left:3px solid var(--accent,#16D9FF)}
.dv2-alert.dv2-warn{border-left-color:var(--warn,#FFBD4A)}
.dv2-alert.dv2-crit{border-left-color:var(--crit,#FF657A)}

/* --- stats --- */
.dv2-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
@media(min-width:560px){.dv2-stats{grid-template-columns:repeat(4,1fr)}}
.dv2-stat{display:block;font-size:1.5rem;font-weight:800;color:var(--ink,#F3F8FC)}
.dv2-stat-l{display:block;font-size:.76rem;color:var(--muted,#B6C4D3);margin-top:2px}

/* --- sparkline --- */
.dv2-spark{width:100%;height:72px;display:block}
.dv2-sp-on{fill:var(--accent,#16D9FF)}
.dv2-sp-off{fill:rgba(150,210,245,.16)}
.dv2-axis{display:flex;justify-content:space-between;margin:6px 0 0;
  font-size:.72rem;color:var(--faint,#7F93A8)}

/* --- tool breakdown --- */
.dv2-tools{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.dv2-tools li{display:grid;grid-template-columns:1fr 90px 44px;align-items:center;gap:11px;font-size:.86rem}
.dv2-tool-n{color:var(--ink,#F3F8FC);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv2-tool-bar{height:6px;border-radius:4px;background:rgba(150,210,245,.12);overflow:hidden}
.dv2-tool-fill{display:block;height:100%;border-radius:4px;background:var(--accent,#16D9FF)}
.dv2-tool-c{text-align:right;color:var(--muted,#B6C4D3);font-variant-numeric:tabular-nums}

/* --- credits --- */
.dv2-credits{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
.dv2-cred-n{font-size:1.7rem;font-weight:800;color:var(--accent-3,#39FFD0)}
.dv2-cred-l{display:block;font-size:.78rem;color:var(--muted,#B6C4D3)}

/* --- team --- */
.dv2-members{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.dv2-members li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 13px;border-radius:8px;background:rgba(150,210,245,.05);font-size:.87rem}
.dv2-mem-e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv2-mem-c{color:var(--ink,#F3F8FC);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.dv2-mem-u{font-weight:400;color:var(--muted,#B6C4D3);font-size:.76rem}
.dv2-tag{font:600 .66rem/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent,#16D9FF);padding:2px 7px;border:1px solid currentColor;border-radius:4px}

/* --- width utilities: avoids inline style attributes entirely --- */
.dv2-w0{width:0}.dv2-w5{width:5%}.dv2-w10{width:10%}.dv2-w15{width:15%}
.dv2-w20{width:20%}.dv2-w25{width:25%}.dv2-w30{width:30%}.dv2-w35{width:35%}
.dv2-w40{width:40%}.dv2-w45{width:45%}.dv2-w50{width:50%}.dv2-w55{width:55%}
.dv2-w60{width:60%}.dv2-w65{width:65%}.dv2-w70{width:70%}.dv2-w75{width:75%}
.dv2-w80{width:80%}.dv2-w85{width:85%}.dv2-w90{width:90%}.dv2-w95{width:95%}
.dv2-w100{width:100%}

@media(max-width:520px){
  .dv2-plan{font-size:1.6rem}
  .dv2-big{font-size:1.7rem}
  .dv2-tools li{grid-template-columns:1fr 56px 38px}
  .dv2-actions .dv2-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.dv2-bar-fill{transition:none}}

/* Unknown-plan state. Deliberately NOT styled like an entitlement tier — it
   must not be mistakable for "Free" at a glance. */
.dv2-plan-unknown{color:var(--faint,#7F93A8);font-size:1.35rem;font-weight:700}

/* ==========================================================================
   Overlap hardening (X51.1)
   --------------------------------------------------------------------------
   Reported: the "Manage plan" button rendering ON TOP of the entitlement text.

   Two causes, both addressed here rather than worked around:

   1. The card had no note in the `lifetime` state — a heading and a button with
      nothing between them. Fixed in the partial; every state now renders a note.

   2. dashboard.php nests several grids (.dash-brief-grid is 230px + 1fr,
      .dash-plan is 1.3fr + 1fr) and the old dashboard renders below during the
      side-by-side rollout. A card dropped into one becomes a grid ITEM and can
      be sized by a track it knows nothing about, which is how the button ended
      up over the text.

   The rules below make the card own its own vertical flow, so nothing beneath
   or around it can be overlapped regardless of where it is placed.
   ========================================================================== */

.dv2,
.dv2-card{
  position:relative;      /* establishes a containing block; nothing escapes it */
  z-index:0;              /* card contents cannot paint over neighbouring cards */
  min-width:0;            /* a grid item defaults to min-content and can overflow */
}

/* The card is a column. A button can never sit beside or over the text above it. */
.dv2-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  overflow:visible;
}

/* Every direct child claims its own row and cannot be collapsed by a parent
   with a fixed track height. */
.dv2-card > *{
  flex:0 0 auto;
  min-width:0;
}

/* The action row is the element that was overlapping. Pin it to the end of the
   flow with a real gap, and stop it being pulled up by a negative margin from
   an inherited .btn rule. */
.dv2-actions{
  margin-top:auto;
  padding-top:var(--space-3,14px);
  position:static;
  clear:both;
  flex-wrap:wrap;
}
.dv2-actions > .dv2-btn{
  position:static;
  float:none;
  margin:0;
}

/* Long domains and emails must wrap rather than push the button out of the card. */
.dv2-note,
.dv2-plan-row,
.dv2-mem-e{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* The plan name and badge share a row and wrap together on narrow screens. */
.dv2-plan-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
}

/* Guard against an inherited absolute-positioning rule from another stylesheet
   reaching a button inside this card. */
.dv2 a.dv2-btn,
.dv2 .dv2-btn{
  position:static !important;
  inset:auto !important;
}