/* ===========================================================================
   dashboard-premium.css — premium enhancement layer for the deny.sh dashboard
   (the logged-in app surfaces that use the dash-app shell + hub cards).

   Mirrors the marketing premium layer (css/premium.css) in spirit: depth,
   soft layered shadows, committed periwinkle accent, gradient headline,
   hover-lift cards, status-dot pills. Light theme to match the marketing site.

   STRICTLY ADDITIVE + OPT-IN: every rule is scoped under body.dash-premium,
   so a dashboard page without the class is byte-for-byte unchanged even if it
   links this file. Reuses the existing v2 tokens (--accent, --surface, etc.).
   =========================================================================== */

body.dash-premium {
  --dp-sh-1: 0 1px 2px rgba(20,30,60,.04), 0 2px 6px rgba(20,30,60,.05);
  --dp-sh-2: 0 2px 4px rgba(20,30,60,.04), 0 8px 20px rgba(20,30,60,.07);
  --dp-sh-3: 0 8px 24px rgba(30,50,90,.10), 0 24px 60px rgba(30,50,90,.12);
  --dp-accent-deep: #2c4f86;
  --dp-bg-soft: #f7f9fc;
  --dp-border-2: #d3dcec;
  --dp-surface-2: #fafbfe;
}

/* ===== ambient atmosphere (faint, light) ===== */
body.dash-premium .dash-app { position: relative; }
body.dash-premium .dash-app::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(820px 380px at 80% -10%, rgba(94,140,206,.10), transparent 60%),
    radial-gradient(640px 320px at -2% 6%, rgba(94,140,206,.06), transparent 55%);
}
body.dash-premium .dash-appbar,
body.dash-premium .dash-main { position: relative; z-index: 1; }
/* Sidebar keeps its base position:sticky (a positioned value, so z-index still
   applies). Forcing position:relative here re-applied the sticky top:56px as a
   static offset and pushed the rail 56px below the appbar, leaving a dead gap
   above the nav. Just raise its stacking level above the ambient ::before glow. */
body.dash-premium .dash-sidebar { z-index: 1; }

/* ===== glassy appbar ===== */
body.dash-premium .dash-appbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
body.dash-premium .dash-appbar .acct-dd-toggle { box-shadow: var(--dp-sh-1); }
body.dash-premium .dash-appbar .acct-dd-toggle .ad-tier {
  background: var(--accent-soft, #eaf0fa); color: var(--accent-text, #3b67a5);
}

/* ===== sidebar polish ===== */
body.dash-premium .dash-sidebar { background: var(--dp-bg-soft); }
body.dash-premium .dash-side-link { transition: background .15s, color .15s, border-color .15s, box-shadow .15s; gap: .6rem; }
body.dash-premium .dash-side-link:hover { background: #fff; box-shadow: var(--dp-sh-1); }
body.dash-premium .dash-side-link.is-active { color: var(--dp-accent-deep); }
/* line-icons next to each nav label (proto parity) */
body.dash-premium .dash-side-link > svg {
  width: 17px; height: 17px; flex-shrink: 0; opacity: .8;
  align-self: flex-start; margin-top: 1px;
}
body.dash-premium .dash-side-link.is-active > svg { opacity: 1; color: var(--accent-text); }
body.dash-premium .dash-side-link > span { min-width: 0; }
body.dash-premium .dash-side-docs { box-shadow: var(--dp-sh-1); }

/* ===== gradient headline (matches marketing hero) ===== */
body.dash-premium .hub-header h1,
body.dash-premium .keys-header h1,
body.dash-premium .usage-header h1,
body.dash-premium .vault-header h1,
body.dash-premium .dc-header h1,
body.dash-premium .inh-header h1,
body.dash-premium .byok-header h1,
body.dash-premium .sm-header h1,
body.dash-premium .saml-header h1,
body.dash-premium .wh-header h1,
body.dash-premium .audit-header h1 {
  background: linear-gradient(110deg, var(--accent, #5e8cce) 8%, var(--dp-accent-deep) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--dp-accent-deep);
}

/* ===== health badge (optional markup on hub-header) ===== */
body.dash-premium .dp-health {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-size: .82rem; color: var(--text-secondary);
  white-space: nowrap; box-shadow: var(--dp-sh-1);
}
body.dash-premium .dp-health .dp-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.16);
}

/* ===== header aside: health badge + freshness/refresh control ===== */
body.dash-premium .hub-header-aside {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
body.dash-premium .hub-refresh {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-size: .82rem; color: var(--text-secondary);
  font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: var(--dp-sh-1); transition: border-color .16s, color .16s, transform .16s;
}
body.dash-premium .hub-refresh:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
body.dash-premium .hub-refresh:disabled { opacity: .65; cursor: default; }
body.dash-premium .hub-refresh svg { width: 14px; height: 14px; flex-shrink: 0; }
body.dash-premium .hub-refresh.is-syncing svg { animation: hub-spin .8s linear infinite; }
body.dash-premium .hub-refresh .hub-sync { font-variant-numeric: tabular-nums; }
@keyframes hub-spin { to { transform: rotate(360deg); } }

/* ===== metrics strip (optional markup; index uses it) ===== */
body.dash-premium .dp-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0 0 1.6rem;
}
body.dash-premium .dp-metric {
  padding: 1.05rem 1.2rem; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, var(--dp-surface-2), var(--surface, #fff));
  box-shadow: var(--dp-sh-2); position: relative; overflow: hidden;
}
body.dash-premium .dp-metric::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94,140,206,.28), transparent);
}
body.dash-premium .dp-metric .dp-k {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-secondary); font-weight: 600;
}
body.dash-premium .dp-metric .dp-v {
  font-size: 1.7rem; font-weight: 700; margin: .4rem 0 0; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
body.dash-premium .dp-metric .dp-d {
  font-size: .79rem; color: var(--text-secondary); margin-top: .25rem;
}
@media (max-width: 1100px) { body.dash-premium .dp-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.dash-premium .dp-metrics { grid-template-columns: 1fr; } }

/* ===== hub cards: real elevation + hover-lift + accent reveal ===== */
body.dash-premium .hub-card {
  background: linear-gradient(180deg, var(--dp-surface-2), var(--surface, #fff));
  box-shadow: var(--dp-sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}
body.dash-premium .hub-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, #5e8cce);
  opacity: 0; transform: scaleY(.4); transform-origin: center;
  transition: opacity .18s, transform .18s;
}
body.dash-premium .hub-card:hover {
  transform: translateY(-3px); box-shadow: var(--dp-sh-3); border-color: var(--dp-border-2);
}
body.dash-premium .hub-card:hover::after { opacity: 1; transform: scaleY(1); }
/* locked cards keep the lift + accent reveal now (premium gated state, not a
   dimmed upsell) — the gate is carried by the pill, not by killing the card. */

/* icon chip a touch stronger */
body.dash-premium .hub-card .hc-icon {
  border: 1px solid rgba(94,140,206,.28); width: 32px; height: 32px;
}
/* SVG feature icons inside the chip (replaces the old mono letter avatars) */
body.dash-premium .hub-card .hc-icon svg {
  width: 17px; height: 17px; display: block;
}
/* the lock glyph on locked/preview cards is a text char, not an svg */
body.dash-premium .hub-card.preview .hc-icon,
body.dash-premium .hub-card.locked .hc-icon {
  border-color: var(--border);
}

/* ===== body numerals tabular ===== */
body.dash-premium .hc-body, body.dash-premium .hc-meta { font-variant-numeric: tabular-nums; }

/* ===== status pills get a leading dot (CSS-only; no JS markup change) ===== */
body.dash-premium .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
body.dash-premium .pill {
  border: 1px solid transparent; gap: .35rem;
}
body.dash-premium .pill-ok   { border-color: rgba(16,185,129,.22); }
body.dash-premium .pill-info { border-color: rgba(94,140,206,.28); }
body.dash-premium .pill-warn { border-color: rgba(245,158,11,.22); }
body.dash-premium .pill-fail { border-color: rgba(239,68,68,.22); }
body.dash-premium .pill-muted{ border-color: var(--border); }
body.dash-premium .pill-lock { border-color: rgba(94,140,206,.28); }

/* ===== progress bars: gradient fill ===== */
body.dash-premium .hc-bar > span {
  background: linear-gradient(90deg, var(--accent, #5e8cce), var(--dp-accent-deep));
}

/* ===== login card: lift it off the page =====
   Sub-pages render per-page login classes (vault-login, keys-login, dc-login,
   byok-login, sm-login, saml-login, wh-login, audit-login, ...) via dash-auth.js,
   plus the index hub-login. They all share the same 420px centered card shape,
   so target every "*-login" card generically. */
body.dash-premium .hub-login,
body.dash-premium [class$="-login"] {
  box-shadow: var(--dp-sh-2);
  background: linear-gradient(180deg, var(--dp-surface-2), var(--surface, #fff));
}
body.dash-premium .hub-login button,
body.dash-premium [class$="-login"] > form button[type="submit"] {
  box-shadow: var(--dp-sh-1); transition: transform .16s, box-shadow .16s;
}
body.dash-premium .hub-login button:hover,
body.dash-premium [class$="-login"] > form button[type="submit"]:hover {
  transform: translateY(-1px); box-shadow: var(--dp-sh-2);
}

/* ===== onboarding card elevation ===== */
body.dash-premium .onboard-card { box-shadow: var(--dp-sh-1); }