/* styles-additions-v29.css — MB10.6: Un-hide intake in batch mode +
 * actual layout fix + batch nav transition signal
 *
 * Loaded AFTER v28.css. Cache buster v=220.
 *
 * Overrides v28.css's overly-aggressive batch-mode hide rules.
 *
 * Sections:
 *   1. Un-hide intake/carousel in batch mode (N1)
 *   2. Force single-column form layout (N2 — kills the whitespace)
 *   3. Header subtitle transition signal on batch nav (N3)
 */


/* =============================================================
 * 1. Un-hide intake/carousel in batch mode (N1)
 * ============================================================= */

/* v28.css hid the carousel under [data-batch-mode="true"] on the assumption
 * that batch context pre-set the goal/tone/product. That assumption is wrong
 * — the goal validation still fires and the user has no UI to pick one.
 *
 * Un-hide everything. Per-contact intake still needed in batch mode. */
.ec-modal[data-batch-mode="true"] .ec-intake-carousel,
.ec-modal[data-batch-mode="true"] .ec-intake-slides,
.ec-modal[data-batch-mode="true"] [data-intake-carousel],
.ec-modal[data-batch-mode="true"] .ec-intake {
  display: block !important;
}

/* Also un-hide anything that v27.css may have hidden via data-drafts-present */
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] .ec-intake,
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] .ec-intake-carousel,
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] [data-intake-carousel] {
  display: block !important;
}


/* =============================================================
 * 2. Force single-column form layout (N2)
 * ============================================================= */

/* v28.css's column-collapse rules targeted speculative class names
 * (.ec-col-left, .ec-col-right, etc.) that didn't match the actual DOM.
 * This pass uses a more aggressive approach: force the form into a single
 * column in batch mode and let all immediate children take 100% width.
 *
 * This intentionally uses `*` selector for children — drafts, if present,
 * will render below the intake/body editor (matching the original
 * single-screen spec).
 */

.ec-modal[data-batch-mode="true"] .ec-form,
.ec-modal[data-batch-mode="true"] .ec-modal-body,
.ec-modal[data-batch-mode="true"] [data-modal-body] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ec-modal[data-batch-mode="true"] .ec-form > *,
.ec-modal[data-batch-mode="true"] .ec-modal-body > *,
.ec-modal[data-batch-mode="true"] [data-modal-body] > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* For non-batch mode too — apply only when drafts are NOT yet generated.
 * Once drafts arrive, the rich view sits below the intake (still single
 * column). The old 2-column split is gone everywhere. */
.ec-modal:not([data-drafts-present="true"]) .ec-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Specifically: hunt down any grid or flex-row containers inside the form
 * that may be causing the 2-column split, and override them. */
.ec-modal[data-batch-mode="true"] .ec-form [style*="grid-template-columns"],
.ec-modal[data-batch-mode="true"] .ec-form [style*="flex-direction: row"],
.ec-modal[data-batch-mode="true"] .ec-form .ec-grid,
.ec-modal[data-batch-mode="true"] .ec-form .ec-row-flex,
.ec-modal[data-batch-mode="true"] .ec-form .ec-two-col {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* Center the form content with a max-width for readability on wide modals */
.ec-modal[data-batch-mode="true"] .ec-form {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Same for non-batch — but only when no drafts to render alongside */
.ec-modal:not([data-batch-mode="true"]):not([data-drafts-present="true"]) .ec-form {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* =============================================================
 * 3. Header subtitle transition signal (N3)
 * ============================================================= */

/* When the user clicks Skip/Next in batch nav, the subtitle (account name +
 * location) changes instantly with no visual signal. Brief yellow pulse
 * highlights the change. JS adds the .is-changed class for 400ms. */

.ec-modal-subtitle,
[data-account-subtitle] {
  transition: background 200ms ease-out, padding 200ms ease-out;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
}

.ec-modal-subtitle.is-changed,
[data-account-subtitle].is-changed {
  background: rgba(255, 213, 0, 0.35);  /* Formon yellow @ 35% */
  padding: 2px 8px;
  animation: ec-subtitle-flash 600ms ease-out;
}

@keyframes ec-subtitle-flash {
  0% {
    background: rgba(255, 213, 0, 0.55);
    transform: translateX(-4px);
  }
  20% {
    transform: translateX(0);
  }
  100% {
    background: rgba(255, 213, 0, 0);
    padding: 2px 4px;
  }
}

/* Also flash the BATCH 1 OF N progress chunk to reinforce the change */
.ec-batch-progress,
[data-batch-progress] {
  transition: background 200ms ease-out;
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 3px;
}
.ec-batch-progress.is-changed,
[data-batch-progress].is-changed {
  background: rgba(255, 213, 0, 0.35);
  animation: ec-subtitle-flash 600ms ease-out;
}