/* TFlow Preview — scoped under .tflow-fullpage / .tflow-preview to avoid
 * leaking into the theme. The full-page template provides .tflow-appbar,
 * .tflow-main, .tflow-appfooter; the shortcode provides .tflow-preview. */

/* ---- full-page shell (template) ---- */
body.tflow-fullpage {
  margin: 0;
  background: #f5f5f5;
  color: #222;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.tflow-fullpage #wpadminbar { position: fixed; }

.tflow-appbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: #1f2d3d; color: #fff;
  padding: 10px 16px;
}
.tflow-appbar-title { font-size: 16px; font-weight: 600; }
.tflow-logout {
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.5); border-radius: 4px;
  padding: 4px 12px; font-size: 13px; white-space: nowrap;
}
.tflow-logout:hover { background: rgba(255,255,255,.12); }

.tflow-main {
  max-width: 1100px; margin: 0 auto; padding: 16px;
}
.tflow-appfooter {
  text-align: center; color: #888; padding: 16px; font-size: 12px;
}

/* ---- step switching (data-state driven; do NOT rely on [hidden], which the
 *      theme CSS can override). High-specificity, scoped rules. ---- */
.tflow-preview .tflow-viewer { display: none; }
.tflow-preview[data-state="view"] .tflow-viewer { display: block; }
.tflow-preview[data-state="view"] .tflow-selection { display: none; }

/* ---- selection screen ---- */
.tflow-preview .tflow-selection-title { font-size: 18px; margin: 0 0 12px; }
.tflow-preview .tflow-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.tflow-preview .tflow-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #ddd; border-radius: 8px;
  padding: 16px; font: inherit; color: inherit;
  transition: box-shadow .12s, border-color .12s;
}
.tflow-preview .tflow-card:hover { border-color: #00a65a; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tflow-preview .tflow-card-label { font-size: 15px; font-weight: 600; }
.tflow-preview .tflow-card-id { font-size: 12px; color: #999; font-family: monospace; }

/* ---- viewer ---- */
.tflow-preview .tflow-viewer-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tflow-preview .tflow-back {
  cursor: pointer; background: #eee; border: 1px solid #ccc; border-radius: 4px;
  padding: 6px 12px; font: inherit;
}
.tflow-preview .tflow-back:hover { background: #e0e0e0; }
.tflow-preview .tflow-viewer-title { font-size: 16px; font-weight: 600; }
.tflow-preview .tflow-showbox-wrap { font-size: 14px; }
.tflow-preview .tflow-status { color: #777; font-size: 13px; margin-left: auto; }

.tflow-preview .tflow-tile {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px; align-items: start;
}
.tflow-preview .tflow-frame-wrap {
  position: relative; line-height: 0; background: #000;
  border: 1px solid #ddd; min-height: 200px;
}
/* Image is hidden until it successfully loads (avoids the broken-image icon);
 * JS toggles .is-loaded. */
.tflow-preview .tflow-frame { display: none; width: 100%; height: auto; }
.tflow-preview .tflow-frame.is-loaded { display: block; }
.tflow-preview .tflow-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
/* Centered status message shown while the image is unavailable. */
.tflow-preview .tflow-frame-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 14px; line-height: 1.5; text-align: center; padding: 12px;
}

.tflow-preview .tflow-total { font-size: 32px; font-weight: 700; color: #00a65a; line-height: 1; }
.tflow-preview .tflow-total small { font-size: 13px; color: #777; font-weight: 400; }
.tflow-preview .tflow-tables table {
  border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; background: #fff;
}
.tflow-preview .tflow-tables th,
.tflow-preview .tflow-tables td {
  border: 1px solid #ddd; padding: 3px 6px; text-align: right;
}
.tflow-preview .tflow-tables th:first-child,
.tflow-preview .tflow-tables td:first-child { text-align: left; }
.tflow-preview .tflow-tables caption {
  text-align: left; font-weight: 600; margin: 8px 0 4px;
}

/* ---- responsive (mobile): stack viewer into one column ---- */
@media (max-width: 720px) {
  .tflow-preview .tflow-tile { grid-template-columns: 1fr; }
  .tflow-preview .tflow-status { margin-left: 0; width: 100%; }
  .tflow-main { padding: 12px; }
}