/* homepage-ui-fixes-v2.css — 4 minimal homepage UI fixes + refinements
 * Extends v1 (yellow dot pulse, BYOK grid center, </> API hidden, models search row).
 *
 *   Fix 1: Connect button → neutral (cancel yellow)
 *   Fix 2: Section 2 cards — reduce bottom padding, shrink preview, lower min-height
 *   Fix 3: Masked API key bullets → fewer bullets (3 instead of 11)
 *   Fix 4: Provider Table column centering — all 4 header columns center
 *          AND body content group centers match exactly (target ≤2px delta)
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * FIX 1 — Connect button cancel yellow → neutral (Manage style)
 * ========================================================================== */
#root > .page > .bc5 .bc5-btn--softyellow {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
#root > .page > .bc5 .bc5-btn--softyellow:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
}
#root > .page > .bc5 .bc5-btn--softyellow:active {
  background: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FIX 2 — Section 2 feature cards: shrink preview + lower min-height
 * ========================================================================== */
#root > .page > .bc-section-two .bc-section-two__card {
  padding-top: 26px !important;
  padding-bottom: 18px !important;
  min-height: 250px !important;
}
#root > .page > .bc-section-two .bc-section-two__preview {
  max-height: 220px !important;
  min-height: 160px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FIX 3 — Masked API key: better spacing + remove extra ellipsis visual noise
 *   (Actual bullet reduction from 11→3 happens in homepage-section-five.js)
 * ========================================================================== */
#root > .page > .bc5 .bc5-key {
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FIX 4 — Provider Table: center 4 header columns + 4 body content groups
 *
 * Layout context:
 *   - Table uses CSS table layout (th/td display: table-cell)
 *   - Column widths set on th via %: provider 21%, status 17%, key 21%, added 15%, action 26%
 *   - Provider td is ALREADY flex (original design) — just needs justify-content:center
 *   - Status/Key/Added tds are table-cell — must NOT change to flex (breaks column widths!)
 *
 * Centering strategy (proven to work regardless of overflow):
 *   TH: text-align:center (table-cell text centering)
 *   PROVIDER td: justify-content:center on flex parent
 *   STATUS td (table-cell): inner .bc5-status gets display:flex + margin-inline:auto
 *   KEY td (table-cell):    inner .bc5-key gets display:block + margin-inline:auto
 *   ADDED td (table-cell):  inner .bc5-added gets display:block + margin-inline:auto
 *
 * margin-inline:auto on a block/flex element in a flow context forces exact
 * horizontal centering relative to parent's content-box — even when content
 * is wider than parent. This bypasses all inline-flex centering quirks.
 * ========================================================================== */

/* ── 4 TH columns: center their header text ─────────────────────────────── */
#root > .page > .bc5 .bc5-th--provider,
#root > .page > .bc5 .bc5-th--status,
#root > .page > .bc5 .bc5-th--key,
#root > .page > .bc5 .bc5-th--added {
  text-align: center !important;
}

/* ── PROVIDER td (already flex from original design) ──────────────────── */
#root > .page > .bc5 .bc5-td--provider {
  justify-content: center !important;
}

/* ── STATUS td (table-cell) — center .bc5-status inline-flex group ─────── */
#root > .page > .bc5 .bc5-td--status .bc5-status {
  display: flex !important;           /* promote inline-flex to block flex */
  margin-inline: auto !important;     /* HORIZONTAL CENTER — key magic! */
}

/* ── KEY td (table-cell) — center .bc5-key text ────────────────────────── */
#root > .page > .bc5 .bc5-td--key .bc5-key {
  display: block !important;
  margin-inline: auto !important;
}

/* ── ADDED td (table-cell) — center .bc5-added text ────────────────────── */
#root > .page > .bc5 .bc5-td--added .bc5-added {
  display: block !important;
  margin-inline: auto !important;
}

/* ── Action column: UNTOUCHED (HARD LOCK) ─────────────────────────────── */
/* .bc5-th--action has text-align:right; .bc5-td--action has text-align:right — leave alone */

/* ── Respect reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #root > .page > .bc5 .bc5-th--provider,
  #root > .page > .bc5 .bc5-th--status,
  #root > .page > .bc5 .bc5-th--key,
  #root > .page > .bc5 .bc5-th--added {
    text-align: center !important;
  }
}