/*
 * autocallable-portfolio.css
 * ─────────────────────────────────────────────────────────────────────
 * Styles for the JS-rendered portfolio analysis tables.
 * All tokens sourced from graniteshares.com/css/mini/master.min.css
 * All class names prefixed pa- to avoid collision with site styles.
 *
 * Site classes used directly (inherit from master.min.css):
 *   .TitleSmall / .TitleXSmall  — section headings
 *   .Body2 / .Tertiary          — meta / subtitle text
 *   .Mono2                      — monospace label text
 * ─────────────────────────────────────────────────────────────────────
 */

/* ── TOKENS (direct from master.min.css) ─────────────────────────── */
:root {
  --azure:         #2151F5;
  --azure-lt:      #EEF2FF;
  --azure-mid:     #6172F8;
  --mineral:       #0C1929;
  --surface:       #FFFFFF;
  --surface-2:     #F5F7FA;
  --border:        #D0D7E0;
  --border-lt:     #E5EAF0;
  --text-1:        #0C1929;
  --text-2:        #3A4B5C;
  --text-3:        #6B7E90;
  --green:         #23A25D;
  --green-lt:      #E8F7EF;
  --red:           #DE1A2C;
  --red-lt:        #FEECEE;
  --ff-body:       'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:       'JetBrains Mono', 'Courier New', monospace;
  --radius:        4px;
  --bw:            1px;
}

/* ── PAGE HEADER ─────────────────────────────────────────────────── */
.pa-header {
  background: var(--mineral);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
.pa-header__left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pa-header__ticker {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--azure-mid);
  letter-spacing: 0.08em;
}
.pa-header__title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.pa-header__meta {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
}

/* ── SECTION CARD ────────────────────────────────────────────────── */
.pa-section {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.pa-section__head {
  background: var(--surface-2);
  border-bottom: var(--bw) solid var(--border);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pa-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}
.pa-section__meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-3);
}

/* ── CSS GRID TABLE ──────────────────────────────────────────────── */
/*
 * Same pattern as site's .etf-chart-details_content_autocallable-table:
 *   display: grid;
 *   background: var(--light-border-bold);   ← gap colour
 *   row-gap: 1px;                           ← 1px separator lines
 *
 * Cells have background: white — so the 1px grid background
 * shows through between rows as a hairline separator.
 */
.pa-table {
  display: grid;
  background: var(--border);
  row-gap: 1px;
  width: 100%;
}

/* Table 1 — Coupon: 9 columns (was 8, +1 for vs Barrier) */
.pa-table--coupon {
  grid-template-columns:
    minmax(120px, 1.4fr)   /* Autocallable */
    minmax(100px, 1fr)     /* Next Coupon Date */
    80px                   /* Eligible (icon, fixed) */
    minmax(80px, 0.8fr)    /* Price */
    minmax(100px, 1fr)     /* Coupon Barrier */
    minmax(90px, 0.9fr)    /* vs Barrier (delta pill) */
    minmax(75px, 0.75fr)   /* % Portfolio */
    minmax(90px, 0.9fr)    /* MtM % Principal */
    minmax(90px, 0.9fr);   /* Coupon Based MtM */
}
.pa-table--maturity {
  grid-template-columns:
    minmax(120px, 1.4fr)
    minmax(100px, 1fr)
    80px
    minmax(80px, 0.8fr)
    minmax(100px, 1fr)
    minmax(90px, 0.9fr)    /* vs Barrier (delta pill) */
    minmax(75px, 0.75fr);
}

/* Table 3 — Callable: 7 columns (was 6, +1 for vs Barrier) */
.pa-table--callable {
  grid-template-columns:
    minmax(120px, 1.4fr)
    minmax(100px, 1fr)
    80px
    minmax(80px, 0.8fr)
    minmax(100px, 1fr)
    minmax(90px, 0.9fr)    /* vs Barrier (delta pill) */
    minmax(75px, 0.75fr);
}

/* ── BARRIER DELTA PILL ──────────────────────────────────────────── */
/*
 * .pa-delta — inline pill showing % distance from barrier.
 * Colour logic:
 *   above (positive delta) → green  — price above barrier = good for coupon/KI
 *   below (negative delta) → red    — price below barrier = risk
 *
 * Note: for KO (callable), above = callable risk, but we still
 * use green/red as a price-vs-barrier direction indicator.
 * The "Above Callable Zone" column already conveys the meaning.
 */
.pa-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}
.pa-delta--above {
  background: var(--green-lt);
  color: var(--green);
}
.pa-delta--below {
  background: var(--red-lt);
  color: var(--red);
}
.pa-delta--neutral {
  background: var(--surface-2);
  color: var(--text-3);
}

/* ── TABLE CELLS ─────────────────────────────────────────────────── */
.pa-cell {
  background: var(--surface);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-2);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  line-height: 1.3;
  min-width: 0;
}

/* Alternate row tint — nth-child targets sets of columns */
/* Every even group of cells (row 2, 4, 6...) gets azure-lt bg */
.pa-table--coupon   > .pa-cell:nth-child(9n+10)  ~ .pa-cell:nth-child(9n),
.pa-table--maturity > .pa-cell:nth-child(7n+8)  ~ .pa-cell:nth-child(7n),
.pa-table--callable > .pa-cell:nth-child(7n+8)  ~ .pa-cell:nth-child(7n) {
  background: var(--azure-lt);
}

/*
 * Simpler zebra approach: use CSS :nth-of-type on rows.
 * Since all cells are <span>, we target specific column positions.
 * The cleanest solution for CSS-grid zebra without JS:
 * add .pa-row--even class via JS to cells in even rows.
 */
.pa-cell--even { background: var(--azure-lt) !important; }

/* Header cells */
.pa-cell--th {
  background: var(--azure) !important;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.6rem 1rem;
}

/* Name column */
.pa-cell--name {
  font-weight: 500;
  color: var(--text-1);
}

/* Numeric columns — right-aligned, mono font */
.pa-cell--num {
  justify-content: flex-end;
  text-align: right;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.pa-cell--th.pa-cell--num {
  justify-content: flex-end;
  text-align: right;
}

/* Icon column — centred */
.pa-cell--icon {
  justify-content: center;
}
.pa-cell--th.pa-cell--icon {
  justify-content: center;
  text-align: center;
}

/* Price sub-label (ratio annotation) */
.pa-price-main {
  display: block;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.2;
}
.pa-price-sub {
  display: block;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.2;
}

/* ── STATUS ICONS ────────────────────────────────────────────────── */
/* Mirrors .etf-text-green / .etf-text-red from master.min.css */
.pa-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.pa-status--yes {
  background: var(--green-lt);
  color: var(--green);
}
.pa-status--no {
  background: var(--red-lt);
  color: var(--red);
}

/* ── VALUE COLOURING ─────────────────────────────────────────────── */
.pa-val--pos { color: var(--green); font-weight: 500; }
.pa-val--neg { color: var(--red);   font-weight: 500; }

/* ── AGGREGATE ROW ───────────────────────────────────────────────── */
.pa-agg {
  display: flex;
  align-items: center;
  border-top: var(--bw) solid var(--border);
  background: var(--surface-2);
  gap: 0;
  flex-wrap: nowrap;
}
.pa-agg__label {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  padding: 0.6rem 1.25rem;
  border-right: var(--bw) solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 130px;
}
.pa-agg__desc {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--text-2);
  padding: 0.6rem 1rem;
  flex: 1;
}
.pa-agg__val {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  padding: 0.6rem 1.25rem;
  border-left: var(--bw) solid var(--border);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}

/* ── LOADING SKELETON ────────────────────────────────────────────── */
/* Pulse animation matching site's skeleton pattern */
@keyframes pa-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}
.pa-skeleton {
  background: var(--border-lt) !important;
  border-radius: 3px;
  animation: pa-pulse 1.4s ease-in-out infinite;
  color: transparent !important;
  pointer-events: none;
  min-height: 16px;
}
.pa-skeleton--title {
  display: block;
  height: 18px;
  width: 280px;
  max-width: 100%;
}

/* ── ERROR STATE ─────────────────────────────────────────────────── */
.pa-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.pa-error__icon {
  font-size: 32px;
  color: var(--red);
  line-height: 1;
}
.pa-error__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.pa-error__detail {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-3);
  max-width: 420px;
}
.pa-error__retry {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  background: var(--azure);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.pa-error__retry:hover {
  background: var(--azure-mid);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pa-table--coupon {
    grid-template-columns:
      minmax(100px,1.2fr)
      minmax(80px,0.9fr)
      60px
      minmax(70px,0.8fr)
      minmax(80px,0.9fr)
      60px
      0    /* hide MtM % Principal */
      0;   /* hide Coupon Based MtM */
  }
  .pa-table--coupon > .pa-cell:nth-child(8n+7),
  .pa-table--coupon > .pa-cell:nth-child(8n+8) {
    display: none;
  }
  .pa-section__head { flex-direction: column; align-items: flex-start; }
  .pa-agg { flex-wrap: wrap; }
  .pa-agg__val { border-left: none; border-top: var(--bw) solid var(--border); min-width: 50%; }
}