/* ============================================================
   ta-performance-v0.5.0.css
   INBXIFY — Performance tab (T-A) — DATA
   v0.3.0 (from v0.2.0 base). KEEPS all v0.1.0 shell styles
   (head, channels, card, tables) — reproduced here so this file
   fully replaces the old one — and ADDS the data-era styles
   transcribed literally from approved mockups M1/M2/M3.

   Reuses (does NOT restyle): design tokens, .ix-channels,
   .ix-overlay/.ix-modal (ix-modals v1.0.2), .ipp-cancel-link
   concept (gold dirty per canonical .ipp-dirty treatment).

   Load AFTER title-admin-page-design + ix-modals + ix-buttons.
   ============================================================ */

/* ── v0.1.0 base (unchanged) ── */
.ta-perf__head{ margin-bottom:16px; }
.ta-perf__eyebrow{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; margin-bottom:4px; }
.ta-perf__title{ font-family:var(--ix-font-display); font-size:22px; font-weight:700; color:var(--ix-teal); line-height:1.15; }
.ta-perf__channels{ margin-bottom:16px; }
.ta-perf__card{ background:var(--ix-white); border:1px solid var(--ix-border-soft); border-radius:var(--ix-radius); overflow:hidden; box-shadow:var(--ix-shadow-md); }
.ta-perf__card table{ width:100%; border-collapse:collapse; }
.ta-perf__card thead th{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; text-align:left; padding:11px 18px; background:var(--ix-surface); border-bottom:1px solid var(--ix-border-soft); white-space:nowrap; }
.ta-perf__card thead th.num{ text-align:right; }
.ta-perf__card tbody td{ padding:12px 18px; border-bottom:1px solid var(--ix-border-soft); font-size:13.5px; }
.ta-perf__card tbody td.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--ix-font-mono); font-size:12.5px; }
.ta-perf__card tbody tr:last-child td{ border-bottom:none; }

/* ── v0.3.0: info circles ── */
.ta-perf .perf-i{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border:1px solid var(--ix-border-input); border-radius:50%; font-family:var(--ix-font-body); font-size:8.5px; font-weight:600; color:var(--ix-text-light); margin-left:5px; cursor:help; position:relative; vertical-align:1px; text-transform:none; letter-spacing:0; }
.ta-perf .perf-i:hover{ color:var(--ix-blue); border-color:var(--ix-blue); }
.ta-perf .perf-i .tip{ display:none; position:absolute; bottom:150%; left:50%; transform:translateX(-50%); background:var(--ix-teal); color:#fff; font-size:10.5px; font-weight:400; letter-spacing:0; line-height:1.45; padding:8px 10px; border-radius:8px; width:200px; text-align:left; text-transform:none; z-index:20; font-family:var(--ix-font-body); }
.ta-perf .perf-i:hover .tip{ display:block; }

/* ── v0.3.0: status pills ── */
.ta-perf .perf-status{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.ta-perf .perf-status--live{ background:rgba(39,174,96,.1); color:var(--ix-ok); }
.ta-perf .perf-status--wait{ background:var(--ix-gold-glow); color:var(--ix-gold); }

/* ── v0.3.0: rows + expand ── */
.ta-perf .perf-row{ cursor:pointer; }
.ta-perf .perf-row:hover td{ background:var(--ix-blue-ghost); }
.ta-perf .perf-chev{ font-size:10px; color:var(--ix-text-light); transition:transform var(--ix-ease); display:inline-block; }
.ta-perf .perf-row.open .perf-chev{ transform:rotate(90deg); color:var(--ix-blue); }
.ta-perf .perf-expand td{ background:var(--ix-surface); padding:0 18px 16px; cursor:default; }
.ta-perf .perf-expand-inner{ border:1px solid var(--ix-border-soft); border-radius:var(--ix-radius-sm); background:var(--ix-white); margin-top:2px; }
.ta-perf .perf-expand-inner--gap{ margin-top:10px; }
.ta-perf .perf-expand-inner h4{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; margin:0; padding:10px 14px 8px; border-bottom:1px solid var(--ix-border-soft); }
.ta-perf .perf-src table,.ta-perf .perf-content table{ width:100%; border-collapse:collapse; }
.ta-perf .perf-src td,.ta-perf .perf-content td{ padding:9px 14px; font-size:12.5px; border-bottom:1px solid var(--ix-border-soft); }
.ta-perf .perf-src tr:last-child td,.ta-perf .perf-content tr:last-child td{ border-bottom:none; }
.ta-perf .perf-src td.num,.ta-perf .perf-content td.num{ text-align:right; font-family:var(--ix-font-mono); font-size:11.5px; font-variant-numeric:tabular-nums; }
.ta-perf .perf-src .lbl{ font-weight:600; font-size:12px; }
.ta-perf .perf-content-head td{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ix-text-light); background:var(--ix-surface); }
.ta-perf .perf-report-link{ font-size:11px; color:var(--ix-blue); text-decoration:none; font-family:var(--ix-font-mono); }
.ta-perf .perf-report-link:hover{ text-decoration:underline; }
.ta-perf .perf-meta{ font-size:10.5px; color:var(--ix-text-light); padding:8px 14px; border-top:1px solid var(--ix-border-soft); font-family:var(--ix-font-mono); }

/* ── v0.3.0: multiplier (canonical gold dirty) ── */
.ta-perf .perf-mult{ width:56px; padding:4px 6px; border:1px solid var(--ix-border-input); border-radius:6px; font-family:var(--ix-font-mono); font-size:11.5px; text-align:right; background:var(--ix-white); color:var(--ix-text-dark); }
.ta-perf .perf-mult.ipp-dirty{ border:2px solid var(--ix-gold); box-shadow:0 0 0 3px var(--ix-gold-glow); padding:3px 5px; }
.ta-perf .perf-save{ font-family:var(--ix-font-body); font-size:11px; font-weight:600; color:#fff; background:var(--ix-blue); border:none; border-radius:6px; padding:5px 12px; cursor:pointer; margin-left:8px; }
.ta-perf .perf-save:hover{ background:var(--ix-blue-deep); }
.ta-perf .perf-save:disabled{ opacity:.6; cursor:default; }
.ta-perf .ipp-cancel-link{ font-size:10.5px; color:var(--ix-text-light); text-decoration:underline; cursor:pointer; margin-left:8px; font-family:var(--ix-font-body); }
.ta-perf .ipp-cancel-link:hover{ color:var(--ix-danger); }
.ta-perf .perf-multcell{ white-space:nowrap; }

/* ── v0.3.0: semantic text ── */
.ta-perf .perf-est{ color:var(--ix-text-mid); }
.ta-perf .perf-dash{ color:var(--ix-text-tiny); }
.ta-perf .perf-type{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ix-text-light); background:var(--ix-surface); border:1px solid var(--ix-border-soft); border-radius:12px; padding:2px 7px; margin-left:6px; }
.ta-perf .perf-cust{ color:var(--ix-blue); cursor:pointer; }
.ta-perf .perf-cust:hover{ text-decoration:underline; }

/* ── v0.3.0: advertiser drill-in ── */
.ta-perf .perf-back{ font-size:12px; color:var(--ix-blue); cursor:pointer; font-weight:600; display:inline-block; margin-bottom:12px; }
.ta-perf .perf-back:hover{ text-decoration:underline; }
.ta-perf .perf-cust-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.ta-perf .perf-cust-name{ font-family:var(--ix-font-display); font-size:19px; font-weight:700; color:var(--ix-teal); }
.ta-perf .perf-genreport{ font-size:11.5px; color:var(--ix-blue); cursor:pointer; text-decoration:underline; font-weight:500; }
.ta-perf .perf-genreport:hover{ color:var(--ix-blue-deep); }
.ta-perf .perf-totals{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px; }
.ta-perf .perf-total{ background:var(--ix-white); border:1px solid var(--ix-border-soft); border-radius:var(--ix-radius-sm); padding:12px 14px; }
.ta-perf .perf-total .l{ font-family:var(--ix-font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-text-light); margin-bottom:4px; }
.ta-perf .perf-total .v{ font-family:var(--ix-font-mono); font-size:19px; font-weight:500; color:var(--ix-text-dark); font-variant-numeric:tabular-nums; }
.ta-perf .perf-total .v .est{ font-size:10px; color:var(--ix-text-light); margin-left:3px; }

/* ── v0.3.0: report modal form bits (shell = ix-modals) ── */
.perf-frow{ margin-bottom:16px; }
.perf-flabel{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; display:block; margin:0 0 6px; }
.perf-fselect{ width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--ix-border-input); border-radius:var(--ix-radius-sm); font-family:var(--ix-font-body); font-size:13px; color:var(--ix-text-dark); background:var(--ix-white); }
.perf-fincl{ display:flex; gap:14px; flex-wrap:wrap; }
.perf-fincl label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ix-text-mid); font-family:var(--ix-font-body); }
.perf-fincl input{ accent-color:var(--ix-blue); }
.perf-fhint{ font-size:11px; color:var(--ix-text-light); margin-top:5px; line-height:1.4; }
.perf-btnprimary{ font-family:var(--ix-font-body); font-size:12.5px; font-weight:600; color:#fff; background:var(--ix-blue); border:none; border-radius:var(--ix-radius-sm); padding:9px 18px; cursor:pointer; }
.perf-btnprimary:hover{ background:var(--ix-blue-deep); }
.perf-btnprimary:disabled{ opacity:.6; cursor:default; }
.perf-btnghost{ font-family:var(--ix-font-body); font-size:12.5px; font-weight:600; color:var(--ix-text-mid); background:transparent; border:none; cursor:pointer; }

/* End of ta-performance-v0.3.0.css */

/* v0.3.4 companion: diagnostic status pill */
.ta-perf .perf-status--err{ background:rgba(192,57,43,.08); color:var(--ix-danger); }

/* ── v0.3.7: FIX broken summary-row layout when a row is expanded ──
   Root cause: auto table layout let the 9-col expand cell's content
   dictate column widths, crushing the Newsletter column into a
   character-wrapped tower and detaching pills/numbers from columns. */
.ta-perf__card > table{ table-layout: fixed; }
/* column plan: chev / name / status / 6 numeric */
.ta-perf__card > table thead th:nth-child(1){ width:30px; }
.ta-perf__card > table thead th:nth-child(2){ width:22%; }
.ta-perf__card > table thead th:nth-child(3){ width:110px; }
.ta-perf .perf-row td:nth-child(2){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-perf .perf-row td{ white-space:nowrap; }
/* expand cell: full-bleed, its inner tables lay out independently */
.ta-perf .perf-expand td{ white-space:normal; }
.ta-perf .perf-expand-inner{ overflow-x:auto; }
.ta-perf .perf-src table,
.ta-perf .perf-content table{ table-layout:auto; min-width:100%; }
/* advertiser + drill-in tables get the same protection */
.ta-perf .perf-totals + .ta-perf__card table{ table-layout:fixed; }


/* ══ v0.4.0 — FULL-SCREEN NEWSLETTER DETAIL MODAL (from M4) ══ */
.nlm-overlay{ align-items:stretch !important; padding:0 !important; }
.nlmodal{ width:100%; height:100%; display:flex; flex-direction:column; background:var(--ix-cream); overflow:hidden; }
.nlmodal-bar{ height:3px; background:linear-gradient(90deg,var(--ix-gold),var(--ix-gold-light,#E8C172)); flex:0 0 auto; }
.nlmodal-head{ display:flex; align-items:center; gap:18px; padding:16px 28px; background:var(--ix-white); border-bottom:1px solid var(--ix-border-soft); flex:0 0 auto; }
.nlmodal-eyebrow{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ix-text-light); margin-bottom:2px; }
.nlmodal-title{ font-family:var(--ix-font-display); font-size:24px; font-weight:700; color:var(--ix-teal); line-height:1.1; }
.nlmodal-date{ font-family:var(--ix-font-mono); font-size:11px; color:var(--ix-text-mid); margin-top:3px; }
.nlmodal-spacer{ flex:1; }
.nlmodal-status{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:20px; background:rgba(39,174,96,.1); color:var(--ix-ok); }
.nlmodal-print{ font-family:var(--ix-font-body); font-size:12.5px; font-weight:600; color:#fff; background:var(--ix-blue); border:none; border-radius:var(--ix-radius-sm); padding:9px 16px; cursor:pointer; }
.nlmodal-print:hover{ background:var(--ix-blue-deep); }
.nlmodal-close{ width:34px; height:34px; border:1px solid var(--ix-border-input); border-radius:50%; background:var(--ix-white); color:var(--ix-text-mid); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nlmodal-close:hover{ color:var(--ix-teal); border-color:var(--ix-teal); }
.nlmodal-body{ flex:1 1 auto; overflow-y:auto; padding:24px 28px 40px; }
.nlmodal-inner{ max-width:960px; margin:0 auto; }
.nlm-totals{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:22px; }
.nlm-total{ background:var(--ix-white); border:1px solid var(--ix-border-soft); border-radius:var(--ix-radius-sm); padding:14px 16px; }
.nlm-total .l{ font-family:var(--ix-font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-text-light); margin-bottom:5px; }
.nlm-total .v{ font-family:var(--ix-font-mono); font-size:21px; font-weight:500; font-variant-numeric:tabular-nums; }
.nlm-card{ background:var(--ix-white); border:1px solid var(--ix-border-soft); border-radius:var(--ix-radius); overflow:hidden; margin-bottom:22px; }
.nlm-card h4{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; margin:0; padding:12px 18px 10px; border-bottom:1px solid var(--ix-border-soft); background:var(--ix-surface); }
.nlm-card table{ width:100%; border-collapse:collapse; }
.nlm-card td,.nlm-card th{ padding:11px 18px; border-bottom:1px solid var(--ix-border-soft); font-size:13px; text-align:left; }
.nlm-card tr:last-child td{ border-bottom:none; }
.nlm-card td.num,.nlm-card th.num{ text-align:right; font-family:var(--ix-font-mono); font-size:12px; font-variant-numeric:tabular-nums; }
.nlm-card th{ font-family:var(--ix-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ix-text-light); font-weight:500; background:var(--ix-surface); }
.nlm-lbl{ font-weight:600; }
.nlm-meta{ font-size:10.5px; color:var(--ix-text-light); padding:9px 18px; border-top:1px solid var(--ix-border-soft); font-family:var(--ix-font-mono); }
.nlm-report-link{ font-size:11px; color:var(--ix-blue); font-family:var(--ix-font-mono); text-decoration:none; }
.nlm-report-link:hover{ text-decoration:underline; }
.nlm-multcell{ white-space:nowrap; }
.nlm-printfoot{ display:none; }

/* ══ v0.4.0 — PRINT: modal renders as a professional 1–2 pager ══ */
@media print{
  @page{ size:letter; margin:0.55in; }
  body.nlm-open > *:not(.nlm-overlay){ display:none !important; }
  body.nlm-open{ background:#fff !important; }
  .nlm-overlay{ position:static !important; background:#fff !important; padding:0 !important; display:block !important; }
  .nlmodal{ height:auto; background:#fff; overflow:visible; }
  .nlmodal-bar{ display:none; }
  .nlmodal-head{ border-bottom:2px solid var(--ix-teal); padding:0 0 12px; background:#fff; }
  .nlmodal-close,.nlmodal-print{ display:none !important; }
  .nlmodal-status{ border:1px solid var(--ix-ok); background:#fff; }
  .nlmodal-body{ overflow:visible; padding:16px 0 0; }
  .nlmodal-inner{ max-width:none; }
  .nlm-totals{ gap:8px; }
  .nlm-total{ border:1px solid var(--ix-border); border-radius:6px; padding:10px 12px; }
  .nlm-card{ border:1px solid var(--ix-border); border-radius:6px; break-inside:avoid; margin-bottom:14px; }
  .nlm-card td,.nlm-card th{ padding:7px 12px; font-size:11px; }
  .nlm-content-card{ break-inside:auto; }
  .nlm-content-card tr{ break-inside:avoid; }
  .perf-mult{ border:none !important; box-shadow:none !important; padding:0 !important; width:auto !important; }
  .perf-cust{ color:var(--ix-text-dark) !important; }
  .perf-i{ display:none !important; }
  .nlm-printfoot{ display:flex !important; justify-content:space-between; margin-top:18px; padding-top:10px; border-top:1px solid var(--ix-border); font-family:var(--ix-font-mono); font-size:9px; color:var(--ix-text-light); }
}

/* v0.4.2: inline-editable send time in modal header */
.nlm-sendtime{ width:76px; padding:2px 5px; border:1px solid transparent; border-radius:5px; font-family:var(--ix-font-mono); font-size:11px; color:var(--ix-text-mid); background:transparent; }
.nlm-sendtime:hover,.nlm-sendtime:focus{ border-color:var(--ix-border-input); background:var(--ix-white); }
.nlm-sendtime.ipp-dirty{ border:2px solid var(--ix-gold); box-shadow:0 0 0 3px var(--ix-gold-glow); background:var(--ix-white); }
@media print{ .nlm-sendtime{ border:none !important; background:transparent !important; box-shadow:none !important; } }


/* ══ v0.4.3 — FIXES + TABLE REDESIGN ══ */

/* FIX: info circles were scoped under .ta-perf, so inside the modal
   (mounted on body) the tip text rendered inline. Global rules: */
.perf-i{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border:1px solid var(--ix-border-input); border-radius:50%; font-family:var(--ix-font-body); font-size:8.5px; font-weight:600; color:var(--ix-text-light); margin-left:5px; cursor:help; position:relative; vertical-align:1px; text-transform:none; letter-spacing:0; }
.perf-i:hover{ color:var(--ix-blue); border-color:var(--ix-blue); }
.perf-i .tip{ display:none; position:absolute; bottom:150%; left:50%; transform:translateX(-50%); background:var(--ix-teal); color:#fff; font-size:10.5px; font-weight:400; letter-spacing:0; line-height:1.45; padding:8px 10px; border-radius:8px; width:210px; text-align:left; text-transform:none; z-index:100001; font-family:var(--ix-font-body); }
.perf-i:hover .tip{ display:block; }
/* right-edge tips flip inward so they don't clip */
th:last-child .perf-i .tip, td:last-child .perf-i .tip{ left:auto; right:-6px; transform:none; }

/* modal: full-height but capped width, centered on the backdrop */
.nlmodal{ max-width:940px; margin:0 auto; border-radius:0; box-shadow:0 0 60px rgba(26,58,58,.35); }

/* ── TABLE REDESIGN: one hierarchy, no inverted sizes ──
   Card title (15px, display face, dark) > column headers (11px,
   body face, medium gray, sentence case) > cells (13px). The
   mono-9px-uppercase treatment retires from titles and headers;
   mono stays for NUMBERS only, where it earns its keep. */
.nlm-card h4,
.ta-perf .perf-expand-inner h4{
  font-family:var(--ix-font-display); font-size:15px; font-weight:600;
  color:var(--ix-teal); text-transform:none; letter-spacing:0;
  padding:13px 18px 11px; background:var(--ix-white);
}
.nlm-card th,
.ta-perf__card thead th{
  font-family:var(--ix-font-body); font-size:11px; font-weight:600;
  color:var(--ix-text-mid); text-transform:none; letter-spacing:.01em;
  padding:10px 18px;
}
.nlm-card td{ font-size:13px; }
.nlm-card td.num, .ta-perf__card tbody td.num{ font-size:12.5px; }
.nlm-total .l{
  font-family:var(--ix-font-body); font-size:10px; font-weight:600;
  color:var(--ix-text-mid); text-transform:none; letter-spacing:.01em;
}
.perf-status{ letter-spacing:.02em; }
.perf-sendtime-cell{ font-family:var(--ix-font-mono); font-size:11.5px; color:var(--ix-text-mid); white-space:nowrap; }

/* column plan update for the 10-column By Newsletter table */
/* ── v0.4.4: By-Newsletter column proportions ──────────────
   CARDINAL TABLE RULES: no cell may wrap to a second line, and
   column widths must be proportioned to real content. Padding is
   cut 18px→9px across this table only, which buys back ~200px and
   lets all 11 columns sit on one line at the T-A content width.
   Columns: 1 chev · 2 Newsletter · 3 Slug · 4 Status · 5 Send time
            6 Sends · 7 Opens · 8 Open rate · 9 Clicks · 10 CTR
            11 CTOR
   ---------------------------------------------------------- */
.ta-perf .perf-nl-card > table thead th,
.ta-perf .perf-nl-card > table tbody td{ padding-left:9px; padding-right:9px; white-space:nowrap; }
.ta-perf .perf-nl-card > table thead th:first-child,
.ta-perf .perf-nl-card > table tbody td:first-child{ padding-left:14px; }
.ta-perf .perf-nl-card > table thead th:last-child,
.ta-perf .perf-nl-card > table tbody td:last-child{ padding-right:14px; }

.ta-perf .perf-nl-card > table thead th:nth-child(1){ width:26px; }
.ta-perf .perf-nl-card > table thead th:nth-child(2){ width:158px; }
.ta-perf .perf-nl-card > table thead th:nth-child(3){ width:212px; }
.ta-perf .perf-nl-card > table thead th:nth-child(4){ width:104px; }
.ta-perf .perf-nl-card > table thead th:nth-child(5){ width:74px; }
.ta-perf .perf-nl-card > table thead th:nth-child(6){ width:66px; }
.ta-perf .perf-nl-card > table thead th:nth-child(7){ width:78px; }
.ta-perf .perf-nl-card > table thead th:nth-child(8){ width:82px; }
.ta-perf .perf-nl-card > table thead th:nth-child(9){ width:78px; }
.ta-perf .perf-nl-card > table thead th:nth-child(10){ width:62px; }
.ta-perf .perf-nl-card > table thead th:nth-child(11){ width:66px; }

/* Slug — the ingest match key. Full value, never wrapped; ellipsis
   only as a last-resort guard at narrow viewports (title= carries
   the complete string on hover). */
.ta-perf .perf-slug-cell{
  font-family:var(--ix-font-mono); font-size:10.5px; color:var(--ix-text-light);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:212px;
}
.ta-perf .perf-row:hover .perf-slug-cell{ color:var(--ix-text-mid); }

@media print{
  .nlmodal{ max-width:none; box-shadow:none; }
  .nlm-card h4{ color:var(--ix-teal); }
}