/* ============================================
   DESIGN TOKENS — edit these to re-theme everything
   ============================================ */
:root{
  --sidebar-bg: #1D2422;
  --sidebar-bg-hover: #2B3331;
  --sidebar-active-pill: #3A4340;
  --sidebar-text: #FFFFFF;
  --sidebar-text-dim: #B7BEBC;
  --sidebar-border: rgba(255,255,255,0.08);

  --topbar-bg: #1D2422;

  --content-bg: #FAFAFA;
  --card-bg: #FFFFFF;
  --card-border: #E5E7EB;

  --accent-teal: #318780;
  --accent-teal-hover: #2A756F;
  --accent-purple: #6C63FF;

  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --success-green: #16A34A;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-width: 242px;
  --sidebar-collapsed-width: 72px;
  --transition-speed: 0.2s;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: var(--font-main);
  background: var(--content-bg);
  color: var(--text-primary);
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   LAYOUT SHELL
   ============================================ */
.app-shell{
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar{
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition: width var(--transition-speed) ease;
  overflow:hidden;
}
.sidebar.collapsed{
  width: var(--sidebar-collapsed-width);
}

.sidebar-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 20px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.sidebar-logo svg{ flex-shrink:0; }
.sidebar.collapsed .sidebar-logo span{ display:none; }

.logo-mark{
  width:26px; height:26px;
  background:#fff;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-mark svg{ width:16px; height:16px; }

/* scrollable nav region */
.sidebar-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding: 4px 10px 10px 10px;
}
.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:10px; }
.sidebar-nav::-webkit-scrollbar-track{ background:transparent; }

.sidebar a{ text-decoration:none; }
.sidebar a:link, .sidebar a:visited, .sidebar a:hover, .sidebar a:active{ text-decoration:none; }

.nav-divider{
  height:1px;
  background: var(--sidebar-border);
  margin: 8px 4px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  color: var(--sidebar-text);
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  user-select:none;
  transition: background var(--transition-speed);
  position:relative;
}
.nav-item:hover{ background: #2A756F; }
.nav-item.active{ background: var(--sidebar-active-pill); }
.nav-item svg{ flex-shrink:0; width:20px; height:20px; }
.nav-item .label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.nav-item .chevron{
  width:16px; height:16px;
  transition: transform var(--transition-speed) ease;
  opacity:0.8;
}
.nav-group.open > .nav-item .chevron{ transform: rotate(180deg); }

.sidebar.collapsed .nav-item .label,
.sidebar.collapsed .nav-item .chevron{ display:none; }
.sidebar.collapsed .nav-item{ justify-content:center; }

/* submenu */
.submenu{
  max-height:0;
  overflow:hidden;
  transition: max-height var(--transition-speed) ease;
  padding-left: 34px;
}
.nav-group.open .submenu{ max-height:220px; }
.sidebar.collapsed .submenu{ display:none; }

.submenu-item{
  display:block;
  padding:9px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
  transition: background var(--transition-speed);
}
.submenu-item:hover{ background: #2A756F; }
.submenu-item.active{ background: var(--sidebar-active-pill); }

/* bottom of sidebar */
.sidebar-footer{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top: 1px solid var(--sidebar-border);
}
.chat-bubble{
  width:40px; height:40px;
  border-radius:50%;
  background:#3A4340;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition: transform var(--transition-speed);
}
.chat-bubble:hover{ transform: scale(1.08); background:#455049; }
.chat-bubble svg{ width:18px; height:18px; }

.collapse-btn{
  width:32px; height:32px;
  border-radius: var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color: var(--sidebar-text-dim);
  transition: background var(--transition-speed), transform var(--transition-speed);
}
.collapse-btn:hover{ background: var(--sidebar-bg-hover); color:#fff; }
.sidebar.collapsed .collapse-btn svg{ transform: rotate(180deg); }
.sidebar.collapsed .sidebar-footer{ flex-direction:column; gap:12px; }

/* ============================================
   MAIN COLUMN
   ============================================ */
.main-column{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  background: var(--topbar-bg);
  height:60px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  padding:0 28px;
  flex-shrink:0;
}
.topbar-link{
  color:#fff;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  opacity:0.9;
}
.topbar-link:hover{ opacity:1; }
.apps-btn{ display:flex; align-items:center; gap:10px; }
.ai-tools-pill{
  background:rgba(255,255,255,0.1);
  padding:4px 10px;
  border-radius: var(--radius-pill);
  font-size:12.5px;
  font-weight:700;
}
.upgrade-btn{
  background: var(--accent-teal);
  color:#fff;
  padding:9px 16px;
  border-radius: var(--radius-pill);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  transition: background var(--transition-speed);
  white-space:nowrap;
}
.upgrade-btn:hover{ background: var(--accent-teal-hover); }
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:#4B5563;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;
  cursor:pointer;
}

.content-area{
  flex:1;
  overflow-y:auto;
  padding:32px 36px 60px;
}

.page-title{
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Reports AI box */
.ai-box{
  border:1.5px solid #C7D2FE;
  border-radius: var(--radius-lg);
  padding:20px 22px;
  margin-bottom:28px;
  background:#fff;
}
.ai-box-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-weight:700;
  font-size:15px;
}
.beta-tag{
  background:#F1F5F9;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius: var(--radius-pill);
}
.ai-input{
  border:1.5px solid #C7D2FE;
  border-radius: var(--radius-md);
  padding:14px 16px;
  color: var(--text-muted);
  font-size:14px;
  margin-bottom:14px;
}
.ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.suggestion-pill{
  border:1px solid #E2E8F0;
  border-radius: var(--radius-pill);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  transition: border-color var(--transition-speed);
}
.suggestion-pill:hover{ border-color: var(--accent-purple); color:var(--text-primary); }
.start-chat-btn{
  margin-left:auto;
  background: linear-gradient(135deg, #C9B6F5, #A8E6E0);
  color:#4C1D95;
  font-weight:700;
  padding:11px 22px;
  border-radius: var(--radius-pill);
  cursor:pointer;
  font-size:13.5px;
}

/* Sales performance section */
.section-title{
  font-size:19px;
  font-weight:700;
  margin-bottom:4px;
}
.section-sublink{
  color: var(--success-green);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  margin-bottom:18px;
  display:inline-block;
}

.stats-row{
  display:flex;
  gap:20px;
}
.stat-card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding:22px;
  width:280px;
  flex-shrink:0;
}
.stat-card-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:12px;
}
.stat-card-value{
  font-size:28px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.stat-card-badge{
  background:#F1F5F9;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  padding:3px 8px;
  border-radius: var(--radius-pill);
}
.stat-card-footer{
  margin-top:10px;
  font-size:12.5px;
  color: var(--text-muted);
}

.chart-card{
  flex:1;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding:20px 22px;
}
.chart-tabs{
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:16px;
}
.chart-tab{
  padding-bottom:10px;
  font-weight:700;
  font-size:14.5px;
  color:var(--text-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.chart-tab.active{ color:var(--text-primary); border-color: var(--text-primary); }
.chart-placeholder{
  height:140px;
  display:flex;
  align-items:flex-end;
  gap:14px;
}
.legend{
  display:flex;
  gap:20px;
  margin-top:10px;
  font-size:13px;
  color:var(--text-secondary);
  font-weight:600;
}
.legend-dot{
  width:14px;height:14px;border-radius:4px;
  display:inline-block;margin-right:6px;vertical-align:middle;
}

/* Section header row: title+sublink left, controls (updated/dropdowns/menu) right */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.section-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
}
.updated-text{
  font-size:12.5px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.updated-text svg{ width:14px; height:14px; cursor:pointer; }
.dropdown-btn{
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  background:#fff;
  color:var(--text-primary);
  white-space:nowrap;
}
.dropdown-btn svg{ width:14px; height:14px; opacity:0.6; }
.icon-btn{
  width:34px;height:34px;
  border:1px solid var(--card-border);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  background:#fff;
  flex-shrink:0;
}
.icon-btn svg{ width:16px; height:16px; }

/* Two-column dashboard row: stats column (fixed width) + chart card (flexible) */
.dashboard-row{
  display:flex;
  gap:20px;
  align-items:stretch;
  margin-top:18px;
}
.stats-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:280px;
  flex-shrink:0;
}
.stat-card-pair{
  display:flex;
  gap:16px;
}
.stat-card-pair .stat-card{
  width:auto;
  flex:1;
  padding:18px;
}
.stat-card.compact{ padding:18px; }

/* Subscriber-style card: big number + small muted badge + sub/unsub counts */
.big-number-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:10px 0 12px;
}
.big-number{ font-size:26px; font-weight:700; }
.small-badge{
  background:#F1F5F9;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  padding:3px 9px;
  border-radius: var(--radius-pill);
}

.btn-teal{
  background: var(--accent-teal);
  color:#fff;
  border:none;
  padding:11px 20px;
  border-radius:8px;
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  margin-top:22px;
  display:inline-block;
  font-family:inherit;
  transition: background var(--transition-speed);
}
.btn-teal:hover{ background: var(--accent-teal-hover); }

/* Checkbox-style legend used above charts */
.checkbox-legend{
  display:flex;
  gap:22px;
  align-items:center;
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  flex-wrap:wrap;
}
.legend-checkbox{
  width:16px;height:16px;
  border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:7px;
  vertical-align:middle;
}
.legend-checkbox svg{ width:11px; height:11px; }

.chart-xaxis{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--card-border);
  font-size:12px;
  color:var(--text-muted);
  font-weight:600;
}

.section-block{ margin-top:44px; }

/* ============================================
   GOALS PAGE / EMPTY-STATE (no store connected)
   ============================================ */
.goal-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:20px 0 10px;
}
.goal-hero-text{ max-width:560px; }
.goal-hero-text h1{
  font-size:32px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  margin-bottom:24px;
}
.goal-hero-label{
  font-size:14px;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:12px;
}
.goal-connect-btn{
  background: var(--accent-teal);
  color:#fff;
  border:none;
  padding:14px 26px;
  border-radius:8px;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  font-family:inherit;
  transition: background var(--transition-speed);
  display:inline-block;
}
.goal-connect-btn:hover{ background: var(--accent-teal-hover); }
.goal-connect-sub{
  text-align:left;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-secondary);
  margin-top:10px;
}
.goal-hero-graphic{ flex-shrink:0; width:360px; }
.goal-hero-graphic svg{ width:100%; height:auto; }

.goal-section-title{
  text-align:center;
  font-size:19px;
  font-weight:700;
  margin:48px 0 28px;
}

.goal-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.goal-card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding:28px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.goal-card-icon{
  width:52px; height:52px;
  border-radius:12px;
  background:#EAF3F2;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.goal-card-icon svg{ width:30px; height:30px; }
.goal-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
}
.goal-card p{
  font-size:13.5px;
  color:var(--text-secondary);
  line-height:1.6;
  margin-bottom:22px;
}
.goal-card-btn{
  border:1.5px solid var(--accent-teal);
  color: var(--accent-teal);
  background:transparent;
  padding:11px 20px;
  border-radius:8px;
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  font-family:inherit;
  transition: background var(--transition-speed), color var(--transition-speed);
  margin-top:auto;
}
.goal-card-btn:hover{ background: var(--accent-teal); color:#fff; }

@media (max-width: 900px){
  .goal-hero{ flex-direction:column; }
  .goal-cards-grid{ grid-template-columns:1fr; }
}

/* ============================================
   CONNECT STORE FLOW — full-page modal style (no sidebar)
   ============================================ */
.modal-page{
  min-height:100vh;
  background:#fff;
}
.modal-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid var(--card-border);
}
.modal-topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.modal-topbar-left .logo-mark{
  width:32px;height:32px;
  background: var(--sidebar-bg);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
}
.modal-topbar-left .logo-mark svg{ width:18px;height:18px; }
.modal-topbar-left span{ font-size:16px; font-weight:700; color:var(--text-primary); }
.modal-topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}
.modal-breadcrumb{
  font-size:13px;
  color:var(--text-muted);
  font-weight:600;
}
.modal-breadcrumb .current{ color:var(--text-primary); }
.modal-close{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  cursor:pointer;
  color:var(--text-secondary);
  text-decoration:none;
}
.modal-close:hover{ background:#F1F5F9; }
.modal-close svg{ width:20px;height:20px; }

.modal-body{
  max-width:1000px;
  margin:0 auto;
  padding:56px 32px 80px;
}
.modal-body h1{
  font-size:26px;
  font-weight:700;
  margin-bottom:36px;
}

/* platform selection grid */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:40px;
}
.platform-card{
  border:1.5px solid var(--card-border);
  border-radius: var(--radius-md);
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.platform-card:hover{ border-color: var(--accent-teal); box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.platform-card.disabled{ cursor:not-allowed; opacity:0.55; }
.platform-card.disabled:hover{ border-color: var(--card-border); box-shadow:none; }
.platform-wordmark{ font-size:19px; font-weight:800; color:#1F2937; }
.platform-badge{
  position:absolute;
  top:8px; right:8px;
  background:#F1F5F9;
  color:var(--text-secondary);
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius: var(--radius-pill);
}

.modal-divider{ border:none; border-top:1px solid var(--card-border); margin:8px 0 32px; }
.modal-sub-label{ font-size:15px; font-weight:700; margin-bottom:6px; }
.modal-sub-text{ font-size:13.5px; color:var(--text-secondary); margin-bottom:20px; }

/* shopify connect screen */
.connect-brand-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}
.connect-brand-row .plus{ font-size:20px; color:var(--text-muted); }
.connect-shopify-logo{
  font-size:24px; font-weight:800; color:#1F2937; font-style:italic;
  display:flex; align-items:center; gap:8px;
}
.connect-sync-text{ font-size:14px; color:var(--text-secondary); margin-bottom:14px; }
.connect-sync-list{ list-style:none; margin-bottom:32px; }
.connect-sync-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:var(--text-primary);
  margin-bottom:10px;
}
.connect-sync-list li::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background: var(--accent-teal);
  flex-shrink:0;
}
.connect-store-btn{
  background: var(--accent-teal);
  color:#fff;
  border:none;
  padding:15px 28px;
  border-radius:8px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  font-family:inherit;
  margin-bottom:36px;
  transition: background var(--transition-speed);
}
.connect-store-btn:hover{ background: var(--accent-teal-hover); }

.trust-row{
  display:flex;
  gap:48px;
  align-items:center;
  padding-bottom:28px;
  margin-bottom:20px;
  border-bottom:1px solid var(--card-border);
}
.trust-item{ display:flex; align-items:center; gap:10px; }
.trust-item svg{ width:20px; height:20px; color: var(--accent-teal); flex-shrink:0; }
.trust-stat{ font-size:22px; font-weight:700; color:var(--text-primary); line-height:1; }
.trust-label{ font-size:12.5px; color:var(--text-secondary); font-weight:600; }
.trust-stars{ color:#F59E0B; font-size:12px; }

.modal-help{ font-size:13.5px; color:var(--text-secondary); }
.modal-help a{ color: var(--accent-teal); font-weight:700; text-decoration:none; }
.modal-help a:hover{ text-decoration:underline; }

@media (max-width: 800px){
  .platform-grid{ grid-template-columns:repeat(2, 1fr); }
  .trust-row{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ============================================
   PAGE LOADER — teal accent (#57ACA9)
   A clean full-page spinning loader shown while
   navigating from one page to another.
   ============================================ */

/* Spinning circle */
.spinner{
  width:48px; height:48px;
  border-radius:50%;
  border:4px solid rgba(87,172,169,0.18);
  border-top-color:#57ACA9;
  animation: spin 0.7s linear infinite;
}
.spinner.spinner-lg{ width:60px; height:60px; border-width:5px; }

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Full-page overlay behind the spinner */
.loader-overlay{
  position:fixed;
  inset:0;
  background: #FAFAFA;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:1;
  transition: opacity 0.25s ease;
}
.loader-overlay.hidden{
  opacity:0;
  pointer-events:none;
}