/* ============================================
   COMPACT PREVIEW MODE
   Marketing iframe overlay — fits dashboard in
   one viewport without scrolling.
   Loaded AFTER the page's own <style> block so
   these rules win on specificity.
   ============================================ */

/* ----- Splash off ----- */
.splash { display: none !important; }
body { overflow: hidden !important; }

/* ----- Topbar compact ----- */
.topbar {
  padding: 10px 20px !important;
  min-height: 48px !important;
}
.cmdk { height: 30px !important; min-width: 240px !important; }
.cmdk .placeholder { font-size: 12px !important; }
.icon-btn { width: 30px !important; height: 30px !important; }

/* ----- Page header compact ----- */
.page-header {
  padding: 10px 20px 6px !important;
  align-items: baseline !important;
}
.page-header h1 {
  font-size: 22px !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}
.page-header .subtitle {
  font-size: 12px !important;
  margin-top: 2px !important;
}
.page-header .right { font-size: 11px !important; }
.page-header .date { font-size: 11px !important; }
.page-header .updated { font-size: 10px !important; margin-top: 2px !important; }

/* ----- Section heading bars ----- */
.rev-section-head {
  padding: 4px 20px !important;
  margin-top: 6px !important;
}
.rev-section-title { font-size: 10px !important; letter-spacing: 0.18em !important; }
.rev-section-meta { font-size: 10px !important; }

/* ----- Stat row (revenue cards) ----- */
.stat-row {
  padding: 0 20px !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.stat-row.row-2 { margin-bottom: 12px !important; }
.rev-card { padding: 12px 14px !important; }
.rev-card .rc-label {
  font-size: 9px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.16em !important;
}
.rev-card .rc-row { margin-bottom: 4px !important; gap: 8px !important; }
.rev-card .rc-value { font-size: 22px !important; }
.rev-card .rc-sub { font-size: 10px !important; line-height: 1.3 !important; }
.rev-card .rc-progress { margin-top: 8px !important; gap: 4px !important; }
.rev-card .rc-progress-row { font-size: 10px !important; }
.rev-card .rc-progress-bar { height: 2px !important; }
.rev-card .rc-tri.up,
.rev-card .rc-tri.down {
  border-left-width: 4px !important;
  border-right-width: 4px !important;
}
.rev-card .rc-tri.up { border-bottom-width: 6px !important; }
.rev-card .rc-tri.down { border-top-width: 6px !important; }

/* ----- Two-col main panels (Agents / Routines / Activity) ----- */
.two-col {
  padding: 0 20px 14px !important;
  gap: 12px !important;
}
.col-left { gap: 10px !important; }
.section-card,
.activity-card {
  padding: 12px 14px !important;
}
.section-head {
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}
.section-title { font-size: 13px !important; gap: 6px !important; }
.section-title .count { font-size: 9px !important; }
.ghost-link { font-size: 10px !important; }

/* ----- Agents list (cap to 4 visible rows) ----- */
.agent-row {
  padding: 6px 0 !important;
  gap: 10px !important;
  font-size: 11px !important;
}
.agent-row:nth-child(n+5) { display: none !important; }
.agent-name { font-size: 12px !important; }
.agent-slug { font-size: 9px !important; }
.activity-strip { height: 12px !important; gap: 2px !important; }
.activity-strip .tick { width: 2px !important; }
.pill { font-size: 9px !important; padding: 2px 6px !important; gap: 4px !important; }

/* ----- Routines list (cap to 3 visible rows) ----- */
.routine-row {
  padding: 6px 0 !important;
  font-size: 11px !important;
  gap: 8px !important;
}
.routine-row:nth-child(n+3) { display: none !important; }
.routine-row .cron { font-size: 10px !important; }
.routine-row .routine-name { font-size: 11px !important; }
.routine-row .countdown { font-size: 10px !important; }
.routine-row .last-run { font-size: 10px !important; }

/* ----- Activity feed (cap to 4 visible rows) ----- */
.activity-stream {
  flex: 0 0 auto !important;          /* override flex:1 1 0% from inline CSS */
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  -webkit-mask-image: none !important; /* drop the fade-out gradient */
  mask-image: none !important;
  margin-top: 4px !important;
}
.activity-card {
  height: auto !important;
  min-height: 0 !important;
}
.col-right { align-self: start !important; }
.activity-list {
  gap: 4px !important;
  height: auto !important;
  max-height: none !important;
}
.activity-item {
  padding: 3px 0 !important;
  gap: 8px !important;
  font-size: 11px !important;
  align-items: flex-start !important;
}
.activity-item:nth-child(n+4) { display: none !important; }
.activity-time { font-size: 10px !important; min-width: 50px !important; }
.activity-dot { flex-shrink: 0 !important; }
.activity-text .who { font-size: 11px !important; }
.activity-text .what { font-size: 11px !important; }
.activity-text .mono { font-size: 9px !important; margin-top: 1px !important; }
.activity-card { display: flex !important; flex-direction: column !important; }

/* ----- Sidebar tighter ----- */
.sidebar { padding: 14px 12px !important; }
.brand { padding: 4px 4px 12px !important; gap: 10px !important; }
.brand-mark { width: 36px !important; height: 36px !important; }
.brand-name { font-size: 16px !important; }
.brand-sub { font-size: 11px !important; }
.online-pill { font-size: 9px !important; padding: 1px 6px !important; }
.nav-section { margin-bottom: 8px !important; }
.nav-label {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 4px !important;
}
.nav-item {
  padding: 5px 10px !important;
  font-size: 12px !important;
  gap: 9px !important;
  border-radius: 7px !important;
}
.nav-item svg { width: 14px !important; height: 14px !important; }
.sidebar-footer {
  padding: 8px 4px 0 !important;
  margin-top: 10px !important;
}
.sidebar-footer .avatar { width: 24px !important; height: 24px !important; font-size: 11px !important; }
.sidebar-footer .who .n { font-size: 11px !important; }
.sidebar-footer .who .r { font-size: 9px !important; }

/* ----- General sub-page bodies (non-dashboard pages) ----- */
.main { padding: 0 !important; }
.main > * { padding-left: 20px !important; padding-right: 20px !important; }
.main > .topbar,
.main > .page-header { padding-left: 20px !important; padding-right: 20px !important; }

/* ----- Drop in-content padding heavy spacers ----- */
[class*="hero"] { padding-top: 8px !important; padding-bottom: 8px !important; }
.section + .section { margin-top: 8px !important; }

/* ============================================
   TABLET (≤900px)
   ============================================ */
@media (max-width: 900px) {
  .sidebar { width: 180px !important; }
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; gap: 8px !important; }
  .agent-row:nth-child(n+4) { display: none !important; }
  .routine-row:nth-child(n+3) { display: none !important; }
  .activity-item:nth-child(n+4) { display: none !important; }
}

/* ============================================
   MOBILE (≤620px) — ultra-compact preview
   ============================================ */
@media (max-width: 620px) {
  .sidebar { display: none !important; }
  .app { display: block !important; }
  .topbar { display: none !important; }
  .page-header { padding: 10px 14px 6px !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .page-header h1 { font-size: 18px !important; }
  .page-header .subtitle { font-size: 11px !important; }
  .page-header .right { text-align: left !important; font-size: 10px !important; }
  .page-header .updated { display: none !important; }
  .rev-section-head { padding: 2px 14px !important; }
  .rev-section-meta { display: none !important; }
  .stat-row { padding: 0 14px !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; margin-bottom: 6px !important; }
  .stat-row.row-2 { display: grid !important; }
  .stat-row > :nth-child(3) { display: none !important; } /* hide 3rd card per row */
  .two-col {
    padding: 0 14px 10px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Mobile: only show top section (Active Agents). Hide routines + activity. */
  .col-left .section-card:nth-child(2) { display: none !important; }   /* hide routines */
  .col-right { display: none !important; }                              /* hide activity */
  .rev-card { padding: 10px 12px !important; }
  .rev-card .rc-value { font-size: 18px !important; }
  .rev-card .rc-label { font-size: 9px !important; margin-bottom: 4px !important; }
  .rev-card .rc-sub { font-size: 9px !important; }
  .rev-card .rc-progress { display: none !important; }
  .agent-row:nth-child(n+3) { display: none !important; }              /* show top 2 agents */
  .agent-row { padding: 4px 0 !important; gap: 6px !important; }
  .agent-name { font-size: 11px !important; }
  .agent-slug { font-size: 8px !important; }
  .activity-strip { height: 10px !important; }
  .pill { font-size: 8px !important; padding: 1px 5px !important; }
  .section-title { font-size: 11px !important; }
}