/*
 * Nova Billing Portal - NovaOS polish layer
 *
 * Keep *final* UI overrides here to prevent portal.css from growing indefinitely.
 * This file is already enqueued by the portal loader.
 */

/* --------------------------------------------------------------------------
   NovaOS spacing + radius tokens (scoped to the portal)
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active{
  --nova-space-1: 4px;
  --nova-space-2: 8px;
  --nova-space-3: 12px;
  --nova-space-4: 16px;
  --nova-space-5: 20px;
  --nova-space-6: 24px;
  --nova-space-7: 28px;
  --nova-space-8: 32px;

  --nova-radius-1: 10px;
  --nova-radius-2: 14px;
  --nova-radius-3: 18px;
  --nova-radius-4: 22px;

  --nova-border-soft: rgba(15,23,42,.10);
  --nova-border-med: rgba(15,23,42,.14);
  --nova-surface: rgba(255,255,255,.92);
  --nova-surface-2: rgba(255,255,255,.86);
  --nova-shadow-1: 0 12px 34px rgba(2,6,23,.10);
  --nova-shadow-2: 0 18px 46px rgba(2,6,23,.14);

  /* Safety: prevent horizontal scroll from any one component (esp. mobile) */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Dark theme consistency (Client Portal)
   - Apply dark surfaces across the entire portal (no mixed light/dark cards)
   - Ensure typography inverts for readability
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active.nova-portal-theme-dark{
  --nova-border-soft: rgba(226,232,240,.10);
  --nova-border-med: rgba(226,232,240,.14);
  --nova-surface: rgba(15,23,42,.92);
  --nova-surface-2: rgba(15,23,42,.84);
  --nova-shadow-1: 0 18px 54px rgba(0,0,0,.32);
  --nova-shadow-2: 0 22px 68px rgba(0,0,0,.38);

  background: #0b1220 !important;
  color: rgba(226,232,240,.96);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal{ color: rgba(226,232,240,.96) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__muted{ color: rgba(226,232,240,.72) !important; opacity: 1 !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__card,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__section,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__message-form{
  background: var(--nova-surface) !important;
  border-color: var(--nova-border-soft) !important;
  box-shadow: var(--nova-shadow-1) !important;
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__shell{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__sidebar{
  background: rgba(15,23,42,.92) !important;
  color: rgba(226,232,240,.96) !important;
  border: 1px solid var(--nova-border-soft) !important;
  box-shadow: var(--nova-shadow-1) !important;
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__nav-item{
  background: rgba(255,255,255,.04) !important;
  color: rgba(226,232,240,.88) !important;
  border: 1px solid rgba(226,232,240,.10) !important;
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__nav-item:hover{
  background: rgba(255,255,255,.07) !important;
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__link,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__sidebar-footer .nova-portal__link{
  color: rgba(226,232,240,.92) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(226,232,240,.10) !important;
}


/* Project Space summary: keep hierarchy but convert to dark */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__summary{
  background: linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.80) 100%) !important;
  border-color: var(--nova-border-soft) !important;
}

/* Tabs/labels: invert */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__tab{ color: rgba(226,232,240,.72) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__tab.is-active{ color: rgba(226,232,240,.96) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{ border-bottom-color: var(--nova-border-soft) !important; }

/* Tables */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__table th,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__table td{ border-color: rgba(226,232,240,.10) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__table th{ color: rgba(226,232,240,.88) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__table td{ color: rgba(226,232,240,.84) !important; }

/* Inputs */
body.nova-billing-portal-active.nova-portal-theme-dark input,
body.nova-billing-portal-active.nova-portal-theme-dark select,
body.nova-billing-portal-active.nova-portal-theme-dark textarea{
  background: rgba(2,6,23,.42) !important;
  border-color: rgba(226,232,240,.14) !important;
  color: rgba(226,232,240,.92) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark input::placeholder,
body.nova-billing-portal-active.nova-portal-theme-dark textarea::placeholder{ color: rgba(226,232,240,.52) !important; }

/* Messages/Activity composer + empty states */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-compose__wrap{
  border-color: rgba(226,232,240,.14) !important;
  background: rgba(2,6,23,.32) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-compose__input{
  color: rgba(226,232,240,.92) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-compose__send{
  background: rgba(99,102,241,.16) !important;
  border-color: rgba(99,102,241,.28) !important;
  color: rgba(226,232,240,.96) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-empty{
  border-color: rgba(226,232,240,.20) !important;
  background: rgba(15,23,42,.58) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-empty__title{ color: rgba(226,232,240,.92) !important; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-empty__sub{ color: rgba(226,232,240,.68) !important; }

/* Prevent mixed light cards in legacy/alternate wrappers */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal-card,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal-progress-card,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal-kpi-card{
  background: var(--nova-surface) !important;
  border-color: var(--nova-border-soft) !important;
  color: rgba(226,232,240,.92) !important;
}

/* Auto theme: follow OS preference */
@media (prefers-color-scheme: dark){
  body.nova-billing-portal-active.nova-portal-theme-auto{
    --nova-border-soft: rgba(226,232,240,.10);
    --nova-border-med: rgba(226,232,240,.14);
    --nova-surface: rgba(15,23,42,.92);
    --nova-surface-2: rgba(15,23,42,.84);
    --nova-shadow-1: 0 18px 54px rgba(0,0,0,.32);
    --nova-shadow-2: 0 22px 68px rgba(0,0,0,.38);
    background: #0b1220 !important;
    color: rgba(226,232,240,.96);
  }
  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal{ color: rgba(226,232,240,.96) !important; }
  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__card,
  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__section,
  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__surface,
  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__message-form{ background: var(--nova-surface) !important; border-color: var(--nova-border-soft) !important; }

	  /* Tabs/labels: invert */
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__tab{ color: rgba(226,232,240,.72) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__tab.is-active{ color: rgba(226,232,240,.96) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{ border-bottom-color: var(--nova-border-soft) !important; }

	  /* Tables */
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__table th,
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__table td{ border-color: rgba(226,232,240,.10) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__table th{ color: rgba(226,232,240,.88) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__table td{ color: rgba(226,232,240,.84) !important; }

	  /* Inputs */
	  body.nova-billing-portal-active.nova-portal-theme-auto input,
	  body.nova-billing-portal-active.nova-portal-theme-auto select,
	  body.nova-billing-portal-active.nova-portal-theme-auto textarea{
		background: rgba(2,6,23,.42) !important;
		border-color: rgba(226,232,240,.14) !important;
		color: rgba(226,232,240,.92) !important;
	  }
	  body.nova-billing-portal-active.nova-portal-theme-auto input::placeholder,
	  body.nova-billing-portal-active.nova-portal-theme-auto textarea::placeholder{ color: rgba(226,232,240,.52) !important; }

	  /* Composer + empty */
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-msg-compose__wrap{ border-color: rgba(226,232,240,.14) !important; background: rgba(2,6,23,.32) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-msg-compose__input{ color: rgba(226,232,240,.92) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-msg-compose__send{ background: rgba(99,102,241,.16) !important; border-color: rgba(99,102,241,.28) !important; color: rgba(226,232,240,.96) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-empty{ border-color: rgba(226,232,240,.20) !important; background: rgba(15,23,42,.58) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-empty__title{ color: rgba(226,232,240,.92) !important; }
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-ps-empty__sub{ color: rgba(226,232,240,.68) !important; }

	  /* Legacy wrappers */
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal-card,
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal-progress-card,
	  body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal-kpi-card{ background: var(--nova-surface) !important; border-color: var(--nova-border-soft) !important; color: rgba(226,232,240,.92) !important; }
}

/* Dashboard background: clean light canvas (LIGHT THEME ONLY). */
html:not([data-theme="dark"]) body.nova-billing-portal-active:not(.nova-portal-theme-dark):not(.nova-theme--dark){
  background: #ffffff !important;
}
/* Utility spacing (portal-scoped) */
body.nova-billing-portal-active .nova-portal__mt-10{ margin-top: var(--nova-space-3, 10px); }
body.nova-billing-portal-active .nova-portal__btn-inline{ margin-top: var(--nova-space-3, 10px); display:inline-flex; }

/* Tighten/standardize common spacing so the whole portal shares one rhythm */
body.nova-billing-portal-active .nova-portal__card{ padding: var(--nova-space-5) !important; }
body.nova-billing-portal-active .nova-portal__card-h{ margin-bottom: var(--nova-space-3) !important; }
body.nova-billing-portal-active .nova-portal__grid{ gap: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-portal__panes{ gap: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-portal__banner{ padding: var(--nova-space-4) !important; }

/* --------------------------------------------------------------------------
   Selected project card: highlight (no "Currently viewing" pill)
   - Use a bluish-purple ombré fill to match the portal CTAs.
   - Invert key typography so the selected state is unambiguous.
   -------------------------------------------------------------------------- */
.nova-portal__project-card.is-selected{
  border: 0;
  box-shadow: 0 18px 52px rgba(99,102,241,.26), 0 12px 28px rgba(2,6,23,.10);
  transform: translateY(-1px);
  background: linear-gradient(90deg, #4F46E5 0%, #A855F7 100%);
}
.nova-portal__project-card.is-selected .nova-portal__project-title,
.nova-portal__project-card.is-selected .nova-portal__project-orderno,
.nova-portal__project-card.is-selected .nova-portal__project-due,
.nova-portal__project-card.is-selected .nova-portal__project-amount{
  color: #fff !important;
}
.nova-portal__project-card.is-selected .nova-portal__project-pill{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.95) !important;
}

/* --------------------------------------------------------------------------
   Project Space hierarchy (closer to reference screenshot)
   - Tabs use underline (not pill chips)
   - Summary actions sit right under the amount
   - Improve internal padding so nothing overlaps when tapped
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active .nova-project-space__summary{ padding: var(--nova-space-5) !important; }
body.nova-billing-portal-active .nova-project-space__top{ align-items: flex-start !important; gap: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-project-space__top-right{ display:flex; flex-direction:column; align-items:flex-end; gap: var(--nova-space-3); }
body.nova-billing-portal-active .nova-project-space__actions{ display:flex; justify-content:flex-end; gap: var(--nova-space-2); flex-wrap: wrap; }

/* Project Space header summary should behave like a full-width banner */
body.nova-billing-portal-active .nova-project-space__summary{
  width: 100%;
  margin-top: var(--nova-space-4);
  margin-bottom: var(--nova-space-4);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
  border: 1px solid var(--nova-border-soft);
  box-shadow: var(--nova-shadow-1);
}

@media (min-width: 980px){
  body.nova-billing-portal-active .nova-project-space__summary .nova-project-space__top{
    align-items: center;
  }
  body.nova-billing-portal-active .nova-project-space__summary .nova-project-space__actions{
    margin-top: 0;
  }
}
body.nova-billing-portal-active .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{ border-bottom: 1px solid var(--nova-border-soft); padding: 0; gap: var(--nova-space-4); }
body.nova-billing-portal-active .nova-project-space__tab{ background: transparent !important; border: 0 !important; padding: var(--nova-space-3) 0 !important; border-radius: 0 !important; color: rgba(15,23,42,.72); font-weight: 650; }
body.nova-billing-portal-active .nova-project-space__tab.is-active{ color: rgba(15,23,42,.92); box-shadow: inset 0 -2px 0 rgba(99,102,241,.55); }
body.nova-billing-portal-active .nova-project-space__grid{ gap: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-project-space__section{ padding: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-project-space__message-form{ padding: var(--nova-space-4); border: 1px solid var(--nova-border-soft); border-radius: var(--nova-radius-2); background: var(--nova-surface); }
body.nova-billing-portal-active .nova-project-space__msg-textarea{ padding: var(--nova-space-3); }
body.nova-billing-portal-active .nova-project-space__msg-actions{ margin-top: var(--nova-space-3); }

/* File uploader: make the "Choose file" button feel like a NovaOS control */
body.nova-billing-portal-active .nova-project-space__section input[type="file"]{
  max-width: 100%;
}
body.nova-billing-portal-active .nova-project-space__section input[type="file"]::file-selector-button{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--nova-border-med);
  background: rgba(15,23,42,.04);
  margin-right: var(--nova-space-3);
  cursor: pointer;
}

/* When project cards represent invoices/proposals, remove progress UI (no blue lines) */
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="invoice"] .nova-portal__project-progress,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="proposal"] .nova-portal__project-progress,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="invoice"] .nova-portal__project-meta,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="proposal"] .nova-portal__project-meta{
  display: none !important;
}

/* Desktop: 4 cards per row (bigger cards, more breathing room) */
@media (min-width: 1200px){
  body.nova-billing-portal-active .nova-portal__project-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* Notification badge: ensure it's a real badge (no empty box) */
body.nova-billing-portal-active .nova-portal__notif-badge,
body.nova-billing-portal-active .nova-mob-top__notif-badge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(239,68,68,.92);
  border: 1px solid rgba(255,255,255,.35);
}

/* Footer note (client-facing) */
body.nova-billing-portal-active .nova-portal__footer-note{
  margin: 0 auto var(--nova-space-6);
  max-width: 920px;
  text-align: center;
  color: rgba(15,23,42,.65);
  font-size: 13px;
  padding: var(--nova-space-3) var(--nova-space-4);
}

/* Mobile: slightly smaller logo so contact info... */
@media (max-width: 768px){
  .nova-mob-top__logo{ height: 16px !important; }
}

/* Mobile ongoing projects grid */
body.nova-billing-portal-active .nova-mob-section{ margin-top: var(--nova-space-4); }
body.nova-billing-portal-active .nova-mob-section__h{ display:flex; align-items:center; justify-content:space-between; font-weight: 750; margin: 0 0 var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-projects{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-proj{ display:block; padding: var(--nova-space-4); border-radius: var(--nova-radius-2); border: 1px solid var(--nova-border-soft); background: var(--nova-surface); text-decoration:none; color: inherit; }
body.nova-billing-portal-active .nova-mob-proj__top{ display:flex; justify-content:space-between; gap: var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-proj__num{ font-size: 11px; font-weight: 750; color: rgba(15,23,42,.6); }
body.nova-billing-portal-active .nova-mob-proj__amt{ font-size: 12px; font-weight: 800; }
body.nova-billing-portal-active .nova-mob-proj__title{ margin-top: var(--nova-space-2); font-size: 13px; font-weight: 800; line-height: 1.2; }
body.nova-billing-portal-active .nova-project-space__msg-textarea{ padding: var(--nova-space-3) !important; }
body.nova-billing-portal-active .nova-project-space__files{ padding: var(--nova-space-4) !important; }

/* Bigger, more NovaOS-like file picker button */
body.nova-billing-portal-active .nova-project-space__files input[type="file"]::file-selector-button{ padding: 10px 14px; border-radius: 12px; border: 1px solid var(--nova-border-med); background: rgba(15,23,42,.04); cursor: pointer; }
body.nova-billing-portal-active .nova-project-space__files input[type="file"]::-webkit-file-upload-button{ padding: 10px 14px; border-radius: 12px; border: 1px solid var(--nova-border-med); background: rgba(15,23,42,.04); cursor: pointer; }

/* Notification badge: ensure the count is always visible (was rendering like an empty box) */
body.nova-billing-portal-active .nova-portal__notif-badge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(239,68,68,.95);
}

/* Money cards: remove the thin progress bar/blue line */
body.nova-billing-portal-active .nova-portal__project-progress{ display:none !important; }

/* Footer note (client-safe marketing) */
body.nova-billing-portal-active .nova-portal__footer-note{ margin: var(--nova-space-6) auto 0; padding: var(--nova-space-3) var(--nova-space-4); text-align:center; color: rgba(15,23,42,.64); font-size: 12px; }

/* Footer marketing banner (client-safe) */
body.nova-billing-portal-active .nova-portal__marketing-banner{
  margin: var(--nova-space-7) auto 0;
  width: min(1080px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: var(--nova-space-5);
  padding: var(--nova-space-6);
  border-radius: var(--nova-radius-4);
  background: linear-gradient(90deg, rgba(99,102,241,.16), rgba(168,85,247,.12));
  border: 1px solid rgba(99,102,241,.18);
  box-shadow: var(--nova-shadow-1);
}
body.nova-billing-portal-active .nova-portal__marketing-art{
  height: 124px;
  border-radius: 20px;
  background:
    radial-gradient(70px 70px at 30% 40%, rgba(99,102,241,.55), rgba(99,102,241,0)),
    radial-gradient(80px 80px at 70% 60%, rgba(168,85,247,.45), rgba(168,85,247,0)),
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.20));
  border: 1px solid rgba(255,255,255,.55);
}
body.nova-billing-portal-active .nova-portal__marketing-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
}
body.nova-billing-portal-active .nova-portal__marketing-sub{
  margin-top: 6px;
  color: rgba(15,23,42,.72);
}
body.nova-billing-portal-active .nova-portal__marketing-cta{
  white-space: nowrap;
}
body.nova-billing-portal-active .nova-portal__powered{
  margin: 14px auto 0;
  text-align: center;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

@media (max-width: 768px){
  body.nova-billing-portal-active .nova-portal__marketing-banner{
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: var(--nova-space-4);
    padding: var(--nova-space-5);
  }
  body.nova-billing-portal-active .nova-portal__marketing-art{ height: 110px; }
  body.nova-billing-portal-active .nova-portal__marketing-title{ font-size: 18px; }
  body.nova-billing-portal-active .nova-portal__marketing-cta{ justify-self: start; }
}

/* Dashboard: Client files carousel */
body.nova-billing-portal-active .nova-dash__client-files{ margin-top: var(--nova-space-4); }
body.nova-billing-portal-active .nova-client-files__rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--nova-space-4);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
body.nova-billing-portal-active .nova-client-file{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  min-width: 260px;
}
body.nova-billing-portal-active .nova-client-file:hover{ box-shadow: 0 12px 26px rgba(2,6,23,.10); }
body.nova-billing-portal-active .nova-client-file__thumb{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  position: relative;
}
body.nova-billing-portal-active .nova-client-file__thumb img{ width:100%; height:100%; object-fit: cover; }
body.nova-billing-portal-active .nova-client-file__icon{ width: 32px; height: 32px; opacity: .9; }
body.nova-billing-portal-active .nova-client-file__ext{
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #fff;
}
body.nova-billing-portal-active .nova-client-file__name{
  font-weight: 750;
  color: rgba(15,23,42,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.nova-billing-portal-active .nova-client-files__controls{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
body.nova-billing-portal-active .nova-client-files__btn{
  width: 38px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  cursor: pointer;
}
@media (min-width: 980px){
  /* 3 cards visible (max) while still allowing horizontal scroll for longer lists */
  body.nova-billing-portal-active .nova-client-files__rail{ grid-auto-columns: calc((100% - (var(--nova-space-4) * 2)) / 3); }
  body.nova-billing-portal-active .nova-client-file{ min-width: 0; }
}
@media (max-width: 768px){
  /* Mobile: scroll one file at a time */
  body.nova-billing-portal-active .nova-client-files__rail{ grid-auto-columns: 100%; }
}

/* Mobile: reduce logo and let business meta breathe */
@media (max-width: 768px){
  .nova-mob-top__logo{ height: 16px; }
  .nova-mob-top__meta{ margin-top: 2px; display:flex; flex-wrap:wrap; gap: 4px 8px; }
  .nova-mob-top__meta-item{ font-size: 10px; opacity: .82; }
  .nova-mob-section{ margin-top: var(--nova-space-4); }
  .nova-mob-section__h{ font-weight: 700; font-size: 12px; margin: 0 0 var(--nova-space-3); color: rgba(15,23,42,.72); }
  .nova-mob-projects{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nova-space-3); }
  .nova-mob-proj{ display:block; padding: var(--nova-space-4); border: 1px solid rgba(15,23,42,.10); border-radius: var(--nova-radius-2); background: #fff; }
  .nova-mob-proj__top{ display:flex; align-items:center; justify-content: space-between; gap: var(--nova-space-2); }
  .nova-mob-proj__num{ font-size: 11px; font-weight: 700; color: rgba(15,23,42,.72); }
  .nova-mob-proj__amt{ font-size: 11px; font-weight: 700; color: rgba(15,23,42,.92); }
  .nova-mob-proj__title{ margin-top: 6px; font-size: 12px; font-weight: 650; color: rgba(15,23,42,.92); }
}
.nova-portal__project-card.is-selected::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--nova-radius-4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}
.nova-portal__project-card.is-selected:hover{ transform: translateY(-1px); }

/* Sidebar badge: always red w/ white text (including any "soft" variant) */
body.nova-billing-portal-active .nova-portal__nav-badge,
body.nova-billing-portal-active .nova-portal__nav-badge--soft{
  background: rgba(239,68,68,.95) !important;
  border-color: rgba(239,68,68,.95) !important;
  color: #fff !important;
}

/* Marketing footer banner (client-safe) */
body.nova-billing-portal-active .nova-portal__marketing-banner{
  margin: var(--nova-space-6) auto 0;
  width: min(980px, calc(100% - 48px));
  padding: var(--nova-space-5);
  border-radius: var(--nova-radius-4);
  background: linear-gradient(90deg, #4F46E5 0%, #A855F7 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--nova-space-5);
  box-shadow: var(--nova-shadow-2);
}
body.nova-billing-portal-active .nova-portal__marketing-art{
  /* Removed from template; keep hidden defensively in case older markup remains. */
  display: none;
}
body.nova-billing-portal-active .nova-portal__marketing-title{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}
body.nova-billing-portal-active .nova-portal__marketing-sub{
  margin-top: 8px;
  color: rgba(255,255,255,.9);
  max-width: 64ch;
}
body.nova-billing-portal-active .nova-portal__marketing-cta{
  margin-left: auto;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.18) !important;
}

@media (max-width: 768px){
  body.nova-billing-portal-active .nova-portal__marketing-banner{
    margin: var(--nova-space-4) auto 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.nova-billing-portal-active .nova-portal__marketing-cta{ margin-left: 0; width: 100%; justify-content: center; }
}
body.nova-billing-portal-active .nova-portal__powered{
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: rgba(15,23,42,.6);
}

/* Dashboard: Client files carousel */
body.nova-billing-portal-active .nova-client-files__rail{
  display: flex;
  gap: var(--nova-space-4);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
body.nova-billing-portal-active .nova-client-files__rail::-webkit-scrollbar{ height: 8px; }
body.nova-billing-portal-active .nova-client-file{
  flex: 0 0 calc((100% - (var(--nova-space-4) * 2)) / 3);
  min-width: 240px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  padding: var(--nova-space-4);
  border: 1px solid var(--nova-border-soft);
  border-radius: var(--nova-radius-3);
  background: #fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
body.nova-billing-portal-active .nova-client-file__thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
body.nova-billing-portal-active .nova-client-file__thumb img{ width: 100%; height: 100%; object-fit: cover; }
body.nova-billing-portal-active .nova-client-file__icon{ width: 28px; height: 28px; object-fit: contain; opacity: .88; }
body.nova-billing-portal-active .nova-client-file__ext{ font-size: 11px; font-weight: 800; color: rgba(15,23,42,.72); }
body.nova-billing-portal-active .nova-client-file__name{ font-weight: 750; font-size: 13px; line-height: 1.2; }
body.nova-billing-portal-active .nova-client-files__controls{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
body.nova-billing-portal-active .nova-client-files__btn{
  width: 40px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--nova-border-med);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
body.nova-billing-portal-active .nova-client-files__btn:hover{ background: rgba(15,23,42,.04); }
@media (max-width: 768px){
  body.nova-billing-portal-active .nova-client-file{
    flex: 0 0 100%;
    min-width: 80%;
  }
}

/* --------------------------------------------------------------------------
   Project Space: hierarchy (header, summary, tabs, section headers)
   -------------------------------------------------------------------------- */
.nova-project-space__card{ margin-top: var(--nova-space-4); }

.nova-project-space__card-head{
  align-items: flex-start;
  gap: var(--nova-space-4);
}

.nova-project-space__heading{
  margin: 0 0 var(--nova-space-1) 0;
}

.nova-project-space__crumbs{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(15,23,42,.55);
  margin: 0 0 var(--nova-space-2) 0;
}
.nova-project-space__crumb{
  color: rgba(59,130,246,.92);
  text-decoration: none;
}
.nova-project-space__crumb:hover{ text-decoration: underline; }
.nova-project-space__crumb-sep{ opacity: .6; }
.nova-project-space__crumb-current{ color: rgba(15,23,42,.72); }

/* Smooth transition when jumping into Project Space via hash */
#nova-project-space{ scroll-margin-top: 16px; }

.nova-project-space__back{
  margin-top: 2px;
}

.nova-project-space__summary{
  padding: var(--nova-space-5) var(--nova-space-5) var(--nova-space-4);
  border-radius: var(--nova-radius-3);
}
.nova-project-space__top{ gap: var(--nova-space-5); }
.nova-project-space__title{ font-size: 20px; line-height: 1.25; }
.nova-project-space__kicker{ gap: var(--nova-space-2); }
.nova-project-space__actions{ gap: var(--nova-space-3); margin-top: var(--nova-space-4); flex-wrap: wrap; }
.nova-project-space__actions .nova-portal__btn{ padding: 10px 14px; border-radius: var(--nova-radius-2); }

/* Tabs: match NovaOS pill feel */
.nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{
  display: flex;
  gap: var(--nova-space-2);
  padding: var(--nova-space-3) 0 var(--nova-space-2);
  margin-top: var(--nova-space-2);
}

/* Used by portal.js to switch panels on mobile (UI only). */
@media (max-width: 900px){
  .nova-project-space__section.is-hidden{ display: none; }
}
.nova-project-space__tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--nova-border-soft);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.78);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.nova-project-space__tab:hover{ background: rgba(15,23,42,.05); }
.nova-project-space__tab.is-active{
  background: rgba(255,255,255,.96);
  border-color: rgba(59,130,246,.26);
  box-shadow: 0 12px 28px rgba(59,130,246,.12);
  color: rgba(15,23,42,.92);
}

.nova-project-space__grid{ gap: var(--nova-space-4); }

.nova-project-space__section{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  overflow: hidden;
}
.nova-project-space__section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nova-space-4) var(--nova-space-4) var(--nova-space-3);
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 100%);
}
.nova-project-space__h3{ margin: 0; font-size: 14px; letter-spacing: .01em; }

/* The portal-files template already renders its own card list; give it padding */
.nova-project-space__section .nova-portal-files,
.nova-project-space__section .nova-portal-timeline{
  padding: var(--nova-space-3) var(--nova-space-4) var(--nova-space-4);
}

/* Empty state (e.g., Contracts & Agreements placeholder) */
.nova-project-space__empty{
  padding: var(--nova-space-5) var(--nova-space-4) var(--nova-space-6);
}
.nova-project-space__empty-title{
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 var(--nova-space-2) 0;
  color: rgba(15,23,42,.92);
}

/* More tappable / breathable download button */
.nova-project-space .nova-portal-file-download{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.06);
}
.nova-project-space .nova-portal-file-download:hover{ background: rgba(15,23,42,.09); }

/* Message form: migrated from inline styles to classes */
.nova-project-space__msg-label{ display:block; margin: 0 0 var(--nova-space-2) 0; }
.nova-project-space__msg-textarea{
  width: 100%;
  min-height: 92px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.92);
}
.nova-project-space__msg-actions{
  margin-top: var(--nova-space-3);
  display: flex;
  gap: var(--nova-space-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Mobile: smaller header + avoid footer overlap + improve Project Space tabs
   -------------------------------------------------------------------------- */
@media (max-width: 768px){
  /* Tap targets: keep touch areas comfortable */
  .nova-project-space__back{ padding: 10px 12px; min-height: 44px; }
  .nova-project-space__tab{ min-height: 44px; }
  .nova-portal__project-card{ min-height: 104px; }
  .nova-mob-top{ padding: 8px 12px 6px; }
  .nova-mob-top__menu{ width: 34px; height: 34px; border-radius: 10px; }
  .nova-mob-top__avatar{ width: 32px; height: 32px; }
  .nova-mob-top__logo{ height: 20px; }
  .nova-mob-top__name{ font-size: 13px; }
  .nova-mob-top__tag{ font-size: 11px; }

  /* Make sure the fixed bottom nav doesn't cover the last items */
  body.nova-billing-portal-active .nova-portal__shell{ padding: 0 0 92px; }
  .nova-portal__panes{ padding-bottom: 132px; }
  .nova-portal__upsell{ margin-bottom: 92px; }

  /* Tabs become a compact segmented control */
  .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{ padding-top: var(--nova-space-2); overflow-x: auto; }
  .nova-project-space__tab{ padding: 9px 12px; }
}

/* --------------------------------------------------------------------------
   Desktop project grid density: 4-up (not 5-up) so cards have breathing room
   -------------------------------------------------------------------------- */
@media (min-width: 1100px){
  body.nova-billing-portal-active .nova-portal__project-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Money events cards are invoices/proposals: hide project progress UI */
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="invoice"] .nova-portal__project-progress,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="proposal"] .nova-portal__project-progress,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="invoice"] .nova-portal__project-meta,
body.nova-billing-portal-active .nova-portal__project-card[data-doc-type="proposal"] .nova-portal__project-meta{ display:none !important; }

/* Prevent overlap on selected/tapped cards */
body.nova-billing-portal-active .nova-portal__project-card{ padding-left: var(--nova-space-4) !important; padding-right: var(--nova-space-4) !important; }
body.nova-billing-portal-active .nova-portal__project-head{ gap: var(--nova-space-3) !important; }

/* Nav: show caret for Money (dropdown) */
body.nova-billing-portal-active .nova-portal__nav-item.has-sub{ position: relative; }
body.nova-billing-portal-active .nova-portal__nav-caret{ display:inline-flex; margin-left: auto; opacity: .7; }

/* Notification badge should look like a real badge (not an empty box) */
body.nova-billing-portal-active .nova-portal__notif-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(239,68,68,.92);
  color: #fff;
  box-shadow: 0 10px 20px rgba(239,68,68,.22);
}

/* File input: make the choose file button feel intentional */
body.nova-billing-portal-active .nova-project-space__section input[type="file"]::file-selector-button{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--nova-border-med);
  background: rgba(59,130,246,.10);
  font-weight: 700;
  cursor: pointer;
}
body.nova-billing-portal-active .nova-project-space__section input[type="file"]{ padding: 8px 0; }

/* Mobile "Ongoing Projects" section */
body.nova-billing-portal-active .nova-mob-section{ margin-top: var(--nova-space-5); }
body.nova-billing-portal-active .nova-mob-section__h{ display:flex; align-items:center; justify-content:space-between; font-weight: 850; font-size: 13px; margin: 0 0 var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-projects{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-proj{ display:block; padding: var(--nova-space-4); border-radius: var(--nova-radius-2); border: 1px solid var(--nova-border-soft); background: var(--nova-surface); text-decoration:none; color: inherit; box-shadow: 0 10px 22px rgba(2,6,23,.06); }
body.nova-billing-portal-active .nova-mob-proj__top{ display:flex; align-items:center; justify-content:space-between; gap: var(--nova-space-3); }
body.nova-billing-portal-active .nova-mob-proj__num{ font-size: 11px; font-weight: 800; opacity: .78; }
body.nova-billing-portal-active .nova-mob-proj__amt{ font-size: 11px; font-weight: 900; }
body.nova-billing-portal-active .nova-mob-proj__title{ margin-top: var(--nova-space-2); font-size: 13px; font-weight: 900; line-height: 1.2; }

/* Client footer note */
body.nova-billing-portal-active .nova-portal__footer-note{
  margin: var(--nova-space-5) auto;
  text-align: center;
  color: rgba(15,23,42,.58);
  font-weight: 650;
}

/* Mobile: slightly smaller logo to make room for business info */
@media (max-width: 768px){
  .nova-mob-top__logo{ height: 16px; }
}

/* --------------------------------------------------------------------------
   Billing cards: make invoices/proposals feel distinct from Projects
   -------------------------------------------------------------------------- */
.nova-portal .nova-mob-pill--invoice{ background: rgba(56,189,248,.14); }

/* Billing item cards (invoices/proposals): remove the vertical accent bar.
   Keep the progress bar so clients can still gauge status at a glance. */
.nova-mob-billing-cards a.nova-mob-card{ position: relative; }
.nova-mob-billing-cards a.nova-mob-card::before{ display: none !important; }

.nova-portal .nova-mob-card__subtitle{
  font-size: 13px;
  line-height: 1.25;
  opacity: .75;
  margin-top: -6px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pro upsell banner: higher-end visual treatment
   -------------------------------------------------------------------------- */
.nova-portal__upsell{
  border-radius: 18px;
  border: 1px solid rgba(99,102,241,.18);
  background: radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,.16) 0%, rgba(168,85,247,.10) 42%, rgba(255,255,255,.92) 100%);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.nova-portal__upsell-text{ gap: 12px; }
.nova-portal__upsell-icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
}
.nova-portal__upsell a.nova-portal__btn{ border-radius: 14px; }

/* --------------------------------------------------------------------------
   Notifications bell + dropdown
   -------------------------------------------------------------------------- */
.nova-portal__notifbtn,
.nova-mob-top__notif{ position: relative; }

.nova-portal__notif-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  background: rgba(239,68,68,1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.92);
  box-sizing: border-box;
}

.nova-mob-top__notif{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nova-portal__notif-popover{
  position: fixed;
  top: 86px;
  right: 22px;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15,23,42,.20);
  backdrop-filter: blur(12px);
  z-index: 10000;
  overflow: hidden;
  display: none;
}
.nova-portal__notif-popover.is-open{ display: block; }

.nova-portal__notif-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.nova-portal__notif-title{ font-size: 13px; font-weight: 800; }
.nova-portal__notif-clear{
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 700;
  color: rgba(29,78,216,.95);
  cursor: pointer;
}
.nova-portal__notif-clear:hover{ background: rgba(29,78,216,.08); }

.nova-portal__notif-list{ max-height: 360px; overflow: auto; }
.nova-portal__notif-empty{ padding: 14px 12px; opacity: .75; }
.nova-portal__notif-item{ padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.08); }
.nova-portal__notif-item:last-child{ border-bottom: 0; }
.nova-portal__notif-item-title{ font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.nova-portal__notif-item-msg{ font-size: 12px; opacity: .82; line-height: 1.35; }
.nova-portal__notif-item-time{ font-size: 11px; opacity: .6; margin-top: 6px; }

@media (max-width: 768px){
  /* Tap targets: keep touch areas comfortable */
  .nova-project-space__back{ padding: 10px 12px; min-height: 44px; }
  .nova-project-space__tab{ min-height: 44px; }
  .nova-portal__project-card{ min-height: 104px; }
  .nova-portal__notif-popover{
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   First Win (onboarding card)
   ─────────────────────────────────────────────────────────────────────────-*/

.nova-firstwin{
  background: var(--nova-surface, #fff);
  border: 1px solid rgba(15,23,42,var(--nova-border-alpha,0.10));
  border-radius: var(--nova-radius-xl, 18px);
  padding: var(--nova-space-5, 16px);
  box-shadow: var(--nova-shadow-sm, 0 8px 24px rgba(15,23,42,.06));
  margin: 0 0 var(--nova-space-5, 16px);
}

.nova-firstwin__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--nova-space-4, 12px); }
.nova-firstwin__title{ font-size: 14px; font-weight: 900; letter-spacing: -0.01em; }
.nova-firstwin__sub{ font-size: 12px; opacity: .78; margin-top: 4px; line-height: 1.4; }
.nova-firstwin__pill{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(59,130,246,.10); color: rgba(29,78,216,.95); }

.nova-firstwin__progress{ margin-top: var(--nova-space-4, 12px); height: 8px; background: rgba(15,23,42,.06); border-radius: 999px; overflow:hidden; }
.nova-firstwin__bar{ height: 100%; background: rgba(29,78,216,.85); border-radius: 999px; }

.nova-firstwin__list{ list-style:none; margin: var(--nova-space-4, 12px) 0 0; padding: 0; display:flex; flex-direction:column; gap: var(--nova-space-3, 10px); }
.nova-firstwin__item{ display:flex; align-items:center; gap: var(--nova-space-3, 10px); padding: 10px 10px; border-radius: var(--nova-radius-lg, 14px); background: rgba(15,23,42,.03); }
.nova-firstwin__item.is-done{ background: rgba(16,185,129,.08); }
.nova-firstwin__check{ width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(15,23,42,.18); display:inline-block; position:relative; flex: 0 0 auto; }
.nova-firstwin__item.is-done .nova-firstwin__check{ border-color: rgba(16,185,129,.7); background: rgba(16,185,129,.18); }
.nova-firstwin__item.is-done .nova-firstwin__check:after{ content:""; position:absolute; left:5px; top:2px; width: 5px; height: 9px; border-right: 2px solid rgba(16,185,129,.9); border-bottom: 2px solid rgba(16,185,129,.9); transform: rotate(45deg); }

.nova-firstwin__label{ font-size: 12px; font-weight: 700; opacity: .9; flex: 1 1 auto; }
.nova-firstwin__state{ font-size: 11px; font-weight: 800; opacity: .75; }
.nova-firstwin__action{ font-size: 12px; font-weight: 800; text-decoration:none; padding: 6px 10px; border-radius: 999px; background: rgba(29,78,216,.12); color: rgba(29,78,216,.95); }
.nova-firstwin__action:hover{ background: rgba(29,78,216,.18); }
.nova-firstwin__item.is-locked .nova-firstwin__action{ background: rgba(99,102,241,.12); color: rgba(67,56,202,.95); }

.nova-firstwin__delight{ margin-top: var(--nova-space-4, 12px); padding: 10px 12px; border-radius: var(--nova-radius-lg, 14px); background: rgba(16,185,129,.10); font-size: 12px; line-height: 1.4; }

@media (max-width: 768px){
  /* Tap targets: keep touch areas comfortable */
  .nova-project-space__back{ padding: 10px 12px; min-height: 44px; }
  .nova-project-space__tab{ min-height: 44px; }
  .nova-portal__project-card{ min-height: 104px; }
  .nova-firstwin{ padding: var(--nova-space-4, 12px); }
}

/* NovaOS navigation semantics: Money + sub-items */
body.nova-billing-portal-active .nova-portal__nav-sub{
  margin: 4px 0 12px;
  padding-left: 10px;
  border-left: 1px solid var(--nova-border, rgba(255,255,255,.12));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.nova-billing-portal-active .nova-portal__nav-subitem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--nova-radius-md, 12px);
  color: inherit;
  text-decoration: none;
  opacity: .92;
}
body.nova-billing-portal-active .nova-portal__nav-subitem:hover{
  background: rgba(255,255,255,.06);
  opacity: 1;
}
body.nova-billing-portal-active .nova-portal__nav-subitem.is-active{
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
  opacity: 1;
}
body.nova-billing-portal-active .nova-portal__nav-badge--soft{
  background: rgba(239,68,68,.95);
  color: #fff;
  border: 1px solid rgba(239,68,68,.95);
}

/* Reduce overlap: hide "payments autopay" cards if any legacy remains */
body.nova-billing-portal-active .nova-payments__autopay{ display:none; }


/* --------------------------------------------------------------------------
   Ship Pass 11: restore Project Space structure + mobile clarity fixes
   UI-only (no feature regressions)
   -------------------------------------------------------------------------- */

/* Topbar icons: always visible, no box-outline look */
body.nova-billing-portal-active .nova-portal__iconbtn{
  width: auto !important;
  height: auto !important;
  padding: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #0f172a !important;
}
body.nova-billing-portal-active .nova-portal__iconbtn:hover{
  background: rgba(15,23,42,.06) !important;
}
body.nova-billing-portal-active .nova-portal__menu-btn{
  color: #0f172a !important;
}

/* Notification bell should not look like an empty square */
body.nova-billing-portal-active .nova-portal__notifbtn{
  border: none !important;
  background: transparent !important;
}

/* Topbar balance: allow a second line for "Next payment" without feeling cramped */
body.nova-billing-portal-active .nova-portal__sub{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.nova-billing-portal-active .nova-portal__sub-row{
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
body.nova-billing-portal-active .nova-portal__sub-row--next{
  font-size: 13px;
}
body.nova-billing-portal-active .nova-portal__sub-meta{
  margin-left: 8px;
  color: rgba(15,23,42,.62);
}

/* Sidebar brand: keep it clean */
body.nova-billing-portal-active .nova-portal__brand-sub{ display:none !important; }

/* Money dropdown UX */
body.nova-billing-portal-active .nova-portal__nav-sub{
  display: none;
  margin-left: 10px;
  margin-top: 4px;
}
body.nova-billing-portal-active .nova-portal__nav-group.is-open .nova-portal__nav-sub{
  display: grid;
  gap: 6px;
}
body.nova-billing-portal-active .nova-portal__nav-toggle{
  width: 100%;
  text-align: left;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
body.nova-billing-portal-active .nova-portal__nav-chevron{
  opacity: .8;
}
body.nova-billing-portal-active .nova-portal__nav-chevron{
  transition: transform .16s ease;
}
body.nova-billing-portal-active .nova-portal__nav-group.is-open .nova-portal__nav-chevron{
  transform: rotate(180deg);
}

/* Fix overlap in selected project cards */
body.nova-billing-portal-active .nova-portal__project-topline{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
body.nova-billing-portal-active .nova-portal__project-amount{
  white-space: nowrap;
  margin-left: 10px;
}

/* Project Space: restore 3-panel structure like reference */
body.nova-billing-portal-active .nova-project-space__layout{
  display: grid;
  gap: var(--nova-space-4, 16px);
}
@media (min-width: 1024px){
  body.nova-billing-portal-active .nova-project-space__layout{
    grid-template-columns: 1.2fr .8fr 1fr;
    align-items: start;
  }
}
body.nova-billing-portal-active .nova-project-space__panel{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--nova-radius-lg, 16px);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  overflow: hidden;
}
body.nova-billing-portal-active .nova-project-space__panel-h{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.55);
}
body.nova-billing-portal-active .nova-project-space__panel-b{
  padding: 12px 14px;
}

/* Tabs: underline style (no pills) */
body.nova-billing-portal-active .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{
  display:flex;
  gap: 18px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-top: 10px;
}
body.nova-billing-portal-active .nova-project-space__tab{
  border: none !important;
  background: transparent !important;
  padding: 10px 2px !important;
  border-radius: 0 !important;
  opacity: .8;
  font-weight: 700;
  position: relative;
}
body.nova-billing-portal-active .nova-project-space__tab.is-active{ opacity: 1; }
body.nova-billing-portal-active .nova-project-space__tab.is-active:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: currentColor;
}

/* Project Space summary actions: align under amount */
@media (min-width: 900px){
  body.nova-billing-portal-active .nova-project-space__top-right{
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  body.nova-billing-portal-active .nova-project-space__actions{
    justify-content: flex-end;
  }
}

/* Mobile: Project Space should not spill off-screen */
@media (max-width: 720px){
  body.nova-billing-portal-active .nova-project-space__card{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.nova-billing-portal-active .nova-project-space__summary{
    padding: 12px !important;
  }
  body.nova-billing-portal-active .nova-project-space__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.nova-billing-portal-active .nova-project-space__top-right{
    width: 100%;
    align-items: flex-start;
  }
  body.nova-billing-portal-active .nova-project-space__actions{
    width: 100%;
  }
}

/* Dashboard (mobile): 2-column project cards like reference */
body.nova-billing-portal-active .nova-mob-projects{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}



/* --------------------------------------------------------------------------
   Client Dashboard (portal) — modular blocks
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active .nova-client-dashboard{
  display: grid;
  gap: var(--nova-space-4);
}

@media (min-width: 980px){
  body.nova-billing-portal-active .nova-client-dashboard{
    /* Desktop dashboard is intentionally minimal — the top banner already contains
       greeting + balance + next payment, so we avoid duplicative dashboard cards. */
    grid-template-columns: 1fr;
    grid-template-areas:
      "projects";
    align-items: start;
  }
  body.nova-billing-portal-active .nova-dash__projects{ grid-area: projects; }
}

body.nova-billing-portal-active .nova-dash__header-inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nova-space-4);
}

body.nova-billing-portal-active .nova-dash__hi{
  margin: 0 0 var(--nova-space-2);
  font-size: 20px;
  letter-spacing: -.02em;
}

body.nova-billing-portal-active .nova-dash__welcome{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  color: rgba(15,23,42,.72);
  font-size: 13px;
}

body.nova-billing-portal-active .nova-dash__company{
  font-weight: 600;
  color: rgba(15,23,42,.86);
}
body.nova-billing-portal-active .nova-dash__tagline{
  color: rgba(15,23,42,.70);
}

/* Projects grid */
body.nova-billing-portal-active .nova-dash-projects__grid{
  display: grid;
  gap: var(--nova-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px){
  body.nova-billing-portal-active .nova-dash-projects__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  body.nova-billing-portal-active .nova-dash-projects__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.nova-billing-portal-active .nova-dash-project{
  display: block;
  text-decoration: none;
  border: 1px solid var(--nova-border-soft);
  border-radius: var(--nova-radius-2);
  padding: var(--nova-space-3);
  background: var(--nova-surface);
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color: inherit;
}

body.nova-billing-portal-active .nova-dash-project:hover{
  border-color: var(--nova-border-med);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

body.nova-billing-portal-active .nova-dash-project__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nova-space-2);
}

body.nova-billing-portal-active .nova-dash-project__title{
  font-weight: 650;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

body.nova-billing-portal-active .nova-dash-project__badge{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.76);
  white-space: nowrap;
}

body.nova-billing-portal-active .nova-dash-project__badge.is-overdue{
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color: rgba(185,28,28,.9);
}

body.nova-billing-portal-active .nova-dash-project__meta{
  margin-top: var(--nova-space-2);
  font-size: 12px;
  color: rgba(15,23,42,.66);
}

/* Money block */
body.nova-billing-portal-active .nova-dash-money__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nova-space-4);
}

body.nova-billing-portal-active .nova-dash-money__label{
  font-size: 12px;
  color: rgba(15,23,42,.60);
  margin-bottom: 6px;
}

body.nova-billing-portal-active .nova-dash-money__amount{
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

body.nova-billing-portal-active .nova-dash-money__meta{
  font-size: 12px;
  color: rgba(15,23,42,.70);
}

body.nova-billing-portal-active .nova-dash-money__ok{
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Messages */
body.nova-billing-portal-active .nova-dash-msg__item{
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.72);
  border-radius: var(--nova-radius-2);
  padding: var(--nova-space-3);
}

body.nova-billing-portal-active .nova-dash-msg__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  margin-bottom: 8px;
}

body.nova-billing-portal-active .nova-dash-msg__preview{
  font-size: 13px;
  color: rgba(15,23,42,.82);
  line-height: 1.35;
}

body.nova-billing-portal-active .nova-dash-msg__actions{
  display: flex;
  gap: var(--nova-space-2);
  margin-top: var(--nova-space-3);
  flex-wrap: wrap;
}

body.nova-billing-portal-active .nova-dash-msg__empty-title{
  font-weight: 650;
  color: rgba(15,23,42,.82);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Project Space: Desktop reference layout surface (Files + Contracts + Messages)
   -------------------------------------------------------------------------- */

body.nova-billing-portal-active .nova-project-space__surface{
  background: var(--nova-surface);
  border: 1px solid var(--nova-border-soft);
  border-radius: var(--nova-radius-3);
  box-shadow: var(--nova-shadow-1);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Project Space: Mobile stacked sections
   - On mobile, hide the desktop surface header and show per-section headings
   - Avoid nested scroll areas (messages)
   - Keep actions discoverable (Upload Contract lives under Contracts)
   -------------------------------------------------------------------------- */

body.nova-billing-portal-active .nova-ps-section-heading{
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--nova-space-4);
}

body.nova-billing-portal-active .nova-ps-section-heading__title{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(15,23,42,.86);
  letter-spacing: .01em;
}

body.nova-billing-portal-active .nova-ps-contract-upload-mobile{ display: none; }

body.nova-billing-portal-active .nova-project-space__surface-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--nova-space-4) var(--nova-space-5);
  border-bottom: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.72);
}

body.nova-billing-portal-active .nova-project-space__surface-head .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{
  border-bottom: 0;
}

body.nova-billing-portal-active .nova-project-space__surface-tabs{
  display: flex;
  gap: var(--nova-space-5);
  align-items: center;
}

body.nova-billing-portal-active .nova-project-space__surface-messages-title{
  display: flex;
  align-items: center;
  gap: var(--nova-space-2);
  font-weight: 700;
  color: rgba(15,23,42,.86);
}

body.nova-billing-portal-active .nova-project-space__surface-more{
  border: 0;
  background: transparent;
  color: rgba(15,23,42,.45);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
body.nova-billing-portal-active .nova-project-space__surface-more:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.70);
}

body.nova-billing-portal-active .nova-project-space__surface-body{
  display: grid;
  /* Give messages a little more breathing room while keeping files dominant */
  grid-template-columns: 1.15fr .85fr 1fr;
  gap: 0;
  min-height: 520px;
}

/* Allow grid children to shrink without forcing horizontal overflow */
body.nova-billing-portal-active .nova-project-space__surface,
body.nova-billing-portal-active .nova-project-space__surface-body,
body.nova-billing-portal-active .nova-project-space__col{
  min-width: 0;
}

body.nova-billing-portal-active .nova-project-space__col{
  padding: var(--nova-space-5);
}

body.nova-billing-portal-active .nova-project-space__col--contracts,
body.nova-billing-portal-active .nova-project-space__col--messages{
  border-left: 1px solid var(--nova-border-soft);
}

/* Contract upload lives inside the Contracts tab now (desktop + mobile) */
body.nova-billing-portal-active .nova-ps-contracts__upload{
  margin-bottom: var(--nova-space-4);
}
body.nova-billing-portal-active .nova-ps-contracts__upload .nova-ps-upload-contract{
  width: 100%;
}
body.nova-billing-portal-active .nova-ps-contracts__upload .nova-ps-upload-contract__btn{
  width: 100%;
  justify-content: space-between;
}

/* Stack columns on smaller screens — mobile refinement comes next pass */
@media (max-width: 980px){
  body.nova-billing-portal-active .nova-project-space__surface-body{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Stacked sections: the desktop header is confusing on mobile */
  body.nova-billing-portal-active .nova-project-space__surface-head{
    display: none;
  }

  /* Show per-section headings */
  body.nova-billing-portal-active .nova-ps-section-heading{
    display: flex;
  }

  /* Slightly tighter padding on mobile */
  body.nova-billing-portal-active .nova-project-space__col{
    padding: var(--nova-space-4);
  }

  body.nova-billing-portal-active .nova-project-space__col--contracts,
  body.nova-billing-portal-active .nova-project-space__col--messages{
    border-left: 0;
    border-top: 1px solid var(--nova-border-soft);
  }

  /* Uploader is already inside the Contracts tab; no footer on mobile */

  /* Avoid nested scroll areas on mobile */
  body.nova-billing-portal-active .nova-ps-msg-list{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  /* Make primary actions easy to tap */
  body.nova-billing-portal-active .nova-ps-upload__btn{
    width: 100%;
    justify-content: flex-start;
  }
  body.nova-billing-portal-active .nova-ps-upload-contract__btn{
    width: 100%;
    justify-content: space-between;
  }
}

/* Truncation + wrap safety (prevents horizontal spill) */
body.nova-billing-portal-active .nova-ps-file-row{ min-width: 0; }
body.nova-billing-portal-active .nova-ps-file-name,
body.nova-billing-portal-active .nova-ps-contract-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.nova-billing-portal-active .nova-ps-msg-item__body{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Files column */
body.nova-billing-portal-active .nova-ps-upload{
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  margin-bottom: var(--nova-space-4);
}

body.nova-billing-portal-active .nova-ps-upload__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--nova-radius-2);
  border: 1px solid rgba(59,130,246,.30);
  background: rgba(59,130,246,.12);
  color: rgba(15,23,42,.86);
  font-weight: 700;
  cursor: pointer;
}

body.nova-billing-portal-active .nova-ps-upload__btn:hover{
  background: rgba(59,130,246,.16);
}

body.nova-billing-portal-active .nova-ps-upload__input{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

body.nova-billing-portal-active .nova-ps-file-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-3);
}

body.nova-billing-portal-active .nova-ps-file-row{
  display: flex;
  align-items: center;
  gap: var(--nova-space-3);
  padding: var(--nova-space-4);
  border-radius: var(--nova-radius-2);
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.74);
  text-decoration: none;
  color: inherit;
}

body.nova-billing-portal-active .nova-ps-file-row:hover{
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

body.nova-billing-portal-active .nova-ps-file-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(15,23,42,.86);
  background: rgba(15,23,42,.06);
  flex: 0 0 auto;
}

body.nova-billing-portal-active .nova-ps-file-icon.is-pdf{ background: rgba(239,68,68,.16); }
body.nova-billing-portal-active .nova-ps-file-icon.is-zip{ background: rgba(59,130,246,.16); }
body.nova-billing-portal-active .nova-ps-file-icon.is-doc{ background: rgba(99,102,241,.16); }
body.nova-billing-portal-active .nova-ps-file-icon.is-img{ background: rgba(16,185,129,.14); }

body.nova-billing-portal-active .nova-ps-file-main{ min-width: 0; flex: 1 1 auto; }
body.nova-billing-portal-active .nova-ps-file-name{ font-weight: 700; color: rgba(15,23,42,.90); line-height: 1.15; }
body.nova-billing-portal-active .nova-ps-file-meta{ font-size: 12px; color: rgba(15,23,42,.56); margin-top: 4px; }

body.nova-billing-portal-active .nova-ps-file-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
body.nova-billing-portal-active .nova-ps-file-size{ font-size: 12px; font-weight: 700; color: rgba(15,23,42,.70); }
body.nova-billing-portal-active .nova-ps-file-chev{ color: rgba(15,23,42,.40); font-size: 18px; }

/* Contracts column */
body.nova-billing-portal-active .nova-ps-contract-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-3);
}

body.nova-billing-portal-active .nova-ps-contract-card{
  display: flex;
  justify-content: space-between;
  gap: var(--nova-space-3);
  padding: var(--nova-space-4);
  border-radius: var(--nova-radius-2);
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.74);
  text-decoration: none;
  color: inherit;
}

body.nova-billing-portal-active .nova-ps-contract-title{ font-weight: 750; color: rgba(15,23,42,.90); }
body.nova-billing-portal-active .nova-ps-contract-meta{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.56); }

body.nova-billing-portal-active .nova-ps-contract-right{
  display: flex;
  align-items: center;
  gap: 10px;
}
body.nova-billing-portal-active .nova-ps-contract-badge{
  background: rgba(16,185,129,.16);
  color: rgba(16,185,129,.96);
  border: 1px solid rgba(16,185,129,.28);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

body.nova-billing-portal-active .nova-ps-upload-contract__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--nova-radius-2);
  /* Make the Contract uploader discoverable even without hover */
  border: 1px solid rgba(99,102,241,.22);
  background: linear-gradient(90deg, rgba(99,102,241,.10), rgba(168,85,247,.08));
  font-weight: 750;
  color: rgba(15,23,42,.92);
  cursor: pointer;
}
body.nova-billing-portal-active .nova-ps-upload-contract__btn:hover{ box-shadow: 0 10px 22px rgba(2,6,23,.08); }
body.nova-billing-portal-active .nova-ps-upload-contract__chev{ color: rgba(15,23,42,.45); font-size: 18px; }

/* Billing overview cards: keep progress visible (clients need status). */
body.nova-billing-portal-active .nova-mob-card__progress{ display: block; }

/* Messages column */
body.nova-billing-portal-active .nova-ps-msg-search__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--nova-radius-2);
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.86);
}

body.nova-billing-portal-active .nova-ps-msg-list{
  margin-top: var(--nova-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--nova-space-3);
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

body.nova-billing-portal-active .nova-ps-msg-item{
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.74);
  border-radius: var(--nova-radius-2);
  padding: var(--nova-space-4);
}

body.nova-billing-portal-active .nova-ps-msg-item__top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
body.nova-billing-portal-active .nova-ps-msg-item__name{ font-weight: 800; color: rgba(15,23,42,.88); }
body.nova-billing-portal-active .nova-ps-msg-item__time{ font-size: 12px; color: rgba(15,23,42,.52); margin-top: 2px; }
body.nova-billing-portal-active .nova-ps-msg-item__body{ font-size: 13px; color: rgba(15,23,42,.82); line-height: 1.4; }

body.nova-billing-portal-active .nova-ps-msg-compose{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--nova-space-4);
  padding: var(--nova-space-3);
  border-radius: var(--nova-radius-2);
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.86);
}

body.nova-billing-portal-active .nova-ps-msg-compose__input{
  flex: 1 1 auto;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  min-height: 22px;
  font-size: 13px;
  color: rgba(15,23,42,.86);
}

body.nova-billing-portal-active .nova-ps-msg-compose__send{
  border: 0;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(59,130,246,.28);
  color: rgba(59,130,246,.92);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

body.nova-billing-portal-active .nova-ps-empty{
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: var(--nova-radius-2);
  padding: var(--nova-space-4);
  background: rgba(255,255,255,.58);
}
body.nova-billing-portal-active .nova-ps-empty__title{ font-weight: 800; color: rgba(15,23,42,.84); margin-bottom: 6px; }
body.nova-billing-portal-active .nova-ps-empty__sub{ font-size: 13px; color: rgba(15,23,42,.58); }

/* --------------------------------------------------------------------------
   Dashboard: Client Files horizontal cards + scroller
   -------------------------------------------------------------------------- */
.nova-files{ margin-top: 18px; }
.nova-files__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.nova-files__title{ margin:0; font-size: 16px; }
.nova-files__subtitle{ margin: 6px 0 0; font-size: 12px; opacity: .8; }

.nova-files__controls{ display:flex; align-items:center; gap: 10px; }
.nova-files__pillgroup{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
}
.nova-pill{
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.nova-pill.is-active{
  background: rgba(109,92,255,.14);
  border-color: rgba(109,92,255,.28);
}
.nova-iconbtn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  cursor: pointer;
  line-height: 1;
}

.nova-files__scrollerWrap{ position:relative; }
.nova-files__scroller{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 10px;
  scroll-snap-type: x proximity;
  outline: none;
}
.nova-files__row{ display:flex; gap: 14px; min-height: 148px; }

.nova-files__fade{
  position:absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events:none;
  z-index: 2;
}
.nova-files__fade--left{
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.nova-files__fade--right{
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

.nova-filecard{
  width: 250px;
  min-width: 250px;
  height: 148px;
  border-radius: var(--nova-radius-3, 18px);
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.02));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  padding: 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  scroll-snap-align: start;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.nova-filecard:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.16);
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
}
.nova-filecard:focus-within{ border-color: rgba(109,92,255,.45); }

.nova-filecard__top{ display:flex; gap: 12px; align-items:flex-start; }
.nova-filecard__thumb{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.nova-filecard__icon{ font-size: 18px; }
.nova-filecard__meta{ min-width: 0; }
.nova-filecard__name{
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nova-filecard__sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: .82;
  display:flex;
  gap: 6px;
  align-items:center;
}
.nova-filecard__dot{ opacity: .6; }

.nova-filecard__actions{ display:flex; gap: 10px; justify-content:flex-end; }
.nova-btn{
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  border: 1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nova-btn--ghost{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
}
.nova-btn--primary{
  background: rgba(109,92,255,.95);
  border-color: rgba(109,92,255,.95);
  color: #fff;
}

.nova-filecard--loadmore{
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(180deg, rgba(109,92,255,.12), rgba(15,23,42,.02));
}
.nova-filecard__loadicon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(109,92,255,.16);
  border: 1px solid rgba(109,92,255,.30);
  margin-bottom: 10px;
  font-size: 20px;
}
.nova-filecard__loadtitle{ font-weight: 800; }
.nova-filecard__loadsub{ font-size: 12px; opacity: .78; margin-top: 4px; }

/* Dark theme overrides (match the "Black" portal direction) */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__pillgroup,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-iconbtn{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-pill{ color: rgba(226,232,240,.72); }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-pill.is-active{ color: rgba(226,232,240,.96); }

body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__fade--left{
  background: linear-gradient(to right, rgba(11,15,20,1), rgba(11,15,20,0));
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__fade--right{
  background: linear-gradient(to left, rgba(11,15,20,1), rgba(11,15,20,0));
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-filecard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-filecard:hover{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-filecard__thumb{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-btn--ghost{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: rgba(226,232,240,.96);
}

body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__scroller::-webkit-scrollbar{ height: 10px; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__scroller::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
body.nova-billing-portal-active.nova-portal-theme-dark .nova-files__scroller::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }


/* --------------------------------------------------------------------------
   NovaOS Dark Tokens (centralized)
   - Scoped ONLY to dark wrappers
   - Supports both scope patterns:
     1) body.nova-portal-theme-dark / body.nova-theme--dark
     2) html[data-theme="dark"] body.nova-billing-portal-active
   -------------------------------------------------------------------------- */

/* Dark wrapper selector (single source of truth) */
body.nova-billing-portal-active.nova-portal-theme-dark,
body.nova-billing-portal-active.nova-theme--dark,
html[data-theme="dark"] body.nova-billing-portal-active{
  /* Surface hierarchy */
  --bg-0: #070A12;
  --bg-1: #0B1220;
  --bg-2: #0F1B2D;

  --card-1: #0E1A2B;
  --card-2: #12233A;
  --card-3: #152C47;

  --border-1: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.52);

  --accent: #4F46E5;
  --accent-2: #A855F7;
  --accent-hover: #5B54F0;
  --accent-press: #4338CA;

  --shadow-1: 0 12px 30px rgba(0,0,0,.45);
  --shadow-2: 0 18px 40px rgba(0,0,0,.55);

  --glow-1: 0 0 0 1px rgba(79,70,229,.18), 0 0 24px rgba(168,85,247,.12);
  --glow-2: 0 0 0 1px rgba(79,70,229,.28), 0 0 32px rgba(168,85,247,.18);

  --hover-veil: rgba(255,255,255,.04);
  --selected-veil: rgba(79,70,229,.12);
  --focus-ring: 0 0 0 3px rgba(79,70,229,.35);

  /* Map legacy vars used elsewhere so we don't need to rewrite every selector */
  --nova-border-soft: var(--border-1);
  --nova-border-med: var(--border-2);
  --nova-surface: var(--card-1);
  --nova-surface-2: var(--card-2);
  --nova-shadow-1: var(--shadow-1);
  --nova-shadow-2: var(--shadow-2);

  background: var(--bg-0) !important;
  color: var(--text-1) !important;
}

/* Page canvas + remove "white slab" */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal,
body.nova-billing-portal-active.nova-theme--dark .nova-portal,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal{
  background: transparent !important;
  color: var(--text-1) !important;
}

/* The main shell/canvas that used to be #fff/#f5f5f5 */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__shell,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__shell,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__shell{
  background: var(--bg-1) !important;
  border-color: var(--border-1) !important;
}

/* Greeting/topbar must be DARK on all pages */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__topbar,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__topbar,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__topbar{
  background: var(--bg-2) !important;
  border-color: var(--border-1) !important;
  box-shadow: var(--shadow-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__greeting h1,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__greeting h1,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__greeting h1{
  color: var(--text-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__greeting p,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__greeting p,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__greeting p{
  color: var(--text-2) !important;
}

/* Global typography conversion (avoid dark text leaks) */
body.nova-billing-portal-active.nova-portal-theme-dark,
body.nova-billing-portal-active.nova-portal-theme-dark p,
body.nova-billing-portal-active.nova-portal-theme-dark span,
body.nova-billing-portal-active.nova-portal-theme-dark label,
body.nova-billing-portal-active.nova-portal-theme-dark h1,
body.nova-billing-portal-active.nova-portal-theme-dark h2,
body.nova-billing-portal-active.nova-portal-theme-dark h3,
body.nova-billing-portal-active.nova-portal-theme-dark h4,
body.nova-billing-portal-active.nova-portal-theme-dark h5,
body.nova-billing-portal-active.nova-portal-theme-dark h6,
body.nova-billing-portal-active.nova-theme--dark,
body.nova-billing-portal-active.nova-theme--dark p,
body.nova-billing-portal-active.nova-theme--dark span,
body.nova-billing-portal-active.nova-theme--dark label,
body.nova-billing-portal-active.nova-theme--dark h1,
body.nova-billing-portal-active.nova-theme--dark h2,
body.nova-billing-portal-active.nova-theme--dark h3,
body.nova-billing-portal-active.nova-theme--dark h4,
body.nova-billing-portal-active.nova-theme--dark h5,
body.nova-billing-portal-active.nova-theme--dark h6,
html[data-theme="dark"] body.nova-billing-portal-active,
html[data-theme="dark"] body.nova-billing-portal-active p,
html[data-theme="dark"] body.nova-billing-portal-active span,
html[data-theme="dark"] body.nova-billing-portal-active label,
html[data-theme="dark"] body.nova-billing-portal-active h1,
html[data-theme="dark"] body.nova-billing-portal-active h2,
html[data-theme="dark"] body.nova-billing-portal-active h3,
html[data-theme="dark"] body.nova-billing-portal-active h4,
html[data-theme="dark"] body.nova-billing-portal-active h5,
html[data-theme="dark"] body.nova-billing-portal-active h6{
  color: var(--text-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__muted,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__muted,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__muted{
  color: var(--text-2) !important;
  opacity: 1 !important;
}

/* Cards/panels: elevation + glow (global) */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__card,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__project-card,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-dash-inv,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-dash-proj,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-filecard,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__section,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-item,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__card,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__project-card,
body.nova-billing-portal-active.nova-theme--dark .nova-dash-inv,
body.nova-billing-portal-active.nova-theme--dark .nova-dash-proj,
body.nova-billing-portal-active.nova-theme--dark .nova-filecard,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__section,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface,
body.nova-billing-portal-active.nova-theme--dark .nova-ps-msg-item,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__card,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__project-card,
html[data-theme="dark"] body.nova-billing-portal-active .nova-dash-inv,
html[data-theme="dark"] body.nova-billing-portal-active .nova-dash-proj,
html[data-theme="dark"] body.nova-billing-portal-active .nova-filecard,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__section,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface,
html[data-theme="dark"] body.nova-billing-portal-active .nova-ps-msg-item{
  background: var(--card-1) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-1), var(--glow-1) !important;
}

/* Hover/active card lift */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__card:hover,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__project-card:hover,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__card:hover,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__project-card:hover,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__card:hover,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__project-card:hover{
  background: var(--card-2) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-2), var(--glow-2) !important;
  transform: translateY(-1px);
}

/* Force unselected project cards to stay dark */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__project-card:not(.is-selected),
body.nova-billing-portal-active.nova-theme--dark .nova-portal__project-card:not(.is-selected),
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__project-card:not(.is-selected){
  background: var(--card-1) !important;
  color: var(--text-1) !important;
}

/* Selected project card gradient updated to NovaOS accent system */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__project-card.is-selected,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__project-card.is-selected,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__project-card.is-selected{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  box-shadow: var(--shadow-2), var(--glow-2) !important;
}

/* Pills/tags brighter (readable, not washed out) */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__pill,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__project-pill,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__pill,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__project-pill,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__pill,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__project-pill{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-portal__pill--accent,
body.nova-billing-portal-active.nova-theme--dark .nova-portal__pill--accent,
html[data-theme="dark"] body.nova-billing-portal-active .nova-portal__pill--accent{
  background: rgba(79,70,229,.22) !important;
  border-color: rgba(79,70,229,.30) !important;
}

/* Inputs + placeholders */
body.nova-billing-portal-active.nova-portal-theme-dark input,
body.nova-billing-portal-active.nova-portal-theme-dark textarea,
body.nova-billing-portal-active.nova-portal-theme-dark select,
body.nova-billing-portal-active.nova-theme--dark input,
body.nova-billing-portal-active.nova-theme--dark textarea,
body.nova-billing-portal-active.nova-theme--dark select,
html[data-theme="dark"] body.nova-billing-portal-active input,
html[data-theme="dark"] body.nova-billing-portal-active textarea,
html[data-theme="dark"] body.nova-billing-portal-active select{
  color: var(--text-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--border-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark ::placeholder,
body.nova-billing-portal-active.nova-theme--dark ::placeholder,
html[data-theme="dark"] body.nova-billing-portal-active ::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* Messages padding + bubble breathing room */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-list,
body.nova-billing-portal-active.nova-theme--dark .nova-ps-msg-list,
html[data-theme="dark"] body.nova-billing-portal-active .nova-ps-msg-list{
  padding: 16px 18px !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-item,
body.nova-billing-portal-active.nova-theme--dark .nova-ps-msg-item,
html[data-theme="dark"] body.nova-billing-portal-active .nova-ps-msg-item{
  max-width: 70ch;
  padding: 12px 14px !important;
}
@media (max-width: 820px){
  body.nova-billing-portal-active.nova-portal-theme-dark .nova-ps-msg-item,
  body.nova-billing-portal-active.nova-theme--dark .nova-ps-msg-item,
  html[data-theme="dark"] body.nova-billing-portal-active .nova-ps-msg-item{
    max-width: 85%;
  }
}

/* Progress bars unify to accent */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-dash-inv__bar span,
body.nova-billing-portal-active.nova-portal-theme-dark .nova-dash-proj__bar span,
body.nova-billing-portal-active.nova-theme--dark .nova-dash-inv__bar span,
body.nova-billing-portal-active.nova-theme--dark .nova-dash-proj__bar span,
html[data-theme="dark"] body.nova-billing-portal-active .nova-dash-inv__bar span,
html[data-theme="dark"] body.nova-billing-portal-active .nova-dash-proj__bar span{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  box-shadow: 0 0 14px rgba(79,70,229,.25) !important;
}

/* Tabs/menu bar must not be white in dark mode */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-head,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-head{
  background: var(--bg-2) !important;
  border-bottom-color: var(--border-1) !important;
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-project-space__surface-tabs,
body.nova-billing-portal-active.nova-theme--dark .nova-project-space__surface-tabs,
html[data-theme="dark"] body.nova-billing-portal-active .nova-project-space__surface-tabs{
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Dashboard Notifications layout (client dashboard only)
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active .nova-dashboard-layout{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1023px){
  body.nova-billing-portal-active .nova-dashboard-layout{
    grid-template-columns: 1fr;
  }
  body.nova-billing-portal-active .nova-dashboard-sidebar{
    display: none;
  }
}

body.nova-billing-portal-active .nova-dashboard-sidebar .nova-notifs{
  position: sticky;
  top: 16px;
}
body.nova-billing-portal-active .nova-notifs__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.nova-billing-portal-active .nova-notifs--desktop .nova-notifs__list{
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding-right: 6px;
}
body.nova-billing-portal-active .nova-notifs__item{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--nova-border-soft);
  background: rgba(255,255,255,.03);
}
body.nova-billing-portal-active .nova-notifs__item-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
body.nova-billing-portal-active .nova-notifs__item-title{ font-weight: 600; }
body.nova-billing-portal-active .nova-notifs__item-time{ opacity: .75; font-size: 12px; }
body.nova-billing-portal-active .nova-notifs__item-msg{ margin-top: 6px; opacity: .9; }
body.nova-billing-portal-active .nova-notifs__item-link a{ text-decoration: none; font-weight: 600; }

/* Mobile: show top notifications card */
@media (max-width: 1023px){
  body.nova-billing-portal-active .nova-notifs--mobile{ order: -1; }
}

/* Notifications modal */
.nova-notifs-modal[hidden]{ display:none !important; }
.nova-notifs-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.nova-notifs-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.nova-notifs-modal__panel{
  position: relative;
  max-width: 720px;
  width: calc(100% - 24px);
  margin: 72px auto;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
html.nova-modal-open,
html.nova-modal-open body{ overflow: hidden; }

.nova-notifs-modal__head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.nova-notifs-modal__title{ font-weight: 700; }
.nova-notifs-modal__close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.nova-notifs-modal__list{
  padding: 14px 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 220px);
  overflow:auto;
}

/* Dark modal surface when in dark mode */
body.nova-billing-portal-active.nova-portal-theme-dark .nova-notifs-modal__panel,
body.nova-billing-portal-active.nova-theme--dark .nova-notifs-modal__panel,
html[data-theme="dark"] body.nova-billing-portal-active .nova-notifs-modal__panel{
  background: var(--card-3);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-2), var(--glow-2);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-notifs-modal__head,
body.nova-billing-portal-active.nova-theme--dark .nova-notifs-modal__head,
html[data-theme="dark"] body.nova-billing-portal-active .nova-notifs-modal__head{
  border-bottom-color: var(--border-1);
}
body.nova-billing-portal-active.nova-portal-theme-dark .nova-notifs-modal__close,
body.nova-billing-portal-active.nova-theme--dark .nova-notifs-modal__close,
html[data-theme="dark"] body.nova-billing-portal-active .nova-notifs-modal__close{
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   NovaOS primary button system (portal-scoped)
   - Applies to BOTH themes
   -------------------------------------------------------------------------- */
body.nova-billing-portal-active .nova-portal__btn--primary,
body.nova-billing-portal-active .nova-dash-inv__btn,
body.nova-billing-portal-active .nova-dash-promo__btn{
  background: linear-gradient(90deg, #4F46E5 0%, #A855F7 100%) !important;
  border: 0 !important;
  color: #fff !important;
}
body.nova-billing-portal-active .nova-portal__btn--primary:hover,
body.nova-billing-portal-active .nova-dash-inv__btn:hover,
body.nova-billing-portal-active .nova-dash-promo__btn:hover{
  filter: brightness(1.05);
}
body.nova-billing-portal-active .nova-portal__btn--primary:active,
body.nova-billing-portal-active .nova-dash-inv__btn:active,
body.nova-billing-portal-active .nova-dash-promo__btn:active{
  filter: brightness(.96);
}

/* Progress bars (portal-wide) */
body.nova-billing-portal-active .nova-dash-inv__bar span,
body.nova-billing-portal-active .nova-dash-proj__bar span{
  background: linear-gradient(90deg, #4F46E5 0%, #A855F7 100%) !important;
}