/* Fix11: control radius */
:root{--nova-control-radius:7px;}
/* Portal-wide design tokens (scoped so theme CSS elsewhere won't bleed in) */
body.nova-billing-portal-active{
  --accent: #6E7BFF;
  --accent-2: #8A5CFF;
  --accent-hover: #7F8BFF;
  --accent-press: #5C69F2;
}

/* Nova Billing – Client Portal (2025)
   Lightweight, theme-safe styles for the shortcode dashboard.
*/

.nova-portal {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Base text color (prevents theme link colors from bleeding into the portal) */
.nova-portal{ color: #0f172a; }


/* Theme-safety: prevent WP themes from forcing link colors (e.g. light pink) */
.nova-portal a{ color: inherit; }
.nova-portal a:hover{ opacity: .92; }

.nova-portal__shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 70vh;
  gap: 18px;
}

.nova-portal__sidebar {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  /* Slightly more bottom padding so the footer isn't glued to the edge */
  padding: 18px 18px 26px;

  /* Allow the footer (logout + account rep) to sit at the bottom,
     matching the empty-space area in the sidebar design. */
  display: flex;
  flex-direction: column;
}

.nova-portal__brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
}

.nova-portal__brand-sub {
  opacity: .75;
  font-size: 12px;
  margin-top: 2px;
}

.nova-portal__nav {
  margin-top: 16px;
  display: grid;
  gap: 6px;

  /* Keep nav items compact even when the sidebar is tall.
     (CSS grid will otherwise stretch row tracks to fill the available height.) */
  align-content: start;
  grid-auto-rows: max-content;

  /* Fill remaining space so the footer can stick to the bottom. */
  flex: 1 1 auto;
}

.nova-portal__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e2e8f0;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}

.nova-portal__nav-item:hover {
  background: rgba(255,255,255,.08);
}

.nova-portal__nav-item.is-active {
  background: rgba(255,255,255,.12);
}

.nova-portal__sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 6px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Logout link in footer: keep it compact and aligned */
.nova-portal__sidebar-footer .nova-portal__link{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  text-decoration: none;
}
.nova-portal__sidebar-footer .nova-portal__link:hover{background: rgba(255,255,255,.08);}

/* Account rep (sidebar footer) */
.nova-portal__rep {
  margin-top: 0;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.nova-portal__rep-title {
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .75;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.nova-portal__rep-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-portal__rep-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,.12);
  flex: 0 0 auto;
}

.nova-portal__rep-avatar--placeholder {
  display: inline-block;
}

.nova-portal__rep-name {
  font-weight: 700;
  line-height: 1.15;
}

.nova-portal__rep-meta {
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
}

.nova-portal__link {
  color: #e2e8f0;
  text-decoration: underline;
}

.nova-portal__main {
  display: grid;
  gap: 14px;
}

.nova-portal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nova-portal__hello {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.nova-portal__sub {
  opacity: .85;
}

.nova-portal__banner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}

.nova-portal__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}

.nova-portal__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.nova-portal__card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nova-portal__h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.nova-portal__pill {
  font-size: 12px;
  background: #0ea5e9;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
}

.nova-portal__muted {
  margin: 0;
  opacity: .75;
}

.nova-portal__big {
  font-size: 26px;
  font-weight: 800;
  margin: 10px 0 6px 0;
}

.nova-portal__table-wrap {
  overflow: auto;
}

.nova-portal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.nova-portal__table th,
.nova-portal__table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}

.nova-portal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.nova-portal__btn:hover {
  background: #f8fafc;
}

.nova-portal__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nova-portal__btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.nova-portal__btn--primary:active{ background: var(--accent-press); border-color: var(--accent-press); }

.nova-portal__btn--primary:hover {
  background: #0284c7;
  border-color: #0284c7;
}

.nova-portal__btn--small {
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.nova-portal__drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.nova-portal__drawer.is-open {
  display: block;
}

.nova-portal__drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}

.nova-portal__drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(520px, 94vw);
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,.18);
  display: grid;
  grid-template-rows: auto 1fr;
}

.nova-portal__drawer-h {
  padding: 16px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.nova-portal__drawer-title {
  font-weight: 800;
}

.nova-portal__drawer-sub {
  opacity: .75;
  font-size: 12px;
  margin-top: 2px;
}

.nova-portal__iconbtn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.nova-portal__drawer-body {
  padding: 16px;
  overflow: auto;
}

.nova-portal__drawer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}

.nova-portal__drawer-item-title {
  font-weight: 700;
}

/*
  Mobile behavior
  --------------
  We keep the NovaOS layout intact, but we DO NOT stack the sidebar above the
  content on smaller screens (that looks like the portal sidebar has been
  "moved" to the top).

  Instead, the sidebar becomes an off-canvas drawer controlled by the hamburger
  button in the topbar.
*/
@media (max-width: 720px) {
  /* Prevent mobile horizontal scroll.
     The previous 100vw + negative-margin technique can create overflow
     on some themes/devices due to scrollbar rounding.
     Keep the portal responsive without forcing viewport math.
  */
  .nova-portal{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
  }

  .nova-portal__shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nova-portal__grid {
    grid-template-columns: 1fr;
  }

  /* Off-canvas sidebar */
  .nova-portal__sidebar {
    position: fixed;
    top: 18px;
    left: 18px;
    bottom: 18px;
    width: 280px;
    max-width: calc(100% - 36px);
    z-index: 9999;

    /* Hide by default on mobile and slide in when opened */
    transform: translateX(-120%);
    transition: transform .18s ease;

    /* Make it feel like a panel */
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(15,23,42,.22);
    overflow: auto;
  }

  .nova-portal__sidebar.is-open {
    transform: translateX(0);
  }
}


/* Billing Hub filter tabs (pill segmented) */
.nova-portal__filter-tabs{
  display:flex;
  gap:6px;
  padding:6px;
  margin:14px 0 12px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;
  background:rgba(0,0,0,0.03);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.nova-portal__filter-tab{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:inherit;
  font-weight:700;
  opacity:0.85;
  white-space:nowrap;
}
.nova-portal__filter-tab:hover{ opacity:1; }
.nova-portal__filter-tab.is-active{
  opacity:1;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.nova-portal__filter-tab.is-active:after{ display:none; }
/* Project progress components */
.nova-portal__progress{
  width:100%;
  height:10px;
  background:rgba(0,0,0,0.08);
  border-radius:999px;
  overflow:hidden;
}
.nova-portal__progress-bar{
  height:10px;
  width:0;
  background:currentColor;
}
.nova-portal__progress--sm{
  height:8px;
  margin-top:8px;
}
.nova-portal__progress--sm .nova-portal__progress-bar{
  height:8px;
}
.nova-portal__project-list{
  margin-top:14px;
  display:grid;
  gap:14px;
}
.nova-portal__project{
  padding-top:4px;
}
.nova-portal__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Projects (NovaOS 2026): grid cards + embedded files */
.nova-portal__project-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.nova-portal__project-filters input[type="search"]{
  flex:1;
  min-width:220px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  padding:0 12px;
  background:rgba(255,255,255,.85);
}
.nova-portal__project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.nova-portal__project-card{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  border-radius:22px;
  padding:14px 14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* Highlight the currently open Project Space (selected card) */
.nova-portal__project-card:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 38px rgba(2,6,23,.10);
}

.nova-portal__project-card.is-selected{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.06);
  box-shadow: 0 14px 38px rgba(2,6,23,.10);
}
.nova-portal__project-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.nova-portal__project-avatar{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
}
.nova-portal__project-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.nova-portal__project-titlewrap{flex:1; min-width:0;}
.nova-portal__project-topline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.nova-portal__project-orderno{
  font-size:12px;
  font-weight:700;
  opacity:.7;
}
.nova-portal__project-pill{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(15,23,42,.06);
  white-space:nowrap;
}
.nova-portal__project-pill--paid{ background:rgba(22,163,74,.12); }
.nova-portal__project-pill--overdue{ background:rgba(185,28,28,.12); }
.nova-portal__project-pill--unpaid{ background:rgba(245,158,11,.12); }
.nova-portal__project-pill--proposal{ background:rgba(79,70,229,.12); }
.nova-portal__project-title{font-weight:700; font-size:14px; line-height:1.15;}
.nova-portal__project-due{
  font-size:12px;
  opacity:.75;
  margin-top:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nova-portal__project-amount{
  font-size:18px;
  font-weight:800;
  white-space:nowrap;
  padding-left:8px;
}
.nova-portal__project-status{
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.7);
  white-space:nowrap;
}
.nova-project-status--completed{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.22);} 
.nova-project-status--cancelled{background:rgba(100,116,139,.14);border-color:rgba(100,116,139,.22);} 
.nova-project-status--paused{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.28);} 
.nova-project-status--review{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.22);} 

.nova-portal__project-progress{
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  overflow:hidden;
  margin:10px 0 8px;
}
.nova-portal__project-progress-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(99,102,241,1), rgba(168,85,247,1));
  box-shadow:0 0 18px rgba(99,102,241,.35);
}
.nova-portal__project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;}
.nova-portal__project-percent{font-weight:700;}
.nova-portal__project-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}

/* Project Space (Projects -> Open) */
.nova-project-space{scroll-margin-top:84px;}
.nova-project-space__summary{padding:14px 14px 6px;border:1px solid rgba(0,0,0,.05);border-radius:16px;background:rgba(255,255,255,.65);}
.nova-project-space__top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;}
.nova-project-space__kicker{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.nova-project-space__orderno{font-weight:800;}
.nova-project-space__title{font-size:18px;font-weight:800;line-height:1.2;}
.nova-project-space__due{margin-top:4px;font-size:13px;opacity:.8;}
.nova-project-space__amount{font-size:18px;font-weight:900;white-space:nowrap;}
.nova-project-space__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.nova-project-space__grid{display:grid;gap:14px;margin-top:14px;}
.nova-project-space__h3{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;opacity:.75;}
.nova-project-space__col .nova-portal-section{margin-top:0;}
.nova-project-space__col .nova-portal-section-header{padding-top:0;}
.nova-project-space__col .nova-portal-section-title{display:none;}
.nova-project-space__col .nova-portal-section-intro{display:none;}
.nova-project-space__col .nova-portal-project-select{display:none;}

@media (min-width: 980px){
  .nova-project-space__grid{grid-template-columns:1.2fr .8fr;align-items:start;}
}

/* Generic Progress & File Lists */
.nova-progress {
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  overflow: hidden;
  opacity: .35;
}
.nova-progress__bar {
  height: 100%;
  background: currentColor;
  opacity: .9;
}
.nova-portal__filelist {
  margin: 0;
  padding-left: 18px;
}
.nova-portal__filelist li {
  margin: 4px 0;
}

/* Profile tab */
.nova-portal__profile-card { overflow: hidden; padding: 0; }
.nova-portal__profile-hero {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-color: #111;
  display: flex;
  align-items: flex-end;
}
.nova-portal__profile-hero-inner {
  width: 100%;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 25%);
}
.nova-portal__profile-name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.nova-portal__profile-sub { font-size: .9rem; color: rgba(255,255,255,.85); margin-top: 4px; }
.nova-portal__profile-body { padding: 16px; }
.nova-portal__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px){
  .nova-portal__grid { grid-template-columns: 1fr 1fr; }
}
.nova-portal__field span { display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; opacity:.7; }
.nova-portal__field input { width:100%; }
.nova-portal__profile-actions { margin-top: 14px; }
.nova-portal__profile-actions .nova-portal__btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius: 10px; border:1px solid currentColor; background: transparent; cursor:pointer; }

/* Files tab – spacing + cleaner layout */
.nova-portal-project-select--spaced { margin-top: 14px; }
.nova-portal-upload-row--spaced { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; align-items: flex-end; }
.nova-portal-upload-row--spaced .nova-portal-upload-field,
.nova-portal-upload-row--spaced .nova-portal-doc-type { min-width: 260px; flex: 1 1 260px; }
.nova-portal-upload-row--spaced .nova-portal-upload-button { height: 40px; padding: 0 18px; border-radius: 10px; }

/* Sidebar notification badges */
.nova-portal__nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #e11d48;
  color: #fff;
  border: 1px solid #e11d48;
  opacity: 1;
}

/* Message direction badges */
.nova-message-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
  font-weight: 600;
  vertical-align: middle;
}
.nova-message-badge--admin {
  background: #111;
  color: #fff;
}
.nova-message-badge--client {
  background: rgba(0,0,0,0.08);
  color: #111;
}

/* Message Form Styles */
.nova-portal__message-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  resize: vertical;
  min-height: 110px;
}
.nova-portal__label {
  display: block;
  font-weight: 600;
  margin: 8px 0 6px;
}

/* Message Form Button Visibility */
.nova-portal__message-form .nova-portal__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nova-portal__btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.nova-portal__btn--primary:active{ background: var(--accent-press); border-color: var(--accent-press); }


/* ===== Modern spacing + message bubbles (UI polish) ===== */
.nova-portal{padding:7px; box-sizing:border-box;}

.nova-portal__shell{border-radius:18px; overflow:hidden;}
.nova-portal__card{border-radius:18px;}
.nova-portal__card-title{letter-spacing:-0.01em;}

.nova-portal__table .nova-portal__btn{white-space:nowrap;}
.nova-portal__table .nova-portal__btn--small{padding:6px 10px; border-radius:999px;}
.nova-portal__table td:last-child{white-space:nowrap;}

.nova-portal__message-form{gap:10px;}
.nova-portal__message-form .nova-portal__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nova-portal__btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.nova-portal__btn--primary:active{ background: var(--accent-press); border-color: var(--accent-press); }

/* Timeline / Messages list (moved from inline styles) */
.nova-portal-timeline-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.nova-portal-timeline-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.65);}
.nova-portal-timeline-thumb{flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.06);}
.nova-portal-timeline-content{flex:1 1 auto;min-width:0;}
.nova-portal-timeline-title{font-weight:700;margin:0 0 2px;}
.nova-portal-timeline-meta{font-size:12px;opacity:.75;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}

/* Message bubbles (portal) */
.nova-portal-message{display:flex;flex-direction:column;gap:6px;max-width:100%;}
.nova-portal-message__bubble{max-width:90%;padding:10px 12px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.03);line-height:1.35;}
.nova-portal-message--admin .nova-portal-message__bubble{background:rgba(2,132,199,.10);border-color:rgba(2,132,199,.18);}
.nova-portal-message--client{align-items:flex-end;}
.nova-portal-message--client .nova-portal-message__bubble{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.18);}
.nova-portal-message__meta{font-size:12px;opacity:.75;display:flex;gap:10px;flex-wrap:wrap;}

/* ============================
 * Micro-pass: Typography + Spacing (SaaS, slightly airy)
 * Portal UI-only.
 * ============================ */

.nova-portal{
  --nova-portal-type-title: 14px;
  --nova-portal-type-meta: 12px;
  --nova-portal-pad-card: 18px;
  --nova-portal-gap: 16px;
}

.nova-portal__main{ gap: var(--nova-portal-gap); }
.nova-portal__card{ padding: var(--nova-portal-pad-card); }
.nova-portal__h2{ font-size: var(--nova-portal-type-title); }
.nova-portal__muted,
.nova-portal__sub,
.nova-portal-message__meta{ font-size: var(--nova-portal-type-meta); }

/* Message bubbles: a touch more padding for readability */
.nova-portal-message__bubble{ padding: 11px 13px; line-height: 1.45; }


/* ===== Micropass 3: Inputs + buttons consistency (portal) ===== */
.nova-portal{
  --nova-portal-control-h: 40px;
  --nova-portal-radius: 12px;
  --nova-portal-font: 14px;
}

.nova-portal :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea){
  box-sizing: border-box;
  min-height: var(--nova-portal-control-h);
  border-radius: var(--nova-portal-radius);
  font-size: var(--nova-portal-font);
}

.nova-portal textarea{
  min-height: 110px;
  line-height: 1.35;
}

.nova-portal .nova-portal__btn{
  min-height: var(--nova-portal-control-h);
  border-radius: var(--nova-portal-radius);
  padding: 10px 14px;
}

.nova-portal .nova-portal__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nova-portal__btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.nova-portal__btn--primary:active{ background: var(--accent-press); border-color: var(--accent-press); }



/* File preview + download affordance (Fix16 best-practice patch) */
.nova-portal-timeline-item.nova-portal-file-card{cursor:pointer;}
.nova-portal-timeline-title{display:flex;align-items:center;gap:10px;}
.nova-portal-file-download{margin-left:auto;text-decoration:none;font-size:16px;line-height:1;opacity:.9;}
.nova-portal-file-download:hover{opacity:1;}


/* Pro lock (Free version - client portal) */
.nova-pro-locked,
[data-nova-pro-locked="1"]{
  opacity: .6;
  filter: grayscale(1);
}

.nova-portal__nav-item.nova-pro-locked{
  cursor: pointer;
}

.nova-portal__nav-item.nova-pro-locked:hover{
  opacity: .75;
}

/* Upgrade modal (shared) */
.nova-upgrade-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}
.nova-upgrade-modal.is-open{ display:block; }

.nova-upgrade-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.nova-upgrade-modal__dialog{
  position: relative;
  max-width: 520px;
  margin: 10vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.nova-upgrade-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:transparent;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}

.nova-upgrade-modal__title{
  margin: 0 0 8px;
  font-size: 18px;
}
.nova-upgrade-modal__copy{
  margin: 0 0 14px;
  opacity: .85;
}
.nova-upgrade-modal__actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap;
}


.nova-portal__footer-branding{ text-align:center; opacity:0.75; font-size:12px; padding:12px 0; }

/* ------------------------------------------------------------
   NovaOS Portal v2 (2026)
   Visual upgrade to match NovaOS glass + dashboard styling.
   Safe: no logic changes, purely presentation + layout.
------------------------------------------------------------ */

/* Soft page backdrop inside the portal shell */
.nova-portal__shell{
  grid-template-columns: 1fr;
  gap: 14px;
}

.nova-portal__main{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}

/* Sidebar becomes an off-canvas drawer (hamburger). */
.nova-portal__sidebar{
  position: fixed;
  top: 12px;
  left: 12px;
  bottom: 12px;
  width: 280px;
  max-width: calc(100vw - 24px);
  z-index: 9999;
  transform: translateX(calc(-100% - 24px));
  transition: transform .18s ease;
  background: #0f172a;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.nova-portal__sidebar.is-open{
  transform: translateX(0);
}

.nova-portal__overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}

.nova-portal__overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.nova-portal__topbar{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.nova-portal__topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-portal__topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-portal__menu-btn{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  cursor: pointer;
}

.nova-portal__menu-btn:hover{ filter: brightness(0.98); }

.nova-portal__avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.06);
}

/* Banner: give it a softer, glassy look */
.nova-portal__banner{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}

/* Reduce extra card density on the Invoices pane to match the screenshot */
.nova-portal__grid{
  grid-template-columns: 1fr;
}

.nova-portal__grid .nova-portal__card{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* Hide filter tabs by default for the NovaOS portal look.
   (The data attributes still exist; we can re-enable later.) */
.nova-portal__filter-tabs{ display: none; }

/* Billing table to match NovaOS */
.nova-portal__billing-table{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.80);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  width: 100%;
  table-layout: fixed;
}

/* WooCommerce responsive table overrides (prevents "jumbled" stacked cells on mobile) */
.nova-portal .shop_table_responsive tr td::before{ display: none !important; }
@media (max-width: 720px){
  .nova-portal .shop_table_responsive thead{ display: table-header-group !important; }
  .nova-portal .shop_table_responsive tbody{ display: table-row-group !important; }
  .nova-portal .shop_table_responsive tr{ display: table-row !important; }
  .nova-portal .shop_table_responsive td,
  .nova-portal .shop_table_responsive th{ display: table-cell !important; width: auto !important; }
  .nova-portal__billing-table th,
  .nova-portal__billing-table td{ padding: 12px 10px; }
  .nova-portal__status-pills{ gap: 6px; }
}

.nova-portal__billing-table thead th{
  background: rgba(248,250,252,.95);
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 700;
  color: rgba(15,23,42,.80);
}

.nova-portal__billing-table tbody td{
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.nova-portal__billing-table tbody tr:hover{
  background: rgba(59,130,246,.04);
}

.nova-portal__amount{
  font-weight: 700;
  color: rgba(15,23,42,.85);
}

/* Status pills */
.nova-portal__status-pills{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.nova-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.80);
}

.nova-pill--overdue{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: rgba(120,53,15,.95);
}

.nova-pill--pending{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25);
  color: rgba(30,64,175,.95);
}

.nova-pill--paid{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color: rgba(6,95,70,.95);
}

.nova-pill--proposal{
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.25);
  color: rgba(49,46,129,.95);
}

.nova-portal__due{
  margin-top: 4px;
  font-size: 12px;
  opacity: .80;
}

.nova-portal__due-label{ margin-right: 6px; opacity: .75; }

/* Action buttons: more NovaOS */
.nova-portal__btn{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.92);
}

.nova-portal__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.nova-portal__btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.nova-portal__btn--primary:active{ background: var(--accent-press); border-color: var(--accent-press); }

.nova-portal__btn--primary:hover{ filter: brightness(0.98); }

/* Upsell bar */
.nova-portal__upsell{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.nova-portal__upsell-text{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(15,23,42,.82);
}

.nova-portal__upsell-icon{ opacity: .75; }

/* Make the shell comfortably responsive */
@media (max-width: 840px){
  .nova-portal__main{ padding: 12px; }
  .nova-portal__topbar{ flex-wrap: wrap; }
}


/* ------------------------------------------------------------
   FIX7: Restore persistent sidebar on desktop
   - Keep off-canvas sidebar behavior for small screens
   - Show sidebar inline on wider viewports (matches NovaOS mock)
   ------------------------------------------------------------ */
@media (min-width: 901px){
  /* Sidebar should participate in the grid layout */
  .nova-portal__sidebar{
    position: sticky;
    top: 12px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 2;
    transform: none !important;
    transition: none;
    background: #0f172a;
    box-shadow: none;
  }

  /* Overlay is only for mobile drawer behavior */
  .nova-portal__overlay{ display: none !important; }
}

/* Mobile: keep the drawer-style sidebar, but only on smaller screens */
@media (max-width: 720px){
  .nova-portal__sidebar{
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    transform: translateX(calc(-100% - 24px));
    transition: transform .18s ease;
    background: #0f172a;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
}

/* ------------------------------------------------------------
   FIX9: Sidebar must stay as a LEFT PANEL on typical desktops
   - Restore 2-column grid so sidebar does NOT stack above content.
   - Use a smaller breakpoint so common browser widths keep the left panel.
   ------------------------------------------------------------ */

@media (min-width: 640px) {
  /* Restore the split layout */
  .nova-portal__shell{
    grid-template-columns: 260px 1fr !important;
    align-items: start;
  }

  /* Sidebar participates in layout */
  .nova-portal__sidebar{
    position: sticky !important;
    top: 12px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 2;
    transform: none !important;
  }

  /* Overlay/drawer is mobile-only */
  .nova-portal__overlay{
    display: none !important;
  }
}

@media (max-width: 639px) {
  /* Mobile: allow single column, with optional drawer sidebar */
  .nova-portal__shell{
    grid-template-columns: 1fr !important;
  }

  .nova-portal__sidebar{
    position: fixed !important;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    transform: translateX(calc(-100% - 24px)) !important;
    transition: transform .18s ease;
  }

  .nova-portal__sidebar.is-open{
    transform: translateX(0) !important;
  }

  .nova-portal__overlay{
    display: block !important;
  }
}

/* ------------------------------------------------------------
   FIX9: Sidebar must stay as a LEFT PANEL on typical desktops
   - Restore 2-column grid so sidebar does NOT stack above content.
   - Use a smaller breakpoint so common browser widths keep the left panel.
   ------------------------------------------------------------ */

@media (min-width: 640px) {
  /* Restore the desktop shell layout */
  .nova-portal__shell{
    grid-template-columns: 260px 1fr !important;
    align-items: start;
  }

  /* Sidebar participates in the grid */
  .nova-portal__sidebar{
    position: sticky !important;
    top: 12px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 2;
    transform: none !important;
    transition: none;
  }

  /* Overlay only needed for drawer behavior */
  .nova-portal__overlay{ display: none !important; }
}

@media (max-width: 639px) {
  /* Mobile: single column + optional drawer */
  .nova-portal__shell{ grid-template-columns: 1fr !important; }

  .nova-portal__sidebar{
    position: fixed !important;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    transform: translateX(calc(-100% - 24px));
    transition: transform .18s ease;
  }

  .nova-portal__sidebar.is-open{ transform: translateX(0); }

  .nova-portal__overlay{
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 9998;
  }
  .nova-portal__overlay.is-visible{
    opacity: 1;
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------
   FIX9: Sidebar must stay as a LEFT PANEL on typical desktops
   - Restore 2-column grid so sidebar does NOT stack above content.
   - Use a smaller breakpoint so common browser widths keep the left panel.
   ------------------------------------------------------------ */

@media (min-width: 640px) {
  .nova-portal__shell{
    grid-template-columns: 260px 1fr !important;
    align-items: start;
  }

  .nova-portal__sidebar{
    position: sticky !important;
    top: 12px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 2;
    transform: none !important;
    transition: none;
    background: #0f172a;
    box-shadow: none;
  }

  .nova-portal__overlay{ display: none !important; }
}

@media (max-width: 639px) {
  .nova-portal__shell{ grid-template-columns: 1fr !important; }

  .nova-portal__sidebar{
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    transform: translateX(calc(-100% - 24px));
    transition: transform .18s ease;
    background: #0f172a;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }

  .nova-portal__sidebar.is-open{ transform: translateX(0); }
}

/* ------------------------------------------------------------
   NovaOS Portal Skin (Glass)
   Applies to the standalone portal page and any Woo account surface.
   ------------------------------------------------------------ */

body.nova-billing-portal-active.nova-portal-theme-light{

  background: radial-gradient(1200px 600px at 20% 0%, rgba(120,120,255,.25), rgba(255,255,255,0)) ,
              radial-gradient(900px 500px at 80% 20%, rgba(120,220,255,.18), rgba(255,255,255,0)),
              linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
  overflow-x: hidden;
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal{
  /* Full-width portal on desktop AND mobile, even inside theme containers */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 28px 0;
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__shell{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 20px;
  gap: 18px;
  border-radius: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__sidebar{
  background: rgba(255,255,255,.56) !important;
  color: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(15,23,42,.08) !important;
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__nav-item{
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.85);
  border: 1px solid rgba(15,23,42,.06);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__nav-item:hover{
  background: rgba(255,255,255,.72);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__nav-item.is-active{
  background: linear-gradient(180deg, rgba(76,124,240,.18), rgba(107,108,242,.10));
  border-color: rgba(76,124,240,.25);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__link,
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__sidebar-footer .nova-portal__link{
  color: rgba(15,23,42,.88) !important;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.06);
  text-decoration: none;
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__sidebar-footer{
  border-top: 1px solid rgba(15,23,42,.08);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__rep{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__card,
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__banner{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
}
body.nova-billing-portal-active.nova-portal-theme-light .nova-portal__pill{
  background: linear-gradient(180deg, rgba(76,124,240,1), rgba(107,108,242,1));
}

@media (prefers-color-scheme: light){
NovaOS Portal Skin (Glass)
   Applies to the standalone portal page and any Woo account surface.
   ------------------------------------------------------------ */

body.nova-billing-portal-active.nova-portal-theme-auto{

  background: radial-gradient(1200px 600px at 20% 0%, rgba(120,120,255,.25), rgba(255,255,255,0)) ,
              radial-gradient(900px 500px at 80% 20%, rgba(120,220,255,.18), rgba(255,255,255,0)),
              linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
  overflow-x: hidden;
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal{
  /* Full-width portal on desktop AND mobile, even inside theme containers */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 28px 0;
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__shell{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 20px;
  gap: 18px;
  border-radius: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__sidebar{
  background: rgba(255,255,255,.56) !important;
  color: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 60px rgba(15,23,42,.08) !important;
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__nav-item{
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.85);
  border: 1px solid rgba(15,23,42,.06);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__nav-item:hover{
  background: rgba(255,255,255,.72);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__nav-item.is-active{
  background: linear-gradient(180deg, rgba(76,124,240,.18), rgba(107,108,242,.10));
  border-color: rgba(76,124,240,.25);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__link,
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__sidebar-footer .nova-portal__link{
  color: rgba(15,23,42,.88) !important;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.06);
  text-decoration: none;
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__sidebar-footer{
  border-top: 1px solid rgba(15,23,42,.08);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__rep{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__card,
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__banner{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
}
body.nova-billing-portal-active.nova-portal-theme-auto .nova-portal__pill{
  background: linear-gradient(180deg, rgba(76,124,240,1), rgba(107,108,242,1));
}
}


/* ------------------------------------------------------------
   FIX9: Sidebar must stay as a LEFT PANEL on typical desktops
   - Restore 2-column grid so sidebar does NOT stack above content.
   - Use a smaller breakpoint so common browser widths keep the left panel.
   ------------------------------------------------------------ */

@media (min-width: 640px) {
  .nova-portal__shell{
    grid-template-columns: 260px 1fr !important;
    align-items: start;
  }

  .nova-portal__sidebar{
    position: sticky !important;
    top: 12px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 2;
    transform: none !important;
    transition: none;
    background: #0f172a;
    box-shadow: none;
  }

  /* Overlay only used for drawer-style mobile */
  .nova-portal__overlay{ display: none !important; }
}

@media (max-width: 639px) {
  .nova-portal__shell{ grid-template-columns: 1fr !important; }

  /* Drawer behavior on small screens */
  .nova-portal__sidebar{
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: 280px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    transform: translateX(calc(-100% - 24px));
    transition: transform .18s ease;
    background: #0f172a;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }

  .nova-portal__sidebar.is-open{ transform: translateX(0); }
}

/* Fix11 portal controls: 7px corners for fields + buttons */
.nova-portal :is(input,select,textarea,button,.button,a.button){
  border-radius: var(--nova-control-radius) !important;
}



/* ---- NovaOS radius: buttons + fields (7px) ---- */
body.nova-client-portal .button,
body.nova-client-portal button,
body.nova-client-portal input[type="text"],
body.nova-client-portal input[type="email"],
body.nova-client-portal input[type="search"],
body.nova-client-portal input[type="number"],
body.nova-client-portal input[type="password"],
body.nova-client-portal select,
body.nova-client-portal textarea{
  border-radius: 7px !important;
}


/* ---------- Final portal polish: typography + radius + spacing ---------- */
body.nova-client-portal{
  --nova-radius: 7px;
  --nova-radius-lg: 14px;
  --nova-space-1: 8px;
  --nova-space-2: 12px;
  --nova-space-3: 16px;
  --nova-space-4: 24px;
  --nova-space-5: 32px;
  --nova-text: #0f172a;
  --nova-muted: rgba(15,23,42,.62);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body.nova-client-portal .nova-portal-card,
body.nova-client-portal .nova-portal-panel,
body.nova-client-portal .nova-portal-shell{
  border-radius: var(--nova-radius-lg);
}

body.nova-client-portal input,
body.nova-client-portal select,
body.nova-client-portal textarea,
body.nova-client-portal button{
  border-radius: var(--nova-radius) !important;
}

body.nova-client-portal h1{
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
body.nova-client-portal h2{
  font-size: 16px;
  font-weight: 650;
}
body.nova-client-portal .nova-portal-muted{ color: var(--nova-muted); }

body.nova-client-portal .nova-portal-shell{
  padding: var(--nova-space-5);
}


/* ---------- Final portal polish (scoped to .nova-portal) ---------- */
.nova-portal{
  --nova-radius: 7px;
  --nova-radius-lg: 14px;
  --nova-space-1: 8px;
  --nova-space-2: 12px;
  --nova-space-3: 16px;
  --nova-space-4: 24px;
  --nova-space-5: 32px;
  --nova-text: #0f172a;
  --nova-muted: rgba(15,23,42,.62);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.nova-portal input,
.nova-portal select,
.nova-portal textarea,
.nova-portal button,
.nova-portal .button{
  border-radius: var(--nova-radius) !important;
}

.nova-portal__card,
.nova-portal__panel,
.nova-portal__content,
.nova-portal__shell{
  border-radius: var(--nova-radius-lg);
}

.nova-portal h1{ font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.nova-portal h2{ font-size: 16px; font-weight: 650; }
.nova-portal .muted{ color: var(--nova-muted); }
.nova-portal__shell{ padding: var(--nova-space-5); box-sizing:border-box; }

/* ------------------------------------------------------------
 * Mobile portal (NovaOS) – dashboard + bottom navigation
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Full-width mobile layout + reserve space for bottom nav */
  .nova-portal{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
  body .nova-portal__shell { padding: 0 0 74px; }

  /* Hide desktop chrome; mobile has its own header */
  .nova-desktop-only{ display:none !important; }

  /* Hide desktop topbar; mobile uses its own header.
   * Keep the sidebar available as an off-canvas menu.
   */
  .nova-portal__topbar { display:none !important; }

  /* Re-enable the sidebar + overlay on mobile so the hamburger menu works */
  .nova-portal__sidebar { display: block !important; }
  .nova-portal__overlay { display: block !important; }

  /* Mobile top brand header */
  .nova-mob-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 10px 14px 8px;
    position: sticky;
    top: 0;
    z-index: 25;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .nova-mob-top__menu{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.88);
    padding: 0;
  }
  .nova-mob-top__menu svg{ width: 18px; height: 18px; display:block; }
  .nova-mob-top__brand{ flex:1; display:flex; align-items:center; justify-content:flex-start; gap:12px; min-width:0; }

  /* Mobile header logo: one logo only, inside the left rounded box */
  .nova-mob-top__logo-box{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 22px rgba(30,35,90,0.10);
    overflow: hidden;
    flex: 0 0 auto;
  }
  .nova-mob-top__logo-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display:block;
  }

  .nova-mob-top__text{ min-width: 0; }
  .nova-mob-top__name{ font-size: 14px; font-weight: 700; line-height: 1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nova-mob-top__tag{ font-size: 12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nova-mob-top__domain{ font-size: 11px; opacity:.70; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nova-mob-top__avatar{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

  /* Main content should be edge-to-edge */
  .nova-portal__main{ padding: 0 !important; margin: 0 !important; }
  .nova-portal__panes{ padding: 12px 0 96px; }

  /* Bottom navigation */
  .nova-mob-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 10px 12px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,.08);
  }
  .nova-mob-nav__item {
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    padding: 12px 6px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    color: inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 6px;
  }

  .nova-mob-nav__badge{
    position: absolute;
    top: 6px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
  }
  .nova-mob-nav__icon{ display:block; }
  /* Bottom nav icon hardening (some themes reset SVG/paths) */
  .nova-mob-nav__icon svg{ display:block; width:18px; height:18px; }
  .nova-mob-nav__icon svg path{ fill: currentColor !important; }

  .nova-mob-nav__label{ display:block; }
  .nova-mob-nav__item.is-active {
    font-weight: 600;
  }

  /* Dashboard cards */
  .nova-mob-only { display: block; }
  .nova-mob-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 14px;
  }
  .nova-mob-head__brand { display: flex; align-items: center; gap: 12px; }
  .nova-mob-head__logo { width: auto; height: 34px; max-width: 140px; }
  .nova-mob-head__name { font-size: 14px; font-weight: 600; }
  .nova-mob-head__tag { font-size: 12px; opacity: .75; }
  .nova-mob-head__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

  .nova-mob-card {
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 18px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
    margin: 0 0 12px;
  }
  .nova-mob-card--hello { margin-bottom: 12px; }
  .nova-mob-card__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
  .nova-mob-card__sub { font-size: 13px; opacity: .85; }
  .nova-mob-card__k { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
  .nova-mob-card__v { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .nova-mob-card__muted { font-size: 13px; opacity: .75; }
  .nova-mob-card__btn {
    display: inline-flex;
    margin-top: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    text-decoration: none;
    font-size: 13px;
  }

  .nova-mob-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 0;
  }

  .nova-mob-list {
    margin-top: 12px;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
  }
  .nova-mob-list__h {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .nova-mob-list__empty { padding: 14px 16px; opacity: .75; }

  .nova-mob-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .nova-mob-row:first-of-type { border-top: 0; }
  .nova-mob-row__top { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
  .nova-mob-row__muted { font-size: 12px; opacity: .7; }
  .nova-mob-row__amt { font-weight: 700; font-size: 13px; white-space: nowrap; }
  .nova-mob-row__dot { opacity: .4; margin: 0 6px; }

  /* Project cards spacing (Projects tab) */
  .nova-project-card { padding: 16px !important; }
  .nova-project-card .nova-project-card__title { margin-bottom: 8px !important; }
  .nova-project-card .nova-project-card__meta { margin-top: 10px !important; }

  /* Tables: keep true table layout (prevents jumbled stacking + keeps pills visible) */
  table.nova-portal__billing-table thead { display: table-header-group !important; }
  table.nova-portal__billing-table tr { display: table-row !important; }
  table.nova-portal__billing-table td,
  table.nova-portal__billing-table th { display: table-cell !important; border: 0; padding: 12px 10px !important; }

  /* Mobile upsell banner sizing */
  .nova-portal__upsell{ margin: 10px 0 0; padding: 12px 14px; border-radius: 16px; }
  .nova-portal__upsell-text{ font-size: 11px; line-height: 1.2; }
  .nova-portal__upsell .nova-portal__btn{ padding: 9px 10px; font-size: 11px; border-radius: 12px; }
}

.nova-mob-only{display:none;}




/* Upsell bar typography (matches NovaOS sizing) */
.nova-portal__upsell-title{ font-size: 13px; font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
.nova-portal__upsell-sub{ font-size: 12px; opacity: .78; line-height: 1.25; }

@media (max-width: 768px){
  .nova-portal__upsell{ border-radius: 14px; }
  .nova-portal__upsell-title{ font-size: 12px; }
  .nova-portal__upsell-sub{ font-size: 11px; }
  .nova-portal__upsell .nova-portal__btn{ padding: 8px 10px; font-size: 12px; border-radius: 999px; }
}


/* === Billing Cards (server-rendered) ===
   These replace the legacy table layout for both desktop and mobile.
   The table remains in the DOM for safety (no functional regressions),
   but is visually hidden.
*/
/* Hide the table everywhere (cards are the primary UI). */
.nova-portal .nova-portal-table-wrap{ display:none !important; }
.nova-portal .nova-mob-billing-cards{ display:block; }

.nova-portal .nova-mob-billing-cards__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px){
  .nova-portal .nova-mob-billing-cards__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .nova-portal .nova-mob-billing-cards__grid{ grid-template-columns: 1fr; gap: 12px; }
}

.nova-portal a.nova-mob-card{
  display:block;
  text-decoration:none !important;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: #fff;
  color: inherit;
  position: relative;
  overflow:hidden;
  min-height: 120px;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

/* Subtle state tinting */
.nova-portal a.nova-mob-card[data-state="overdue"]{ border-color: rgba(185, 28, 28, .18); }
.nova-portal a.nova-mob-card[data-state="paid"]{ border-color: rgba(22, 163, 74, .18); }

.nova-portal a.nova-mob-card:hover{ transform: translateY(-1px); }
.nova-portal a.nova-mob-card:active{ transform: scale(0.99); }

.nova-portal .nova-mob-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nova-portal .nova-mob-card__date{
  font-size: 12px;
  line-height: 1.2;
  opacity: .7;
  white-space: nowrap;
}

.nova-portal .nova-mob-card__pills{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.nova-portal .nova-mob-pill{
  display:inline-flex;
  align-items:center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 20px;
  background: rgba(15, 23, 42, .06);
  color: inherit;
  white-space: nowrap;
}

.nova-portal .nova-mob-pill--paid{ background: rgba(22, 163, 74, .12); }
.nova-portal .nova-mob-pill--overdue{ background: rgba(185, 28, 28, .12); }
.nova-portal .nova-mob-pill--proposal{ background: rgba(79, 70, 229, .12); }

.nova-portal .nova-mob-card__title{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 12px;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.nova-portal .nova-mob-card__meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.nova-portal .nova-mob-card__due{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.nova-portal .nova-mob-card__due-label{
  font-size: 12px;
  opacity: .7;
}
.nova-portal .nova-mob-card__due-date{
  font-size: 13px;
  line-height: 1.2;
  opacity: .9;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.nova-portal .nova-mob-card__amount{
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.nova-portal .nova-mob-card__progress{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow:hidden;
}
.nova-portal .nova-mob-card__progress span{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(168,85,247,1));
}

/* Tighten on small screens */
@media (max-width: 768px){
  .nova-portal a.nova-mob-card{ border-radius: 16px; padding: 12px 12px 11px; min-height: 112px; }
  .nova-portal .nova-mob-card__title{ font-size: 15px; }
  .nova-portal .nova-mob-card__amount{ font-size: 16px; }
}


/* ============================================================
   Nova Billing Portal - UI polish pass (requested)
   - Projects: 4-up grid on desktop + selected card "stick" label
   - Project Space: spacing + breathing room
   - Mobile: smaller header, fix footer overlap, solid menu items
   - Billing: differentiate invoice/proposal cards
   - Pro upsell: higher-end banner styling
   - Notifications bell: toast history dropdown
   ============================================================ */

/* Projects grid: cap at 4 cards per row on larger desktops */
@media (min-width: 1200px){
  .nova-portal__project-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1199px){
  .nova-portal__project-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px){
  .nova-portal__project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px){
  .nova-portal__project-grid{ grid-template-columns: 1fr; }
}

/* Projects: slightly roomier cards */
.nova-portal__project-card{ position: relative; padding: 18px; }
.nova-portal__project-head{ gap: 14px; }
.nova-portal__project-avatar{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
}
.nova-portal__project-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.nova-portal__project-topline{ gap: 8px; }

/* =============================
   Mobile dashboard presentation (layout-only)
   ============================= */

/* Billing invoice list */
.nova-dash-invoices{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.nova-dash-inv{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(110,120,220,0.14);
  background: rgba(255,255,255,0.78);
}
.nova-dash-inv__main{ flex: 1; min-width: 0; }
.nova-dash-inv__top{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nova-dash-inv__num{ font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nova-dash-inv__amt{ font-weight: 800; font-size: 13px; }
.nova-dash-inv__meta{ display:flex; gap: 10px; font-size: 12px; opacity: .78; margin-top: 2px; }
.nova-dash-inv__status{ font-weight: 700; }
.nova-dash-inv__bar{ height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow:hidden; margin-top: 8px; }
.nova-dash-inv__bar span{ display:block; height: 100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); }
.nova-dash-inv__btn{
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--accent);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
}
.nova-dash-inv__btn:hover{ background: var(--accent-hover); }
.nova-dash-inv__btn:active{ background: var(--accent-press); }

/* Ongoing projects (horizontal cards) */
.nova-dash-projects__rail{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.nova-dash-proj{
  min-width: 260px;
  flex: 0 0 auto;
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(110,120,220,0.14);
  background: rgba(255,255,255,0.78);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
.nova-dash-proj__thumb{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.08);
  overflow:hidden;
  flex: 0 0 auto;
}
.nova-dash-proj__thumb img{ width:100%; height:100%; object-fit: cover; }
.nova-dash-proj__thumb-ph{ display:block; width:100%; height:100%; background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 60%); }
.nova-dash-proj__body{ flex: 1; min-width: 0; }
.nova-dash-proj__title{ font-weight: 800; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-dash-proj__desc{ font-size: 12px; opacity:.78; margin-top: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-dash-proj__progress{ display:flex; align-items:center; gap: 10px; margin-top: 10px; }
.nova-dash-proj__bar{ flex:1; height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow:hidden; }
.nova-dash-proj__bar span{ display:block; height:100%; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); }
.nova-dash-proj__pct{ font-size: 12px; font-weight: 800; }
.nova-dash-proj__pct.is-overdue{ color: #ef4444; }

/* Client files (rows) */
.nova-dash-files{ display: grid; gap: 10px; }
.nova-dash-file{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(110,120,220,0.14);
  background: rgba(255,255,255,0.78);
  text-decoration: none;
  color: inherit;
}
.nova-dash-file__icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nova-dash-file__icon img{ width:100%; height:100%; object-fit: cover; }
.nova-dash-file__ext{ font-size: 10px; font-weight: 800; opacity:.75; }
.nova-dash-file__name{ font-weight: 700; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-dash-file__time{ font-size: 12px; opacity:.70; white-space:nowrap; }

/* Promo banner (purple ombré) */
.nova-dash-promo__card{
  border-radius: 18px;
  padding: 16px 16px;
  background: linear-gradient(135deg, rgba(110, 86, 255, 0.92), rgba(59, 130, 246, 0.72));
  box-shadow: 0 18px 38px rgba(30,35,90,0.16);
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nova-dash-promo__title{ font-weight: 900; font-size: 13px; color: rgba(255,255,255,0.96); }
.nova-dash-promo__desc{ margin-top: 3px; font-size: 12px; color: rgba(255,255,255,0.86); }
.nova-dash-promo__btn{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: rgba(30,35,90,0.92);
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(30,35,90,0.14);
}