/* ==========================================================================
   SIGPLUG – Notion-style OPTIONAL theme
   ========================================================================== */

/* ---------- colour tokens ---------- */
:root {
  --n-bg-card     : #ffffff;
  --n-border      : #e6e6e4;
  --n-text-1      : #373530;
  --n-text-2      : #787774;
  --n-green       : #548164;
  --n-red         : #c4554d;
  --n-yellow      : #c29343;
  --n-gray        : #979797;
}

/* ---------- card shell ---------- */
.notion-skin .sigcard{
  background: var(--n-bg-card);
  border: 1px solid var(--n-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ---------- buy / sell badge ---------- */
.notion-skin .sigcard .badge{
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-weight: 600;
  color: var(--n-text-1);
}

/* ---------- status & pips section ---------- */
.notion-skin .sigcard .status-section{
  background: none;
  border: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px;
}

/* secondary label (“Status”, “Pips”) */
.notion-skin .status-label{
  color: var(--n-text-2);
  font-size: 12px;
  text-transform: none;
}

/* value chips ------------------------------------------------------------ */
.notion-skin .status-value,
.notion-skin .pips-value{
  all: unset;                            /* strip gradients / borders */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

/* • coloured dot for status */
.notion-skin .status-value::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ▲ / ▼ for pips */
.notion-skin .pips-value::before{
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;          /* optical align */
}

/* ---------- state colours ---------- */
.notion-skin .status-value.filled     {color: var(--n-green);}
.notion-skin .status-value.pending    {color: var(--n-yellow);}
.notion-skin .status-value.cancelled,
.notion-skin .status-value.closed     {color: var(--n-gray);}

.notion-skin .pips-value.positive     {color: var(--n-green);}
.notion-skin .pips-value.negative     {color: var(--n-red);}
.notion-skin .pips-value.neutral      {color: var(--n-text-2);}

.notion-skin .pips-value.positive::before{content:'▲';}
.notion-skin .pips-value.negative::before{content:'▼';}
.notion-skin .pips-value.neutral::before {content:'■';}

/* ---------- table view uses same tokens ---------- */
.notion-skin .sigplug-table .status-cell.pending   {color: var(--n-yellow); background: none;}
.notion-skin .sigplug-table .status-cell.filled    {color: var(--n-green);  background: none;}
.notion-skin .sigplug-table .status-cell.cancelled {color: var(--n-gray);   background: none;}
.notion-skin .sigplug-table .status-cell.closed    {color: var(--n-gray);   background: none;}

.notion-skin .sigplug-table .pips-cell.positive    {color: var(--n-green);}
.notion-skin .sigplug-table .pips-cell.negative    {color: var(--n-red);}

/* ==========================================================================
   NOTION-SKIN : layout + badge refinements              2025-09-13
   ========================================================================== */

/* 1.  Three cards per row (≥1024 px) ------------------------------------ */
@media (min-width: 1024px){
  .notion-skin .sigplug-cards{
    /* force exactly three equal columns */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2.  Stronger coloured BUY / SELL badge -------------------------------- */
:root{
  --n-buy-bg : #548164;   /* tweak if too strong */
  --n-sell-bg: #c4554d;
}

.notion-skin .sigcard .badge{
  /* base chip shape already defined earlier */
  padding: 4px 14px;        /* a hair smaller */
  font-weight: 700;
  color:#fff;               /* white text for both */
}

.notion-skin .sigcard .badge.buy {
  background: var(--n-buy-bg);
}

.notion-skin .sigcard .badge.sell{
  background: var(--n-sell-bg);
}

/* subtle hover to show it’s interactive (if you use JS filters) */
.notion-skin .sigcard .badge:hover{
  filter: brightness(1.07);
}
/* ==========================================================================
   NOTION-SKIN : 3-up normal-width grid + breathing room      2025-09-13
   ========================================================================== */

/* 1 ▸ widen the shortcode wrapper itself
   ------------------------------------------------------------ */
/* ==========================================================================
   NOTION-SKIN : 3-up normal-width grid + breathing room - FIXED
   ========================================================================== */

/* ==========================================================================
   NOTION-SKIN : 3-up normal-width grid + breathing room - FIXED
   ========================================================================== */

/* 1 ▸ widen the shortcode wrapper itself to accommodate normal-sized cards */
@media (min-width: 1024px){
  /* the outer div that holds the toolbar + grid */
  .notion-skin #sig-wrap{
    max-width: 1200px;      /* -- reasonable width for 3 cards */
    margin-left: auto;      /* explicit centering */
    margin-right: auto;     /* explicit centering */
    width: 100%;            /* ensure full width utilization */
  }
}

/* 2 ▸ exactly three columns, with comfortable gaps for normal-sized cards */
@media (min-width: 1024px){
  .notion-skin .sigplug-cards{
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;              /* increased gap for better spacing */
    max-width: none;        /* remove any width constraints */
  }
}

/* 3 ▸ give each card normal size with proper breathing room */
.notion-skin .sigcard{
  padding: 24px;            /* keep current padding */
  min-width: 320px;         /* ensure minimum readable width */
  max-width: none;          /* remove maximum width constraint */
}

/* Keep existing badge colors */
.notion-skin .sigcard .badge.buy  {background: var(--n-buy-bg);}
.notion-skin .sigcard .badge.sell {background: var(--n-sell-bg);}

/* ----- Center the whole 3-card block ------------------------------------ */
.notion-skin .sigplug-cards{
  justify-content: center;   /* equal gap left / right -> block shifts left and sits dead-centre */
}