/* =========================================================
   NOVA Client Portal — Core Stylesheet
   Dark sidebar / light dashboard SaaS design system
   ========================================================= */

:root{
  --nova-sidebar-w: 264px;
  --nova-sidebar-w-collapsed: 84px;

  --nova-sidebar-bg: #0f1729;
  --nova-sidebar-bg-alt: #131d33;
  --nova-sidebar-text: #94a3b8;
  --nova-sidebar-text-active: #ffffff;
  --nova-sidebar-border: rgba(255,255,255,0.06);

  --nova-blue: #3b5bfd;
  --nova-blue-dark: #2c46e0;
  --nova-blue-light: #eef1ff;
  --nova-indigo: #6366f1;

  --nova-bg: #f5f7fb;
  --nova-card-bg: #ffffff;
  --nova-border: #e7eaf1;
  --nova-text: #1a2133;
  --nova-text-muted: #6b7385;
  --nova-text-faint: #9aa1b1;

  --nova-green: #16a34a;
  --nova-red: #e0293e;
  --nova-amber: #d97706;

  --nova-radius: 16px;
  --nova-radius-sm: 10px;
  --nova-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --nova-shadow-md: 0 4px 12px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.04);
  --nova-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--nova-bg);
  color:var(--nova-text);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

/* ========================= APP SHELL ========================= */
.nova-app{
  display:flex;
  min-height:100vh;
}

/* ========================= SIDEBAR ========================= */
.nova-sidebar{
  width:var(--nova-sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg, var(--nova-sidebar-bg) 0%, var(--nova-sidebar-bg-alt) 100%);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1030;
  transition:transform 0.3s var(--nova-ease), width 0.3s var(--nova-ease);
}

.nova-sidebar-brand{
  padding:26px 24px 22px;
  border-bottom:1px solid var(--nova-sidebar-border);
}
.nova-brand-link{
  display:flex;
  align-items:center;
  gap:12px;
}
.nova-brand-mark{ width:34px; height:34px; flex-shrink:0; }
.nova-brand-mark svg{ width:100%; height:100%; }
.nova-brand-text{
  font-weight:800;
  font-size:18px;
  letter-spacing:0.01em;
  color:#ffffff;
  line-height:1.1;
}
.nova-brand-text span{
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.18em;
  color:#64748b;
  margin-top:3px;
}

.nova-sidebar-nav{
  flex:1;
  overflow-y:auto;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nova-nav-link{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 14px;
  border-radius:10px;
  color:var(--nova-sidebar-text);
  font-size:14px;
  font-weight:500;
  position:relative;
  transition:background 0.2s var(--nova-ease), color 0.2s var(--nova-ease);
}
.nova-nav-link i{
  width:18px;
  text-align:center;
  font-size:15px;
  flex-shrink:0;
  opacity:0.85;
}
.nova-nav-link:hover{
  background:rgba(255,255,255,0.05);
  color:#e2e8f0;
}
.nova-nav-link.active{
  background:linear-gradient(135deg, var(--nova-blue), var(--nova-indigo));
  color:var(--nova-sidebar-text-active);
  box-shadow:0 4px 14px -4px rgba(59,91,253,0.5);
}
.nova-nav-link.active i{ opacity:1; }

.nova-nav-badge{
  margin-left:auto;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.04em;
  background:rgba(255,255,255,0.18);
  color:#ffffff;
  padding:2px 7px;
  border-radius:20px;
}
.nova-nav-link:not(.active) .nova-nav-badge{
  background:rgba(59,91,253,0.18);
  color:#93a4ff;
}

.nova-sidebar-footer{
  padding:16px;
  border-top:1px solid var(--nova-sidebar-border);
}
.nova-plan-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:12px 14px;
}
.nova-plan-icon{
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(135deg, var(--nova-blue), var(--nova-indigo));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:13px;
  flex-shrink:0;
}
.nova-plan-title{ font-size:12.5px; font-weight:600; color:#e2e8f0; }
.nova-plan-sub{ font-size:11px; color:#64748b; }

.nova-sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,14,25,0.6);
  z-index:1025;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s var(--nova-ease);
}

/* ========================= MAIN AREA ========================= */
.nova-main{
  flex:1;
  margin-left:var(--nova-sidebar-w);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  transition:margin-left 0.3s var(--nova-ease);
}

/* ========================= TOPBAR ========================= */
.nova-topbar{
  height:68px;
  flex-shrink:0;
  background:var(--nova-card-bg);
  border-bottom:1px solid var(--nova-border);
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:1010;
}

.nova-sidebar-toggle{
  display:none;
  width:38px; height:38px;
  border-radius:9px;
  border:1px solid var(--nova-border);
  background:#fff;
  color:var(--nova-text-muted);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

.nova-topbar-search{
  flex:1;
  max-width:360px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--nova-bg);
  border:1px solid var(--nova-border);
  border-radius:10px;
  padding:9px 14px;
  color:var(--nova-text-faint);
}
.nova-topbar-search input{
  border:none;
  background:none;
  outline:none;
  font-size:13.5px;
  width:100%;
  color:var(--nova-text);
}
.nova-topbar-search i{ font-size:13px; }

.nova-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.nova-icon-btn{
  position:relative;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--nova-border);
  background:#fff;
  color:var(--nova-text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s var(--nova-ease), border-color 0.2s var(--nova-ease);
}
.nova-icon-btn:hover{ background:var(--nova-bg); border-color:#d8dce6; }
.nova-badge-dot{
  position:absolute;
  top:8px; right:9px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--nova-red);
  border:1.5px solid #fff;
}

.nova-user-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--nova-border);
  background:#fff;
  padding:6px 12px 6px 6px;
  border-radius:10px;
  cursor:pointer;
}
.nova-user-btn:hover{ background:var(--nova-bg); }
.nova-avatar{
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--nova-blue), var(--nova-indigo));
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.nova-user-name{ font-size:13.5px; font-weight:600; color:var(--nova-text); }
.nova-chevron{ font-size:9px; color:var(--nova-text-faint); }
.nova-dropdown{
  border:1px solid var(--nova-border);
  border-radius:12px;
  box-shadow:var(--nova-shadow-md);
  padding:6px;
  min-width:190px;
}
.nova-dropdown .dropdown-item{
  border-radius:8px;
  padding:9px 12px;
  font-size:13.5px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nova-dropdown .dropdown-item i{ width:16px; text-align:center; color:var(--nova-text-faint); }
.nova-dropdown .dropdown-item:hover{ background:var(--nova-bg); }

/* ========================= CONTENT ========================= */
.nova-content{
  flex:1;
  padding:32px;
  max-width:1440px;
  width:100%;
}

.nova-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:28px;
}
.nova-page-head h1{
  font-size:24px;
  font-weight:700;
  color:var(--nova-text);
  margin:0 0 4px;
}
.nova-page-head p{
  color:var(--nova-text-muted);
  font-size:14px;
  margin:0;
}

/* ========================= CARDS ========================= */
.nova-card{
  background:var(--nova-card-bg);
  border:1px solid var(--nova-border);
  border-radius:var(--nova-radius);
  box-shadow:var(--nova-shadow);
  padding:22px;
}

.nova-stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-bottom:24px;
}
.nova-stat-card{
  background:var(--nova-card-bg);
  border:1px solid var(--nova-border);
  border-radius:var(--nova-radius);
  box-shadow:var(--nova-shadow);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.nova-stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nova-stat-icon{
  width:40px; height:40px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.nova-stat-icon.blue{ background:#eaf0ff; color:var(--nova-blue); }
.nova-stat-icon.green{ background:#e8f9ee; color:var(--nova-green); }
.nova-stat-icon.amber{ background:#fef4e6; color:var(--nova-amber); }
.nova-stat-icon.indigo{ background:#eef0ff; color:var(--nova-indigo); }

.nova-stat-trend{
  font-size:12px;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:4px;
}
.nova-stat-trend.up{ background:#e8f9ee; color:var(--nova-green); }
.nova-stat-trend.down{ background:#fdeaec; color:var(--nova-red); }

.nova-stat-value{
  font-size:26px;
  font-weight:800;
  color:var(--nova-text);
  letter-spacing:-0.01em;
}
.nova-stat-label{
  font-size:13px;
  color:var(--nova-text-muted);
  font-weight:500;
}

.nova-panel-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:20px;
  margin-bottom:24px;
}

.nova-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.nova-card-head h2{
  font-size:15.5px;
  font-weight:700;
  color:var(--nova-text);
  margin:0;
}
.nova-card-head .nova-link-btn{
  font-size:12.5px;
  font-weight:600;
  color:var(--nova-blue);
}

.nova-placeholder-chart{
  height:220px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(59,91,253,0.06), transparent),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--nova-border) 40px);
  border:1px dashed var(--nova-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--nova-text-faint);
  font-size:13px;
  gap:8px;
}

.nova-activity-item{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--nova-border);
}
.nova-activity-item:last-child{ border-bottom:none; padding-bottom:0; }
.nova-activity-icon{
  width:32px; height:32px;
  border-radius:9px;
  background:var(--nova-bg);
  color:var(--nova-text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.nova-activity-title{ font-size:13.5px; font-weight:600; color:var(--nova-text); }
.nova-activity-time{ font-size:12px; color:var(--nova-text-faint); margin-top:1px; }

.nova-table-wrap{ overflow-x:auto; }
.nova-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.nova-table th{
  text-align:left;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--nova-text-faint);
  font-weight:700;
  padding:0 14px 12px;
  border-bottom:1px solid var(--nova-border);
}
.nova-table td{
  padding:14px;
  border-bottom:1px solid var(--nova-border);
  color:var(--nova-text);
}
.nova-table tr:last-child td{ border-bottom:none; }

.nova-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
}
.nova-status-pill.new{ background:#eaf0ff; color:var(--nova-blue); }
.nova-status-pill.won{ background:#e8f9ee; color:var(--nova-green); }
.nova-status-pill.pending{ background:#fef4e6; color:var(--nova-amber); }

/* ========================= COMING SOON ========================= */
.nova-coming-soon{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.nova-coming-soon-inner{ max-width:440px; padding:40px 20px; }
.nova-coming-soon-icon{
  width:76px; height:76px;
  border-radius:22px;
  background:linear-gradient(135deg, var(--nova-blue), var(--nova-indigo));
  color:#fff;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 26px;
  box-shadow:0 12px 30px -8px rgba(59,91,253,0.45);
}
.nova-coming-soon h1{
  font-size:22px;
  font-weight:800;
  color:var(--nova-text);
  margin-bottom:10px;
}
.nova-coming-soon p{
  color:var(--nova-text-muted);
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:22px;
}
.nova-coming-soon-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--nova-blue-light);
  color:var(--nova-blue);
  font-size:12.5px;
  font-weight:700;
  padding:8px 16px;
  border-radius:20px;
}

/* ========================= FOOTER ========================= */
.nova-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  border-top:1px solid var(--nova-border);
  color:var(--nova-text-faint);
  font-size:12.5px;
}

/* ========================= LOGIN PAGE ========================= */
.nova-login-page{
  min-height:100vh;
  display:flex;
  background:var(--nova-bg);
}
.nova-login-visual{
  flex:1;
  background:linear-gradient(160deg, var(--nova-sidebar-bg) 0%, #1b2947 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px;
  position:relative;
  overflow:hidden;
}
.nova-login-visual::before{
  content:"";
  position:absolute;
  top:-20%; right:-15%;
  width:500px; height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,91,253,0.25), transparent 70%);
}
.nova-login-visual::after{
  content:"";
  position:absolute;
  bottom:-25%; left:-10%;
  width:450px; height:450px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
}
.nova-login-visual-content{ position:relative; z-index:1; max-width:420px; }
.nova-login-visual h2{
  color:#fff;
  font-size:30px;
  font-weight:800;
  line-height:1.25;
  margin-bottom:16px;
}
.nova-login-visual p{
  color:#94a3b8;
  font-size:15px;
  line-height:1.6;
}
.nova-login-feature{
  display:flex;
  align-items:center;
  gap:12px;
  color:#cbd5e1;
  font-size:13.5px;
  margin-top:16px;
}
.nova-login-feature i{ color:#60a5fa; }

.nova-login-form-side{
  width:480px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.nova-login-box{ width:100%; max-width:360px; }
.nova-login-logo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:36px;
}
.nova-login-logo .nova-brand-mark{ width:36px; height:36px; }
.nova-login-logo-text{
  font-weight:800;
  font-size:19px;
  color:var(--nova-text);
}
.nova-login-logo-text span{
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.16em;
  color:var(--nova-text-faint);
  margin-top:2px;
}
.nova-login-box h1{
  font-size:23px;
  font-weight:800;
  color:var(--nova-text);
  margin-bottom:6px;
}
.nova-login-box > p{
  color:var(--nova-text-muted);
  font-size:14px;
  margin-bottom:28px;
}
.nova-form-label{
  font-size:13px;
  font-weight:600;
  color:var(--nova-text);
  margin-bottom:7px;
  display:block;
}
.nova-input-group{
  position:relative;
  margin-bottom:18px;
}
.nova-input-group i{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--nova-text-faint);
  font-size:14px;
}
.nova-input{
  width:100%;
  padding:12px 14px 12px 40px;
  border:1px solid var(--nova-border);
  border-radius:10px;
  font-size:14px;
  background:#fff;
  color:var(--nova-text);
  transition:border-color 0.2s var(--nova-ease), box-shadow 0.2s var(--nova-ease);
}
.nova-input:focus{
  outline:none;
  border-color:var(--nova-blue);
  box-shadow:0 0 0 3px rgba(59,91,253,0.12);
}
.nova-input-toggle{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  color:var(--nova-text-faint);
  cursor:pointer;
  background:none;
  border:none;
  font-size:13px;
}
.nova-login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  font-size:13px;
}
.nova-checkbox{ display:flex; align-items:center; gap:8px; color:var(--nova-text-muted); }
.nova-checkbox input{ accent-color:var(--nova-blue); }
.nova-login-row a{ color:var(--nova-blue); font-weight:600; }

.nova-btn-primary{
  width:100%;
  padding:12.5px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg, var(--nova-blue), var(--nova-indigo));
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  transition:opacity 0.2s var(--nova-ease), transform 0.2s var(--nova-ease);
}
.nova-btn-primary:hover{ opacity:0.92; }
.nova-btn-primary:active{ transform:translateY(1px); }

.nova-alert{
  padding:12px 14px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:20px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.5;
}
.nova-alert-error{ background:#fdeaec; color:#a71d2d; }
.nova-alert-success{ background:#e8f9ee; color:#0f7a37; }
.nova-alert-info{ background:var(--nova-blue-light); color:var(--nova-blue); }

.nova-login-footer-note{
  text-align:center;
  margin-top:24px;
  font-size:12.5px;
  color:var(--nova-text-faint);
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1200px){
  .nova-stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .nova-panel-grid{ grid-template-columns:1fr; }
}

@media (max-width: 991px){
  .nova-sidebar{ transform:translateX(-100%); }
  .nova-sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,0.3); }
  .nova-main{ margin-left:0; }
  .nova-sidebar-toggle{ display:flex; }
  .nova-sidebar-backdrop.open{ display:block; opacity:1; pointer-events:auto; }

  .nova-login-visual{ display:none; }
  .nova-login-form-side{ width:100%; }
}

@media (max-width: 767px){
  .nova-topbar{ padding:0 16px; gap:12px; }
  .nova-topbar-search{ display:none; }
  .nova-content{ padding:20px 16px; }
  .nova-stat-grid{ grid-template-columns:1fr; }
  .nova-footer{ padding:16px; flex-direction:column; gap:6px; text-align:center; }
  .nova-page-head{ flex-direction:column; }
}