/* ============================================================================
   DMB Template Layout Picker — opened via angular-ui-bootstrap $modal (size lg).
   Sits between the inline "new template" form and the Builder. cxm-tp-* prefix;
   tokens from cxm-tokens.css. Mini thumbnails are pure CSS (no asset round-trip).
   ========================================================================= */

.cxm-tp-modal {
  display: flex;
  flex-direction: column;
  height: 78vh;
  font-family: var(--cxm-font, 'Inter', sans-serif);
  color: var(--cxm-g90);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.cxm-tp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-4) var(--cxm-sp-5) var(--cxm-sp-3);
  border-bottom: 1px solid var(--cxm-g30);
  flex-shrink: 0;
}
.cxm-tp-header__title {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
}
.cxm-tp-header__title i { color: var(--cxm-b60); }
.cxm-tp-header__name {
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g70);
  font-size: var(--cxm-fs-14);
}
.cxm-tp-header__sub {
  margin: 4px 0 0;
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
}
.cxm-tp-close {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--cxm-r);
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g70);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.cxm-tp-close:hover { background: var(--cxm-g10); color: var(--cxm-g90); }
.cxm-tp-close:focus-visible { outline: 2px solid var(--cxm-b60); outline-offset: 2px; }

/* ── Body ────────────────────────────────────────────────────────────── */
.cxm-tp-body {
  flex: 1;
  /* min-height:0 lets this flex child shrink below its content height so its
     own overflow-y:auto engages instead of the content forcing the modal
     past its max-height (the classic flex-scroll-container enabler). */
  min-height: 0;
  overflow-y: auto;
  padding: var(--cxm-sp-4) var(--cxm-sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--cxm-g40) transparent;
}
.cxm-tp-body::-webkit-scrollbar       { width: 6px; }
.cxm-tp-body::-webkit-scrollbar-thumb { background: var(--cxm-g40); border-radius: 3px; }

.cxm-tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--cxm-sp-3);
}

/* ── Card ────────────────────────────────────────────────────────────── */
.cxm-tp-card {
  appearance: none;
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--cxm-dur, 0.15s) var(--cxm-ease, cubic-bezier(.16,1,.3,1)),
              box-shadow var(--cxm-dur, 0.15s),
              border-color var(--cxm-dur, 0.15s);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
}
.cxm-tp-card:hover {
  border-color: var(--cxm-b40);
  box-shadow: 0 4px 16px rgba(65, 133, 244, 0.14);
  transform: translateY(-1px);
}
.cxm-tp-card:focus-visible {
  outline: none;
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.25);
}
.cxm-tp-card--selected {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18);
}
.cxm-tp-card--selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cxm-b60);
  color: #fff;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.cxm-tp-card__thumb {
  display: block;
  height: 124px;
  background: var(--cxm-g10);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--cxm-g20);
}
.cxm-tp-card__body {
  display: block;
  padding: var(--cxm-sp-2) var(--cxm-sp-3) var(--cxm-sp-3);
}
.cxm-tp-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cxm-sp-1);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin-bottom: 2px;
}
.cxm-tp-card__desc {
  display: block;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  line-height: 1.4;
  margin-bottom: 4px;
}
.cxm-tp-card__meta {
  display: block;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g60);
  font-variant-numeric: tabular-nums;
}
.cxm-tp-card__badge {
  font-size: 10px;
  font-weight: var(--cxm-fw-600);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--cxm-g15, #eef1f5);
  color: var(--cxm-g70);
}
.cxm-tp-card__badge--popular { background: var(--cxm-w10); color: var(--cxm-w80); }
.cxm-tp-card__badge--new     { background: var(--cxm-s10); color: var(--cxm-s70); }

/* ── Mini thumbnails — zones rendered from data ──────────────────────── */
/* The card thumb's 16:9 inner frame represents a 24×12 canvas. Each zone
   <span> is positioned absolutely as a percentage of the frame using the
   zone's col/row/colSpan/rowSpan — same math the runtime uses, so what
   the user sees here is exactly what the canvas will look like. */
.cxm-tp-mini {
  position: absolute;
  inset: var(--cxm-sp-2);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.cxm-tp-mini--blank {
  background: repeating-linear-gradient(45deg, var(--cxm-g15, #eef1f5), var(--cxm-g15, #eef1f5) 8px, #fff 8px, #fff 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cxm-tp-mini__plus { color: var(--cxm-g50); font-size: 28px; font-weight: var(--cxm-fw-400); line-height: 1; }

/* Zone tile — all zones identical (content-agnostic). Customers fill
   any zone with any widget; tiles communicate geometry, not content. */
.cxm-tp-zone {
  position: absolute;
  border-radius: 3px;
  /* Inset margin so adjacent zones show a visible gap, mirroring the
     real grid gap on canvas. */
  margin: 1px;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--cxm-g15, #eef1f5), var(--cxm-g20));
  border: 1px solid var(--cxm-g30);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.cxm-tp-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-3) var(--cxm-sp-5);
  border-top: 1px solid var(--cxm-g30);
  background: var(--cxm-g10);
  flex-shrink: 0;
}
.cxm-tp-actions { display: flex; gap: var(--cxm-sp-2); }

/* Mobile */
@media (max-width: 640px) {
  .cxm-tp-modal { height: 90vh; }
  .cxm-tp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--cxm-sp-2); }
  .cxm-tp-card__thumb { height: 96px; }
  .cxm-tp-footer { flex-direction: column-reverse; align-items: stretch; gap: var(--cxm-sp-2); }
}

/* ── Dark theme ──────────────────────────────────────────────────────────
   Stamped via ng-attr-data-theme="{{theme}}" on .cxm-tp-modal. Default is
   'light'; the in-builder Change Layout entry passes the builder's theme
   so the modal matches its surroundings. Token shifts only — class shapes
   stay identical so light/dark stay structurally diff-able. */

.cxm-tp-modal[data-theme="dark"] {
  background: #1a1f2e;
  color: #e6e8ec;
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-header,
.cxm-tp-modal[data-theme="dark"] .cxm-tp-footer {
  background: #1a1f2e;
  border-color: #2a3142;
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-header__title { color: #f0f2f5; }
.cxm-tp-modal[data-theme="dark"] .cxm-tp-header__title i { color: #82aaf6; }
.cxm-tp-modal[data-theme="dark"] .cxm-tp-header__name,
.cxm-tp-modal[data-theme="dark"] .cxm-tp-header__sub { color: #9aa3b5; }

.cxm-tp-modal[data-theme="dark"] .cxm-tp-close {
  background: transparent;
  border-color: #2a3142;
  color: #9aa3b5;
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-close:hover {
  background: #2a3142;
  color: #f0f2f5;
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-body {
  background: rgba(8, 10, 18, 0.4);
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-card {
  background: #222837;
  border-color: #2f3645;
  color: #f0f2f5;
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card:hover {
  background: #262d3e;
  border-color: rgba(65, 133, 244, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card--selected {
  border-color: var(--cxm-b60, #4185f4);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.32);
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card--selected::after {
  /* Brighter glow on the dark check pip for separation. */
  box-shadow: 0 1px 6px rgba(65, 133, 244, 0.55);
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__name { color: #f0f2f5; }
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card--selected .cxm-tp-card__name { color: #82aaf6; }
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__desc,
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__meta { color: #9aa3b5; }

.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__thumb {
  background: #2a3142;
  border-bottom-color: #2f3645;
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-mini {
  background: #1f2535;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-mini--blank {
  background: repeating-linear-gradient(
    45deg,
    #2a3142, #2a3142 8px,
    #1f2535 8px, #1f2535 16px
  );
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-mini__plus { color: #6a7385; }

.cxm-tp-modal[data-theme="dark"] .cxm-tp-zone {
  background: linear-gradient(135deg, #2f3645, #3a4258);
  border-color: #3f4a60;
}

.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__badge {
  background: #2a3142;
  color: #c0c7d4;
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__badge--popular {
  background: rgba(243, 182, 87, 0.14);
  color: #f3b657;
}
.cxm-tp-modal[data-theme="dark"] .cxm-tp-card__badge--new {
  background: rgba(86, 207, 155, 0.14);
  color: #56cf9b;
}

/* Bootstrap modal-content carries the white shell — when our inner is
   dark, paint over it cleanly so the theme is full-bleed. */
.cxm-tp-modal-window.is-dark .modal-content {
  background: #1a1f2e;
  border: 1px solid #2a3142;
}
.cxm-tp-modal-window.is-dark .modal-content,
.cxm-tp-modal-window.is-dark .modal-content * {
  border-color: #2a3142;
}

/* ── Template chooser — step 1 kind cards + step-2 back button ─────────── */
/* The shared .cxm-tp-modal is a fixed 78vh (sized for the many-card layout
   picker). The chooser's 1–3 kind cards would leave a large empty void, so
   the chooser sizes to its content and only scrolls past 85vh. */
.cxm-tp-modal.cxm-tp-chooser { height: auto; max-height: 85vh; }
/* Each chooser step (ng-if div) is its own flex column so the modal's flex
   contract (header/footer pinned, body scrolls) survives the step wrapper.
   Without this the header/body/footer are grandchildren of the flex modal and
   .cxm-tp-body's flex:1/overflow never engages, so a tall predefined gallery
   spills past max-height with the footer pushed off-screen. min-height:0
   propagates the shrink so the body scrolls inside the 85vh cap. Step 1 stays
   content-sized (modal height:auto) so the kind cards don't leave a void. */
.cxm-tp-step {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.cxm-tp-kinds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cxm-sp-4, 16px);
  padding: var(--cxm-sp-4, 16px) 0;
  max-width: 760px;
  margin: 0 auto;
}
.cxm-tp-kind {
  flex: 0 1 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cxm-sp-2, 8px);
  padding: var(--cxm-sp-6, 32px) var(--cxm-sp-4, 16px);
  text-align: center;
  background: var(--cxm-surface, #fff);
  border: 1px solid var(--cxm-g30, #E0E4EA);
  border-radius: var(--cxm-rl, 8px);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cxm-tp-kind:hover,
.cxm-tp-kind:focus-visible {
  border-color: var(--cxm-b60, #2D7DD2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  outline: none;
}
.cxm-tp-kind__icon { font-size: 28px; color: var(--cxm-b60, #2D7DD2); }
.cxm-tp-kind__title { font-weight: 600; color: var(--cxm-g90, #2C3E50); }
.cxm-tp-kind__desc { font-size: var(--cxm-fs-12, 12px); color: var(--cxm-g70, #7F8C8D); }

.cxm-tp-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: var(--cxm-sp-2, 8px);
  background: none;
  border: none;
  border-radius: var(--cxm-rm, 6px);
  color: var(--cxm-b60, #2D7DD2);
  cursor: pointer;
}
.cxm-tp-back:hover { background: var(--cxm-g30, #E0E4EA); }

/* Admin-uploaded predefined preview thumbnail (fills the card thumb frame). */
.cxm-tp-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Portrait preview — the canvas is 12×24 (tall), so the mini renders as a
   centered tall frame inside the card thumb instead of filling it landscape. */
.cxm-tp-mini--portrait {
  top: 6px;
  bottom: 6px;
  left: 50%;
  right: auto;
  width: 63px;            /* ~9:16 against the 112px-tall thumb frame */
  transform: translateX(-50%);
}