/*
 * Expiraa Portal – Scoped Styles
 *
 * Strategy:
 *  • Tailwind utility classes applied in PHP templates (via CDN script in enqueue_assets).
 *  • WordPress standard classes (wp-block-button, button, etc.) used where appropriate.
 *  • This file only contains:
 *    1. CSS custom properties that bridge WordPress theme colours → Tailwind-compatible vars.
 *    2. A tiny number of overrides that Tailwind cannot handle (dark-mode surface flips,
 *       portal nav active state, expiry badge colours, spinner animation).
 *  • Typography: inherited entirely from the active theme — no font-family set here.
 *  • Layout width: inherited from the theme's content column.
 */

/* ── Theme-aware colour bridge ────────────────────────────────────────────────
   WordPress 6.x exposes block-editor palette vars. We map them into Expiraa's
   own --ep-* namespace so Tailwind arbitrary-value utilities (e.g. bg-[--ep-accent])
   can reference them.  Themes that don't set --wp--preset--color--* will fall
   back to sensible defaults.                                                 */
:root {
  --ep-accent:       var(--wp--preset--color--primary,       #f0b429);
  --ep-accent-fg:    var(--wp--preset--color--primary-text,  #0d0f14);
  --ep-accent-dim:   color-mix(in srgb, var(--ep-accent) 15%, transparent);
  --ep-accent-ring:  color-mix(in srgb, var(--ep-accent) 35%, transparent);

  --ep-ok:           #22c55e;
  --ep-ok-dim:       rgba(34,197,94,.12);
  --ep-warn:         #f59e0b;
  --ep-warn-dim:     rgba(245,158,11,.12);
  --ep-danger:       #ef4444;
  --ep-danger-dim:   rgba(239,68,68,.12);
  --ep-info:         #60a5fa;
  --ep-info-dim:     rgba(96,165,250,.12);

  /* Neutral surfaces — semi-transparent overlays so they adapt to any theme BG */
  --ep-surface:      rgba(0,0,0,.04);
  --ep-surface-2:    rgba(0,0,0,.07);
  --ep-surface-3:    rgba(0,0,0,.11);
  --ep-border:       rgba(0,0,0,.1);
  --ep-border-2:     rgba(0,0,0,.18);
  --ep-muted:        rgba(0,0,0,.45);
  --ep-subtle:       rgba(0,0,0,.28);
}

/* Dark-mode: flip transparent overlay direction */
@media (prefers-color-scheme: dark) {
  :root {
    --ep-surface:    rgba(255,255,255,.05);
    --ep-surface-2:  rgba(255,255,255,.09);
    --ep-surface-3:  rgba(255,255,255,.14);
    --ep-border:     rgba(255,255,255,.12);
    --ep-border-2:   rgba(255,255,255,.2);
    --ep-muted:      rgba(255,255,255,.5);
    --ep-subtle:     rgba(255,255,255,.32);
  }
}

/* ── Tailwind config: define colours as arbitrary-value refs ─────────────────
   (We don't compile Tailwind — we rely on the CDN play build which supports
   all utilities dynamically. The CSS vars are used in template class strings
   like `bg-[var(--ep-accent)]`.)                                              */

/* ── Spinner (Tailwind doesn't ship a spinner utility) ───────────────────── */
@keyframes ep-spin { to { transform: rotate(360deg); } }
.ep-spin { animation: ep-spin .55s linear infinite; }

/* ── Fade-in (staggered entrance) ────────────────────────────────────────── */
@keyframes ep-fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ep-fade { animation: ep-fade-up .35s cubic-bezier(.4,0,.2,1) both; }
.ep-fade-d1 { animation-delay: .05s; }
.ep-fade-d2 { animation-delay: .10s; }
.ep-fade-d3 { animation-delay: .15s; }
.ep-fade-d4 { animation-delay: .20s; }

/* ── Active nav link ─────────────────────────────────────────────────────── */
.ep-nav-link-active {
  background: var(--ep-accent-dim) !important;
  color: var(--ep-accent) !important;
  border-color: var(--ep-accent-ring) !important;
  font-weight: 600;
}

/* ── Stat-card accent bars ───────────────────────────────────────────────── */
.ep-bar-expired { background: var(--ep-danger) !important; }
.ep-bar-danger  { background: var(--ep-warn)   !important; }
.ep-bar-warning { background: var(--ep-accent) !important; }
.ep-bar-ok      { background: var(--ep-ok)     !important; }
.ep-bar-total   { background: var(--ep-info)   !important; }

/* ── Expiry badge colours (Tailwind arbitrary bg values can't interpolate vars inline) */
.ep-badge-expired { background: var(--ep-danger-dim); color: var(--ep-danger); border-color: rgba(239,68,68,.2); }
.ep-badge-danger  { background: var(--ep-warn-dim);   color: var(--ep-warn);   border-color: rgba(245,158,11,.2); }
.ep-badge-warning { background: var(--ep-accent-dim); color: var(--ep-accent); border-color: var(--ep-accent-ring); }
.ep-badge-ok      { background: var(--ep-ok-dim);     color: var(--ep-ok);     border-color: rgba(34,197,94,.2); }
.ep-badge-active  { background: var(--ep-info-dim);   color: var(--ep-info);   border-color: rgba(96,165,250,.2); }
.ep-badge-none    { background: var(--ep-surface-2);  color: var(--ep-muted);  border-color: var(--ep-border); }
.ep-badge-free    { background: var(--ep-ok-dim);     color: var(--ep-ok);     border-color: rgba(34,197,94,.2); }

/* ── Usage bar colour variants ───────────────────────────────────────────── */
.ep-usage-fill         { background: var(--ep-accent); }
.ep-usage-fill-warn    { background: var(--ep-warn); }
.ep-usage-fill-danger  { background: var(--ep-danger); }

/* ── Plan card selected ring ─────────────────────────────────────────────── */
.ep-plan-current  { border-color: var(--ep-ok)     !important; box-shadow: 0 0 0 1px var(--ep-ok); }
.ep-plan-featured { border-color: var(--ep-accent)  !important; box-shadow: 0 0 0 1px var(--ep-accent-ring); }

/* ── Focus ring (accessibility) ──────────────────────────────────────────── */
.ep-focus:focus-visible {
  outline: 2px solid var(--ep-accent);
  outline-offset: 2px;
}

/* ── WP button overrides: match WP .button class with our accent ─────────── */
.expiraa-portal .wp-block-button__link,
.expiraa-portal .button.ep-primary {
  background: var(--ep-accent);
  color: var(--ep-accent-fg) !important;
  border-color: var(--ep-accent);
}
.expiraa-portal .wp-block-button__link:hover,
.expiraa-portal .button.ep-primary:hover {
  background: color-mix(in srgb, var(--ep-accent) 85%, white);
}

/* ── Table row hover (Tailwind hover:bg-* can't target tbody tr easily) ──── */
.ep-table tbody tr:hover td { background: var(--ep-surface-2); }