/* ===========================================================================
   my-tables.css — chrome for the local-first My-Tables authoring surface.

   Loaded ONLY by the tables-webapp index.html. Kept separate from
   random-tables.css (which is byte-identical across both apps under
   `bb css-parity`); shared rich card styling still comes from there unchanged.
   Tokens only — no raw hex.
   =========================================================================== */

/* --- Top nav (Browse / My Tables) ------------------------------------------ */

.tables-nav {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-2);
}

.tables-nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-bottom: 2px solid transparent;
}

.tables-nav-link:hover {
  color: var(--text-primary);
}

.tables-nav-link.active {
  color: var(--accent-red);
  border-bottom-color: var(--accent-red);
}

/* --- Action row + status --------------------------------------------------- */

.mt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}

.mt-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* --- Account bar (optional cloud sync) ------------------------------------- */

.account-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.account-bar .account-cta {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.account-bar .account-status {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Migration slug-collision modal --------------------------------------- */

.mt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.mt-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: var(--space-5);
  max-width: 30rem;
  margin: var(--space-4);
}

.mt-modal h3 {
  margin-top: 0;
}

.mt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mt-error-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mt-empty {
  margin-top: var(--space-5);
}

/* --- Storage chip ---------------------------------------------------------- */

.storage-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.storage-chip.amber {
  border-color: var(--warning);
  color: var(--warning);
  background: var(--warning-bg);
}

.storage-chip .chip-icon {
  line-height: 1;
}

.storage-chip .chip-label {
  font-weight: 600;
}

/* --- Awareness nudge ------------------------------------------------------- */

.awareness-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-primary);
}

.awareness-nudge.info {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--text-primary);
}

.awareness-nudge.warn {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--text-primary);
}

.awareness-nudge .nudge-message {
  flex: 1;
}

.awareness-nudge .nudge-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-2);
}

.awareness-nudge .nudge-dismiss:hover {
  color: var(--text-primary);
}

/* --- Editor surface -------------------------------------------------------- */

.mt-editor-surface {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.mt-editor-title {
  font-family: var(--font-display);
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}

/* --- Import (hidden native file input behind a styled label) --------------- */

.mt-import {
  cursor: pointer;
}

.mt-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Compact card actions + publish/moderation status (Slice 4) ------------
   My-Tables cards switch their action buttons to icons (roll/share/edit/delete)
   so the table title keeps its room. The publish *state* is conveyed two ways:
   a colour-coded icon in the action row, and a full-text note at the card
   bottom (see .table-card-note). Tables-app only — the public browse + main app
   keep the labelled buttons. */

.mt-icon-btn {
  padding: var(--space-1) var(--space-2);
  line-height: 1;
}

/* Non-actionable publish states (pending/approved) — a colour-coded chip. */
.publish-icon {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--border-primary);
  line-height: 1;
}

.publish-icon.pending {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.publish-icon.approved {
  border-color: var(--success);
  background: var(--success-bg);
}

/* Rejected — actionable (resubmit); red to match the colour-change cue. */
.button.publish-rejected {
  color: var(--error);
  border-color: var(--error);
}

/* Bottom-of-card status line — carries the words the action icon drops. */
.table-card-note {
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* --- Sections (My Generators / My Tables) ---------------------------------- */

.mt-section {
  margin-bottom: var(--space-6);
}

/* --- Shared generator editor (web-util/gen-config-form) --------------------
   The view emits the same class names as the workbench; the tables app supplies
   its own rules here (workbench styles them via workbench.css in the main app). */

.gen-facets-label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-secondary);
  font-weight: 600;
}

.gen-facet-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.gen-facet-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.gen-facet-row input,
.gen-facet-row select {
  flex: 1;
  min-width: 0;
}

.workbench-form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}