/* The Tech Pad — Store integrations overlay additions (LIGHT theme)
   (provider toggle + WooCommerce install-code flow).
   Complements shopify-ui.css (shared ttp-sh-* primitives). */

.ttp-sh-providers { display: flex; gap: 8px; margin: 12px 0 16px; flex-wrap: wrap; }
.ttp-sh-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #d3dfd9; color: #1a4437;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; margin: 14px 0 2px;
  box-shadow: 0 1px 2px rgba(13,43,34,.06);
}
.ttp-sh-back:hover { background: #eef4f1; }
.ttp-sh-dl {
  display: inline-block; text-decoration: none;
  background: #e8f6ee; color: #0f7a58;
  border: 1px solid #a8dcc2; border-radius: 999px;
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  margin: 8px 0 2px;
}
.ttp-sh-dl:hover { background: #d4eddf; }
.ttp-sh-inline-link { color: #0f7a58; text-decoration: underline; }
.ttp-sh-provider {
  background: #f1f5f3; border: 1px solid transparent; color: #33504a;
  padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ttp-sh-provider.active {
  background: #0d2b22; border-color: #0d2b22; color: #fff;
}
.ttp-sh-provider:hover { background: #e2eae6; }

.ttp-sh-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 28px; letter-spacing: .4em; font-weight: 800; text-align: center;
  background: #f0faf4; border: 1px dashed #7fc9a6;
  color: #0f7a58; border-radius: 12px; padding: 16px 12px; margin: 12px 0 4px;
  user-select: all;
}

.ttp-sh-steps { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.ttp-sh-step {
  background: #f6f9f7; border: 1px solid #e4ebe7; border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: #3c5049;
}
.ttp-sh-step code {
  background: #e7eee9; border-radius: 5px; padding: 1px 6px;
  font-size: 12.5px; color: #14231e;
}

/* Provider DETAIL pages (/wa/shopify, /wa/woocommerce): keep the card from
   stretching the full dashboard height and cap its width for density. */
#ttp-shopify-root.ttp-shopify { align-self: flex-start; max-width: 920px; }

/* Section heading: the bundle's .section-heading is a space-between flex row
   that scatters eyebrow / title / subtitle across the card — stack them left. */
.ttp-shopify .section-heading { display: block; border-bottom: 1px solid #e7ece9; padding-bottom: 14px; }
.ttp-shopify .section-heading .eyebrow {
  display: block; color: #128c7e; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
.ttp-shopify .section-heading h2 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px; color: #14231e; }
.ttp-shopify .section-heading p { color: #5c6d66; font-size: 14px; margin: 0; }

/* Mobile */
@media (max-width: 640px) {
  .ttp-sh-code { font-size: 22px; letter-spacing: .28em; }
}

/* The overlay is the Integrations UI — hide the native catalog/detail view
   ONLY while the overlay is mounted (deep link like /wa/integrations?provider=woocommerce).
   A plain visit shows the native catalog whose cards navigate to /wa/shopify and /wa/woocommerce. */
body.ttp-overlay-active section.integrations-page { display: none !important; }
/* Provider DETAIL pages (/wa/shopify, /wa/woocommerce): the SPA router falls
   back to "overview" for unknown /wa/* paths, so hide the native dashboard
   content — the overlay section (#ttp-shopify-root) IS the page. The sidebar
   (aside.sidebar) is a sibling of .dashboard and stays visible. */
body.ttp-provider-page .dashboard > *:not(#ttp-shopify-root) { display: none !important; }
.connector-card.live { cursor: pointer; }

/* Native catalog connected badges (painted by integrations-ui.js) */
.connector-card.live.ttp-cat-connected b { color: #0f7a58; }
.connector-card.live .connector-state.ttp-cat-state-on {
  color: #0f7a58 !important;
  border-color: #0f7a58 !important;
  background: #e8f6ee !important;
}

/* Loading spinners for async sections */
.ttp-sh-spinner-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 28px 0; color: #5c6d66;
}
.ttp-sh-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #d7e4dd; border-top-color: #0f7a58;
  animation: ttp-spin .8s linear infinite; flex: none;
}
@keyframes ttp-spin { to { transform: rotate(360deg); } }

/* Flows: staged changes + submit */
.ttp-sh-flow-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #e7ece9;
}
.ttp-sh-flow-actions .primary { background: #0d2b22; color: #fff; border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 700; cursor: pointer; }
.ttp-sh-flow-actions .primary:disabled { opacity: .6; cursor: default; }
.ttp-sh-flow-actions .ghost { background: #fff; border: 1px solid #d3dfd9; color: #1a4437; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; }
.ttp-sh-status.ok { color: #0f7a58; font-weight: 600; margin-top: 12px; }
.ttp-sh-status.error { color: #b3261e; margin-top: 12px; }

/* Flow rows: the status-change rule's automatic template note */
.ttp-sh-tpl-auto {
  font-style: italic;
  font-size: 12px;
  opacity: 0.75;
  padding: 4px 0;
  min-width: 180px;
}
.ttp-sh-tpl-hint {
  font-size: 12px;
  margin-bottom: 12px;
}
/* workspace switcher (multi-org accounts) */
.ttp-sh-wsrow{display:flex;align-items:center;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
.ttp-sh-wslabel{font-size:12.5px;color:#74827c;font-weight:600}
.ttp-sh-org-select{font-size:13px;padding:5px 8px;border:1px solid #c3d2cb;border-radius:7px;background:#fff;color:#14231e;max-width:280px}

/* Store connection honesty (1.2.7): 'connected' only while the store checks
   in. A silent store renders as "connect" on BOTH sides — never a green
   connected card next to a plugin asking for a code. */
.ttp-sh-conn.ttp-sh-stale{border-color:#e6c98a;background:#fffaf0}
.ttp-sh-conn.ttp-sh-stale .ttp-sh-conn-shop{color:#8a5a00}
.ttp-sh-conn-meta.ttp-sh-quiet{color:#8a5a00;font-weight:600}
.connector-card.live .connector-state.ttp-cat-state-reconnect{
  color:#8a5a00 !important;border-color:#e6c98a !important;background:#fffaf0 !important;
}