/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/* Tailwind entry point.
   Global styling comes from /dist/app.css linked in the root layout, so
   .settings-panel, .btn-wslab, and all Tailwind utilities work everywhere.
   This file holds component-scoped styles for the new React navbar/shell
   (the .mat-* classes) since those don't exist in the compiled Tailwind. */

.mat-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mat-navbar__inner {
  padding: 0 1rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mat-navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.mat-navbar__brand img {
  height: 28px;
  width: auto;
  display: block;
}

.mat-navbar__brand-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.mat-navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.mat-navbar__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #374151;
  border-radius: 1px;
}

.mat-navbar__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

.mat-navbar__tabs {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.mat-navbar__tab a {
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  color: #4b5563;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: background 0.12s, color 0.12s;
}

.mat-navbar__tab a:hover {
  background: #f3f4f6;
  color: #111827;
}

.mat-navbar__tab.is-active a {
  background: #4f46e5;
  color: #ffffff;
}

.mat-navbar__tab.is-active a:hover {
  background: #4338ca;
  color: #ffffff;
}

.mat-navbar__profile {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.mat-navbar__profile-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.mat-navbar__profile-toggle:hover {
  background: #f3f4f6;
}

.mat-navbar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: #e5e7eb;
}

.mat-navbar__profile-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.mat-navbar__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
}

.mat-navbar__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  z-index: 60;
}

.mat-navbar__dropdown li a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
  border-radius: 0.375rem;
}

.mat-navbar__dropdown li a:hover {
  background: #f3f4f6;
  color: #111827;
}

.mat-navbar__divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.375rem 0;
}

.mat-main {
  min-height: calc(100vh - 56px - 60px);
}

.mat-footer {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #6b7280;
}

.mat-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
}

.mat-banner--warning {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
}

.mat-banner--info {
  background: #dbeafe;
  color: #1e40af;
  border-bottom: 1px solid #bfdbfe;
}

.mat-banner__action {
  margin-left: auto;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted currentColor;
}

/* Mobile collapse: below the md breakpoint (768px) hide the inline nav and
   show the hamburger; toggle .is-open to reveal the collapsed menu. */
@media (max-width: 767px) {
  .mat-navbar__toggle {
    display: flex;
  }

  .mat-navbar__nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    padding: 0.75rem;
    gap: 0.25rem;
  }

  .mat-navbar__nav.is-open {
    display: flex;
  }

  .mat-navbar__tabs {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .mat-navbar__tab a {
    display: block;
    padding: 0.75rem 0.85rem;
  }

  .mat-navbar__profile {
    margin-left: 0;
    width: 100%;
  }

  .mat-navbar__profile-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .mat-navbar__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    margin-top: 0.25rem;
  }

  .mat-navbar__profile-name {
    max-width: none;
  }
}

/* ─── Shared semantic classes (polish phase 01) ──────────────────────────
   Used by React modules. Legacy classes (.btn-wslab, .page-box,
   .content-tab, .list-bar, .empty-view) remain in the compiled Tailwind
   (public/dist/app.css) and are still available for Pug pages. */

/* Brand-colored CTA — mirrors legacy .btn-wslab */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: #4f46e5; /* bg-brand indigo */
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary:hover {
  background: #4338ca;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* White + border, hover bg — mirrors legacy .content-info */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: #ffffff;
  color: #1f2937; /* text-ink */
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb; /* border-edge */
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-secondary:hover {
  background: #f9fafb; /* bg-surface */
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Red — delete/archive */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* White rounded container — mirrors legacy .page-box */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.3125rem; /* 5px */
  padding: 0.625rem; /* 10px */
  transition: box-shadow 0.15s;
}

.card--hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ─── Status badge (reusable colored pill) ────────────────────────────
   Named `.mat-badge` — NOT `.badge` — to avoid colliding with the legacy
   Bootstrap `.badge` in dist/app.css (background-color:#777;color:#fff)
   that ties on specificity and wins the cascade, turning the pill gray.
   Explicit hex colors also avoid dependence on Tailwind utility
   compilation (dist/app.css is purged of React-only classes). Used by
   StatusBadge and any small status pill. */
.mat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.mat-badge > i {
  font-size: 0.625rem;
  opacity: 0.85;
}

.mat-badge--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; } /* green  */
.mat-badge--warning { background: #fef3c7; color: #92400e; border-color: #fde68a; } /* amber  */
.mat-badge--info    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } /* blue   */
.mat-badge--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; } /* red    */
.mat-badge--neutral { background: #f3f4f6; color: #374151; border-color: #e5e7eb; } /* gray   */

/* Step-flow pill tabs — mirrors legacy .content-tab + .tab-active */
.tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280; /* text-muted */
  text-decoration: none;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}

.tab-link:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.tab-link--active {
  background: #4f46e5;
  color: #ffffff;
}

.tab-link--active:hover {
  background: #4338ca;
  color: #ffffff;
}

/* Completion check icon next to a completed tab label */
.tab-link__check {
  color: #16a34a; /* green-600 */
  font-size: 0.875rem;
}

.tab-link--active .tab-link__check {
  color: #ffffff;
}

/* Arrow between step-flow tabs */
.tab-arrow {
  color: #d1d5db; /* gray-300 */
  font-size: 0.875rem;
  padding: 0 0.25rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tab-arrow--done {
  color: #16a34a; /* green-600 */
}

/* Empty state — mirrors legacy .empty-view */
.empty-state {
  max-width: 28rem; /* max-w-sm ≈ 448px */
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 1rem;
}

.empty-state img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.25rem;
}

.empty-state p {
  color: #6b7280; /* text-muted */
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* ─── List page layout (shared: sequences / broadcasts / forms) ────────
   The shared /dist/app.css is produced by Tailwind scanning only Pug +
   legacy JS (tailwind.config.js content[]), so layout utilities used solely
   in React — grid-cols-*, py-8, max-w-6xl — are purged and silently no-op.
   These classes give every list page a centered container with top spacing
   and a responsive 3-up card grid, mirroring the legacy views (e.g.
   sequences/list.pug: .max-w-container.mx-auto.px-4 + .each-sequence
   .flex.flex-wrap + .w-full.md:w-1/3). Breakpoints follow the project's
   custom screens (md=992px, lg=1200px). */
.list-page {
  max-width: 1170px; /* theme.extend.maxWidth.container */
  margin-inline: auto;
  padding: 2rem 1rem; /* top spacing below the navbar + side gutters */
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 1199px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── List card (shared) ──────────────────────────────────────────────
   Purge-proof card internals. Replaces Tailwind utilities (text-gray-600,
   items-start, text-indigo-600, grid-cols-3, …) stripped from dist/app.css
   because they appear only in React. The card is a flex column so the
   footer pins to the bottom and equal-height grid cells line up. */
.item-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.item-card__title {
  min-width: 0; /* allow ellipsis inside flex */
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937; /* text-ink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card__desc {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280; /* text-muted */
}

/* 3-up mini stat grid — denser than the dashboard tiles. */
.item-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.item-card__stats .stat-tile {
  padding: 0.5rem;
  text-align: center;
}

.item-card__stats .stat-tile__label {
  font-size: 0.625rem;
}

.item-card__stats .stat-tile__value {
  font-size: 1rem;
}

/* Inline meta line — plain icon + subtle muted text, deliberately NOT a
   label/pill: no background, border, or dotted underline (the legacy
   .show-time used a dotted underline — dropped). Used for "Runs at …"
   (sequences) and the scheduled time (broadcasts). */
.meta-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.meta-line > i {
  color: #9ca3af; /* gray-400 — subtle icon */
}

.meta-line__text {
  color: #6b7280; /* gray-500 — subtle text */
}

/* Secondary progress/help line, e.g. "X completed of Y subscribers." */
.item-card__progress {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
}

.item-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end; /* actions bottom-right */
  margin-top: auto; /* pin footer to bottom for equal-height cards */
  padding-top: 0.25rem;
}

/* ─── Sequence content sidebar ───────────────────────────────────────
   Purge-proof classes for the drag-and-drop list of sequence emails
   (ContentSidebar.tsx). Replaces the legacy `ul.content-list` /
   `a.list-item` machinery in public/css/app.css:2469-2581 which relied
   on CSS-counter ::after pseudo-elements for the numbering and a
   negative-margin gutter for a vertical timeline. The legacy geometry
   broke when React added Tailwind utilities to the same `<li>`. This
   uses a real DOM node for the numbered circle so alignment is stable. */
.seq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 600px;
  overflow-y: auto;
}

.seq-item-link {
  display: block;
  padding: 0.75rem 0.875rem;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  background: #ffffff;
  margin-bottom: 0.5rem;
  transition: background 0.12s, border-color 0.12s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.seq-item-link:hover {
  background: #f9fafb; /* gray-50 */
}
.seq-item-link[data-active="true"] {
  border-color: #4f46e5; /* indigo-600 */
  background: #eef2ff; /* indigo-50 */
}

/* Top row: small numbered pill + headline + (optional) DRAFT badge. */
.seq-row-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Compact numbered pill — 20px vs the old 28px circle. Sits in the
   title row rather than acting as a tall left rail, so subsequent
   meta/stats rows can span the full card width. */
.seq-step {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  background: #f3f4f6;        /* gray-100 */
  color: #4b5563;             /* gray-600 */
  border: 1px solid #e5e7eb;  /* gray-200 */
}
.seq-item-link[data-active="true"] .seq-step {
  background: #4f46e5;        /* indigo-600 */
  color: #ffffff;
  border-color: #4f46e5;
}

/* Headline — bold, truncates with ellipsis if long. */
.seq-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937; /* gray-800 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seq-title--empty {
  color: #9ca3af; /* gray-400 */
  font-style: italic;
  font-weight: 400;
}

/* DRAFT pill — upper-right of title row when content is unpublished.
   Amber to match the broadcast polish theme. */
.seq-draft-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;        /* amber-800 */
  background: #fef3c7;   /* amber-100 */
  border-radius: 0.25rem;
}

/* Meta row — drip/sending message. Spans full card width (no left
   indent) so the text has room and doesn't wrap awkwardly beneath
   the number. Lightning SVG signals "automated / immediate". */
.seq-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280; /* gray-500 */
  line-height: 1.25;
}
.seq-meta__icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.0625rem;
  color: #6366f1; /* indigo-500 */
}
.seq-item-link[data-active="true"] .seq-meta__icon {
  color: #4f46e5; /* indigo-600 */
}

/* Stats footer — separated by a dashed top border so the numbers
   don't compete with the meta text. */
.seq-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb; /* gray-200 */
  font-size: 0.6875rem;
  line-height: 1.25;
  color: #6b7280; /* gray-500 */
}
/* Separator dot — explicit pixel size so spacing is identical on
   every render, regardless of font metrics of the bullet glyph. */
.seq-stats__dot {
  flex-shrink: 0;
  display: inline-block;
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 9999px;
  background: #d1d5db; /* gray-300 */
}
.seq-item-link[data-active="true"] .seq-stats {
  border-top-color: #c7d2fe; /* indigo-200 */
}

/* Radio + nested multi-select — replaces ad-hoc React styles */
.filter-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.filter-radio-card:hover {
  background: #f9fafb;
}

.filter-radio-card.is-selected {
  border-color: #4f46e5;
}

/* Stat number + label block — mirrors legacy .sq-report */
.stat-tile {
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

.stat-tile__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #6b7280;
}

.stat-tile__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

/* Standardized inputs */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.form-input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
}

.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.form-input--grow { flex: 1 1 auto; min-width: 0; }

/* ─── List page header (shared) ───────────────────────────────────────
   Purge-proof replacement for `flex items-center justify-between mb-6`
   + `text-2xl font-bold text-gray-800`. Reusable on every list page
   header (subscribers now; can be adopted by sequences/broadcasts/forms
   later). Mirrors the layout used on the legacy list pages. */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.list-header__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}
.list-header__count {
  font-size: 1rem;
  font-weight: 400;
  color: #6b7280;
}

/* ─── Flat tab bar (shared) ───────────────────────────────────────────
   Purge-proof replacement for SubscriberTabs' `border-b border-gray-200
   mb-6` + `flex flex-wrap gap-1` + per-link `px-4 py-2 text-sm
   font-medium border-b-2 -mb-px` + active/inactive variants. Mirrors
   legacy `.settings-tabs` (public/css/app.css:2584-2589) but uses the
   new indigo accent (#4f46e5) instead of legacy teal. */
.tab-bar {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}
.tab-bar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.tab-bar__item {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  color: #6b7280;
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.tab-bar__item:hover { color: #4f46e5; border-bottom-color: #4f46e5; }
.tab-bar__item--active { color: #4f46e5; border-bottom-color: #4f46e5; }

/* ─── Right-side slide-out drawer ─────────────────────────────────────
   Purge-proof drawer pattern with backdrop, fixed positioning, and
   slide-in keyframe animation (mirrors legacy @keyframes slide-in in
   public/scripts/subscribers.js:889-960, which used position:absolute
   right:-330px). Plus interior classes that replace the purged Tailwind
   utilities (p-6, flex items-center justify-between mb-4, text-lg
   font-bold, space-y-3, label/error/banner/tag-pill classes) used
   across the three panels (AddSubscriber / SubscriberDetail /
   TagAssignment). */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  animation: drawer-backdrop-in 0.25s ease forwards;
}
.drawer-backdrop--nested {
  z-index: 55;
  background: rgba(0, 0, 0, 0.6);
}
@keyframes drawer-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;            /* matches legacy max-w-md (448px) */
  background: #ffffff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
  overflow-y: auto;
  transform: translateX(100%);
  animation: drawer-slide-in 0.3s ease forwards;
}
.drawer--nested { z-index: 60; }
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.drawer__body   { padding: 1.5rem; }
.drawer__head   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer__title  { margin: 0; font-size: 1.125rem; font-weight: 700; color: #1f2937; }
.drawer__close  { background: transparent; border: none; font-size: 1.5rem; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0.25rem 0.5rem; }
.drawer__close:hover { color: #4b5563; }
.drawer__form   { display: flex; flex-direction: column; gap: 0.75rem; }
.drawer__field  { display: flex; flex-direction: column; gap: 0.25rem; }
.drawer__label  { font-size: 0.75rem; color: #4b5563; }
.drawer__label .req { color: #dc2626; }
.drawer__hint   { font-size: 0.75rem; color: #6b7280; padding-top: 0.25rem; }
.drawer__actions{ display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }
.drawer__section{ margin-bottom: 1rem; }
.drawer__subhead{ font-size: 0.75rem; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: 0.025em; margin: 0 0 0.5rem; }
.drawer__divider{ border-top: 1px solid #e5e7eb; padding-top: 1rem; margin-top: 1rem; }
.drawer__error  { padding: 0.75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.375rem; color: #b91c1c; font-size: 0.875rem; margin-bottom: 1rem; }
.drawer__info   { padding: 0.75rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.375rem; color: #92400e; font-size: 0.875rem; margin-bottom: 1rem; }
.drawer__loading{ color: #6b7280; padding: 2rem 0; font-size: 0.875rem; }
.drawer__link   { margin-top: 0.5rem; font-size: 0.75rem; color: #4f46e5; background: transparent; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

/* Tag pills inside the detail / tag-assignment panels */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}
.tag-pill__remove {
  background: transparent;
  border: none;
  color: #6366f1;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
}
.tag-pill__remove:hover { color: #dc2626; }
.tag-pill-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* Detail-panel definition list — replaces <dl className="space-y-2 text-sm mb-6">
   + inline dt/dd used in SubscriberDetailPanel. */
.drawer__dl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.drawer__dl dt { color: #6b7280; display: inline; }
.drawer__dl dd { color: #1f2937; display: inline; margin: 0; word-break: break-all; }
.drawer__dl .drawer__dl-row { display: block; }

/* ─── Flow / Automation configurator ──────────────────────────────────
   Purge-proof replacement for the Tailwind utilities used only in the
   React flow module (FlowConfigurator / TriggerPanel / ActionPanel /
   FlowRules). Same root cause as the subscribers module: utilities like
   bg-indigo-600, w-5/12, mb-1, px-4 py-3, bg-gray-100, h-6 w-11, etc.
   are stripped from dist/app.css because they only appear in .tsx.
   The legacy automations.js / automations-rules.js avoided this by
   injecting their own <style> blocks (lines 802-856, 117-183) — we
   use the shared globals.css instead. */

/* Two-column configurator layout (triggers | arrow | actions) */
.flow-config {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.flow-config__col   { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.flow-config__arrow {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  color: #9ca3af;
  font-size: 1.75rem;
}
@media (min-width: 992px) {
  .flow-config__col {
    flex: 5 0 0;
    max-width: none;
  }
  .flow-config__arrow {
    flex: 2 0 0;
    max-width: none;
    padding: 0;
  }
}

/* Panel header bar — replaces bg-indigo-600 text-white px-3 py-2 rounded-t */
.flow-panel__head {
  padding: 0.625rem 0.75rem;
  background: #4f46e5;
  color: #ffffff;
  border-radius: 0.375rem 0.375rem 0 0;
}
.flow-panel__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.flow-panel__subtitle {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Clickable trigger/action list — replaces ul.list-none + li.mb-1 +
   button.bg-gray-100. Mirrors legacy .automation-view li a (padding:20px
   10px, background:#ebedef) but with the modern indigo accent. */
.flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.flow-list__item {
  margin-bottom: 0.375rem;
}
.flow-list__item:first-child {
  margin-top: 0.75rem;
}
.flow-list__trigger {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.875rem;
  background: #f3f4f6;
  color: #1f2937;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.flow-list__trigger:hover {
  background: #e5e7eb;
}
.flow-list__trigger--open {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.flow-list__trigger--open:hover {
  background: #c7d2fe;
}

/* Expanded dropdown / inputs container inside a list item */
.flow-list__expandable {
  padding: 0.5rem 0 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.flow-list__pills {
  padding: 0.25rem 0 0.25rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Configurator footer — mirrors legacy border-t + flex justify-end save
   button row. Replaces purged `border-t border-gray-200 mt-6 pt-4`. */
.flow-footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 1.5rem;
  padding-top: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.flow-footer__error {
  flex: 1 1 100%;
  margin: 0 0 0.5rem;
  padding: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  color: #b91c1c;
  font-size: 0.875rem;
}

/* ─── Flow rules table ─────────────────────────────────────────────── */
.flow-table {
  width: 100%;
  border-collapse: collapse;
}
.flow-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.flow-table thead th.is-center { text-align: center; }
.flow-table thead th.is-right  { text-align: right; }
.flow-table tbody td.is-center { text-align: center; }
.flow-table tbody td.is-right  { text-align: right; }
.flow-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}
.flow-table tbody tr:last-child {
  border-bottom: none;
}
.flow-table tbody td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  vertical-align: top;
  color: #1f2937;
}
.flow-table__label {
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: #6b7280;
  letter-spacing: 0.05em;
  margin: 0 0 0.125rem;
  line-height: 1.4;
}
.flow-table__value {
  color: #1f2937;
  font-size: 0.875rem;
  word-break: break-word;
  margin: 0;
}

/* Status cell layout */
.flow-table__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Toggle switch — replaces purged h-6 w-11 rounded-full bg-green-400 /
   bg-gray-300 + inner h-5 w-5 translate-x-5 span. Mirrors the legacy
   .switch / .switchOn pattern (public/scripts/automations-rules.js:141-182). */
.flow-switch {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  align-items: center;
  border-radius: 9999px;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  flex-shrink: 0;
}
.flow-switch::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  background: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.flow-switch--on {
  background: #22c55e;
}
.flow-switch--on::after {
  transform: translateX(1.25rem);
}
.flow-switch:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Delete link in the actions column */
.flow-table__delete {
  color: #dc2626;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0;
}
.flow-table__delete:hover {
  color: #b91c1c;
  text-decoration: underline;
}

/* ─── Centered modal overlay ──────────────────────────────────────────
   Purge-proof replacement for the Tailwind utilities used in centered
   modal dialogs (CreateBroadcastModal, confirm dialogs, etc.). Same
   root cause as the right-side drawer — `fixed inset-0 bg-black
   bg-opacity-50 flex items-center justify-center z-50` and the inner
   `bg-white rounded-lg p-6 w-full max-w-md shadow-xl` are stripped
   from dist/app.css because they only appear in .tsx files, causing
   the modal to render as inline static content below the page. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: drawer-backdrop-in 0.25s ease forwards;
}
.dialog {
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 28rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: dialog-pop-in 0.2s ease forwards;
}
@keyframes dialog-pop-in {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dialog__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
}
.dialog__label {
  display: block;
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}
.dialog__error {
  color: #dc2626;
  font-size: 0.875rem;
  margin: 0.5rem 0;
}
.dialog__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ─── Broadcast recipients filter panel ───────────────────────────────
   The filter mode (ALL / SEQUENCE / FORM / TAG) renders as a tab bar
   (radio behaviour, tab appearance). Below the bar: the active filter's
   content (multi-select checklist + hint), the reach result card, and
   a right-aligned action row. Replaces purged utilities (space-y-3,
   flex gap-3, max-h-48 overflow-y-auto border border-gray-200 rounded,
   text-3xl font-bold text-indigo-600, etc.). */

.filter-panel {
  padding: 1.25rem 0;
}
.filter-panel__hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
}
.filter-panel__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1.5rem;
}

/* Reach result banner */
.filter-reach {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.filter-reach__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0 0 0.125rem;
}
.filter-reach__number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #4f46e5;
  line-height: 1;
}
.filter-reach__sub {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Shared label/empty/status helpers used by the filter dropdown */
.checklist__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #6b7280;
  margin: 0 0 0.375rem;
}
.checklist__status {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 0.1875rem;
}
.checklist__empty {
  font-size: 0.75rem;
  color: #9ca3af;
  padding: 0.5rem;
  margin: 0;
}

/* Dropdown-style multi-select — a real <select> widget plus a list of
   currently-selected items with remove (×) buttons. Mirrors the legacy
   broadcast-recipients.js pattern. */
.selector {
  display: block;
  width: 100%;
  max-width: 32rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  cursor: pointer;
  font-family: inherit;
}
.selector:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.selector:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.selector-list {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.selector-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}
.selector-list__name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
  color: #1f2937;
  font-weight: 500;
}
.selector-list__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4f46e5;
  white-space: nowrap;
}
.selector-list__remove {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 0.25rem;
  transition: color 0.12s;
}
.selector-list__remove:hover {
  color: #dc2626;
}