/* ============================================================================
   Gridavera Admin — marketing brand theme
   Re-skins the whole admin app (admin.gridavera.com) to match the marketing
   site (gridavera.com): navy palette, Inter/Poppins type, rounded corners,
   navy-tinted shadows, and a corrected primary/secondary/danger button
   hierarchy.

   COSMETIC ONLY. This file only:
     - redeclares the app's existing :root design tokens, and
     - restyles a handful of existing .gva-* component classes.
   It never touches auth (MSAL), routing, or any React state/logic.
   Fully reversible: remove the <link> that loads this file.

   LOAD ORDER: must load AFTER the app bundle CSS (assets/main-*.css) so these
   equal-specificity rules win. Same pattern as brand-overlay.css.

   CSP: admin CSP is `font-src 'self'`, so fonts MUST be self-hosted (no Google
   Fonts). Drop the woff2 files listed in the handoff into  public/fonts/ .
   If the font files are absent, everything falls back to the system stack and
   nothing breaks — you just don't get Inter/Poppins.
   ============================================================================ */

/* ---------- 1. Self-hosted brand fonts (same-origin, CSP-safe) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/Inter-Regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/Inter-Medium.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/Inter-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/Inter-Bold.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/Poppins-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/Poppins-Bold.woff2') format('woff2');}

/* ---------- 2. Token overrides — remap the app palette to the brand ---------- */
:root{
  /* Type: Inter for UI, Poppins for display/headings */
  --font-sans:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;
  --font-display:'Poppins','Inter','Segoe UI',sans-serif;

  /* Brand navy (marketing --navy-800 / --navy-900) */
  --color-brand:#002D46;          /* was #202b40 */
  --color-brand-hover:#001B2B;    /* was #181f2e */
  --color-brand-light:#EFF3F8;    /* steel-100  (was #ebf0fa) */

  /* Accent / links -> navy-700; light accent -> steel-100 */
  --color-accent:#0A3E5C;         /* was #2e4a8e */
  --color-accent-light:#EFF3F8;
  --color-link:#0A3E5C;

  /* Header darkest navy, a touch taller (was 52px); sidebar gets a faint steel tint */
  --header-height:60px;           /* was 52px — more breathing room, closer to marketing */
  --color-header-bg:#001B2B;      /* navy-900 (default was var(--color-brand)) */
  --color-sidebar-bg:#EFF3F8;     /* steel-100 (was #f8f9fb) */
  --color-sidebar-hover:#DFE8F0;  /* steel-200 */
  --color-sidebar-active-bg:#002D46;
  --color-sidebar-active-indicator:#6E91AE;  /* steel-600 (was #2e4a8e) */

  /* Focus ring -> steel-600 */
  --color-border-focus:#6E91AE;

  /* Success ties to the brand Excel green */
  --color-success:#1f8a4c;        /* was #16a34a */

  /* Rounder corners across the app (marketing feels notably rounder) */
  --radius-sm:4px;    /* was 2px */
  --radius-md:6px;    /* was 3px */
  --radius-lg:8px;    /* was 4px */
  --radius-xl:12px;   /* was 6px */

  /* Navy-tinted shadows (marketing uses rgba(0,45,70,...)) */
  --shadow-sm:0 1px 2px rgba(0,45,70,.06);
  --shadow-card:0 2px 6px rgba(0,45,70,.07);
  --shadow-card-hover:0 8px 24px rgba(0,45,70,.09);
  --shadow-dropdown:0 8px 24px rgba(0,45,70,.12);
  --shadow-modal:0 18px 48px rgba(0,45,70,.12);
}

/* ---------- 3. Display type: Poppins on the true headings ---------- */
.gva-site-label,
.gva-section-title,
.gva-metric-card__value{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}

/* ---------- 4. Buttons: brand shape + corrected hierarchy ---------- */
/* Everything user-actionable gets the full marketing pill so row-level Edit
   buttons match toolbar Add-* / Save buttons across every page. Only the
   square icon-only buttons (delete X, ghost menu) keep the small 8px radius
   because a full pill would turn them into stretched ovals. */
.gva-btn--primary,
.gva-btn--secondary,
.gva-btn--danger,
.gva-btn--edit{ border-radius:999px !important; }
.gva-btn,
.gva-btn--icon-danger,
.gva-btn--ghost{ border-radius:var(--radius-lg) !important; }

/* Primary = brand navy (token already recolors it; make hover explicit). */
.gva-btn--primary:hover:not(:disabled){ background:var(--color-brand-hover); }

/* Fix the inverted hierarchy on the Deployment Wizard:
   "Start fresh" was a solid red button shouting over the real primary (Next).
   Demote it to an outline/ghost danger so navy "Next" leads. */
.gva-btn--danger.gva-wizard__nav-fresh{
  background:transparent !important;
  color:var(--color-danger) !important;
  border:1px solid var(--color-danger-border) !important;
}
.gva-btn--danger.gva-wizard__nav-fresh:hover:not(:disabled){
  background:var(--color-danger-faint) !important;
}

/* ---------- 5. Wizard stepper: active step in brand navy ---------- */
.gva-stepper__circle--active{
  background:var(--color-brand) !important;
  border-color:var(--color-brand) !important;
  color:#fff !important;
}

/* ---------- 6. Cards & tables: rounder + navy-tinted elevation ---------- */
.gva-metric-card,
.gva-dash-card{
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-card);
}
.gva-metric-card:hover,
.gva-dash-card:hover{ box-shadow:var(--shadow-card-hover); }

/* Unify the arbitrary metric top-borders (were slate/navy/accent/green/amber
   with no logic) to a single brand accent. To make them MEAN something instead,
   swap this rule for per-state colors (e.g. amber when nearing a plan limit). */
.gva-metric-card{ border-top-color:var(--color-brand) !important; }

.gva-table-wrap{
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
/* ---------- 5. Subscription page — marketing-style plan cards ---------- */
/* Ports the visual language from gridavera.com/pricing while preserving the
   admin's action state (Current Plan / Change plan / Select plan / Trial). */

/* -- Cadence toggle (marketing pill style) ----------------------------- */
.gva-sub__cadence-bar--marketing{
  display:flex; justify-content:center; gap:10px;
  margin:24px auto 40px;
  padding:0;
  list-style:none;
}
.gva-sub__cadence-pill{
  appearance:none; cursor:pointer;
  min-width:180px;
  padding:14px 28px;
  border:1.5px solid var(--color-border, #D6D6D6);
  border-radius:999px;
  background:#fff;
  color:var(--color-text, #0F2A47);
  font-family:'Inter', system-ui, sans-serif;
  font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.gva-sub__cadence-pill:hover{
  border-color:var(--color-brand, #0F2A47);
  box-shadow:0 4px 12px rgba(15,42,71,0.08);
}
.gva-sub__cadence-pill--active{
  background:var(--color-brand, #0F2A47);
  border-color:var(--color-brand, #0F2A47);
  color:#fff;
  box-shadow:0 6px 18px rgba(15,42,71,0.20);
}
.gva-sub__cadence-pill-label{
  /* isolated so letter-spacing doesn't push the discount label off-center */
}
.gva-sub__cadence-pill-discount{
  color:#16A34A;
  font-size:12px; font-weight:700;
  letter-spacing:0;
}
.gva-sub__cadence-pill--active .gva-sub__cadence-pill-discount{
  color:#4ADE80;
}

/* -- Plan cards grid --------------------------------------------------- */
.gva-sub__plans{
  display:grid;
  grid-template-columns:repeat(3, minmax(260px, 1fr));
  gap:24px;
  align-items:stretch;
  margin:0 0 32px;
}
@media (max-width:900px){ .gva-sub__plans{ grid-template-columns:1fr; } }

.gva-sub__plan-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:32px 28px;
  background:#fff;
  border:1px solid var(--color-border, #D6D6D6);
  border-radius:20px;
  box-shadow:0 6px 24px rgba(15,42,71,0.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gva-sub__plan-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(15,42,71,0.10);
}

/* Featured tier (is_featured=true) — thicker navy border + Most Popular ribbon */
.gva-sub__plan-card--featured{
  border:2px solid var(--color-brand, #0F2A47);
  box-shadow:0 12px 40px rgba(15,42,71,0.14);
}
.gva-sub__plan-ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--color-brand, #0F2A47);
  color:#fff;
  padding:4px 12px;
  border-radius:999px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 4px 12px rgba(15,42,71,0.24);
  z-index:2;
}

/* Current plan overlay label (admin-only — marketing site doesn't have this) */
.gva-sub__plan-card--current{
  border-color:#22C55E !important;
  box-shadow:0 8px 32px rgba(34,197,94,0.14);
}
.gva-sub__plan-current-label{
  /* !important + left:auto because main.css sets left:16px on this class,
     which — combined with a right override — would stretch the label
     across the full card top and overlap the Most Popular ribbon.
     Padding/font/letter-spacing match .gva-sub__plan-ribbon so the two
     pills read as the same visual height. */
  position:absolute !important;
  top:-14px !important;
  left:auto !important;
  right:20px !important;
  background:#22C55E !important;
  color:#fff !important;
  padding:4px 12px !important;
  border-radius:999px !important;
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.03em !important;
  text-transform:uppercase !important;
  z-index:2;
}
.gva-sub__plan-card--current.gva-sub__plan-card--featured{
  /* Current + Featured — current-plan green wins, ribbon still shows */
  border-color:#22C55E !important;
}
/* When both badges land on the same card, pin each to the OUTER corner of
   the card's top edge (was 24px/20px which read as "very attached") so
   there's real breathing room between the two pills. */
.gva-sub__plan-card--current.gva-sub__plan-card--featured .gva-sub__plan-ribbon{
  left:12px !important;
  transform:none !important;
}
.gva-sub__plan-card--current.gva-sub__plan-card--featured .gva-sub__plan-current-label{
  right:12px !important;
}

/* Card typography */
.gva-sub__plan-title{
  font-family:'Poppins', 'Inter', system-ui, sans-serif;
  font-size:22px; font-weight:600;
  margin:0 0 8px;
  color:var(--color-text, #202b40);
}
.gva-sub__plan-desc{
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px; line-height:1.5;
  color:var(--color-text-muted, #5E5E5E);
  margin:0 0 24px;
  min-height:42px;
}

/* Big price display */
.gva-sub__plan-price{
  display:flex; align-items:baseline; gap:4px;
  margin:0 0 4px;
}
.gva-sub__plan-amount{
  font-family:'Poppins', 'Inter', system-ui, sans-serif;
  font-size:44px; font-weight:700; letter-spacing:-0.02em;
  color:var(--color-text, #202b40);
  line-height:1;
}
.gva-sub__plan-unit{
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px; font-weight:500;
  color:var(--color-text-muted, #5E5E5E);
}
.gva-sub__plan-billed{
  font-family:'Inter', system-ui, sans-serif;
  font-size:13px; color:var(--color-text-muted, #6E6E6E);
  margin:0 0 20px;
}
.gva-sub__plan-billed--unavailable{
  color:#B45309; font-weight:500;
}

/* Feature checklist */
.gva-sub__features{
  list-style:none; padding:0; margin:8px 0 24px;
  display:flex; flex-direction:column; gap:10px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px;
  flex:1; /* fills space so CTA sits at bottom, aligned across cards */
}
.gva-sub__features-row{
  display:flex; align-items:flex-start; gap:10px;
  line-height:1.4;
}
.gva-sub__features-mark{
  flex-shrink:0;
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  border-radius:50%;
  margin-top:1px;
}
.gva-sub__features-row--on .gva-sub__features-mark{
  color:#16A34A;
}
.gva-sub__features-row--off .gva-sub__features-mark{
  color:#D1D5DB;
}
.gva-sub__features-row--off .gva-sub__features-text{
  color:var(--color-text-muted, #9CA3AF);
}

/* Bottom CTAs — filled navy on featured, outline on others */
.gva-sub__plan-actions{
  display:flex; flex-direction:column; gap:8px;
  margin-top:auto;
}
.gva-btn--sub-cta{
  width:100%;
  padding:14px 20px !important;
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px !important; font-weight:600;
  border-radius:10px !important;
}
.gva-btn--sub-cta-secondary{
  width:100%;
  font-size:12px !important;
  background:transparent !important;
  border:none !important;
  color:var(--color-text-muted, #6E6E6E) !important;
  padding:8px !important;
  text-decoration:underline;
}
.gva-btn--sub-cta-secondary:disabled{
  color:var(--color-text-faint, #C3C3C3) !important;
  text-decoration:none;
}