html { scroll-behavior: smooth; }


.nsdash__campaign {
    scroll-margin-top: 90px; /* adjust */
  }
.nsdash {
	font-family: "Inter", sans-serif;
  
    margin: 0 auto;
  }
  
  .nsdash__header {
    padding: 18px 0 10px 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 14px;
  }
  
  .nsdash__h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
  }
  
  .nsdash__h2 {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.3;
  }
  
  .nsdash__meta {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.85;
  }
  
  .nsdash__meta--sub {
    font-size: 13px;
    opacity: 0.75;
  }
  
  .nsdash__sep {
    display: inline-block;
    margin: 0 10px;
    opacity: 0.7;
  }
  
  .nsdash__cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0;
  }
  
  .nsdash__card {
    flex: 1;
    min-width: 200px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
  }
  
  .nsdash__cardLabel {
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: 6px;
  }
  
  .nsdash__cardValue {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }
  
  .nsdash__cardSub {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 6px;
  }
  
  .nsdash__panel {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    margin: 14px 0;
  }
  
  .nsdash__sectionLabel {
    margin: 14px 0 6px 0;
    font-size: 14px;
    opacity: 0.85;
  }
  /* Campaign grid */
.nsdash__campaignGrid{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:14px 0;
  }
  
  /* Each campaign card becomes a tile */
  .nsdash__campaign{
    flex:1 1 360px;       /* grow, shrink, base width */
    max-width: 100%;
    margin:0;             /* remove vertical stacking spacing */
  }
  
  /* Optional: keep tiles aligned if some are taller */
  .nsdash__campaignGrid{
    align-items: stretch;
  }
  .nsdash__campaign {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin: 14px 0;
    background: #f5f5f5;
    box-shadow: 1px 2px 6px #ccc;
    font-size:16px;
  }
  /* Campaign header: title full-width, badges left, stats top-right on same row as badges */
.nsdash__campaignTop{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

.nsdash__campaignTitle{
  grid-column: 1 / -1; /* span both columns */
  margin: 0 0 2px 0;
}

.nsdash__badges{
  grid-column: 1;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0; /* remove top margin from previous flex version */
}

.nsdash__campaignRight{
  grid-column: 2;
  justify-self: end;   /* top-right */
  align-self: start;   /* top of the badges row */
  text-align: right;
  min-width: 180px;
}

  
  .nsdash__smallLabel {
    font-size: 12px;
    opacity: 0.75;
  }
  
  .nsdash__bigNumber {
    font-size: 22px;
    font-weight: 800;
  }
  
  .nsdash__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  
  .nsdash__badge {
    display: inline-block;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    opacity: 0.85;
  }
  
  .nsdash__kv {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
  }
  
  .nsdash__subsection {
    margin-top: 12px;
  }
  
  .nsdash__subhead {
    font-weight: 800;
    margin-bottom: 8px;
  }
  
  .nsdash__list {
    margin: 0;
    padding-left: 18px;
    line-height: 1.5;
  }
  
  .nsdash__finePrint {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 6px;
  }
  
  .nsdash__note {
    font-size: 14px;
    opacity: 0.75;
  }
  
  .nsdash__muted {
    opacity: 0.55;
  }
  
  .nsdash__tableWrap {
    overflow: auto;
  }
  
  .nsdash__table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
  }
  
  .nsdash__table thead th {
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 6px;
    white-space: nowrap;
  }
  
  .nsdash__table tbody td {
    border-bottom: 1px solid #f1f5f9;
    padding: 8px 6px;
    vertical-align: top;
  }
  
  .nsdash__link {
    text-decoration: none;
  }
  
  .nsdash__link:hover {
    text-decoration: underline;
  }
  
  .nsdash__footer {
    margin: 18px 0 40px 0;
    font-size: 12px;
    opacity: 0.7;
  }

  /* assets/nsdash.css */

.nsdashModal[hidden] { display: none !important; }

.nsdashModal__backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:9998;
}

.nsdashModal__panel{
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(860px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  background:#fff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  z-index:9999;
  padding:16px;
}

.nsdashModal__close{
  position:absolute;
  right:12px; top:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

.nsdashModal__title{
  margin:0 28px 12px 0;
  font-size:18px;
  font-weight:800;
}

.nsdashModal__grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px 14px;
}

.nsdashModal__label{
  font-size:12px;
  opacity:.75;
}

.nsdashModal__value{
  font-size:13px;
}

.nsdashModal__value--draft{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.nsdash__contentTitleRow{
    display:flex;
    align-items:baseline;
    gap:.5rem;
    flex-wrap:wrap;
  }

  a.nsdash__contentTitle{
      color:#333 !important
  }
  a.nsdash__contentTitle:hover{
    text-decoration: underline !important;
}

  
  .nsdash__type{
    display:inline-flex;
    align-items:center;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:2px 10px;
    font-size:12px;
    line-height:1.6;
    white-space:nowrap;
  }
  
  /* Examples: you can color-code by type */
  .nsdash__type--website-post{ 
      background-color: #ecdff5;
      color:#6e21ba;
  }
  .nsdash__type--website-page{ 
    background-color: #ddedfd;
    color:#0f5bbf;
}
    .nsdash__type--x-post{ 
    background-color: #fcf2d7;
    color:#8f762e;
}
    .nsdash__type--facebook-post{ 
    background-color: #f8e7f3;
    color:#ba4386;
}
    .nsdash__type--google-my-business-post{ 
    background-color: #e2f8e8;
    color:#2b8645;
}
    .nsdash__type--linkedin-post{ 
    background-color: #fce3ce;
    color:#c6661c;
}
    .nsdash__type--instagram-post{ 
    background-color: #ffdcdc;
    color:#ae3330;
}
    .nsdash__type--pinterest-post{ 
    background-color: #b2ebf2;
    color:#212121;
    }
    .nsdash__status{
        display:inline-flex;
        align-items:center;
        border:1px solid #e5e7eb;
        border-radius:999px;
        padding:2px 10px;
        font-size:12px;
        line-height:1.6;
        white-space:nowrap;
      }
      
      /* Example status-specific hooks */
      
    .nsdash__badge--status-live,
      .nsdash__status--live{ 
        background-color: #46f953;
        color:#000;
    }
    .nsdash__badge--status-approved,
      .nsdash__status--approved{ 
        background-color: #e2f8e8;
        color:#2b8645;
    }
      
    .nsdash__badge--status-approval-in-progress,
    .nsdash__status--approval-in-progress{
        background-color:#fce3ce;
        color:#4a4642;
      }
      
    .nsdash__badge--status-editing,
      .nsdash__status--editing{
        background-color:#ffdcdc;
        color:#b33434;
      }
      .nsdash__status--in-review{}
      .nsdash__status--approved{}
      
      /* Campaign status badges (separate namespace so you can style differently if desired) */
      .nsdash__badge--status{}
      .nsdash__badge--status-live{}
      .nsdash__badge--status-sent{}
      .nsdash__badge--status-idea{}

      .nsdash__campaign button{
        align-items:center;
        border:1px solid #e5e7eb;
        border-radius:999px;
        padding:2px 10px;
        font-size:12px;
        line-height:1.6;
        white-space:nowrap;

      }
      
  @media (max-width: 600px){
    .nsdash__campaignTop{
      grid-template-columns: 1fr;   /* single column */
      grid-template-rows: auto auto auto;
    }
  
    .nsdash__campaignTitle{
      grid-column: 1;
    }
  
    .nsdash__badges{
      grid-column: 1;
    }
  
    .nsdash__campaignRight{
      grid-column: 1;
      justify-self: start;  /* align left under badges */
      text-align: left;
      min-width: 0;
    }
  }
  

  @media (min-width: 980px){
    .nsdash__campaign{
      flex: 1 1 calc(50% - 14px);
    }
  }
  @media (min-width: 1280px){
    .nsdash__campaign{
      flex: 1 1 calc(33.333% - 14px);
    }
  }